/* =====================================================================
   RightSilver — Global Stylesheet
   ---------------------------------------------------------------------
   One file, organised top→bottom:
     1. Fonts (self-hosted, local)
     2. Design tokens (:root)   ← change brand colours/spacing here
     3. Base / reset
     4. Layout primitives
     5. Buttons, badges, tags, forms
     6. Header / navigation / search
     7. Hero slider
     8. Sections, product cards, rails
     9. Catalog (filters) page
    10. Product detail page
    11. Cart / checkout
    12. Account
    13. About / misc sections
    14. Footer
    15. Drawer, toast, modal
    16. Animations & responsive
   ===================================================================== */

/* 1. FONTS ----------------------------------------------------------- */
@font-face{
  font-family:"Cormorant Garamond";
  src:url("../assets/fonts/CormorantGaramond.woff2") format("woff2");
  font-weight:300 700; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../assets/fonts/Inter.woff2") format("woff2");
  font-weight:100 900; font-display:swap;
}

/* 2. DESIGN TOKENS --------------------------------------------------- */
/* ---------------------------------------------------------------------
   THE PALETTE — change these six lines and the whole store follows.
   White ground, charcoal type, soft rose gold as the primary accent,
   warm silver grey as the secondary, champagne gold on hover.
   Nothing else in this file hard-codes a brand colour.
   --------------------------------------------------------------------- */
:root{
  /* ── brand palette ─────────────────────────────────────────────── */
  --c-bg:            #FFFFFF;   /* pure white ground                   */
  --c-ink:           #1A1A1C;   /* charcoal black — primary text       */
  --c-rose:          #B4816F;   /* soft rose gold — primary accent     */
  --c-silver:        #8E8A85;   /* warm silver grey — secondary accent */
  --c-champagne:     #A98544;   /* champagne gold — hover accent       */

  /* tints derived from the five above (kept explicit so they can be
     retuned by hand rather than guessed at by colour-mix support)     */
  --c-rose-soft:     #F6EDE9;
  --c-rose-line:     #E7D2C9;
  --c-rose-deep:     #96685A;
  --c-champagne-soft:#F7F0E1;
  --c-champagne-line:#E6D6B4;
  --c-warm-1:        #FBF9F7;   /* barely-there warm white             */
  --c-warm-2:        #F5F1ED;   /* warm sink / image backdrop          */
  --c-warm-3:        #EBE5DF;   /* warm hairline                       */

  /* ── semantic aliases (what the components actually use) ───────── */
  --bg:var(--c-bg);
  --bg-soft:var(--c-warm-1);
  --bg-sink:var(--c-warm-2);
  --bg-warm:var(--c-rose-soft);
  --ink:var(--c-ink);
  --graphite:#55524E;     /* secondary text, warmed off pure grey */
  --muted:#8B8681;        /* tertiary text */
  --line:var(--c-warm-3); /* hairline borders */
  --line-strong:#DED6CE;
  --accent:var(--c-rose);
  --accent-soft:var(--c-rose-soft);
  --accent-line:var(--c-rose-line);
  --accent-deep:var(--c-rose-deep);
  --hover:var(--c-champagne);
  --hover-soft:var(--c-champagne-soft);
  --hover-line:var(--c-champagne-line);
  --silver-1:var(--c-warm-1);
  --silver-2:#D8D3CC;
  --silver-3:var(--c-silver);
  --champagne:var(--c-champagne);
  --champagne-soft:var(--c-champagne-soft);
  --star:#C69A4B;
  --ok:#4A7A63;
  --ok-soft:#EAF1ED;
  --danger:#A8564A;
  --danger-soft:#F6EAE7;

  /* hero slide tones — one warm wash per slide */
  --tone-ivory:#FBF7F1;
  --tone-mist:#F4F2F1;
  --tone-sand:#F8F4EE;
  --tone-blush:#FAF2EF;

  /* ── type ──────────────────────────────────────────────────────── */
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --tracking-wide:.26em;   /* eyebrows, small caps */
  --tracking-btn:.09em;    /* buttons, nav */

  /* ── shape ─────────────────────────────────────────────────────── */
  --r:4px; --r-sm:3px; --r-lg:6px; --r-pill:999px;
  /* warm-tinted shadows — grey shadows are what make a page feel cheap */
  --shadow-1:0 1px 2px rgba(60,48,42,.04), 0 2px 8px rgba(60,48,42,.045);
  --shadow-2:0 10px 32px rgba(60,48,42,.09);
  --shadow-3:0 26px 64px rgba(60,48,42,.13);
  --shadow-accent:0 12px 34px rgba(180,129,111,.20);

  /* ── layout ────────────────────────────────────────────────────── */
  --container:1280px;
  --gutter:clamp(20px,4vw,44px);
  --header-h:78px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}

/* 3. BASE / RESET ---------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
/* A flat #FFFFFF page reads as unfinished at this scale — a very faint pearl
   wash (rose at the top, champagne lower down) keeps every section white at
   a glance while removing the "blank paper" feel. Fixed attachment so it
   doesn't repeat or seam between sections as the page scrolls. */
body{
  margin:0; color:var(--ink);
  background:
    radial-gradient(1100px 520px at 12% -6%, var(--c-rose-soft) 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 18%, var(--c-champagne-soft) 0%, transparent 55%),
    var(--bg);
  background-attachment:fixed;
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg,video{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; border:none; background:none}
input,select,textarea{font-family:inherit; font-size:1rem}
ul{margin:0; padding:0; list-style:none}
/* Cormorant is a display face — it wants to be large, light and airy. */
h1,h2,h3,h4{margin:0; font-family:var(--serif); font-weight:500; line-height:1.06; letter-spacing:-.012em}
h1{font-size:clamp(2.6rem,5.4vw,4.4rem)}
h2{font-size:clamp(2.05rem,3.6vw,3.1rem)}
h3{font-size:1.5rem}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
::selection{background:var(--accent-soft); color:var(--accent-deep)}
a{transition:color .22s var(--ease)}
strong{font-weight:600}

/* 4. LAYOUT PRIMITIVES ---------------------------------------------- */
.container{max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter)}
.section{padding-block:clamp(48px,7vw,96px)}
.section--tight{padding-block:clamp(32px,5vw,60px)}
/* Alternate-background utilities for breaking up long white runs between
   rails — soft washes, not colour blocks. Pair with plain .section so pure
   white cards/rails still read as a shade lighter than their backdrop. */
.section--pearl{background:linear-gradient(180deg,var(--c-rose-soft) 0%,var(--c-warm-1) 100%)}
.section--champagne{background:linear-gradient(180deg,var(--c-warm-1) 0%,var(--c-champagne-soft) 100%)}
.section--sink{background:var(--bg-sink)}
.center{text-align:center}
.muted{color:var(--graphite)}
.hairline{height:1px; background:var(--line); border:0; margin:0}
.grid{display:grid; gap:24px}
.stack-sm{display:flex; flex-direction:column; gap:8px}
.row{display:flex; align-items:center; gap:12px}
.spread{display:flex; align-items:center; justify-content:space-between; gap:16px}

/* eyebrow / section header (the .925 hairline signature motif) */
.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-size:.7rem; letter-spacing:var(--tracking-wide); text-transform:uppercase;
  color:var(--accent); font-weight:600;
}
.eyebrow::before{content:""; width:34px; height:1px; background:var(--accent-line)}
.section-head{margin-bottom:clamp(32px,4.5vw,56px)}
.section-head h2{margin-top:16px}
.section-head p{max-width:56ch; margin-top:14px; color:var(--graphite); line-height:1.75}
.section-head--center{text-align:center}
.section-head--center .eyebrow{justify-content:center}
.section-head--center .eyebrow::before{display:none}
.section-head--center .eyebrow::after{content:""; width:34px; height:1px; background:var(--accent-line)}
.section-head--center p{margin-inline:auto}
/* a hairline rule under centred section titles, the brand's signature mark */
.section-head--center h2::after{
  content:""; display:block; width:52px; height:1px; margin:18px auto 0;
  background:linear-gradient(to right,transparent,var(--accent-line),transparent);
}

