/* getvinetarodrops.com — Vinetaro Drops, U.S. stocking partner desk.
   Design slot, row 317 (batch8_assignments.py): Teko / Almarai, a blush-stone
   ground ruled with terracotta hairlines, a header whose name sits in a boxed
   panel beside a full-height column of destinations, a footer slab carrying the
   guarantee at display size beside two ranks of links, and the vine-curl hero
   motif.

   Colour comes from the bottle, not from the LOOKS FOR reference: the label
   prints "Vinetaro" in a deep wine red over a cream field ruled in gold, inside
   amber glass under a near-black rubber bulb. Wine is the accent, terracotta
   draws every rule, gold marks the second voice, and the page itself is the
   blush stone the slot assigns.

   Everything above CRITICAL-END is inlined into every page head. */

/* ---- tokens */
:root{
  --ink:#2b211e;            /* body text, warm near-black */
  --ink-2:#5d4b45;          /* secondary */
  --ink-3:#7a635b;          /* captions, meta */
  --wine:#8e1b26;           /* the label wordmark */
  --wine-d:#6a1019;         /* deep */
  --wine-2:#a8323c;
  --terra:#c2603c;          /* the rules */
  --terra-d:#9c4527;
  --gold:#a9822a;           /* "ADVANCED FORMULA" */
  --amber:#b06a22;          /* the glass */
  --clay:#3a231f;           /* dark bands */
  --wash:#f9e8e0;
  --paper:#f4ebe6;          /* the page: blush stone */
  --panel:#fffdfb;
  --tint:#ece0d9;
  --line:#e6d3ca;
  --line-2:#d3b6aa;
  --good:#2f6b46;
  --warn:#8a5a10;
  --wrap:1200px;
  --measure:760px;
  --measure-wide:980px;
  --radius:4px;
  --radius-lg:10px;
  --shadow:0 1px 2px rgba(58,35,31,.06), 0 12px 30px rgba(58,35,31,.08);
  --shadow-lg:0 22px 58px rgba(106,16,25,.20);
  --navh:104px;
  --display:"Teko",system-ui,-apple-system,"Segoe UI",sans-serif;
  --text:"Almarai",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---- base */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{
  overflow-x:clip;background:var(--paper);color:var(--ink);
  font-family:var(--text);font-size:17px;line-height:1.78;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--wine);text-underline-offset:3px}
a:hover{color:var(--terra-d)}
/* Teko is a condensed display face with a tall cap height and a short
   line-box. It needs more leading than a text face and looser tracking at
   large sizes, or the headline reads as one solid block. */
h1,h2,h3,h4{font-family:var(--display);color:var(--wine-d);font-weight:600;line-height:1.08;margin:0 0 .42em;letter-spacing:.005em}
h1{font-size:clamp(2.5rem,1.5rem + 3.1vw,4rem)}
h2{font-size:clamp(1.95rem,1.4rem + 1.9vw,2.85rem)}
h3{font-size:1.5rem;font-weight:500;line-height:1.14}
h4{font-size:1.28rem;font-weight:500}
p,li{font-size:1.0625rem}
p{margin:0 0 1.05em}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.skip{position:absolute;left:-9999px;top:0;background:var(--wine);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--terra);outline-offset:2px}

/* the eyebrow names the JOB of the section beneath it */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--text);font-size:.75rem;font-weight:800;
  letter-spacing:.17em;text-transform:uppercase;color:var(--terra-d);
  margin:0 0 12px;
}
.eyebrow::before{
  content:"";width:26px;height:2px;background:var(--terra);flex:0 0 auto;
}

/* ---- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:14px 32px;
  font-family:var(--display);font-size:1.3rem;font-weight:600;letter-spacing:.03em;
  border:0;border-radius:var(--radius);cursor:pointer;text-decoration:none;
  background:var(--wine);color:#fff;line-height:1.1;
  transition:filter .18s ease,transform .18s ease;
}
.btn:hover{filter:brightness(1.12);color:#fff}
.btn:active{transform:translateY(1px)}
.btn--cyan{background:linear-gradient(98deg,var(--terra-d) 0%,var(--terra) 100%)}
.btn--lg{min-height:62px;padding:16px 38px;font-size:1.44rem}
.btn--ghost{background:none;color:var(--wine-d);box-shadow:inset 0 0 0 2px var(--line-2)}
.btn--ghost:hover{background:var(--wash);color:var(--wine-d)}
.btn--wide{width:100%}

/* ---- header: the name in a boxed panel, the destinations in a full-height
   column beside it, divided by a terracotta rule that runs the whole height.
   padding-BLOCK, never the shorthand: .nav__top also carries .wrap, and
   `padding:12px 0` would set padding-inline to 0 and wipe the page gutter --
   invisible above the container max-width and untestable by any overflow
   check (pitfall 46). */
