/* =====================================================================
   WATCH MY TIPS — shared stylesheet (v4)
   Palette is sampled from the client's own logo: oxblood #58100F plate,
   cream #E8DCCE type.
   ===================================================================== */

:root{
  --maroon:#58100F;        /* the logo plate, exact */
  --maroon-dp:#320706;
  --maroon-mid:#6B1714;
  --maroon-lt:#84251E;
  --clay:#A9503F;
  --cream:#E8DCCE;         /* the logo type, exact */

  --card:#FDF8F2;
  --porcelain:#F8F0E6; --shell:#F2E5D7; --blush:#EDD8CB; --blush-2:#E6C9BB;
  --rose:#D9AB9C;
  --wine:#4A0D0C; --ink:#2A0708;
  --gold:#B08A4E; --gold-lt:#D9BC84;

  --line:rgba(74,13,12,.14); --line-2:rgba(74,13,12,.08);
  --sh-s:0 2px 8px -4px rgba(76,13,18,.1);
  --sh-m:0 16px 36px -28px rgba(76,13,18,.3);
  --ann-h:0px;
  --r:16px; --r-lg:24px;
  --f-d:"Playfair Display",Georgia,"Times New Roman",serif;
  --f-b:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --pad:clamp(18px,5vw,64px);
  --ease:cubic-bezier(.22,.9,.28,1);
  --nav-h:calc(74px + var(--ann-h));
}
@media(min-width:1060px){ :root{ --nav-h:calc(112px + var(--ann-h)) } }
html.has-ann{ --ann-h:32px }
@media(min-width:1060px){ html.has-ann{ --ann-h:36px } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;padding:0;background:var(--porcelain);color:var(--ink);
  font-family:var(--f-b);font-weight:300;font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;max-width:100vw}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--maroon);color:var(--cream)}
h1,h2,h3,h4{margin:0;font-family:var(--f-d);font-weight:500;letter-spacing:-.015em;line-height:1.12;color:var(--wine)}
p{margin:0}
.wrap{width:min(1280px,100%);margin-inline:auto;padding-inline:var(--pad)}
.eyebrow{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--maroon);font-weight:500}
.lede{color:#6B4640;font-size:clamp(15px,1.5vw,17.5px);max-width:56ch}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================ REVEAL ============================ */
.js [data-rv]{opacity:0;transform:translate3d(0,16px,0)}
[data-rv]{transition:opacity .7s var(--ease),transform .8s var(--ease)}
[data-rv].in{opacity:1;transform:none}
[data-rv].now{transition:none!important;opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js [data-rv]{opacity:1!important;transform:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ============================ WORDMARK ============================ */
.mark{display:flex;flex-direction:column;justify-content:center;gap:3px;line-height:1;text-align:center}
.mark .wm{font-family:var(--f-d);font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;font-size:clamp(15px,2.3vw,26px);color:var(--wine);white-space:nowrap;line-height:1}
.mark .tl{font-family:var(--f-b);font-weight:400;text-transform:uppercase;
  letter-spacing:.36em;font-size:clamp(6.5px,.72vw,9.5px);color:var(--clay);white-space:nowrap;line-height:1;
  text-indent:.36em}
.on-dark .mark .wm{color:var(--cream)}
.on-dark .mark .tl{color:rgba(232,220,206,.7)}
.mark-lg{text-align:left}
.mark-lg .wm{font-size:clamp(19px,3vw,25px)}
.mark-lg .tl{font-size:9px}

/* real logo file, when CFG.LOGO is set */
.mark-has-img{gap:0}
.mark .mark-img{width:auto;height:clamp(30px,4.4vw,46px);object-fit:contain}
.mark-lg .mark-img{height:clamp(38px,5vw,56px)}
.drawer-h .mark .mark-img{height:32px}
/* a light logo on the maroon hero, the normal one everywhere else */
.on-dark .mark .mark-img,.drawer-h .mark .mark-img{filter:brightness(0) invert(1) opacity(.94)}

/* ============================ INTRO ANIMATION ============================
   The mark rises out of a maroon field behind a slow gold halo, holds, then
   flies to the exact position and scale of the header mark while the veil
   lifts. The flight numbers (--fly-x/y/s) are measured in JS.

   Everything animated here is transform / opacity / filter only, so the
   whole sequence runs on the compositor. That is what keeps it smooth on a
   mid-range phone, where anything touching layout would judder.
   ======================================================================= */
.intro{position:fixed;inset:0;z-index:400;display:grid;place-items:center;
  background:radial-gradient(125% 95% at 50% 42%,var(--maroon-mid) 0%,var(--maroon) 44%,var(--maroon-dp) 100%);
  will-change:opacity;transform:translateZ(0);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  contain:layout paint;pointer-events:none;overflow:hidden}
.intro.go{animation:introOut .78s cubic-bezier(.7,0,.28,1) 1.62s both}
.intro.skip{animation:introOut .34s cubic-bezier(.7,0,.28,1) 0s both}
.intro.skip .intro-stage,.intro.skip .intro-mark,
.intro.skip .intro-halo,.intro.skip .intro-ring{animation-play-state:paused}

/* soft bloom behind the type */
.intro-halo{position:absolute;width:min(148vw,1000px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(217,171,156,.30) 0%,rgba(217,171,156,.10) 42%,rgba(217,171,156,0) 70%);
  opacity:0;will-change:opacity,transform;transform:translateZ(0) scale(.55);
  -webkit-backface-visibility:hidden;backface-visibility:hidden}
.intro.go .intro-halo{animation:introHalo 2.3s cubic-bezier(.2,.7,.2,1) both}

/* the thin gold circle that sweeps open behind everything */
.intro-ring{position:absolute;width:min(86vw,460px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(217,188,132,.42);
  opacity:0;will-change:opacity,transform;transform:translateZ(0) scale(.72);
  -webkit-backface-visibility:hidden;backface-visibility:hidden}
.intro.go .intro-ring{animation:introRing 2.3s cubic-bezier(.16,.84,.24,1) both}

/* stage carries the flight to the header; mark carries the entrance.
   Splitting them keeps the two transforms from fighting each other. */
.intro-stage{position:relative;display:grid;place-items:center;
  will-change:transform,opacity;transform:translateZ(0);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  --fly-x:0px; --fly-y:-38vh; --fly-s:.34}
.intro.go .intro-stage{animation:introFly .82s cubic-bezier(.62,.02,.24,1) 1.44s both}

.intro-mark{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(9px,1.6vw,15px);line-height:1;text-align:center;padding:0 5vw;
  opacity:0;will-change:transform,opacity,filter;
  transform:translate3d(0,0,0) scale(1.42);
  -webkit-backface-visibility:hidden;backface-visibility:hidden}
.intro.go .intro-mark{animation:introMark 1.5s cubic-bezier(.16,.84,.24,1) both}

.intro-mark .wm{font-family:var(--f-d);font-weight:600;text-transform:uppercase;
  letter-spacing:.15em;font-size:clamp(27px,7.4vw,64px);color:var(--cream);
  white-space:nowrap;line-height:1;text-indent:.15em}
.intro-mark .tl{font-family:var(--f-b);font-weight:400;text-transform:uppercase;
  letter-spacing:.4em;font-size:clamp(8.5px,1.9vw,14px);color:rgba(232,220,206,.72);
  white-space:nowrap;line-height:1;text-indent:.4em;
  opacity:0;will-change:opacity,transform;transform:translate3d(0,7px,0)}
.intro.go .intro-mark .tl{animation:introTag .9s var(--ease) .5s both}
.intro-mark .mark-img{width:auto;height:clamp(78px,20vw,180px);object-fit:contain;
  filter:brightness(0) invert(1)}

@keyframes introMark{
  0%   {opacity:0;transform:translate3d(0,14px,0) scale(1.42);filter:blur(11px)}
  40%  {opacity:1;filter:blur(0)}
  100% {opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}
}
@keyframes introTag{ from{opacity:0;transform:translate3d(0,7px,0)} to{opacity:1;transform:none} }
@keyframes introHalo{
  0%  {opacity:0;transform:translateZ(0) scale(.55)}
  42% {opacity:1;transform:translateZ(0) scale(1)}
  100%{opacity:.5;transform:translateZ(0) scale(1.16)}
}
@keyframes introRing{
  0%  {opacity:0;transform:translateZ(0) scale(.72)}
  45% {opacity:.85;transform:translateZ(0) scale(1)}
  100%{opacity:0;transform:translateZ(0) scale(1.5)}
}
/* the flight into the header */
@keyframes introFly{
  from{transform:translate3d(0,0,0) scale(1)}
  to  {transform:translate3d(var(--fly-x),var(--fly-y),0) scale(var(--fly-s))}
}
@keyframes introOut{ from{opacity:1} to{opacity:0} }

/* page frozen and header held back until the veil clears */
html.intro-on,html.intro-on body{overflow:hidden!important;height:100%}
html.intro-on .nav,html.intro-on .prog,html.intro-on .fab,html.intro-on .cartbar{opacity:0}
html.intro-done .nav{animation:navIn .7s var(--ease) .04s both}
@keyframes navIn{ from{opacity:0} to{opacity:1} }

@media (prefers-reduced-motion:reduce){
  .intro.go{animation:introOut .78s cubic-bezier(.7,0,.28,1) 1.62s both!important;
    animation-duration:.78s!important;animation-delay:1.62s!important}
  .intro.skip{animation-duration:.34s!important;animation-delay:0s!important}
  .intro.go .intro-halo{animation-duration:2.3s!important}
  .intro.go .intro-ring{animation-duration:2.3s!important}
  .intro.go .intro-stage{animation-duration:.82s!important;animation-delay:1.44s!important}
  .intro.go .intro-mark{animation-duration:1.5s!important}
  .intro.go .intro-mark .tl{animation-duration:.9s!important;animation-delay:.5s!important}
  html.intro-done .nav{animation-duration:.7s!important;animation-delay:.04s!important}
}

/* ============================ ANNOUNCEMENT MARQUEE ============================
   Two identical runs inside the track; the track slides exactly one run wide
   and loops, so there is no seam and no JS. transform only — on a phone this
   stays on the compositor and never touches layout.
   ========================================================================== */
.ann{position:relative;overflow:hidden;height:var(--ann-h);
  background:var(--ink);color:var(--cream);
  display:flex;align-items:center;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ann-track{display:flex;flex:none;width:max-content;
  will-change:transform;transform:translate3d(0,0,0);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  animation:annRun 20s linear infinite}
.ann-i{display:inline-flex;align-items:center;flex:none;
  font-size:clamp(9.5px,1.05vw,11.5px);letter-spacing:.24em;text-transform:uppercase;
  font-weight:400;white-space:nowrap;padding-right:clamp(26px,4vw,56px);
  color:rgba(232,220,206,.9)}
.ann-d{flex:none;width:5px;height:5px;margin-right:clamp(14px,2.2vw,26px);
  transform:rotate(45deg);background:var(--gold-lt)}
.ann:hover .ann-track{animation-play-state:paused}
@keyframes annRun{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} }
/* The brand intro and the offer ticker are the two things the client wants
   seen on every device, so they opt out of the global reduced-motion damper
   further up this file. Both are opacity/transform only and neither is a
   large-field parallax, which keeps the vestibular risk low. */
@media (prefers-reduced-motion:reduce){
  .ann-track{animation:annRun 20s linear infinite!important;
    animation-duration:20s!important;animation-iteration-count:infinite!important}
}
@media (max-width:700px){ .ann-track{animation-duration:15s} }
@media (prefers-reduced-motion:reduce) and (max-width:700px){
  .ann-track{animation-duration:15s!important}
}
/* the bar rides inside the fixed header, above the icon row */
.nav .ann{border-bottom:1px solid rgba(232,220,206,.1)}

/* ============================ CATEGORY PAGE HEAD ============================ */
.cat-head{text-align:center;margin:0 auto clamp(24px,4.6vh,46px);max-width:44ch}
.cat-head .eyebrow{display:block;margin-bottom:14px}
.cat-head h1{font-family:var(--f-d);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(34px,7vw,70px);line-height:1.04;color:var(--wine)}
.cat-head h1 em{display:block;font-style:italic;font-weight:500;color:var(--maroon);
  font-size:.62em;letter-spacing:-.01em;margin-top:.16em}
.cat-head .cat-rule{width:78px;height:1px;margin:22px auto 18px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.cat-head .lede{margin-inline:auto;text-align:center;max-width:46ch}

/* ============================ NAV ============================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;
  transition:background .45s var(--ease),box-shadow .45s var(--ease)}
/* Full-bleed header: the icons sit near the screen edges rather than being
   pinned to the 1280px content column, which left a dead band either side. */
.nav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;
  padding:12px clamp(14px,3vw,44px);width:100%;max-width:none;margin-inline:auto}
.nav-side{display:flex;align-items:center;gap:8px;min-width:0}
.nav-side.end{justify-content:flex-end}
.nav.solid{background:rgba(250,243,235,.95);-webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);box-shadow:0 1px 0 var(--line-2),0 10px 30px -26px rgba(76,13,18,.5)}
.nav:not(.solid).on-dark .iconbtn{border-color:rgba(232,220,206,.3);color:var(--cream);background:rgba(255,255,255,.06)}
.nav:not(.solid).on-dark .burger{border-color:rgba(232,220,206,.3);background:rgba(255,255,255,.06)}
.nav:not(.solid).on-dark .burger span{background:var(--cream)}
.nav:not(.solid).on-dark .navlinks{border-color:rgba(232,220,206,.16)}
.nav:not(.solid).on-dark .navlink{color:rgba(240,226,216,.8)}

.navlinks{display:none;border-top:1px solid var(--line-2)}
@media(min-width:1060px){.navlinks{display:block}}
.navlinks-in{display:flex;justify-content:center;gap:34px;padding:11px var(--pad);
  width:min(1280px,100%);margin-inline:auto;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:400}
.navlink{position:relative;color:#7A5049;transition:color .3s}
.navlink::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
@media(hover:hover){.navlink:hover{color:var(--maroon)}.navlink:hover::after{transform:scaleX(1)}}

.iconbtn{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--wine);position:relative;
  -webkit-tap-highlight-color:transparent;transition:background .3s,border-color .3s,color .3s}
.iconbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover){.iconbtn:hover{border-color:var(--maroon);color:var(--maroon)}}
.burger{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--card);
  display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background .3s,border-color .3s}
.burger i{display:block;width:17px;height:11px;position:relative}
.burger span{position:absolute;left:0;height:1.5px;width:100%;background:var(--wine);border-radius:2px}
.burger span:nth-child(1){top:0}
.burger span:nth-child(2){top:4.7px;width:70%}
.burger span:nth-child(3){top:9.4px}

/* premium bag / wishlist count */
.cnt{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:var(--maroon);color:var(--cream);font-size:10px;font-weight:500;letter-spacing:.02em;
  display:grid;place-items:center;font-family:var(--f-b);font-variant-numeric:tabular-nums;
  border:1.5px solid var(--porcelain);
  transform:scale(0);transition:transform .38s var(--ease)}
.cnt.on{transform:scale(1)}
.cnt.on.pop{animation:cntpop .5s var(--ease)}
@keyframes cntpop{0%{transform:scale(1)}38%{transform:scale(1.35)}100%{transform:scale(1)}}
.nav:not(.solid).on-dark .cnt{border-color:transparent;background:var(--cream);color:var(--maroon)}

.prog{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;z-index:60;
  background:linear-gradient(90deg,var(--rose),var(--maroon-lt) 50%,var(--maroon))}

/* ============================ SIDE DRAWER ============================ */
.drawer{position:fixed;top:0;left:0;bottom:0;z-index:82;width:min(330px,86vw);display:flex;flex-direction:column;
  background:var(--card);box-shadow:30px 0 70px -40px rgba(76,13,18,.6);
  transform:translate3d(-100%,0,0);transition:transform .46s var(--ease);will-change:transform}
.drawer.on{transform:translate3d(0,0,0)}
.drawer-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;
  padding:15px 16px;background:var(--maroon);color:var(--cream)}