/* 5. BUTTONS / BADGES / TAGS ---------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border-radius:var(--r-pill);
  font-size:.76rem; font-weight:600; text-transform:uppercase; letter-spacing:var(--tracking-btn);
  transition:transform .25s var(--ease), background .3s var(--ease), color .3s,
             border-color .3s, box-shadow .35s var(--ease);
  white-space:nowrap; position:relative;
}
.btn:active{transform:translateY(1px)}
/* any icon dropped into a .btn is capped to a sane size — without this,
   a raw <svg> with no intrinsic dimensions renders at browser default
   size and blows the button out */
.btn svg{width:15px; height:15px; stroke-width:1.6; flex:none}
.btn--primary{background:var(--ink); color:#fff}
.btn--primary:hover{background:var(--accent-deep); box-shadow:var(--shadow-accent)}
.btn--ghost{background:transparent; color:var(--ink); border:1px solid var(--line-strong)}
.btn--ghost:hover{border-color:var(--hover); color:var(--hover); background:var(--hover-soft)}
/* the accent button — rose gold, used for the hero CTA and key actions */
.btn--accent{background:var(--accent); color:#fff}
.btn--accent:hover{background:var(--hover); box-shadow:var(--shadow-accent)}
.btn--silver{background:linear-gradient(135deg,var(--silver-1),var(--silver-2)); color:var(--ink)}
.btn--silver:hover{background:linear-gradient(135deg,var(--hover-soft),var(--hover-line)); box-shadow:var(--shadow-2)}
.btn--block{width:100%}
.btn--sm{padding:10px 18px; font-size:.7rem}
.btn--wa{background:#1faa53; color:#fff}
.btn--wa:hover{background:#178a43}
.btn[disabled]{opacity:.5; cursor:not-allowed}
/* quiet text link with an animated rose underline */
.link-under{position:relative; font-weight:500; color:var(--ink)}
.link-under::after{content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease)}
.link-under:hover{color:var(--accent)}
.link-under:hover::after{transform:scaleX(1); transform-origin:left}

.badge{
  display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:var(--r-pill);
  font-size:.61rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  backdrop-filter:blur(6px); border:1px solid transparent;
}
.badge--ink{background:var(--ink); color:#fff}
.badge--silver{background:rgba(255,255,255,.86); color:var(--graphite); border-color:var(--line)}
.badge--deal{background:rgba(255,255,255,.9); color:var(--danger); border-color:#EBD5D0}
.badge--new{background:rgba(255,255,255,.9); color:var(--accent-deep); border-color:var(--accent-line)}
.badge--best{background:rgba(255,255,255,.9); color:var(--ok); border-color:#D6E3DB}
.badge--gift{background:rgba(255,255,255,.9); color:var(--champagne); border-color:var(--hover-line)}
.badge--trend{background:rgba(255,255,255,.9); color:var(--c-silver); border-color:var(--line-strong)}
.badge--limited{background:var(--ink); color:var(--hover-line); border-color:var(--ink)}

.tag-chip{
  display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border:1px solid var(--line);
  border-radius:var(--r-pill); font-size:.78rem; letter-spacing:.02em; color:var(--graphite); background:#fff;
  transition:.25s var(--ease); cursor:pointer;
}
.tag-chip:hover{border-color:var(--accent-line); color:var(--accent); background:var(--accent-soft)}
.tag-chip.is-active{background:var(--ink); color:#fff; border-color:var(--ink)}

/* forms */
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:16px}
.field label{font-size:.82rem; font-weight:600; color:var(--graphite)}
.input,select.input,textarea.input{
  width:100%; padding:12px 14px; border:1px solid var(--line-strong); border-radius:var(--r-sm);
  background:#fff; color:var(--ink); transition:border .2s, box-shadow .2s;
}
.input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.price{font-variant-numeric:tabular-nums}
.check input[type=checkbox]{accent-color:var(--accent)}

/* 6. HEADER / NAV / SEARCH ------------------------------------------ */
.topbar{background:var(--ink); color:#fff; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase}
.topbar .container{display:flex; justify-content:center; align-items:center; gap:20px; padding-block:11px; text-align:center}
.topbar span{opacity:.72}
.topbar span:nth-child(even){opacity:.34; color:var(--hover-line)}

.header{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(16px); border-bottom:1px solid var(--line);
  transition:box-shadow .35s var(--ease), background .35s, border-color .35s}
/* condense on scroll — the logo shrinks and the bar tightens */
.header.is-stuck{box-shadow:var(--shadow-1); background:rgba(255,255,255,.95); border-color:var(--line-strong)}
.header.is-stuck .header__bar{height:64px}
.header.is-stuck .header__logo svg{height:34px}
.header__bar{display:flex; align-items:center; gap:20px; height:var(--header-h); transition:height .35s var(--ease)}
.header__logo svg{height:42px; width:auto; transition:height .35s var(--ease)}
.nav{display:flex; align-items:center; gap:2px; margin-inline-start:10px}
.nav__link{padding:10px 13px; font-size:.72rem; font-weight:600; letter-spacing:var(--tracking-btn);
  text-transform:uppercase; color:var(--ink); transition:color .25s var(--ease); position:relative}
/* rose hairline that grows from the centre on hover */
.nav__link::after{content:""; position:absolute; left:13px; right:13px; bottom:4px; height:1px;
  background:var(--accent); transform:scaleX(0); transition:transform .32s var(--ease)}
.nav__link:hover{color:var(--accent)}
.nav__link:hover::after{transform:scaleX(1)}
.nav__link.is-current{color:var(--accent)}
.nav__link.is-current::after{transform:scaleX(1); background:var(--accent-line)}
.nav__item{position:relative}
.nav__item:hover .dropdown{opacity:1; visibility:visible; transform:translateY(0)}
.caret{width:6px; height:6px; border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor;
  transform:rotate(45deg) translateY(-2px); display:inline-block; margin-inline-start:6px}

.dropdown{position:absolute; top:calc(100% + 8px); left:0; min-width:520px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-3); padding:22px;
  opacity:0; visibility:hidden; transform:translateY(8px); transition:.22s var(--ease); z-index:70}
.dropdown__grid{display:grid; grid-template-columns:1fr 1fr; gap:6px 30px}
.dropdown__col h4{font-family:var(--sans); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); margin-bottom:8px}
.dropdown a{display:block; padding:8px 10px; border-radius:var(--r-sm); font-size:.88rem; color:var(--graphite);
  transition:.22s var(--ease)}
.dropdown a:hover{background:var(--accent-soft); color:var(--accent-deep); padding-left:16px}

.header__actions{margin-inline-start:auto; display:flex; align-items:center; gap:2px}
.iconbtn{position:relative; width:44px; height:44px; border-radius:var(--r-pill); display:grid; place-items:center;
  color:var(--ink); transition:color .25s var(--ease), background .25s var(--ease)}
.iconbtn:hover{background:var(--accent-soft); color:var(--accent)}
.iconbtn svg{width:20px; height:20px; stroke:currentColor; stroke-width:1.25; fill:none;
  stroke-linecap:round; stroke-linejoin:round}
.iconbtn .count{position:absolute; top:3px; right:3px; min-width:17px; height:17px; padding:0 4px;
  background:var(--accent); color:#fff; border-radius:var(--r-pill); font-size:.6rem; font-weight:600;
  display:grid; place-items:center; line-height:1; letter-spacing:0}

.search{position:relative; flex:1; max-width:400px}
.search__box{display:flex; align-items:center; gap:10px; padding:11px 16px; background:var(--bg-soft);
  border:1px solid var(--line); border-radius:var(--r-pill); transition:.25s var(--ease)}
.search__box:focus-within{border-color:var(--accent-line); background:#fff; box-shadow:0 0 0 3px var(--accent-soft)}
.search__box svg{width:17px; height:17px; stroke:var(--muted); stroke-width:1.3; fill:none; flex:none;
  stroke-linecap:round; stroke-linejoin:round}
.search__box:focus-within svg{stroke:var(--accent)}
.search__box input{border:none; background:none; outline:none; width:100%; font-size:.9rem}
.search__results{position:absolute; top:calc(100% + 10px); left:0; right:0; background:#fff;
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-3); padding:8px;
  max-height:60vh; overflow:auto; z-index:80; display:none}
.search__results.is-open{display:block; animation:fadeUp .2s var(--ease)}
.search__row{display:flex; gap:12px; align-items:center; padding:9px 10px; border-radius:var(--r-sm); transition:.15s}
.search__row:hover{background:var(--accent-soft)}
.search__row img{width:46px; height:56px; border-radius:var(--r-sm); object-fit:contain; padding:3px;
  background:#fff; border:1px solid var(--line)}
.search__row .nm{font-size:.9rem; font-weight:500}
.search__row .ct{font-size:.74rem; color:var(--muted)}
.search__row .pr{margin-inline-start:auto; font-weight:600; font-size:.88rem; color:var(--ink)}
.search__empty{padding:18px; text-align:center; color:var(--muted); font-size:.9rem}

.menu-toggle{display:none}

/* 7. HERO — editorial split (photograph + copy), one slide per collection */
.hero{position:relative; overflow:hidden; background:var(--tone-ivory)}
.hero__track{display:flex; transition:transform .8s var(--ease)}
/* minmax(0,…) stops the copy column from stealing width from the photograph */
.hero__slide{min-width:100%; position:relative; display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch; background:var(--slide-tone,var(--tone-ivory))}

/* photograph — a fixed height band, framed by a per-slide focal point so the
   model's face and the jewellery always stay inside the crop. Slides whose
   subject runs to the edge (a flat-lay) set --hfit:contain instead and sit
   on the slide's own tone, so nothing is ever cut. */
.hero__media{position:relative; overflow:hidden; height:clamp(430px,50vw,620px)}
.hero__media img{width:100%; height:100%;
  object-fit:var(--hfit,cover); object-position:var(--hfocal,center 30%);
  padding:var(--hpad,0);
  transform:scale(1.02); transition:transform 9s linear}
.hero__slide.is-live .hero__media img{transform:scale(1.09)}   /* slow Ken Burns drift */
/* a whisper of the slide tone over the photo edge, so it fuses with the copy */
.hero__media::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to right,transparent 62%,color-mix(in srgb,var(--slide-tone,#fff) 55%,transparent) 100%)}

.hero__copy{display:flex; flex-direction:column; justify-content:center; gap:0;
  padding:clamp(28px,5vw,72px) clamp(24px,5vw,76px)}
.hero__copy .eyebrow{margin-bottom:22px}
.hero__title{font-size:clamp(2.4rem,4.6vw,4.1rem); line-height:1.02; letter-spacing:-.018em; margin:0}
.hero__text{margin:22px 0 0; max-width:40ch; color:var(--graphite); font-size:1.03rem; line-height:1.8}
.hero__cta{margin-top:34px; align-self:flex-start}
/* copy animates in each time its slide becomes the live one */
.hero__slide .eyebrow,.hero__title,.hero__text,.hero__cta{
  opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.hero__slide.is-live .eyebrow{opacity:1; transform:none; transition-delay:.10s}
.hero__slide.is-live .hero__title{opacity:1; transform:none; transition-delay:.20s}
.hero__slide.is-live .hero__text {opacity:1; transform:none; transition-delay:.30s}
.hero__slide.is-live .hero__cta  {opacity:1; transform:none; transition-delay:.40s}
@media (prefers-reduced-motion:reduce){
  .hero__slide .eyebrow,.hero__title,.hero__text,.hero__cta{opacity:1; transform:none; transition:none}
  .hero__media img,.hero__slide.is-live .hero__media img{transform:none; transition:none}
}

.hero__dots{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); display:flex; gap:10px; z-index:5}
.hero__dot{width:22px; height:2px; border-radius:2px; background:var(--line-strong); transition:.35s var(--ease); cursor:pointer}
.hero__dot:hover{background:var(--accent-line)}
.hero__dot.is-active{background:var(--accent); width:40px}
.hero__arrow{position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.86); display:grid; place-items:center; z-index:5;
  box-shadow:var(--shadow-1); transition:.25s var(--ease); border:1px solid var(--line)}
.hero__arrow:hover{background:#fff; box-shadow:var(--shadow-2); border-color:var(--accent-line)}
.hero__arrow:hover svg{stroke:var(--accent)}
.hero__arrow svg{width:17px; height:17px; stroke:var(--ink); stroke-width:1.4; fill:none;
  stroke-linecap:round; stroke-linejoin:round; transition:stroke .25s}
.hero__arrow--prev{left:20px} .hero__arrow--next{right:20px}
@media (max-width:900px){
  .hero__slide{grid-template-columns:1fr}
  .hero__media{height:min(60vh,440px); order:-1}
  .hero__media::after{background:linear-gradient(to bottom,transparent 60%,color-mix(in srgb,var(--slide-tone,#fff) 70%,transparent) 100%)}
  .hero__copy{padding:32px var(--gutter) 46px; text-align:center; align-items:center}
  .hero__text{margin-inline:auto}
}
/* Phones: the hero was running near-full-screen (photo + copy each claiming
   their own generous share). Budget it to ~55-65dvh total instead — smaller
   photo band, tighter copy padding, a slightly smaller title — so the page
   below is visible without a full scroll, with nothing cropped or hidden. */
@media (max-width:600px){
  /* Plain px first as a fallback for any browser/WebView that doesn't
     understand dvh — an invalid dvh value is dropped silently, which
     otherwise let this fall all the way back to the desktop
     clamp(430px,...) rule above and blow the hero out to ~80% of the
     screen. dvh (where supported) then overrides these on the line below,
     for viewport-chrome-aware precision on modern mobile browsers. */
  .hero{max-height:520px; max-height:65dvh}
  .hero__slide{max-height:520px; max-height:65dvh}
  .hero__media{height:280px; height:38dvh; min-height:220px}
  .hero__copy{padding:20px var(--gutter) 28px; justify-content:flex-start}
  .hero__copy .eyebrow{margin-bottom:10px; font-size:.62rem}
  .hero__title{font-size:clamp(1.5rem,7vw,2.1rem); line-height:1.08}
  .hero__text{margin-top:10px; font-size:.88rem; line-height:1.6; max-width:34ch}
  .hero__cta{margin-top:16px; padding:11px 22px; font-size:.68rem}
  .hero__dots{bottom:10px}
  .hero__cta{align-self:center}
  .hero__arrow{display:none}
  .hero__dots{bottom:16px}
}

/* 8. SECTIONS / PRODUCT CARDS / RAILS ------------------------------- */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:22px}
.tile{position:relative; border-radius:var(--r); overflow:hidden; background:var(--bg-sink);
  aspect-ratio:5/6; transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
.tile::after{content:""; position:absolute; inset:0; border:1px solid var(--line);
  border-radius:inherit; pointer-events:none; transition:border-color .4s}
.tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-2)}
.tile:hover::after{border-color:var(--accent-line)}
.tile img{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease)}
.tile:hover img{transform:scale(1.06)}
.tile__label{position:absolute; inset:auto 0 0 0; padding:18px 16px 16px; font-weight:500;
  font-family:var(--serif); font-size:1.3rem; letter-spacing:-.01em; color:var(--ink);
  background:linear-gradient(to top,rgba(255,255,255,.97) 42%,rgba(255,255,255,0))}
.tile__label .muted{font-size:.78rem; font-family:var(--sans)}

.gender-split{display:grid; grid-template-columns:1fr 1fr; gap:28px}
.gender-card{position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:16/11; background:var(--bg-sink)}
.gender-card img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease)}
.gender-card:hover img{transform:scale(1.06)}
.gender-card__body{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(22px,3vw,38px);
  background:linear-gradient(to top,rgba(26,26,28,.62) 0%,rgba(26,26,28,.18) 48%,transparent 72%); color:#fff}
.gender-card__body .eyebrow{color:rgba(255,255,255,.82)}
.gender-card__body .eyebrow::before{background:rgba(255,255,255,.5)}
.gender-card__body h3{color:#fff; font-size:clamp(1.7rem,2.6vw,2.3rem); margin-top:10px}
/* a rose hairline that draws itself under the label on hover */
.gender-card__link{display:inline-flex; align-items:center; gap:9px; margin-top:14px;
  font-size:.7rem; font-weight:600; letter-spacing:var(--tracking-btn); text-transform:uppercase;
  color:#fff; position:relative; padding-bottom:6px}
.gender-card__link::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--c-rose-line); transform:scaleX(.4); transform-origin:left; transition:transform .45s var(--ease)}
.gender-card:hover .gender-card__link::after{transform:scaleX(1)}

/* product card ------------------------------------------------------ */
.rail{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(268px,1fr); gap:26px;
  overflow-x:auto; padding:6px 4px 16px; scroll-snap-type:x mandatory; scrollbar-width:thin;
  scrollbar-color:var(--line-strong) transparent}
.rail::-webkit-scrollbar{height:3px}
.rail::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:99px}
.rail::-webkit-scrollbar-thumb:hover{background:var(--accent-line)}
.product-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:32px 26px}

.card{position:relative; background:#fff; border-radius:var(--r); scroll-snap-align:start;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease); will-change:transform}
/* soft elevation + the gentlest tilt — no fake 3-D, nothing that skews the photo */
.card:hover{transform:translateY(-7px) rotate(-.35deg); box-shadow:var(--shadow-2)}
.card__media{position:relative; aspect-ratio:4/5; background:#fff; overflow:hidden; display:block;
  border-radius:var(--r)}
.card__media::after{content:""; position:absolute; inset:0; border:1px solid var(--line);
  border-radius:inherit; pointer-events:none; transition:border-color .45s; z-index:1}
.card:hover .card__media::after{border-color:var(--accent-line)}
/* fit + focal point come from the catalogue: studio cut-outs are contained so
   the jewellery is never sliced; lifestyle scenes cover with a focal point */
.card__media img{width:100%; height:100%;
  object-fit:var(--fit,contain); object-position:var(--pos,center);
  padding:var(--pad,7%);
  transition:opacity .55s var(--ease), transform .9s var(--ease)}
.card__media img.alt,.card__media video.alt{position:absolute; inset:0; opacity:0}
.card:hover .card__media img.main{opacity:0; transform:scale(1.03)}
.card:hover .card__media img.alt{opacity:1; transform:scale(1.05)}
/* a single-photo product simply zooms its one image instead of fading out */
.card__media.is-single img.main{opacity:1 !important}
.card:hover .card__media.is-single img.main{transform:scale(1.06)}
/* touch: a tap "peeks" the alternate photo instead of relying on :hover */
.card.is-peeked .card__media img.main{opacity:0}
.card.is-peeked .card__media img.alt{opacity:1; transform:scale(1.02)}

.card__tags{position:absolute; top:14px; left:14px; display:flex; flex-direction:column;
  align-items:flex-start; gap:6px; z-index:3}
.card__wish{position:absolute; top:12px; right:12px; width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.88); backdrop-filter:blur(6px); display:grid; place-items:center; z-index:3;
  border:1px solid var(--line); opacity:0; transform:translateY(-4px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), background .25s, border-color .25s}
.card:hover .card__wish,.card__wish.is-active,.card__wish:focus-visible{opacity:1; transform:none}
.card__wish:hover{background:#fff; border-color:var(--accent-line)}
.card__wish svg{width:17px; height:17px; stroke:var(--ink); stroke-width:1.25; fill:none;
  stroke-linecap:round; stroke-linejoin:round; transition:.25s}
.card__wish:hover svg{stroke:var(--accent)}
.card__wish.is-active svg{fill:var(--accent); stroke:var(--accent)}
/* compact action row — Buy Now / Add to Cart / Enquire. Small, quiet,
   never bigger than the photo they sit on; a glass strip, not three buttons
   competing with the product. */
.card__actions{position:absolute; left:10px; right:10px; bottom:10px; z-index:3;
  display:flex; gap:6px; transform:translateY(10px); opacity:0;
  transition:transform .4s var(--ease), opacity .3s var(--ease)}
.card:hover .card__actions{transform:none; opacity:1}
.cardbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:34px; padding:0 12px; border-radius:var(--r-pill);
  font-size:.68rem; font-weight:600; letter-spacing:.04em; white-space:nowrap;
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px); color:var(--ink);
  border:1px solid var(--line-strong); box-shadow:var(--shadow-1);
  transition:background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), transform .15s;
}
.cardbtn:active{transform:translateY(1px)}
.cardbtn svg{width:13px; height:13px; stroke:currentColor; stroke-width:1.4; fill:none;
  stroke-linecap:round; stroke-linejoin:round; flex:none}
.cardbtn--buy{flex:1.3; background:var(--ink); color:#fff; border-color:var(--ink)}
.cardbtn--buy:hover{background:var(--accent-deep); border-color:var(--accent-deep)}
.cardbtn--buy svg{stroke:var(--hover-line); fill:var(--hover-line)}
.cardbtn--add{flex:1.3}
.cardbtn--add:hover{background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent-deep)}
.cardbtn--icon{flex:none; width:34px; padding:0}
.cardbtn--icon:hover{background:#25D366; border-color:#25D366; color:#fff}
.cardbtn span{overflow:hidden; text-overflow:ellipsis}
@media (max-width:420px){ .cardbtn span{display:none} .cardbtn{padding:0; width:34px; flex:none} .cardbtn--buy,.cardbtn--add{flex:1} }

.card__body{padding:20px 4px 4px; text-align:center}
.card__cat{font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.card__name{font-family:var(--serif); font-size:1.36rem; font-weight:500; margin:9px 0 0; line-height:1.18;
  letter-spacing:-.01em; transition:color .25s var(--ease)}
.card:hover .card__name{color:var(--accent-deep)}
.card__rating{display:flex; align-items:center; justify-content:center; gap:6px; font-size:.74rem;
  color:var(--muted); margin:9px 0 12px}
.stars{--w:0; position:relative; display:inline-block; font-size:.8rem; color:var(--line-strong); letter-spacing:2px}
.stars::before{content:"★★★★★"}
.stars i{position:absolute; inset:0; width:var(--w); overflow:hidden; color:var(--star)}
.stars i::before{content:"★★★★★"}
/* price hierarchy: the payable figure leads, MRP and saving support it */
.card__price{display:flex; align-items:baseline; justify-content:center; gap:10px; flex-wrap:wrap}
.card__price .now{font-size:1.06rem; font-weight:600; letter-spacing:.01em; color:var(--ink)}
.card__price .was{font-size:.82rem; color:var(--muted); text-decoration:line-through; font-weight:400}
.card__price .off{font-size:.66rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent-deep); background:var(--accent-soft); padding:3px 9px; border-radius:var(--r-pill)}

/* 9. CATALOG (FILTERS) ---------------------------------------------- */
.catalog{display:grid; grid-template-columns:260px 1fr; gap:40px; align-items:start}
.filters{position:sticky; top:calc(var(--header-h) + 20px)}
.filters__group{padding:18px 0; border-bottom:1px solid var(--line)}
.filters__group h4{font-family:var(--sans); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); font-weight:600; margin-bottom:14px}
.check{display:flex; align-items:center; gap:10px; padding:5px 0; font-size:.9rem; color:var(--graphite); cursor:pointer}
.check input{accent-color:var(--accent); width:16px; height:16px}
.check:hover{color:var(--ink)}
.swatches{display:flex; flex-wrap:wrap; gap:10px}
.swatch{width:26px; height:26px; border-radius:50%; border:1px solid var(--line-strong); cursor:pointer; position:relative}
.swatch.is-active{outline:1.5px solid var(--accent); outline-offset:3px}
.catalog__head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; flex-wrap:wrap}
.catalog__count{color:var(--graphite); font-size:.9rem}
.sortbar{display:flex; align-items:center; gap:10px}
.filter-toggle{display:none}

/* 10. PRODUCT DETAIL ------------------------------------------------ */
.pdp{display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(28px,5vw,64px); align-items:start}
.gallery__main{position:relative; border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  aspect-ratio:4/5; background:#fff}
/* same fit/focal contract as the product card — a studio cut-out is contained
   so the full piece is visible; a lifestyle frame covers with a focal point.
   Deliberately static — no hover zoom; see js/product.js wire() for why. */
.gallery__main img{width:100%; height:100%;
  object-fit:var(--fit,contain); object-position:var(--pos,center); padding:var(--pad,5%)}
.gallery__thumbs{display:flex; gap:12px; margin-top:14px; flex-wrap:wrap}
.gallery__thumb{width:74px; height:92px; border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--line);
  cursor:pointer; transition:.25s var(--ease); background:#fff}
.gallery__thumb:hover{border-color:var(--accent-line)}
.gallery__thumb img{width:100%; height:100%; object-fit:var(--fit,contain); object-position:var(--pos,center);
  padding:var(--pad,6%)}
.gallery__thumb.is-active{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.gallery__thumb.video{position:relative}
.gallery__thumb.video::after{content:""; position:absolute; inset:0; background:rgba(26,26,28,.38)}
.gallery__thumb.video::before{content:""; position:absolute; top:50%; left:50%; z-index:2;
  transform:translate(-40%,-50%); border-style:solid; border-width:7px 0 7px 12px; border-color:transparent transparent transparent #fff}

.pdp__cat{font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent)}
.pdp h1{font-size:clamp(2.1rem,3.8vw,3.1rem); margin:14px 0 6px; font-weight:500}
.pdp__rating{display:flex; align-items:center; gap:10px; margin-bottom:18px; color:var(--graphite); font-size:.9rem}
.pdp__price{display:flex; align-items:baseline; gap:14px; margin:18px 0}
.pdp__price .now{font-size:2.1rem; font-weight:500; font-family:var(--serif); letter-spacing:-.01em}
.pdp__price .was{font-size:1.1rem; color:var(--muted); text-decoration:line-through}
.pdp__price .off{padding:5px 12px; border-radius:var(--r-pill); background:var(--accent-soft); color:var(--accent-deep);
  font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase}
.pdp__gst{font-size:.8rem; color:var(--muted); margin-top:-8px}
.pdp__opts{display:flex; flex-direction:column; gap:16px; margin:22px 0}
.opt-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.opt-row .lbl{font-size:.82rem; font-weight:600; color:var(--graphite); min-width:90px}
.coupon-box{display:flex; gap:10px; align-items:center; padding:13px 16px; border:1px dashed var(--accent-line);
  border-radius:var(--r-sm); background:var(--accent-soft); font-size:.85rem; color:var(--graphite)}
.coupon-box svg{width:18px; height:18px; stroke:var(--accent); stroke-width:1.3; fill:none; flex:none}
.coupon-box code{font-weight:600; letter-spacing:.08em; color:var(--accent-deep)}
.qty{display:inline-flex; align-items:center; border:1px solid var(--line-strong); border-radius:var(--r-pill); overflow:hidden}
.qty button{width:40px; height:40px; font-size:1.1rem; color:var(--ink)}
.qty button:hover{background:var(--accent-soft); color:var(--accent)}
.qty span{min-width:36px; text-align:center; font-weight:600}
/* CTAs: a compact primary pair, then a row of three equal icon actions —
   both rows sit well under the price/title above them, never dominating. */
.pdp__cta{display:flex; gap:10px; flex-wrap:wrap}
.pdp__cta--primary{margin:6px 0 10px}
.pdp__cta--primary .btn{flex:1; min-width:130px}
.pdp__cta--secondary{margin-bottom:20px}
.icobtn{
  flex:1; min-width:96px; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:38px; padding:0 12px; border-radius:var(--r-pill); border:1px solid var(--line-strong);
  background:#fff; color:var(--graphite); font-size:.74rem; font-weight:600; letter-spacing:.01em;
  transition:border-color .22s var(--ease), color .22s var(--ease), background .22s var(--ease);
}
.icobtn svg{width:15px; height:15px; stroke:currentColor; stroke-width:1.3; fill:none;
  stroke-linecap:round; stroke-linejoin:round; flex:none}
.icobtn:hover{border-color:var(--accent-line); color:var(--accent); background:var(--accent-soft)}
.icobtn.is-active{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
.icobtn.is-active svg{fill:var(--accent)}
.icobtn--wa:hover{border-color:#25D366; color:#1c9950; background:#EAFBF1}
@media (max-width:380px){ .icobtn span{display:none} .icobtn{min-width:0} }

.pdp__meta{display:flex; flex-direction:column; gap:8px; padding-top:18px; border-top:1px solid var(--line);
  font-size:.86rem; color:var(--graphite)}
.pdp__meta .row svg{width:18px; height:18px; stroke:var(--accent); stroke-width:1.3; fill:none;
  stroke-linecap:round; stroke-linejoin:round; flex:none}

.tabs{display:flex; gap:6px; border-bottom:1px solid var(--line); margin-top:14px; flex-wrap:wrap}
.tab{padding:14px 18px; font-size:.72rem; font-weight:600; letter-spacing:var(--tracking-btn); text-transform:uppercase;
  color:var(--muted); border-bottom:1px solid transparent; transition:.25s var(--ease); margin-bottom:-1px}
.tab:hover{color:var(--accent)}
.tab.is-active{color:var(--ink); border-color:var(--accent)}
.tab-panel{display:none; padding-top:24px; animation:fadeUp .3s var(--ease)}
.tab-panel.is-active{display:block}
.spec-table{width:100%; border-collapse:collapse}
.spec-table td{padding:11px 0; border-bottom:1px solid var(--line); font-size:.9rem}
.spec-table td:first-child{color:var(--muted); width:40%}
.care-list li{display:flex; gap:10px; padding:7px 0; color:var(--graphite); font-size:.92rem}
.care-list li::before{content:"—"; color:var(--accent-line)}

.reviews__summary{display:flex; gap:30px; align-items:center; flex-wrap:wrap; margin-bottom:24px}
.reviews__big{font-size:3.2rem; font-family:var(--serif); font-weight:500; line-height:1; color:var(--ink)}
.review{padding:18px 0; border-bottom:1px solid var(--line)}
.review__head{display:flex; align-items:center; gap:12px; margin-bottom:8px}
.review__avatar{width:40px; height:40px; border-radius:50%; background:var(--accent-soft); display:grid; place-items:center;
  font-weight:600; color:var(--accent-deep); font-size:.85rem; font-family:var(--serif)}

/* 11. CART / CHECKOUT ----------------------------------------------- */
.cartpage{display:grid; grid-template-columns:1fr 380px; gap:40px; align-items:start}
.cart-line{display:grid; grid-template-columns:96px 1fr auto; gap:16px; padding:20px 0; border-bottom:1px solid var(--line)}
.cart-line img{width:96px; height:116px; object-fit:contain; padding:6px; border-radius:var(--r-sm);
  background:#fff; border:1px solid var(--line)}
.cart-line__nm{font-family:var(--serif); font-size:1.2rem}
.cart-line__sub{font-size:.8rem; color:var(--muted)}
.cart-line__rm{font-size:.8rem; color:var(--graphite); text-decoration:underline; cursor:pointer}
.summary{position:sticky; top:calc(var(--header-h) + 20px); border:1px solid var(--line); border-radius:var(--r);
  padding:28px; background:var(--bg-soft)}
.summary h3{font-family:var(--sans); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--graphite); margin-bottom:18px}
.summary__row{display:flex; justify-content:space-between; padding:9px 0; font-size:.92rem; color:var(--graphite)}
.summary__row.total{border-top:1px solid var(--line); margin-top:8px; padding-top:16px; font-size:1.25rem;
  font-family:var(--serif); font-weight:500; color:var(--ink)}
.summary__free{color:var(--ok); font-weight:600}
.coupon-apply{display:flex; gap:8px; margin:8px 0 16px}
.coupon-apply .input{flex:1}
.empty-state{text-align:center; padding:80px 20px}
.empty-state svg{width:56px; height:56px; stroke:var(--accent-line); stroke-width:1; fill:none; margin:0 auto 20px;
  stroke-linecap:round; stroke-linejoin:round}

.steps{display:flex; gap:8px; margin-bottom:34px; flex-wrap:wrap}
.step{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:.85rem; font-weight:600}
.step .n{width:26px; height:26px; border-radius:50%; border:1px solid var(--line-strong); display:grid; place-items:center; font-size:.78rem}
.step.is-active{color:var(--ink)} .step.is-active .n{background:var(--accent); color:#fff; border-color:var(--accent)}
.step::after{content:""; width:30px; height:1px; background:var(--line); margin-left:6px}
.step:last-child::after{display:none}
.pay-method{display:flex; align-items:center; gap:14px; padding:16px; border:1px solid var(--line-strong);
  border-radius:var(--r-sm); cursor:pointer; transition:.2s; margin-bottom:10px}
.pay-method:hover{border-color:var(--accent-line); background:var(--bg-soft)}
.pay-method.is-active{border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent) inset}
.pay-method .ic{width:44px; height:30px; border-radius:var(--r-sm); background:#fff; border:1px solid var(--line);
  display:grid; place-items:center; font-size:.58rem; font-weight:600; letter-spacing:.06em; color:var(--graphite)}

/* 12. ACCOUNT ------------------------------------------------------- */
.auth-card{max-width:420px; margin:60px auto; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:36px; box-shadow:var(--shadow-1)}
.auth-card h2{text-align:center; margin-bottom:6px}
.divider-or{display:flex; align-items:center; gap:14px; color:var(--muted); font-size:.8rem; margin:18px 0}
.divider-or::before,.divider-or::after{content:""; flex:1; height:1px; background:var(--line)}
.dash{display:grid; grid-template-columns:240px 1fr; gap:40px; align-items:start}
.dash__nav{border:1px solid var(--line); border-radius:var(--r); padding:10px; position:sticky; top:calc(var(--header-h)+20px)}
.dash__nav a{display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:var(--r-sm);
  font-size:.9rem; color:var(--graphite); transition:.18s}
.dash__nav a:hover{background:var(--bg-soft); color:var(--accent)}
.dash__nav a.is-active{background:var(--accent-soft); color:var(--accent-deep); font-weight:600}
.dash__nav svg{width:18px; height:18px; stroke:currentColor; stroke-width:1.3; fill:none;
  stroke-linecap:round; stroke-linejoin:round}
.order-card{border:1px solid var(--line); border-radius:var(--r); padding:18px; margin-bottom:16px}
.order-card__head{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:12px;
  font-size:.85rem; color:var(--graphite)}

/* 13. ABOUT / WHY / STATS / TESTIMONIALS ---------------------------- */
.why-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.why{background:#fff; padding:32px 28px; transition:background .35s var(--ease)}
.why:hover{background:var(--bg-soft)}
.why__ic{width:48px; height:48px; border-radius:50%; background:var(--accent-soft); display:grid; place-items:center;
  margin-bottom:18px; transition:background .35s var(--ease)}
.why:hover .why__ic{background:var(--hover-soft)}
.why__ic svg{width:22px; height:22px; stroke:var(--accent); stroke-width:1.2; fill:none;
  stroke-linecap:round; stroke-linejoin:round; transition:stroke .35s var(--ease)}
.why:hover .why__ic svg{stroke:var(--hover)}
.why h4{font-family:var(--serif); font-size:1.4rem; font-weight:500; margin-bottom:8px}
.why p{font-size:.88rem; color:var(--graphite); margin:0; line-height:1.7}

.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center}
.stat__num{font-family:var(--serif); font-size:clamp(2.6rem,5vw,3.8rem); font-weight:500; line-height:1; color:var(--ink)}
.stat__num .suffix{color:var(--accent)}
.stat__label{margin-top:12px; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}

.testi-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px}
.testi{border:1px solid var(--line); border-radius:var(--r); padding:30px 28px; background:#fff;
  transition:box-shadow .4s var(--ease), transform .4s var(--ease), border-color .4s}
.testi:hover{box-shadow:var(--shadow-2); transform:translateY(-4px); border-color:var(--accent-line)}
.testi__quote{font-family:var(--serif); font-size:1.28rem; line-height:1.45; margin-bottom:22px; color:var(--ink)}
.testi__who{display:flex; align-items:center; gap:12px}
.testi__avatar{width:44px; height:44px; border-radius:50%; background:var(--accent-soft); display:grid; place-items:center;
  font-family:var(--serif); font-size:1.1rem; font-weight:600; color:var(--accent-deep)}

.insta-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:10px}
.insta-grid a{aspect-ratio:1; border-radius:var(--r-sm); overflow:hidden; position:relative; background:var(--bg-sink)}
.insta-grid img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.insta-grid a:hover img{transform:scale(1.08)}
.insta-grid a::after{content:""; position:absolute; inset:0; background:var(--accent);
  opacity:0; transition:opacity .4s var(--ease); mix-blend-mode:multiply}
.insta-grid a:hover::after{opacity:.12}

.founder{display:grid; grid-template-columns:.8fr 1fr; gap:clamp(28px,5vw,60px); align-items:center}
.founder__img{border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:var(--bg-sink)}
.founder__img img{width:100%; aspect-ratio:4/5; object-fit:cover}
.founder blockquote{font-family:var(--serif); font-size:clamp(1.5rem,2.6vw,2.15rem); font-weight:500;
  line-height:1.34; margin:16px 0 20px; color:var(--ink)}

/* 14. FOOTER -------------------------------------------------------- */
.footer{background:var(--ink); color:#C9C4BE; margin-top:80px}
.footer .container{padding-block:60px}
.footer__top{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.1)}
.footer h4{color:#fff; font-family:var(--sans); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:600; margin-bottom:18px}
.footer a{display:block; padding:6px 0; color:#ABA49C; font-size:.88rem; transition:color .25s var(--ease)}
.footer a:hover{color:var(--c-rose-line)}
.footer__brand svg{height:42px; margin-bottom:16px}
.footer__brand svg text{fill:#fff !important}
.footer__brand svg path{stroke:#fff !important}
.footer__brand p{font-size:.9rem; color:#9C958D; max-width:34ch; line-height:1.75}
.newsletter{display:flex; gap:8px; margin-top:16px}
.newsletter input{flex:1; padding:11px 14px; border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.05); color:#fff}
.newsletter input::placeholder{color:#8A837B}
.newsletter input:focus{outline:none; border-color:var(--c-rose-line)}
.footer__bottom{display:flex; justify-content:space-between; align-items:center; padding-top:28px; flex-wrap:wrap; gap:14px;
  font-size:.79rem; color:#8A837B; line-height:1.7}
.socials{display:flex; gap:10px}
.socials a,.socials__unset{width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.16); display:grid;
  place-items:center; transition:border-color .3s var(--ease), background .3s var(--ease)}
.socials a:hover{border-color:var(--c-rose-line); background:rgba(255,255,255,.05)}
.socials svg{width:17px; height:17px; stroke:currentColor; stroke-width:1.3; fill:none;
  stroke-linecap:round; stroke-linejoin:round}
/* not yet configured — visible but clearly inert, no hover state */
.socials__unset{opacity:.28; cursor:default}

/* 14b. BREADCRUMB / BACK-TO-TOP --------------------------------------- */
.crumb{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:.8rem;
  color:var(--muted); margin-bottom:18px}
.crumb a{color:var(--muted); transition:color .2s var(--ease)}
.crumb a:hover{color:var(--accent)}
.crumb__sep{color:var(--line-strong)}
.crumb [aria-current]{color:var(--ink); font-weight:500}

.back-top{position:fixed; right:22px; bottom:22px; width:44px; height:44px; border-radius:50%;
  background:var(--ink); color:#fff; display:grid; place-items:center; z-index:70;
  box-shadow:var(--shadow-2); opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), background .25s, visibility .3s}
.back-top.is-visible{opacity:1; visibility:visible; transform:none}
.back-top:hover{background:var(--accent-deep)}
.back-top svg{width:18px; height:18px; stroke:currentColor; stroke-width:1.6; fill:none}
@media (max-width:600px){ .back-top{right:14px; bottom:14px; width:40px; height:40px} }

/* 15. DRAWER / TOAST / MODAL ---------------------------------------- */
.scrim{position:fixed; inset:0; background:rgba(26,26,28,.42); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:.35s var(--ease); z-index:90}
.scrim.is-open{opacity:1; visibility:visible}
.drawer{position:fixed; top:0; right:0; height:100dvh; width:min(420px,92vw); background:#fff; z-index:95;
  transform:translateX(100%); transition:transform .4s var(--ease); display:flex; flex-direction:column; box-shadow:var(--shadow-3)}
.drawer.is-open{transform:translateX(0)}
.drawer__head{display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--line)}
.drawer__head h3{font-family:var(--sans); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:600; color:var(--ink)}
.drawer__body{flex:1; overflow:auto; padding:8px 22px}
.drawer__foot{padding:20px 22px; border-top:1px solid var(--line)}
.drawer-line{display:grid; grid-template-columns:64px 1fr auto; gap:12px; padding:14px 0; border-bottom:1px solid var(--line)}
.drawer-line img{width:64px; height:78px; object-fit:contain; padding:4px; border-radius:var(--r-sm);
  background:#fff; border:1px solid var(--line)}
.x{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; transition:.2s}
.x:hover{background:var(--accent-soft); color:var(--accent)}
.x svg{width:17px; height:17px; stroke:currentColor; stroke-width:1.3; fill:none;
  stroke-linecap:round; stroke-linejoin:round}

.toast-wrap{position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:120; display:flex; flex-direction:column; gap:10px}
.toast{display:flex; align-items:center; gap:12px; background:var(--ink); color:#fff; padding:13px 20px; border-radius:var(--r-pill);
  box-shadow:var(--shadow-3); font-size:.9rem; animation:toastIn .35s var(--ease)}
.toast svg{width:17px; height:17px; stroke:var(--c-rose-line); stroke-width:1.5; fill:none;
  stroke-linecap:round; stroke-linejoin:round}

.modal{position:fixed; inset:0; z-index:110; display:none; place-items:center; padding:20px}
.modal.is-open{display:grid}
.modal__card{background:#fff; border-radius:var(--r); padding:32px; max-width:460px; width:100%; box-shadow:var(--shadow-3);
  position:relative; animation:fadeUp .3s var(--ease)}

/* 16. ANIMATIONS / REVEAL / RESPONSIVE ------------------------------ */
@keyframes fadeUp{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:translateY(0)}}
@keyframes toastIn{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:translateY(0)}}
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.is-in{opacity:1; transform:none}

@media (max-width:1200px){
  .rail{grid-auto-columns:minmax(244px,1fr)}
}
@media (max-width:1024px){
  .pdp{grid-template-columns:1fr}
  .product-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:28px 20px}
  .cartpage{grid-template-columns:1fr}
  .catalog{grid-template-columns:1fr}
  .filters{position:static}
  .filter-toggle{display:inline-flex}
  .filters{display:none} .filters.is-open{display:block}
  .dash{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr); gap:34px}
  .footer__top{grid-template-columns:1fr 1fr}
  .insta-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  :root{--header-h:64px}
  .nav,.search{display:none}
  .menu-toggle{display:grid}
  .gender-split{grid-template-columns:1fr}
  .founder{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .footer__top{grid-template-columns:1fr}
  /* the top bar becomes a single rotating line rather than a stack */
  .topbar .container{gap:12px; font-size:.62rem; padding-block:9px}
  .topbar span:nth-child(n+3){display:none}
  .mobile-search{display:block !important}
  .header.is-stuck .header__bar{height:56px}
  /* cards: two up, tighter, and the quick-add stays visible (no hover on touch) */
  .product-grid{grid-template-columns:repeat(2,1fr); gap:26px 14px}
  .rail{grid-auto-columns:minmax(212px,1fr); gap:16px}
  .card__body{padding:14px 2px 2px}
  .card__name{font-size:1.14rem}
  .card:hover{transform:translateY(-4px) rotate(0deg)}
  .tiles{grid-template-columns:repeat(2,1fr); gap:14px}
  .insta-grid{grid-template-columns:repeat(3,1fr); gap:6px}
  .section-head.spread{flex-direction:column; align-items:flex-start; gap:16px}
  .pdp__cta .btn{min-width:0}
}
/* Touch devices never fire :hover, so the wishlist and action row would be
   unreachable. Surface them on any narrow screen AND on any pointer that
   cannot hover — hybrid devices report hover but are still touch-driven. */
@media (hover:none), (max-width:760px){
  .card__wish{opacity:1; transform:none}
  .card__actions{transform:none; opacity:1}
}
.mobile-search{display:none; padding:10px var(--gutter); border-bottom:1px solid var(--line)}

/* mobile slide-out nav */
.mnav{position:fixed; top:0; left:0; height:100dvh; width:min(320px,86vw); background:#fff; z-index:95;
  transform:translateX(-100%); transition:transform .4s var(--ease); padding:24px; overflow:auto; box-shadow:var(--shadow-3)}
.mnav.is-open{transform:translateX(0)}
.mnav details{border-bottom:1px solid var(--line)}
.mnav summary{padding:14px 4px; font-weight:600; cursor:pointer; list-style:none; display:flex; justify-content:space-between}
.mnav summary::-webkit-details-marker{display:none}
.mnav a{display:block; padding:11px 12px; color:var(--graphite); transition:color .2s}
.mnav a:hover{color:var(--accent)}
.mnav summary:hover{color:var(--accent)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
}
@media (max-width:760px){
  /* a fixed background forces every scroll frame to repaint on phones */
  body{background-attachment:scroll}
}

/* 17. LEGAL / POLICY COPY (added with the real catalogue import) ------ */
.policy__body{color:var(--graphite); line-height:1.9}
.policy__body h3{font-family:var(--sans); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); font-weight:600; margin:26px 0 10px}
.policy__body h3:first-child{margin-top:0}
.policy__body p{margin:0 0 12px}
.policy__body ul{margin:0 0 14px; padding-left:20px}
.policy__body li{margin-bottom:7px}
.policy__body a{text-decoration:underline}

/* product card hover-preview video shares the still-image treatment */
.card__media video.alt{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .5s var(--ease)}

/* ===================================================================
   INTRO ANIMATION — first-load-only splash before the homepage.
   Markup + trigger in index.html / js/intro.js. Removed from the DOM
   (not just hidden) once it finishes so it costs nothing afterward.
   Sequence: radial glow pulses in -> sparkle particles fly outward from
   center -> the gem mark spins/snaps into place with a bounce -> a burst
   of rays fires off it -> "Right" slides in from the left, "Silver"
   from the right -> tagline fades up -> a light sweep glides across the
   whole wordmark -> everything fades out into the homepage.
   =================================================================== */
#rs-intro{position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column;
  align-items:center; justify-content:center; background:radial-gradient(ellipse at center,#232227 0%,var(--c-ink) 70%);
  overflow:hidden; transition:opacity .6s var(--ease), visibility .6s var(--ease)}
#rs-intro.is-done{opacity:0; visibility:hidden; pointer-events:none}
body.rs-intro-active{overflow:hidden}

#rs-intro-glow{position:absolute; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 70%);
  opacity:0; transform:scale(.4); animation:rs-glow-pulse 2.6s ease-out .05s forwards}

#rs-intro-particles{position:absolute; inset:0; pointer-events:none}
#rs-intro-particles i{position:absolute; top:50%; left:50%; width:5px; height:5px; border-radius:50%;
  background:#fff; opacity:0; box-shadow:0 0 6px 1px rgba(255,255,255,.7);
  animation:rs-particle-burst 1.4s cubic-bezier(.2,.7,.3,1) .35s forwards}
#rs-intro-particles i:nth-child(1){--tx:-130px; --ty:-70px; animation-delay:.30s}
#rs-intro-particles i:nth-child(2){--tx:120px;  --ty:-90px; animation-delay:.34s}
#rs-intro-particles i:nth-child(3){--tx:-150px; --ty:40px;  animation-delay:.38s}
#rs-intro-particles i:nth-child(4){--tx:140px;  --ty:60px;  animation-delay:.42s}
#rs-intro-particles i:nth-child(5){--tx:-60px;  --ty:-140px;animation-delay:.46s}
#rs-intro-particles i:nth-child(6){--tx:70px;   --ty:-150px;animation-delay:.50s}
#rs-intro-particles i:nth-child(7){--tx:-100px; --ty:120px; animation-delay:.54s}
#rs-intro-particles i:nth-child(8){--tx:110px;  --ty:130px; animation-delay:.58s}
#rs-intro-particles i:nth-child(9){--tx:0px;    --ty:-170px;animation-delay:.62s}
#rs-intro-particles i:nth-child(10){--tx:0px;   --ty:160px; animation-delay:.66s}
#rs-intro-particles i:nth-child(11){--tx:-175px;--ty:-10px; animation-delay:.70s}
#rs-intro-particles i:nth-child(12){--tx:175px; --ty:10px;  animation-delay:.74s}

#rs-intro-mark{position:relative; opacity:0; transform:scale(.2) rotate(-200deg);
  animation:rs-mark-spin-in .75s cubic-bezier(.2,.8,.25,1.3) .15s forwards}
#rs-intro-gemsvg{display:block; overflow:visible; filter:drop-shadow(0 0 10px rgba(255,255,255,.45))}
#rs-intro-gem-outer{fill:none; stroke:#fff; stroke-width:2.6; stroke-linejoin:round}
#rs-intro-gem-inner{fill:#fff}

#rs-intro-burst{position:absolute; top:50%; left:50%; width:200px; height:200px;
  transform:translate(-50%,-50%); overflow:visible; pointer-events:none}
#rs-intro-burst line{stroke:#fff; stroke-width:2.4; stroke-linecap:round; opacity:0;
  transform-origin:100px 100px; animation:rs-ray-pop .55s ease-out .9s forwards}
#rs-intro-burst line:nth-child(2){animation-delay:.93s}
#rs-intro-burst g line:nth-child(3){animation-delay:.96s}
#rs-intro-burst g line:nth-child(4){animation-delay:.99s}
#rs-intro-burst g line:nth-child(5){animation-delay:1.02s}
#rs-intro-burst g line:nth-child(6){animation-delay:1.05s}
#rs-intro-burst g line:nth-child(7){animation-delay:1.08s}
#rs-intro-burst g line:nth-child(8){animation-delay:1.11s}

#rs-intro-word{margin-top:26px; display:flex; font-family:Georgia,'Times New Roman',serif; font-size:2rem; color:#fff;
  background:linear-gradient(100deg, #fff 40%, #fff8ee 48%, #fff 56%);
  background-size:260% 100%; background-position:150% 0; -webkit-background-clip:text; background-clip:text}
#rs-intro-w1{opacity:0; transform:translateX(-46px); font-weight:700;
  animation:rs-slide-in-l .55s cubic-bezier(.2,.7,.2,1) 1.0s forwards}
