/* =================================================================
   XYLIA — Where Elegance Blooms
   Design system & components
   ================================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* Brand palette */
  --forest:#1F3A2E;
  --forest-deep:#15281E;
  --sage:#8C9B7D;
  --sage-soft:#AEBBA0;
  --ivory:#F5F1E8;
  --ivory-soft:#FBF9F2;
  --ivory-deep:#EDE7D8;
  --gold:#D8C28A;
  --gold-rich:#C49A3D;
  --gold-text:#A07A1E;
  --taupe:#B8A28C;
  --ink:#2C322A;
  --ink-soft:#5A6155;
  --line:rgba(31,58,46,.14);
  --line-strong:rgba(31,58,46,.26);

  --gold-foil:linear-gradient(135deg,#B8901F 0%,#E8D29A 38%,#F2E6C2 50%,#E8D29A 62%,#B8901F 100%);

  /* Type */
  --font-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --font-sans:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --fs-hero:clamp(3.1rem,8.5vw,7rem);
  --fs-display:clamp(2.6rem,6vw,4.6rem);
  --fs-h1:clamp(2.3rem,5vw,3.6rem);
  --fs-h2:clamp(1.85rem,3.6vw,2.8rem);
  --fs-h3:clamp(1.35rem,2.2vw,1.7rem);
  --fs-eyebrow:.74rem;

  /* Spacing */
  --container:1280px;
  --gutter:clamp(1.25rem,5vw,4rem);
  --section:clamp(4.5rem,9vw,8.5rem);

  --radius:3px;
  --radius-lg:10px;
  --shadow-sm:0 4px 18px rgba(31,58,46,.07);
  --shadow-md:0 18px 50px rgba(31,58,46,.13);
  --shadow-lg:0 30px 80px rgba(21,40,30,.22);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --nav-h:74px;
  /* Height reserved under the hero so the marquee ribbon shows on first view.
     The ribbon is ~61px, so this leaves a little clear space beneath it rather
     than landing its bottom edge exactly on the fold. */
  --ribbon-peek:74px;
  --bar-h:38px;
}

/* ---------- 2. Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  background:var(--ivory);
  color:var(--ink);
  line-height:1.65;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none;cursor:pointer}
[role=button]{cursor:pointer}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
ul{list-style:none;padding:0}
::selection{background:var(--forest);color:var(--gold)}

h1,h2,h3,h4,.serif{font-family:var(--font-serif);font-weight:500;line-height:1.08;letter-spacing:.005em;color:var(--forest)}
/* Available to screen readers and crawlers, invisible on screen. Used where a page needs
   a real <h1> for structure but the design does not call for a printed title. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* server-seeded product heading, replaced by main.js once it renders the full page */
.pdp-seo-h1{font-size:clamp(2rem,4vw,3rem);margin:.6rem 0 .8rem}

/* ---------- 3. Helpers ---------- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.section--flush{padding-top:clamp(1.2rem,2.5vw,2rem)}
.center{text-align:center}
.eyebrow{
  font-family:var(--font-sans);
  font-size:var(--fs-eyebrow);
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold-text);
  display:inline-flex;align-items:center;gap:.7em;
}
.eyebrow--center{justify-content:center}
.eyebrow::before,.eyebrow::after{content:"";width:26px;height:1px;background:var(--gold-rich);opacity:.6}
.eyebrow--solo::after{display:none}
.eyebrow--solo::before{display:none}
.muted{color:var(--ink-soft)}
.lead{font-size:1.08rem;color:var(--ink-soft);font-weight:300;max-width:54ch}

.section-head{display:flex;flex-direction:column;align-items:center;gap:.9rem;text-align:center;margin-bottom:clamp(2.5rem,5vw,4rem)}
.section-head h1,.section-head h2{font-size:var(--fs-h2)}   /* h1 where it is the page's own title */
.section-head .lead{margin-top:.2rem}

/* divider flourish */
.flourish{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--gold-rich)}
.flourish::before,.flourish::after{content:"";height:1px;width:60px;background:linear-gradient(90deg,transparent,var(--gold-rich))}
.flourish::after{background:linear-gradient(90deg,var(--gold-rich),transparent)}
.flourish svg{width:20px;height:22px}

/* ---------- 4. Buttons ---------- */
.btn{
  --bg:var(--forest);--fg:var(--ivory);--bd:var(--forest);
  display:inline-flex;align-items:center;justify-content:center;gap:.65em;
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  padding:1.02em 2.3em;border-radius:var(--radius);
  font-family:var(--font-sans);font-size:.74rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  cursor:pointer;position:relative;overflow:hidden;
  transition:color .5s var(--ease),background .5s var(--ease),border-color .5s var(--ease),transform .4s var(--ease),box-shadow .5s var(--ease);
}
.btn::after{content:"";position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);z-index:0}
.btn>*{position:relative;z-index:1}
.btn span{position:relative;z-index:1}
.btn:hover{color:var(--forest);border-color:var(--gold)}
.btn:hover::after{transform:scaleX(1)}
.btn:active{transform:translateY(1px)}

.btn--ghost{--bg:transparent;--fg:var(--forest);--bd:var(--forest)}
.btn--ghost:hover{color:var(--forest)}
.btn--gold{--bg:transparent;--fg:var(--forest);--bd:var(--gold-rich)}
.btn--gold::after{background:var(--gold-foil)}
.btn--gold:hover{color:var(--forest-deep)}
.btn--light{--bg:transparent;--fg:var(--ivory);--bd:rgba(245,241,232,.55)}
.btn--light::after{background:var(--gold)}
.btn--light:hover{color:var(--forest)}
.btn--block{width:100%}
.btn--sm{padding:.8em 1.6em;font-size:.74rem}

.link-underline{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:.74rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--forest);
  padding-bottom:4px;position:relative;
}
.link-underline::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--gold-rich);transform:scaleX(.0);transform-origin:left;transition:transform .45s var(--ease)}
.link-underline:hover::after{transform:scaleX(1)}
.link-underline .arr{transition:transform .45s var(--ease)}
.link-underline:hover .arr{transform:translateX(5px)}

/* ---------- 5. Announcement bar ---------- */
.topbar{
  background:var(--forest-deep);color:var(--ivory);
  height:var(--bar-h);display:flex;align-items:center;justify-content:center;
  font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;font-weight:300;
  text-align:center;padding-inline:1rem;position:relative;z-index:60;
}
.topbar b{color:var(--gold);font-weight:500}

/* ---------- Sale announcement bar ----------
   The one alert surface on the site. Deep wine rather than the botanical
   greens, because a sale should interrupt the palette instead of joining it;
   gold ties it back to the brand. Deliberately unaffected by the tone picker,
   which drives the hero banner and the ribbon. */
.topbar--sale{
  background:linear-gradient(100deg,#59101F 0%,#8C1330 44%,#69121F 100%);
  color:#F7F2E7;overflow:hidden;
}
/* a single slow glint travelling the bar — the whole catch, kept to one pass */
.topbar--sale::after{
  content:"";position:absolute;top:0;bottom:0;left:-45%;width:34%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.17),transparent);
  transform:skewX(-18deg);pointer-events:none;animation:barGlint 7s ease-in-out infinite;
}
@keyframes barGlint{0%{left:-45%}58%,100%{left:125%}}

/* ---------- Independence Day dress ----------
   Same two ribbons, same words — only the palette changes for the campaign
   window. Wine against the flag-green hero was two dark reds and a green
   arguing with each other; these greens are lifted from the banner itself so
   the top of the page reads as one picture.

   Deeper at the edges and lighter in the middle, the way the banner's silk
   catches the light, with the gold hairline the banner already uses. */