.nav{position:sticky;top:0;z-index:100;background:var(--panel);border-bottom:2px solid var(--terra)}
.nav__top{display:flex;align-items:stretch;flex-wrap:wrap;gap:0;padding-block:12px}
.brand{
  display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--wine-d);
  border:2px solid var(--wine);border-radius:var(--radius);padding:8px 16px;flex:0 0 auto;
}
.brand__glyph{width:34px;height:34px;flex:0 0 auto}
/* Size the mark by ELEMENT as well as by class. brand_marks.py rewrites the
   <svg> inside .brand and does not carry class="brand__glyph" onto the
   replacement, so a rule keyed only to that class stops applying the moment
   the tool runs and the glyph renders at its intrinsic size (pitfall 16). */
.brand>svg{width:34px;height:34px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1}
.bw b{font-family:var(--display);font-size:1.86rem;font-weight:600;letter-spacing:.01em}
.bw b em{font-style:normal;color:var(--terra)}
.bw small{font-family:var(--text);font-size:.6875rem;font-weight:700;letter-spacing:.06em;color:var(--ink-3);margin-top:3px}

.nav__dest{
  flex:1 1 auto;min-width:0;display:flex;align-items:center;
  margin-left:20px;padding-left:20px;border-left:2px solid var(--terra);
}
/* Column-first: the destinations fill downward, then across, so the block
   reads as one tall column of names rather than a line of tabs. */
.menu{
  display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);
  gap:2px 26px;justify-content:start;align-content:center;
  list-style:none;margin:0;padding:0;min-width:0;
}
.menu li{min-width:0}
.menu a{
  display:inline-block;padding:3px 0;font-family:var(--text);
  font-size:.875rem;font-weight:700;color:var(--ink-2);text-decoration:none;
  border-bottom:2px solid transparent;white-space:nowrap;
}
.menu a:hover{color:var(--wine)}
.menu a[aria-current="page"]{color:var(--wine);border-bottom-color:var(--terra)}
.menu__more{display:none}
.nav__rail{margin-left:auto;display:flex;align-items:center;gap:16px;padding-left:18px}
.nav__price{text-align:right;line-height:1.15}
.nav__price b{display:block;font-family:var(--display);font-size:1.5rem;font-weight:600;color:var(--wine-d)}
.nav__price span{font-size:.75rem;font-weight:700;color:var(--ink-3)}
.nav__buy{min-height:46px;padding:10px 20px;font-size:1.14rem}
.burger{
  display:none;width:48px;height:46px;background:transparent;border:2px solid var(--line-2);
  border-radius:var(--radius);cursor:pointer;padding:12px 11px;
}
.burger span{display:block;height:2px;background:var(--wine);margin:0 0 5px}
.burger span:last-child{margin:0}

/* ---- hero: copy LEFT, the dropper RIGHT on a ruled blush ground */
.hero{position:relative;background:var(--paper);padding:52px 0 58px;overflow-x:clip}
/* the terracotta rules the slot names, drawn as the ground itself */
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,
    rgba(194,96,60,.16) 0 1px,transparent 1px 34px);
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 72%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 72%,transparent);
}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:46px;align-items:center}
.hero__copy{display:flex;flex-direction:column;min-width:0}
.hero h1{margin:0 0 18px}
.hero h1 em{font-style:normal;color:var(--terra-d)}
.answer{
  background:var(--panel);border:1px solid var(--line);
  border-left:5px solid var(--wine);border-radius:0 var(--radius) var(--radius) 0;
  padding:20px 24px;margin:0 0 18px;box-shadow:var(--shadow);
}
.answer p{margin:0 0 .72em;font-size:1.06rem}
.answer p:last-child{margin:0}
.hero__road{font-size:1rem;color:var(--ink-2);margin:0 0 20px;max-width:56ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 20px}
.hero__sub{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 18px;font-size:.925rem;font-weight:700;color:var(--ink-2)}
.hero__sub span{display:inline-flex;align-items:center;gap:7px;min-width:0}
.hero__sub span::before{content:"\2713";color:var(--good);font-weight:800}
.factpills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 18px;padding:0}
.factpills li{
  font-size:.875rem;font-weight:700;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--line-2);padding:6px 14px;border-radius:2px;min-width:0;
}
.factpills li b{color:var(--wine);font-weight:800}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.figures div{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--terra);padding:12px 15px;min-width:0}
.figures b{display:block;font-family:var(--display);font-size:2rem;font-weight:600;color:var(--wine-d);line-height:1}
.figures span{display:block;font-size:.8125rem;font-weight:700;color:var(--ink-3);margin-top:4px}
.hero__media{position:relative;align-self:center}
.hero__card{position:relative;z-index:2;text-align:center;padding:18px;background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--wine);border-radius:var(--radius)}
.hero__card img{width:100%;max-width:420px;height:auto;margin-inline:auto}
.hero__cap{margin:14px 0 0;font-size:.8125rem;font-weight:700;color:var(--ink-3);text-align:center}
.trust__row{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0;list-style:none;font-size:.875rem;font-weight:700;color:var(--ink-2)}
.trust__row li{display:inline-flex;align-items:center;gap:8px;min-width:0}
.trust__row li::before{content:"\2713";color:var(--good);font-weight:800}

