/* ============================================================
   celli. — The Fun Grip Company
   Luxury storefront design system
   ============================================================ */

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul{list-style:none}
::selection{background:var(--gold);color:var(--ink)}

/* ---------- tokens ---------- */
:root{
  --ink:#150409;
  --wine-900:#330717;
  --wine-800:#4d0f23;
  --wine-700:#6b1533;
  --wine:#8e1246;
  --wine-lift:#a8265c;

  --cream:#f4ece1;
  --cream-2:#efe5d5;
  --paper:#faf6ef;
  --pearl:#efeae1;

  --gold:#c9a227;
  --gold-soft:#e3c87e;
  --red:#c4181f;

  --muted:rgba(244,236,225,.84);
  --muted-ink:rgba(21,4,9,.76);
  --hair:rgba(244,236,225,.20);
  --hair-ink:rgba(21,4,9,.16);

  --ff-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --ff-body:"Jost","Inter",-apple-system,"Segoe UI",sans-serif;

  --pad:clamp(20px,5vw,84px);
  --maxw:1440px;
  --ease:cubic-bezier(.22,1,.36,1);
  --r:14px;
}

/* ---------- base ---------- */
body{
  font-family:var(--ff-body);
  font-size:clamp(15px,.55vw + 13px,17px);
  line-height:1.72;
  font-weight:400;          /* 300 was too thin to read on the dark ground */
  letter-spacing:.012em;
  background:var(--wine-900);
  color:var(--cream);
  -webkit-font-smoothing:antialiased;
}
/* NB: no overflow-x:hidden on body — it breaks ScrollTrigger pinning.
   Sections that bleed clip themselves instead. */
body.is-locked{overflow:hidden}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
section{position:relative}

/* dark sections carry a vignette: the edges deepen, the centre keeps the
   tone it already had */
.vignette::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(115% 90% at 50% 50%,transparent 34%,rgba(20,2,9,.30) 72%,rgba(14,1,6,.62) 100%),
    linear-gradient(90deg,rgba(14,1,6,.42),transparent 22%,transparent 78%,rgba(14,1,6,.42));
}
.vignette > *{position:relative;z-index:2}

/* ---------- type ---------- */
.display,h1,h2,h3{font-family:var(--ff-display);font-weight:300;line-height:1.03;letter-spacing:-.015em}
h1{font-size:clamp(2.9rem,7.2vw,6.6rem)}
h2{font-size:clamp(2.2rem,4.6vw,4.2rem)}
h3{font-size:clamp(1.3rem,1.7vw,1.9rem);line-height:1.18}
em,.it{font-style:italic;font-weight:600}
.thin{font-weight:200}

.eyebrow{
  font-family:var(--ff-body);
  font-size:.68rem;font-weight:400;
  letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold-soft);
}
.eyebrow.on-light{color:var(--wine)}
.lede{font-size:clamp(1rem,1.05vw,1.15rem);color:var(--muted);max-width:52ch}
.lede.on-light{color:var(--muted-ink)}
.script{font-family:var(--ff-display);font-style:italic;font-weight:500}

.sec-head{display:flex;flex-direction:column;gap:18px;margin-bottom:clamp(40px,5vw,76px)}
.sec-head .rule{width:64px;height:1px;background:var(--gold);opacity:.7}

/* light sections */
.light{background:var(--paper);color:var(--ink)}
.light .lede{color:var(--muted-ink)}
.cream{background:var(--cream-2);color:var(--ink)}
.cream .lede{color:var(--muted-ink)}

/* ---------- buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:16px 34px;border-radius:100px;overflow:hidden;
  font-size:.74rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid transparent;isolation:isolate;
  transition:color .5s var(--ease),border-color .5s var(--ease),transform .35s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  transform:translateY(101%);transition:transform .6s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:hover::before{transform:translateY(0)}
.btn:active{transform:translateY(0) scale(.985)}

.btn--gold{background:var(--gold);color:var(--ink)}
.btn--gold::before{background:var(--cream)}
.btn--wine{background:var(--wine);color:var(--cream)}
.btn--wine::before{background:var(--ink)}
.btn--ghost{border-color:var(--hair);color:var(--cream)}
.btn--ghost::before{background:var(--cream)}
.btn--ghost:hover{color:var(--ink);border-color:var(--cream)}
.btn--ghost-ink{border-color:var(--hair-ink);color:var(--ink)}
.btn--ghost-ink::before{background:var(--ink)}
.btn--ghost-ink:hover{color:var(--paper);border-color:var(--ink)}
.btn--block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}

.link-u{position:relative;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase}
.link-u::after{content:"";position:absolute;left:0;bottom:-5px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.link-u:hover::after{transform:scaleX(1);transform-origin:left}

/* ============================================================
   PRELOADER
   ============================================================ */
/* white stage, wine-toned content */
#preloader{
  position:fixed;inset:0;z-index:9999;
  background:#ffffff;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:26px;
}
/* transparent cutout of the lockup, so the moving light behind it shows
   through instead of a flat rectangle */
/* the inset trims the source JPEG's compressed border, a 1px column of
   which survives the cutout and reads as a hard vertical line */
#preloader img.pl-mark{width:min(280px,50vw);height:auto;position:relative;z-index:2;
  clip-path:inset(1%)}
#preloader .pl-bar,#preloader .pl-num{position:relative;z-index:2}

/* ---------- loader ambience: wine light + falling drops ---------- */
.pl-scene{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}

/* a broad light sweeping in from the left, like a glass catching a lamp */
.pl-sheen{
  position:absolute;top:-30%;left:-60%;width:70%;height:160%;
  background:linear-gradient(100deg,transparent,rgba(124,43,60,.10) 42%,rgba(201,162,39,.16) 58%,transparent);
  filter:blur(46px);transform:rotate(9deg);
  animation:plSheen 6.5s cubic-bezier(.5,0,.3,1) infinite;
}
@keyframes plSheen{
  0%{left:-60%;opacity:0}
  18%{opacity:1}
  72%{opacity:1}
  100%{left:118%;opacity:0}
}

/* a deep wine glow that swells from the lower edge */
.pl-pour{
  position:absolute;left:50%;bottom:-32%;translate:-50% 0;
  width:min(760px,120vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(168,38,92,.22),rgba(124,43,60,.10) 45%,transparent 70%);
  filter:blur(30px);
  animation:plPour 4.4s ease-in-out infinite;
}
@keyframes plPour{
  0%,100%{transform:scale(.9);opacity:.5}
  50%{transform:scale(1.08);opacity:.85}
}

.pl-drops{position:absolute;inset:0}
.pl-drops i{
  position:absolute;top:-8%;left:var(--x);
  width:6px;height:16px;
  border-radius:52% 52% 50% 50% / 68% 68% 36% 36%;
  background:linear-gradient(180deg,rgba(168,38,92,.75),rgba(94,18,38,.95));
  box-shadow:0 0 10px rgba(124,43,60,.28);
  transform:scale(var(--s));opacity:0;
  animation:plDrop 5.2s cubic-bezier(.4,0,.7,1) infinite;
  animation-delay:var(--d);
}
/* the thin trail behind each drop */
.pl-drops i::after{
  content:"";position:absolute;left:50%;bottom:100%;translate:-50% 0;
  width:1px;height:52px;
  background:linear-gradient(180deg,transparent,rgba(124,43,60,.30));
}
@keyframes plDrop{
  0%{transform:translateY(0) scale(var(--s));opacity:0}
  8%{opacity:.9}
  78%{opacity:.75}
  100%{transform:translateY(118vh) scale(var(--s));opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .pl-sheen,.pl-pour,.pl-drops i{animation:none !important}
  .pl-drops{display:none}
}
#preloader .pl-bar{width:min(280px,50vw);height:1px;background:rgba(94,18,38,.20);overflow:hidden}
#preloader .pl-bar i{display:block;height:100%;width:0;background:#7c2b3c}
#preloader .pl-num{font-size:.72rem;letter-spacing:.3em;color:#7c2b3c}
.pl-curtain{position:fixed;inset:0;z-index:9998;background:var(--wine-800);transform:translateY(100%)}

/* wipe played just before leaving for another local page — created on
   demand by anim.js, so it starts hidden rather than fixed-and-invisible */
.page-curtain{position:fixed;inset:0;z-index:9997;background:var(--wine-800);
  transform:translateY(100%);display:none;pointer-events:none}

/* trailing cursor glow — decoration only, the native pointer stays put */
.cursor-fx{
  position:fixed;top:0;left:0;width:26px;height:26px;border-radius:50%;
  translate:-50% -50%;pointer-events:none;z-index:9500;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(201,162,39,.55),rgba(142,18,70,.28) 55%,transparent 75%);
  opacity:0;transition:opacity .4s;
}
.cursor-fx.is-on{opacity:1}
@media (max-width:900px){ .cursor-fx{display:none} }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px var(--pad);
  transition:background .55s var(--ease),padding .55s var(--ease),box-shadow .55s var(--ease),backdrop-filter .55s;
}
.nav.is-stuck{
  padding-block:14px;background:rgba(38,6,18,.78);
  backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 1px 0 rgba(244,236,225,.10);
}
.nav.is-hidden{transform:translateY(-102%)}
.nav{transition:transform .5s var(--ease),background .55s var(--ease),padding .55s var(--ease),box-shadow .55s var(--ease)}

