/* ============================================================
   ARTEN — styles.css
   Haute-couture design system. Locked palette:
   Imperial Plum #43103A · Silk Pearl #EFE7EF ·
   Dusty Lavender Rose #A882A5 · Gold #B8956A
   ============================================================ */

/* ---------- 1. Design tokens ---------- */
:root{
  --plum:#43103A;
  --plum-deep:#2A0A24;
  --pearl:#EFE7EF;
  --pearl-soft:#F7F3F5;
  --rose:#A882A5;
  --gold:#B8956A;
  --gold-light:#D8BE96;
  --ink:#241019;
  --line: rgba(43,43,46,.1);
  --shadow-soft: 0 24px 60px -30px rgba(43,43,46,.18);
  --shadow-lift: 0 30px 70px -28px rgba(67,16,58,.22);

  /* light (default) theme surfaces — 60/30/10 rule:
     60% near-white base, 30% soft charcoal text, 10% plum/gold accent */
  --bg:#FAFAF8;
  --bg-elevated:#ffffff;
  --bg-section:var(--pearl-soft);
  --text:#2B2B2E;
  --text-soft: rgba(43,43,46,.6);
  --surface-glass: rgba(255,255,255,.6);
  --surface-glass-strong: rgba(255,255,255,.82);
  --border-glass: rgba(184,149,106,.28);
  --header-bg: rgba(250,250,248,.78);
  --hairline: rgba(43,43,46,.09);

  /* العربي أولاً في كل تركيبة، عشان يبقى هو الخط اللي فعلياً بيظهر —
     مش مجرد fallback بعد خطوط لاتينية متطبقش على حروف عربي أصلاً. */
  --font-display:'El Messiri', 'Playfair Display', 'Cormorant Garamond', serif;
  --font-serif:'Markazi Text', 'Cormorant Garamond', serif;
  --font-accent:'Aref Ruqaa', 'Playfair Display', serif;
  --font-sans:'Cairo', 'Montserrat', sans-serif;

  --ease: cubic-bezier(.16,.84,.28,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --radius-lg: 26px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --container: 1320px;
}

[data-theme="dark"]{
  --bg:var(--plum-deep);
  --bg-elevated:#33102C;
  --text:var(--pearl-soft);
  --text-soft: rgba(239,231,239,.64);
  --surface-glass: rgba(67,16,58,.45);
  --surface-glass-strong: rgba(67,16,58,.72);
  --border-glass: rgba(184,149,106,.28);
  --header-bg: rgba(42,10,36,.66);
  --line: rgba(239,231,239,.12);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

html{ background:var(--bg); }
body{
  margin:0;
  background:transparent;
  color:var(--text);
  font-family:var(--font-sans);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:color .5s var(--ease-soft);
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }
::selection{ background:var(--gold); color:var(--plum-deep); }

.container{ max-width:var(--container); margin:0 auto; padding:0 6vw; }
@media (min-width:1400px){ .container{ padding:0 48px; } }

h1,h2,h3,h4,h5,h6{ margin:0; font-family:var(--font-display); font-weight:600; }

/* ---------- 2. Custom cursor (desktop only) ---------- */
.cursor-dot,.cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
  border-radius:50%; transform:translate(-50%,-50%);
  will-change:transform; mix-blend-mode:difference;
}
.cursor-dot{ width:6px; height:6px; background:var(--gold); }
.cursor-ring{
  width:38px; height:38px; border:1px solid var(--gold);
  transition:width .3s var(--ease), height .3s var(--ease), opacity .3s;
  opacity:.8;
}
.cursor-ring.hover{ width:70px; height:70px; background:rgba(184,149,106,.12); }
.cursor-ring.view::after{ content:'عرض'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--gold); font-family:var(--font-sans); letter-spacing:.05em; }
@media (hover:none), (max-width:900px){ .cursor-dot,.cursor-ring{ display:none; } }