/* ---- inner page head */
.phead{padding:34px 0 12px;background:var(--panel);border-bottom:1px solid var(--line)}
.crumbs{font-size:.875rem;color:var(--ink-3);margin:0 0 14px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--terra-d)}
.phead h1{margin:0 0 16px;max-width:var(--measure-wide)}
.phead .answer{max-width:var(--measure-wide)}
.lead{font-size:1.14rem;color:var(--ink-2);max-width:var(--measure)}

/* ---- topline strip: the five trust facts, above the navigation.
   Role, lot, dose and count, guarantee, order phone. It exists so the NAV does
   not have to carry them (hero.md). It sits ABOVE CRITICAL-END because it is
   the first thing painted; appended to the end of the stylesheet it would load
   async and flash unstyled at the very top of the page. */
.util{background:var(--clay);color:#e0cabf;font-size:.8125rem;line-height:1.5}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;padding-block:8px}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;min-width:0}
.util__item+.util__item::before{content:"";width:12px;height:1px;
  background:var(--terra);flex:0 0 auto;margin-right:9px}
.util b{color:#fff5ef;font-weight:800}
.util a{color:inherit;text-decoration:none}
.util a:hover{text-decoration:underline}
@media (max-width:760px){
  /* Five items wrap to three lines and eat ~100px of an 844px screen
     (hero.md). Keep role, guarantee and phone; the lot and the dose are on the
     pages that need them. */
  .util__item--trim{display:none}
  .util__row{gap:4px 14px}
}


/* ---- hero motif -- vine-curl ---------------------------------------- */
.hero{position:relative;overflow-x:clip;overflow-y:visible}
:where(.hero__media){position:relative}
.hero__card{position:relative;z-index:2}
.hero__card img{position:relative;z-index:3}
.hero{background:linear-gradient(168deg,#f4ebe6 0%,#e9ccc1 52%,#f4ebe6 100%)}.hero__media::before{content:'';position:absolute;left:50%;top:-16%;width:150%;aspect-ratio:1;translate:-50% 0;border-radius:50%;border:2px dashed rgba(194,96,60,0.42);animation:vtCurl 28s linear infinite;z-index:0;pointer-events:none}.hero__media::after{content:'';position:absolute;left:50%;top:-2%;width:122%;aspect-ratio:1;translate:-50% 0;border-radius:50%;border:3px solid transparent;border-top-color:rgba(142,27,38,0.55);border-right-color:rgba(169,130,42,0.50);animation:vtWind 12s cubic-bezier(.45,0,.55,1) infinite;z-index:0;pointer-events:none}@keyframes vtCurl{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes vtWind{0%{transform:rotate(0deg) scale(.93);opacity:.34}50%{transform:rotate(180deg) scale(1.05);opacity:.9}100%{transform:rotate(360deg) scale(.93);opacity:.34}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/*!CRITICAL-END*/
/* ---- sections */
.sec{padding:62px 0;position:relative}
.sec--tint{background:var(--tint)}
.sec--panel{background:var(--panel)}
.sec--dark{background:var(--clay);color:#eedcd4}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#e0cabf}
.sec--dark .eyebrow{color:#e79a72}
.sec--dark .eyebrow::before{background:#e79a72}
.sec--dark a{color:#f2b696}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
/* the terracotta rule, repeated as a section edge */
.sec--rule{background:var(--panel);border-top:2px solid var(--terra)}
.sec__head{max-width:var(--measure);margin:0 0 26px}
.sec__head h2{margin:0 0 10px}
.sec__head p{color:var(--ink-2);margin:0}
.sec--dark .sec__head p{color:#e0cabf}

/* one measure, centred; multi-column components keep the full wrap */
@media (min-width:1060px){
  .sec>.wrap>h2,.sec>.wrap>h3,.sec>.wrap>h4,.sec>.wrap>p,
  .sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>.sec__head,.sec>.wrap>.callout,
  .sec>.wrap>.alert,.sec>.wrap>.byline,.sec>.wrap>.refs,.sec>.wrap>.pullquote,
  .sec>.wrap>blockquote{max-width:var(--measure);margin-inline:auto}
  .sec>.wrap>.tablewrap,.sec>.wrap>.faq,.sec>.wrap>.steps{
    max-width:var(--measure-wide);margin-inline:auto}
}

/* ---- lists */
.ticks{list-style:none;margin:0 0 1.1em;padding:0}
.ticks li{position:relative;padding-left:28px;margin:0 0 .5em}
.ticks li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--good);font-weight:800}
.sec--dark .ticks li::before{color:#7fd0a3}

/* ---- tables */
.tablewrap{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:1rem}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--display);font-weight:600;font-size:1.22rem;letter-spacing:.02em;color:#fff;background:var(--wine)}
tbody tr:nth-child(even){background:#fdf7f4}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--wine-d)}
.tnote{font-size:.9375rem;color:var(--ink-3);margin:-.4em 0 1.2em}

/* ---- numbered steps */
.steps{display:grid;gap:16px;margin:0 0 1.2em;counter-reset:s}
.step{position:relative;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--terra);border-radius:var(--radius);padding:20px 22px 20px 70px;min-width:0}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:18px;top:18px;width:36px;height:36px;
  display:grid;place-items:center;
  background:var(--wine);color:#fff;
  font-family:var(--display);font-weight:600;font-size:1.4rem;border-radius:50%;
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards */
.grid{display:grid;gap:18px}
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* A grid item's default min-width is auto, which floors at MIN-CONTENT, so a
   card holding a table or a nowrap chip refuses to shrink below it and hangs
   silently off the right of a phone. min-width:0 at every width. */
.grid>*{min-width:0}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--terra);border-radius:var(--radius);padding:22px;min-width:0}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:#4a2d28;border-color:#66413a;border-top-color:#e79a72}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--wash);border:1px solid #edcbb9;border-radius:var(--radius);padding:20px 22px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--wine-d)}
.callout p:last-child{margin:0}
.alert{background:#fdf5e8;border:1px solid #efdcbc;border-left:4px solid var(--warn);border-radius:0 var(--radius) var(--radius) 0;padding:20px 22px;margin:0 0 1.2em}
.alert b:first-child{display:block;margin-bottom:6px;color:var(--warn)}
.alert p:last-child{margin:0}
.pullquote{font-family:var(--display);font-size:1.7rem;font-weight:500;line-height:1.24;color:var(--wine-d);border-left:4px solid var(--terra);padding:4px 0 4px 22px;margin:0 0 1.2em}
.pullquote cite{display:block;font-family:var(--text);font-size:.9375rem;font-style:normal;font-weight:400;color:var(--ink-3);margin-top:10px;line-height:1.6}
.keypoints{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:0 0 var(--radius) var(--radius);padding:20px 22px;margin:0 0 1.2em}
.keypoints>b{display:block;margin-bottom:8px;color:var(--wine-d)}
.keypoints ul{margin:0;padding-left:20px}

/* ---- image beside copy */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:center;margin:0 0 1.2em}
.split--flip .split__img{order:2}
/* Same family as .grid>* above: a .tablewrap holding a 520px-min table keeps
   its column 520px wide however narrow the grid gets, and the right-hand half
   is then clipped away by body{overflow-x:clip} with nothing to scroll and
   nothing for a static check to report. */
.split__img,.split__body{min-width:0}
.split__img img{width:100%;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.split__body p:last-child{margin:0}

/* ---- stat band */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;text-align:center}
.stats>div{min-width:0}
.stats div b{display:block;font-family:var(--display);font-size:3rem;font-weight:600;color:#fff;line-height:1}
.stats div span{display:block;font-size:.9375rem;color:#e0cabf;margin-top:6px}

/* ---- label versus research */
.versus{display:grid;grid-template-columns:1.1fr 1fr 1.3fr;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel);margin:0 0 1.2em}
.versus>div{padding:13px 16px;border-bottom:1px solid var(--line);font-size:.98rem;min-width:0}
.versus>div:nth-child(3n+1){font-weight:700;background:#fdf7f4}
.versus__h{background:var(--wine)!important;color:#fff;font-family:var(--display);font-weight:600;font-size:1.16rem;letter-spacing:.02em}

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
/* .ingcard is a grid ITEM and `.ing__dose` is white-space:nowrap, so without
   this the card cannot shrink below the widest chip and overhangs a phone. */
.inglist>*{min-width:0}
.ingcard{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--terra);border-radius:var(--radius);padding:22px 24px}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:0 0 10px}
.ingcard__top h3{margin:0}
.ing__latin{font-size:.9375rem;font-style:italic;color:var(--ink-3)}
.ing__dose{margin-left:auto;font-size:.875rem;font-weight:800;color:#fff;background:var(--wine);padding:4px 12px;border-radius:2px;white-space:nowrap}
.ingcard p:last-child{margin:0}

/* ---- add-to-cart pricing panel. Four pack shots ship with this product, so
   the row is four wide here rather than three. */
.prices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch;margin:0 0 20px}
.prices>*{min-width:0}
.card--pack{display:flex;flex-direction:column;background:var(--panel);border:2px solid transparent;box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--radius-lg);overflow:hidden;position:relative}
/* No lift on the featured card: a negative margin makes it taller than its
   siblings and breaks the one-height, one-baseline rule the pricing row is
   measured against. The accent border, the deeper shadow, the coloured head
   band and the flag already make it unmistakable. */
.card--pack.featured{border-color:var(--wine);box-shadow:var(--shadow-lg)}
.pack__head{background:var(--tint);border-bottom:1px solid var(--line);padding:12px 18px;display:flex;align-items:center;gap:10px;min-width:0}
.card--pack.featured .pack__head{background:var(--wine);border-bottom-color:var(--wine)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:#fff}
.pack__head b{font-family:var(--display);font-size:1.44rem;font-weight:600;letter-spacing:.02em}
.pack__head span{font-size:.75rem;font-weight:800;color:var(--ink-3);margin-left:auto;white-space:nowrap}
.pack__flag{position:absolute;right:0;top:0;background:var(--terra-d);color:#fff;font-family:var(--text);font-size:.6875rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;z-index:3;border-radius:0 0 0 var(--radius)}
.pack__body{display:flex;flex-direction:column;flex:1;padding:18px 18px 20px;min-width:0}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,156px);object-fit:contain;margin-inline:auto;margin-bottom:14px}
.pack__per{font-family:var(--display);font-size:2.2rem;font-weight:600;color:var(--wine-d);line-height:1;text-align:center;margin:0}
.pack__unit{display:block;text-align:center;font-size:.8125rem;font-weight:800;color:var(--ink-3);margin:6px 0 12px;letter-spacing:.04em;text-transform:uppercase}
.pack__tot{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:0 0 14px;font-size:.9375rem;color:var(--ink-2)}
.pack__tot b{font-weight:800}
.pack__was{color:var(--ink-3);text-decoration:line-through;font-weight:600}
.pack__perks{list-style:none;margin:0 0 18px;padding:0;font-size:.875rem}
.pack__perks li{position:relative;padding-left:22px;margin:0 0 6px;color:var(--ink-2)}
.pack__perks li::before{content:"\2713";position:absolute;left:0;color:var(--good);font-weight:800}
.card--pack>.pack__body>.btn{margin-top:auto;font-size:1.1rem;padding-inline:14px}
.pack__marks{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;margin:12px 0 0;font-size:.75rem;color:var(--ink-3)}
.buy__note{font-size:.9375rem;color:var(--ink-3);text-align:center;margin:0}

/* ---- captioned images */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0 0 1.2em}
.shots.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots>*{min-width:0}
.shots figure{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.shots img{width:100%}
.shots figcaption{padding:16px 18px}
.shots figcaption b{display:block;margin-bottom:5px;color:var(--wine-d)}
.shots figcaption span{font-size:.9375rem;color:var(--ink-2)}
figure.portrait img{width:var(--figw,320px);margin-inline:auto}

/* ---- seal wall */
.badgewall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0 0 1.2em}
.badgewall>*{min-width:0}
.badgewall figure{margin:0;text-align:center;background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:var(--radius);padding:18px 16px}
.badgewall img{width:74px;height:74px;object-fit:contain;margin:0 auto 10px}
.badgewall b{display:block;font-size:.98rem;margin-bottom:4px;color:var(--wine-d)}
.badgewall span{font-size:.875rem;color:var(--ink-2)}

/* ---- star distribution */
.meter{margin:0 0 1.2em}
.meter__row{display:grid;grid-template-columns:76px minmax(0,1fr) 52px;gap:12px;align-items:center;margin:0 0 8px;font-size:.9375rem}
.meter__bar{height:10px;background:var(--line);border-radius:999px;overflow:hidden;min-width:0}
/* the glass to the wordmark: the bottle's own two colours, left to right */
.meter__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--amber),var(--wine))}
.stars{color:var(--gold);letter-spacing:1px}
.stars i{font-style:normal;opacity:.34}

/* ---- FAQ. Padding on <summary>, which is the click target (pitfall 73). */
.faq{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel);margin:0 0 1.2em}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:15px 48px 15px 20px;cursor:pointer;position:relative;list-style:none;font-family:var(--display);font-weight:500;font-size:1.42rem;line-height:1.16;color:var(--wine-d)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;translate:0 -50%;font-family:var(--text);font-size:1.3rem;font-weight:400;color:var(--terra-d)}
.faq details[open] summary::after{content:"\2212"}
.faq__body{padding:0 20px 18px}
.faq__body p:last-child,.faq__body ul:last-child{margin-bottom:0}