/* lockup: wordmark and flutes share the top line, tagline sits under both.
   width AND height are pinned so the mark can never lay out at its natural
   pixel size, even for the instant before CSS settles. */
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:5px;flex-shrink:0;line-height:1}
.brand-row{display:flex;align-items:center;gap:10px}
.brand-mark{width:30px;height:30px;object-fit:contain;flex:0 0 30px;
  transition:width .5s var(--ease),height .5s var(--ease),flex-basis .5s var(--ease)}
.brand b{font-family:var(--ff-display);font-style:italic;font-weight:600;font-size:1.55rem;letter-spacing:-.01em;line-height:1}
.brand-tag{font-size:.52rem;letter-spacing:.29em;text-transform:uppercase;color:var(--gold-soft);white-space:nowrap}
.nav.is-stuck .brand-mark{width:25px;height:25px;flex-basis:25px}

.nav-links{display:flex;gap:38px}
.nav-links a{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);position:relative;transition:color .4s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav-links a:hover{color:var(--cream)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}

.nav-right{display:flex;align-items:center;gap:18px}
.cart-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 20px;border:1px solid var(--hair);border-radius:100px;
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  transition:border-color .4s,background .4s,color .4s;
}
.cart-btn:hover{border-color:var(--gold);color:var(--gold-soft)}
.cart-btn .count{
  min-width:20px;height:20px;padding:0 5px;border-radius:100px;
  background:var(--gold);color:var(--ink);
  font-size:.66rem;font-weight:500;letter-spacing:0;
  display:grid;place-items:center;
}
.cart-btn.is-pop{animation:pop .5s var(--ease)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.13)}100%{transform:scale(1)}}

/* the mobile overlay only exists below 1080px — it must be fully out of
   the desktop header, not just unstyled */
.nav-menu{display:none}
.burger{display:none;width:26px;height:14px;position:relative}
.burger i{position:absolute;left:0;width:100%;height:1px;background:var(--cream);transition:transform .45s var(--ease),opacity .3s}
.burger i:nth-child(1){top:0}
.burger i:nth-child(2){bottom:0}
.nav.menu-open .burger i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav.menu-open .burger i:nth-child(2){transform:translateY(-6.5px) rotate(-45deg)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:100svh;display:flex;align-items:center;
  padding:clamp(120px,14vh,180px) 0 clamp(60px,8vh,110px);
  background:
    radial-gradient(120% 90% at 78% 18%,rgba(142,18,70,.55) 0%,transparent 62%),
    radial-gradient(90% 70% at 8% 92%,rgba(201,162,39,.14) 0%,transparent 60%),
    linear-gradient(160deg,#5d1129 0%,#3f0a1d 52%,#2a0512 100%);
  overflow:hidden;
}
/* ambient background film — square source, so it is cropped to cover */
.hero-video{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
  opacity:.62;pointer-events:none;
}
/* keeps the burgundy mood and the headline readable over the footage:
   heavy on the copy side, opening up towards the product */
.hero-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(58,9,27,.95) 0%,rgba(58,9,27,.86) 38%,rgba(45,6,20,.62) 68%,rgba(35,5,16,.72) 100%),
    radial-gradient(120% 80% at 20% 30%,rgba(0,0,0,.35),transparent 60%);
}
/* three.js ambient particle field — a plain absolute host, mounted by
   fx3d.js; stays empty (no layout shift) if WebGL/three.js is unavailable */
[data-fx-ambient]{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
[data-fx-ambient] canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-grain,.hero-glow{z-index:1}
.hero-grain{position:absolute;inset:0;opacity:.05;pointer-events:none;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero-glow{position:absolute;width:52vw;height:52vw;right:-8vw;top:6vh;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(201,162,39,.20),transparent 66%);filter:blur(30px)}

.hero .wrap{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(28px,4vw,72px);align-items:center;position:relative;z-index:2}

/* the highlight is the span's own background, so it grows exactly as far
   as the typed characters reach */
.hero-type{display:inline-block;font-size:.76rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--ink);min-height:1.3em;margin-bottom:26px;
  padding:9px 16px;border-radius:100px;
  background:var(--gold);
  box-shadow:0 8px 22px -8px rgba(201,162,39,.55)}
.hero-type .caret{background:var(--ink)}
.hero-type .caret{display:inline-block;width:1px;height:1em;background:var(--gold);vertical-align:-.14em;margin-left:3px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

.hero h1{margin-bottom:26px}
.hero h1 em{color:var(--cream)}
.hero-sub{font-family:var(--ff-display);font-style:italic;font-size:clamp(1.15rem,1.7vw,1.55rem);color:var(--gold-soft);margin-bottom:38px}
.hero-cta{display:flex;flex-wrap:wrap;gap:16px;align-items:center}

.hero-stats{display:flex;gap:clamp(24px,3vw,54px);margin-top:clamp(38px,5vh,64px);padding-top:26px;border-top:1px solid var(--hair)}
.hero-stats div b{display:block;font-family:var(--ff-display);font-size:2rem;line-height:1;color:var(--cream)}
.hero-stats div span{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* hero product composition */
.hero-shot{position:relative;height:clamp(440px,74vh,760px);display:grid;place-items:center;perspective:1200px}
/* no white card — the bottle sits straight on the background, lifted by
   a soft glow instead */
.hero-shot .shot-halo{
  position:absolute;width:min(560px,90%);aspect-ratio:1;border-radius:50%;
  left:50%;top:48%;translate:-50% -50%;pointer-events:none;
  background:radial-gradient(circle,rgba(201,162,39,.22),rgba(168,38,92,.12) 46%,transparent 70%);
  filter:blur(14px);
}
.shot-stage{position:relative;height:100%;width:100%;display:grid;place-items:center;transform-style:preserve-3d}

/* holder locks to the bottle photo's own 1024x1536 box so every
   percentage below is measured against the bottle itself */
.shot-holder{position:relative;height:94%;aspect-ratio:1024/1536}
.shot-bottle{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;
  filter:drop-shadow(0 30px 42px rgba(0,0,0,.38))}
/* aligned to newbottel.webp: the bottle's neck centre sits at 49.8% across,
   and the grip's finger stack at 59% of its own frame — these three numbers
   are what put the fingers around the neck */
.shot-grip{position:absolute;z-index:3;width:52%;left:19%;top:3.5%;
  filter:drop-shadow(0 12px 20px rgba(30,20,10,.42))}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{background:var(--gold);color:var(--ink);padding:20px 0;overflow:hidden;white-space:nowrap;position:relative;z-index:3}
.marquee-track{display:inline-flex;gap:0;will-change:transform}
.marquee span{font-family:var(--ff-display);font-style:italic;font-size:clamp(1.4rem,2.6vw,2.4rem);padding-inline:34px;display:inline-flex;align-items:center;gap:34px}
.marquee span::after{content:"◆";font-size:.44em;font-style:normal;opacity:.55}

/* ============================================================
   GRIP SCENE (pinned, scrub)
   ============================================================ */
.grip-scene{background:linear-gradient(180deg,#2a0512 0%,#4d0f23 45%,#330717 100%)}
.grip-stage{
  height:100svh;display:grid;grid-template-columns:1fr minmax(280px,34vw) 1fr;
  align-items:center;gap:clamp(20px,3vw,60px);
  padding-inline:var(--pad);max-width:var(--maxw);margin-inline:auto;position:relative;overflow:hidden;
}
.grip-stage::after{
  content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:min(680px,64vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,39,.15),transparent 65%);pointer-events:none;
}
.grip-col{position:relative;z-index:3}
.grip-col.right{text-align:right}
/* all three steps share one grid cell so they cross-fade in place */
.grip-col.left{display:grid;min-height:230px;align-content:center}
.grip-col.left .grip-step{grid-area:1/1;align-self:center}
/* only hidden when JS is there to reveal them again */
.js .grip-step{opacity:0}
/* no motion engine — unstack the steps and show all three as plain copy */
.no-motion .grip-col.left{display:block}
.no-motion .grip-step{opacity:1;margin-bottom:36px}
.grip-step h3{margin:14px 0 12px}
.grip-step p{color:var(--muted);font-size:1rem;line-height:1.75;max-width:34ch}
.grip-col.right .grip-step p{margin-left:auto}

/* min-width:0 stops the oversized clip from widening its grid track and
   shoving the whole stage sideways */
.grip-visual{position:relative;height:80svh;min-width:0;display:grid;place-items:center;z-index:2}
/* the three transparent GIFs already carry the whole clamp animation —
   no white card behind them, just a soft glow so the dark glass reads */
.gv-halo{position:absolute;z-index:1;width:min(620px,58vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,39,.18),rgba(168,38,92,.10) 45%,transparent 70%);
  filter:blur(12px)}
/* the stills are square with generous empty margins, so they run past the
   column and the stage clips the dead space. max-width must stay none or
   the grid track would shrink them. */
/* Absolute centring, not grid centring: the still is wider than its track,
   and grid alignment falls back to start for overflowing items, which was
   pinning it to the left edge. */
.gv-gif{position:absolute;z-index:2;left:50%;top:50%;translate:-50% -50%;
  height:128%;width:auto;max-width:none;
  filter:drop-shadow(0 30px 44px rgba(0,0,0,.5))}
@media (max-width:1080px){ .gv-gif{height:104%} }
.gv-ring{position:absolute;width:min(560px,52vw);aspect-ratio:1;border:1px solid var(--hair);border-radius:50%;z-index:0}
.gv-ring.b{width:min(760px,68vw);opacity:.55}

.grip-progress{position:absolute;left:50%;bottom:5svh;translate:-50% 0;z-index:5;display:flex;align-items:center;gap:14px}
.grip-progress .bar{width:min(220px,32vw);height:1px;background:var(--hair);overflow:hidden}
.grip-progress .bar i{display:block;height:100%;width:0;background:var(--gold)}
.grip-progress em{font-style:normal;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}

/* ============================================================
   VALUE PROPS
   ============================================================ */
.props{padding:clamp(80px,11vw,150px) 0}
.props-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,56px)}
.prop{position:relative;padding-top:30px;border-top:1px solid var(--hair-ink)}
.prop .no{font-family:var(--ff-display);font-size:.9rem;color:var(--wine);letter-spacing:.1em;margin-bottom:18px;display:block}
.prop h3{color:var(--wine);margin-bottom:14px}
.prop p{color:var(--muted-ink);font-size:.95rem}