.drawer-h .mark{text-align:left}
.drawer-h .mark .wm{color:var(--cream);font-size:16px}
.drawer-h .mark .tl{color:rgba(232,220,206,.66);font-size:7px}
.drawer-h .xbtn{border-color:rgba(232,220,206,.28);background:rgba(255,255,255,.08)}
.drawer-h .xbtn svg{stroke:var(--cream)}
.drawer-b{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:14px 16px 22px}
.dgrp{margin-bottom:14px}
.dgrp+.dgrp{border-top:1px solid var(--line-2);padding-top:14px}
.dtop,.dhead{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  padding:6px 0;border:0;background:transparent;cursor:pointer;text-align:left;
  font-family:var(--f-b);font-weight:400;font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--clay);-webkit-tap-highlight-color:transparent}
.dtop{color:var(--wine);font-size:13.5px;letter-spacing:.06em;text-transform:none;font-weight:400}
@media(hover:hover){.dtop:hover{color:var(--maroon)}}
.dhead svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;
  transition:transform .32s var(--ease)}
.dhead[aria-expanded="true"] svg{transform:rotate(180deg)}
.dacc{display:none;padding-top:2px}
.dacc.open{display:block}
.dacc a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;
  font-family:var(--f-b);font-weight:300;font-size:13.5px;letter-spacing:.02em;color:#5E4038;
  transition:color .25s,padding-left .25s}