/* ---- references and byline */
.refs{margin:0 0 1.2em}
.refs ol{padding-left:22px;margin:0}
.refs li{font-size:.9375rem;color:var(--ink-2);margin:0 0 .6em}
/* The reference list prints each source's full URL as the link TEXT, and a URL
   is one unbreakable token. `anywhere` rather than `break-word` because it
   also lowers the element's MIN-CONTENT, which is what stops the ancestor
   being sized by the longest URL in the list. */
.refs li,.refs li a{overflow-wrap:anywhere}
.byline{display:flex;gap:18px;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--wine);border-radius:0 var(--radius) var(--radius) 0;padding:22px 24px;margin:0 0 1.2em}
.byline__mark{flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center;background:var(--wine);color:#fff;font-family:var(--display);font-weight:600;font-size:1.5rem;border-radius:var(--radius)}
.byline>div{min-width:0}
.byline b{display:block;margin-bottom:6px;color:var(--wine-d)}
.byline p{font-size:.9688rem;color:var(--ink-2);margin:0}

/* ---- closing CTA */
.final{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--wine);border-radius:0 0 var(--radius) var(--radius);padding:30px 32px}
.final--media{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:center}
.final--media>*{min-width:0}
.final__img img{width:210px}
.final h2{margin:0 0 10px}
.final__price{font-weight:700;color:var(--ink-2)}
.final__sm{font-size:.9375rem;color:var(--ink-3);margin:12px 0 0}