#rs-intro-w2{opacity:0; transform:translateX(46px); font-style:italic; font-weight:500; color:var(--c-silver);
  animation:rs-slide-in-r .55s cubic-bezier(.2,.7,.2,1) 1.12s forwards}
#rs-intro-word.rs-shine{animation:rs-shine-sweep 1.1s ease-in-out 1.55s forwards}

#rs-intro-tag{margin-top:8px; font-size:.7rem; letter-spacing:5px; text-transform:uppercase;
  color:var(--c-silver); opacity:0; transform:translateY(6px);
  animation:rs-word-in .6s var(--ease) 1.4s forwards}

@keyframes rs-glow-pulse{0%{opacity:0; transform:scale(.4)}55%{opacity:1; transform:scale(1)}100%{opacity:.55; transform:scale(1.25)}}
@keyframes rs-particle-burst{0%{opacity:0; transform:translate(-50%,-50%) scale(.4)}
  15%{opacity:1}
  100%{opacity:0; transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1)}}
@keyframes rs-mark-spin-in{60%{transform:scale(1.12) rotate(8deg)}100%{opacity:1; transform:scale(1) rotate(0)}}
@keyframes rs-ray-pop{0%{opacity:0; transform:scale(.3)}55%{opacity:1; transform:scale(1.2)}100%{opacity:.9; transform:scale(1)}}
@keyframes rs-slide-in-l{to{opacity:1; transform:translateX(0)}}
@keyframes rs-slide-in-r{to{opacity:1; transform:translateX(0)}}
@keyframes rs-word-in{to{opacity:1; transform:translateY(0)}}
@keyframes rs-shine-sweep{to{background-position:-10% 0}}

@media (prefers-reduced-motion:reduce){
  #rs-intro-glow,#rs-intro-particles i,#rs-intro-mark,#rs-intro-burst line,#rs-intro-w1,#rs-intro-w2,#rs-intro-tag{
    animation:none !important; opacity:1 !important; transform:none !important}
}
.card:hover .card__media video.alt{opacity:1}