/* ============================================================
   VARIANTS
   ============================================================ */
/* JS tints this section through light swatch colours, so it is always a
   light surface — it must carry ink text, not the inherited cream */
.variants{padding:clamp(84px,11vw,150px) 0;overflow:hidden;color:var(--ink);transition:background 1s var(--ease)}
.variants .lede{color:var(--muted-ink)}
.variants-inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,80px);align-items:center}
.variant-stage{position:relative;height:clamp(380px,56vh,620px);display:grid;place-items:center}
/* a warm dark halo, not a white one — Pearl White needs something to
   sit against on a cream section */
/* white halo, so the multiply cutout above it stays a true cutout */
.variant-stage .halo{position:absolute;width:82%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,255,255,0) 70%)}
.variant-img{position:absolute;width:min(78%,440px);opacity:0;
  filter:drop-shadow(0 26px 40px rgba(60,15,30,.3))}
.variant-img.is-active{opacity:1}

.variant-list{display:flex;flex-direction:column}
.variant-row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;
  padding:26px 4px;border-top:1px solid var(--hair-ink);cursor:pointer;position:relative;
  transition:padding-left .5s var(--ease);
}
.variant-row:last-child{border-bottom:1px solid var(--hair-ink)}
.variant-row:hover,.variant-row.is-active{padding-left:20px}
.variant-row .sw{width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14),0 6px 14px rgba(0,0,0,.18)}
.variant-row .nm{font-family:var(--ff-display);font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:1.1}
.variant-row .oc{display:block;font-family:var(--ff-body);font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-ink);margin-top:6px}
.variant-row .pick{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;opacity:0;transform:translateX(-8px);transition:.45s var(--ease);color:var(--wine)}
.variant-row.is-active .pick,.variant-row:hover .pick{opacity:1;transform:translateX(0)}
.variant-row .bgline{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(142,18,70,.05);transition:width .6s var(--ease);z-index:-1}
.variant-row.is-active .bgline{width:100%}
.variant-cta{margin-top:38px;display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.variant-price{font-family:var(--ff-display);font-weight:500;font-size:clamp(2.2rem,3.2vw,2.9rem);
  line-height:1;color:var(--wine)}

/* ============================================================
   SHOP
   ============================================================ */
.shop{padding:clamp(84px,11vw,150px) 0;background:linear-gradient(180deg,#330717,#4d0f23)}
/* single product — the card runs wide with the media beside the copy */
.shop-grid{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,48px)}
.card--wide{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.card--wide .card-media{height:100%;min-height:clamp(340px,46vh,520px)}
.card--wide .card-body{border-top:0;border-left:1px solid var(--hair);display:flex;flex-direction:column;justify-content:center}
.card{
  position:relative;border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;
  background:rgba(244,236,225,.03);backdrop-filter:blur(4px);
  transition:transform .7s var(--ease),border-color .5s,background .5s;
}
.card:hover{transform:translateY(-8px);border-color:rgba(201,162,39,.45);background:rgba(244,236,225,.055)}
/* light product plate: the supplied grip render has a cream backdrop, so
   every surface it sits on must be cream too */
.card-media{position:relative;height:clamp(320px,40vh,460px);display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(150deg,#faf7ef,#ece3d2)}
/* 100% + contain always fits the whole product, whatever its aspect ratio */
.card-media img{width:100%;height:100%;object-fit:contain;padding:7%;
  transition:transform 1.1s var(--ease)}
.card:hover .card-media img{transform:scale(1.06) translateY(-6px)}
.card-badge{position:absolute;top:18px;left:18px;padding:7px 14px;border-radius:100px;background:var(--gold);color:var(--ink);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;z-index:2}
.card-badge--soon{background:rgba(21,4,9,.72);color:var(--cream)}

/* not for sale yet: image and story stay, commerce comes off */
.card.is-soon{opacity:.9}
.card.is-soon:hover{transform:none}
.card.is-soon .card-media img{filter:saturate(.85)}
.card.is-soon .opt{pointer-events:none}
.soon-note{font-size:.74rem;color:var(--muted);letter-spacing:.04em}
.card-body{padding:clamp(22px,2.4vw,34px);border-top:1px solid var(--hair)}
.card-body .k{display:flex;justify-content:space-between;align-items:baseline;gap:18px;margin-bottom:12px}
.card-body h3{font-size:clamp(1.55rem,2.3vw,2.2rem)}
.card-body .price{display:flex;align-items:baseline;gap:12px;
  font-family:var(--ff-display);font-weight:500;font-size:clamp(2.2rem,3.4vw,3.1rem);
  color:var(--gold);line-height:1;white-space:nowrap}
.card-body .price s{font-family:var(--ff-body);font-size:.34em;font-weight:300;
  color:var(--muted);text-decoration-thickness:1px;letter-spacing:.04em}
.card-body p{color:var(--muted);font-size:1rem;line-height:1.75;margin-bottom:24px}
.card-opts{display:flex;gap:10px;margin-bottom:22px;flex-wrap:wrap}
.opt{padding:9px 16px;border:1px solid var(--hair);border-radius:100px;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:.35s}
.opt:hover{border-color:var(--gold-soft);color:var(--cream)}
.opt.is-on{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.opt:active{transform:scale(.93)}

/* ============================================================
   OCCASIONS (horizontal scroll)
   ============================================================ */
.occasions{padding:clamp(84px,11vw,140px) 0 clamp(70px,9vw,120px);overflow:hidden}
.occ-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,36px)}
.occ{border-radius:var(--r);overflow:hidden;background:var(--paper);box-shadow:0 24px 60px -30px rgba(0,0,0,.4)}
.occ .top{height:clamp(220px,25vw,310px);display:grid;place-items:center;overflow:hidden}
.occ .top img{width:100%;height:100%;object-fit:contain;padding:9%;
  filter:drop-shadow(0 16px 26px rgba(60,20,30,.24));transition:transform .9s var(--ease)}
.occ:hover .top img{transform:scale(1.06) rotate(-2deg)}
.occ .btm{padding:28px}
.occ-col{display:block;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.occ .btm h3{color:var(--wine);margin-bottom:10px}
.occ .btm p{font-size:.9rem;color:var(--muted-ink)}

/* ============================================================
   QUOTE / SPLIT
   ============================================================ */
.quote{padding:clamp(90px,13vw,180px) 0;background:linear-gradient(140deg,#4d0f23,#2a0512);text-align:center}
.quote blockquote{font-family:var(--ff-display);font-size:clamp(1.8rem,4vw,3.4rem);line-height:1.16;max-width:20ch;margin-inline:auto}
.quote cite{display:block;margin-top:34px;font-style:normal;font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-soft)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{padding:clamp(84px,11vw,150px) 0}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,5vw,80px);align-items:start}
.acc{border-top:1px solid var(--hair-ink)}
.acc-item{border-bottom:1px solid var(--hair-ink)}
.acc-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 0;text-align:left;font-family:var(--ff-display);font-size:clamp(1.15rem,1.6vw,1.5rem);transition:color .4s}
.acc-q:hover{color:var(--wine)}
.acc-q .pm{position:relative;width:16px;height:16px;flex-shrink:0}
.acc-q .pm::before,.acc-q .pm::after{content:"";position:absolute;background:currentColor;transition:transform .5s var(--ease)}
.acc-q .pm::before{left:0;top:7.5px;width:16px;height:1px}
.acc-q .pm::after{top:0;left:7.5px;height:16px;width:1px}
.acc-item.is-open .acc-q{color:var(--wine)}
.acc-item.is-open .pm::after{transform:rotate(90deg) scaleX(0)}
.acc-a{overflow:hidden;height:0}
.acc-a p{padding-bottom:28px;color:var(--muted-ink);font-size:.95rem;max-width:62ch}

/* ============================================================
   NEWSLETTER + FOOTER
   ============================================================ */
.news{padding:clamp(70px,9vw,120px) 0;background:var(--gold);color:var(--ink)}
.news-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,70px);align-items:center}
.news h2{max-width:14ch}
.news-form{display:flex;gap:12px;flex-wrap:wrap}
.news-form input{flex:1 1 240px;padding:16px 22px;border:1px solid rgba(21,4,9,.25);border-radius:100px;background:transparent;outline:none;transition:border-color .4s}
.news-form input::placeholder{color:rgba(21,4,9,.45)}
.news-form input:focus{border-color:var(--ink)}
.news-note{font-size:.72rem;margin-top:14px;color:rgba(21,4,9,.6)}

.foot{background:var(--ink);padding:clamp(60px,8vw,110px) 0 40px}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(24px,3vw,50px);padding-bottom:clamp(40px,5vw,70px);border-bottom:1px solid var(--hair)}
.foot h4{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:22px;font-weight:400}
.foot li{margin-bottom:12px}
.foot li a{color:var(--muted);font-size:.9rem;transition:color .4s}
.foot li a:hover{color:var(--cream)}
.foot-mark{font-family:var(--ff-display);font-style:italic;font-size:2.6rem;line-height:1;margin-bottom:16px}
.foot-bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:28px;font-size:.72rem;color:var(--muted)}

