/* ============================================================
   ZARI Sarees — THEME (foundation)
   Tokens · reset · base typography · buttons · forms · utilities · motion
   Design direction: elevated heritage luxury (warm ivory, aubergine, antique gold)
   ============================================================ */

:root{
  /* ---- surfaces ---- */
  --canvas:#FBF7F0;        /* warm ivory page bg */
  --surface:#FFFFFF;       /* cards */
  --surface-warm:#FFFCF7;

  /* ---- ink ---- */
  --ink:#271A22;           /* near-black plum text */
  --muted:#6E6168;         /* secondary text — darkened to meet WCAG AA (4.5:1) on ivory */

  /* ---- brand ---- */
  --brand:#3A0A2E;         /* deep aubergine */
  --brand-deep:#260720;
  --brand-dark:#260720;    /* legacy alias */

  /* ---- accent: rich antique gold — saturated and elegant (not flat bronze, not
     flashy festive gold) ---- */
  --gold:#B8902F;          /* rich antique gold */
  --gold-soft:#D2B265;     /* warm champagne-gold */
  --gold-line:#E4D6AE;     /* warm gold hairline */

  /* ---- accents ---- */
  --sale:#9E2B25;          /* deep terracotta */
  --deal:#E0341C;          /* bright deal red (discount badges / price) */
  --stock:#5B6E54;         /* muted sage */
  --green:#5B6E54;         /* legacy alias -> sage */
  --star:#B68A3E;          /* legacy alias -> gold */

  /* ---- lines ---- */
  --line:#E8DFD3;          /* warm hairline on ivory */
  --line-soft:#F0E8DC;

  /* ---- legacy aliases (so old CSS/JS never breaks) ---- */
  --bg:#FBF7F0;
  --bg-alt:#FFFCF7;
  --bg-alt2:#F2EADD;
  --brand-soft:#F4ECDF;
  --maroon:#3A0A2E;
  --pink:#3A0A2E;          /* neutralize hot pink -> aubergine */

  /* ---- shadows: soft + warm, now layered (tight contact shadow + soft ambient) for
     more believable elevation while keeping the warm aubergine tint ---- */
  --shadow-sm:0 1px 2px rgba(58,10,46,.05),0 8px 22px -16px rgba(58,10,46,.20);
  --shadow:0 2px 4px rgba(58,10,46,.05),0 22px 54px -30px rgba(58,10,46,.28);
  --shadow-lg:0 4px 10px rgba(58,10,46,.06),0 40px 80px -36px rgba(58,10,46,.34);

  /* ---- radii: small / editorial ---- */
  --radius:3px;
  --radius-img:2px;

  /* ============================================================
     DESIGN SYSTEM — one source of truth, applied with discipline
     ============================================================ */

  /* ---- SPACING: strict 8-pt scale (every gap/pad/margin derives from this) ---- */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem;   --s-7:3rem;  --s-8:4rem;   --s-9:6rem; --s-10:8rem;

  /* ---- layout ---- */
  --container:1280px;
  --gutter:clamp(1.25rem,5vw,2.5rem);
  --pad-sec:clamp(var(--s-8),9vw,var(--s-10));     /* 4rem → 8rem section rhythm */
  --pad-sec-lg:clamp(var(--s-9),13vw,12.5rem);     /* editorial bands */

  /* ---- TYPE: family + ONE modular scale (≈1.3 ratio), consistent line-heights ---- */
  --display:"Jost", "Helvetica Neue", Arial, sans-serif;   /* clean geometric sans — modern, international */
  --sans:"Inter", system-ui, -apple-system, sans-serif;
  --serif:"Jost", "Helvetica Neue", Arial, sans-serif;     /* legacy alias (now sans) */
  --t-xs:.75rem;    /* overline / caption */
  --t-sm:.875rem;   /* small / meta */
  --t-base:1rem;    /* body */
  --t-md:1.15rem;   /* lead / h4 */
  --t-lg:1.5rem;    /* h3 */
  --t-xl:clamp(2rem,3.4vw,2.9rem);      /* h2 — section heads */
  --t-2xl:clamp(2.4rem,4.4vw,3.5rem);   /* h1 */
  --t-display:clamp(3rem,6.5vw,5.25rem);/* hero */
  --lh-tight:1.04; --lh-snug:1.12; --lh-body:1.65;
  --tracking-tight:-.02em; --tracking-head:-.01em; --tracking-over:.2em;

  /* ---- easing / motion ---- */
  --ease-lux:cubic-bezier(.22,1,.36,1);     /* gentle decel, signature */
  --ease-out:cubic-bezier(.16,1,.3,1);      /* sharp settle */
  --ease-in-out:cubic-bezier(.65,0,.35,1);  /* symmetric */

  /* ---- aliases for tokens referenced by checkout/confirmation/404 CSS but never
     defined (they were rendering borderless/panel-less/all-sans). Map onto the
     existing palette so those pages inherit the same warm system. ---- */
  --border:var(--line);
  --success:var(--stock);            /* sage 'secure/paid' cue */
  --surface-2:var(--surface-warm);
  --font-display:var(--display);
  --ink-70:#4A3E45;                  /* warm plum-grey ramp (ink → muted → lighter) */
  --ink-60:var(--muted);
  --ink-50:#897E84;
  --ink-40:#A99FA5;
}

