/* ==========================================================
   Ema Paraschiv — Fine Art & Minimalist Editions
   Wabi-Sabi Interactive Aesthetics & Scroll Animations
   ========================================================== */

:root {
  --wabi-bg: #FBF9F5;          /* Warm alabaster canvas */
  --wabi-text: #1C1B19;        /* Deep sumi ink */
  --wabi-accent: #B8734F;      /* Earthen terracotta */
  --wabi-card-bg: #F0EDE8;     /* Organic linen */
  --wabi-card-border: #E5E0D8; /* Soft stone micro-border */
  --wabi-stage: #EAE6DF;       /* Inset display bed */
  --wabi-muted: #7A756D;       /* Weathered taupe */
  --wabi-font-serif: 'Cormorant Garamond', Georgia, serif;
  --wabi-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Global Canvas & Typography Overrides */
body {
  background-color: var(--wabi-bg) !important;
  color: var(--wabi-text) !important;
  font-family: var(--wabi-font-sans) !important;
  font-weight: 300 !important;
}

h1, h2, h3, h4,
.serif-heading,
.hero-heading,
.artwork-title,
.config-product-title,
.brand-logo {
  font-family: var(--wabi-font-serif) !important;
  color: var(--wabi-text) !important;
}

/* Strict Label Hierarchy: Uppercase, 11px, letter-spacing 0.15em */
.text-uppercase-label,
.hero-tagline,
.gallery-stats,
.filter-chip,
.btn-quick-config,
.btn-room-view,
.wall-ruler-metric,
.control-label {
  font-family: var(--wabi-font-sans) !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}

/* Terracotta Filter Bar Chips */
.filter-chip {
  background: rgba(240, 237, 232, 0.8) !important;
  border: 1px solid var(--wabi-card-border) !important;
  color: var(--wabi-text) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.filter-chip:hover {
  border-color: var(--wabi-accent) !important;
  color: var(--wabi-accent) !important;
}

.filter-chip.active {
  background: var(--wabi-accent) !important;
  color: #FAF8F5 !important;
  border-color: var(--wabi-accent) !important;
  box-shadow: 0 4px 14px rgba(184, 115, 79, 0.28) !important;
}

/* ==========================================================
   ARTWORK CARD: SCROLL REVEAL
   ========================================================== */
.artwork-card.wabi-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.artwork-card.wabi-reveal.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Quick Config Button with Terracotta Accent on Hover */
.btn-quick-config {
  background: rgba(250, 248, 245, 0.94) !important;
  border: 1px solid var(--wabi-card-border) !important;
  color: var(--wabi-text) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-quick-config:hover {
  background: var(--wabi-accent) !important;
  color: #FAF8F5 !important;
  border-color: var(--wabi-accent) !important;
  box-shadow: 0 4px 16px rgba(184, 115, 79, 0.32) !important;
}

/* Without hover the action becomes a quiet text link under the artwork. */
@media (hover: none), (max-width: 900px) {
  .artwork-card-actions {
    position: static;
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: 20px;
    padding-top: 4px;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .btn-quick-config,
  .btn-quick-config:hover,
  .btn-room-view {
    width: auto;
    max-width: none;
    min-height: 44px;
    padding: 0;
    background: none !important;
    color: var(--wabi-text) !important;
    border: none !important;
    border-radius: 0;
    box-shadow: none !important;
    backdrop-filter: none;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}

/* Add to Curation Primary Action Button */
.btn-add-to-cart {
  background: var(--wabi-text) !important;
  color: #FAF8F5 !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-add-to-cart:hover {
  background: var(--wabi-accent) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px -4px rgba(184, 115, 79, 0.35) !important;
}

/* ==========================================================
   CONFIGURATOR: REALISTIC SCALING & ADAPTIVE IMAGE CONTAINMENT
   ========================================================== */
.artwork-frame-visualizer {
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.framed-artwork-image,
.wall-artwork-scaler img {
  object-fit: contain !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

.wall-artwork-scaler {
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              padding 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@media (prefers-reduced-motion: reduce) {
  .artwork-card.wabi-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .artwork-thumbnail-container,
  .artwork-img,
  .artwork-room-preview {
    transition: none;
  }

  .artwork-card:hover .artwork-thumbnail-container {
    transform: none;
  }

  .artwork-card:has(:focus-visible) .artwork-thumbnail-container {
    transform: none;
  }

  .artwork-card.is-room-view .artwork-thumbnail-container {
    transform: none;
  }
}