/* ============================================================
   CART DRAWER
   ============================================================ */
.scrim{position:fixed;inset:0;z-index:1000;background:rgba(10,2,6,.62);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
.scrim.is-on{opacity:1;visibility:visible}

.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:1001;width:min(460px,92vw);
  background:linear-gradient(180deg,#3d0a1c,#25040f);border-left:1px solid var(--hair);
  display:flex;flex-direction:column;transform:translateX(102%);
  transition:transform .7s var(--ease);
}
.drawer.is-on{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:26px 28px;border-bottom:1px solid var(--hair)}
.drawer-head h3{font-size:1.5rem}
.x{width:34px;height:34px;border-radius:50%;border:1px solid var(--hair);display:grid;place-items:center;transition:.4s}
.x:hover{background:var(--cream);color:var(--ink);border-color:var(--cream);transform:rotate(90deg)}
.drawer-body{flex:1;overflow-y:auto;padding:12px 28px}
.drawer-body::-webkit-scrollbar{width:3px}
.drawer-body::-webkit-scrollbar-thumb{background:var(--hair)}

.line{display:grid;grid-template-columns:74px 1fr auto;gap:16px;padding:22px 0;border-bottom:1px solid var(--hair);align-items:center}
.line .thumb{height:82px;border-radius:10px;background:linear-gradient(150deg,#faf7ef,#ece3d2);display:grid;place-items:center;overflow:hidden}
.line .thumb img{width:100%;height:100%;object-fit:contain;padding:6px}
.line h5{font-family:var(--ff-display);font-size:1.1rem;font-weight:400;line-height:1.2}
.line .var{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.line .qty{display:inline-flex;align-items:center;gap:2px;margin-top:12px;border:1px solid var(--hair);border-radius:100px;overflow:hidden}
.line .qty button{width:28px;height:26px;font-size:.9rem;line-height:1;color:var(--muted);transition:.3s}
.line .qty button:hover{background:var(--cream);color:var(--ink)}
.line .qty span{min-width:24px;text-align:center;font-size:.78rem}
.line .amt{font-family:var(--ff-display);font-size:1.15rem;color:var(--gold-soft);text-align:right}
.line .rm{display:block;margin-top:10px;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:.3s}
.line .rm:hover{color:var(--red)}

.drawer-empty{text-align:center;padding:70px 10px;color:var(--muted)}
.drawer-empty .em{font-family:var(--ff-display);font-style:italic;font-size:2rem;color:var(--cream);margin-bottom:12px}
.drawer-foot{padding:24px 28px 30px;border-top:1px solid var(--hair);background:rgba(0,0,0,.2)}
.drawer-foot .row{display:flex;justify-content:space-between;margin-bottom:10px;font-size:.86rem;color:var(--muted)}
.drawer-foot .row.tot{color:var(--cream);font-family:var(--ff-display);font-size:1.5rem;margin:16px 0 20px;padding-top:16px;border-top:1px solid var(--hair)}

/* fly-to-cart ghost */
.fly{position:fixed;z-index:1200;pointer-events:none;width:70px;filter:drop-shadow(0 10px 20px rgba(0,0,0,.4))}

/* ============================================================
   AI CONCIERGE
   ============================================================ */
.bot-dock{position:fixed;right:26px;bottom:26px;z-index:1150;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px}

/* teaser bubble — the "May I help you?" nudge */
.bot-teaser{
  position:relative;max-width:250px;
  padding:15px 34px 15px 18px;border-radius:16px;border-bottom-right-radius:5px;
  background:linear-gradient(160deg,#5d1129,#33071a);
  border:1px solid rgba(201,162,39,.36);
  box-shadow:0 22px 50px -18px rgba(0,0,0,.75);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.94);transform-origin:100% 100%;
  transition:opacity .55s var(--ease),transform .6s var(--ease),visibility .55s;
}
.bot-teaser.is-on{opacity:1;visibility:visible;transform:none}
.bot-teaser p{font-family:var(--ff-display);font-size:1.15rem;line-height:1.25;color:var(--cream)}
.bot-teaser-live{display:flex;align-items:center;gap:7px;margin-bottom:7px;
  font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft)}
.bot-teaser-live i{width:7px;height:7px;border-radius:50%;background:#54c98a;
  box-shadow:0 0 0 0 rgba(84,201,138,.65);animation:liveDot 2s ease-out infinite}
@keyframes liveDot{
  0%{box-shadow:0 0 0 0 rgba(84,201,138,.6)}
  70%{box-shadow:0 0 0 9px rgba(84,201,138,0)}
  100%{box-shadow:0 0 0 0 rgba(84,201,138,0)}
}
.bot-teaser-x{position:absolute;top:8px;right:10px;width:20px;height:20px;border-radius:50%;
  font-size:.95rem;line-height:1;color:var(--muted);display:grid;place-items:center;transition:.3s}
.bot-teaser-x:hover{background:rgba(244,236,225,.14);color:var(--cream)}

/* hover label beside the button */
.bot-launch-label{
  position:absolute;right:calc(100% + 12px);top:50%;translate:0 -50%;
  padding:9px 16px;border-radius:100px;white-space:nowrap;
  background:var(--cream);color:var(--ink);
  font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  opacity:0;transform:translateX(8px);pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.bot-launch:hover .bot-launch-label,.bot-launch:focus-visible .bot-launch-label{opacity:1;transform:translateX(0)}

.bot-actions{display:flex;align-items:center;gap:10px}

/* voice entry point, sitting beside the chat button */
.bot-callbtn{
  position:relative;width:46px;height:46px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;color:var(--cream);
  background:rgba(42,5,18,.82);border:1px solid rgba(201,162,39,.45);
  box-shadow:0 14px 30px -10px rgba(0,0,0,.65);
  transition:transform .45s var(--ease),background .4s,color .4s;
}
.bot-callbtn:hover{transform:translateY(-3px) scale(1.06);background:var(--gold);color:var(--ink);border-color:var(--gold)}
.bot-callbtn .bot-launch-label{right:calc(100% + 10px)}
.bot-callbtn:hover .bot-launch-label{opacity:1;transform:translateX(0)}
.bot-callbtn.is-live{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.bot-callbtn.is-live::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;border:1px solid var(--gold);
  animation:botPulse 1.6s ease-out infinite;
}

.bot-launch{
  position:relative;
  width:58px;height:58px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;
  background:linear-gradient(150deg,#7b1637,#4a0d21);
  border:1px solid rgba(201,162,39,.5);
  box-shadow:0 18px 40px -12px rgba(0,0,0,.7);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),opacity .4s;
}
.bot-launch:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 24px 50px -14px rgba(0,0,0,.8)}
.bot-launch img{position:relative;z-index:2}
.bot-launch-ring{
  position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--gold);
  opacity:.5;animation:botPulse 2.8s ease-out infinite;
}
@keyframes botPulse{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(1.42);opacity:0}
  100%{transform:scale(1.42);opacity:0}
}
.bot-launch-dot{position:absolute;top:5px;right:5px;width:10px;height:10px;border-radius:50%;
  background:#54c98a;border:2px solid #4a0d21;z-index:3}
.bot-dock.is-hidden{opacity:0;pointer-events:none;transform:scale(.7);transform-origin:100% 100%;
  transition:opacity .4s,transform .5s var(--ease)}

.bot{
  position:fixed;right:26px;bottom:26px;z-index:1151;
  width:min(392px,calc(100vw - 32px));height:min(620px,calc(100svh - 52px));
  display:flex;flex-direction:column;
  border-radius:20px;overflow:hidden;
  background:linear-gradient(170deg,#4f0f24,#2a0512 62%,#1d0410);
  border:1px solid rgba(201,162,39,.3);
  box-shadow:0 50px 110px -30px rgba(0,0,0,.85);
  opacity:0;visibility:hidden;transform:translateY(22px) scale(.96);transform-origin:100% 100%;
  transition:opacity .5s var(--ease),transform .6s var(--ease),visibility .5s;
}
.bot.is-on{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.bot{position:fixed}   /* anchor for the voice panel's absolute inset */

.bot-head{display:flex;align-items:center;gap:12px;padding:16px 18px;
  border-bottom:1px solid var(--hair);background:rgba(0,0,0,.22)}
.bot-avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:rgba(201,162,39,.14);border:1px solid rgba(201,162,39,.34)}
.bot-id{display:flex;flex-direction:column;gap:3px;min-width:0}
.bot-id b{font-family:var(--ff-display);font-style:italic;font-weight:600;font-size:1.15rem;line-height:1}
.bot-status{display:flex;align-items:center;gap:7px;font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bot-status i{width:6px;height:6px;border-radius:50%;background:#54c98a;flex-shrink:0}
.bot-min{margin-left:auto;width:30px;height:30px;border-radius:50%;font-size:1.2rem;line-height:1;
  color:var(--muted);border:1px solid var(--hair);display:grid;place-items:center;transition:.35s;flex-shrink:0}
.bot-min:hover{background:var(--cream);color:var(--ink);border-color:var(--cream);transform:rotate(90deg)}

.bot-log{flex:1;overflow-y:auto;padding:20px 18px;display:flex;flex-direction:column;gap:12px}
.bot-log::-webkit-scrollbar{width:3px}
.bot-log::-webkit-scrollbar-thumb{background:var(--hair)}

.msg{max-width:84%;padding:12px 16px;border-radius:16px;font-size:.88rem;line-height:1.6;
  animation:msgIn .5s var(--ease) both}
@keyframes msgIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.msg--bot{align-self:flex-start;background:rgba(244,236,225,.08);border:1px solid var(--hair);
  border-bottom-left-radius:5px;color:var(--cream)}
.msg--me{align-self:flex-end;background:var(--gold);color:var(--ink);border-bottom-right-radius:5px}
.msg-time{display:block;margin-top:6px;font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;opacity:.5}

.bot-typing{align-self:flex-start;display:flex;gap:5px;padding:14px 16px;border-radius:16px;
  border-bottom-left-radius:5px;background:rgba(244,236,225,.08);border:1px solid var(--hair)}
.bot-typing i{width:6px;height:6px;border-radius:50%;background:var(--gold-soft);
  animation:botDot 1.2s ease-in-out infinite}
.bot-typing i:nth-child(2){animation-delay:.16s}
.bot-typing i:nth-child(3){animation-delay:.32s}
@keyframes botDot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

/* min-width:0 lets the rail scroll instead of forcing the panel wider;
   the mask fades the right edge so it reads as scrollable */
.bot-chips{
  display:flex;gap:8px;padding:0 18px 12px;
  overflow-x:auto;overflow-y:hidden;min-width:0;flex:0 0 auto;
  scrollbar-width:none;-ms-overflow-style:none;
  scroll-snap-type:x proximity;overscroll-behavior-x:contain;
  cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%);
}
.bot-chips.is-dragging{cursor:grabbing;scroll-snap-type:none}
.bot-chips::-webkit-scrollbar{display:none}
.bot-chips button{flex:0 0 auto;padding:9px 15px;border-radius:100px;border:1px solid var(--hair);
  font-size:.7rem;color:var(--muted);white-space:nowrap;transition:.35s;scroll-snap-align:start;
  user-select:none}
.bot-chips button:hover{border-color:var(--gold-soft);color:var(--cream);background:rgba(201,162,39,.1)}

.bot-input{display:flex;align-items:flex-end;gap:10px;padding:14px 18px 10px;border-top:1px solid var(--hair);
  background:rgba(0,0,0,.22)}
.bot-input textarea{flex:1;resize:none;max-height:112px;padding:12px 16px;border-radius:18px;
  border:1px solid var(--hair);background:rgba(0,0,0,.3);outline:none;
  font-size:.87rem;line-height:1.5;transition:border-color .4s}
.bot-input textarea:focus{border-color:var(--gold-soft)}
.bot-input textarea::placeholder{color:rgba(244,236,225,.4)}
.bot-mic{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  border:1px solid var(--hair);color:var(--muted);transition:.35s}
.bot-mic:hover{border-color:var(--gold-soft);color:var(--cream)}
.bot-mic.is-live{background:var(--gold);color:var(--ink);border-color:var(--gold)}

/* live voice panel, sits over the log while the agent is listening */
.bot-voice{
  position:absolute;inset:auto 0 0 0;z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:38px 20px 34px;
  background:linear-gradient(0deg,#2a0512 60%,rgba(42,5,18,.94) 85%,transparent);
  opacity:0;visibility:hidden;transform:translateY(18px);
  transition:opacity .4s var(--ease),transform .5s var(--ease),visibility .4s;
}
.bot-voice.is-on{opacity:1;visibility:visible;transform:none}
.bot-voice-wave{display:flex;align-items:center;gap:5px;height:44px}
.bot-voice-wave i{width:4px;border-radius:100px;background:var(--gold-soft);
  animation:botWave 1.1s ease-in-out infinite}
.bot-voice-wave i:nth-child(1){height:14px;animation-delay:0s}
.bot-voice-wave i:nth-child(2){height:26px;animation-delay:.09s}
.bot-voice-wave i:nth-child(3){height:38px;animation-delay:.18s}
.bot-voice-wave i:nth-child(4){height:44px;animation-delay:.27s}
.bot-voice-wave i:nth-child(5){height:38px;animation-delay:.36s}
.bot-voice-wave i:nth-child(6){height:26px;animation-delay:.45s}
.bot-voice-wave i:nth-child(7){height:14px;animation-delay:.54s}
@keyframes botWave{0%,100%{transform:scaleY(.35);opacity:.5}50%{transform:scaleY(1);opacity:1}}
.bot-voice-state{font-family:var(--ff-display);font-style:italic;font-size:1.3rem;color:var(--cream)}
.bot-voice-stop{padding:10px 22px;border-radius:100px;border:1px solid var(--hair);
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);transition:.35s}
.bot-voice-stop:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}

.bot-send{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:var(--gold);color:var(--ink);transition:transform .35s var(--ease),opacity .3s}
.bot-send:hover{transform:scale(1.08)}
.bot-send:disabled{opacity:.35;pointer-events:none}
.bot-foot{padding:0 18px 14px;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(244,236,225,.34);text-align:center}

@media (max-width:520px){
  .bot{right:8px;left:8px;bottom:8px;width:auto;height:min(78svh,560px)}
  .bot-dock{right:16px;bottom:16px}
  .bot-teaser{max-width:200px}
}

/* ============================================================
   WELCOME COUPON POPUP
   ============================================================ */
.promo-scrim{position:fixed;inset:0;z-index:1100;background:rgba(10,2,6,.68);backdrop-filter:blur(7px);
  opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility .6s}
.promo-scrim.is-on{opacity:1;visibility:visible}

.promo{
  position:fixed;left:50%;top:50%;z-index:1101;
  width:min(880px,92vw);max-height:92svh;overflow:auto;
  display:grid;grid-template-columns:.85fr 1.15fr;
  border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg,#5d1129,#33071a);
  border:1px solid rgba(201,162,39,.34);
  box-shadow:0 60px 140px -40px rgba(0,0,0,.8);
  translate:-50% -50%;scale:.94;opacity:0;visibility:hidden;
  transition:opacity .6s var(--ease),scale .7s var(--ease),visibility .6s;
}
.promo.is-on{opacity:1;scale:1;visibility:visible}
.promo-x{position:absolute;top:16px;right:16px;z-index:3;color:var(--cream)}
.promo-art{position:relative;display:grid;place-items:center;padding:26px;
  background:radial-gradient(70% 70% at 50% 40%,rgba(201,162,39,.22),transparent 70%)}
.promo-art img{width:100%;max-width:260px;height:auto;filter:drop-shadow(0 24px 34px rgba(0,0,0,.5))}
.promo-body{padding:clamp(28px,3.4vw,44px);display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.promo-mark{width:46px;height:auto;margin-bottom:2px}
.promo-body h3{font-size:clamp(1.7rem,2.6vw,2.4rem);line-height:1.1}
.promo-body h3 em{color:var(--gold-soft)}
.promo-body p{color:var(--muted);font-size:.92rem}

.promo-code{
  position:relative;width:100%;cursor:pointer;
  padding:15px 20px;border:1px dashed rgba(201,162,39,.6);border-radius:10px;
  background:rgba(201,162,39,.09);color:var(--gold-soft);
  font-size:1rem;letter-spacing:.34em;text-transform:uppercase;
  transition:background .4s,border-color .4s;
}
.promo-code:hover{background:rgba(201,162,39,.16);border-color:var(--gold)}
.promo-code span{position:absolute;right:18px;top:50%;translate:0 -50%;
  font-size:.56rem;letter-spacing:.18em;color:var(--muted)}

.promo-form{display:flex;gap:10px;width:100%;flex-wrap:wrap}
.promo-form input{flex:1 1 170px;padding:15px 18px;border:1px solid var(--hair);border-radius:100px;
  background:rgba(0,0,0,.26);outline:none;text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;
  transition:border-color .4s}
.promo-form input:focus{border-color:var(--gold-soft)}
.promo-form input::placeholder{color:rgba(244,236,225,.42);letter-spacing:.1em}
.promo-msg{min-height:1.2em;font-size:.74rem;letter-spacing:.06em}
.promo-msg.ok{color:var(--gold-soft)}
.promo-msg.bad{color:#ff9096}
.promo-skip{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  text-decoration:underline;text-underline-offset:4px;transition:color .4s}
.promo-skip:hover{color:var(--cream)}

@media (max-width:760px){
  .promo{grid-template-columns:1fr}
  .promo-art{padding:30px 30px 0}
  .promo-art img{max-width:170px}
}

/* discount row in the bag and the order summary */
.drawer-foot .row.is-cut,.sum-tot .row.is-cut{color:var(--gold-soft)}

/* toast */
.toast{position:fixed;left:50%;bottom:34px;z-index:1300;translate:-50% 0;padding:14px 26px;border-radius:100px;
  background:var(--cream);color:var(--ink);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  opacity:0;transform:translateY(16px);pointer-events:none}

/* ============================================================
   CHECKOUT
   ============================================================ */
.co{padding:clamp(130px,15vh,190px) 0 clamp(70px,9vw,120px);min-height:100svh}
.co-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(30px,4vw,70px);align-items:start}
.panel{border:1px solid var(--hair);border-radius:var(--r);padding:clamp(24px,3vw,40px);background:rgba(244,236,225,.03)}
.panel + .panel{margin-top:22px}
.panel h3{margin-bottom:24px;font-size:1.5rem}
.field{margin-bottom:18px}
.field label{display:block;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.field input,.field select,.field textarea{
  width:100%;padding:15px 18px;border:1px solid var(--hair);border-radius:10px;
  background:rgba(0,0,0,.22);outline:none;transition:border-color .4s,background .4s;font-size:.92rem;
}
.field input:focus,.field select,.field textarea:focus{border-color:var(--gold-soft)}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold-soft) 50%),linear-gradient(135deg,var(--gold-soft) 50%,transparent 50%);background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;background-size:6px 6px;background-repeat:no-repeat}
.field.err input{border-color:var(--red)}
.field .msg{display:none;font-size:.68rem;color:#ff8a8f;margin-top:7px;letter-spacing:.06em}
.field.err .msg{display:block}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pay-opts{display:flex;flex-direction:column;gap:12px;margin-bottom:8px}
.pay{display:flex;align-items:center;gap:14px;padding:16px 20px;border:1px solid var(--hair);border-radius:10px;cursor:pointer;transition:.4s}
.pay:hover{border-color:var(--gold-soft)}
.pay.is-on{border-color:var(--gold);background:rgba(201,162,39,.08)}
.pay .dot{width:15px;height:15px;border-radius:50%;border:1px solid var(--muted);position:relative;flex-shrink:0}
.pay.is-on .dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--gold)}
.pay small{margin-left:auto;color:var(--muted);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}

.summary{position:sticky;top:110px}
.sum-line{display:grid;grid-template-columns:56px 1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--hair);align-items:center}
.sum-line .thumb{height:64px;border-radius:8px;background:linear-gradient(150deg,#faf7ef,#ece3d2);display:grid;place-items:center;overflow:hidden}
.sum-line .thumb img{width:100%;height:100%;object-fit:contain;padding:5px}
.sum-line h5{font-family:var(--ff-display);font-weight:400;font-size:1rem;line-height:1.2}
.sum-line span{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sum-line b{font-family:var(--ff-display);font-weight:400;color:var(--gold-soft)}
.sum-tot{margin-top:20px}
.sum-tot .row{display:flex;justify-content:space-between;margin-bottom:10px;font-size:.88rem;color:var(--muted)}
.sum-tot .row.tot{color:var(--cream);font-family:var(--ff-display);font-size:1.6rem;padding-top:16px;margin-top:8px;border-top:1px solid var(--hair)}
.trust{display:flex;flex-direction:column;gap:10px;margin-top:22px;font-size:.74rem;color:var(--muted)}
.trust div{display:flex;gap:10px;align-items:center}
.trust svg{flex-shrink:0;opacity:.7}

.done{text-align:center;max-width:620px;margin-inline:auto;padding:clamp(40px,6vw,70px) 0}
.done .seal{width:96px;height:96px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;margin:0 auto 34px}
.done h2{margin-bottom:18px}
.done .oid{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-soft);margin:24px 0 34px}

/* ============================================================
   CUSTOMIZE
   ============================================================ */
.cx{padding:clamp(130px,15vh,190px) 0 clamp(70px,9vw,120px)}
.cx-hero{position:relative}
.cx-hero .sec-head{position:relative;z-index:1}

.cx-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,4vw,70px);align-items:start}