/* ---------- reset ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--canvas);
  font-size:1rem;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.no-scroll{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{list-style:none}
::selection{background:var(--brand);color:var(--canvas)}

/* ---------- base typography ---------- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:500;
  line-height:var(--lh-snug);
  letter-spacing:var(--tracking-head);
  color:var(--ink);
}
.hero h1,h1.hero{
  font-size:var(--t-display);
  font-weight:400;                 /* large display reads lighter / more editorial */
  line-height:var(--lh-tight);
  letter-spacing:var(--tracking-tight);
}
h1{font-size:var(--t-2xl)}
h2{font-size:var(--t-xl)}
h3{font-size:var(--t-lg);line-height:1.2}
h4{font-size:var(--t-md)}
p{font-size:var(--t-base);line-height:var(--lh-body);text-wrap:pretty}

/* text-wrap niceties: balanced heads */
h1,h2,h3{text-wrap:balance}

/* serif ligatures + kerning on display headings, logo & price */
h1,h2,h3,h4,.logo b,.price{
  font-feature-settings:"liga" 1,"dlig" 1,"calt" 1;
  font-kerning:normal;
}
/* TRUE italic accents — the real Cormorant italic master is now loaded, so serif <em>
   uses the genuine calligraphic cut (two-story a, swash f), never a synthesized slant.
   A hair of positive tracking lets the italic breathe against the tight roman. */
h1 em,h2 em,h3 em,h4 em,.serif-em{
  font-style:italic;
  font-synthesis:none;
  letter-spacing:.006em;
}
/* tabular figures so prices / totals / qty align */
.price,.pdprice,.tot,.linetot,.di-qty span,.dq-inc,.dq-dec{
  font-variant-numeric:tabular-nums;
}

/* ---------- container ---------- */
.container{width:min(var(--container),90vw);margin-inline:auto}