/* ---------- 0.b Ambient background (silk drift + gold petals) ---------- */
.ambient-bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; background:var(--bg);
  transition:background .5s var(--ease-soft);
}
.ambient-bg::before{
  content:''; position:absolute; inset:-10%;
  background:
    radial-gradient(38% 30% at 15% 20%, rgba(184,149,106,.14), transparent 60%),
    radial-gradient(32% 26% at 85% 15%, rgba(168,130,165,.16), transparent 60%),
    radial-gradient(40% 34% at 75% 85%, rgba(67,16,58,.10), transparent 60%),
    radial-gradient(30% 26% at 20% 88%, rgba(184,149,106,.12), transparent 60%);
  filter:blur(6px);
  animation:silkDrift 34s ease-in-out infinite alternate;
}
[data-theme="dark"] .ambient-bg::before{
  background:
    radial-gradient(38% 30% at 15% 20%, rgba(184,149,106,.16), transparent 60%),
    radial-gradient(32% 26% at 85% 15%, rgba(168,130,165,.14), transparent 60%),
    radial-gradient(40% 34% at 75% 85%, rgba(184,149,106,.10), transparent 60%),
    radial-gradient(30% 26% at 20% 88%, rgba(168,130,165,.12), transparent 60%);
}
@keyframes silkDrift{
  0%{ transform:translate(0,0) rotate(0deg) scale(1); }
  50%{ transform:translate(-2%,2%) rotate(3deg) scale(1.05); }
  100%{ transform:translate(2%,-2%) rotate(-2deg) scale(1.02); }
}
.ambient-petal{
  position:absolute; top:-40px; opacity:0; color:var(--gold);
  animation-name:petalFall; animation-timing-function:ease-in; animation-iteration-count:infinite;
  will-change:transform, opacity;
}
.ambient-petal svg{ width:100%; height:100%; display:block; fill:currentColor; }
@keyframes petalFall{
  0%{ transform:translateY(-5vh) translateX(0) rotate(0deg); opacity:0; }
  8%{ opacity:.35; }
  50%{ transform:translateY(52vh) translateX(var(--drift,20px)) rotate(160deg); opacity:.28; }
  92%{ opacity:.18; }
  100%{ transform:translateY(108vh) translateX(calc(var(--drift,20px) * -1)) rotate(320deg); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .ambient-bg::before{ animation:none; }
  .ambient-petal{ display:none; }
}
@media (max-width:700px){ .ambient-petal:nth-child(n+9){ display:none; } }


/* ---------- 0.c Story Thread — signature scroll wayfinder ---------- */
.story-thread{
  position:fixed; top:50%; left:30px; transform:translateY(-50%); z-index:850;
  height:44vh; max-height:420px; display:flex; align-items:center;
}
.thread-track{
  position:relative; width:2px; height:100%; border-radius:2px;
  background:repeating-linear-gradient(to bottom, var(--line) 0 4px, transparent 4px 10px);
}
.thread-fill{
  position:absolute; top:0; left:0; width:100%; height:0%;
  background:linear-gradient(to bottom, var(--gold), var(--rose));
  border-radius:2px; box-shadow:0 0 10px rgba(184,149,106,.5);
  transition:height .15s linear;
}
.thread-nodes{ position:absolute; inset:0; }
.thread-node{
  position:absolute; right:50%; transform:translate(50%,-50%);
}
.thread-dot{
  width:9px; height:9px; border-radius:50%; background:var(--bg-elevated); border:1.5px solid var(--rose);
  padding:0; transition:all .4s var(--ease); position:relative; flex-shrink:0; cursor:pointer; display:block;
}
.thread-dot::after{
  content:''; position:absolute; inset:-7px; border-radius:50%; border:1px solid var(--gold); opacity:0;
  transition:opacity .4s;
}
.thread-node.lit .thread-dot{ background:var(--gold); border-color:var(--gold); box-shadow:0 0 8px rgba(184,149,106,.6); }
.thread-node.active .thread-dot::after{ opacity:.6; }
.thread-label{
  position:absolute; top:50%; left:calc(100% + 12px);
  font-size:11px; letter-spacing:.04em; color:var(--text); white-space:nowrap; opacity:0;
  transform:translateY(-50%) translateX(-6px);
  transition:opacity .35s var(--ease), transform .35s var(--ease); pointer-events:none;
  background:var(--surface-glass-strong); backdrop-filter:blur(8px);
  padding:5px 12px; border-radius:999px; border:1px solid var(--border-glass);
}
.thread-node:hover .thread-label,.thread-node.active .thread-label{ opacity:1; transform:translateY(-50%) translateX(0); }
@media (max-width:1180px){ .story-thread{ display:none; } }

.preloader{
  position:fixed; inset:0; z-index:10000;
  background:radial-gradient(circle at 50% 42%, #5c2350, var(--plum) 65%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  transition:opacity .9s var(--ease-soft), visibility .9s, transform .9s var(--ease-soft);
}
.preloader.hidden{ opacity:0; visibility:hidden; pointer-events:none; transform:scale(1.03); }
.preloader-video{
  width:100%; height:100%; object-fit:cover;
}

/* ---------- 4. Scroll progress ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg,var(--gold),var(--rose));
  z-index:9998;
}

/* ---------- 5. Header ---------- */
.site-header{
  position:fixed; inset-inline:0; top:0; z-index:900;
  background:transparent; transition:background .4s var(--ease-soft), box-shadow .4s, backdrop-filter .4s;
}
.site-header.scrolled{
  background:var(--header-bg); backdrop-filter:blur(20px) saturate(140%);
  box-shadow:0 1px 0 var(--border-glass);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:20px 6vw; gap:24px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{ width:26px; height:26px; color:var(--gold); }
.brand-word{ font-family:var(--font-display); font-size:20px; letter-spacing:.28em; color:var(--plum); }
[data-theme="dark"] .brand-word{ color:var(--pearl); }

.icon-btn{
  background:none; border:none; color:var(--plum); display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%; transition:background .3s, color .3s;
  position:relative;
}
[data-theme="dark"] .icon-btn{ color:var(--pearl); }
.icon-btn:hover{ background:var(--surface-glass); color:var(--gold); }

.main-nav{ display:flex; align-items:center; gap:38px; }
.nav-link{
  font-size:13px; letter-spacing:.06em; color:var(--text); position:relative; padding:4px 0;
}
.nav-link::after{
  content:''; position:absolute; bottom:-3px; right:0; left:auto; width:0; height:1px; background:var(--gold);
  transition:width .35s var(--ease);
}
.nav-link:hover::after{ width:100%; }
.nav-link-social{ color:var(--gold); }
.nav-close, .nav-overlay{ display:none; }

.header-actions{ display:flex; align-items:center; gap:6px; }
.cart-btn{ position:relative; }
.cart-count{
  position:absolute; top:2px; left:2px; background:var(--gold); color:var(--plum-deep);
  font-size:10px; font-weight:700; width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:transform .3s var(--ease);
}
.cart-count.bump{ transform:scale(1.5); }
.wishlist-count{
  position:absolute; top:2px; left:2px; background:var(--rose); color:#fff;
  font-size:10px; font-weight:700; width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.theme-toggle svg{ width:18px; height:18px; }
.theme-toggle .icon-moon{ display:none; }
[data-theme="dark"] .theme-toggle .icon-sun{ display:none; }
[data-theme="dark"] .theme-toggle .icon-moon{ display:block; }

@media (max-width:960px){
  .main-nav{
    position:fixed; inset-block:0; right:0; width:min(340px,84vw); z-index:1000;
    background:var(--surface-glass-strong); backdrop-filter:blur(24px);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:28px; padding:0 40px;
    transform:translateX(100%); transition:transform .5s var(--ease); border-inline-start:1px solid var(--border-glass);
  }
  .main-nav.open{ transform:translateX(0); }
  .nav-close{ position:absolute; top:20px; left:20px; font-size:26px; display:flex; }
  .nav-overlay{
    display:block; position:fixed; inset:0; background:rgba(20,6,16,.5); z-index:999; opacity:0; pointer-events:none;
    transition:opacity .4s; backdrop-filter:blur(2px);
  }
  .nav-overlay.open{ opacity:1; pointer-events:auto; }
  .nav-toggle{ display:flex; flex-direction:column; gap:5px; padding:10px; }
  .nav-toggle span{ width:18px; height:1.5px; background:currentColor; display:block; }
}
@media (min-width:961px){ .nav-toggle{ display:none; } }

/* ---------- 6. Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 34px; font-size:13.5px; letter-spacing:.01em; border-radius:999px; font-weight:600;
  border:1px solid transparent; transition:transform .4s var(--ease), background .4s, color .4s, border-color .4s, box-shadow .4s;
  white-space:nowrap;
}
.btn-primary{ background:var(--plum); color:var(--pearl); box-shadow:0 10px 30px -12px rgba(67,16,58,.55); }
.btn-primary:hover{ background:var(--gold); color:var(--plum-deep); transform:translateY(-2px); box-shadow:0 16px 34px -14px rgba(184,149,106,.6); }
.btn-ghost{ border-color:var(--border-glass); color:var(--text); backdrop-filter:blur(10px); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }
.btn-outline{ border-color:var(--plum); color:var(--plum); }
[data-theme="dark"] .btn-outline{ border-color:var(--gold-light); color:var(--gold-light); }
.btn-outline:hover{ background:var(--plum); color:var(--pearl); }
.btn-full{ width:100%; }
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none !important; }

/* ---------- 7. Hero ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden;
  padding:150px 0 70px;
}
.hero-texture{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(circle at 18% 22%, rgba(184,149,106,.22), transparent 45%),
    radial-gradient(circle at 82% 78%, rgba(168,130,165,.28), transparent 50%),
    linear-gradient(160deg, var(--bg) 0%, var(--bg) 100%);
}
.hero-watermark{
  position:absolute; width:56vw; max-width:640px; color:var(--plum); opacity:.04; z-index:0;
  top:8%; right:-8%;
  fill:currentColor;
}
[data-theme="dark"] .hero-watermark{ opacity:.06; }

/* ---------- 7b. Hero background video (opt-in) ----------
   Drop <div class="hero-media"> (see markup below) as the FIRST child of
   .hero and add class="has-video" to .hero — the video sits behind
   .hero-texture/.hero-grid automatically via z-index stacking, no other
   markup changes required. Falls back cleanly to the existing gradient
   background if the browser can't play video or the file is missing. */
.hero.has-video .hero-texture{
  opacity:.28;
  background:
    radial-gradient(circle at 18% 22%, rgba(184,149,106,.16), transparent 45%),
    radial-gradient(circle at 82% 78%, rgba(168,130,165,.2), transparent 50%);
}
.hero-media{
  position:absolute; inset:0; z-index:-1; overflow:hidden; background:var(--plum-deep);
}
.hero-media video{
  position:absolute; top:50%; left:50%; width:100%; height:100%;
  min-width:100%; min-height:100%; object-fit:cover;
  transform:translate(-50%,-50%);
}
.hero-media::after{
  /* directional vignette: just enough contrast for the text side and the
     top/bottom edges, while leaving the middle of the footage clear */
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(to left, rgba(18,6,16,.62) 0%, rgba(18,6,16,.22) 32%, transparent 58%),
    linear-gradient(180deg, rgba(18,6,16,.4) 0%, transparent 22%, transparent 72%, rgba(18,6,16,.45) 100%);
}
[dir="ltr"] .hero-media::after{
  background:
    linear-gradient(to right, rgba(18,6,16,.62) 0%, rgba(18,6,16,.22) 32%, transparent 58%),
    linear-gradient(180deg, rgba(18,6,16,.4) 0%, transparent 22%, transparent 72%, rgba(18,6,16,.45) 100%);
}
@media (prefers-reduced-motion: reduce){
  .hero-media video{ display:none; } /* poster/background-image fallback takes over */
  .hero-media{ background-size:cover; background-position:center; }
}
/* over moving footage the hero always reads like the dark theme, regardless of the
   light/dark toggle, so text stays legible against the video */
.hero.has-video .hero-title{ color:var(--pearl); }
.hero.has-video .hero-sub{ color:rgba(239,231,239,.72); }
.hero.has-video .hero-trust p{ color:rgba(239,231,239,.72); }
.hero.has-video .hero-trust p strong{ color:var(--pearl); }
.hero.has-video .hero-eyebrow{ color:var(--gold-light); }

.hero-grid{
  position:relative; z-index:1; display:grid; grid-template-columns:1fr; justify-items:center; text-align:center; align-items:center;
}

/* ---- text column ---- */
.hero-content{ max-width:560px; }
.hero-eyebrow{
  font-family:var(--font-sans); letter-spacing:.32em; font-size:11px; text-transform:uppercase;
  color:var(--gold); margin:0 0 22px;
}
.hero-eyebrow-ar{
  font-family:var(--font-serif); letter-spacing:.01em; text-transform:none; font-size:13px;
  color:var(--text-soft); margin-inline-start:6px;
}
.hero.has-video .hero-eyebrow-ar{ color:rgba(239,231,239,.6); }
.hero-title{
  font-size:clamp(38px,4.6vw,64px); line-height:1.12; color:var(--plum); margin:0 0 24px;
}
[data-theme="dark"] .hero-title{ color:var(--pearl); }
.hero-title em{ font-family:var(--font-accent); font-style:normal; color:var(--rose); }
.hero-sub{ font-size:clamp(15px,1.3vw,17.5px); color:var(--text-soft); max-width:480px; margin:0 0 34px; font-family:var(--font-serif); }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:32px; justify-content:center; }
.hero-highlights{ justify-content:center;
  list-style:none; margin:0 0 38px; padding:0; display:flex; flex-wrap:wrap; gap:10px 22px;
}
.hero-highlights li{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-soft); }
.hero-highlights svg{ flex-shrink:0; color:var(--gold); }
.hero.has-video .hero-highlights li{ color:rgba(239,231,239,.75); }
.hero.has-video .hero-highlights svg{ color:var(--gold-light); }
@media (max-width:520px){ .hero-eyebrow-ar{ display:block; margin-inline-start:0; margin-top:4px; } }
.hero-trust{ display:flex; align-items:center; gap:14px; justify-content:center; }
.hero-trust-stars{ display:flex; gap:2px; color:var(--gold); }
.hero-trust p{ font-size:13px; color:var(--text-soft); margin:0; }
.hero-trust p strong{ color:var(--text); font-family:var(--font-display); font-size:15px; }


@media (max-width:1080px){
  .hero-content{ max-width:640px; margin:0 auto; }
}
@media (max-width:640px){
  .hero{ padding-top:130px; }
}

.hero-scroll-cue{
  position:absolute; bottom:34px; right:50%; transform:translateX(50%); z-index:1;
  width:1px; height:52px; background:linear-gradient(var(--gold), transparent);
}
.hero-scroll-cue span{
  position:absolute; top:0; right:-2.5px; width:6px; height:6px; border-radius:50%; background:var(--gold);
  animation:cueDrop 2.2s var(--ease) infinite;
}
@keyframes cueDrop{ 0%{ top:0; opacity:1;} 90%{ opacity:0;} 100%{ top:52px; opacity:0;} }

/* reveal / split text */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.active{ opacity:1; transform:translateY(0); }
.split-line{ overflow:hidden; display:block; }
.split-line span{ display:inline-block; transform:translateY(110%); transition:transform .9s var(--ease); }
.split-line.active span{ transform:translateY(0); }

/* ---------- 8. Marquee ---------- */
.marquee-band{
  border-block:1px solid var(--line); background:var(--surface-glass); backdrop-filter:blur(10px);
  overflow:hidden; padding:16px 0;
}
.marquee-track{ display:flex; width:max-content; gap:26px; animation:marquee 26s linear infinite; }
.marquee-track span{ font-family:var(--font-accent); font-style:normal; font-size:17px; letter-spacing:.05em; color:var(--rose); white-space:nowrap; }
.marquee-dot{ width:5px; height:5px; border-radius:50%; background:var(--gold); align-self:center; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- 9. Section heading ---------- */
.section-heading{ margin-bottom:52px; }
.section-heading.center{ text-align:center; }
.section-heading h5{
  display:flex; align-items:center; gap:12px; font-family:var(--font-sans); font-weight:600;
  font-size:12px; letter-spacing:.04em; color:var(--gold); margin:0 0 14px;
}
.section-heading.center h5{ justify-content:center; }
.section-heading h5 span{ width:34px; height:1px; background:var(--gold); }
.section-heading h2{ font-size:clamp(30px,3.6vw,46px); color:var(--plum); }
[data-theme="dark"] .section-heading h2{ color:var(--pearl); }


/* ---------- 10. Collection / filters ---------- */
.collection{ padding:clamp(80px,10vw,120px) 0 clamp(60px,8vw,90px); }
.filter-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:clamp(30px,4vw,46px); }
.filter-tab{
  background:var(--surface-glass); border:1px solid var(--border-glass); color:var(--text);
  padding:10px 22px; border-radius:999px; font-size:12.5px; letter-spacing:.05em;
  transition:all .35s var(--ease); backdrop-filter:blur(10px);
}
.filter-tab:hover{ border-color:var(--gold); }
.filter-tab.active{ background:var(--plum); color:var(--pearl); border-color:var(--plum); }

.collection-filters{
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(16px,2.4vw,28px);
  padding:16px 22px; margin-bottom:clamp(30px,4vw,46px);
  background:var(--surface-glass); border:1px solid var(--border-glass);
  border-radius:var(--radius-md); backdrop-filter:blur(10px);
}
.filter-group{ display:flex; align-items:center; gap:10px; }
.filter-group-label{ font-size:12px; letter-spacing:.04em; color:var(--text-soft); flex-shrink:0; }
.filter-price-group label{ font-size:12px; letter-spacing:.04em; color:var(--text-soft); flex-shrink:0; white-space:nowrap; }
.filter-price-group input[type=range]{ width:130px; accent-color:var(--gold); }
.filter-price-label{ font-size:12px; color:var(--text); font-weight:600; white-space:nowrap; min-width:74px; }

.size-filter-list{ display:flex; gap:6px; }
.size-filter-btn{
  min-width:34px; height:30px; padding:0 8px; border-radius:8px;
  border:1px solid var(--border-glass); background:transparent; color:var(--text);
  font-size:11.5px; letter-spacing:.03em; transition:all .3s var(--ease);
}
.size-filter-btn:hover{ border-color:var(--gold); }
.size-filter-btn.active{ background:var(--plum); color:var(--pearl); border-color:var(--plum); }

.filter-sort-group label{ font-size:12px; letter-spacing:.04em; color:var(--text-soft); flex-shrink:0; white-space:nowrap; }
.filter-sort-group select{
  background:var(--bg-elevated); color:var(--text); border:1px solid var(--border-glass);
  border-radius:8px; padding:7px 12px; font-size:12px; font-family:inherit; cursor:pointer;
}

.filter-reset-btn{
  margin-inline-start:auto; background:none; border:none; color:var(--gold);
  font-size:12px; letter-spacing:.03em; text-decoration:underline; text-underline-offset:3px;
  cursor:pointer; padding:0;
}
.filter-reset-btn:hover{ color:var(--gold-light); }

@media (max-width:700px){
  .collection-filters{ padding:14px 16px; gap:14px; }
  .filter-reset-btn{ margin-inline-start:0; width:100%; text-align:center; }
}

/* ---------- Strict, scalable product grid ----------
   Every card is the same width, the same height, and holds its content in a
   fixed vertical rhythm (image → eyebrow → title(2-line clamp) → price →
   meta → button-pinned-to-bottom). This holds for 6 products or 300 — the
   grid never depends on item count or how much text a given product has. */
.products-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(258px, 1fr));
  gap:clamp(18px, 2.2vw, 28px);
  align-items:stretch; /* forces every card in a row to match the tallest */
}
@media (max-width:700px){
  .products-grid{ grid-template-columns:repeat(2, 1fr); gap:14px; }
}
@media (max-width:420px){
  .products-grid{ grid-template-columns:1fr; }
}