.cx-stage-wrap{position:sticky;top:110px}
.cx-stage{position:relative;border-radius:var(--r);padding:clamp(24px,3vw,40px);
  background:linear-gradient(150deg,#faf7ef,#ece3d2);overflow:hidden}
.cx-stage .halo{position:absolute;left:50%;top:50%;translate:-50% -50%;width:82%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,255,255,0) 70%);pointer-events:none}
.cx-stage-note{margin-top:16px;font-size:.68rem;letter-spacing:.04em;color:var(--muted);text-align:center}

/* holder locks to the flat render's own 860x790 crop (grip-flat-*.png).
   That shot is square to camera, so artwork laid on it needs no perspective
   faking — the old 3/4 render forced a rotate+skew that never quite sat on
   the paddle. Every percentage below is measured against the crop, and the
   three colourways are pixel-identical, so one set of numbers serves all. */
.cx-holder{position:relative;width:100%;aspect-ratio:860/790;z-index:1;isolation:isolate}
.cx-grip{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 26px 40px rgba(60,15,30,.25))}

/* the flat tag panel runs down the left of the render, x 60..310 / y 60..740
   of the crop. The moulded "celli." that used to sit in the middle of it has
   been retouched out of grip-flat-*.png, so the whole panel is now blank —
   the shopper's own logo and QR take that centre space.
   Both slots start hidden: an empty grip is the honest default, and the
   preview should not ship someone else's mark on it before they upload. */