/* ---------- utilities / editorial helpers ---------- */
.eyebrow{
  font-family:var(--sans);
  font-size:var(--t-xs);
  font-weight:600;
  letter-spacing:var(--tracking-over);
  text-transform:uppercase;
  color:var(--gold);
  display:inline-block;
}
.rule{height:1px;background:var(--line);border:0;width:100%}
.rule-gold{height:1px;background:linear-gradient(90deg,var(--gold) 0%,var(--gold-soft) 40%,transparent 100%);border:0}
.diamond{color:var(--gold);font-size:.7em;display:inline-block;line-height:1}
.muted{color:var(--muted)}
.center{text-align:center}
.gold{color:var(--gold)}
.sec{padding:var(--pad-sec) 0}
.sec.alt{background:#F3E6E1}   /* soft blush — jewel-tone rhythm (alternates with ivory) */

/* editorial section head: eyebrow + serif title + thin rule + optional view-all */
.sechead{margin-bottom:clamp(2.6rem,4.5vw,3.8rem)}
.sechead .eyebrow{margin-bottom:.85rem}
.sechead h2{font-family:var(--display);font-weight:500}
.sechead .rule{margin-top:1.4rem}
.viewall{
  font-family:var(--sans);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-flex;
  gap:.5em;
  align-items:center;
  white-space:nowrap;
  position:relative;
}
.viewall::after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:1px;background:var(--gold);transition:width .4s ease}
.viewall:hover::after{width:100%}

/* underline-grow link */
.ulink{position:relative;color:var(--brand)}
.ulink::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:currentColor;transition:width .35s ease}
.ulink:hover::after{width:100%}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:.95em 2.1em;
  border-radius:2px;
  border:1px solid transparent;
  transition:.3s ease;
  cursor:pointer;
  line-height:1;
}
/* Restraint over shine: solid, confident colour and calm colour-only hovers — no
   gradients, no sheen, no bounce. Luxury is still. */