.topbar--sale.topbar--azadi{
  background:linear-gradient(100deg,#023014 0%,#0B5227 46%,#02371A 100%);
  color:#F7F2E7;box-shadow:inset 0 -1px 0 rgba(216,194,138,.55);
}
/* the flag itself, 3:2, set before the megaphone as a quiet national mark.
   Rounded a hair and lifted off the ribbon with a soft shadow so it reads as a
   flag sitting on the bar rather than a hole cut into it. */
.topbar--azadi .topbar__flag{width:21px;height:14px;flex:none;border-radius:1.5px;
  box-shadow:0 1px 3px rgba(0,0,0,.35);vertical-align:middle}
.marquee--azadi .topbar__flag{width:24px;height:16px;flex:none;border-radius:1.5px;
  box-shadow:0 1px 3px rgba(0,0,0,.3);align-self:center}
/* The announcement bar is already tight enough on a phone to need the rotator;
   another 21px pushed its text hard against both edges. The flag steps out
   here and keeps flying in the ribbon below, which scrolls and has the room. */
@media (max-width:600px){.topbar--azadi .topbar__flag{display:none}}

.marquee--sale.marquee--azadi{
  background:linear-gradient(100deg,#02371A 0%,#0B5227 50%,#023014 100%);
  border-block-color:#01240F;
  box-shadow:inset 0 1px 0 rgba(216,194,138,.4),inset 0 -1px 0 rgba(216,194,138,.4);
}
.marquee--azadi .marquee__track span{color:#F7F2E7}
.marquee--azadi .marquee__track span::after{color:var(--gold)}

.topbar__sale{position:relative;z-index:2;display:inline-flex;align-items:center;gap:clamp(.5rem,1.8vw,1rem);color:inherit}
.topbar__icon{
  width:16px;height:16px;flex:none;color:#EDD49A;
  transform-origin:40% 72%;animation:megaRing 5.5s ease-in-out infinite;   /* the grip */
}
/* rings, then rests — a permanent wobble would be noise, not emphasis */
@keyframes megaRing{
  0%,70%,100%{transform:rotate(0)}
  74%{transform:rotate(-12deg)}78%{transform:rotate(10deg)}
  82%{transform:rotate(-7deg)}86%{transform:rotate(4deg)}90%{transform:rotate(-2deg)}
}
.topbar__now{font-size:.6rem;letter-spacing:.3em;font-weight:500;opacity:.72}
/* The free-delivery promise, which the non-sale bar carries and a live sale
   would otherwise hide. Divider rule rather than a dot so it reads as a
   separate fact, not part of the offer. */
.topbar__ship{position:relative;padding-left:.95rem;font-size:.6rem;letter-spacing:.16em;opacity:.82;white-space:nowrap}
.topbar__ship::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:12px;background:currentColor;opacity:.35}
.topbar__pct{
  font-family:var(--font-serif);font-style:italic;font-weight:600;
  font-size:clamp(1rem,2.6vw,1.16rem);letter-spacing:.04em;text-transform:none;
  background:linear-gradient(100deg,#F6E7BE 0%,#DCBE7C 38%,#FFF8E4 58%,#EDD49A 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:goldShimmer 5.5s linear infinite;
}
.topbar--sale .topbar__cta{
  background:#EDD49A;color:#59101F;border-radius:999px;
  padding:.4em 1em;font-size:.58rem;font-weight:700;letter-spacing:.15em;
  white-space:nowrap;transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.topbar__sale:hover .topbar__cta{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.28)}

/* Mobile rotator — under 600px the sale bar cannot hold every fact on one
   line, so the offer and the delivery promise take turns on a soft crossfade:
   two slides stacked in one grid cell, the same 9s animation half a cycle
   apart. Hidden on desktop, which keeps its static line. */
.topbar__rotator{display:none;position:relative}
.topbar__slide{
  grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  white-space:nowrap;line-height:1;opacity:0;animation:topSlide 9s ease-in-out infinite;
}
.topbar__slide--2{animation-delay:-4.5s;font-size:.62rem;letter-spacing:.18em;opacity:0}
/* fade-through-blank: each slide is FULLY out (50%) before the other begins
   (its 0% is this one's 50%) — a crossfade here superimposes both texts into
   a readable ghost, which real phones showed. Hold 5-45%, dark 50-100%. */
@keyframes topSlide{0%{opacity:0}5%,45%{opacity:1}50%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .topbar__slide{animation:none}
  .topbar__slide--1{opacity:1}
  .topbar__slide--2{display:none}
}

@media (prefers-reduced-motion:reduce){
  .topbar--sale::after,.topbar__icon{animation:none}
  .topbar--sale::after{display:none}
  .topbar__pct{animation:none;background:none;color:#EDD49A}
}
/* Fixed-height bar: mid widths shed the delivery line; under 600px the whole
   static row steps aside for the rotator, which carries every fact in turns.
   Child selectors (>) so the copies INSIDE the rotator slides stay visible. */
@media (max-width:980px){.topbar__sale > .topbar__ship{display:none}}
@media (max-width:600px){
  .topbar__sale > .topbar__now,
  .topbar__sale > .topbar__pct,
  .topbar__sale > .topbar__ship,
  .topbar__sale > .topbar__cta{display:none}
  .topbar__rotator{display:grid;place-items:center}
}
/* The bar is a fixed --bar-h. On a narrow screen the message wraps, so the type is
   tightened and --bar-h raised to match — otherwise the extra lines overflow the bar
   and collide with the header beneath it. --bar-h stays a length so the calc() that
   sizes the hero against it keeps working. */
@media (max-width:640px){
  :root{--bar-h:42px}
  .topbar{font-size:.58rem;letter-spacing:.1em;line-height:1.45;padding-inline:.85rem}
}
@media (max-width:380px){
  .topbar{font-size:.58rem;letter-spacing:.07em}
}

/* ---------- 6. Header / nav ---------- */
.header{
  position:sticky;top:0;z-index:50;
  background:rgba(245,241,232,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease),box-shadow .4s var(--ease),background .4s var(--ease);
}
.header.scrolled{border-bottom-color:var(--line);box-shadow:0 6px 26px rgba(31,58,46,.06);background:rgba(245,241,232,.94)}
.nav{height:var(--nav-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.nav__links{display:flex;gap:clamp(.9rem,1.7vw,2.3rem);align-items:center}
.nav__links--right{justify-content:flex-end}
.nav__link{
  font-size:.74rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  position:relative;padding:.4em 0;transition:color .3s var(--ease);white-space:nowrap;
}
.nav__link::after{content:"";position:absolute;left:50%;bottom:0;width:0;height:1px;background:var(--gold-rich);transition:width .35s var(--ease),left .35s var(--ease)}
.nav__link:hover{color:var(--forest)}
.nav__link:hover::after,.nav__link.active::after{width:100%;left:0}
.nav__link.active{color:var(--forest)}

.logo{display:flex;align-items:center;gap:.6rem;justify-self:center}
.logo img{width:34px;height:auto}
.logo__word{
  font-family:var(--font-serif);font-weight:600;font-size:1.7rem;letter-spacing:.36em;
  color:var(--forest);padding-left:.36em;line-height:1;
}
.nav__icons{display:flex;gap:1.35rem;align-items:center;justify-content:flex-end}
.icon-btn{position:relative;display:grid;place-items:center;color:var(--forest);transition:color .3s,transform .3s var(--ease)}
.icon-btn:hover{color:var(--gold-text);transform:translateY(-1px)}
.icon-btn svg{width:21px;height:21px;stroke-width:1.4}
.btn svg{width:15px;height:15px;flex:none}
.cart-count{
  position:absolute;top:-8px;right:-9px;min-width:17px;height:17px;padding:0 4px;
  background:var(--forest);color:var(--gold);border-radius:999px;
  font-family:var(--font-sans);font-size:.58rem;font-weight:600;letter-spacing:0;
  display:grid;place-items:center;line-height:1;
  transform:scale(0);transition:transform .35s var(--ease-out);
}
.cart-count.show{transform:scale(1)}
.nav__toggle{display:none}

/* mobile menu */
.mobile-menu{
  /* above the topbar (60) — at z-55 the bar painted over the menu's top strip
     and buried the close button under it; during a sale the bar is a link, so
     tapping the X navigated to /shop instead of closing the menu. Still under
     the cart overlay (70) and drawer (80). */
  position:fixed;inset:0;width:100%;height:100vh;height:100dvh;z-index:65;background:var(--ivory);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.4rem;
  transform:translateY(-100%);transition:transform .6s var(--ease),visibility .6s,opacity .4s;
  visibility:hidden;opacity:0;padding:2rem;
}
.mobile-menu.open{transform:translateY(0);visibility:visible;opacity:1}
.mobile-menu a{font-family:var(--font-serif);font-size:1.9rem;color:var(--forest);padding:.35rem 0}
.mobile-menu .eyebrow{margin-top:1.4rem}
.mobile-menu__close{position:absolute;top:1.3rem;right:1.3rem}

/* ---------- 7. Hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--ivory)}
/* Banner column favoured over the copy column: .hero__content is capped at
   560px anyway, so the extra width goes to the banner instead of stretching
   the text measure. */
.hero__inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.5rem,4vw,4rem);align-items:center;
  /* Capped rather than a straight 100svh: the columns are already ~680px tall, so on a tall
     monitor the leftover height turned into dead band between the header and the first line
     of copy. The cap keeps the hero full-bleed on normal screens without stretching.
     --ribbon-peek is subtracted so the marquee below shows on first view instead of
     sitting exactly on the fold — a visible edge is what invites the scroll. */
  min-height:min(calc(100svh - var(--nav-h) - var(--bar-h) - var(--ribbon-peek)), 700px);
  padding-block:clamp(.65rem,1.4vw,1.25rem)}
.hero__bg{position:absolute;inset:0;background:url('../img/motif-gold.jpeg') center/620px;opacity:.08;pointer-events:none}
/* Campaign artwork spanning the whole hero. No min-height and no object-fit:
   the banner's own text is part of the image, so it is shown at its natural
   proportions and never cropped — a fixed height would slice the headline off
   at one width or another. */
.hero--banner{min-height:0;background:var(--ivory)}
.hero-banner{display:block;line-height:0}
.hero-banner picture{display:block}
/* Height is capped to the SAME budget the split hero uses, so the marquee below
   still peeks above the fold — that visible edge is what invites the scroll.
   Without the cap a 16:9 banner grows with the viewport (941px tall at 1920px
   wide) and pushes the ribbon off the first screen.

   max-width/max-height rather than width:100%: whichever limit binds first
   wins, the aspect ratio is preserved either way, and the artwork is never
   cropped — its headline is part of the picture. */
.hero-banner img{
  display:block;margin-inline:auto;
  width:auto;height:auto;
  max-width:min(100%,1671px);
  max-height:min(calc(100svh - var(--nav-h) - var(--bar-h) - var(--ribbon-peek)), 700px);
}
.hero__content{position:relative;z-index:2;max-width:560px}
.hero h1{font-size:var(--fs-hero);font-weight:500;line-height:.98;letter-spacing:-.01em}
.hero h1 em{font-style:italic;color:var(--gold-rich);font-weight:500}
.hero__sub{margin:1.6rem 0 2.4rem;font-size:1.08rem;color:var(--ink-soft);font-weight:300;max-width:46ch}
.hero__cta{display:flex;gap:1rem;flex-wrap:wrap}
.hero__meta{display:flex;gap:2.4rem;margin-top:3rem;padding-top:1.8rem;border-top:1px solid var(--line)}
.hero__meta .num{font-family:var(--font-serif);font-size:1.9rem;color:var(--forest);display:block;line-height:1}
.hero__meta .lbl{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-top:.3rem}
/* Short laptops (768-860px tall): the text column, not the banner, is what
   pushes the ribbon under the fold. Tighten the vertical rhythm rather than
   shrink the type, so the marquee still shows on first view. */
@media (min-width:861px) and (max-height:860px){
  .hero__sub{margin:1rem 0 1.2rem}
  .hero__meta{margin-top:1.3rem;padding-top:1rem}
}
/* Small laptops (<=760px tall): tighter again. The headline is three lines of
   clamped display type — by far the tallest block — so here it also scales with
   the viewport's height, which is the only lever big enough to bring the ribbon
   above the fold on a 1366x768 screen. */
@media (min-width:861px) and (max-height:760px){
  .hero h1{font-size:min(var(--fs-hero),9.2vh)}
  .hero__sub{margin:.7rem 0 .9rem}
  .hero__meta{margin-top:.9rem;padding-top:.7rem}
}

.hero__visual{position:relative;z-index:2;align-self:stretch;display:flex;align-items:center}
.hero__frame{
  /* The banner's 4:5 ratio, not min-height, is what sets the hero's height — so
     the cap has to live here. Capped so the hero plus --ribbon-peek fits the
     viewport; the background is `cover`, so a short viewport crops the image
     rather than distorting it, and on a tall screen the cap never binds. */
  /* 2.75rem covers .hero__inner's padding-block (up to 1.25rem a side) plus a
     few px of slack, so the ribbon clears the fold rather than landing on it */
  max-height:calc(100svh - var(--nav-h) - var(--bar-h) - var(--ribbon-peek) - 2.75rem);
  position:relative;width:100%;aspect-ratio:4/5;border-radius:var(--radius-lg);overflow:hidden;
  background:url('../img/motif-emerald.jpeg') center/cover;box-shadow:var(--shadow-lg);
  border:1px solid rgba(31,58,46,.2);
}
.hero__frame::after{content:"";position:absolute;inset:10px;border:1px solid rgba(216,194,138,.5);border-radius:6px;pointer-events:none}
.hero__badge{
  position:absolute;bottom:18px;left:18px;right:18px;z-index:3;
  background:rgba(245,241,232,.92);backdrop-filter:blur(6px);
  border-radius:6px;padding:1rem 1.3rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.hero__badge .serif{font-size:1.32rem}
.hero__badge small{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text)}
.hero__rosette{
  position:absolute;top:-30px;right:-30px;width:120px;height:120px;z-index:4;
  background:var(--forest);border-radius:50%;display:grid;place-items:center;text-align:center;
  color:var(--ivory);box-shadow:var(--shadow-md);
  animation:spinSlow 26s linear infinite;
}
.hero__rosette span{font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);line-height:1.5}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.hero__rosette{animation:none}}
/* While a sale is live the rosette trades forest for the announcement-bar wine
   and carries the live offer in place of the tagline, keeping the slow brand
   spin. Wine + gold shimmer match .topbar--sale exactly. */
.hero__rosette--sale{
  background:radial-gradient(circle at 32% 28%,#8C1330 0%,#69121F 58%,#59101F 100%);
  place-items:center;align-content:center;row-gap:.14rem;
  border:1px solid rgba(237,212,154,.45);
}
.hero__rosette--sale span.rosette__pre,
.hero__rosette--sale span.rosette__off{font-size:.55rem;letter-spacing:.26em;text-transform:uppercase;color:#F7F2E7;line-height:1}
.hero__rosette--sale span.rosette__pct{
  font-family:var(--font-serif);font-style:italic;font-weight:600;
  font-size:1.7rem;line-height:1;letter-spacing:.02em;text-transform:none;
  background:linear-gradient(100deg,#F6E7BE 0%,#DCBE7C 38%,#FFF8E4 58%,#EDD49A 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:goldShimmer 5.5s linear infinite;
}

/* ---------- 7b. Sale banner — brand botanical print front & centre while a sale is live ---------- */
.sale-banner{position:absolute;inset:0;z-index:2;display:grid;place-items:center;text-align:center;padding:1.4rem;overflow:hidden}
.sale-banner__motif{position:absolute;inset:0;background-repeat:repeat;background-position:center;pointer-events:none}
.sale-banner__scrim{position:absolute;inset:0;pointer-events:none}
.sale-banner__panel{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:.35rem;width:min(87%,344px);padding:clamp(1.5rem,4.5vw,2.3rem) 1.5rem;border-radius:16px;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.sale-banner__mark{width:34px;height:34px;margin-bottom:.3rem}
.sale-banner__eyebrow{display:flex;align-items:center;gap:.6rem;font-size:.58rem;letter-spacing:.32em;text-transform:uppercase;font-weight:500;white-space:nowrap}
.sale-banner__eyebrow::before,.sale-banner__eyebrow::after{content:"";width:22px;height:1px;background:currentColor;opacity:.5}
.sale-banner__title{font-family:var(--font-serif);font-weight:500;font-size:clamp(1.4rem,2.3vw,1.95rem);line-height:1.14;margin-top:.25rem}
.sale-banner__title em{font-style:italic}
.sale-banner__pct{font-family:var(--font-serif);font-weight:600;font-size:clamp(2.4rem,4.5vw,3.7rem);line-height:1;margin-top:.2rem;letter-spacing:.01em}
.sale-banner__pct em{font-style:italic;font-size:.4em;font-weight:500;letter-spacing:.05em;margin-left:.16em}
.sale-banner__dots{font-size:.74rem;letter-spacing:.5em;text-indent:.5em;opacity:.7;margin-top:.05rem}
.sale-banner__sub{font-size:.74rem;letter-spacing:.04em;max-width:28ch;margin-top:.15rem}
.sale-banner .btn{margin-top:.9rem}
.sale-banner__chip{margin-top:.75rem;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;padding:.55em 1.1em;border-radius:999px}
@media (prefers-reduced-motion:no-preference){.sale-banner .sb-a{animation:bannerUp .7s cubic-bezier(.16,1,.3,1) both}}
@keyframes bannerUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Emerald — ivory florals on deep forest; the print is the ground */
.sale-banner--emerald{background:var(--forest-deep);color:var(--ivory)}
.sale-banner--emerald .sale-banner__motif{opacity:.92;background-size:390px}
.sale-banner--emerald .sale-banner__scrim{background:radial-gradient(72% 62% at 50% 46%,rgba(21,40,30,.68),rgba(21,40,30,.28))}
.sale-banner--emerald .sale-banner__panel{background:rgba(21,40,30,.5);border:1px solid rgba(216,194,138,.5);box-shadow:0 20px 50px rgba(0,0,0,.32)}
.sale-banner--emerald .sale-banner__eyebrow{color:var(--gold)}
.sale-banner--emerald .sale-banner__pct{background:linear-gradient(100deg,#EBD9A6 0%,#C9A96A 38%,#F5EBC8 58%,#D8C28A 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:goldShimmer 5.5s linear infinite}
.sale-banner--emerald .sale-banner__dots{color:var(--gold)}
.sale-banner--emerald .sale-banner__sub{color:rgba(245,241,232,.82)}
.sale-banner--emerald .btn{--bg:var(--gold);--fg:var(--forest);--bd:var(--gold)}
.sale-banner--emerald .btn::after{background:var(--ivory)}
.sale-banner--emerald .sale-banner__chip{background:rgba(245,241,232,.1);color:rgba(245,241,232,.9);border:1px solid rgba(216,194,138,.4)}
@keyframes goldShimmer{to{background-position:220% 0}}
@media (prefers-reduced-motion:reduce){.sale-banner--emerald .sale-banner__pct{animation:none;color:var(--gold);background:none}}

/* Gold — gold florals on ivory */
.sale-banner--gold{background:var(--ivory-soft);color:var(--forest)}
.sale-banner--gold .sale-banner__motif{opacity:.9;background-size:380px}
.sale-banner--gold .sale-banner__scrim{background:radial-gradient(66% 56% at 50% 46%,rgba(251,249,242,.62),rgba(251,249,242,.08))}
.sale-banner--gold .sale-banner__panel{background:rgba(251,249,242,.72);border:1px solid rgba(196,154,61,.55);box-shadow:0 18px 44px rgba(31,58,46,.14)}
.sale-banner--gold .sale-banner__eyebrow{color:var(--gold-text)}
.sale-banner--gold .sale-banner__pct{color:var(--gold-rich)}
.sale-banner--gold .sale-banner__dots{color:var(--gold-rich)}
.sale-banner--gold .sale-banner__sub{color:var(--ink-soft)}
.sale-banner--gold .btn{--bg:var(--forest);--fg:var(--ivory);--bd:var(--forest)}
.sale-banner--gold .btn::after{background:var(--gold)}
.sale-banner--gold .sale-banner__chip{background:rgba(31,58,46,.06);color:var(--forest);border:1px solid rgba(31,58,46,.2)}

/* Ivory — sage florals on ivory; soft & airy */
.sale-banner--ivory{background:var(--ivory-soft);color:var(--forest)}
.sale-banner--ivory .sale-banner__motif{opacity:.72;background-size:380px}
.sale-banner--ivory .sale-banner__scrim{background:radial-gradient(64% 54% at 50% 46%,rgba(251,249,242,.66),rgba(251,249,242,.06))}
.sale-banner--ivory .sale-banner__panel{background:rgba(251,249,242,.68);border:1px solid rgba(140,155,125,.5);box-shadow:0 18px 44px rgba(31,58,46,.1)}
.sale-banner--ivory .sale-banner__eyebrow{color:var(--gold-text)}
.sale-banner--ivory .sale-banner__title{font-size:clamp(1.55rem,2.5vw,2.15rem)}
.sale-banner--ivory .sale-banner__pct{color:var(--gold-rich);font-style:italic;font-weight:500}
.sale-banner--ivory .sale-banner__dots{color:var(--gold-rich)}
.sale-banner--ivory .sale-banner__sub{color:var(--ink-soft)}
.sale-banner--ivory .btn{--bg:transparent;--fg:var(--forest);--bd:var(--forest)}
.sale-banner--ivory .sale-banner__chip{background:rgba(31,58,46,.05);color:var(--ink-soft);border:1px solid var(--line-strong)}

/* Custom — an artwork the shop owner uploaded; it fills the frame on its own,
   with no panel laid over whatever they designed. */
.sale-banner--custom{background-size:cover;background-position:center;background-repeat:no-repeat}

/* ---------- 7b2. PDP size chart ---------- */
.sizechart__units{display:flex;gap:1.4rem;justify-content:center;margin:.3rem 0 1rem}
.sizechart__units button{background:none;border:none;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);padding:.2em 0 .35em;border-bottom:2px solid transparent;cursor:pointer}
.sizechart__units button.on{color:var(--forest);border-bottom-color:var(--gold-rich)}
.sizechart table{width:100%;border-collapse:collapse;font-size:.82rem}
.sizechart th,.sizechart td{border:1px solid var(--line);padding:.6rem .4rem;text-align:center;font-weight:400;color:var(--ink)}
.sizechart th{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:500}
.sizechart td:first-child{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);text-align:left;padding-left:.6rem}

/* ---------- 7b3. Logo lockup (flower + wordmark + tagline) ---------- */
.logo img.logo__img{width:auto;height:clamp(40px,4.6vw,50px)}   /* header: real logo art */
.header .logo{flex-direction:column;gap:.12rem}
.logo__tag{font-family:var(--font-serif);font-style:italic;font-size:.66rem;letter-spacing:.1em;color:var(--gold-text);white-space:nowrap;line-height:1}
@media(max-width:600px){.logo__tag{display:none}}
/* Full trading name. Sits alongside the wordmark as text so the logo art itself
   is never modified — "by Gulnar" hangs at the wordmark's baseline, off its
   right shoulder, matching the brand board. Kept at every width - the tagline
   may hide on phones but the brand name should not. */
.logo__lock{display:flex;align-items:flex-end;gap:.5rem}
.logo__row{display:inline-flex;align-items:baseline;gap:.55rem}
.logo__by{font-family:var(--font-serif);font-style:italic;letter-spacing:.22em;color:var(--gold-text);white-space:nowrap;line-height:1}
.header .logo__by{font-size:.6rem;margin-bottom:5px}   /* up to the A's baseline */
.footer__brand .logo__by{font-size:.72rem;color:var(--gold)}
.logo-lockup__full{width:min(90%,460px);height:auto;margin:0 auto;display:block}
.logo-lockup{display:flex;flex-direction:column;align-items:center;text-align:center}
.logo-lockup__mark{width:clamp(72px,9vw,104px);height:auto;margin-bottom:.35rem}
.logo-lockup__word{font-family:var(--font-serif);font-weight:600;font-size:clamp(2.9rem,9vw,5.4rem);letter-spacing:.24em;text-indent:.24em;color:var(--forest);line-height:1}
.logo-lockup__tag{display:flex;align-items:center;gap:clamp(.8rem,3vw,1.5rem);margin-top:.55rem;font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:clamp(1.05rem,2.4vw,1.5rem);letter-spacing:.03em;color:var(--gold-text)}
.logo-lockup__tag::before,.logo-lockup__tag::after{content:"";width:clamp(26px,6vw,58px);height:1px;background:var(--gold-rich);opacity:.75}

/* ---------- 7c. Policies page ---------- */
.policy-nav{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin:-.4rem 0 2rem}
.policy-nav a{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--line-strong);border-radius:999px;padding:.6em 1.2em;transition:.25s}
.policy-nav a:hover{color:var(--forest);border-color:var(--gold-rich);background:var(--ivory-soft)}
.policy{position:relative;overflow:hidden;background:var(--ivory-soft);border:1px solid var(--line);border-radius:18px;padding:clamp(1.6rem,3vw,2.6rem);margin-top:1.6rem;box-shadow:var(--shadow);scroll-margin-top:96px}
.policy::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--gold-rich),var(--gold) 45%,transparent 80%)}
.policy::after{content:"";position:absolute;right:-44px;bottom:-44px;width:210px;height:210px;background:url('../img/xylia-mark.svg') center/contain no-repeat;opacity:.05;pointer-events:none}
.policy__head{display:flex;align-items:center;gap:1rem;margin-bottom:1.4rem}
.policy__icon{flex:none;width:46px;height:46px;border-radius:50%;background:var(--forest);display:grid;place-items:center;color:var(--gold)}
.policy__icon svg{width:20px;height:20px}
.policy h3{font-size:clamp(1.5rem,2.2vw,1.85rem);margin:0}
.policy h4{position:relative;font-family:var(--font-sans);font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text);margin:1.7rem 0 .85rem}
.policy h4:first-of-type{margin-top:0}
.policy ul{margin:0;padding:0;list-style:none;display:grid;gap:.7rem;position:relative}
.policy li{position:relative;padding-left:1.5rem;color:var(--ink-soft);line-height:1.65;font-size:.92rem}
.policy li::before{content:"✦";position:absolute;left:.1rem;top:.3em;font-size:.55em;color:var(--gold-rich)}
.policy li b{color:var(--ink);font-weight:500}
.policy .note{position:relative;font-size:.82rem;color:var(--ink-soft);font-style:italic;margin-top:1.1rem;background:var(--bg);border:1px dashed var(--line-strong);border-radius:10px;padding:.75rem 1.1rem}

/* ---------- 7d. Benefits / trust bar ---------- */
.benefits{background:var(--ivory-soft);border-block:1px solid var(--line)}
.benefits__inner{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding-block:clamp(1.5rem,3vw,2.1rem)}
.benefit{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.45rem;padding:.3rem 1rem;position:relative}
.benefit:not(:last-child)::after{content:"";position:absolute;right:0;top:18%;height:64%;width:1px;background:var(--line)}
.benefit svg{width:26px;height:26px;color:var(--gold-rich);stroke-width:1.5}
.benefit b{font-family:var(--font-serif);font-weight:600;font-size:1.08rem;color:var(--forest);line-height:1.1}
.benefit span{font-size:.74rem;color:var(--ink-soft);letter-spacing:.02em}
@media(max-width:640px){.benefits__inner{grid-template-columns:1fr 1fr;gap:1.6rem 1rem}.benefit::after{display:none}}

/* ---------- 8. Marquee strip ---------- */
.marquee{background:var(--forest);color:var(--ivory);overflow:hidden;padding-block:1rem;border-block:1px solid var(--forest-deep)}
.marquee__track{display:flex;gap:3.5rem;white-space:nowrap;width:max-content;animation:scrollX 32s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{display:inline-flex;align-items:center;gap:1.2rem;font-family:var(--font-serif);font-style:italic;font-size:1.32rem;color:var(--ivory)}
.marquee__track span::after{content:"✦";color:var(--gold);font-style:normal;font-size:.82rem}
@keyframes scrollX{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* While a sale is live the ribbon joins the announcement bar in wine — one
   alert language top and bottom, with the hero between them. A flatter, deeper
   ground than the bar's gradient so the two bands read as a pair rather than
   the same stripe twice. The offer is upright gold against the italic ivory
   connectors, so it reads as news and not decoration. */
.marquee--sale{background:#69121F;border-block-color:#480C17}
.marquee--sale .marquee__track span{color:rgba(247,242,231,.88)}
.marquee--sale .marquee__track span::after{color:#EDD49A}
/* span.marquee__hot, not .marquee__hot — the rule above carries an element
   selector and would otherwise out-rank it and keep the offer ivory. Tighter
   gap than the brand ribbon: it spaces horn → text → ✦ within each repeat. */
.marquee--sale .marquee__track span.marquee__hot{
  color:#EDD49A;font-style:normal;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;font-size:1.02rem;gap:.6rem;
}
.marquee__horn{width:17px;height:17px;flex:none}

/* ---------- 9. Product card & grid ---------- */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,2.4vw,2.2rem)}
.product-grid--3{grid-template-columns:repeat(3,1fr)}

.card{position:relative;display:flex;flex-direction:column;background:transparent}
.card__media{
  position:relative;aspect-ratio:3/4;border-radius:var(--radius-lg);overflow:hidden;
  background-color:var(--ivory-deep);background-size:cover;background-position:center;
  border:1px solid var(--line);
}
.card__media::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(21,40,30,.42));opacity:0;transition:opacity .5s var(--ease);z-index:1}
.card:hover .card__media::before{opacity:1}
.card__img{position:absolute;inset:0;background-size:cover;background-position:center}
/* A piece can be New AND discounted. The badge takes the left corner and the
   discount the right, so neither hides the other. */
.card__tags{position:absolute;top:12px;left:12px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:.34rem}
.card__tags--right{left:auto;right:12px;align-items:flex-end}
.card__tag{
  background:var(--ivory);color:var(--gold-text);
  font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  padding:.4em .8em;border-radius:999px;
}
.card__tag--sale{background:var(--forest);color:var(--gold)}
.card__tag--oos{background:#3a3a3a;color:#fff}
.card__wish{
  position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;border-radius:50%;
  background:rgba(245,241,232,.9);display:grid;place-items:center;color:var(--forest);
  opacity:0;transform:translateY(-6px);transition:.4s var(--ease);
}
.card:hover .card__wish{opacity:1;transform:none}
.card__wish svg{width:16px;height:16px}
.card__wish.active{color:#b14d4d}
.card__wish.active svg{fill:currentColor}
.card__quick{
  position:absolute;left:12px;right:12px;bottom:12px;z-index:2;
  opacity:0;transform:translateY(14px);transition:.5s var(--ease);
}
.card:hover .card__quick{opacity:1;transform:none}
.card__quick .btn{width:100%;background:var(--ivory);color:var(--forest);border-color:var(--ivory)}
.card__quick .btn::after{background:var(--gold)}

.card__body{padding:1.1rem .2rem 0;display:flex;flex-direction:column;gap:.28rem}
.card__cat{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sage)}
.card__name{font-family:var(--font-serif);font-size:1.32rem;color:var(--forest);line-height:1.15}
.card a .card__name{transition:color .3s}
.card a:hover .card__name{color:var(--gold-text)}
.card__price{font-size:.92rem;color:var(--ink);font-weight:400;display:flex;gap:.6rem;align-items:baseline}
.card__price del{color:var(--ink-soft);font-weight:300}
.card__swatches{display:flex;gap:.4rem;margin-top:.35rem}
.swatch{width:14px;height:14px;border-radius:50%;border:1px solid var(--line-strong)}

/* ---------- 10. Collection tiles ---------- */
.collections{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
.tile{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:3/3.7;
  display:flex;align-items:flex-end;color:var(--ivory);isolation:isolate;
}
.tile--wide{aspect-ratio:auto}
.tile__bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1.2s var(--ease);z-index:-2}
.tile:hover .tile__bg{transform:scale(1.07)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,40,30,.05) 30%,rgba(21,40,30,.78));z-index:-1}
.tile__content{padding:clamp(1.4rem,2.5vw,2.2rem);width:100%}
.tile__content small{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.tile__content h3{color:var(--ivory);font-size:1.9rem;margin:.3rem 0 .8rem}
.tile .link-underline{color:var(--ivory)}
.tile .link-underline::after{background:var(--gold)}

/* ---------- 11. Story split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.split--rev .split__media{order:2}
.split__media{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:5/6;box-shadow:var(--shadow-md)}
.split__media img{width:100%;height:100%;object-fit:cover}
.split__media .tagframe{position:absolute;inset:14px;border:1px solid rgba(245,241,232,.4);border-radius:6px;pointer-events:none}
.split__body{max-width:520px}
.split__body h1,.split__body h2{font-size:var(--fs-h2);margin:1rem 0 1.3rem}
.split__body p+p{margin-top:1rem}
.signature{font-family:var(--font-serif);font-style:italic;font-size:1.5rem;color:var(--gold-text);margin-top:1.6rem}

/* ---------- 12. Quote band ---------- */
.band{position:relative;overflow:hidden;background:var(--forest);color:var(--ivory);text-align:center}
.band__bg{position:absolute;inset:0;background:url('../img/motif-emerald.jpeg') center/520px;opacity:.16;mix-blend-mode:luminosity}
.band__inner{position:relative;z-index:2;padding-block:clamp(4rem,8vw,7rem);max-width:840px;margin-inline:auto}
.band q{font-family:var(--font-serif);font-style:italic;font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.3;color:var(--ivory);display:block}
.band q::before,.band q::after{color:var(--gold)}
.band cite{display:block;margin-top:1.6rem;font-style:normal;font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}

/* ---------- 13. Promise / values ---------- */
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.4rem,3vw,2.6rem)}
.value{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.7rem}
.value__icon{width:58px;height:58px;display:grid;place-items:center;color:var(--gold-rich);border:1px solid var(--line-strong);border-radius:50%}
.value__icon svg{width:28px;height:28px;stroke-width:1.2}
.value h3{font-size:1.32rem}
.value p{font-size:.92rem;color:var(--ink-soft);max-width:26ch}