.product-card{
  display:flex; flex-direction:column; height:100%; position:relative;
  background:var(--bg-elevated); border-radius:var(--radius-md); overflow:hidden;
  border:1px solid var(--line); transition:transform .28s var(--ease-soft), box-shadow .4s var(--ease);
  transform-style:preserve-3d; will-change:transform;
}
.product-card:hover{ box-shadow:var(--shadow-lift); }

/* Fixed aspect ratio — the source photo can be portrait, square or landscape;
   object-fit:cover always crops it into the same frame so every tile matches. */
.product-img-wrap{ position:relative; aspect-ratio:3/4; overflow:hidden; cursor:pointer; flex-shrink:0; background:var(--bg-section); }
.product-img-wrap img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s var(--ease), opacity .5s ease; }
.product-img-wrap img.img-back{ position:absolute; inset:0; opacity:0; }
.product-card:hover .product-img-wrap img{ transform:scale(1.07); }
.product-card:hover .product-img-wrap img.img-front{ opacity:0; }
.product-card:hover .product-img-wrap img.img-back{ opacity:1; }

.product-badge{
  position:absolute; top:14px; right:14px; z-index:2; background:var(--plum); color:var(--pearl);
  font-size:10px; letter-spacing:.08em; padding:6px 12px; border-radius:999px;
  opacity:0; transform:translateY(-6px); transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.product-badge.sale{ background:var(--rose); color:#fff; }
.product-badge.sold-out{ background:#3a3a3a; color:#fff; opacity:1 !important; transform:none !important; }
.product-badge.low-stock{ background:#b8722f; color:#fff; opacity:1 !important; transform:none !important; }
.product-card:hover .product-badge,
.product-card:focus-within .product-badge{ opacity:1; transform:translateY(0); }
@media (hover:none){ .product-badge{ opacity:1; transform:none; } }

.product-card.is-sold-out .product-img-wrap img{ filter:grayscale(.6); opacity:.65; }
.product-card.is-sold-out:hover .product-img-wrap img{ transform:none; }

.wishlist-btn{
  position:absolute; top:12px; left:12px; z-index:2; background:var(--surface-glass-strong); backdrop-filter:blur(8px);
  border:1px solid var(--border-glass); border-radius:50%; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  color:var(--plum); transition:transform .3s var(--ease), color .3s, background .3s;
  opacity:1;
}
[data-theme="dark"] .wishlist-btn{ color:var(--pearl); }
.wishlist-btn:hover{ color:var(--rose); transform:scale(1.1); }
.wishlist-btn.active{ color:#fff; background:var(--rose); border-color:var(--rose); }
.wishlist-btn.active svg{ fill:currentColor; }

.quick-view-btn{
  position:absolute; bottom:0; inset-inline:0; z-index:2; padding:12px; text-align:center;
  background:var(--surface-glass-strong); backdrop-filter:blur(10px); font-size:11px; letter-spacing:.1em;
  color:var(--plum); opacity:0; transform:translateY(100%); transition:transform .4s var(--ease), opacity .4s var(--ease);
  border:none; width:100%;
}
[data-theme="dark"] .quick-view-btn{ color:var(--pearl); }
.product-card:hover .quick-view-btn,
.product-card:focus-within .quick-view-btn{ opacity:1; transform:translateY(0); }
@media (hover:none){ .quick-view-btn{ opacity:1; transform:translateY(0); position:static; background:none; backdrop-filter:none; } }

/* Info block: flex column so the CTA always pins to the same baseline
   no matter how long the product name or how many badges are present. */
.product-info{ padding:20px 20px 22px; display:flex; flex-direction:column; flex:1; }
.product-info .product-eyebrow{ font-size:10.5px; letter-spacing:.02em; color:var(--gold); margin:0 0 6px; }
.product-info h4{
  font-weight:500; margin:0 0 10px; font-family:var(--font-serif); font-size:clamp(17px,1.4vw,20px); line-height:1.3;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; min-height:2.6em;
}
.product-price-row{ display:flex; align-items:baseline; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.product-price{ color:var(--gold); font-weight:600; font-size:15.5px; }
.product-compare-price{ text-decoration:line-through; color:var(--text-soft); font-size:12.5px; }
.product-meta-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:10px; }
.stars{ display:flex; gap:2px; color:var(--gold); flex-shrink:0; }
.stars svg{ width:12px; height:12px; }
.product-swatches{ display:flex; gap:6px; flex-wrap:wrap; }
.swatch{ width:15px; height:15px; border-radius:50%; border:1px solid var(--line); box-shadow:0 0 0 1px var(--bg-elevated) inset; }
.add-to-cart-btn{
  width:100%; background:none; border:1px solid var(--plum); color:var(--plum); padding:12px; border-radius:999px;
  font-size:11.5px; letter-spacing:.08em; transition:all .35s var(--ease); margin-top:auto; /* always pinned to card bottom */
}
[data-theme="dark"] .add-to-cart-btn{ border-color:var(--gold-light); color:var(--gold-light); }
.add-to-cart-btn:hover{ background:var(--plum); color:var(--pearl); border-color:var(--plum); }
.add-to-cart-btn:disabled{ opacity:.5; cursor:not-allowed; border-color:var(--line); color:var(--text-soft); background:none; }
.add-to-cart-btn:disabled:hover{ background:none; color:var(--text-soft); border-color:var(--line); }

/* ---------- 11. Stats band ---------- */
.stats-band{ background:var(--plum); color:var(--pearl); padding:80px 0; }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; text-align:center; }
.stat-number{ font-family:var(--font-display); font-size:clamp(30px,4vw,52px); color:var(--gold-light); }
.stat-item p{ margin-top:8px; font-size:12.5px; letter-spacing:.08em; opacity:.75; }
@media (max-width:700px){ .stats-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- 12. Story ---------- */
.story-section{ padding:120px 0; }
.story-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.story-image{ position:relative; border-radius:var(--radius-lg); overflow:hidden; }
.story-image img{ aspect-ratio:4/5; object-fit:cover; }
.story-badge{
  position:absolute; bottom:22px; left:22px; background:var(--surface-glass-strong); backdrop-filter:blur(14px);
  border:1px solid var(--border-glass); border-radius:var(--radius-sm); padding:10px 18px 10px 10px; display:flex; align-items:center; gap:12px;
}
.story-badge-logo{ width:38px; height:38px; border-radius:50%; object-fit:cover; border:1px solid var(--border-glass); }
.story-badge > div{ display:flex; flex-direction:column; }
.story-badge span{ font-size:9px; letter-spacing:.2em; color:var(--gold); }
.story-badge strong{ font-family:var(--font-display); font-size:16px; }
.story-content h5{ display:flex; align-items:center; gap:12px; font-size:12px; letter-spacing:.04em; color:var(--gold); margin-bottom:14px; }
.story-content h5 span{ width:34px; height:1px; background:var(--gold); }
.story-title{ font-size:clamp(26px,3vw,38px); margin-bottom:20px; color:var(--plum); }
[data-theme="dark"] .story-title{ color:var(--pearl); }
.story-quote{ font-family:var(--font-accent); font-style:normal; font-size:23px; color:var(--rose); margin-bottom:18px; line-height:1.5; }
.story-text{ color:var(--text-soft); margin-bottom:28px; }
@media (max-width:860px){ .story-grid{ grid-template-columns:1fr; } }

/* ---------- 13. Testimonials ---------- */
.testimonials-section{ padding:100px 0; }
.testimonials-track{ position:relative; max-width:640px; margin:0 auto; min-height:180px; }
.testimonial-card{
  position:absolute; inset:0; opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease);
  text-align:center; pointer-events:none;
}
.testimonial-card.active{ opacity:1; transform:translateY(0); pointer-events:auto; position:relative; }
.t-stars{ color:var(--gold); letter-spacing:3px; margin-bottom:16px; }
.testimonial-card p{ font-family:var(--font-accent); font-style:normal; font-size:22px; color:var(--text); margin-bottom:20px; line-height:1.6; }
.t-author strong{ display:block; font-size:13px; }
.t-author span{ font-size:11px; color:var(--text-soft); }
.testimonial-dots{ display:flex; justify-content:center; gap:8px; margin-top:34px; }
.t-dot{ width:6px; height:6px; border-radius:50%; background:var(--line); cursor:pointer; transition:all .3s; }
.t-dot.active{ background:var(--gold); width:20px; border-radius:4px; }

/* ---------- 15. Footer ---------- */
footer{ background:var(--plum); color:var(--pearl); padding:90px 0 0; }
[data-theme="dark"] footer{ background:#210a1c; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1.2fr; gap:40px; padding-bottom:70px; border-bottom:1px solid rgba(239,231,239,.14); }
.footer-brand p{ margin:16px 0 20px; font-size:13.5px; color:rgba(239,231,239,.65); max-width:280px; }
.footer-brand .brand-word{ color:var(--pearl); }
.brand-logo-img{ width:34px; height:34px; border-radius:50%; object-fit:cover; border:1px solid var(--border-glass); }
.social-links{ display:flex; gap:10px; }
.social-links a{ width:36px; height:36px; border:1px solid rgba(239,231,239,.25); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all .3s; }
.social-links a:hover{ background:var(--gold); border-color:var(--gold); color:var(--plum-deep); }
.footer-col h6{ font-size:12.5px; letter-spacing:.03em; color:var(--gold-light); margin-bottom:18px; }
.footer-col a{ display:block; font-size:13.5px; color:rgba(239,231,239,.72); margin-bottom:12px; transition:color .3s; }
.footer-col a:hover{ color:var(--gold-light); }
.footer-bottom{ padding:24px 0; font-size:12px; color:rgba(239,231,239,.5); }
.footer-bottom-inner{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---------- 16. Cart drawer ---------- */
.cart-overlay,.modal-overlay,.qv-overlay,.search-overlay,.size-overlay{
  position:fixed; inset:0; background:rgba(20,6,16,.55); backdrop-filter:blur(4px); z-index:1200;
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease-soft);
}
.cart-overlay.open,.modal-overlay.open,.qv-overlay.open,.search-overlay.open,.size-overlay.open{ opacity:1; pointer-events:auto; }

.cart-drawer{
  position:fixed; top:0; bottom:0; left:0; width:min(420px,92vw); z-index:1300;
  background:var(--surface-glass-strong); backdrop-filter:blur(26px);
  border-inline-end:1px solid var(--border-glass);
  display:flex; flex-direction:column; transform:translateX(-100%); transition:transform .55s var(--ease);
}
.cart-drawer.open{ transform:translateX(0); }
.cart-header{ display:flex; align-items:center; justify-content:space-between; padding:26px 28px; border-bottom:1px solid var(--line); }
.cart-header h3{ font-size:19px; }
.cart-items{ flex:1; overflow-y:auto; padding:20px 28px; }
.cart-empty{ text-align:center; color:var(--text-soft); margin-top:60px; font-size:14px; }
.cart-item{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); }
.cart-item img{ width:66px; height:82px; object-fit:cover; border-radius:8px; }
.cart-item-info{ flex:1; }
.cart-item-info h4{ font-size:13.5px; font-weight:500; margin-bottom:4px; }
.cart-item-meta{ font-size:11px; color:var(--text-soft); margin-bottom:10px; }
.cart-qty{ display:flex; align-items:center; gap:10px; }
.cart-qty button{ background:var(--surface-glass); border:1px solid var(--line); width:22px; height:22px; border-radius:50%; font-size:13px; }
.cart-remove{ background:none !important; border:none !important; width:auto !important; color:var(--rose); font-size:11px; margin-inline-start:auto; }
.cart-item-price{ font-size:13px; color:var(--gold); font-weight:600; white-space:nowrap; }
.cart-footer{ padding:24px 28px 28px; border-top:1px solid var(--line); }
.cart-subtotal-row{ display:flex; justify-content:space-between; font-size:15px; margin-bottom:8px; font-weight:600; }
.cart-note{ font-size:11.5px; color:var(--text-soft); margin-bottom:16px; }

/* ---------- 17. Checkout modal ---------- */
.checkout-modal{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-46%); width:min(520px,92vw); max-height:88vh; overflow-y:auto;
  background:var(--bg-elevated); border-radius:var(--radius-lg); z-index:1400; opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease-soft), transform .4s var(--ease-soft); border:1px solid var(--border-glass);
}
.checkout-modal.open{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%); }
.checkout-modal-header{ display:flex; justify-content:space-between; align-items:center; padding:24px 28px; border-bottom:1px solid var(--line); }
.checkout-form{ padding:24px 28px 30px; }
.form-group{ margin-bottom:16px; }
.form-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-group label{ display:block; font-size:11.5px; letter-spacing:.06em; color:var(--text-soft); margin-bottom:6px; }
.form-group input,.form-group textarea,.form-group select{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--line); background:var(--bg);
  color:var(--text); font-family:inherit; font-size:13.5px; resize:vertical; appearance:none;
}
.form-group select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8956A' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:left 14px center; background-size:14px; padding-left:36px; }
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{ outline:2px solid var(--gold); outline-offset:1px; }
.checkout-summary{ background:var(--surface-glass); border-radius:12px; padding:16px; margin:18px 0; font-size:12.5px; }
.checkout-summary-item{ display:flex; justify-content:space-between; margin-bottom:8px; color:var(--text-soft); }
.checkout-summary-total{ display:flex; justify-content:space-between; font-weight:700; padding-top:10px; border-top:1px solid var(--line); }
.btn-whatsapp{ background:#25D366; color:#fff; }
.btn-whatsapp:hover{ background:#1fb956; color:#fff; }
.coupon-row{ display:flex; gap:10px; }
.coupon-row input{ flex:1; }
.coupon-row .btn{ padding:0 18px; white-space:nowrap; }
.coupon-msg{ margin-top:6px; font-size:12px; min-height:15px; }
.coupon-msg.is-ok{ color:#2f9e58; }
.coupon-msg.is-err{ color:#c23b3b; }
.checkout-summary-item.is-discount{ color:#2f9e58; }

/* ---------- 18. Quick View modal (product page) ---------- */
.quick-view-modal{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-46%); width:min(1040px,95vw); max-height:90vh; overflow-y:auto;
  background:var(--bg-elevated); border-radius:var(--radius-lg); z-index:1400; opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease-soft), transform .4s var(--ease-soft); border:1px solid var(--border-glass);
  box-shadow:var(--shadow-lift);
}
.quick-view-modal.open{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%); }
.qv-close{ position:absolute; top:16px; left:16px; z-index:3; background:var(--surface-glass-strong); }
.qv-grid{ display:grid; grid-template-columns:1.05fr 1fr; }
.qv-gallery-col{ display:flex; flex-direction:column; }
.qv-gallery{ position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--bg-section); }
.qv-gallery img{ width:100%; height:100%; object-fit:cover; transition:opacity .4s var(--ease); }
.qv-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:50%;
  background:var(--surface-glass-strong); backdrop-filter:blur(10px); border:1px solid var(--border-glass);
  color:var(--text); font-size:20px; display:flex; align-items:center; justify-content:center; z-index:2;
  transition:all .3s var(--ease);
}
.qv-nav:hover{ background:var(--gold); color:var(--plum-deep); border-color:var(--gold); }
.qv-nav-prev{ right:14px; }
.qv-nav-next{ left:14px; }
.qv-thumbs{ display:flex; gap:10px; padding:14px; }
.qv-thumb{
  width:60px; aspect-ratio:3/4; border-radius:8px; overflow:hidden; border:2px solid transparent; opacity:.6;
  transition:all .3s var(--ease); padding:0; flex-shrink:0;
}
.qv-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.qv-thumb.active,.qv-thumb:hover{ opacity:1; border-color:var(--gold); }
.qv-info{ padding:38px; }
.qv-eyebrow{ font-size:11.5px; letter-spacing:.03em; color:var(--gold); margin:0 0 10px; }
.qv-info h3{ font-size:27px; margin-bottom:10px; font-family:var(--font-display); line-height:1.25; }
.qv-price-row{ display:flex; gap:12px; align-items:baseline; margin-bottom:14px; }
.qv-price{ color:var(--gold); font-size:19px; font-weight:700; }
.qv-compare{ text-decoration:line-through; color:var(--text-soft); }
.qv-badge{ display:inline-block; background:var(--plum); color:var(--pearl); font-size:10px; padding:5px 12px; border-radius:999px; margin-bottom:14px; }
.qv-meta{ display:flex; align-items:center; gap:10px; margin-bottom:20px; color:var(--text-soft); font-size:12.5px; }
.qv-block{ margin-bottom:22px; }
.qv-block label{ display:block; font-size:11.5px; letter-spacing:.01em; color:var(--text-soft); margin-bottom:10px; }
.size-options{ display:flex; gap:8px; flex-wrap:wrap; }
.size-option{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  font-size:12.5px; transition:all .3s;
}
.size-option.active,.size-option:hover{ border-color:var(--gold); background:var(--gold); color:var(--plum-deep); }
.size-option.unavailable{ opacity:.35; text-decoration:line-through; cursor:not-allowed; background:none; border-color:var(--line); color:var(--text-soft); }
.size-option.unavailable:hover{ border-color:var(--line); background:none; color:var(--text-soft); }
.color-options{ display:flex; gap:10px; }
.color-option{ width:28px; height:28px; border-radius:50%; border:2px solid transparent; cursor:pointer; position:relative; }
.color-option.active{ border-color:var(--gold); }
.color-option.unavailable{ cursor:not-allowed; opacity:.35; }
.color-option.unavailable::after{ content:''; position:absolute; inset:0; border-radius:50%; background:linear-gradient(to bottom right, transparent 46%, currentColor 48%, currentColor 52%, transparent 54%); color:var(--text-soft); }
.swatch.unavailable{ opacity:.35; }
.qv-qty-stepper{ display:inline-flex; align-items:center; gap:16px; border:1px solid var(--line); border-radius:999px; padding:8px 18px; }
.qv-qty-stepper button{ background:none; border:none; font-size:16px; color:var(--text); width:20px; }
.qv-qty-stepper button:disabled{ opacity:.3; }
.qv-qty-stepper span{ min-width:16px; text-align:center; font-size:13.5px; }
.qv-stock{ font-size:12px; margin-bottom:18px; display:flex; align-items:center; gap:6px; }
.qv-stock::before{ content:''; width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.qv-stock.is-in{ color:#3a8a5c; }
.qv-stock.is-in::before{ background:#3a8a5c; }
.qv-stock.is-low{ color:#b8722f; }
.qv-stock.is-low::before{ background:#b8722f; }
.qv-stock.is-out{ color:var(--rose); }
.qv-stock.is-out::before{ background:var(--rose); }
.qv-required{ color:var(--rose); font-style:normal; font-size:10.5px; letter-spacing:0; text-transform:none; }
.qv-validation-msg{ font-size:12px; color:var(--rose); background:rgba(168,130,165,.1); border:1px solid rgba(168,130,165,.3); border-radius:10px; padding:10px 14px; margin-bottom:16px; }
.qv-actions{ display:flex; gap:12px; margin-bottom:28px; }
.size-guide-link{ font-size:11.5px; color:var(--gold); text-decoration:underline; background:none; border:none; margin-top:10px; display:inline-block; }
.qv-tabs-block{ border-top:1px solid var(--line); padding-top:22px; }
.qv-tabs{ display:flex; gap:22px; margin-bottom:16px; }
.qv-tab{
  background:none; border:none; font-size:12px; letter-spacing:.03em; color:var(--text-soft); padding:0 0 8px;
  border-bottom:2px solid transparent; transition:all .3s;
}
.qv-tab.active{ color:var(--plum); border-color:var(--gold); font-weight:600; }
[data-theme="dark"] .qv-tab.active{ color:var(--pearl); }
.qv-tab-text{ font-size:13.5px; line-height:1.9; color:var(--text-soft); }
.qv-care-list{ list-style:none; margin:0; padding:0; font-size:13px; color:var(--text-soft); display:flex; flex-direction:column; gap:9px; }
.qv-care-list li{ padding-inline-start:18px; position:relative; }
.qv-care-list li::before{ content:'—'; position:absolute; right:0; color:var(--gold); }
@media (max-width:760px){
  .qv-grid{ grid-template-columns:1fr; }
  .qv-info{ padding:26px; }
  .qv-tabs{ gap:16px; overflow-x:auto; }
}

.qv-related-section{ border-top:1px solid var(--line); padding:26px 38px 34px; }
.qv-related-title{ font-size:14px; font-family:var(--font-display); margin:0 0 16px; color:var(--text); }
.qv-related-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.qv-related-item{ cursor:pointer; }
.qv-related-img{ aspect-ratio:3/4; border-radius:10px; overflow:hidden; background:var(--bg-section); margin-bottom:8px; }
.qv-related-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease); }
.qv-related-item:hover .qv-related-img img{ transform:scale(1.06); }
.qv-related-name{ font-size:12px; line-height:1.4; margin:0 0 4px; color:var(--text); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.qv-related-price{ font-size:12px; color:var(--gold); font-weight:600; margin:0; }
@media (max-width:760px){
  .qv-related-section{ padding:22px 26px 28px; }
  .qv-related-grid{ grid-template-columns:repeat(2, 1fr); }
}

/* ---------- 19. Search modal ---------- */
.search-modal{
  position:fixed; top:8vh; left:50%; transform:translateX(-50%); width:min(680px,92vw); z-index:1400;
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease-soft), transform .35s var(--ease-soft);
}
.search-modal.open{ opacity:1; pointer-events:auto; transform:translate(-50%,10px); }
.search-box{
  background:var(--surface-glass-strong); backdrop-filter:blur(24px); border:1px solid var(--border-glass);
  border-radius:var(--radius-lg); padding:22px; max-height:76vh; overflow-y:auto;
}
.search-input-row{ display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--line); padding-bottom:16px; margin-bottom:16px; }
.search-input-row input{ flex:1; background:none; border:none; font-size:17px; color:var(--text); font-family:var(--font-serif); }
.search-input-row input:focus{ outline:none; }
.search-price-row{ display:flex; align-items:center; gap:12px; margin-bottom:16px; font-size:12px; color:var(--text-soft); }
.search-price-row input[type=range]{ flex:1; accent-color:var(--gold); }
.search-results{ display:flex; flex-direction:column; gap:4px; }
.search-result-item{ display:flex; align-items:center; gap:14px; padding:10px; border-radius:10px; transition:background .3s; cursor:pointer; }
.search-result-item:hover{ background:var(--surface-glass); }
.search-result-item img{ width:46px; height:58px; object-fit:cover; border-radius:6px; }
.search-result-item .sr-name{ font-size:13.5px; }
.search-result-item .sr-price{ margin-inline-start:auto; color:var(--gold); font-size:12.5px; }
.search-empty{ text-align:center; color:var(--text-soft); padding:30px 0; font-size:13px; }

/* ---------- 20. Size guide drawer ---------- */
.size-guide{
  position:fixed; top:0; bottom:0; right:0; width:min(420px,92vw); z-index:1450;
  background:var(--surface-glass-strong); backdrop-filter:blur(26px); border-inline-start:1px solid var(--border-glass);
  transform:translateX(100%); transition:transform .5s var(--ease); padding:28px; overflow-y:auto;
}
.size-guide.open{ transform:translateX(0); }
.size-guide table{ width:100%; border-collapse:collapse; margin-top:18px; font-size:12.5px; }
.size-guide th,.size-guide td{ padding:10px; text-align:center; border-bottom:1px solid var(--line); }
.size-guide th{ color:var(--gold); font-weight:600; }

/* ---------- 21. Toast ---------- */
.toast{
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px); z-index:1500;
  background:var(--plum); color:var(--pearl); padding:14px 26px; border-radius:999px; font-size:13px;
  opacity:0; pointer-events:none; transition:all .45s var(--ease); box-shadow:var(--shadow-soft);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- 21b. Powered by badge ---------- */
.powered-by-badge{
  display:flex; align-items:center; gap:12px;
  padding:11px 21px 11px 11px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(239,231,239,.18);
  font-size:17px; color:rgba(239,231,239,.6); text-decoration:none; transition:all .3s;
}
.powered-by-badge:hover{ border-color:var(--gold-light); color:var(--gold-light); }
.powered-by-badge img{ width:42px; height:42px; border-radius:9px; object-fit:contain; background:rgba(255,255,255,.9); padding:2px; }

/* ---------- 22. Fly to cart ---------- */
.fly-item{ position:fixed; z-index:2000; border-radius:8px; object-fit:cover; transition:all .8s cubic-bezier(.5,-0.4,.6,1.2); pointer-events:none; }

/* ---------- 23. Utility ---------- */
.hidden{ display:none !important; }
[dir="ltr"] body{ font-family:var(--font-sans); }

/* ============================================================
   24. INFO BADGES BAR — floating brand facts card
   ============================================================ */
.info-badges-bar{ position:relative; z-index:2; margin-top:-46px; padding:0 6vw; }
.info-badges-inner{
  display:flex; align-items:center; gap:40px; padding:26px 40px; flex-wrap:wrap;
  max-width:1180px; margin:0 auto; background:var(--bg-elevated); border-radius:var(--radius-lg);
  border:1px solid var(--border-glass); box-shadow:var(--shadow-lift);
}
.info-badge{ display:flex; flex-direction:column; gap:4px; }
.info-badge-label{ font-size:11px; letter-spacing:.02em; color:var(--gold); }
.info-badge strong{ font-family:var(--font-serif); font-size:16px; font-weight:600; color:var(--text); }
.info-badge-signature{
  font-family:var(--font-accent); font-style:normal; font-size:26px; color:var(--plum);
  padding-inline:28px; border-inline:1px solid var(--hairline); flex:0 0 auto;
}
[data-theme="dark"] .info-badge-signature{ color:var(--gold-light); }
.info-badge-tagline{ flex:1 1 260px; }
.info-badge-tagline p{ color:var(--text-soft); font-size:13.5px; max-width:340px; margin:0; }
@media (max-width:860px){
  .info-badges-bar{ margin-top:-30px; }
  .info-badges-inner{ gap:20px; padding:22px 26px; }
  .info-badge-signature{ padding-inline:0; border-inline:none; order:-1; flex-basis:100%; }
}

/* ============================================================
   25. OUR APPROACH — process steps
   ============================================================ */
.approach-section{ padding:120px 0; background:var(--bg-section); }
.approach-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:26px;
}
.approach-item{
  background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:32px 22px 26px; position:relative; text-align:center; transition:transform .35s var(--ease), box-shadow .4s var(--ease);
}
.approach-item:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); }
.approach-index{
  position:absolute; top:16px; left:18px; font-family:var(--font-display); font-size:13px; color:var(--gold); opacity:.7;
}
.approach-icon{
  width:56px; height:56px; margin:0 auto 18px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--gold); background:rgba(184,149,106,.1); border:1px solid var(--border-glass);
}
.approach-item h4{ font-family:var(--font-serif); font-size:19px; margin-bottom:10px; color:var(--plum); }
[data-theme="dark"] .approach-item h4{ color:var(--pearl); }
.approach-item p{ font-size:13px; color:var(--text-soft); line-height:1.6; }
@media (max-width:1080px){ .approach-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .approach-grid{ grid-template-columns:repeat(2,1fr); } }