.dacc a b{font-family:var(--f-b);font-weight:300;font-size:11px;color:#B08A80;font-variant-numeric:tabular-nums}
@media(hover:hover){.dacc a:hover{color:var(--maroon);padding-left:4px}}
.drawer-f{flex:none;border-top:1px solid var(--line-2);padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  display:flex;gap:8px;background:linear-gradient(180deg,var(--card),var(--shell))}
.drawer-f .btn{flex:1;font-size:12px;padding-inline:10px}
.drawer-f .btn svg{width:15px;height:15px}

/* ============================ SEARCH ============================ */
.srch{position:fixed;top:0;left:0;right:0;z-index:84;background:var(--card);
  box-shadow:0 24px 50px -34px rgba(76,13,18,.6);
  transform:translate3d(0,-102%,0);transition:transform .42s var(--ease);
  max-height:min(80vh,620px);display:flex;flex-direction:column}
.srch.on{transform:translate3d(0,0,0)}
.srch-bar{display:flex;align-items:center;gap:10px;padding:14px var(--pad);border-bottom:1px solid var(--line-2);flex:none}
.srch-bar .ic{flex:none;width:20px;height:20px;color:var(--clay)}
.srch-bar .ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.srch-bar input{flex:1;min-width:0;border:0;outline:none;background:transparent;font-size:16px;font-weight:300;
  color:var(--ink);padding:8px 0}
.srch-bar input::placeholder{color:#B9948C}
.srch-res{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:8px var(--pad) calc(16px + env(safe-area-inset-bottom))}
.srch-lbl{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--clay);margin:10px 0 4px}
.srch-empty{font-size:14px;color:#8A6259;padding:22px 0}
.srow{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-2)}
.srow .a{flex:none;width:38px;height:48px;display:grid;place-items:center}
.srow .a svg{width:100%;height:100%}
.srow .m{flex:1;min-width:0}
.srow .m b{display:block;font-family:var(--f-d);font-weight:500;font-size:16px;color:var(--wine)}
.srow .m span{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--clay)}
.srow .p{flex:none;font-family:var(--f-d);font-size:15px;color:var(--maroon)}
@media(hover:hover){.srow:hover .m b{color:var(--maroon)}}

/* ============================ ACCOUNT ============================ */
.auth{position:fixed;inset:0;z-index:86;display:grid;place-items:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .34s var(--ease)}
.auth.on{opacity:1;pointer-events:auto}
.auth-c{position:relative;width:min(400px,100%);max-height:88vh;overflow-y:auto;
  background:var(--card);border-radius:var(--r-lg);padding:clamp(22px,4vw,32px);
  box-shadow:0 50px 100px -50px rgba(30,4,4,.9);
  transform:translateY(14px) scale(.98);transition:transform .38s var(--ease)}
.auth.on .auth-c{transform:none}
.auth-x{position:absolute;top:12px;right:12px}
.auth-mark{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;margin-bottom:14px;
  background:linear-gradient(140deg,var(--maroon-lt),var(--maroon))}
.auth-mark svg{width:22px;height:22px;fill:none;stroke:var(--cream);stroke-width:1.6;stroke-linecap:round}
.auth-c h3{font-size:23px;margin-bottom:6px}
.auth-c .mini{font-size:13px;color:#8A6259;margin-bottom:18px;line-height:1.55}

/* ============================ BUTTONS ============================ */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;min-height:46px;border-radius:999px;border:1px solid transparent;
  font-size:13.5px;font-weight:500;letter-spacing:.04em;cursor:pointer;text-align:center;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,border-color .3s,color .3s;
  -webkit-tap-highlight-color:transparent}
.btn svg{width:17px;height:17px;flex:none}
.btn-g{background:linear-gradient(135deg,var(--maroon-lt),var(--maroon) 54%,var(--maroon-dp));color:var(--cream);
  box-shadow:0 10px 26px -14px rgba(88,16,15,.9)}
.btn-w{background:#1FA855;color:#fff}
.btn-o{background:var(--card);border-color:var(--line);color:var(--wine);box-shadow:var(--sh-s)}
.btn-i{background:linear-gradient(120deg,#8134AF,#DD2A7B 52%,#F58529);color:#fff}
.btn-cream{background:var(--cream);color:var(--maroon)}
.btn-sm{padding:9px 15px;min-height:38px;font-size:12.5px}
.btn-lg{min-height:54px;font-size:14.5px}
.btn:disabled{opacity:.5;cursor:not-allowed}
@media(hover:hover){
  .btn:hover:not(:disabled){transform:translateY(-2px)}
  .btn-g:hover{box-shadow:0 16px 34px -14px rgba(88,16,15,1)}
  .btn-o:hover{border-color:var(--maroon);color:var(--maroon)}
}
.btn:active{transform:translateY(0) scale(.985)}

/* ============================ HERO ============================
   One horizontal line of wordmark, filled to the width, on the logo
   oxblood. Deeper than v3 and closer to the plate colour. */
.hero{position:relative;min-height:min(88svh,780px);display:flex;align-items:center;justify-content:center;
  text-align:center;padding:calc(var(--nav-h) + 30px) 0 clamp(88px,13vh,140px);
  isolation:isolate;overflow:hidden;background:var(--maroon-dp)}
.silk{position:absolute;inset:0;z-index:-3;
  background:
   radial-gradient(58% 44% at 76% 20%, rgba(140,52,40,.42) 0%, rgba(120,36,28,.2) 42%, rgba(120,36,28,0) 74%),
   radial-gradient(52% 38% at 16% 14%, rgba(96,20,17,.5) 0%, rgba(96,20,17,0) 72%),
   linear-gradient(178deg,
     #2C0605 0%,
     #430A09 16%,
     #58100F 36%,
     #63130F 54%,
     #7C2318 70%,
     #9C4636 82%,
     #C07E63 91%,
     #E4B99C 96%,
     var(--porcelain) 100%)}
@media(max-width:1019px){
  .silk{background:
   radial-gradient(66% 30% at 74% 14%, rgba(140,52,40,.34) 0%, rgba(140,52,40,0) 74%),
   linear-gradient(180deg,
     #2C0605 0%,
     #440A09 18%,
     #58100F 40%,
     #66140F 60%,
     #83271A 74%,
     #A85440 85%,
     #D49A7C 93%,
     #F0CEB2 97.5%,
     var(--porcelain) 100%)}
}
.bloom{position:absolute;z-index:-2;width:74vmax;height:74vmax;right:-30vmax;top:-34vmax;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(196,120,94,.2) 0%, rgba(170,86,66,.09) 40%, rgba(170,86,66,0) 70%);
  transform:translate3d(0,0,0);backface-visibility:hidden;
  animation:drift 90s var(--ease) infinite alternate;will-change:transform}
.bloom-2{right:auto;left:-30vmax;top:auto;bottom:-26vmax;width:62vmax;height:62vmax;
  background:radial-gradient(circle at 50% 50%, rgba(255,240,226,.34) 0%, rgba(250,228,208,.12) 42%, rgba(250,228,208,0) 74%);
  animation:drift2 110s var(--ease) infinite alternate}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-3vmax,2.2vmax,0)}}
@keyframes drift2{from{transform:translate3d(0,0,0)}to{transform:translate3d(2.4vmax,-1.8vmax,0)}}

.heroart{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 46%,transparent 0%,transparent 34%,rgba(0,0,0,.55) 62%,#000 86%);
  mask-image:radial-gradient(80% 70% at 50% 46%,transparent 0%,transparent 34%,rgba(0,0,0,.55) 62%,#000 86%);
  opacity:.5}
.heroart i{position:absolute;display:block;filter:drop-shadow(0 22px 30px rgba(18,3,3,.5))}
.heroart i>span{display:block;will-change:transform}
.heroart .fa>span{animation:hfa 42s var(--ease) infinite alternate}
.heroart .fb>span{animation:hfb 54s var(--ease) infinite alternate}
@keyframes hfa{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-16px,0)}}
@keyframes hfb{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,13px,0)}}
@media(max-width:1019px){
  .heroart i{filter:none}
  .heroart i>span{animation:none!important}
  .heroart .sm{display:none}
  .heroart{opacity:.42}
}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:150px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(248,240,230,0) 0%,rgba(248,240,230,.06) 16%,rgba(248,240,230,.16) 30%,
    rgba(248,240,230,.32) 44%,rgba(248,240,230,.52) 57%,rgba(248,240,230,.72) 69%,
    rgba(248,240,230,.87) 80%,rgba(248,240,230,.96) 91%,var(--porcelain) 100%)}

.hero-in{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;align-items:center}
.h-welcome{font-family:var(--f-b);font-size:clamp(9px,1.1vw,11.5px);letter-spacing:.42em;text-transform:uppercase;
  color:rgba(232,220,206,.66);margin-bottom:clamp(14px,2.4vh,22px);text-indent:.42em}
/* one line, sized off the viewport so it fills the width at every size */
.wordmark{font-family:var(--f-d);font-weight:600;line-height:1;letter-spacing:.055em;text-transform:uppercase;
  font-size:min(9.5vw,124px);margin:0;color:var(--cream);white-space:nowrap;text-indent:.055em}