/* ---------- 14. Newsletter ---------- */
.newsletter{position:relative;overflow:hidden;background:var(--ivory-deep)}
.newsletter__bg{position:absolute;inset:0;background:url('../img/motif-sage.jpeg') center/440px;opacity:.22}
.newsletter__inner{position:relative;z-index:2;text-align:center;max-width:620px;margin-inline:auto}
.newsletter h2{font-size:var(--fs-h2);margin:1rem 0 .6rem}
.subscribe{display:flex;gap:.6rem;margin-top:2rem;max-width:460px;margin-inline:auto}
.subscribe input{
  flex:1;background:var(--ivory-soft);border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:1.05em 1.3em;font-size:.82rem;letter-spacing:.04em;color:var(--ink);transition:border-color .3s}
.subscribe input:focus{outline:none;border-color:var(--gold-rich)}
.subscribe input::placeholder{color:var(--ink-soft);letter-spacing:.1em;text-transform:uppercase;font-size:.74rem}
.form-note{font-size:.74rem;color:var(--ink-soft);margin-top:1rem;letter-spacing:.04em}

/* ---------- 15. Footer ---------- */
.footer{position:relative;overflow:hidden;background:var(--forest-deep);color:var(--ivory);padding-top:clamp(3.5rem,6vw,5.5rem)}
.footer__bg{position:absolute;inset:0;background:url('../img/motif-emerald.jpeg') center/480px;opacity:.08}
.footer__inner{position:relative;z-index:2}
.footer__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(1.5rem,3vw,3rem);padding-bottom:3rem;border-bottom:1px solid rgba(245,241,232,.14)}
.footer__brand .logo__word{color:var(--ivory)}
.footer__brand img{width:36px}
.footer__brand p{color:rgba(245,241,232,.66);font-size:.92rem;font-weight:300;margin-top:1.1rem;max-width:34ch}
.footer__brand .tagline{font-family:var(--font-serif);font-style:italic;color:var(--gold);font-size:1.08rem;margin-top:1.2rem}
.footer h4{font-family:var(--font-sans);font-size:.74rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:1.3rem}
.footer__col a{display:block;color:rgba(245,241,232,.72);font-size:.92rem;font-weight:300;padding:.34rem 0;transition:color .3s,padding-left .3s}
.footer__col a:hover{color:var(--gold);padding-left:5px}
.footer__social{display:flex;gap:.7rem;margin-top:0}
.footer__social a{width:38px;height:38px;border:1px solid rgba(245,241,232,.24);border-radius:50%;display:grid;place-items:center;color:var(--ivory);transition:.3s}
.footer__social a:hover{background:var(--gold);color:var(--forest);border-color:var(--gold)}
.footer__social svg{width:17px;height:17px}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding-block:1.8rem;color:rgba(245,241,232,.55);font-size:.82rem;letter-spacing:.04em}
.footer__bottom .pays{display:flex;gap:.5rem;align-items:center}
.footer__bottom .pays span{border:1px solid rgba(245,241,232,.24);border-radius:4px;padding:.2em .6em;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase}