.cx-slot{position:absolute;display:none;align-items:center;justify-content:center;
  overflow:hidden;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.cx-slot img,.cx-slot canvas{width:100%;height:100%;object-fit:contain}

.cx-logo-slot{left:9.30%;top:24.68%;width:24.42%;height:26.58%}
/* multiply drops the artwork into the plastic's own shading and highlight
   instead of parking it on top as an opaque sticker — the single biggest
   reason a pasted-on logo reads as fake */
.cx-logo-slot img{mix-blend-mode:multiply}

.cx-qr-slot{left:12.79%;top:55.70%;width:17.44%;height:18.99%}
/* the QR keeps normal blending: multiply would sap the contrast a phone
   camera needs, and this is a code the shopper is meant to test */
.cx-qr-slot canvas{border-radius:2px;box-shadow:0 2px 9px rgba(60,15,30,.24)}

.cx-colours{display:flex;gap:10px;flex-wrap:wrap}
.cx-sw{display:flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;
  border:1px solid var(--hair);border-radius:100px;font-size:.7rem;color:var(--muted);transition:.35s}
.cx-sw span{width:24px;height:24px;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}
.cx-sw:hover{border-color:var(--gold-soft);color:var(--cream)}
.cx-sw.is-on{border-color:var(--gold);background:rgba(201,162,39,.1);color:var(--cream)}

.cx-drop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:clamp(26px,3vw,36px) 20px;border:1px dashed var(--hair);border-radius:var(--r);
  cursor:pointer;color:var(--muted);text-align:center;transition:border-color .35s,background .35s,color .35s;
}
.cx-drop svg{opacity:.7}
.cx-drop em{color:var(--gold-soft);font-style:normal;text-decoration:underline;text-underline-offset:3px}
.cx-drop:hover,.cx-drop:focus-visible,.cx-drop.is-drag{border-color:var(--gold-soft);background:rgba(201,162,39,.07);color:var(--cream)}
.cx-err{min-height:1.2em;font-size:.72rem;color:#ff9096;margin-top:10px}

.cx-qr-form{display:flex;gap:10px;flex-wrap:wrap}
.cx-qr-form input{flex:1 1 180px;padding:15px 18px;border:1px solid var(--hair);border-radius:100px;
  background:rgba(0,0,0,.22);outline:none;transition:border-color .4s;font-size:.85rem}
.cx-qr-form input:focus{border-color:var(--gold-soft)}
.cx-qr-form input::placeholder{color:rgba(244,236,225,.4)}

.cx-add{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.cx-price{display:flex;flex-direction:column;gap:4px}

/* ============================================================
   ANIMATION BASE STATES
   ============================================================ */
.js [data-anim]{opacity:0;will-change:transform,opacity}
.js [data-anim="mask"]{opacity:1}
.js [data-anim="mask"] .ln{display:block;overflow:hidden}
.js [data-anim="mask"] .ln > span{display:block}
/* padding/negative-margin pair keeps descenders (g, y, p) from being
   clipped by the reveal mask */
.js .split-w{display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:.14em;margin-bottom:-.14em}
.js .split-w > i{display:inline-block;font-style:inherit}
.reveal-ready [data-anim]{opacity:1}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .nav-links{display:none}
  .burger{display:block}
  .nav-menu{
    display:flex;position:fixed;inset:0;z-index:899;background:var(--wine-900);
    flex-direction:column;align-items:center;justify-content:center;gap:26px;
    clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease);
  }
  .nav.menu-open .nav-menu{clip-path:inset(0 0 0 0)}
  .nav-menu a{font-family:var(--ff-display);font-size:2.4rem}
  .hero .wrap{grid-template-columns:1fr;gap:44px}
  .hero-shot{height:clamp(380px,52vh,520px);order:-1}
  .grip-stage{grid-template-columns:1fr;grid-template-rows:auto 1fr;padding-top:88px}
  .grip-col{display:none}
  .grip-visual{height:64svh}
  .variants-inner,.news-inner,.faq-grid,.co-grid,.cx-grid{grid-template-columns:1fr}
  .cx-stage-wrap{position:static}
  .props-grid{grid-template-columns:1fr;gap:34px}
  .occ-grid{grid-template-columns:1fr}
  .card--wide{grid-template-columns:1fr}
  .card--wide .card-body{border-left:0;border-top:1px solid var(--hair)}
  .card--wide .card-media{min-height:clamp(300px,40vh,420px)}
  .foot-top{grid-template-columns:1fr 1fr}
  .summary{position:static}
}
@media (max-width:640px){
  /* was ".brand span", which also matched .brand-row (a span) and
     collapsed the whole logo to 0x0 — only the tagline should hide */
  .brand-tag{display:none}
  .hero-stats{flex-wrap:wrap;gap:22px}
  .grid2{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
  .line{grid-template-columns:60px 1fr}
  .line .amt{grid-column:2;text-align:left}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .js [data-anim]{opacity:1 !important;transform:none !important}
}

/* ============================================================
   PRODUCT PAGE  (customize.html — the custom grip PDP)
   Built on the .cx-* pieces above: .cx-holder still owns the
   860x840 render box, so the logo/QR slot maths and the cart
   thumbnail composite are untouched.
   ============================================================ */
.pdp{padding:clamp(122px,14vh,176px) 0 clamp(70px,9vw,120px)}

.pdp-crumb{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  margin-bottom:clamp(24px,3vw,40px)}
.pdp-crumb a{transition:color .35s var(--ease)}
.pdp-crumb a:hover{color:var(--gold-soft)}
.pdp-crumb i{font-style:normal;opacity:.4}
.pdp-crumb b{font-weight:400;color:var(--cream)}

.pdp-grid{display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(32px,4vw,72px);align-items:start}

/* ---------- gallery column ---------- */
.pdp-gallery{position:sticky;top:100px}
.pdp-badges{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}
.pdp-badges span{display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border:1px solid var(--hair);border-radius:100px;
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.pdp-badges span svg{flex-shrink:0;opacity:.75}

/* ---------- info column ---------- */
.pdp-head{padding-bottom:26px;border-bottom:1px solid var(--hair)}
.pdp-title{font-family:var(--ff-display);font-weight:400;line-height:1.04;
  font-size:clamp(2.5rem,4vw,3.6rem);margin:10px 0 14px}
.pdp-title em{font-style:italic;color:var(--gold-soft)}
.pdp-price-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.pdp-price{font-family:var(--ff-display);font-weight:500;font-size:clamp(2rem,2.8vw,2.6rem);color:var(--gold-soft)}
.pdp-was{font-size:1rem;color:var(--muted);text-decoration:line-through;opacity:.6}
.pdp-save{padding:5px 12px;border-radius:100px;background:rgba(201,162,39,.14);
  border:1px solid rgba(201,162,39,.4);color:var(--gold-soft);
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase}
.pdp-blurb{color:var(--muted);font-size:.95rem;max-width:52ch}

/* numbered option steps — dividers, not boxes, so the eye runs down the column */
.pdp-step{padding:26px 0;border-bottom:1px solid var(--hair)}
.pdp-step-h{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.pdp-step-h b{width:26px;height:26px;flex-shrink:0;display:grid;place-items:center;
  border:1px solid var(--hair);border-radius:50%;
  font-size:.64rem;font-weight:400;color:var(--gold-soft)}
.pdp-step-h h3{font-size:1.22rem;font-family:var(--ff-display);font-weight:500;letter-spacing:.01em}
.pdp-step-h .opt-val{margin-left:auto;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.pdp-hint{font-size:.82rem;color:var(--muted);margin-bottom:14px;max-width:50ch}

/* ---------- buy row ---------- */
.pdp-buy{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:28px 0 6px}
.pdp-qty{display:flex;align-items:center;gap:4px;flex-shrink:0;
  border:1px solid var(--hair);border-radius:100px;padding:5px}
.pdp-qty button{width:38px;height:38px;border-radius:50%;font-size:1.1rem;line-height:1;
  color:var(--muted);transition:background .3s,color .3s}
.pdp-qty button:hover{background:rgba(244,236,225,.09);color:var(--cream)}
.pdp-qty button[disabled]{opacity:.3;pointer-events:none}
.pdp-qty span{min-width:30px;text-align:center;font-size:.95rem;font-variant-numeric:tabular-nums}
.pdp-buy .btn{flex:1 1 220px}
.pdp-terms{font-size:.72rem;color:var(--muted);opacity:.8;margin-top:4px}

.pdp-trust{display:grid;gap:12px;margin-top:26px;padding-top:26px;border-top:1px solid var(--hair)}
.pdp-trust div{display:flex;gap:11px;align-items:center;font-size:.78rem;color:var(--muted)}
.pdp-trust svg{flex-shrink:0;opacity:.7}

/* the details accordion reuses .acc from the FAQ, which is styled for a
   light section — repaint it for the dark ground or it reads as invisible */
.pdp-details{margin-top:34px;border-top-color:var(--hair)}
.pdp-details .acc-item{border-bottom-color:var(--hair)}
.pdp-details .acc-q{padding:20px 0;font-size:clamp(1rem,1.3vw,1.2rem)}
.pdp-details .acc-q:hover,.pdp-details .acc-item.is-open .acc-q{color:var(--gold-soft)}
.pdp-details .acc-a p{padding-bottom:22px;color:var(--muted);font-size:.88rem}

@media (max-width:1080px){
  .pdp-grid{grid-template-columns:1fr}
  .pdp-gallery{position:static}
}
@media (max-width:520px){
  .pdp-buy .btn{flex:1 1 100%}
}

/* ============================================================
   CONTACT FORM  (#contact — sits on the gold ground, so it needs
   ink-on-light field styling, not the dark .field set)
   ============================================================ */
.news-inner{align-items:start}
.news-form{display:block}

.nf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.nf-field{margin-bottom:14px}
.nf-field label{display:block;margin-bottom:8px;
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(21,4,9,.62)}
.nf-field input,.nf-field textarea{
  width:100%;padding:14px 20px;border:1px solid rgba(21,4,9,.25);border-radius:12px;
  background:rgba(255,255,255,.24);color:var(--ink);outline:none;font-size:.92rem;
  transition:border-color .4s,background .4s;
}
.nf-field textarea{min-height:118px;border-radius:14px;resize:vertical;line-height:1.6}
.nf-field input::placeholder,.nf-field textarea::placeholder{color:rgba(21,4,9,.42)}
.nf-field input:focus,.nf-field textarea:focus{border-color:var(--ink);background:rgba(255,255,255,.42)}
.nf-field.err input,.nf-field.err textarea{border-color:#8c1119;background:rgba(196,24,31,.07)}
.nf-msg{display:none;margin-top:6px;font-size:.68rem;letter-spacing:.06em;color:#8c1119}
.nf-field.err .nf-msg{display:block}

.news-form .btn{margin-top:6px}
.nf-ok{margin-top:14px;font-size:.8rem;color:rgba(21,4,9,.78);display:none}
.nf-ok.is-on{display:block}

@media (max-width:640px){
  .nf-grid{grid-template-columns:1fr;gap:0}
}

/* ---------- footer socials (replaced the plain celligrip.com link) ---------- */
.foot-social{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.foot-social a{
  width:38px;height:38px;display:grid;place-items:center;flex-shrink:0;
  border:1px solid var(--hair);border-radius:50%;color:var(--muted);
  transition:color .4s var(--ease),background .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease);
}
.foot-social a:hover{color:var(--ink);background:var(--gold);border-color:var(--gold);transform:translateY(-3px)}
.foot-social a:focus-visible{outline:1px solid var(--gold-soft);outline-offset:3px}

/* ---------- "on your grip": what has actually been applied ---------- */
.cx-applied{display:flex;flex-direction:column;gap:10px}

.cx-app{display:flex;align-items:center;gap:14px;padding:12px 14px;
  border:1px solid var(--hair);border-radius:12px;background:rgba(244,236,225,.03)}
.cx-app-thumb{width:44px;height:44px;flex-shrink:0;display:grid;place-items:center;
  border-radius:9px;background:var(--paper);overflow:hidden}
.cx-app-thumb img{width:100%;height:100%;object-fit:contain;padding:4px}
.cx-app-txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.cx-app-txt b{font-weight:400;font-size:.9rem;color:var(--cream)}
.cx-app-txt i{font-style:normal;font-size:.72rem;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-app-x{margin-left:auto;width:32px;height:32px;flex-shrink:0;display:grid;place-items:center;
  border:1px solid var(--hair);border-radius:50%;font-size:1.05rem;line-height:1;color:var(--muted);
  transition:color .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease)}
.cx-app-x:hover{color:var(--ink);background:var(--gold);border-color:var(--gold)}
.cx-app-x:focus-visible{outline:1px solid var(--gold-soft);outline-offset:2px}

.cx-app-none{padding:16px 0;font-size:.85rem;color:var(--muted);opacity:.8}

/* ============================================================
   COLOURS SECTION — the 3D grip
   The canvas sits over the three product stills and only becomes
   visible once js/product3d.js has a model on screen (.is-live).
   Until then, and forever on reduced-motion or without WebGL, the
   stills are what you see — so this can only ever add.
   ============================================================ */
.variant-3d{
  position:absolute;inset:0;z-index:3;
  opacity:0;pointer-events:none;
  transition:opacity .9s var(--ease);
}
.variant-3d canvas{display:block;width:100%;height:100%}
.variant-3d.is-live{opacity:1}

/* once the model is up the stills would double the product, so they step
   aside — but they keep their layout box, which is what holds the stage
   open at the right height */
.variant-stage.has-3d .variant-img,
.variant-stage:has(.variant-3d.is-live) .variant-img{opacity:0 !important;transition:opacity .6s var(--ease)}

/* the canvas is absolutely placed against the stage, and isolate keeps its
   compositing out of the tinted section background behind it */
.variant-stage{isolation:isolate}

/* a hint that the rows are live while the section is pinned */
.variant-row{cursor:pointer}

@media (prefers-reduced-motion:reduce){
  .variant-3d{display:none}
}

/* the 3D grip can be turned by hand — say so with the cursor, and stop the
   browser claiming the gesture as a scroll or an image drag */
.variant-3d.is-grabbable{pointer-events:auto;cursor:grab;touch-action:pan-y}
.variant-3d.is-grabbing{cursor:grabbing}
.variant-3d canvas{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}

/* the 3D grip in the pinned scene, over the still it replaces */
.gv-3d{
  position:absolute;inset:0;z-index:3;
  opacity:0;pointer-events:none;
  transition:opacity .9s var(--ease);
}
.gv-3d canvas{display:block;width:100%;height:100%}
.gv-3d.is-live{opacity:1}
.gv-3d.is-grabbable{pointer-events:auto;cursor:grab;touch-action:pan-y}
.gv-3d.is-grabbing{cursor:grabbing}
.gv-gif.is-replaced{opacity:0;transition:opacity .6s var(--ease)}
@media (prefers-reduced-motion:reduce){ .gv-3d{display:none} }

/* ---------- the 3D grip on the customizer ---------- */
.cx-3d{
  position:absolute;inset:0;z-index:4;
  opacity:0;pointer-events:none;
  transition:opacity .9s var(--ease);
}
.cx-3d canvas{display:block;width:100%;height:100%}
.cx-3d.is-live{opacity:1}
.cx-3d.is-grabbable{pointer-events:auto;cursor:grab;touch-action:pan-y}
.cx-3d.is-grabbing{cursor:grabbing}
/* once the model is up the flat preview underneath would double the product */
.cx-stage.has-3d .cx-holder{opacity:0;transition:opacity .6s var(--ease)}
@media (prefers-reduced-motion:reduce){ .cx-3d{display:none} }

/* ---------- product page: the shot, and the stand-in for one ---------- */
.pdp-shot{position:relative;width:100%;aspect-ratio:1;display:grid;place-items:center}
/* Cap both axes, not just the width. Sizing on width alone suited the grip
   shots, which are nearly square, but made the portrait tag artwork 639px
   tall inside a 560px stage — it burst out of the frame and stretched the
   whole row.

   The image is taken out of flow to do it. In flow, a percentage max-height
   and the stage's own height each wanted to be measured from the other, and
   the tag settled a square stage at 302x359 on a phone. Out of flow it cannot
   push the stage at all, so the square stays square and the percentages
   resolve against it once: a tall product is bound by height, a wide one by
   width, with no per-product rule. margin:auto does the centring that
   place-items did. */
.pdp-shot:not(.pdp-shot--empty) img{
  position:absolute;inset:0;margin:auto;
  width:auto;height:auto;
  max-width:min(78%,420px);
  max-height:82%;
  object-fit:contain;
  filter:drop-shadow(0 26px 40px rgba(60,15,30,.25));
}

/* no photography yet: a composed panel reads as deliberate, where a borrowed
   picture of a different product would simply be wrong */
.pdp-shot--empty{
  gap:14px;border:1px dashed rgba(21,4,9,.18);border-radius:var(--r);
  background:linear-gradient(150deg,rgba(21,4,9,.03),rgba(21,4,9,.07));
  /* two auto rows in a tall grid stretch by default, which pulled the mark
     and the caption to opposite ends of the panel */
  align-content:center;
}
.pdp-shot--empty img{width:54px;opacity:.5;filter:none}
.pdp-shot--empty span{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-ink);opacity:.75}
/* inside a shop card the panel sits on the cream media well, not on the dark
   section — so it keeps the ink treatment and simply fills the well */
.card-media .pdp-shot--empty{width:100%;height:100%;aspect-ratio:auto;border:0;background:none}
/* .card-media img stretches a product shot to fill the well — the mark in the
   placeholder is an icon, not a product, so it has to opt out of that */
.card-media .pdp-shot--empty img{width:46px;height:auto;padding:0}

.pdp-loading{padding:60px 0;color:var(--muted-2, rgba(244,236,225,.5))}
.pdp-missing{margin-bottom:22px;font-size:.88rem;color:var(--muted)}

/* a card that is a link must not inherit the underline */
a.card{text-decoration:none;color:inherit}
a.card:hover{text-decoration:none}