/* ============================================================
   25b. OUR FABRICS — material storytelling strip
   ============================================================ */
.fabrics-section{ padding:60px 0 130px; }
.fabrics-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.fabrics-content h5{
  display:flex; align-items:center; gap:12px; font-size:11px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--gold); margin:0 0 14px;
}
.fabrics-content h5 span{ width:34px; height:1px; background:var(--gold); }
.fabrics-title{ font-size:clamp(24px,2.8vw,34px); color:var(--plum); margin:0 0 18px; line-height:1.3; }
[data-theme="dark"] .fabrics-title{ color:var(--pearl); }
.fabrics-text{ color:var(--text-soft); font-size:14.5px; line-height:1.75; max-width:460px; margin:0 0 32px; }
.fabrics-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:20px; }
.fabrics-list li{ display:flex; align-items:flex-start; gap:16px; }
.fabrics-swatch{
  width:36px; height:36px; border-radius:50%; flex-shrink:0; margin-top:2px;
  box-shadow:0 0 0 3px var(--bg), 0 0 0 4px var(--border-glass);
}
.fabrics-list strong{ font-family:var(--font-serif); font-size:16.5px; color:var(--text); display:block; margin-bottom:3px; }
.fabrics-list p{ font-size:13px; color:var(--text-soft); margin:0; line-height:1.6; }
.fabrics-image{ position:relative; border-radius:var(--radius-lg); overflow:hidden; }
.fabrics-image img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; }
.fabrics-badge{
  position:absolute; bottom:20px; inset-inline-start:20px; display:flex; align-items:center; gap:12px;
  padding:14px 18px; border-radius:var(--radius-md); background:var(--surface-glass-strong);
  backdrop-filter:blur(10px); border:1px solid var(--border-glass); box-shadow:var(--shadow-soft); max-width:230px;
}
.fabrics-badge span{ font-family:var(--font-display); font-size:20px; color:var(--gold); flex-shrink:0; }
.fabrics-badge p{ font-size:11.5px; color:var(--text); margin:0; line-height:1.4; }
@media (max-width:860px){
  .fabrics-grid{ grid-template-columns:1fr; gap:36px; }
  .fabrics-image{ order:-1; }
  .fabrics-text{ max-width:none; }
}