.btn-primary{background:var(--brand);color:var(--canvas);border-color:var(--brand)}
.btn-primary:hover{background:var(--brand-deep);border-color:var(--brand-deep)}
.btn-gold{background:var(--gold);color:var(--brand-deep);border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-soft);border-color:var(--gold-soft)}
.btn-outline{background:transparent;border-color:var(--brand);color:var(--brand)}
.btn-outline:hover{background:var(--brand);color:var(--canvas)}
.btn-light{background:var(--canvas);color:var(--brand);border-color:var(--canvas)}
.btn-light:hover{background:#fff}

/* ---- disabled + loading: one system for every buy CTA (was missing) ---- */
.btn:disabled,.btn[aria-disabled="true"],.add:disabled,.qv-add:disabled,.addbig:disabled,.card .add:disabled{
  opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important;pointer-events:none;
}
.btn[aria-busy="true"],.add.loading,.addbig.loading{position:relative;color:transparent!important;pointer-events:none}
.btn[aria-busy="true"]::after,.add.loading::after,.addbig.loading::after{
  content:"";position:absolute;top:50%;left:50%;width:1.05em;height:1.05em;margin:-.525em 0 0 -.525em;
  border:2px solid var(--gold);border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- form controls ---------- */
input,select,textarea{font-family:inherit;color:var(--ink)}
.field input,.fld input,.input{
  width:100%;padding:.9em 1.1em;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  font-size:.95rem;color:var(--ink);
  transition:border-color .25s,box-shadow .25s;
}
.field input::placeholder,.fld input::placeholder,.input::placeholder{color:var(--muted)}
.field input:focus,.fld input:focus,.input:focus,
input:focus,select:focus,textarea:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(182,138,62,.18);   /* soft gold focus ring (the box-shadow transition above anticipates this) */
  outline:none;
}
/* iOS auto-zooms when a focused input's text is <16px — floor typeable fields on small
   screens. !important so this defensive floor beats later equal-specificity page rules. */
@media(max-width:560px){
  .field input,.fld input,.input,
  input[type="text"],input[type="email"],input[type="tel"],input[type="password"],input[type="search"],input[type="number"],textarea,select{font-size:16px!important}
}
.fld{margin-bottom:1rem}
.fld label{display:block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.45rem;font-weight:600}

/* ---------- size selector chips (PDP + quick-view) ---------- */
.sizes{display:flex;align-items:center;gap:.9rem;margin:.2rem 0 1.2rem;flex-wrap:wrap}
.sizes-lbl{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
.sizechips{display:flex;gap:.5rem;flex-wrap:wrap}
.sizechip{min-width:2.7rem;padding:.55em .85em;border:1px solid var(--line);border-radius:2px;background:var(--surface);font-family:var(--sans);font-size:.82rem;letter-spacing:.02em;color:var(--ink);cursor:pointer;transition:.2s ease}
.sizechip:hover{border-color:var(--brand)}
.sizechip.on{background:var(--brand);color:var(--canvas);border-color:var(--brand)}
.sizechip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.size-hint{font-size:.78rem;color:var(--sale);min-height:1.1em;margin:-.6rem 0 .8rem}

/* ---------- motion: reveal + image fade-in + loading ---------- */
.rv{
  opacity:0;transform:translateY(16px);
  transition:opacity .8s var(--ease-lux) var(--d,0s),transform .8s var(--ease-lux) var(--d,0s);
}
.rv.in{opacity:1;transform:none}
.in{opacity:1}

img.ldd,.ldd{opacity:1!important}

/* serif heading wipe-up — pad bottom so italic descenders aren't clipped */
.reveal-clip{
  clip-path:inset(0 0 105% 0);
  padding-bottom:.12em;
  transition:clip-path .9s var(--ease-out) var(--d,0s);
}
.reveal-clip.in{clip-path:inset(0 0 -5% 0)}

/* parallax — JS writes --py from the shared rAF loop */
[data-parallax]{will-change:transform;transform:translate3d(0,var(--py,0),0)}

/* skeleton shimmer placeholder */
.skeleton{position:relative;overflow:hidden;background:var(--bg-alt2)}
.skeleton::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  animation:shimmer 1.4s infinite;
}
@keyframes shimmer{to{transform:translateX(100%)}}

/* foil — static gold-clipped text (no animation).
   Fallback FIRST: solid gold, so the wordmark is never invisible in print / forced-colors /
   browsers without background-clip:text. The clipped gradient is gated behind @supports. */
.foil{color:var(--gold)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .foil{
    background:linear-gradient(92deg,var(--gold) 0%,var(--gold-soft) 45%,var(--gold) 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
  }
}

/* ============================================================
   ICON BASE
   ============================================================ */
.icon{
  width:1.25em;height:1.25em;
  display:inline-block;vertical-align:middle;
  stroke:currentColor;fill:none;
}

/* ============================================================
   MICRO-POLISH — focus / scrollbar / selection / press / validation
   ============================================================ */

/* focus-visible: replace soft glow with crisp gold outline */
.btn:focus-visible,a:focus-visible,.chip:focus-visible,.add:focus-visible,
.viewall:focus-visible,.iconbtn:focus-visible,.wish:focus-visible,.qv:focus-visible,
.drawer-x:focus-visible,.qv-x:focus-visible,.so-x:focus-visible,.dq-dec:focus-visible,.dq-inc:focus-visible,
.qvq-dec:focus-visible,.qvq-inc:focus-visible,.dq-rm:focus-visible,.di-tobag:focus-visible,.qv-full:focus-visible,
.so-row:focus-visible,.totop:focus-visible,#wishBtn:focus-visible,.addbig:focus-visible,.qsel button:focus-visible,
.pshare:focus-visible,.pshare-menu a:focus-visible,.pshare-menu button:focus-visible,
.active-chip:focus-visible,.pthumb:focus-visible,.pf-star:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
.field input:focus-visible,.fld input:focus-visible,.input:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}
/* no outline for pointer focus */
.btn:focus:not(:focus-visible),a:focus:not(:focus-visible),
.chip:focus:not(:focus-visible),.add:focus:not(:focus-visible),
.viewall:focus:not(:focus-visible),.iconbtn:focus:not(:focus-visible),
.wish:focus:not(:focus-visible),.qv:focus:not(:focus-visible),
input:focus:not(:focus-visible),select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
.field input:focus:not(:focus-visible),.fld input:focus:not(:focus-visible),
.input:focus:not(:focus-visible){
  outline:none;
}

/* styled scrollbar — thin aubergine thumb on canvas, gold on hover */
*{scrollbar-width:thin;scrollbar-color:var(--brand) var(--canvas)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--canvas)}
::-webkit-scrollbar-thumb{
  background:var(--brand);
  border:2px solid var(--canvas);
  border-radius:6px;
}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}