.wordmark em{font-style:normal;font-weight:600;
  background:linear-gradient(100deg,#F3E3D2 4%,#E8DCCE 32%,#D9BC84 70%,#F1DCB4 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.h-rule{width:min(420px,64vw);height:1px;margin:clamp(16px,2.6vh,26px) 0 clamp(13px,2vh,18px);
  background:linear-gradient(90deg,transparent,rgba(232,220,206,.42) 22%,rgba(232,220,206,.42) 78%,transparent)}
.h-slay{font-family:var(--f-b);font-weight:400;font-size:clamp(9.5px,1.35vw,13px);
  letter-spacing:.46em;text-transform:uppercase;color:rgba(232,220,206,.82);text-indent:.46em}
.h-sub{margin-top:clamp(16px,2.6vh,26px);font-size:clamp(13.5px,1.5vw,17px);
  color:rgba(246,232,222,.8);max-width:46ch;line-height:1.6}
.h-facts{display:flex;justify-content:center;flex-wrap:nowrap;gap:0;
  margin-top:clamp(24px,4vh,40px);border-top:1px solid rgba(232,220,206,.2);padding-top:clamp(16px,2.4vh,22px);
  width:min(620px,100%)}
.h-facts div{flex:1;min-width:0;padding-inline:clamp(6px,2vw,20px);border-right:1px solid rgba(232,220,206,.13)}
.h-facts div:last-child{border-right:0}
.h-facts b{display:block;font-family:var(--f-d);font-size:clamp(17px,2.6vw,30px);font-weight:600;color:var(--cream);
  white-space:nowrap}
.h-facts small{display:block;font-size:clamp(7.5px,.9vw,9.5px);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(232,220,206,.6);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ============================ FORM FIELDS ============================ */
.card-form{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:clamp(18px,3vw,28px);box-shadow:var(--sh-m)}
.card-form h3{font-size:22px;margin-bottom:4px}
.card-form p.mini{font-size:13px;color:#8A6259;margin-bottom:16px}
.field{margin-bottom:11px;min-width:0}
.field label{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--maroon);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font-size:16px;font-weight:300;padding:12px 14px;
  background:#FBF4EC;border:1px solid var(--line);border-radius:11px;outline:none;color:var(--ink);
  transition:border-color .3s,box-shadow .3s,background .3s}
.field textarea{resize:vertical;min-height:88px}
.field input::placeholder,.field textarea::placeholder{color:#B9948C}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--maroon);background:var(--card);
  box-shadow:0 0 0 3px rgba(88,16,15,.1)}
.field select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2358100F' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:11px;padding-right:36px}
.hp{position:absolute;left:-9999px;opacity:0}
.form-note{font-size:11px;color:#9A7168;margin-top:10px;line-height:1.5}
.fivesize{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.fivesize .f{min-width:0}
.fivesize .f span{display:block;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--clay);
  margin-bottom:5px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fivesize select{padding:11px 4px;text-align:center;text-align-last:center;background-image:none;padding-right:4px;font-size:14px}
.form2{display:grid;gap:0 14px;grid-template-columns:1fr}
@media(min-width:560px){.form2{grid-template-columns:1fr 1fr}.form2 .span2{grid-column:1/-1}}
.order{display:grid;gap:clamp(22px,4vw,48px);grid-template-columns:1fr}
.order>*{min-width:0}
@media(min-width:980px){.order{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}

/* ============================ SECTIONS ============================ */
.sec{padding:clamp(52px,8vh,104px) 0;position:relative}
section[id],header[id]{scroll-margin-top:calc(var(--nav-h) + 8px)}
.sec-head{max-width:70ch;margin-bottom:clamp(24px,4.5vh,46px)}
.sec-head h2{font-size:clamp(28px,5vw,54px);margin:12px 0 14px;letter-spacing:-.028em}
.sec-head h2 em{font-style:italic;color:var(--maroon)}
.sec-head.row{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent)}
.t-white{background:var(--card)}
.t-porcelain{background:var(--porcelain)}
.t-shell{background:linear-gradient(180deg,var(--porcelain),var(--shell) 44%,var(--shell) 58%,var(--porcelain))}
.t-wine{background:var(--maroon-dp);color:#EDD9D1}
.t-wine h2,.t-wine h3,.t-wine h4{color:var(--cream)}
.t-wine .eyebrow{color:var(--rose)}
.t-wine .lede{color:#DCB9B3}
.band{position:absolute;left:0;right:0;height:160px;pointer-events:none;z-index:1}
.band-t{top:0;background:linear-gradient(180deg,var(--porcelain) 0%,rgba(248,240,230,.86) 14%,rgba(140,54,42,.42) 44%,rgba(50,7,6,.86) 76%,var(--maroon-dp) 100%)}
.band-b{bottom:0;background:linear-gradient(0deg,var(--porcelain) 0%,rgba(248,240,230,.86) 14%,rgba(140,54,42,.42) 44%,rgba(50,7,6,.86) 76%,var(--maroon-dp) 100%)}
.t-wine .wrap{position:relative;z-index:2}

/* ============================ CATEGORY TILES ============================ */
.cats{display:grid;gap:clamp(12px,2vw,20px);grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:860px){.cats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cat{position:relative;display:block;border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;
  background:var(--card);box-shadow:var(--sh-m);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s}
@media(hover:hover){.cat:hover{transform:translateY(-5px);border-color:rgba(88,16,15,.26);
  box-shadow:0 34px 58px -34px rgba(76,13,18,.42)}}
.cat-art{aspect-ratio:1/1;display:grid;place-items:center;padding:14px 10px;
  background:linear-gradient(165deg,#FDF8F2,#F6E8DC 56%,#EED9C9)}
.cat-art svg{width:84%;height:84%}
.cat-b{display:block;padding:12px 14px 16px;border-top:1px solid var(--line-2);text-align:center}
.cat-b h3{font-size:clamp(16px,2.2vw,20px)}
.cat-b p{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--clay);margin-top:5px}

/* ============================ PRODUCT CARDS ============================
   No tags, no add-to-bag. Image, name, price, stepper. The whole card is
   the link; the stepper swallows its own clicks. */
.cat-grid{display:grid;gap:clamp(12px,2vw,22px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
@media(max-width:719px){.cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.tile{position:relative;display:flex;flex-direction:column;border:1px solid var(--line-2);
  border-radius:var(--r-lg);overflow:hidden;background:var(--card);box-shadow:var(--sh-m);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s;
  -webkit-tap-highlight-color:transparent}
@media(hover:hover){.tile:hover{transform:translate3d(0,-5px,0);
  border-color:rgba(88,16,15,.24);box-shadow:0 36px 60px -34px rgba(76,13,18,.4)}}
.tile-art{position:relative;display:grid;place-items:center;aspect-ratio:4/3.3;overflow:hidden;
  background:linear-gradient(168deg,#FDF8F2,#F7EBE0 58%,#EFDCCE)}
/* everything inside the card passes the click straight through to the card
   itself, so tapping the photo opens the product exactly like the name does */
.tile-art,.tile-art *,.tile-name,.badge,.imgsoon{pointer-events:none}
.tile-art img,.tile-art svg{pointer-events:none}
.tile .qty,.tile .qty *{pointer-events:auto}
.tile{cursor:pointer}
.tile-art svg{width:94%;height:94%;transition:transform .55s var(--ease)}
.tile-img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.tile:hover .tile-img{transform:scale(1.045)}
@media(hover:hover){.tile:hover .tile-art svg{transform:scale(1.05)}}
.tile-body{display:flex;flex-direction:column;gap:9px;padding:13px 14px 15px;border-top:1px solid var(--line-2);flex:1}
.tile-name{font-family:var(--f-d);font-weight:500;font-size:clamp(15.5px,1.9vw,19px);color:var(--wine);
  line-height:1.2;letter-spacing:-.01em}
.tile-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.price{font-family:var(--f-d);font-size:18px;color:var(--maroon)}
.badge{position:absolute;top:10px;left:10px;z-index:2;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;background:var(--maroon);color:var(--cream);box-shadow:var(--sh-s)}
.imgsoon{position:absolute;bottom:8px;right:8px;z-index:2;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 8px;border-radius:999px;background:rgba(253,248,242,.9);border:1px solid var(--line);color:#8A5A52}

.qty{display:inline-flex;align-items:center;flex:none;border:1px solid var(--line);border-radius:999px;
  overflow:hidden;background:var(--card);transition:border-color .3s,background .3s}
.qty button{width:32px;height:34px;border:0;background:transparent;cursor:pointer;color:var(--wine);
  font-size:17px;line-height:1;display:grid;place-items:center;transition:background .25s,opacity .25s;
  -webkit-tap-highlight-color:transparent}
@media(hover:hover){.qty button:hover{background:var(--blush)}}
.qty b{min-width:24px;text-align:center;font-weight:500;font-size:14px;font-variant-numeric:tabular-nums;color:var(--wine)}
.qty:not(.zero){border-color:rgba(88,16,15,.4);background:#FFF6F3}
.qty.zero b{color:#B49A93}
.qty.big button{width:44px;height:46px;font-size:20px}
.qty.big b{min-width:38px;font-size:16px}
@media(max-width:400px){.qty button{width:28px}.qty b{min-width:20px}}

/* horizontal product rail */
.prail{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:none;
  padding:4px 0 14px;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}
.prail::-webkit-scrollbar{display:none}
.prail-i{flex:0 0 auto;width:min(230px,64vw);display:flex}
.prail-i>.tile{width:100%}
@media(min-width:1000px){.prail-i{width:250px}}

/* ============================ BUNDLES ============================ */
.bundles{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:820px){.bundles{grid-template-columns:repeat(3,1fr)}}
.bun{border:1px solid var(--line-2);border-radius:var(--r-lg);padding:clamp(20px,3vw,30px);background:var(--card);
  box-shadow:var(--sh-m);position:relative;display:flex;flex-direction:column}
.bun.hot{border-color:rgba(88,16,15,.4);background:linear-gradient(170deg,var(--card),#F6E4DA);
  box-shadow:0 30px 60px -34px rgba(88,16,15,.5)}
.bun .pop{position:absolute;top:-11px;left:clamp(20px,3vw,30px);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;background:var(--maroon);color:var(--cream);padding:5px 12px;border-radius:999px;font-weight:500}
.bun h3{font-size:clamp(22px,3vw,29px);margin-bottom:2px}
.bun .sub{font-size:13.5px;color:#8A6259}
.bun .amt{font-family:var(--f-d);font-size:clamp(36px,6vw,52px);font-weight:600;margin:12px 0 2px;color:var(--maroon)}
.bun .alt-rate{margin-top:4px;font-size:12px;letter-spacing:.06em;color:#8A6259}
.bun .alt-rate::before{content:"";display:inline-block;width:14px;height:1px;
  background:var(--rose);vertical-align:middle;margin-right:8px}
.bun ul{list-style:none;margin:16px 0 22px;padding:0;font-size:14px;color:#6B4640}
.bun li{padding-left:22px;position:relative;margin-bottom:8px}
.bun li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--rose)}
.bun .btn{margin-top:auto}
.flag{display:flex;align-items:flex-start;gap:8px;font-size:11.5px;color:#8A5A52;
  border:1px dashed var(--line);border-radius:14px;padding:10px 14px;margin-top:18px;max-width:78ch;line-height:1.5}
.flag svg{flex:none;margin-top:3px}

/* ============================ OPTION RAILS ============================
   Free momentum scrolling, no snap. */
.rail{display:flex;gap:9px;overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none;padding:2px 0 10px}
.rail::-webkit-scrollbar{display:none}
.opt{flex:none;border:1.5px solid var(--line);border-radius:var(--r);background:var(--card);
  padding:11px 16px;cursor:pointer;text-align:center;
  transition:border-color .28s,background .28s,box-shadow .28s;-webkit-tap-highlight-color:transparent}
.opt b{display:block;font-family:var(--f-b);font-weight:400;font-size:13px;color:var(--wine);line-height:1.2;white-space:nowrap}
.opt.shape{width:96px;padding:9px 8px 10px}
.opt.shape .art{display:block;height:66px;margin-bottom:6px}
.opt.shape .art svg{height:100%;width:auto;margin-inline:auto}
.opt.sz{min-width:60px}
.opt.sz b{font-size:14px;font-weight:500;letter-spacing:.06em}
.opt[aria-pressed="true"]{border-color:var(--maroon);background:#FFF7F4;box-shadow:0 0 0 3px rgba(88,16,15,.08)}

/* ============================ RAIL ARROWS ============================
   Touch flings the rails. A mouse cannot, so pointer devices get arrows. */
.railwrap{position:relative}
.rnav{display:none}
@media (hover:hover) and (min-width:900px){
  .rnav{display:grid;place-items:center;position:absolute;top:calc(50% - 7px);transform:translateY(-50%);
    width:42px;height:42px;padding:0;border-radius:50%;border:1px solid var(--line);
    background:rgba(253,248,242,.97);color:var(--wine);cursor:pointer;z-index:4;
    box-shadow:0 12px 26px -14px rgba(76,13,18,.55);
    transition:opacity .3s var(--ease),background .3s,color .3s,border-color .3s,transform .3s var(--ease)}
  .rnav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .rnav.prev{left:-14px}
  .rnav.next{right:-14px}
  .rnav:hover{background:var(--maroon);color:var(--cream);border-color:var(--maroon)}
  .rnav:active{transform:translateY(-50%) scale(.94)}
  .rnav[disabled]{opacity:0;pointer-events:none}
  .railwrap.no-nav .rnav{display:none}
  /* the option rails on the product page sit in a narrow column */
  .pdp-info .rnav{width:34px;height:34px}
  .pdp-info .rnav.prev{left:-8px}
  .pdp-info .rnav.next{right:-8px}
}

/* gallery arrows */
.galnav{display:none}
@media (hover:hover) and (min-width:900px){
  .galnav{display:grid;place-items:center;position:absolute;top:50%;transform:translateY(-50%);
    width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--line);
    background:rgba(253,248,242,.94);color:var(--wine);cursor:pointer;z-index:3;
    box-shadow:0 12px 26px -14px rgba(76,13,18,.55);
    transition:opacity .3s var(--ease),background .3s,color .3s,border-color .3s,transform .3s var(--ease)}
  .galnav svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .galnav.prev{left:14px}
  .galnav.next{right:14px}
  .galnav:hover{background:var(--maroon);color:var(--cream);border-color:var(--maroon)}
  .galnav:active{transform:translateY(-50%) scale(.94)}
  .galnav[disabled]{opacity:0;pointer-events:none}
}

/* ============================ POLICY / ACCORDION ============================ */
.pol-grid{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:900px){.pol-grid{grid-template-columns:1fr 1fr;gap:10px 20px}}
.pol{border:1px solid rgba(246,226,221,.17);border-radius:var(--r);overflow:hidden;
  background:rgba(255,255,255,.045);height:max-content}
.pol summary{list-style:none;cursor:pointer;padding:15px 16px;display:flex;align-items:center;gap:12px;
  font-family:var(--f-d);font-size:clamp(16px,2vw,20px);color:var(--cream);transition:background .3s;
  -webkit-tap-highlight-color:transparent}
.pol summary::-webkit-details-marker{display:none}
@media(hover:hover){.pol summary:hover{background:rgba(255,255,255,.06)}}
.pol summary .n{font-size:11px;font-family:var(--f-b);letter-spacing:.14em;color:var(--rose);flex:none;width:22px}
.pol summary .ic{margin-left:auto;width:14px;height:14px;flex:none;position:relative}
.pol summary .ic::before,.pol summary .ic::after{content:"";position:absolute;background:var(--rose);left:50%;top:50%;
  transition:transform .38s var(--ease)}
.pol summary .ic::before{width:14px;height:1.5px;transform:translate(-50%,-50%)}
.pol summary .ic::after{width:1.5px;height:14px;transform:translate(-50%,-50%)}
.pol[open] summary .ic::after{transform:translate(-50%,-50%) scaleY(0)}
.pol-b{padding:0 16px 18px 50px;font-size:14.5px;line-height:1.7;color:#DCB9B3}
.pol-b ul{margin:9px 0 0;padding-left:18px}
.pol-b li{margin-bottom:5px}
.pol-b p+p{margin-top:10px}
.pol-agree{margin-top:24px;padding:18px 22px;border:1px solid rgba(229,169,162,.4);border-radius:var(--r);
  background:rgba(229,169,162,.1);font-family:var(--f-d);font-style:italic;
  font-size:clamp(15px,2vw,19px);color:var(--cream)}
.pol.light{border-color:var(--line-2);background:var(--card)}
.pol.light summary{color:var(--wine)}
.pol.light summary .n{color:var(--clay)}
.pol.light summary .ic::before,.pol.light summary .ic::after{background:var(--maroon)}
.pol.light .pol-b{color:#6B4640}
@media(hover:hover){.pol.light summary:hover{background:#FBF2EC}}

/* ============================ REVIEWS (horizontal) ============================ */
.revrail{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none;
  padding:4px 0 14px;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}
.revrail::-webkit-scrollbar{display:none}
.rev{flex:0 0 auto;width:min(330px,82vw);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:clamp(20px,3vw,28px);background:var(--card);box-shadow:var(--sh-m);display:flex;flex-direction:column}
.rev .q{font-family:var(--f-d);font-size:40px;line-height:.6;color:var(--rose);margin-bottom:14px}
.rev p{font-family:var(--f-d);font-size:clamp(16px,2vw,19px);line-height:1.5;color:var(--wine)}
.rev cite{margin-top:auto;padding-top:18px;font-style:normal;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--maroon)}
.stars{display:flex;gap:3px;margin-bottom:14px}
.stars svg{width:14px;height:14px;fill:var(--maroon)}

/* ============================ FOOTER + WHATSAPP ============================ */
footer{padding:clamp(44px,8vh,84px) 0 0;background:var(--maroon-dp);color:#D8B6AE;position:relative}
.f-grid{display:grid;gap:30px;grid-template-columns:1fr;position:relative;z-index:2}
@media(min-width:820px){.f-grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr}}
.f-grid h4{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--rose);margin-bottom:14px;
  font-family:var(--f-b);font-weight:500}
.f-grid ul{list-style:none;padding:0;margin:0;font-size:14px}
.f-grid li{margin-bottom:9px}
@media(hover:hover){.f-grid a:hover{color:var(--cream)}}
.f-bot{margin-top:40px;padding:20px 0 calc(20px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(229,169,162,.2);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-size:12px;color:#BE928B;position:relative;z-index:2}
.socials{display:flex;gap:10px;margin-top:16px}
.socials a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;
  transition:transform .32s var(--ease)}
.socials svg{width:19px;height:19px}
.socials .s-ig{background:radial-gradient(circle at 28% 108%,#FDD75B 0%,#F5A03C 18%,#F05A44 36%,#E51E76 56%,#B429A6 74%,#6B33C4 94%)}
.socials .s-wa{background:#25D366}
@media(hover:hover){.socials a:hover{transform:translateY(-3px)}}

.fab{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:55;
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.fab.on{opacity:1;transform:none;pointer-events:auto}
.fab a{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;background:#25D366;
  box-shadow:0 14px 30px -10px rgba(37,211,102,.55);transition:transform .28s var(--ease)}
.fab a svg{width:30px;height:30px}
.fab a:active{transform:scale(.92)}
@media(min-width:640px){.fab{right:24px;bottom:24px}.fab a{width:58px;height:58px}}
body.has-bag .fab.on{transform:translateY(-64px)}
@media(min-width:761px){body.has-bag .fab.on{transform:none}}

/* ============================ FILE UPLOAD ============================ */
.drop{position:relative;display:flex;align-items:center;gap:13px;padding:13px;border-radius:13px;
  border:1.5px dashed rgba(88,16,15,.32);background:#FDFAF8;cursor:pointer;
  transition:border-color .3s,background .3s}
@media(hover:hover){.drop:hover{border-color:var(--maroon);background:#FFF6F5}}
.drop.has{border-style:solid;border-color:rgba(88,16,15,.45);background:#FFF6F5}
.drop input[type=file]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.drop .ic2{width:42px;height:42px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:var(--card);border:1px solid var(--line-2);overflow:hidden}
.drop .ic2 svg{width:19px;height:19px;stroke:var(--maroon);fill:none;stroke-width:1.7}
.drop .ic2 img{width:100%;height:100%;object-fit:cover}
.drop .tx{min-width:0}
.drop .tx b{display:block;font-size:13.5px;font-weight:500;color:var(--wine);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drop .tx span{display:block;font-size:11.5px;color:#9A7168}

/* ============================ BAG DRAWER ============================ */
.scrim{position:fixed;inset:0;z-index:78;background:rgba(42,7,8,.45);opacity:0;pointer-events:none;
  transition:opacity .4s var(--ease)}
.scrim.on{opacity:1;pointer-events:auto}
.cart{position:fixed;top:0;right:0;bottom:0;z-index:80;width:min(430px,100%);display:flex;flex-direction:column;
  background:var(--card);box-shadow:-30px 0 70px -40px rgba(76,13,18,.6);
  transform:translate3d(100%,0,0);transition:transform .48s var(--ease);will-change:transform}
.cart.on{transform:translate3d(0,0,0)}
.cart-h{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 20px;border-bottom:1px solid var(--line-2);flex:none}
.cart-h h3{font-size:21px}
.cart-h small{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--maroon);margin-top:2px}
.xbtn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--card);cursor:pointer;
  display:grid;place-items:center;flex:none;transition:background .3s,border-color .3s;-webkit-tap-highlight-color:transparent}
.xbtn svg{width:15px;height:15px;stroke:var(--wine);stroke-width:2;fill:none;stroke-linecap:round}
@media(hover:hover){.xbtn:hover{background:var(--blush);border-color:var(--rose)}}
.cart-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:6px 20px}
.ci{display:flex;gap:12px;padding:16px 0;border-bottom:1px solid var(--line-2)}
.ci-art{width:70px;height:60px;flex:none;border-radius:11px;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(168deg,var(--card),#F3E2D6);border:1px solid var(--line-2)}
.ci-art svg{width:94%;height:94%}
.ci-m{flex:1;min-width:0}
.ci-m h4{font-size:15px;margin-bottom:2px}
.ci-m p{font-size:11px;color:#9A7168;letter-spacing:.03em;line-height:1.45}
.ci-m .qty{margin-top:8px}
.ci-r{text-align:right;flex:none;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end}
.ci-r .p{font-family:var(--f-d);font-size:16px;color:var(--wine)}
.rm{border:0;background:transparent;color:#B99089;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;padding:4px 0;transition:color .25s}
@media(hover:hover){.rm:hover{color:var(--maroon)}}
.cart-empty{text-align:center;padding:50px 18px}
.cart-empty svg{width:44px;height:44px;stroke:var(--rose);fill:none;stroke-width:1.5;margin:0 auto 16px}
.cart-empty h4{font-size:19px;margin-bottom:6px}
.cart-empty p{font-size:14px;color:#8A6259;max-width:28ch;margin:0 auto}
.cart-f{flex:none;border-top:1px solid var(--line-2);padding:14px 20px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,var(--card),var(--shell));max-height:62vh;overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.sum{font-size:14px;color:#6B4640}
.sum div{display:flex;justify-content:space-between;gap:12px;padding:5px 0}
.sum .save{color:var(--maroon)}
.sum .tot{border-top:1px solid var(--line);margin-top:8px;padding-top:11px;
  font-family:var(--f-d);font-size:21px;color:var(--wine)}
.sum .tot span:last-child{font-weight:600}
/* direct children only. `.cart-f .btn` also caught the prep-kit Add button
   nested inside the add-on card and stretched it past the card's edge. */
.cart-f > .btn{width:100%;margin-top:10px}
.cart-f .addon .btn{width:auto;margin-top:0}
.cart-f .fine{font-size:11px;color:#9A7168;margin-top:9px;text-align:center;line-height:1.5}

/* This block appears in three different-width containers: the product page
   column, the checkout sidebar and the 390px bag drawer. It wraps off its own
   width with flex-basis, NOT a viewport media query — a media query looked
   fine on desktop and overlapped inside the drawer on the same screen. */
.addon{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;
  border:1px solid var(--line);border-radius:var(--r);
  padding:14px;background:linear-gradient(160deg,#FFFDFB,#F8EBE1);margin-top:6px}
.addon .art{width:52px;height:52px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;
  background:var(--card);border:1px solid var(--line-2);overflow:hidden}
.addon .art svg{width:74%;height:74%}
.addon .m{flex:1 1 180px;min-width:0}
.addon .m b{display:block;font-family:var(--f-d);font-size:16.5px;color:var(--wine);font-weight:500;line-height:1.2}
.addon .m span{display:block;font-size:12px;color:#8A6259;line-height:1.5;margin-top:3px}
.addon .r{flex:0 0 auto;display:flex;align-items:center;gap:12px;margin-left:auto}
.addon .r .pr{font-family:var(--f-d);font-size:17px;color:var(--maroon);white-space:nowrap}
.addon .r .btn{flex:0 0 auto;min-width:78px;white-space:nowrap}

/* Free gift line in the bag drawer — the prep kit and rakhi that ride along
   automatically with every order (see wmt.js syncFreebies()). No qty
   stepper or remove button: these two are not user-editable. */
.ci-gift{background:linear-gradient(160deg,#FFFDFB,#FBF1E8);border-radius:var(--r);
  padding-left:10px;padding-right:10px;margin:0 -10px;border-bottom-color:transparent}
.gift-tag{display:inline-block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--maroon);background:var(--blush);border-radius:999px;padding:2px 8px;
  vertical-align:middle;margin-left:6px;font-family:var(--sans,inherit)}
.ci-r .p-free{color:var(--maroon);font-size:13px;letter-spacing:.08em;text-transform:uppercase}

/* Informational "included free" card — no Add button, price struck through */
.addon--free .r .pr-free{color:var(--maroon);font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.addon--free .r .pr-free s{color:#B99089;font-family:var(--f-d);font-size:15px;text-transform:none;
  letter-spacing:0;margin-right:6px}

/* ---- toast: small, bottom, 3s fade ---- */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));z-index:90;
  transform:translate3d(-50%,240%,0);opacity:0;visibility:hidden;pointer-events:none;
  padding:10px 18px;border-radius:999px;
  background:rgba(50,7,6,.95);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#FFF3EF;font-size:12.5px;letter-spacing:.02em;white-space:nowrap;max-width:calc(100vw - 28px);
  overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 16px 34px -18px rgba(30,4,4,.9);
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility 0s linear .4s}
.toast.on{opacity:1;visibility:visible;transform:translate3d(-50%,0,0);transition-delay:0s}
body.has-bag .toast{bottom:calc(84px + env(safe-area-inset-bottom))}
@media(min-width:761px){body.has-bag .toast{bottom:calc(20px + env(safe-area-inset-bottom))}}

/* ---- persistent view-bag bar ---- */
.cartbar{position:fixed;left:0;right:0;bottom:0;z-index:56;display:none;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(253,248,242,.97);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--line-2);box-shadow:0 -12px 30px -22px rgba(76,13,18,.5);
  transform:translate3d(0,110%,0);transition:transform .42s var(--ease)}
.cartbar.on{display:block;transform:translate3d(0,0,0)}
.cartbar .in{display:flex;align-items:center;gap:12px;width:min(1280px,100%);margin-inline:auto}
.cartbar .lt{flex:1;min-width:0}
.cartbar .lt small{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--maroon)}
.cartbar .lt b{font-family:var(--f-d);font-size:18px;color:var(--wine)}
@media(min-width:761px){.cartbar{padding-inline:var(--pad)}}

/* ============================ PRODUCT PAGE ============================ */
.pdp{padding:calc(var(--nav-h) + 22px) 0 clamp(46px,7vh,84px)}
.crumb{display:flex;align-items:center;gap:7px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--clay);margin-bottom:16px;flex-wrap:wrap}
@media(hover:hover){.crumb a:hover{color:var(--maroon)}}
.pdp-grid{display:grid;gap:clamp(22px,4vw,54px);grid-template-columns:1fr;align-items:start}
.pdp-grid>*{min-width:0}
.pdp-gal,.pdp-info{min-width:0}
@media(min-width:1000px){.pdp-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .pdp-gal{position:sticky;top:calc(var(--nav-h) + 16px)}}

.gal{position:relative;min-width:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2);background:var(--card)}
.gal-track{display:flex;min-width:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none}
.gal-track::-webkit-scrollbar{display:none}
.gal-slide{flex:0 0 100%;width:100%;min-width:0;scroll-snap-align:center;scroll-snap-stop:always;
  aspect-ratio:1/1;display:grid;place-items:center;position:relative;
  background:linear-gradient(165deg,#EFE7DE,#E4D8CC 58%,#D9CABC)}
.gal-slide .ph{text-align:center;padding:20px;color:#8C776A}
.gal-slide .ph svg{width:38px;height:38px;stroke:#A08B7C;fill:none;stroke-width:1.4;margin:0 auto 12px}
.gal-slide .ph b{display:block;font-family:var(--f-d);font-size:17px;color:#6E5B4F;font-weight:500}
.gal-slide .ph span{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-top:6px}
.gal-slide img{width:100%;height:100%;object-fit:cover}
.gal-slide.is-guide{background:#F7EDDD}
.gal-slide.is-guide img{object-fit:contain}
.dots{display:flex;justify-content:center;gap:7px;padding:14px 0 2px}
.dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:rgba(88,16,15,.2);cursor:pointer;
  transition:background .3s var(--ease),width .3s var(--ease);-webkit-tap-highlight-color:transparent}
.dots button[aria-current="true"]{background:var(--maroon);width:20px;border-radius:999px}
.galcount{position:absolute;top:12px;right:12px;z-index:2;font-size:10.5px;letter-spacing:.1em;
  padding:5px 11px;border-radius:999px;background:rgba(253,248,242,.9);border:1px solid var(--line);
  color:#8A5A52;font-variant-numeric:tabular-nums}

.pdp-head h1{font-size:clamp(28px,4.6vw,44px);letter-spacing:-.02em;margin-bottom:8px}
.pdp-price{margin:14px 0 2px;font-family:var(--f-d);font-size:clamp(26px,3.6vw,34px);color:var(--maroon);font-weight:600}
.optblock{margin-top:22px}
.optblock>.hd{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px}
.optblock .hd h4{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--maroon);
  font-family:var(--f-b);font-weight:500}
.optblock .hd em{font-style:normal;font-size:13px;color:#7A5049}
.orline{display:flex;align-items:center;gap:12px;margin:14px 0 10px;color:var(--clay);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase}
.orline::before,.orline::after{content:"";flex:1;height:1px;background:var(--line-2)}
.pdp-actions{display:grid;gap:9px;margin-top:24px}
.pdp-actions .row{display:flex;gap:9px;align-items:stretch}
.pdp-actions .row .btn{flex:1;min-width:0}

/* wishlist / compare / share — an even three across, no gap left over */
.icrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}
.icact{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:0;
  padding:11px 8px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:#7A5049;
  font-size:12px;cursor:pointer;transition:border-color .28s,color .28s,background .28s;
  -webkit-tap-highlight-color:transparent}
.icact svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icact span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.icact[aria-pressed="true"]{border-color:var(--maroon);color:var(--maroon);background:#FFF6F3}
.icact[aria-pressed="true"] svg .fillable{fill:var(--maroon)}
@media(hover:hover){.icact:hover{border-color:var(--maroon);color:var(--maroon)}}
@media(max-width:380px){.icact{font-size:11px;gap:5px;padding-inline:4px}}

.trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:20px;
  border-top:1px solid var(--line-2);padding-top:16px}
.trust div{text-align:center;min-width:0}
.trust svg{width:19px;height:19px;stroke:var(--maroon);fill:none;stroke-width:1.5;margin:0 auto 6px;
  stroke-linecap:round;stroke-linejoin:round}
.trust b{display:block;font-family:var(--f-b);font-weight:400;font-size:11.5px;color:var(--wine)}
.trust span{display:block;font-size:10px;color:#9A7168;margin-top:2px}

.tabs{margin-top:clamp(34px,5vh,58px)}
.tabbar{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  border-bottom:1px solid var(--line-2);margin-bottom:22px}
.tabbar::-webkit-scrollbar{display:none}
.tabbar button{flex:none;border:0;background:transparent;cursor:pointer;padding:12px 16px;position:relative;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#9A7168;
  transition:color .3s;-webkit-tap-highlight-color:transparent}
.tabbar button::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--maroon);
  transform:scaleX(0);transition:transform .35s var(--ease)}
.tabbar button[aria-selected="true"]{color:var(--maroon)}
.tabbar button[aria-selected="true"]::after{transform:scaleX(1)}
.tabpane{display:none;font-size:15px;color:#6B4640;line-height:1.75;max-width:74ch}
.tabpane.on{display:block}
.tabpane h4{font-size:18px;margin:18px 0 8px}
.tabpane ul{padding-left:20px;margin:8px 0}
.tabpane li{margin-bottom:6px}
.tabpane p+p{margin-top:12px}
.speclist{display:grid;grid-template-columns:1fr;gap:0;margin-top:14px;max-width:520px}
.speclist div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line-2);font-size:14px}
.speclist span:first-child{color:#9A7168;letter-spacing:.04em}
.speclist span:last-child{color:var(--wine);text-align:right}

/* ============================ CHECKOUT ============================ */
.co{padding:calc(var(--nav-h) + 22px) 0 clamp(46px,7vh,84px)}
.co-grid{display:grid;gap:clamp(22px,4vw,46px);grid-template-columns:1fr;align-items:start}
.co-grid>*{min-width:0}
@media(min-width:980px){.co-grid{grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr)}
  .co-side{position:sticky;top:calc(var(--nav-h) + 16px)}}
.costep{border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--card);
  padding:clamp(18px,3vw,28px);box-shadow:var(--sh-m);margin-bottom:14px}
.costep>h3{display:flex;align-items:center;gap:11px;font-size:clamp(19px,2.4vw,23px);margin-bottom:4px}
.costep>h3 i{flex:none;width:26px;height:26px;border-radius:50%;background:var(--maroon);color:var(--cream);
  display:grid;place-items:center;font-family:var(--f-b);font-style:normal;font-size:12px;font-weight:500}
.costep>p.mini{font-size:13px;color:#8A6259;margin:0 0 16px 37px}
.paylist{display:grid;gap:9px}
.payopt{display:flex;align-items:center;gap:12px;padding:14px;border:1.5px solid var(--line);border-radius:var(--r);
  cursor:pointer;background:#FDFAF8;transition:border-color .28s,background .28s;-webkit-tap-highlight-color:transparent}
.payopt[aria-pressed="true"]{border-color:var(--maroon);background:#FFF6F3;box-shadow:0 0 0 3px rgba(88,16,15,.07)}
.payopt .rd{width:18px;height:18px;flex:none;border-radius:50%;border:1.5px solid var(--line);position:relative}
.payopt[aria-pressed="true"] .rd{border-color:var(--maroon)}
.payopt[aria-pressed="true"] .rd::after{content:"";position:absolute;inset:3.5px;border-radius:50%;background:var(--maroon)}
.payopt .tx{flex:1;min-width:0;text-align:left}
.payopt .tx b{display:block;font-size:14.5px;font-weight:500;color:var(--wine)}
.payopt .tx span{display:block;font-size:11.5px;color:#9A7168}
.payopt .lg{flex:none;display:flex;gap:5px}
.payopt .lg i{font-style:normal;font-size:9px;letter-spacing:.06em;padding:4px 7px;border-radius:5px;
  border:1px solid var(--line);color:#8A5A52;background:var(--card)}
.osum{border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--card);
  padding:clamp(18px,3vw,26px);box-shadow:var(--sh-m)}
.osum h3{font-size:21px;margin-bottom:14px}
.osum .addon .btn{width:auto}
.oline{display:flex;gap:11px;padding:12px 0;border-bottom:1px solid var(--line-2)}
.oline .art{width:54px;height:48px;flex:none;border-radius:9px;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(168deg,var(--card),#F3E2D6);border:1px solid var(--line-2)}
.oline .art svg{width:94%;height:94%}
.oline .m{flex:1;min-width:0}
.oline .m b{display:block;font-family:var(--f-d);font-size:14.5px;color:var(--wine);font-weight:500}
.oline .m span{display:block;font-size:11px;color:#9A7168;line-height:1.45}
.oline .p{font-family:var(--f-d);font-size:15px;color:var(--wine);flex:none}
.oline.ci-gift{background:linear-gradient(160deg,#FFFDFB,#FBF1E8);border-radius:var(--r);
  padding-left:8px;padding-right:8px;margin:0 -8px;border-bottom-color:transparent}
.oline .p.p-free{color:var(--maroon);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.copill{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;background:rgba(88,16,15,.07);border:1px solid rgba(88,16,15,.24);color:var(--maroon)}
.whois{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:var(--r);
  border:1px solid var(--line-2);background:#FBF4EE;margin-bottom:14px}
.whois .av{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--maroon-lt),var(--maroon))}
.whois .av svg{width:17px;height:17px;fill:none;stroke:var(--cream);stroke-width:1.6;stroke-linecap:round}
.whois .m{flex:1;min-width:0}
.whois .m b{display:block;font-size:14px;font-weight:500;color:var(--wine)}
.whois .m span{display:block;font-size:11.5px;color:#9A7168;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.done{position:fixed;inset:0;z-index:95;background:var(--porcelain);display:none;place-items:center;text-align:center;padding:24px}
.done.on{display:grid}
.done .in{max-width:44ch}
.done .tick{width:64px;height:64px;border-radius:50%;background:var(--maroon);display:grid;place-items:center;margin:0 auto 22px}
.done .tick svg{width:28px;height:28px;stroke:var(--cream);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.done h2{font-size:clamp(26px,4vw,38px);margin-bottom:12px}
.done p{font-size:15px;color:#6B4640;margin-bottom:8px}

/* ============================ NARROW PHONES ============================ */
@media(max-width:560px){
  .nav-in{gap:6px;padding-inline:14px}
  .iconbtn,.burger{width:37px;height:37px}
  .iconbtn svg{width:17px;height:17px}
  .mark .wm{letter-spacing:.12em}
}
@media(max-width:380px){
  .nav-side{gap:5px}
  .iconbtn,.burger{width:34px;height:34px}
  .iconbtn svg{width:16px;height:16px}
  .mark .wm{font-size:14px;letter-spacing:.09em}
  .mark .tl{font-size:6px;letter-spacing:.24em}
}

/* ============================ MOBILE PAINT BUDGET ============================ */
@media (max-width:900px),(hover:none){
  .nav.solid{background:#FAF3EB;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 1px 0 var(--line-2)}
  .bloom,.bloom-2{animation:none!important;will-change:auto}
  .tile,.bun,.rev,.card-form,.cat,.costep,.osum,.gal{box-shadow:0 6px 16px -12px rgba(76,13,18,.34)}
  .tile[data-rv]{transition-delay:0ms!important}
  .hero::after{height:110px}
  .band{height:110px}
  .cart{box-shadow:none}
  .cartbar{-webkit-backdrop-filter:none;backdrop-filter:none;background:#FDF8F2}
  .toast{-webkit-backdrop-filter:none;backdrop-filter:none}
  .tile,.rev,.pol{contain:layout paint style}
  [data-rv]{transition-duration:.5s}
}

/* the floating WhatsApp button must not sit on top of an open panel */
body.panel-open .fab{opacity:0!important;pointer-events:none}
body.panel-open .cartbar{transform:translate3d(0,110%,0)}
html.touch,html.touch body{touch-action:manipulation}


/* ============================ RAKSHA BANDHAN EDIT ============================
   Drawn from the packaging: butter-yellow card, dusty-pink border, maroon
   type, gold mandala corners and a rakhi thread across the top.
   ========================================================================= */
.rakhi{--butter:#F8E4AE;--butter-2:#FCF0CE;--pink:#F0AFA6;--pink-2:#E68C86;--rk-ink:#8E2732;
  position:relative;padding:clamp(30px,5vw,58px) 0 clamp(34px,5.5vw,64px);
  background:linear-gradient(180deg,#FBEFD3 0%,#F7E3AC 100%);overflow:hidden}
.rakhi::before,.rakhi::after{content:"";position:absolute;left:0;right:0;height:8px;
  background:repeating-linear-gradient(90deg,var(--pink) 0 14px,transparent 14px 28px);opacity:.55}
.rakhi::before{top:0} .rakhi::after{bottom:0}

.rk-card{position:relative;border:1.5px solid var(--pink);border-radius:var(--r-lg);
  background:linear-gradient(165deg,var(--butter-2),var(--butter));
  padding:clamp(30px,5.2vw,62px) clamp(20px,4.4vw,58px);text-align:center;overflow:hidden;
  box-shadow:0 26px 60px -46px rgba(142,39,50,.6)}
.rk-card::after{content:"";position:absolute;inset:7px;border:1px solid rgba(230,140,134,.42);
  border-radius:calc(var(--r-lg) - 5px);pointer-events:none}

.rk-mandala{position:absolute;width:clamp(120px,20vw,230px);opacity:.24;pointer-events:none;color:var(--pink-2)}
.rk-mandala.tl{top:-34px;left:-34px}
.rk-mandala.br{bottom:-34px;right:-34px;transform:rotate(180deg)}

/* The real rakhi photograph. Deliberately small — it is a supporting
   detail under the headline, not the hero of the section. */
.rk-photo{position:relative;margin:0 auto clamp(16px,2.6vw,26px);width:fit-content}
.rk-photo img{width:clamp(96px,13vw,150px);height:auto;display:block;margin-inline:auto;
  border-radius:14px;object-fit:cover;aspect-ratio:3/4;
  border:1px solid rgba(230,140,134,.5);
  box-shadow:0 18px 34px -22px rgba(142,39,50,.75)}
.rk-photo figcaption{margin-top:9px;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:#B27B72;text-align:center}
@media(max-width:520px){ .rk-photo img{width:104px} }

.rk-eyebrow{font-size:clamp(9.5px,1.1vw,11.5px);letter-spacing:.34em;text-transform:uppercase;
  color:var(--rk-ink);font-weight:500;position:relative}
.rk-card h2{font-family:var(--f-d);color:var(--rk-ink);font-weight:600;
  font-size:clamp(34px,7.6vw,76px);line-height:1.02;letter-spacing:-.02em;
  margin:clamp(12px,2vw,20px) 0 0;position:relative}
.rk-card h2 em{display:block;font-style:italic;font-weight:500;color:#B8555A}
.rk-sub{position:relative;margin:clamp(13px,2vw,20px) auto 0;max-width:44ch;
  color:#96504F;font-size:clamp(14px,1.5vw,17px);line-height:1.6}
.rk-rule{position:relative;width:74px;height:1px;margin:clamp(18px,2.6vw,26px) auto;
  background:linear-gradient(90deg,transparent,var(--pink-2),transparent)}
.rk-terms{position:relative;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#B27B72;margin-top:clamp(14px,2vw,20px)}
.rk-cta{position:relative;display:inline-flex;align-items:center;gap:10px;margin-top:clamp(18px,2.6vw,26px);
  background:var(--rk-ink);color:var(--butter-2);border:0;border-radius:999px;cursor:pointer;
  padding:14px clamp(24px,3.4vw,38px);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .4s var(--ease);
  box-shadow:0 14px 30px -20px rgba(142,39,50,.9)}
.rk-cta:hover{background:#742029;transform:translateY(-2px);box-shadow:0 20px 38px -20px rgba(142,39,50,.95)}
.rk-cta svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7}

.rk-gifts{position:relative;display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(10px,1.8vw,18px);margin-top:clamp(20px,3vw,30px)}
.rk-gift{display:flex;align-items:center;gap:11px;text-align:left;
  border:1px solid rgba(230,140,134,.55);border-radius:999px;
  background:rgba(255,255,255,.5);padding:9px 18px 9px 12px}
.rk-gift svg{flex:none;width:26px;height:26px;color:#B8555A}
.rk-gift b{display:block;font-family:var(--f-b);font-weight:500;font-size:13px;
  letter-spacing:.05em;color:var(--rk-ink);line-height:1.25}
.rk-gift span{display:block;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:#B27B72;line-height:1.3;margin-top:1px}
@media(max-width:420px){ .rk-gifts{flex-direction:column;align-items:stretch} }

.rk-pills{position:relative;display:flex;flex-wrap:wrap;justify-content:center;
  gap:8px;margin-top:clamp(18px,2.6vw,26px)}
.rk-pills span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rk-ink);border:1px solid rgba(230,140,134,.6);border-radius:999px;
  padding:7px 14px;background:rgba(255,255,255,.42)}

@media (max-width:520px){
  .rk-mandala{width:120px}
  .rk-mandala.tl{top:-24px;left:-24px} .rk-mandala.br{bottom:-24px;right:-24px}
}