/* ============================================================
   26. WHAT WE OFFER — services split layout
   ============================================================ */
.offer-section{ padding:120px 0; }
.offer-inner{ display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; align-items:start; }
.offer-lead h5{
  display:flex; align-items:center; gap:12px; font-size:12px; letter-spacing:.04em;
  color:var(--gold); margin:0 0 18px;
}
.offer-lead h5 span{ width:34px; height:1px; background:var(--gold); }
.offer-lead h2{ font-size:clamp(28px,3.4vw,42px); color:var(--plum); line-height:1.25; }
[data-theme="dark"] .offer-lead h2{ color:var(--pearl); }
.offer-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.offer-card{
  background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-md); padding:28px 24px;
  transition:transform .35s var(--ease), box-shadow .4s var(--ease), border-color .35s var(--ease);
}
.offer-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-soft); border-color:var(--border-glass); }
.offer-icon{
  width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  color:var(--plum); background:var(--pearl-soft); margin-bottom:16px;
}
[data-theme="dark"] .offer-icon{ color:var(--gold-light); background:rgba(184,149,106,.12); }
.offer-card h4{ font-family:var(--font-serif); font-size:18px; margin-bottom:8px; color:var(--text); }
.offer-card p{ font-size:13px; color:var(--text-soft); line-height:1.6; }
@media (max-width:900px){ .offer-inner{ grid-template-columns:1fr; } }
@media (max-width:560px){ .offer-grid{ grid-template-columns:1fr; } }