/* refined selection — gold-tinted on dark editorial contexts */
.news ::selection,.footer ::selection,.drawer ::selection{
  background:var(--gold);color:var(--brand-deep);
}

/* button press physics (primary inner gold hairline lives in the base :hover rule) */
.btn:active{transform:translateY(0)}

/* form validation states + message slot */
input:user-invalid,.field input:user-invalid,.fld input:user-invalid,.input:user-invalid{
  border-color:var(--sale);
}
input:user-valid,.field input:user-valid,.fld input:user-valid,.input:user-valid{
  border-color:var(--stock);
}
.fld .msg,.field .msg{
  display:none;font-size:.72rem;letter-spacing:.04em;margin-top:.4rem;color:var(--sale);
}
.fld:has(input:user-invalid) .msg,.field:has(input:user-invalid) .msg{display:block}

/* ============================================================
   PAPER GRAIN — very low-opacity tileable noise on body
   (kept <=4% so the ivory stays clean)
   ============================================================ */
body{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");
  background-repeat:repeat;
  /* scroll with the page (fixed attachment forced a full-viewport repaint each frame) */
}

/* ============================================================
   MOTION — scroll-progress · page transitions · button shine
   ============================================================ */
/* scroll-progress hairline at the very top (JS sets scaleX each rAF tick) */
.scrollprog{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:500;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  transform:scaleX(0);transform-origin:left center;pointer-events:none;
}

@media (prefers-reduced-motion: no-preference){
  /* page enter — gentle fade-in (opacity ONLY, so sticky/fixed chrome is unaffected) */
  body{opacity:0;animation:pageIn .45s var(--ease-out) forwards}
  @keyframes pageIn{from{opacity:0}to{opacity:1}}
  /* page exit — fade out just before an internal navigation (class added by JS) */
  body.page-exit{animation:none;opacity:0;transition:opacity .22s ease}

  /* reveal-direction variants — combine with .rv; .in resets to neutral.
     (Scoped to no-preference so reduced-motion users never see an offset.) */
  .rv.rv-l{transform:translateX(-38px)}
  .rv.rv-r{transform:translateX(38px)}
  .rv.rv-zoom{transform:scale(.94)}
  .rv.rv-l.in,.rv.rv-r.in,.rv.rv-zoom.in{transform:none}
}

/* ============================================================
   REDUCED MOTION — neutralize all motion to final state
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .reveal-clip{clip-path:inset(0 0 -5% 0)}
  [data-parallax]{transform:none!important}
  .skeleton::after{display:none}
}

/* ============================================================
   MOBILE OPTIMISATION — tighter rhythm, compact chrome, 44px hit areas
   ============================================================ */
@media (max-width:600px){
  :root{
    --pad-sec:clamp(2.5rem,8vw,3.5rem);     /* was a 4rem floor — cuts dead scroll on phones */
    --pad-sec-lg:clamp(3.5rem,11vw,5rem);
  }
  .sechead{margin-bottom:clamp(1.5rem,6vw,2.2rem)}
  /* compact announcement bar so it fits 1–2 lines, not 3 (body-scoped to beat components.css order) */
  body .announce{font-size:.6rem;letter-spacing:.1em;padding:.55em .8rem;line-height:1.45}
  body .announce .diamond{margin:0 .4em}
}
/* comfortable touch targets on phones/tablets */
@media (hover:none) and (pointer:coarse){
  .btn{min-height:46px}
  .di-qty button,.dq-inc,.dq-dec,.qsel button,.qsel-sm button,.qty-btn,.pgnav{min-width:44px;min-height:44px}
  .wish,.qv,.iconbtn,.drawer-x,.qv-x,.so-x,.pshare{min-width:44px;min-height:44px}
}