/* ---------- 16. Cart drawer + toast ---------- */
.overlay{position:fixed;inset:0;background:rgba(21,40,30,.5);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:.4s var(--ease);z-index:70}
.overlay.open{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;right:0;height:100%;width:min(420px,100%);z-index:80;
  background:var(--ivory);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .5s var(--ease);
}
.drawer.open{transform:translateX(0)}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;border-bottom:1px solid var(--line)}
.drawer__head h3{font-size:1.5rem}
.drawer__head .count{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sage)}
.drawer__items{flex:1;overflow-y:auto;padding:1rem 1.5rem}
.drawer__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;gap:1rem;color:var(--ink-soft)}
.drawer__empty svg{width:40px;height:40px;color:var(--sage)}
.cart-line{display:grid;grid-template-columns:64px 1fr auto;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.cart-line__img{width:64px;height:80px;border-radius:4px;background-size:cover;background-position:center;border:1px solid var(--line)}
.cart-line__name{font-family:var(--font-serif);font-size:1.08rem;color:var(--forest);line-height:1.2}
.cart-line__meta{font-size:.74rem;color:var(--ink-soft);letter-spacing:.04em;margin-top:.15rem}
.cart-line__price{font-size:.82rem;margin-top:.3rem}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:999px;margin-top:.5rem}
.qty button{width:26px;height:26px;display:grid;place-items:center;color:var(--forest);font-size:1rem}
.qty span{min-width:24px;text-align:center;font-size:.82rem}
.cart-line__remove{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-top:.5rem;text-align:right;transition:color .3s}
.cart-line__remove:hover{color:#b14d4d}
.drawer__foot{padding:1.5rem;border-top:1px solid var(--line);background:var(--ivory-soft)}
.drawer__subtotal{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.4rem}
.drawer__subtotal .serif{font-size:1.5rem}
.drawer__foot .note{font-size:.74rem;color:var(--ink-soft);margin-bottom:1.1rem}

/* ---------- Floating WhatsApp button ----------
   z-index 50 keeps it above page content but UNDER the mobile nav (65), cart
   drawer (80), search (85) and toast (90) — it must never sit on top of a
   dialog. Collapsed to a circle; the label slides open on hover/focus. */
.wa-fab{
  position:fixed;right:clamp(14px,3vw,26px);bottom:clamp(14px,3vw,26px);z-index:50;
  display:inline-flex;align-items:center;gap:.5rem;height:52px;padding:0 15px;
  border-radius:999px;background:var(--forest);color:var(--ivory);
  box-shadow:0 8px 24px rgba(21,40,30,.28);border:1px solid rgba(216,194,138,.35);
  text-decoration:none;overflow:hidden;max-width:52px;
  transition:max-width .42s var(--ease-out),background .3s var(--ease),box-shadow .3s var(--ease);
}
.wa-fab svg{width:23px;height:23px;flex:none}
.wa-fab span{
  font-family:var(--font-sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;opacity:0;transition:opacity .3s var(--ease) .06s;
}
.wa-fab:hover,.wa-fab:focus-visible{max-width:210px;background:var(--forest-deep);box-shadow:0 10px 30px rgba(21,40,30,.36)}
.wa-fab:hover span,.wa-fab:focus-visible span{opacity:1}
.wa-fab:focus-visible{outline:2px solid var(--gold-rich);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.wa-fab,.wa-fab span{transition:none}}
@media print{.wa-fab{display:none}}

/* Hidden with visibility+opacity, NOT by the transform alone: sliding down 140%
   is 140% of the toast's OWN height, and while empty it is only ~30px tall —
   not enough to clear bottom:26px, so a 13px sliver of forest green sat at the
   bottom of every page (at z-90, over everything). pointer-events:none keeps
   the hidden toast from swallowing taps meant for the page beneath it. */
.toast{
  position:fixed;bottom:26px;left:50%;transform:translate(-50%,140%);z-index:90;
  background:var(--forest);color:var(--ivory);padding:.95rem 1.5rem;border-radius:999px;
  display:flex;align-items:center;gap:.7rem;box-shadow:var(--shadow-md);
  font-size:.82rem;letter-spacing:.08em;max-width:90vw;
  visibility:hidden;opacity:0;pointer-events:none;
  transition:transform .5s var(--ease-out),opacity .3s var(--ease),visibility .5s;
}
.toast.show{transform:translate(-50%,0);visibility:visible;opacity:1;pointer-events:auto}
.toast svg{width:18px;height:18px;color:var(--gold)}

/* ---------- 17. Page hero (sub pages) ---------- */
.page-hero{position:relative;overflow:hidden;background:var(--forest);color:var(--ivory);text-align:center}
.page-hero__bg{position:absolute;inset:0;background:url('../img/motif-emerald.jpeg') center/520px;opacity:.14}
.page-hero__inner{position:relative;z-index:2;padding-block:clamp(3rem,7vw,6rem)}
.page-hero h1{color:var(--ivory);font-size:var(--fs-display)}
.page-hero p{color:rgba(245,241,232,.78);max-width:50ch;margin:1rem auto 0}
.breadcrumb{display:flex;gap:.5rem;justify-content:center;align-items:center;margin-bottom:1.3rem;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.breadcrumb a{color:rgba(245,241,232,.7)}
.breadcrumb a:hover{color:var(--gold)}

/* ---------- 18. Shop toolbar ---------- */
.shop-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:2.4rem;padding-bottom:1.4rem;border-bottom:1px solid var(--line)}
.filters{display:flex;gap:.5rem;flex-wrap:wrap}
.chip{
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  padding:.6em 1.2em;border:1px solid var(--line-strong);border-radius:999px;
  transition:.3s var(--ease);background:transparent;
}
.chip:hover{border-color:var(--gold-rich);color:var(--forest)}
.chip.active{background:var(--forest);color:var(--ivory);border-color:var(--forest)}
.shop-sort{display:flex;align-items:center;gap:.6rem}
.shop-sort label{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.shop-sort select{
  border:1px solid var(--line-strong);border-radius:999px;padding:.6em 2.2em .6em 1.1em;
  background:transparent;font-size:.74rem;letter-spacing:.08em;color:var(--forest);cursor:pointer;
  appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231F3A2E' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1em center}
.shop-count{font-size:.74rem;color:var(--ink-soft);letter-spacing:.04em}
.shop-sort__chips{display:flex;gap:.4rem}
/* mobile-only control — desktop sorts with the price chips */
.shop-sort__select{display:none}
/* Two-row bar on /shop: the lead row (categories + sort) hands its divider
   down to the sub row (size + in stock) so the pair reads as one toolbar
   sitting above a single line. */
.shop-bar--lead{margin-bottom:.9rem;padding-bottom:0;border-bottom:0}
.filter-label{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);align-self:center;margin-right:.2rem}

/* ---------- 19. Product detail ----------
   The photo column is CAPPED (not proportional) so a wide screen widens the
   info panel instead of inflating the image — the pair stays balanced. */
.pdp{display:grid;grid-template-columns:minmax(340px,440px) minmax(0,1fr);gap:clamp(2rem,4vw,4rem);align-items:start;max-width:1060px;margin-inline:auto}
/* min-width:0 — a grid item defaults to min-width:auto, so ONE unshrinkable child
   (the thumbnail strip) would widen the whole column and scroll the page sideways */
.pdp__gallery,.pdp__info{min-width:0}
.pdp__gallery{position:sticky;top:calc(var(--nav-h) + 20px)}
.pdp__main{aspect-ratio:4/5;border-radius:var(--radius-lg);overflow:hidden;background-size:cover;background-position:center;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
/* thumbs scroll sideways instead of stretching the page — a product with 8 photos
   needs 542px of strip, far past a phone's width */
.pdp__thumbs{display:flex;gap:.7rem;margin-top:.9rem;overflow-x:auto;padding-bottom:.25rem;scrollbar-width:thin;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.pdp__thumbs::-webkit-scrollbar{height:4px}
.pdp__thumbs::-webkit-scrollbar-thumb{background:var(--line2);border-radius:999px}
.pdp__thumb{flex:none;scroll-snap-align:start;width:74px;aspect-ratio:3/4;border-radius:6px;overflow:hidden;background-size:cover;background-position:center;border:1px solid var(--line);cursor:pointer;transition:border-color .3s;opacity:.75}
.pdp__thumb.active,.pdp__thumb:hover{border-color:var(--gold-rich);opacity:1}
.pdp__cat{font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--sage)}
.pdp h1{font-size:clamp(2rem,4vw,3rem);margin:.6rem 0 .8rem}
.pdp__price{font-size:1.5rem;font-family:var(--font-serif);color:var(--forest);display:flex;gap:.8rem;align-items:baseline;flex-wrap:wrap}
.pdp__price del{font-size:1.08rem;color:var(--ink-soft)}
/* ---------- sale tags — rendered only while a product is actually discounted ----------
   Both sit on the price line rather than over the photo, so the imagery stays clean
   and every number about the money reads together. */
.pdp__tag,.pdp__save{
  font-family:var(--font-sans);letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  border-radius:999px;align-self:center;white-space:nowrap
}
.pdp__tag{font-size:.66rem;color:var(--gold);background:var(--forest);padding:.52em 1em}
.pdp__save{font-size:.58rem;color:var(--gold-text);background:rgba(216,194,138,.26);padding:.5em .9em}
@media (max-width:640px){
  .pdp__price{gap:.55rem}
  .pdp__tag{font-size:.58rem;padding:.48em .85em}
  .pdp__save{font-size:.58rem}
}
.pdp__rating{display:flex;align-items:center;gap:.5rem;margin:.8rem 0 1.4rem;font-size:.82rem;color:var(--ink-soft)}
.stars{color:var(--gold-rich);letter-spacing:.12em}
.pdp__desc{color:var(--ink-soft);font-weight:300;line-height:1.75;border-top:1px solid var(--line);padding-top:1.4rem;margin-top:.4rem}
.opt{margin-top:1.6rem}
.opt__label{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-bottom:.7rem;display:flex;justify-content:space-between}
.opt__label .hint{color:var(--gold-text);cursor:pointer}
.sizes{display:flex;gap:.5rem;flex-wrap:wrap}
.size{min-width:46px;height:46px;padding:0 .6rem;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:var(--radius);font-size:.82rem;letter-spacing:.06em;transition:.3s}
.size:hover{border-color:var(--forest)}
.size.active{background:var(--forest);color:var(--ivory);border-color:var(--forest)}
.size.size--out{opacity:.35;text-decoration:line-through;cursor:default}
.colors{display:flex;gap:.7rem}
.color-dot{width:30px;height:30px;border-radius:50%;border:1px solid var(--line-strong);position:relative;cursor:pointer}
.color-dot.active::after{content:"";position:absolute;inset:-5px;border:1px solid var(--gold-rich);border-radius:50%}
.pdp__actions{display:flex;gap:.8rem;margin-top:2rem;align-items:stretch}
.pdp__actions .qty{margin-top:0;border-radius:var(--radius);height:auto;padding:.2rem}
.pdp__actions .qty button{width:40px;height:44px}
.pdp__assure{display:flex;flex-direction:column;gap:.7rem;margin-top:1.8rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.pdp__assure div{display:flex;align-items:center;gap:.7rem;font-size:.82rem;color:var(--ink-soft)}
.pdp__assure svg{width:19px;height:19px;color:var(--gold-rich);flex:none}
/* the colour-variance note wraps to two lines, so pin its icon to the first line
   instead of letting it float to the vertical centre of the block */
.pdp__assure--note{align-items:flex-start !important;font-size:.82rem;line-height:1.5}
.pdp__assure--note svg{margin-top:.12rem}

.accordion{margin-top:1.6rem;border-top:1px solid var(--line)}
.acc{border-bottom:1px solid var(--line)}
.acc__head{width:100%;display:flex;justify-content:space-between;align-items:center;padding:1.1rem 0;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--forest)}
.acc__head .pm{transition:transform .3s}
.acc.open .pm{transform:rotate(45deg)}
.acc__body{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.acc__body p{padding-bottom:1.1rem;color:var(--ink-soft);font-weight:300;font-size:.92rem}

/* ---------- 20. About page ---------- */
.about-intro{max-width:760px;margin-inline:auto;text-align:center}
.about-intro p{font-size:1.08rem;color:var(--ink-soft);font-weight:300;line-height:1.8}
.about-intro .drop::first-letter{font-family:var(--font-serif);font-size:3.4rem;float:left;line-height:.8;padding:.1em .12em 0 0;color:var(--gold-text)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.6rem)}
.pillar{background:var(--ivory-soft);border:1px solid var(--line);border-radius:var(--radius-lg);padding:2.2rem 1.8rem;text-align:center}
.pillar .num{font-family:var(--font-serif);font-size:2.4rem;color:var(--gold-rich);line-height:1}
.pillar h3{margin:.6rem 0 .7rem}
.pillar p{font-size:.92rem;color:var(--ink-soft)}

/* ---------- 21. Cart page ---------- */
.cart-layout{display:grid;grid-template-columns:1.5fr .8fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
/* grid items default to min-width:auto, so a long product name would push the
   row past the screen on a narrow phone — let them shrink and wrap instead */
.cart-layout>*,.cart-row>*{min-width:0}
.cart-row__name,.cart-row__meta{overflow-wrap:anywhere}
.cart-table{border-top:1px solid var(--line)}
.cart-row{display:grid;grid-template-columns:90px 1fr auto auto;gap:1.2rem;align-items:center;padding:1.4rem 0;border-bottom:1px solid var(--line)}
.cart-row__img{width:90px;height:112px;border-radius:6px;background-size:cover;background-position:center;border:1px solid var(--line)}
.cart-row__name{font-family:var(--font-serif);font-size:1.32rem;color:var(--forest)}
.cart-row__meta{font-size:.74rem;color:var(--ink-soft);letter-spacing:.04em;margin-top:.2rem}
.cart-row__price{font-size:1rem;text-align:right;min-width:90px}
.summary{background:var(--ivory-soft);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.8rem;position:sticky;top:calc(var(--nav-h) + 20px)}
.summary h3{font-size:1.5rem;margin-bottom:1.3rem}
.summary__row{display:flex;justify-content:space-between;padding:.55rem 0;font-size:.92rem;color:var(--ink-soft)}
.summary__row--total{border-top:1px solid var(--line);margin-top:.6rem;padding-top:1rem;color:var(--ink);font-size:1.08rem}
.summary__row--total b{font-family:var(--font-serif);font-size:1.5rem;font-weight:500;color:var(--forest)}
.promo{display:flex;gap:.5rem;margin:1.2rem 0}
.promo input{flex:1;border:1px solid var(--line-strong);border-radius:var(--radius);padding:.8em 1em;font-size:.82rem;background:var(--ivory)}
.promo input:focus{outline:none;border-color:var(--gold-rich)}
.trust{display:flex;gap:1rem;justify-content:center;margin-top:1.2rem;color:var(--ink-soft);font-size:.74rem;letter-spacing:.1em}

.empty-state{text-align:center;padding:4rem 1rem;display:flex;flex-direction:column;align-items:center;gap:1.2rem}
.empty-state svg{width:54px;height:54px;color:var(--sage)}

/* ---------- 22. Reveal animations ---------- */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-delay="1"]{transition-delay:.08s}
[data-reveal][data-delay="2"]{transition-delay:.16s}
[data-reveal][data-delay="3"]{transition-delay:.24s}
[data-reveal][data-delay="4"]{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

/* ---------- 23. Responsive ---------- */
@media (max-width:1024px){
  .nav__link{font-size:.68rem;letter-spacing:.12em}
  .product-grid{grid-template-columns:repeat(3,1fr)}
  .pdp{grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:2rem}
  .footer__top{grid-template-columns:1fr 1fr 1fr;gap:2rem}
  .footer__brand{grid-column:1/-1}
}
@media (max-width:880px){
  :root{--nav-h:64px}
  .nav{grid-template-columns:auto 1fr auto}
  .nav__links{display:none}
  .nav__toggle{display:grid;place-items:center;color:var(--forest);justify-self:start}
  .nav__toggle svg{width:24px;height:24px}
  .logo{justify-self:start;margin-left:.4rem}
  .nav__icons{justify-self:end}
  .hero__inner{grid-template-columns:1fr;text-align:center;min-height:auto;gap:2.5rem}
  .hero__content{max-width:none;margin-inline:auto}
  .hero__cta,.eyebrow{justify-content:center}
  .hero__meta{justify-content:center}
  .hero__visual{max-width:440px;margin-inline:auto;width:100%}
  .split{grid-template-columns:1fr;gap:2rem}
  .split--rev .split__media{order:0}
  /* single column: photo capped + centred so a tablet doesn't get a
     full-width 1000px-tall image before any product info appears */
  .pdp{grid-template-columns:1fr;gap:1.6rem;max-width:560px}
  .pdp__gallery{position:static}
  .pdp__main{max-width:480px;margin-inline:auto}
  .pdp__thumbs{justify-content:center}
  .cart-layout{grid-template-columns:1fr}
  .summary{position:static}
  .values{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .product-grid,.product-grid--3{grid-template-columns:repeat(2,1fr);gap:1rem}
  .collections{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr}
  .nav__icons{gap:1rem}
  .hero__rosette{width:92px;height:92px;top:-18px;right:-8px}
  .hero__rosette--sale span.rosette__pct{font-size:1.28rem}
  .hero__rosette--sale span.rosette__pre,
  .hero__rosette--sale span.rosette__off{font-size:.47rem}
  .subscribe{flex-direction:column}
  /* ONE line: swipeable category rail on the left, compact sort select pinned
     right. The rail scrolls under the select; a chip cut by the edge is the
     "swipe me" affordance. The piece count steps aside — on a phone the grid
     itself says how much there is. */
  .shop-bar{flex-wrap:nowrap;align-items:center;gap:.6rem;margin-bottom:1.6rem;padding-bottom:1rem}
  /* the size row swipes just like the category rail; the lead row's divider
     still lives on the sub row */
  .shop-bar--lead{margin-bottom:.6rem;padding-bottom:0}
  .filter-label{flex:none}
  .filters{flex:1;min-width:0;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-left:-1.2rem;padding-left:1.2rem}
  .filters::-webkit-scrollbar{display:none}
  .filters .chip{flex:none;padding:.5em .95em;font-size:.68rem}
  .shop-sort{flex:none}
  .shop-count{display:none}
  .shop-sort__chips{display:none}
  .shop-sort .shop-sort__select{display:block;font-size:.66rem;padding:.5em 1.9em .5em .95em;letter-spacing:.1em;text-transform:uppercase}
  .card__name{font-size:1.08rem}
  .footer__top{grid-template-columns:1fr 1fr}
  .cart-row{grid-template-columns:70px 1fr;grid-template-areas:"img info" "img price";row-gap:.4rem}
  .cart-row__qty{grid-column:2}
}
@media (max-width:420px){
  .product-grid,.product-grid--3{grid-template-columns:1fr}
  .values{grid-template-columns:1fr}
  .pdp__thumb{width:58px}
}

/* ---------- 24. Decorative layers never block interaction ---------- */
.card__media::before,.band__bg,.page-hero__bg,.newsletter__bg,
.footer__bg,.hero__bg,.tile__bg,.tile::after{pointer-events:none}

/* ---------- 25. Lookbook gallery ---------- */
.lookbook{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2vw,1.6rem);max-width:1000px;margin-inline:auto}
.look{position:relative;display:block;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);background:var(--ivory-soft);border:1px solid var(--line)}
.look img{width:100%;height:auto;display:block;transition:transform 1s var(--ease)}
.look:hover img{transform:scale(1.03)}
.look__tag{position:absolute;left:12px;bottom:12px;background:rgba(245,241,232,.92);backdrop-filter:blur(4px);color:var(--forest);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;padding:.5em .9em;border-radius:999px;opacity:0;transform:translateY(8px);transition:.4s var(--ease)}
.look:hover .look__tag{opacity:1;transform:none}
@media (max-width:640px){.lookbook{grid-template-columns:1fr}}

/* ---------- 26. Checkout form ---------- */
.checkout-form{display:grid;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field label{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.field input:not([type=radio]):not([type=checkbox]),.field textarea{border:1px solid var(--line-strong);border-radius:var(--radius);padding:.85em 1em;font-size:.92rem;background:var(--ivory-soft);color:var(--ink);font-family:var(--font-sans);width:100%}
.field textarea{resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--gold-rich)}
.field--row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field--error input,.field--error textarea{border-color:#b14d4d;background:#fbf3f1}
.field__err{color:#b14d4d;font-size:.74rem;letter-spacing:normal;text-transform:none;margin-top:.1rem}
.pay-option{display:flex;align-items:center;gap:.7rem;border:1px solid var(--line-strong);border-radius:var(--radius);padding:.9em 1em;cursor:pointer;font-size:.92rem}
.pay-option input{width:auto;flex:none;margin:0;padding:0;border:0;background:none;accent-color:var(--forest)}
.pay-option span{letter-spacing:normal;text-transform:none;color:var(--ink);font-size:.92rem}
.confirm{text-align:center;max-width:580px;margin:1rem auto;padding:clamp(2rem,5vw,3.5rem) 2rem;background:var(--ivory-soft);border:1px solid var(--line);border-radius:var(--radius-lg)}
.confirm .check{width:66px;height:66px;border-radius:50%;background:var(--forest);color:var(--gold);display:grid;place-items:center;margin:0 auto 1.4rem}
.confirm .orderno{font-family:var(--font-serif);font-size:1.9rem;color:var(--gold-text);margin:.5rem 0 1rem;letter-spacing:.05em}
@media(max-width:560px){.field--row{grid-template-columns:1fr}}

/* ---------- 27. Search (site-wide overlay + shop inline) ---------- */
.search-modal{position:fixed;inset:0;z-index:85;visibility:hidden;opacity:0;transition:opacity .32s var(--ease),visibility .32s}
.search-modal.open{visibility:visible;opacity:1}
.search-modal__scrim{position:absolute;inset:0;background:rgba(21,40,30,.5);backdrop-filter:blur(3px)}
.search-modal__panel{
  position:relative;width:min(640px,calc(100% - 2rem));margin:clamp(1rem,9vh,7rem) auto 0;
  background:var(--ivory);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;
  display:flex;flex-direction:column;max-height:min(78vh,640px);
  transform:translateY(-14px);transition:transform .4s var(--ease-out);
}
.search-modal.open .search-modal__panel{transform:translateY(0)}
.search-modal__bar{display:flex;align-items:center;gap:.7rem;padding:1.05rem 1.2rem;border-bottom:1px solid var(--line);flex:none}
.search-modal__bar>svg{width:20px;height:20px;stroke:var(--sage);fill:none;stroke-width:1.6;flex:none}
.search-modal__input{flex:1;min-width:0;border:none;background:transparent;font-family:var(--font-serif);font-size:1.5rem;color:var(--forest);letter-spacing:.01em}
.search-modal__input:focus{outline:none}
.search-modal__input::placeholder{color:var(--sage-soft);font-style:italic;opacity:1}
.search-modal__input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.search-modal__clear,.search-modal__close{display:grid;place-items:center;color:var(--ink-soft);flex:none;transition:color .3s var(--ease)}
.search-modal__clear{width:26px;height:26px;border-radius:999px;background:var(--ivory-deep)}
.search-modal__clear svg,.search-modal__close svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7}
.search-modal__clear:hover,.search-modal__close:hover{color:var(--forest)}
.search-modal__results{flex:1 1 auto;min-height:0;overflow-y:auto;padding:.4rem 0}
.search-hint{padding:1.3rem 1.4rem;color:var(--ink-soft);font-size:.92rem;line-height:1.7}
.search-hint b{display:block;font-family:var(--font-serif);font-weight:500;font-size:1.08rem;color:var(--forest);margin-bottom:.6rem;letter-spacing:.01em}
.search-hint .chip{cursor:pointer;margin:0 .35rem .35rem 0}
.search-res{display:flex;align-items:center;gap:.9rem;padding:.7rem 1.4rem;transition:background .2s var(--ease)}
.search-res.is-active,.search-res:hover{background:var(--ivory-soft)}
.search-res__img{width:48px;height:60px;border-radius:4px;background-size:cover;background-position:center;border:1px solid var(--line);flex:none}
.search-res__info{display:flex;flex-direction:column;min-width:0}
.search-res__name{font-family:var(--font-serif);font-size:1.08rem;color:var(--forest);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-res__meta{font-size:.74rem;color:var(--ink-soft);letter-spacing:.03em;margin-top:.15rem}
.search-res__price{color:var(--gold-text)}
.search-all{display:block;padding:.95rem 1.4rem;border-top:1px solid var(--line);background:var(--ivory-soft);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--forest);transition:color .3s var(--ease)}
.search-all:hover{color:var(--gold-text)}
.search-empty{padding:2.2rem 1.4rem;text-align:center;line-height:1.7}
.search-empty b{display:block;font-family:var(--font-serif);font-weight:500;font-size:1.32rem;color:var(--forest);margin-bottom:.3rem}

.shop-search{position:relative;display:flex;align-items:center;gap:.7rem;margin-bottom:1.4rem;padding:.72rem 1.15rem;border:1px solid var(--line-strong);border-radius:999px;background:var(--ivory-soft);transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.shop-search:focus-within{border-color:var(--gold-rich);box-shadow:var(--shadow-sm)}
.shop-search>svg{width:18px;height:18px;stroke:var(--sage);fill:none;stroke-width:1.6;flex:none}
.shop-search input{flex:1;min-width:0;border:none;background:transparent;font-family:var(--font-sans);font-size:.92rem;color:var(--forest)}
.shop-search input:focus{outline:none}
.shop-search input::placeholder{color:var(--ink-soft);opacity:1}
.shop-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.shop-search__clear{display:none;place-items:center;width:24px;height:24px;border-radius:999px;background:var(--ivory-deep);color:var(--ink-soft);flex:none;transition:color .3s var(--ease)}
.shop-search__clear svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}
.shop-search__clear:hover{color:var(--forest)}
.shop-search.has-q .shop-search__clear{display:grid}
@media (max-width:640px){
  .search-modal__panel{margin-top:1rem;max-height:88vh}
  .search-modal__input{font-size:1.32rem}
}

/* ---------- 27b. Product page QR ---------- */
.pdp__qr{
  display:flex;align-items:center;gap:1rem;margin-top:1.1rem;padding:.85rem 1.05rem;
  border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--ivory-soft);
}
.pdp__share{display:flex;align-items:center;gap:.55rem;margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.pdp__share-label{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);margin-right:.35rem}
.pdp__share-btn{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:var(--ink-soft);transition:color .25s,background .25s}
.pdp__share-btn svg{width:17px;height:17px}
.pdp__share-btn:hover,.pdp__share-btn:focus-visible{color:var(--forest);background:var(--ivory-deep)}
/* "Share to…" carries a word as well as a glyph, so it is a pill rather than a
   circle — it opens the device's share sheet and is not a single destination
   the way the icons beside it are. */
.pdp__share-btn--more{width:auto;gap:.45rem;grid-auto-flow:column;padding:0 .85rem;height:34px;border:1px solid var(--line2);border-radius:999px;margin-left:.15rem}
.pdp__share-btn--more span{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
.pdp__share-btn--more:hover,.pdp__share-btn--more:focus-visible{border-color:var(--gold-rich);color:var(--forest);background:var(--ivory-deep)}
/* the word only drops on the narrowest phones — it still fits at 375px, and a
   phone is where this button matters most (the sheet is how WhatsApp is reached) */
@media(max-width:340px){.pdp__share-btn--more span{display:none}.pdp__share-btn--more{width:34px;padding:0;border-radius:50%}}
.pdp__qr img{width:88px;height:88px;flex:none;background:#fff;border:1px solid var(--line);border-radius:8px}
.pdp__qr b{display:block;font-family:var(--font-serif);font-weight:500;font-size:1.08rem;color:var(--forest);line-height:1.2}
.pdp__qr span{display:block;font-size:.82rem;color:var(--ink-soft);line-height:1.55;margin-top:.25rem}
@media (max-width:480px){
  .pdp__qr{gap:.8rem;padding:.75rem .85rem}
  .pdp__qr img{width:72px;height:72px}
  .pdp__qr span{font-size:.74rem}
}

/* ---------- 28. Product image lightbox (hover magnify removed — the image only
   zooms in the full-screen viewer, opened by click / the magnifier badge) ---------- */
.pdp__main--zoom{position:relative;cursor:zoom-in}
.pdp__main--zoom::after{                                  /* magnifier hint — click opens the viewer */
  content:"";position:absolute;right:14px;bottom:14px;width:34px;height:34px;border-radius:50%;pointer-events:none;
  background:rgba(245,241,232,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3A2E' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E") center/17px no-repeat;
  box-shadow:var(--shadow-sm);opacity:.9;
}

.lightbox{
  position:fixed;inset:0;z-index:88;display:flex;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,3rem);background:rgba(21,40,30,.94);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;
}
.lightbox.open{opacity:1;visibility:visible}
.lightbox__img{
  max-width:100%;max-height:100%;object-fit:contain;border-radius:4px;cursor:zoom-in;
  box-shadow:0 30px 80px rgba(0,0,0,.45);transition:transform .35s var(--ease);
}
.lightbox__img.is-zoomed{transform:scale(2.4);cursor:zoom-out}
.lightbox__close,.lightbox__nav{
  position:absolute;display:grid;place-items:center;border-radius:50%;color:var(--ivory);
  background:rgba(245,241,232,.14);transition:background .3s var(--ease);
}
.lightbox__close:hover,.lightbox__nav:hover{background:rgba(245,241,232,.3)}
.lightbox__close{top:18px;right:18px;width:42px;height:42px}
.lightbox__close svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6}
.lightbox__nav{top:50%;transform:translateY(-50%);width:46px;height:46px;font-size:1.7rem;line-height:1;padding-bottom:4px}
.lightbox__nav--prev{left:18px}
.lightbox__nav--next{right:18px}
.lightbox__nav[hidden]{display:none}
.lightbox__count{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:rgba(245,241,232,.75);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase}
@media (max-width:640px){
  .lightbox__nav{width:38px;height:38px;font-size:1.4rem}
  .lightbox__nav--prev{left:8px}
  .lightbox__nav--next{right:8px}
  .lightbox__img.is-zoomed{transform:scale(2)}
}