/* ============================================================
   27. CLOSING CTA — brand statement before footer
   ============================================================ */
.closing-cta{
  position:relative; overflow:hidden; padding:130px 0; text-align:center;
  background:linear-gradient(160deg, var(--plum-deep), var(--plum));
  color:var(--pearl);
}
.closing-cta-watermark{
  position:absolute; width:520px; height:520px; top:50%; left:50%; transform:translate(-50%,-50%);
  color:var(--pearl); opacity:.05; pointer-events:none;
}
.closing-cta-inner{ position:relative; max-width:640px; margin:0 auto; }
.closing-cta h5{
  display:flex; align-items:center; justify-content:center; gap:12px; font-size:12px; letter-spacing:.04em;
  color:var(--gold-light); margin:0 0 20px;
}
.closing-cta h5 span{ width:34px; height:1px; background:var(--gold-light); }
.closing-cta-title{ font-size:clamp(32px,4.5vw,54px); margin-bottom:22px; color:var(--pearl); }
.closing-cta-title em{ font-family:var(--font-accent); font-style:normal; color:var(--gold-light); }
.closing-cta-text{ color:rgba(239,231,239,.75); font-size:15px; line-height:1.8; margin-bottom:36px; }
.closing-cta-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.closing-cta .btn-primary{ background:var(--gold); color:var(--plum-deep); box-shadow:0 10px 30px -12px rgba(184,149,106,.6); }
.closing-cta .btn-primary:hover{ background:var(--gold-light); }
.closing-cta .btn-ghost{ border-color:rgba(239,231,239,.3); color:var(--pearl); }
.closing-cta .btn-ghost:hover{ border-color:var(--gold-light); color:var(--gold-light); }