/* ---- related */
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;text-align:left}
.rel>*{min-width:0}
.rel a{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;text-decoration:none;color:var(--ink);transition:border-color .18s ease,transform .18s ease}
.rel a:hover{border-color:var(--terra);transform:translateY(-2px)}
.rel b{display:block;font-family:var(--display);font-size:1.4rem;font-weight:500;color:var(--wine-d);margin-bottom:5px;line-height:1.14}
.rel span{font-size:.9375rem;color:var(--ink-2)}

/* ---- forms. 16px minimum or iOS Safari zooms on focus (pitfall 86). */
.form{display:grid;gap:16px;max-width:var(--measure)}
.field label{display:block;font-weight:700;font-size:.9688rem;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font-family:var(--text);font-size:16px;padding:13px 14px;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--panel);color:var(--ink)}
.field textarea{min-height:140px;resize:vertical}
.field small{display:block;font-size:.875rem;color:var(--ink-3);margin-top:5px}

/* ---- blog */
.article{max-width:var(--measure);margin-inline:auto}
.postmeta{font-size:.9375rem;color:var(--ink-3);margin:0 0 20px}
.toc{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--terra);border-radius:var(--radius);padding:20px 24px;margin:0 0 28px}
.toc b{display:block;margin-bottom:8px;color:var(--wine-d)}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:0 0 5px;font-size:1rem}
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.posts>*{min-width:0}
.posts article{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.posts h3{margin:0 0 8px}
.posts p{font-size:1rem;color:var(--ink-2)}
.dtable{min-width:520px}

/* ---- footer: a slab carrying the guarantee at display size, beside two ranks
   of destinations, over a clay legal rail. */
.fcta{position:relative;background:var(--clay);color:#fff;padding:52px 0}
.fcta h2,.fcta__h{color:#fff}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center}
.fcta__box>*{min-width:0}
.fcta__eye{display:inline-block;font-family:var(--text);font-size:.75rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:#e79a72;margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:2.3rem;font-weight:600;line-height:1.1;margin:0 0 10px}
.fcta p{color:#e0cabf}
.fcta__sm{font-size:.9375rem;color:#c5a99e;margin:12px 0 0}
.fcta__sm a,.fcta p a{color:#f2b696}
.fcta__img img{width:290px}
footer{background:var(--panel)}
.fgrid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.7fr);gap:38px;padding-block:44px}
.fgrid>*{min-width:0}
.fslab{border-right:2px solid var(--terra);padding-right:32px}
.fguar{display:block;font-family:var(--display);font-size:clamp(4.4rem,2.6rem + 7vw,7.6rem);font-weight:600;line-height:.8;color:var(--wine);letter-spacing:-.02em}
.fguar__sub{display:block;font-family:var(--text);font-size:.9375rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--terra-d);margin:8px 0 18px}
.fbrand{font-family:var(--display);font-size:2rem;font-weight:600;color:var(--wine-d);line-height:1}
.fbrand span{color:var(--terra)}
.frole{font-size:.9375rem;color:var(--ink-2);margin:8px 0 14px}
.fcard p{font-size:.9375rem;color:var(--ink-2);margin:0 0 .7em}
.fcard b{color:var(--wine-d)}
.franks{display:grid;gap:26px}
.frank{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.frank>*{min-width:0}
.fh{font-family:var(--text);font-size:.75rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.fgrid ul{list-style:none;margin:0 0 18px;padding:0}
.fgrid li{margin:0}
/* inline-block, not block: the box shrink-wraps so the hover underline stays
   the width of the words, and the negative margin gives the row height back
   (pitfall 82). */
footer li a{display:inline-block;padding-block:5px;margin-block:-5px;font-size:.9688rem;color:var(--ink-2);text-decoration:none}
footer li a:hover{color:var(--terra-d)}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-block:20px;border-top:1px solid var(--line)}
.fseals img{width:44px;height:44px;object-fit:contain}
.fseals span{font-size:.9375rem;color:var(--ink-3)}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-block:0 26px}
.fpay img{width:230px;height:auto}
.fpay span{font-size:.9375rem;color:var(--ink-3)}
.disc{background:var(--tint);border-top:2px solid var(--terra);padding-block:28px 32px}
.disc p,.disc li{font-size:.9375rem;color:var(--ink-2)}
.disc b{color:var(--wine-d)}
.disc__list{columns:2;column-gap:38px;list-style:none;margin:14px 0 0;padding:0}
.disc__list li{break-inside:avoid;margin:0 0 9px;padding-left:16px;position:relative}
.disc__list li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:2px;background:var(--terra)}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:.9375rem}

/* ---- sticky buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--clay);color:#fff;transform:translateY(105%);transition:transform .25s ease}
.buybar.show{transform:none}
.buybar__in{display:flex;align-items:center;gap:18px;max-width:var(--wrap);margin-inline:auto;padding-block:12px;padding-inline:22px}
.buybar__t{font-size:.9375rem;min-width:0}
.buybar__t b{display:block;font-size:1rem}
.buybar__t span{color:#e0cabf}
.buybar .btn{margin-left:auto;flex:0 0 auto}

/* ---- reveal */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---- responsive */
@media (max-width:1180px){
  .menu{gap:2px 18px}
  .menu a{font-size:.84rem}
  .nav__price{display:none}
}
@media (max-width:1040px){
  .prices{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  :root{--navh:96px}
  .hero__grid{grid-template-columns:1fr;gap:26px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:6px 0 20px}
  .answer{order:4}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
  .trust__row{order:9}
  .factpills{order:10}
  .figures{order:11}
  /* the destination column drops below the boxed name and becomes a stack */
  .nav__dest{order:9;flex:1 0 100%;margin:10px 0 0;padding:0;border-left:0;border-top:1px solid var(--line)}
  .menu{display:none}
  .menu.open{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:6px 0 10px}
  .menu__more{display:block}
  .menu a{display:block;padding:12px 0;border-bottom:1px solid var(--line);white-space:normal}
  .menu a[aria-current="page"]{border-bottom-color:var(--line)}
  .burger{display:block}
  .nav__buy{display:none}
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .fcta__box{grid-template-columns:1fr}
  .fcta__img{display:none}
  .final--media{grid-template-columns:1fr;gap:20px}
  .fgrid{grid-template-columns:1fr;gap:28px}
  .fslab{border-right:0;border-bottom:2px solid var(--terra);padding-right:0;padding-bottom:22px}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding:46px 0}
  .hero{padding:34px 0 42px}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .prices{grid-template-columns:1fr}
  .card--pack.featured{order:-1}
  .shots,.shots.s2{grid-template-columns:1fr}
  .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rel,.posts{grid-template-columns:1fr}
  .split,.split--flip .split__img{grid-template-columns:minmax(0,1fr);order:0}
  .versus{grid-template-columns:1fr}
  .versus>div:nth-child(3n+1){border-top:2px solid var(--line-2)}
  /* The dose chip is white-space:nowrap and margin-left:auto, so on a narrow
     card it is pushed to the right of a line with no room for it and overhangs
     the edge. On a phone let it sit at the start of its own line. */
  .ing__dose{margin-left:0;white-space:normal}
  .disc__list{columns:1}
  .figures{grid-template-columns:1fr;gap:8px}
  .frank{grid-template-columns:1fr 1fr;gap:20px}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
}
@media (max-width:440px){
  .frank{grid-template-columns:1fr}
  .badgewall{grid-template-columns:1fr}
  .brand{padding:6px 12px}
  .bw b{font-size:1.6rem}
}

/* ---- hero: the dropper breathes on its plate ------------------------------
   Transform only, NEVER opacity: the bottle is the LCP element and an element
   starting at opacity:0 is not recorded as painted (hero.md). The float goes
   on the CARD, never on the <img>, which is preloaded. */
.hero__card{isolation:isolate}
@media (prefers-reduced-motion:no-preference){
  .hero__card{animation:vtFloat 9s ease-in-out infinite}
  @keyframes vtFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
}


/* ---- hero: sticky, centred product column ------------------------------
   The product column holds its place, vertically centred, until the hero has
   fully scrolled past.

   --navh is measured and published by site.js: nav heights run 66-99px across
   the estate and change when a bar compacts, and a hardcoded offset tucks the
   product under the bar on the taller ones.

   min-height makes the sticky box a full screen tall so the shot can be
   CENTRED inside it. Without it the box is only as tall as the image and
   `top` merely pins it under the header.

   Requires .hero NOT to clip on the block axis: any non-visible overflow on an
   ancestor becomes the scrollport sticky resolves against (pitfall 65). */
@media (min-width: 981px) {
  .hero__grid { align-items: start; }
  .hero__media {
    position: sticky;
    top: calc(var(--navh, 88px) + 14px);
    align-self: start;
    min-height: calc(100vh - var(--navh, 88px) - 28px);
    min-height: calc(100svh - var(--navh, 88px) - 28px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
/* Cancelling the sticky column must NOT cancel the containing block. Every
   hero motif sizes its .hero__media pseudo-elements in PERCENT, so they
   resolve against the nearest positioned ancestor; `static` re-parents them to
   a box several times wider -- measured at 1800px against a 523px column --
   and the ring lands across the headline. Worse, the same query stops it
   animating, so it SITS there: ask for less motion, get the one broken hero.

   `relative` lays out identically to `static` and keeps the containing block.
   `top:0` is not decoration: the rule above sets a top offset of one nav height
   plus 14px, which a relative box would apply for real and push the plate
   ~110px down the page (pitfall 65). Written WITHOUT naming that custom
   property in the usual var() form on purpose -- preflight's undefined-variable
   check reads comments too, so a property named here is a property it believes
   the sheet uses. Measured on 7 sites before and after (pitfall 107). */
@media (prefers-reduced-motion: reduce) {
  .hero__media { position: relative; top: 0; min-height: 0; }
}

/* --- pack cards read as one repeated object ----------------------------
   A pricing row is four cards that have to share their edges, their image slot
   and their button baseline. The vendor pack shots are four different shapes
   (1373x1589, 1600x1600, 1800x1296 and 1600x1413), so without these rules the
   images render at four sizes and the four CTAs sit at four heights.

   The height lives here and not on the <img> attributes on purpose: those must
   keep stating each file's true ratio, or fix_img_dims.py rewrites them and
   CLS gets worse. Override per site with --pack-img. */
.card--pack{display:flex;flex-direction:column}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,156px);
  object-fit:contain;margin-inline:auto;margin-bottom:14px}
.card--pack>.btn{margin-top:auto}