/** Shopify CDN: Minification failed

Line 936:0 Unexpected "}"

**/
/* ==========================================================================
   Melo sections — v2, LIGHT default
   drinkmelo.com rebuild, Aug 2026

   CHANGED FROM v1: the whole system was black-ground. It is now white-ground
   by default. Every section takes a colour_scheme setting (light / dark /
   acid) so you can put a dark or acid band in for rhythm, but nothing is
   dark unless you choose it.

   THE BRAND CONTRAST RULE, which is why this file looks the way it does:
   every Melo colour is a LIGHT colour. Measured against white —
       acid   #EBFC72  ->  1.12:1   FAIL, unusable as text
       banana #FBEC90  ->  1.20:1   FAIL
       lime   #5ABD76  ->  2.34:1   FAIL
       POG    #EB5DA1  ->  3.15:1   large text and UI borders only
   Measured against black, all of them pass comfortably (8:1 to 18.7:1).

   So on a white site the brand colours are BACKGROUNDS carrying black text,
   or small non-text shapes. Where a brand colour must appear AS text on
   white, use the --melo-*-ink darkened variants below. Never the brand hex.

   Accessibility: 44px+ targets, focus ring visible on every ground and never
   obscured by sticky elements, no autoplay, prefers-reduced-motion honoured.
   ========================================================================== */

.melo {
  /* brand, immutable */
  --melo-black:  #000000;
  /* Height of the sticky site header. Used by the PDP so the gallery and the
     first section clear it instead of sliding underneath. */
  --melo-header-h: 72px;
  --melo-acid:   #EBFC72;
  --melo-white:  #FFFFFF;
  --melo-pog:    #EB5DA1;
  --melo-banana: #FBEC90;
  --melo-lime:   #5ABD76;

  /* darkened variants — the ONLY way a brand colour becomes text on white */
  --melo-acid-ink:   #4F5B0E;  /*  8.1:1 on white */
  --melo-pog-ink:    #A32463;  /*  6.9:1 */
  --melo-banana-ink: #6E5C07;  /*  7.4:1 */
  --melo-lime-ink:   #1F6B39;  /*  6.8:1 */

  /* default scheme: LIGHT */
  --melo-bg:      var(--color-background, #FFFFFF);
  --melo-fg:      var(--color-foreground-heading, #0A0A0A);   /* 19.6:1 vs white */
  --melo-fg-2:    var(--color-foreground, #45453F);           /*  9.7:1  body */
  --melo-fg-3:    var(--color-foreground-muted, #6A6A63);     /*  5.2:1  muted, passes AA */
  --melo-hair-2:  var(--color-border, #EFEFEA);
  --melo-surface: color-mix(in srgb, var(--color-foreground, #45453F) 4%, var(--color-background, #FFF));
  --melo-hair:    var(--color-border, #E3E3DC);
  --melo-focus:   var(--color-foreground-heading, #0A0A0A);
  --melo-hair-2:  #EFEFEA;
  --melo-surface: #F7F7F3;
  /* accent AS TEXT: the theme's primary, falling back to the darkened acid */
  --melo-accent:  var(--color-primary, var(--melo-acid-ink));
  --melo-focus:   #0A0A0A;

  --melo-max: 1200px;
  --melo-gut: 20px;
  --melo-radius: 10px;

  /* Typography now INHERITS the theme. Each falls back to the original
     stack if the theme variable is absent, so this can never render unstyled. */
  /* The theme leaves --font-h1--family EMPTY and sets everything to Geist, so
     headings chain to --font-body--family. Never name a font the site does not
     load: the old fallback listed Neue Haas Grotesk, which is not on this store,
     so headings silently fell all the way through to a system sans. */
  --melo-display: var(--font-h1--family, var(--font-body--family, 'Geist', -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif));
  --melo-body-font: var(--font-body--family, 'Geist', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Helvetica, Arial, sans-serif);
  --melo-serif: 'Libre Caslon Text', 'Libre Caslon Display', Georgia, 'Times New Roman', serif;
  --melo-serif-style: italic;
  --melo-serif-weight: 400;
  --melo-h-weight: var(--font-h1--weight, 800);
  --melo-h-case: var(--font-h1--case, none);
  --melo-h-tracking: var(--font-h1--letter-spacing, -0.035em);

  box-sizing: border-box;
  font-family: var(--melo-body-font);
  background: var(--melo-bg);
  color: var(--melo-fg);
  -webkit-font-smoothing: antialiased;
}
.melo *, .melo *::before, .melo *::after { box-sizing: border-box; }

/* --- colour schemes ------------------------------------------------------
   Sections now carry the THEME's own scheme class (.color-scheme-1 etc),
   emitted by snippets/color-schemes.liquid from Theme settings -> Colors.
   That class defines --color-background / --color-foreground / etc on the
   section, and everything below reads from those. So changing a scheme in
   the Colors panel restyles these sections too, exactly like every other
   section in the theme. No bespoke light/dark/acid classes any more.

   --melo-fg-3 is derived rather than hard-coded so muted text stays legible
   on a dark scheme as well as a light one.
   ------------------------------------------------------------------------ */
.melo {
  background: var(--melo-bg);
  color: var(--melo-fg-2);
}
.melo h1, .melo h2, .melo h3, .melo h4 { color: var(--melo-fg); }

.melo__inner { max-width:var(--melo-max); margin:0 auto; padding:0 var(--melo-gut); }

/* --- type ---------------------------------------------------------------- */
.melo h1,.melo h2,.melo h3,.melo h4 {
  margin:0; font-family:var(--melo-display); line-height:1.03;
  letter-spacing:var(--melo-h-tracking); font-weight:var(--melo-h-weight);
  text-transform:var(--melo-h-case); text-wrap:balance;
}
.melo h1 { font-size:clamp(2rem,7.5vw,3.9rem); }
.melo h2 { font-size:clamp(1.6rem,5.5vw,2.6rem); }
.melo h3 { font-size:clamp(1.1rem,3.4vw,1.45rem); letter-spacing:-0.025em; }
.melo p { margin:0; }

.melo__serif {
  font-family:var(--melo-serif); font-style:var(--melo-serif-style); font-weight:var(--melo-serif-weight);
  letter-spacing:-0.01em; text-transform:lowercase; color:var(--melo-accent);
}
.melo__kicker {
  font-size:0.6875rem; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--melo-accent);
}
.melo__lede { font-size:1rem; line-height:1.55; color:var(--melo-fg-2); }

/* --- SECTION SPACING, adjustable per section -----------------------------
   Every Melo section exposes "Space above/below" sliders that set these two
   custom properties inline. The slider value is the DESKTOP figure; mobile
   takes 65% of it automatically, because a gap that reads as generous on a
   1280px screen reads as a dead zone on a 390px one. Without that scaling,
   one slider would either look mean on desktop or leave a phone scrolling
   through emptiness.
   Falls back to the previous fixed values when no setting is present, so an
   older template still renders correctly. */
.melo__section-pad {
  padding-top:    calc(var(--melo-pad-top, 80px) * 0.65);
  padding-bottom: calc(var(--melo-pad-bottom, 80px) * 0.65);
}
@media (min-width:750px){
  .melo__section-pad{
    padding-top:    var(--melo-pad-top, 80px);
    padding-bottom: var(--melo-pad-bottom, 80px);
  }
}

/* --- buttons ------------------------------------------------------------- */
.melo__btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:52px; padding:14px 20px;
  border:2px solid transparent; border-radius:8px;
  font-family:inherit; font-size:1rem; font-weight:900; letter-spacing:-0.01em;
  text-align:center; text-decoration:none; cursor:pointer;
  transition:transform .12s ease, background-color .12s ease;
}
/* black on acid = 18.7:1. This is the one place acid belongs. */
.melo__btn--primary {
  background: var(--color-primary-button-background, var(--melo-acid));
  color:      var(--color-primary-button-text, #000);
  border-color: var(--color-primary-button-border, var(--color-primary-button-background, #000));
}
.melo__btn--primary:hover {
  background: var(--color-primary-button-hover-background, #E2F55A);
  color:      var(--color-primary-button-hover-text, var(--color-primary-button-text, #000));
}
.melo__btn--secondary { background:transparent; border-color:currentColor; color:var(--melo-fg); }
.melo__btn:active { transform:scale(.985); }
.melo__btn[disabled] { opacity:.45; cursor:not-allowed; }

.melo__btn-text {
  display:inline-block; min-height:44px; line-height:44px; font-size:.9375rem;
  text-decoration:underline; text-underline-offset:4px; background:none;
  border:0; padding:0; font-family:inherit; cursor:pointer; color:var(--melo-fg);
}

.melo :focus-visible {
  outline:3px solid var(--melo-focus); outline-offset:3px; border-radius:4px;
  scroll-margin-top:120px; scroll-margin-bottom:130px;
}
.melo__sr {
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --- FDA disclaimer -------------------------------------------------------
   DSHEA requires this verbatim, near the claim, at body-text prominence.
   Never smaller than surrounding body copy, never collapsed, never a link.  */
.melo-dshea {
  font-size:0.875rem;
  line-height:1.5;
  color:var(--melo-fg-2);
  border-top:1px solid var(--melo-hair);
  padding-top:12px;
  margin-top:18px;
  max-width:62ch;
}
.melo-dshea--boxed {
  border:1px solid var(--melo-hair);
  border-radius:8px;
  padding:14px 16px;
  background:var(--melo-surface);
  margin-top:20px;
}

/* --- Sitewide footer disclaimer (C8) --------------------------------------
   0.875rem, NOT the 0.75rem the copyright and policy row uses. A disclaimer
   set smaller than the claim it qualifies is the exact failure FDA and FTC
   call out, so this deliberately does not match the legal row beneath it.
   Colour inherits from the footer's scheme so it stays legible on black —
   do not hardcode an ink here, and do not add opacity.
   Scoped `.melo .melo-fdisc__text` because `.melo p { margin:0 }` is (0,1,1)
   and would silently win otherwise. Same bug as six earlier ones.            */
.melo-fdisc {
  padding-block: 0 20px;
}
/* The rule sits on the INNER, not the paragraph. On the paragraph it inherited
   the 78ch measure and stopped dead halfway across the footer, which reads as a
   broken border rather than a divider. */
.melo-fdisc .melo__inner {
  padding-top:20px;
  border-top:1px solid currentColor;
  /* hairline weight without dimming the sentence itself */
  border-top-color:color-mix(in srgb, currentColor 22%, transparent);
}
.melo .melo-fdisc__text {
  /* 0.8125rem (13px), down from 0.875rem (14px), at Jay's request 18 Sep.
     IT STOPS HERE. The copyright row beneath it is 0.75rem (12px) and this
     must stay ABOVE that: a disclaimer set smaller than, or equal to, the
     boilerplate around it is the exact presentation FDA and FTC call out. It
     is a qualifier on a marketing claim, not legalese. Do not take it to 12px
     to "tidy up the footer". */
  font-size:0.8125rem;
  line-height:1.55;
  /* Full width, edge to edge (Jay, 18 Sep). The 78ch measure that used to sit
     here is better for reading but left the sentence stopping halfway across a
     wide footer while the rule above it ran the whole way. */
  max-width:none;
  margin:0;
}
.melo-fdisc__star {
  font-weight:700;
  margin-right:2px;
}
/* The liver advisory sits directly beneath and has to line up with it, so it
   loses its measure too. Size deliberately left at 0.875rem: this one is a
   SAFETY warning, not the DSHEA disclaimer, and nobody asked for it smaller. */
.melo .melo-liver {
  font-size:0.875rem; line-height:1.5; color:var(--melo-fg-2);
  margin-top:10px; max-width:none;
}
/* ⚠ The measure that actually held the liver text at half width is on the
   `.melo-dshea` WRAPPER, not on `.melo-liver`. Clearing it on the paragraph
   alone did nothing, which is why it still looked capped. Scoped to the footer
   disclaimer: 62ch is the right measure everywhere else the snippet renders
   (the guarantee block, the PDP), so this must not be made global.
   The wrapper's own border-top goes too — with the rule on `.melo__inner`
   already running full width above it, a second shorter rule underneath reads
   as a broken divider rather than a deliberate one. */
.melo-fdisc .melo-dshea {
  max-width:none;
  border-top:0;
  padding-top:0;
}

/* --- announcement -------------------------------------------------------- */
.melo-ann {
  background:var(--melo-acid); color:#000; text-align:center;
  padding:10px 16px; font-size:.8125rem; font-weight:700;
}
.melo-ann a { color:inherit; text-decoration:underline; text-underline-offset:3px; }

/* --- hero ---------------------------------------------------------------- */
.melo-hero { position:relative; overflow:hidden; }
.melo-hero__grid { display:grid; gap:28px; padding:32px 0 40px; }
@media (min-width:990px){
  .melo-hero__grid{ grid-template-columns:1.05fr .95fr; align-items:center; gap:52px; padding:60px 0 68px; }
}
.melo-hero__copy { display:flex; flex-direction:column; gap:14px; }
.melo-hero__rating { display:flex; align-items:center; gap:8px; font-size:.8125rem; color:var(--melo-fg-2); }
.melo-hero__stars { color:var(--melo-accent); letter-spacing:2px; font-size:.875rem; }
.melo-hero__media { display:flex; justify-content:center; }
.melo-hero__media img { max-width:100%; height:auto; display:block; }

/* --- builder ------------------------------------------------------------- */
.melo-builder {
  background:var(--melo-surface); border:1px solid var(--melo-hair);
  border-radius:var(--melo-radius); padding:18px;
  display:flex; flex-direction:column; gap:16px;
}
.melo-builder__step { display:flex; flex-direction:column; gap:9px; }
.melo-builder__legend {
  font-size:.6875rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--melo-fg-3); padding:0;
}
.melo-builder__opts { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
/* Four options go 2x2, not 3 + 1 (Jay, 18 Sep). A lone tile stranded on a
   second row reads as a mistake rather than a layout. This fires on the PDP
   pack sizes and on the homepage size picker, both of which became four-up the
   moment the 36 Pack was added, and it needs no markup change or per-section
   modifier to do it. Browsers without :has() simply keep the old 3 + 1, which
   is what they render today, so there is nothing to fall back from. */
.melo-builder__opts:has(> .melo-opt:nth-child(4)) { grid-template-columns:repeat(2,1fr); }
.melo-builder__opts--4 { grid-template-columns:repeat(2,1fr); }
@media (min-width:560px){ .melo-builder__opts--4{ grid-template-columns:repeat(4,1fr); } }

/* width:100% and border-box are DEFENCE, not decoration. The vendor theme's
   base.css styles bare `label`, and on the live PDP that shrink-wrapped every
   pack tile to its text — two 70px tiles marooned in a 530px column with the
   "Most popular" flag floating in the gap. The local harness does not load
   base.css, so it rendered correctly here and wrongly on the real site. Any
   control that has to fill a grid cell says so explicitly. */
.melo-opt { position:relative; display:block; width:100%; box-sizing:border-box; }
.melo-opt input {
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; opacity:0; cursor:pointer;
}
.melo-opt__face {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:100%; box-sizing:border-box;
  gap:2px; min-height:68px; padding:10px 6px;
  border:1.5px solid var(--melo-hair); border-radius:8px;
  background:var(--melo-bg); text-align:center; pointer-events:none;
}
/* ~ not +: on the homepage the "Most popular" tab sits BETWEEN the input and
   the face, so an adjacent-sibling selector never matched the default 12 Pack
   and it showed no selected state at all. Solid acid, the one site yellow. */
.melo-opt input:checked ~ .melo-opt__face { border-color:#000; border-width:2px; background:var(--melo-acid); }
.melo-opt input:focus-visible ~ .melo-opt__face { outline:3px solid var(--melo-focus); outline-offset:3px; }
.melo-opt input:disabled ~ .melo-opt__face { opacity:.4; }
.melo-opt__name { font-size:.75rem; color:var(--melo-fg-2); }
.melo-opt input:checked ~ .melo-opt__face .melo-opt__name { color:var(--melo-fg); font-weight:700; }
.melo-opt__price { font-size:1rem; font-weight:900; letter-spacing:-.02em; color:var(--melo-fg); }
.melo-opt__each { font-size:.6875rem; color:var(--melo-fg-3); }
.melo-opt__flag {
  position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  background:#000; color:var(--melo-acid);
  font-size:.5625rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  padding:3px 8px; border-radius:3px; white-space:nowrap; z-index:1;
}
.melo-opt__swatch { width:12px; height:12px; border-radius:3px; display:block; flex:none; border:1px solid rgba(0,0,0,.15); }
.melo-opt__face--row { flex-direction:row; min-height:50px; gap:7px; }

.melo-builder__total {
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  font-size:.8125rem; color:var(--melo-fg-2);
}
.melo-builder__total strong { font-size:1.3rem; font-weight:900; color:var(--melo-fg); letter-spacing:-.02em; }
.melo-builder__note { font-size:.75rem; color:var(--melo-fg-3); text-align:center; }
.melo-builder__err { font-size:.8125rem; color:#A8322A; min-height:1.2em; }

/* --- trust strip --------------------------------------------------------- */
.melo-trust {
  border-block:1px solid var(--melo-hair);
  /* defaults to 0 — this band is meant to sit tight against the hero, but the
     editor can push it apart like any other section. */
  /* MARGIN, not padding (21 Sep). The band's rules are borders on this
     element, so padding pushed the text away from its own lines instead of
     pushing the band away from the section above. "Space above" now means
     space outside the band, which is what the slider says. */
  margin-top:    calc(var(--melo-pad-top, 0px) * 0.65);
  margin-bottom: calc(var(--melo-pad-bottom, 0px) * 0.65);
}
@media (min-width:750px){
  .melo-trust{ margin-top:var(--melo-pad-top, 0px); margin-bottom:var(--melo-pad-bottom, 0px); }
}
.melo-trust__list { display:flex; margin:0; padding:0; list-style:none; overflow-x:auto; scrollbar-width:none; }
.melo-trust__list::-webkit-scrollbar { display:none; }
.melo-trust__list li {
  flex:1 0 auto; padding:15px 18px; font-size:.75rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  text-align:center; color:var(--melo-fg-2); border-right:1px solid var(--melo-hair-2);
}
.melo-trust__list li:last-child { border-right:0; }

/* On a phone the four items were 901px of content in a 350px viewport, scrolling
   horizontally with no affordance — items 3 and 4 were simply never seen, and
   57% of sessions are Meta on mobile. 2x2 grid with the type stepped down keeps
   the band compact (67px) and shows everything. */
@media (max-width:749px){
  /* The top and bottom rules sit on .melo-trust, which is full width. The
     internal dividers sat on the <li>s inside .melo__inner, so they stopped
     one gutter short at each end and the band read as broken. Pulling the
     list out through the gutter makes all four rules meet the screen edge.
     The cells keep their own padding, so the text does not touch the edge. */
  .melo-trust__list{
    display:grid; grid-template-columns:1fr 1fr; overflow:visible;
    margin-inline: calc(var(--melo-gut) * -1);
    width: calc(100% + (var(--melo-gut) * 2));
  }
  .melo-trust__list li{
    font-size:.5625rem; letter-spacing:.07em; padding:11px 8px;
    text-align:center; border-right:1px solid var(--melo-hair);
  }
  .melo-trust__list li:nth-child(2n){ border-right:0; }
  .melo-trust__list li:nth-child(-n+2){ border-bottom:1px solid var(--melo-hair); }
}

/* --- retail wall --------------------------------------------------------- */
.melo-retail { text-align:center; }
.melo-retail__label {
  font-size:.6875rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--melo-fg-3); margin-bottom:24px;
}
.melo-retail__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px 18px; align-items:center; }
@media (min-width:750px){ .melo-retail__grid{ grid-template-columns:repeat(6,1fr); } }
.melo-retail__grid img { max-width:100%; height:auto; max-height:40px; width:auto; margin:0 auto; display:block; }
.melo-retail__name { font-size:.8125rem; font-weight:700; color:var(--melo-fg-2); }

/* --- feel ---------------------------------------------------------------- */
.melo-feel__grid { display:grid; gap:12px; margin-top:28px; }
@media (min-width:750px){ .melo-feel__grid{ grid-template-columns:repeat(3,1fr); gap:16px; } }
.melo-feel__card {
  background:var(--melo-surface); border:1px solid var(--melo-hair);
  border-radius:var(--melo-radius); padding:22px;
  display:flex; flex-direction:column; gap:8px;
}
.melo-feel__when { font-size:.6875rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--melo-accent); }
.melo-feel__card p { font-size:.9375rem; line-height:1.55; color:var(--melo-fg-2); }

/* Timeline layout. The timing IS the answer to "will I actually feel anything",
   so it is set as the largest thing in the step rather than an 11px label.
   The rail is drawn with ::before / ::after on each step so there is no extra
   markup and nothing for a screen reader to announce — the list is an <ol>,
   which carries the sequence semantically. */
.melo-feel__tl { list-style:none; margin:34px 0 0; padding:0; display:grid; gap:0; }
.melo-feel__step { position:relative; }
.melo-feel__mark {
  display:block; font-weight:900; letter-spacing:-.035em; line-height:1;
  font-size:clamp(1.75rem,4vw,2.6rem); color:var(--melo-fg);
}
.melo-feel__unit {
  display:block; font-size:.6875rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--melo-fg-3); margin-top:7px;
}
.melo-feel__step h3 { margin:16px 0 6px; font-size:1.125rem; }
.melo .melo-feel__step p {
  font-size:.9375rem; line-height:1.55; color:var(--melo-fg-2); margin:0; max-width:34ch;
}
@media (min-width:750px){
  .melo-feel__tl { grid-template-columns:repeat(3,1fr); gap:34px; }
  .melo-feel__step { padding-top:26px; }
  .melo-feel__step::before {
    content:""; position:absolute; top:0; left:0; right:-34px; height:1px; background:var(--melo-hair);
  }
  .melo-feel__step:last-child::before { right:0; }
  .melo-feel__step::after {
    content:""; position:absolute; top:-4px; left:0; width:9px; height:9px;
    border-radius:50%; background:var(--melo-fg);
  }
}
@media (max-width:749px){
  .melo-feel__step { padding:0 0 26px 26px; }
  .melo-feel__step::before {
    content:""; position:absolute; left:4px; top:8px; bottom:0; width:1px; background:var(--melo-hair);
  }
  .melo-feel__step:last-child::before { display:none; }
  .melo-feel__step::after {
    content:""; position:absolute; left:0; top:6px; width:9px; height:9px;
    border-radius:50%; background:var(--melo-fg);
  }
}

/* --- product cards ------------------------------------------------------- */
.melo-range__grid { display:grid; gap:14px; margin-top:28px; }
@media (min-width:750px){ .melo-range__grid{ grid-template-columns:repeat(2,1fr); gap:18px; } }
/* Four products (3 flavors + variety pack) — 3-up leaves an orphan card. */
@media (min-width:1000px){ .melo-range__grid{ grid-template-columns:repeat(4,1fr); gap:16px; } }
.melo-card { border:1px solid var(--melo-hair); border-radius:var(--melo-radius); overflow:hidden; display:flex; flex-direction:column; background:var(--melo-bg); }
/* aspect-ratio alone loses to the image's intrinsic height here, so the four
   cards ended up different heights and the titles did not line up across the
   row. Force the square and let object-fit do the cropping. */
.melo-card__media { aspect-ratio:1/1; overflow:hidden; background:var(--melo-surface); }
.melo-card__media img { width:100%; height:100%; object-fit:cover; display:block; }
.melo-card__body { padding:18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.melo-card__title { font-size:1.0625rem; font-weight:900; letter-spacing:-.02em; }
.melo-card__meta { display:flex; align-items:center; gap:8px; font-size:.8125rem; color:var(--melo-fg-2); }
.melo-card__price { font-size:1.125rem; font-weight:900; letter-spacing:-.02em; color:var(--melo-fg); }
.melo-card__each { font-size:.75rem; color:var(--melo-fg-3); }
/* Acid on white is 1.12:1 — invisible. Stars are ink, never brand acid. */
.melo-card__star { color:var(--melo-fg); }

/* Title and rating share a line so the card stays compact and the price sits
   at a consistent height across the row. */
.melo-card__head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.melo-card__rate { font-size:.75rem; color:var(--melo-fg-3); white-space:nowrap; }
.melo-card { position:relative; }
/* Outer ring, not an inset one. Inset + border doubled up against the card's
   overflow:hidden and read as a heavy bar along the bottom edge. */
.melo-card--flag { border-color:var(--melo-fg); box-shadow:0 0 0 1px var(--melo-fg); }
.melo-card__flag {
  position:absolute; top:12px; left:12px; z-index:1;
  background:#000; color:var(--melo-acid);
  font-size:.5625rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  padding:4px 9px; border-radius:3px; white-space:nowrap;
}
/* .melo-atf__offerwrap sets `margin:0 auto 26px` further down the file, and the
   shorthand zeroes margin-top. Scoped so this wins wherever it sits. */
.melo .melo-range__sub { margin:48px auto 0; }

/* Four full-width cards made this a ~2,900px scroll on a phone. Two-up brings
   it under 1,000px with the same content. */
@media (max-width:749px){
  .melo-range__grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .melo-card__body { padding:14px; gap:6px; }
  .melo-card__title { font-size:.9375rem; }
  .melo-card__head { display:block; }
  .melo-card__rate { display:block; margin-top:3px; }
  .melo-card__price { font-size:1rem; }
  .melo-card__meta { flex-wrap:wrap; gap:4px; }
  .melo-card__flag { top:8px; left:8px; }
}
.melo-card form { margin-top:auto; }

/* --- comparison ---------------------------------------------------------- */
.melo-compare__scroll { overflow-x:auto; margin-top:28px; -webkit-overflow-scrolling:touch; }
.melo-compare table { border-collapse:collapse; width:100%; min-width:520px; font-size:.875rem; }
.melo-compare th,.melo-compare td { padding:13px 14px; text-align:left; border-bottom:1px solid var(--melo-hair); }
.melo-compare thead th { font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--melo-fg-3); font-weight:700; }
.melo-compare thead th:first-child { width:34%; text-align:left; }
/* Equal thirds for the comparison columns so Melo is not visually favoured by
   being wider — the acid tint is doing that job already. */
.melo-compare thead th:not(:first-child),
.melo-compare tbody td { width:22%; }
/* Every cell but the row label is centred. This used to be `td + td`, which
   skipped the FIRST data cell — so the Melo column sat left-aligned while the
   others were centred. */
.melo-compare tbody td, .melo-compare thead th + th { text-align:center; }
.melo-compare tbody th { text-align:left; }
/* SAME acid as the Subscribe & Save button (Jay, 18 Sep). This was
   rgba(235,252,114,.32) — acid at 32% on white, which read as a different,
   paler yellow than the button two sections up. Black on full acid is 18.7:1,
   so the column is still comfortably legible. */
.melo-compare .is-melo { background:var(--melo-acid); font-weight:800; color:#0A0A0A; }
.melo-compare tbody th { font-weight:500; color:var(--melo-fg-2); }
.melo-compare tbody tr:last-child th,.melo-compare tbody tr:last-child td { border-bottom:0; }
.melo .melo-compare__lede { margin:12px 0 0; max-width:52ch; }
.melo .melo-compare__note { margin:14px 0 0; font-size:.75rem; color:var(--melo-fg-3); }
/* Logo sits in the header cell in place of the word. Height is driven by the
   `height` attribute so the section setting controls it; width follows. */
.melo-compare__logo { display:block; margin:0 auto; width:auto; max-width:100%; }
/* Ticks and crosses. Brand lime and the error red are both too light as-is on
   white, so these are the darkened inks: 6.8:1 and 5.9:1. The icon itself is
   aria-hidden — the yes/no is in a visually hidden span next to it. */
.melo-compare__yes { color:#1F6B39; font-size:1.15rem; line-height:1; font-weight:700; }
.melo-compare__no  { color:#B3261E; font-size:1.05rem; line-height:1; font-weight:700; }

/* With three comparison columns the 520px min-width pushed everything but the
   Melo column off a phone screen — the same hidden-horizontal-scroll failure as
   the trust strip, and here it hides the entire point of the section. Drop the
   min-width on mobile and tighten the type so all columns fit at 350px. */
@media (max-width:749px){
  .melo-compare table { min-width:0; font-size:.75rem; }
  .melo-compare th, .melo-compare td { padding:10px 5px; }
  .melo-compare thead th { font-size:.5625rem; letter-spacing:.05em; }
  .melo-compare thead th:first-child { width:24%; }
  .melo-compare tbody th { font-size:.75rem; }
}
/* With only two columns the table stops needing to scroll, so let it breathe. */
.melo-compare table.is-narrow { min-width:0; }

/* --- video --------------------------------------------------------------- */
.melo-video__grid { display:grid; gap:12px; margin-top:28px; grid-template-columns:repeat(2,1fr); }
@media (min-width:750px){ .melo-video__grid{ grid-template-columns:repeat(4,1fr); gap:16px; } }
.melo-video__item {
  aspect-ratio:9/16; border-radius:var(--melo-radius); overflow:hidden;
  background:var(--melo-surface); border:1px solid var(--melo-hair); position:relative;
}
.melo-video__item video { width:100%; height:100%; object-fit:cover; display:block; }
.melo-video__ph { position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:16px; font-size:.75rem; color:var(--melo-fg-3); line-height:1.4; }

/* --- reviews ------------------------------------------------------------- */
.melo-reviews__summary { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 18px; margin-top:20px; text-align:center; }
.melo-reviews__score { font-size:2.75rem; font-weight:900; letter-spacing:-.03em; line-height:1; }
.melo-reviews__stars { color:var(--melo-accent); font-size:1.25rem; letter-spacing:3px; }
.melo-reviews__count { font-size:.875rem; color:var(--melo-fg-2); }
.melo .melo-reviews__gate {
  margin-top:22px; padding:16px 18px; border:1px dashed var(--melo-hair);
  border-radius:var(--melo-radius); font-size:.8125rem; color:var(--melo-fg-3);
  text-align:center; line-height:1.5;
}

/* --- guarantee ----------------------------------------------------------- */
.melo-guarantee { text-align:center; }
.melo-guarantee h2 { max-width:18ch; margin:0 auto; }
.melo-guarantee p { max-width:46ch; margin:14px auto 0; font-size:1rem; line-height:1.55; color:var(--melo-fg-2); }
.melo-guarantee .melo-dshea { margin-left:auto; margin-right:auto; text-align:left; }

/* --- two-column ---------------------------------------------------------- */
.melo-locator__grid { display:grid; gap:22px; align-items:center; }
@media (min-width:750px){ .melo-locator__grid{ grid-template-columns:1fr 1fr; gap:44px; } }
.melo-locator__cta { max-width:320px; margin-top:20px; }
.melo .melo-locator__body { margin:14px 0 0; max-width:44ch; }
/* No image: centre the whole block rather than stranding it left. */
.melo-locator--centred { text-align:center; }
.melo-locator--centred .melo-locator__body { margin-left:auto; margin-right:auto; }
.melo-locator--centred .melo-locator__cta { margin-left:auto; margin-right:auto; }
.melo-reviews__app { margin-top:30px; }
.melo-kava__img { width:100%; height:auto; border-radius:10px; display:block; }
.melo .melo-kava__cta { margin:22px 0 0; }
/* Journal link at the foot of a section. Text link weight so it never reads as
   a competing call to action. */
/* The section-level "read more" link, used by range, feel and compare. Centred
   (Jay, 18 Sep): all three sit under a centred heading, and a lone left-aligned
   link under centred content reads as a stray. Scoped `.melo` prefix because
   `.melo p { margin:0 }` is (0,1,1) and outranks a bare class. */
.melo .melo-sec__more { margin:24px 0 0; text-align:center; }
.melo-kava__cta .melo__btn { width:auto; display:inline-flex; }

/* --- FAQ ----------------------------------------------------------------- */
.melo-faq__list { margin-top:26px; border-top:1px solid var(--melo-hair); }
.melo-faq details { border-bottom:1px solid var(--melo-hair); }
.melo-faq summary {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:58px; padding:15px 0; cursor:pointer;
  font-size:1rem; font-weight:700; letter-spacing:-.015em; list-style:none;
}
.melo-faq summary::-webkit-details-marker { display:none; }
.melo-faq summary::after { content:"+"; font-size:1.375rem; font-weight:400; line-height:1; flex:none; color:var(--melo-accent); }
.melo-faq details[open] summary::after { content:"\2212"; }
.melo-faq__answer { padding:0 0 20px; font-size:.9375rem; line-height:1.6; color:var(--melo-fg-2); max-width:64ch; }

/* --- email --------------------------------------------------------------- */
.melo-email { text-align:center; }

/* --- email capture: optional copy + photo split -------------------------- */
/* Single column by default, so a section with no photo is untouched. */
.melo-email__grid { display:grid; gap:28px; }
.melo .melo-email__body { margin:12px auto 0; max-width:44ch; }
.melo .melo-email__fine { margin-top:10px; }

.melo-email__media { border-radius:12px; overflow:hidden; background:var(--melo-surface); }
.melo-email__media img { display:block; width:100%; height:100%; object-fit:cover; }
/* aspect-ratio lives on the WRAPPER, not the img: the img carries its own
   intrinsic width/height so the browser reserves space before load, and an
   aspect-ratio on the same element would fight those attributes. */
.melo-email__media--portrait  { aspect-ratio: 4 / 5; }
.melo-email__media--square    { aspect-ratio: 1 / 1; }
.melo-email__media--landscape { aspect-ratio: 3 / 2; }

/* Phone: photo always AFTER the form, whichever side is chosen on desktop.
   A tall photo above the field would push the only interactive thing in this
   section below the fold. */
.melo-email--split .melo-email__media { order:2; }
.melo-email--split .melo-email__copy  { order:1; }

@media (min-width:750px){
  .melo-email--split .melo-email__grid {
    grid-template-columns: 1fr 1fr;
    gap:48px;
    align-items:center;
  }
  /* Centred copy beside a photograph reads as a mistake, and a centred label
     above a left-aligned input is worse. Un-centre only in split mode. */
  .melo-email--split .melo-email__copy { text-align:left; }
  .melo-email--split .melo-email__copy .melo-email__body { margin-inline:0; }
  /* .melo-email__form carries `margin:22px auto 0` to centre itself in the
     single-column layout. auto side margins have to go, or the form floats in
     the middle of its half. Same for .melo-builder__note, which sets its own
     text-align:center and so is not fixed by un-centring the parent. */
  .melo-email--split .melo-email__copy .melo-email__form { margin-inline:0; }
  .melo-email--split .melo-email__copy .melo-email__fine { text-align:left; }
  .melo-email--left .melo-email__media { order:1; }
  .melo-email--left .melo-email__copy  { order:2; }
}
.melo-email__form { display:flex; flex-direction:column; gap:10px; max-width:440px; margin:22px auto 0; }
@media (min-width:560px){ .melo-email__form{ flex-direction:row; } }
.melo-email__field { flex:1; text-align:left; }
.melo-email__field label { display:block; font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; color:var(--melo-fg-3); }
.melo-email input[type="email"] {
  width:100%; min-height:52px; padding:12px 14px;
  border:1.5px solid var(--melo-hair); border-radius:8px;
  background:var(--melo-bg); color:var(--melo-fg); font-family:inherit; font-size:1rem;
}
.melo-email input[type="email"]::placeholder { color:var(--melo-fg-3); }
.melo-email__form .melo__btn { width:auto; align-self:flex-end; padding-inline:26px; }
.melo .melo-email__msg { font-size:.8125rem; margin-top:10px; min-height:1.2em; }

/* --- cans (placeholders until photography lands) ------------------------- */
.melo-can {
  width:46px; height:104px; border-radius:5px/7px; position:relative; flex:none;
  display:grid; place-items:center;
  box-shadow:inset -7px 0 12px -7px rgba(0,0,0,.45), inset 6px 0 10px -7px rgba(255,255,255,.55);
}
.melo-can::before,.melo-can::after { content:""; position:absolute; left:3px; right:3px; height:5px; border-radius:3px; background:rgba(0,0,0,.22); }
.melo-can::before{ top:3px; } .melo-can::after{ bottom:3px; }
.melo-can span { font-weight:900; font-size:.625rem; letter-spacing:-.04em; color:#000; transform:rotate(-90deg); white-space:nowrap; }
.melo-can--pog{ background:var(--melo-pog); } .melo-can--banana{ background:var(--melo-banana); } .melo-can--lime{ background:var(--melo-lime); }
.melo-cans { display:flex; gap:10px; align-items:flex-end; justify-content:center; }

/* ==========================================================================
   PDP
   ========================================================================== */
.melo-pdp__grid { display:grid; gap:26px; padding:24px 0 44px; }
@media (min-width:990px){
  .melo-pdp__grid{ grid-template-columns:1.05fr .95fr; gap:52px; align-items:start; padding:36px 0 60px; }
  .melo-pdp__buybox{ position:sticky; top:24px; }
}
.melo-gallery__main { border-radius:var(--melo-radius); overflow:hidden; background:var(--melo-surface); aspect-ratio:1/1; display:grid; place-items:center; padding:22px; }
.melo-gallery__main img { max-width:100%; max-height:100%; height:auto; display:block; }
.melo-gallery__thumbs { display:flex; gap:8px; margin-top:10px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.melo-gallery__thumbs::-webkit-scrollbar { display:none; }
.melo-gallery__thumb {
  flex:none; width:62px; height:62px; min-width:44px; min-height:44px;
  border:1.5px solid var(--melo-hair); border-radius:7px;
  background:var(--melo-surface); padding:5px; cursor:pointer; display:grid; place-items:center;
}
.melo-gallery__thumb[aria-current="true"] { border-color:#000; border-width:2px; }
.melo-gallery__thumb img { max-width:100%; max-height:100%; height:auto; display:block; }

.melo-flavours { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.melo-flavours a {
  flex:1 1 0; min-width:92px; min-height:48px;
  display:flex; align-items:center; justify-content:center; gap:7px;
  border:1.5px solid var(--melo-hair); border-radius:8px; padding:8px 10px;
  font-size:.8125rem; font-weight:700; color:var(--melo-fg-2); text-decoration:none;
}
.melo-flavours a[aria-current="page"] { border-color:#000; border-width:2px; color:var(--melo-fg); background:var(--melo-acid); }
.melo-flavours i { width:11px; height:11px; border-radius:3px; display:block; flex:none; border:1px solid rgba(0,0,0,.15); }
/* Product thumbnail in the flavor switcher. Sized to read as a can rather than
   an icon, on a tinted ground so a transparent PNG does not float. */
.melo-flavours__thumb {
  width:34px; height:34px; flex:none; display:block;
  object-fit:contain; border-radius:6px; background:var(--melo-surface);
}
.melo-flavours a { padding-block:6px; }
/* NO white-space:nowrap here. It was tried and it pushed the whole page into
   horizontal scroll at 390px, because "Passionfruit Orange Guava" on one line
   is wider than the phone. The four-line chip this was meant to fix was the
   Variety Pack's untrimmed title, and that is fixed in Liquid where it belongs.
   Two lines on the longest flavor name is fine; a sideways-scrolling page is
   not. */

/* The buy column runs far longer than the gallery, so on desktop the left side
   emptied out for a thousand pixels while the shopper read specs. Sticky keeps
   the product in view the whole way down, which is the one image they are
   deciding on. Desktop only — on a phone the gallery is above the fold anyway
   and a sticky block would eat the viewport. */
@media (min-width:990px){
  .melo-pdp__media{
    position:sticky;
    /* ONE number drives both the gap under the menu and where the sticky
       gallery parks, so they can never disagree. It is a slider on the
       section, because guessing a header height twice is what put the flavour
       chips under the nav. */
    /* --header-height is kept up to date by the vendor header.js. The menu is
       no longer transparent over the PDP, so the gallery parks below it. */
    top: calc(var(--header-height, 72px) + var(--melo-pdp-top, 40px));
    align-self:start;
  }
}

/* --- PDP buy box ---------------------------------------------------------- */
.melo-pdp__grid { padding-top: var(--melo-pdp-top, 40px); }

/* Google Pay renders inside Shopify's own button element, which ships square.
   Match it to .melo__btn so the two stacked buttons read as a pair. */
.melo-express .shopify-payment-button__button,
.melo-express shopify-accelerated-checkout,
.melo-express shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-border-radius: 8px;
  border-radius: 8px;
  overflow: hidden;
}
.melo-express .shopify-payment-button__button--unbranded { border-radius:8px; }

/* Subscribe is DISABLED, not hidden, on sizes with no plan — the reason line
   sits under the pair. */
.melo .melo-buy__why { margin:8px 0 0; font-size:.75rem; color:var(--melo-fg-3); }
.melo-buy .melo-opt input:disabled ~ .melo-opt__face { opacity:.45; }
.melo-plans__app { margin-top:12px; }

.melo-pdp__title { font-size:clamp(1.5rem,5.5vw,2.2rem); font-weight:900; letter-spacing:-.035em; }
.melo .melo-pdp__ratingline { display:flex; align-items:center; gap:8px; font-size:.875rem; color:var(--melo-fg-2); margin-top:8px; }
.melo-pdp__ratingline a { color:inherit; }
.melo .melo-pdp__priceline { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top:10px; }
.melo-pdp__price { font-size:1.5rem; font-weight:900; letter-spacing:-.03em; }
.melo-pdp__each { font-size:.8125rem; color:var(--melo-fg-3); }
.melo-pdp__compare { font-size:1rem; color:var(--melo-fg-3); text-decoration:line-through; }

.melo-buy { display:grid; gap:8px; grid-template-columns:1fr 1fr; }
/* Centred (Jay, 19 Sep) — these read as two buttons, and left-aligned text in
   a centred pair looks like a mistake. Subscribe sits first in the markup. */
.melo-buy .melo-opt__face { min-height:78px; align-items:center; text-align:center; padding:12px; }
.melo-buy__label { font-size:.875rem; font-weight:800; color:var(--melo-fg); }
.melo-buy__detail { font-size:.6875rem; color:var(--melo-fg-3); line-height:1.35; }

.melo-plans { margin-top:10px; }
.melo-plans select {
  width:100%; min-height:48px; padding:10px 12px;
  background:var(--melo-bg); color:var(--melo-fg);
  border:1.5px solid var(--melo-hair); border-radius:8px;
  font-family:inherit; font-size:.9375rem;
}
.melo-plans label { display:block; font-size:.6875rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--melo-fg-3); margin-bottom:6px; }

/* Express checkout region. See melo-pdp.liquid — Melo currently has NO
   digital wallets available, so this region normally renders nothing.
   Kept so it lights up automatically if a wallet is ever restored. */
.melo-express { margin-top:10px; }
.melo .melo-express__hint { text-align:center; font-size:.75rem; color:var(--melo-fg-3); margin-top:8px; }
.melo-express .shopify-payment-button__button { border-radius:8px!important; min-height:52px; }

.melo-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:20px; }
.melo-facts > div { background:var(--melo-surface); border-radius:8px; padding:13px 8px; text-align:center; }
.melo-facts .v { font-size:.9375rem; font-weight:900; letter-spacing:-.02em; }
.melo-facts .k { font-size:.6875rem; color:var(--melo-fg-3); margin-top:3px; line-height:1.3; }

.melo-sticky {
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:var(--melo-bg); border-top:1px solid var(--melo-hair);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  display:none; box-shadow:0 -6px 24px -12px rgba(0,0,0,.25);
}
.melo-sticky.is-on { display:block; }
@media (min-width:990px){ .melo-sticky{ display:none!important; } }
.melo-sticky .melo__btn { min-height:50px; }

@media (prefers-reduced-motion:reduce){
  .melo *,.melo *::before,.melo *::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
}


/* ==========================================================================
   Above-the-fold hero — approved 4 Sep 2026 (Option B + rating on mobile)

   NOTE ON SPECIFICITY: `.melo p { margin:0 }` above is (0,1,1) and outranks a
   bare class, so every paragraph rule here is scoped `.melo .melo-atf__x`.
   Dropping that prefix silently kills the spacing — it cost an hour once.
   ========================================================================== */
.melo-atf{
  padding-top:    calc(var(--melo-pad-top, 48px) * 0.65);
  padding-bottom: calc(var(--melo-pad-bottom, 60px) * 0.65);
}
@media (min-width:750px){
  .melo-atf{ padding-top:var(--melo-pad-top, 48px); padding-bottom:var(--melo-pad-bottom, 60px); }
}
.melo-atf__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,600px);
  gap:56px; align-items:stretch;
}
.melo-atf__copy .melo__kicker{ margin:0 0 22px; }
.melo-atf__copy h1{ font-size:clamp(2.1rem,4.3vw,3.25rem); line-height:1.12; margin-bottom:24px; }
.melo .melo-atf__lede{ font-size:1.125rem; line-height:1.42; color:var(--melo-fg-2); max-width:42ch; margin:0 0 30px; }
.melo .melo-atf__proof{
  display:flex; align-items:center; gap:11px; font-size:1.0625rem; line-height:1.6;
  color:var(--melo-fg-2); margin:17px 0 22px; font-weight:700;
}
.melo-atf__stars{ color:var(--melo-fg); letter-spacing:2px; font-size:1.125rem; }
.melo-atf__ticks{
  list-style:none; margin:0 0 32px; padding:0;
  display:grid; grid-template-columns:max-content max-content; gap:9px 34px; justify-content:start;
}
.melo-atf__ticks li{
  display:flex; align-items:center; gap:9px; font-size:.9375rem; line-height:1.6;
  color:var(--melo-fg-2); white-space:nowrap;
}
.melo-atf__tick{
  width:18px; height:18px; flex:0 0 18px; border-radius:50%;
  background:var(--melo-fg); color:var(--melo-bg); font-size:10px;
  display:grid; place-items:center;
}
.melo-atf__trial{
  border:1px solid var(--melo-hair); border-left:4px solid var(--melo-fg);
  border-radius:8px; padding:15px 18px; max-width:40ch;
}
.melo .melo-atf__trial p{ margin:0; font-size:.9375rem; line-height:1.65; color:var(--melo-fg-2); }
.melo-atf__trial a{ color:var(--melo-fg); font-weight:600; }

/* Desktop: the photograph matches the COPY column exactly — image top level
   with the kicker, image bottom level with the trial box.
   The grid stretches rather than centring, and the image is taken OUT OF FLOW
   (absolute, inset:0) so it contributes no intrinsic height. That matters: left
   in flow, a tall source image sets the row height and stretches the copy
   instead, which is the wrong way round. min-height is the floor for the day
   someone shortens the copy. Mobile keeps a fixed 4/3 crop. */
.melo-atf__media{ display:flex; min-height:0; }
.melo-atf__cans{
  flex:1; position:relative; min-height:360px;
  border-radius:14px; overflow:hidden; background:var(--melo-surface);
}
.melo-atf__cans img{
  position:absolute; inset:0; display:block;
  width:100%; height:100%; object-fit:cover;
}
@media (max-width:989px){
  .melo-atf__media{ display:block; }
  .melo-atf__cans{ position:static; min-height:0; }
  .melo-atf__cans img{ position:static; height:auto; aspect-ratio:4/3; }
}

.melo-atf__panel{
  border:1px solid var(--melo-hair); border-radius:14px;
  padding:26px 30px; max-width:880px;
  /* 44px -> 72px (Jay, 17 Sep). The buy panel was crowding the trial box above
     it, so the hero read as one dense block instead of "here is the pitch,
     here is the purchase". */
  margin:72px auto 0;
}
/* Subscribe & Save deep-links to the PDP with the selling plan preselected.
   A button-shaped LINK, not a <button>: it navigates, and a button that
   navigates breaks middle-click, open-in-new-tab and the screen-reader link
   list. Inside a <form> a real button would also need type="button".
   Black on acid is 18.7:1 — the one place acid is legible as a ground.
   The offer detail sits UNDER the button as plain text, so the button carries
   one short verb instead of a sentence. */
.melo-atf__offerwrap{ text-align:center; margin:0 auto 26px; max-width:100%; }
.melo-atf__offer{
  display:inline-block; background:var(--melo-acid); color:#000;
  font:800 15px/1.2 inherit; letter-spacing:-0.005em;
  /* 2px, not 1px (Jay, 18 Sep). Padding drops by 1px on each axis so the pill
     stays exactly the same size it was and the acid fill does not grow. */
  padding:11px 25px; border:2px solid #000; border-radius:8px;
  text-decoration:none; cursor:pointer;
  transition:background-color .12s ease, color .12s ease;
}
.melo-atf__offer:hover,
.melo-atf__offer:focus-visible{ background:#000; color:var(--melo-acid); }
.melo .melo-atf__offernote{
  margin:9px auto 0; max-width:54ch;
  font-size:.8125rem; line-height:1.45; color:var(--melo-fg-2);
  text-wrap:balance;
}
@media (max-width:620px){
  .melo-atf__offer{ font-size:14px; padding:11px 22px; }
  .melo .melo-atf__offernote{ font-size:.78125rem; }
}
}
}
.melo-atf__panelgrid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:34px; align-items:stretch;
}
.melo-atf__panelgrid > fieldset{ display:flex; flex-direction:column; border:0; padding:0; margin:0; }
.melo-atf__panelgrid .melo-builder__opts,
.melo-atf__panelgrid .melo-atf__flavors{ flex:1; }
.melo-atf__panelgrid .melo-opt{ display:flex; flex-direction:column; }
.melo-atf__panelgrid .melo-opt__face{ flex:1; width:100%; display:flex; flex-direction:column; justify-content:center; }
.melo-atf__panelgrid .melo-atf__flav{ display:flex; }
.melo-atf__panel .melo-builder__step{ margin:0 0 24px; }
.melo-atf__panelgrid > .melo-builder__step:last-child{ margin-bottom:0; }  /* the buy row's own margin is the gap */
.melo-atf__panel .melo-builder__legend{ font-size:.6875rem; letter-spacing:.13em; line-height:1.6; margin-bottom:16px; display:block; }
.melo-atf__panel .melo-opt__flag{ top:-11px; }

/* Shipping note sits OUTSIDE the bordered face, under each size */
.melo-opt__ship{
  display:block; font-size:.6875rem; line-height:1.5;
  color:var(--melo-fg-3); margin-top:7px; text-align:center;
}

.melo-atf__flavors{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.melo-atf__flav{ position:relative; margin:0; }
.melo-atf__flav input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.melo-atf__flav .face{
  /* 1px when unpicked, a bold 3px-looking edge when picked. The bold state is
     an inset box-shadow rather than a wider border so nothing shifts on select,
     matching how the size picker reads. */
  display:block; width:100%; height:100%; border:1px solid var(--melo-hair);
  border-radius:10px; padding:11px 7px 10px; text-align:center;
  transition:border-color .12s ease, box-shadow .12s ease;
}
/* Squarer than it was (78px of a full-width tile was a letterbox strip and you
   could barely see the can). object-position sits high so the crop keeps the
   label rather than the base of the can. */
.melo-atf__flav img,
.melo-atf__flav .shot{
  display:block; width:100%; aspect-ratio:1/1; height:auto; max-height:150px;
  object-fit:cover; object-position:center 30%;
  border-radius:6px; margin-bottom:9px; background:var(--melo-surface);
}
.melo-atf__flav .nm{ display:block; font-size:.75rem; line-height:1.4; color:var(--melo-fg-2); min-height:2.8em; }
.melo-atf__flav input:checked + .face{
  border-color:var(--melo-fg); background:var(--melo-acid);
  box-shadow:inset 0 0 0 2px var(--melo-fg);
}
.melo-atf__flav input:checked + .face .nm{ font-weight:700; color:var(--melo-fg); }
.melo-atf__flav input:focus-visible + .face{ outline:3px solid var(--melo-focus); outline-offset:3px; }

.melo-atf__buy{
  /* No rule above the buy row (Jay, 19 Sep). The gap does the separating; the
     hairline was reading as a divider between the flavour picker and its own
     buttons, which are one step, not two. */
  margin-top:12px; padding-top:10px;   /* was 26 + 22 (Jay, 21 Sep: too big) */
}
/* Subscribe & Save left, Add to cart right, one line (Jay, 18 Sep).
   FLEX, not grid, and that is the point: the offer is hidden outright when the
   variant resolves no selling plan. A hidden grid item still leaves its column
   standing, so Add to cart would sit in a half-width box next to a hole. As a
   flex item it is removed from flow and the button simply takes the row. */
.melo-atf__buyrow{
  /* flex-start, not stretch: the left column is taller (pill + note) and the
     button must stay 52px and level with the pill, not grow to match. */
  display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start;
}
/* `.melo-atf__offerwrap` is shared with the range section, so every override
   here is scoped to the buy row and leaves that one alone. */
/* Equal halves (Jay, 18 Sep). `flex:1 1 0` with `min-width:0` makes both
   columns exactly half the row regardless of their content width — `flex:1`
   alone leaves the basis at auto and the wider label wins. The wrapper is a
   COLUMN so the note stacks under the pill. */
.melo-atf__buyrow .melo-atf__offerwrap{
  display:flex; flex-direction:column; margin:0;
  flex:1 1 0; min-width:0; max-width:100%; text-align:center;
}
/* ⚠ REQUIRED. `[hidden]{display:none}` is a UA rule at (0,1,0); the class
   selector above is (0,2,0) and beats it, so without this the offer would stay
   visible after the JS sets .hidden = true, linking to a plan that isn't there.
   Do not delete this rule. */
.melo-atf__buyrow .melo-atf__offerwrap[hidden]{ display:none; }
/* Match the 52px button height exactly so the two read as one row. */
.melo-atf__buyrow .melo-atf__offer{
  display:inline-flex; align-items:center; min-height:52px;
}
.melo-atf__buycta{ flex:1 1 0; min-width:0; }
.melo-atf__buycta .melo__btn{ width:100%; }
/* The pill is full width of its half and the note sits beneath it, so the
   note's own centring margin and 54ch cap are not wanted here. */
.melo-atf__buyrow .melo-atf__offer{ width:100%; justify-content:center; }
.melo-atf__buyrow .melo-atf__offernote{ margin:9px 0 0; max-width:none; }
@media (max-width:749px){
  /* Stack, and give Add to cart the top slot — it is the primary action.
     align-items MUST go back to stretch here. In a column flex container the
     cross axis is the width, and the flex-start above was leaving Add to cart
     shrink-wrapped to its label (188px against the offer's full 291px) instead
     of filling the phone. */
  .melo-atf__buyrow{ flex-direction:column-reverse; align-items:stretch; }
  .melo-atf__buyrow .melo-atf__offerwrap{ flex:1 1 auto; }
}

/* Label above, logos centred beneath. Static — see the note in the section
   file about why this must never auto-scroll. */
/* ONE setting drives both gaps so they stay equal (Jay, 18 Sep): the space
   above the rule and the space between the rule and the logos are the same
   number, adjustable in the editor rather than guessed at here. */
.melo-atf__retail{
  /* No rule above the logos (Jay, 18 Sep). The gap alone separates the buy
     panel from the retailer row; --melo-retail-gap still drives it, so the
     spacing is unchanged and still editor-adjustable. */
  text-align:center;
  margin-top:  var(--melo-retail-gap, 40px);
  padding-top: var(--melo-retail-gap, 40px);
}
.melo-atf__retail-label{
  display:block; margin-bottom:14px;
  font-size:11px; font-weight:600; letter-spacing:.13em; line-height:1.6;
  text-transform:uppercase; color:var(--melo-fg-3);
}
.melo-atf__retail-logos{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:14px 36px;
}
/* Logo size is a percentage of the 26px baseline, set in the editor.
   Text fallbacks scale with it so a retailer without a logo file does not
   suddenly tower over the ones that have one. */
/* Text fallbacks scale WITH a floor. Linear scaling took "GoPuff" to 7.5px at
   50%, which is unreadable and fails as body text. Images can survive being
   small; words cannot. 11px is the floor. */
.melo-atf__retail b{
  font-weight:700; line-height:1.6; color:var(--melo-fg-2);
  font-size: max(11px, calc(15px * var(--melo-logo-scale, 1.5)));
}
.melo-atf__retail img{
  width:auto;
  height: calc(26px * var(--melo-logo-scale, 1.5));
}

.melo-sticky__row{ display:flex; align-items:center; gap:12px; }
.melo-sticky__meta{ flex:0 0 auto; }
.melo-sticky__meta span{ display:block; font-size:.6875rem; line-height:1.4; color:var(--melo-fg-3); }
.melo-sticky__meta strong{ font-size:1.0625rem; letter-spacing:-.02em; }
.melo-sticky__row .melo__btn{ flex:1; }

@media (max-width:989px){
  /* Mobile reading order: image, headline, rating, BUY BOX, then the rest.
     Done with `order` so the DOM order stays the a11y order. */
  .melo-atf{ padding:20px 0 60px; }
  .melo-atf .melo__inner{ display:flex; flex-direction:column; }
  .melo-atf__grid{ display:contents; }
  .melo-atf__copy{ display:contents; }
  .melo-atf__media{ order:1; margin-bottom:18px; }
  .melo-atf__copy .melo__kicker{ order:2; }
  .melo-atf__copy h1{ order:3; font-size:clamp(1.95rem,7.6vw,2.5rem); margin-bottom:16px; }
  .melo .melo-atf__proof{ order:4; margin:4px 0 30px; }
  .melo-atf__panel{ order:5; margin-top:0; padding:20px; max-width:none; }
  .melo .melo-atf__lede{ order:6; max-width:none; margin-top:30px; }
  .melo-atf__ticks{ order:7; grid-template-columns:max-content max-content; gap:8px 20px; }
  .melo-atf__trial{ order:8; max-width:none; margin-bottom:8px; }
  .melo-dshea{ order:9; }
  .melo-atf__retail{ order:10; }
  .melo-atf__panelgrid{ grid-template-columns:1fr; gap:24px; }
  .melo-atf__buy{ grid-template-columns:1fr; gap:14px; }
  .melo-atf__cans img{ aspect-ratio:4/3; }
  .melo-atf__flavors{ gap:7px; }
  .melo-atf__flav img,.melo-atf__flav .shot{ max-height:92px; }
  .melo-atf__flav .nm{ font-size:.6875rem; }
  body:has(.melo-sticky.is-on){ padding-bottom:86px; }
}

/* --- wholesale inquiry form ------------------------------------------------
   melo.css version of the form live on /pages/wholesale. Presentation only —
   every field name, the hidden WHOLESALE marker and the honeypot are wire
   format and live in the section file. Inputs are 52px to match .melo__btn and
   clear the 48px touch-target floor; focus comes from `.melo :focus-visible`,
   which is already a 3px ring at 3px offset. */
.melo-wf { scroll-margin-top: 100px; }
.melo-wf__inner { max-width: 760px; }
.melo .melo-wf__intro { margin: 14px 0 30px; max-width: 56ch; }
.melo-wf__form { margin: 0; }
.melo-wf__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.melo-wf__span2 { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .melo-wf__grid { grid-template-columns: 1fr; gap: 16px; }
}
.melo-wf__field label {
  display: block; font-size: .8125rem; font-weight: 600; line-height: 1.4;
  color: var(--melo-fg); margin: 0 0 7px;
}
.melo-wf__opt { font-weight: 400; color: var(--melo-fg-3); }
.melo-wf__field input[type="text"],
.melo-wf__field input[type="email"],
.melo-wf__field select,
.melo-wf__field textarea {
  width: 100%; min-height: 52px; padding: 14px 15px;
  font-family: inherit; font-size: 1rem; line-height: 1.4; color: var(--melo-fg);
  background: var(--melo-bg);
  border: 1px solid var(--melo-hair); border-radius: 10px;
  -webkit-appearance: none; appearance: none;
}
.melo-wf__field textarea { min-height: 118px; resize: vertical; }
.melo-wf__field select {
  /* CSS caret, so no image request and no dependence on the OS control. */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--melo-fg) 50%),
    linear-gradient(135deg, var(--melo-fg) 50%, transparent 50%);
  background-position: calc(100% - 21px) 23px, calc(100% - 15px) 23px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}
.melo-wf__field ::placeholder { color: var(--melo-fg-3); opacity: 1; }
.melo .melo-wf__hint { font-size: .75rem; line-height: 1.45; color: var(--melo-fg-3); margin: 7px 0 0; }
.melo-wf__actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 26px;
}
.melo-wf__submit { width: auto; min-width: 200px; }
.melo .melo-wf__aside { font-size: .75rem; color: var(--melo-fg-3); margin: 0; }
.melo-wf__success {
  border: 1px solid var(--melo-hair); border-radius: 10px;
  background: var(--melo-surface);
  padding: 16px 18px; margin: 0 0 24px;
  font-size: .9375rem; line-height: 1.5; color: var(--melo-fg);
}
.melo-wf__errors {
  border: 1px solid #B3261E; border-radius: 10px;
  padding: 14px 18px; margin: 0 0 24px; color: #B3261E; font-size: .875rem;
}
.melo .melo-wf__errors p { margin: 0 0 6px; font-weight: 600; }
.melo-wf__errors ul { margin: 0; padding-left: 18px; }


/* --- FAQ show more ---------------------------------------------------------- */
.melo .melo-faq__more { margin: 18px 0 0; }

/* --- Instagram row ---------------------------------------------------------- */
.melo-social__head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 20px;
}
.melo-social__handle { flex: none; }
.melo-social__grid {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
@media (max-width: 999px) { .melo-social__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .melo-social__grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } }
.melo-social__grid a {
  display: block; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: var(--melo-radius); background: var(--melo-surface);
}
.melo-social__grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.melo-social__ph { display: block; width: 100%; height: 100%; background: var(--melo-surface); }
.melo-social__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.melo-social__grid li { position: relative; }
/* Play badge on a reel tile. Decorative — the link text already says "(video)". */
.melo-social__play {
  position: absolute; right: 10px; bottom: 10px; width: 26px; height: 26px;
  border-radius: 50%; background: rgba(0,0,0,.62); pointer-events: none;
}
.melo-social__play::after {
  content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%,-50%);
  border-left: 8px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.melo .melo-social__pause { margin: 16px 0 0; text-align: right; }

/* --- Klaviyo embedded form -------------------------------------------------- */
/* Klaviyo renders its own markup; this only gives it room and centres it. */
.melo-email__klaviyo { margin: 22px auto 0; max-width: 520px; }

/* Claim marker on the hero H1 — links the claim to the footer disclaimer (C8).
   Superscripted and stepped down so it reads as a reference mark, not
   punctuation in the headline. Kept at full colour, not dimmed: a marker you
   cannot see does not link anything. */
.melo-atf__claimstar {
  font-size:0.5em;
  vertical-align:super;
  line-height:0;
  margin-left:1px;
}

/* --- Whatever the moment -------------------------------------------------
   How-to-drink-it occasion cards. Sits between FEEL and RANGE.
   Desktop 4-up, tablet 2-up, phone 1-up. 2-up was tested at 390px and
   rejected: ~127px of text width, about fifteen characters a line.        */
.melo-moment__head { max-width:62ch; }
.melo .melo-moment__sub { margin-top:14px; }
.melo-moment__claimstar { font-size:0.75em; vertical-align:super; line-height:0; margin-left:1px; }

.melo-moment__grid {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;
  margin:40px 0 0; padding:0; list-style:none;
}
@media (max-width:999px){ .melo-moment__grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:479px){ .melo-moment__grid{ grid-template-columns:1fr; } }

.melo-moment__card {
  display:flex; flex-direction:column;
  border:1px solid var(--melo-hair); border-radius:var(--melo-radius);
  padding:22px 20px 24px; background:var(--melo-bg);
}
/* The occasion label is the largest thing in the card on purpose: people scan
   this section for a moment that is theirs, they do not read it. Same
   reasoning that made the timing the biggest element in the feel timeline. */
.melo-moment__when {
  font-family:var(--melo-display); font-weight:var(--melo-h-weight);
  letter-spacing:-0.03em; font-size:clamp(1.5rem, 3.4vw, 1.9rem);
  line-height:1; color:var(--melo-fg);
}
/* Scoped: `.melo p { margin:0 }` is (0,1,1) and outranks a bare class. */
.melo .melo-moment__what { margin-top:10px; font-size:0.9375rem; font-weight:700; color:var(--melo-fg); }
.melo .melo-moment__body { margin-top:8px; font-size:0.9375rem; line-height:1.55; color:var(--melo-fg-2); }

/* margin-top:auto pins the flavor line to the card foot, so cards holding
   different copy lengths still align along the bottom edge. */
.melo-moment__pick { margin-top:auto; padding-top:16px; }
.melo .melo-moment__picktext {
  border-top:1px solid var(--melo-hair-2); padding-top:12px;
  font-size:0.8125rem; letter-spacing:0.02em; color:var(--melo-fg-3);
}
.melo-moment__flavor { color:var(--melo-fg); font-weight:700; }
a.melo-moment__flavor { text-decoration:underline; text-underline-offset:3px; }

/* ONE yellow across the site (Jay, 18 Sep). This was acid at 26%, a third
   distinct pale yellow alongside the button and the comparison column. Now the
   same #EBFC72 as both. Acid as GROUND with ink text is 18.7:1; acid is never
   text on white, where it measures 1.12:1.
   Measured in the browser on the full-acid ground, using the COMPUTED colors
   the live theme resolves (not the token defaults — --melo-fg-2 resolves to
   rgba(3,3,2,.76) here, which composites differently):
     occasion label   18.4:1
     body copy         9.8:1
     flavor line       4.85:1  <- 13px, normal weight, AA floor is 4.5:1
   The flavor line has almost no headroom. If it ever gets a lighter grey, or
   the acid gets any paler, re-measure before shipping. */
.melo-moment__card--tint {
  background: var(--melo-acid);
  border-color: var(--melo-acid);
}
.melo-moment__card--tint .melo-moment__picktext { border-top-color: rgba(10,10,10,.22); }

.melo-moment__foot { margin-top:34px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; }
.melo-moment__foot .melo__btn { width:auto; min-width:220px; }
@media (max-width:479px){ .melo-moment__foot .melo__btn { width:100%; } }

/* --- what's in the can ---------------------------------------------------- */
.melo-supp__head { margin-bottom:26px; }
.melo-supp__grid { display:grid; gap:28px; }
.melo .melo-supp__label { font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--melo-fg-3); margin:0 0 8px; }
.melo .melo-supp__ing { margin:0; font-size:.9375rem; line-height:1.6; color:var(--melo-fg-2); max-width:56ch; }
.melo-supp__spec { margin:20px 0 0; display:grid; gap:0; }
.melo-supp__spec > div { display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-top:1px solid var(--melo-hair-2); }
.melo-supp__spec > div:last-child { border-bottom:1px solid var(--melo-hair-2); }
.melo .melo-supp__spec dt { font-size:.875rem; color:var(--melo-fg-3); margin:0; }
.melo .melo-supp__spec dd { font-size:.875rem; font-weight:700; color:var(--melo-fg); margin:0; text-align:right; }
.melo .melo-supp__note { margin:16px 0 0; font-size:.8125rem; color:var(--melo-fg-3); max-width:56ch; }
/* The panel art is transparent ink, so it needs a light ground to sit on and
   generous padding, or the rules run into the section edge. */
.melo-supp__panel { margin:0; background:var(--melo-surface); border-radius:12px; padding:22px; }
.melo-supp__panel img { display:block; width:100%; height:auto; }
.melo .melo-supp__panel figcaption { margin-top:10px; font-size:.75rem; color:var(--melo-fg-3); text-align:center; }
@media (min-width:750px){
  .melo-supp__grid { grid-template-columns: 1.15fr .85fr; gap:48px; align-items:center; }
  .melo-supp--left .melo-supp__copy  { order:2; }
  .melo-supp--left .melo-supp__panel { order:1; }
}

/* Product photo in a range card is a link; it must fill the media box and keep
   the same cursor affordance as the title. */
.melo-card__medialink { display:block; height:100%; }
.melo-card__medialink img { display:block; width:100%; height:100%; object-fit:contain; }

/* --- PDP: spacing and controls (Jay, 19 Sep) ------------------------------ */
/* Add to cart and Google Pay are one stack, not two decisions. The express
   block already sits in a grid with a 10px gap, so its own margin was stacking
   on top of that and producing 18px. */
.melo-express { margin-top:0; }
.melo .melo-express__hint { margin-top:6px; }

/* The "Most popular" tab hangs above its tile, so the grid needs headroom or
   the first row clips it against whatever sits above. */
.melo-builder__opts { padding-top:10px; }

/* Breathing room under the main image. 10px read as the thumbnails touching
   it. */
.melo-gallery__thumbs { margin-top:16px; }

/* Flavour switcher as CARDS: square shot on top, name underneath, matching the
   homepage flavour picker. Square rather than portrait, so the row stays short
   and the four cards sit on one line at desktop width. */
.melo-flavours { gap:10px; margin-bottom:18px; }
.melo-flavours__card {
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:stretch; gap:8px;
  padding:8px; text-align:center;
}
.melo-flavours__shot {
  display:grid; place-items:center;
  aspect-ratio:1/1;                 /* square, not portrait */
  background:var(--melo-surface); border-radius:7px; padding:6px;
}
.melo-flavours__shot img { max-width:100%; max-height:100%; width:auto; height:auto; display:block; }
.melo-flavours__shot i { width:22px; height:22px; border-radius:5px; display:block; }
.melo-flavours__name { font-size:.75rem; font-weight:700; line-height:1.25; color:var(--melo-fg-2); }
.melo-flavours a[aria-current="page"] .melo-flavours__name { color:var(--melo-fg); }
@media (max-width:479px){
  .melo-flavours__card { flex:1 1 calc(50% - 10px); }
}

/* --- cart drawer: free-shipping bar + one-tap line offers ------------------
   These render INSIDE the vendor drawer, which is not a .melo scope, so every
   rule here is self-contained and does not lean on .melo tokens being
   inherited. Colours fall back to literals for the same reason. */
.melo-shipbar { margin:0 0 14px; padding:12px 14px; border-radius:8px; background:#F7F7F3; }
.melo-shipbar__text { margin:0 0 8px; font-size:.8125rem; line-height:1.4; color:#45453F; }
.melo-shipbar__text strong { color:#0A0A0A; }
.melo-shipbar__track { height:6px; border-radius:99px; background:#E3E3DC; overflow:hidden; }
.melo-shipbar__fill { display:block; height:100%; border-radius:inherit; background:#0A0A0A; transition:width .3s ease; }
/* acid as a FILL only — it is 1.12:1 on white and never carries text */
.melo-shipbar.is-done .melo-shipbar__fill { background:var(--melo-acid, #EBFC72); }
@media (prefers-reduced-motion: reduce){ .melo-shipbar__fill { transition:none; } }

.melo-coffer {
  margin:10px 0 2px; padding:10px 12px;
  border:1.5px dashed #0A0A0A; border-radius:8px;
  display:grid; gap:8px;
}
.melo-coffer__text { margin:0; font-size:.75rem; line-height:1.4; color:#45453F; }
.melo-coffer__text strong { display:block; font-size:.8125rem; color:#0A0A0A; }
.melo-coffer__btn {
  justify-self:start; min-height:44px;          /* touch target, WCAG 2.5.8 */
  padding:10px 16px; border:2px solid #000; border-radius:8px;
  background:var(--melo-acid, #EBFC72); color:#000;
  font:inherit; font-size:.8125rem; font-weight:800; cursor:pointer;
}
.melo-coffer__btn:hover { background:#000; color:var(--melo-acid, #EBFC72); }
.melo-coffer__btn:focus-visible { outline:3px solid #0A0A0A; outline-offset:3px; }
.melo-coffer__btn[disabled] { opacity:.55; cursor:progress; }
.melo-coffer__msg { margin:0; min-height:1em; font-size:.75rem; color:#45453F; }

/* ===========================================================================
   MOBILE AUDIT — 21 Sep 2026
   2026 sessions are 72% mobile (36,991 of 51,692). Every rule below came out
   of rendering home, PDP and collection at 390px and 360px and fixing what
   a phone shopper actually hits. Kept together, at the end, so they win
   without specificity games and can be read as one list.
   =========================================================================== */

/* PDP flavor switcher: one row of four at every width. The old phone rule
   (50% basis) put three on a row and stretched the Variety Pack card across
   the full width underneath — a ~400px tile that pushed Add to cart a whole
   screen further down. */
.melo-flavours { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; }
.melo-flavours .melo-flavours__card { flex:none; min-width:0; }  /* the old 92px min-width is what forced the wrap */
@media (max-width:479px){
  .melo-flavours .melo-flavours__card { flex:none; padding:6px; gap:6px; }
  .melo-flavours__shot { padding:4px; }
}

/* PDP trust chips (own class now, see melo-pdp). 11px floor for any text. */
.melo-pdp__chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.melo-pdp__chip {
  font-size:.6875rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--melo-fg-2); border:1px solid var(--melo-hair);
  border-radius:20px; padding:5px 10px;
}

/* PDP: rating link was a 16px-tall target. */
.melo-pdp__ratingline a { display:inline-block; padding-block:8px; margin-block:-8px; }

/* PDP gallery on a phone: the square main image stays (it is the product),
   the thumbnail strip gets smaller so the title and price come up. Thumbs stay
   at 48px, above the 44px touch minimum. */
@media (max-width:749px){
  .melo-gallery__main { padding:14px; }
  .melo-gallery__thumbs { margin-top:10px; gap:6px; }
  .melo-gallery__thumb { width:48px; height:48px; padding:3px; }
}

/* Trust strip on a phone: was 9px. 11px is the floor for anything a shopper
   is meant to read, so it may now wrap to two lines inside its cell. */
@media (max-width:749px){
  .melo-trust__list li { font-size:.6875rem; letter-spacing:.05em; white-space:normal; line-height:1.3; padding:11px 8px; }
}

/* Comparison table on a phone: column heads were 9px. */
@media (max-width:749px){
  .melo-compare thead th { font-size:.6875rem; letter-spacing:.04em; }
  .melo-compare tbody th { font-size:.8125rem; }
}

/* Card flag ("Start here" / "Most popular") was 9px. */
.melo-card__flag { font-size:.6875rem; }

/* Collection / range cards: five-star row. Drawn with a clipped gradient over
   five glyphs so a 4.7 shows as 4.7, not rounded up to five full stars. Ink,
   never acid: acid on white is 1.12:1. Decorative — the numbers beside it
   carry the information. */
.melo-card__rate { display:flex; align-items:center; gap:5px; font-size:.8125rem; color:var(--melo-fg-2); white-space:nowrap; }
.melo-stars {
  --p: calc(var(--r, 0) / 5 * 100%);
  font-size:.875rem; letter-spacing:1px; line-height:1;
  background:linear-gradient(90deg, var(--melo-fg, #0A0A0A) var(--p), #C9C9C1 var(--p));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.melo-stars::before { content:"\2605\2605\2605\2605\2605"; }
.melo-card__score { font-weight:700; color:var(--melo-fg); }
/* Stars sit UNDER the title at every width. Side by side (the old desktop
   layout) the star row squeezed the title onto two lines and ran past the card
   edge on the longest name. */
.melo-card__head { display:block; }
.melo-card__rate { margin-top:4px; }

/* Card title link: 20px tall on a phone. Padded to 32px (WCAG 2.5.8 asks 24);
   the whole image above it is also a link, so there is a big target too. */
.melo-card__title a { display:inline-block; padding-block:6px; margin-block:-6px; }

/* Subscribe & Save pill under the range grid was 42px tall. */
.melo-atf__offer { min-height:48px; display:inline-flex; align-items:center; justify-content:center; }

/* Email capture on a phone: full-width button with clear space above it,
   rather than a right-aligned button touching the input. */
@media (max-width:559px){
  .melo-email__form { gap:12px; }
  .melo-email__form .melo__btn { width:100%; align-self:stretch; }
}

/* Homepage hero on a phone: Add to cart sat ~900px down, below the fold on
   every phone. Shorter photo (16:10, not 4:3) and shorter flavor tiles bring
   it up by about a fifth of a screen. The sticky bar covers the rest. */
@media (max-width:749px){
  .melo-atf__cans img { aspect-ratio:16/10; object-fit:cover; }
  .melo-atf__flav img, .melo-atf__flav .shot { max-height:64px; margin-bottom:6px; }
  .melo-atf__flav .face { padding:8px 6px; }
  .melo-atf__flav .nm { min-height:0; }
}

/* "Most popular" tab on the pack tiles was 9px. */
.melo-opt__flag { font-size:.6875rem; }

/* Small phones (360px, most Androids): the three size tiles' minimum content
   plus 20px panel padding came to 323px in a 320px column, so the builder
   poked 3px past the gutter. Less padding at this width, and the panel may
   shrink below its content minimum rather than push the page. */
@media (max-width:380px){
  .melo-atf__panel { padding:16px 12px; min-width:0; }
  .melo-builder__opts { gap:6px; }
}

/* Email capture on a phone: the photo sat UNDER the form as a 350px square —
   a full screen of picture after the ask, with nothing to do. On a phone it
   leads instead, cropped to 16:10, so the section opens with the image and
   ends on the button. Desktop keeps Jay's left/right and square setting. */
@media (max-width:749px){
  .melo-email .melo-email__media { order:-1; aspect-ratio:16/10; }
  .melo-email__grid { gap:22px; }
  .melo-email__field label { margin-top:4px; }
}

/* Cart drawer offers: text and button side by side instead of stacked. The
   drawer is phone-width on a phone, and a stacked offer was ~145px per line —
   two lines of offers pushed Checkout below the fold. The status message
   still gets its own row under both. */
.melo-coffer { grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:12px; }
.melo-coffer__btn { justify-self:end; white-space:nowrap; }
.melo-coffer__msg { grid-column:1 / -1; }
.melo-coffer__msg:empty { display:none; }

/* Homepage hero "Buy now" on the photo — phones only. Sits bottom-centre on
   the image, black primary so it reads as the page's main action. The buy box
   gets scroll-margin so the sticky header does not land on top of it. */
.melo-atf__photocta { display:none; }
@media (max-width:749px){
  .melo-atf__cans { position:relative; }
  .melo-atf__photocta {
    display:inline-flex; align-items:center; justify-content:center;
    /* Centred with inset + auto margins, NOT translateX(-50%): .melo__btn:active
       sets transform:scale(), which replaced the translate on press, jumped the
       button 80px sideways, and the tap landed on the photo instead. */
    position:absolute; left:0; right:0; bottom:14px; margin-inline:auto;
    width:fit-content; min-width:160px; min-height:48px; padding:0 28px;
    z-index:2;           /* above the photo, which otherwise takes the tap */
    box-shadow:0 6px 18px -6px rgba(0,0,0,.45);
  }
}
.melo-atf__panel { scroll-margin-top:calc(var(--melo-header-h, 64px) + 12px); }
.melo-atf__panel:focus { outline:none; }
.melo-atf__panel:focus-visible { outline:3px solid var(--melo-focus, #0A0A0A); outline-offset:4px; }


/* ===========================================================================
   v55 — 21 Sep 2026
   =========================================================================== */

/* SOLD OUT, everywhere, in words. One pill style for every place a product or
   pack can be unavailable: range/collection cards, PDP flavor cards, PDP pack
   tiles, homepage flavor tiles. Black on white so it reads at a glance and is
   never colour-only; the dimming around it is secondary. */
.melo-soldout {
  display:inline-block; margin-top:4px; padding:3px 8px; border-radius:4px;
  background:#0A0A0A; color:#fff;
  font-size:.6875rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; line-height:1.3; white-space:nowrap;
}
.melo-card__soldout { position:absolute; top:12px; right:12px; z-index:1; margin:0; }
.melo-card.is-soldout .melo-card__media img { opacity:.45; filter:grayscale(.6); }
.melo-card.is-soldout .melo-card__price { color:var(--melo-fg-3); }  /* no strike-through: that reads as a discount */
.melo-flavours__card.is-soldout .melo-flavours__shot img,
.melo-atf__flav.is-soldout img { opacity:.4; filter:grayscale(.6); }
.melo-flavours__soldout { align-self:center; margin-top:0; }
.melo-atf__flav.is-soldout .face { border-style:dashed; cursor:not-allowed; }
.melo-atf__flav.is-soldout .melo-soldout { margin-top:4px; }
.melo-opt.is-soldout .melo-opt__face { border-style:dashed; background:repeating-linear-gradient(135deg, transparent 0 6px, rgba(0,0,0,.035) 6px 12px); }
.melo-opt.is-soldout .melo-opt__name,
.melo-opt.is-soldout .melo-opt__label { color:var(--melo-fg-3); }
.melo-opt.is-soldout .melo-opt__price { font-size:.75rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#0A0A0A; }
.melo .melo-pdp__soldnote {
  margin:16px 0 0; padding:12px 14px; border:2px solid #0A0A0A; border-radius:8px;
  font-size:.9375rem; line-height:1.45;
}

/* PDP title for a multi-flavor pack: the name as the H1, the flavor list as a
   quiet line beneath it. */
.melo .melo-pdp__subtitle { margin:6px 0 0; font-size:.9375rem; color:var(--melo-fg-2); }

/* PDP gallery on a phone: smaller (Jay, 21 Sep). 4:3 instead of square, so
   the title and price come up by ~90px. The can still reads at full height. */
@media (max-width:749px){
  /* SQUARE (Jay, 21 Sep): the 4:3 crop cut off the bottom of the can. The
     whole product always shows; if anything gives, the can sits smaller
     inside the square rather than being cropped. */
  .melo-gallery__main { aspect-ratio:1/1; padding:14px; }
  .melo-gallery__main img { width:100%; height:100%; object-fit:contain; }
}

/* PDP trust chips on ONE row on a phone. They shrink and may wrap their own
   text onto two lines rather than dropping a whole chip onto a second row. */
@media (max-width:749px){
  .melo-pdp__chips { flex-wrap:nowrap; gap:6px; }
  .melo-pdp__chip {
    flex:0 1 auto; min-width:0; text-align:center; line-height:1.25;
    letter-spacing:.03em; padding:5px 9px; border-radius:14px;
    display:flex; align-items:center; justify-content:center;
  }
}

/* Free-shipping bar: full width looked like a banner on the desktop cart page.
   Capped there; phones keep the full width. */
@media (min-width:750px){
  .melo-shipbar { max-width:560px; }
}

/* Cart line offers, relaid: text takes the room it needs and the controls
   wrap UNDER it when the column is narrow. The old two-column grid squeezed
   the text to one word per line inside the narrow cart-page column on phones. */
.melo-coffer { display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; }
.melo-coffer__text { flex:1 1 190px; min-width:0; }
.melo-coffer__controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; flex:0 1 auto; }
.melo-coffer__btn { justify-self:auto; }
.melo-coffer__msg { flex:1 0 100%; }
.melo-coffer__freq select {
  min-height:44px; padding:8px 30px 8px 10px; max-width:100%;
  border:1.5px solid #0A0A0A; border-radius:8px; background-color:#fff; color:#0A0A0A;
  font:inherit; font-size:.8125rem; cursor:pointer;
}
.melo-coffer__freq select:focus-visible,
.melo-coffer__link:focus-visible { outline:3px solid #0A0A0A; outline-offset:3px; }
.melo-coffer__link {
  min-height:44px; padding:8px 4px; border:0; background:none; color:#0A0A0A;
  font:inherit; font-size:.8125rem; font-weight:700; text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}
.melo-coffer__link[disabled] { opacity:.55; cursor:progress; }
/* Already subscribed: solid border, not dashed, so it reads as a state rather
   than an offer. */
.melo-coffer--on { border-style:solid; background:#F7F7F3; }

/* "Most popular" tab on a 3-across row at 360px: at 11px it was wider than its
   102px tile and poked past the page gutter. Tighter tracking and padding, and
   10px on the smallest phones only (it is a decorative duplicate of the
   tile's own label; aria-hidden on the PDP). */
.melo-opt__flag { letter-spacing:.04em; max-width:calc(100% - 4px); overflow:hidden; }
@media (max-width:380px){ .melo-opt__flag { font-size:.625rem; padding-inline:6px; letter-spacing:.02em; } }

/* Sold-out tile: full opacity so the words "Sold out" stay legible; the
   dashed border and hatching already say it cannot be picked. */
.melo-opt.is-soldout input:disabled ~ .melo-opt__face { opacity:1; }

/* Cart offer controls must never be wider than the offer box (Jay, 21 Sep:
   the frequency picker poked out of the drawer's narrow column). Everything
   inside may shrink, and once wrapped the picker and button share the full
   width. */
.melo-coffer__controls { flex:1 1 auto; min-width:0; max-width:100%; }
.melo-coffer__freq { display:block; min-width:0; max-width:100%; }
.melo-coffer__freq select { width:auto; max-width:100%; text-overflow:ellipsis; }

/* ===========================================================================
   v58 — 21 Sep 2026
   =========================================================================== */

/* Cart: the offer lives in its own cell spanning everything but the image
   column, on the cart page and in the drawer, at every width. */
.cart-items__table-row > .melo-coffer-cell { grid-column: 2 / -1; min-width:0; padding:0; }
.cart-items__table-row > .melo-coffer-cell:empty { display:none; }
.melo-coffer-cell .melo-coffer { margin:4px 0 0; }

/* Frequency picker and Subscribe button are the same width, side by side
   when there's room and stacked full-width when there isn't. */
.melo-coffer__controls { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:8px; width:100%; flex:1 1 100%; }
.melo-coffer__freq, .melo-coffer__freq select, .melo-coffer__controls .melo-coffer__btn { width:100%; max-width:none; }
.melo-coffer__controls .melo-coffer__btn { justify-self:stretch; min-height:44px; }
.melo-coffer__freq select { min-height:44px; }
.melo-coffer__text { flex:1 1 100%; }

/* PDP "Buy it now" (Shopify's own button) all the way across. */
.melo-express .shopify-payment-button,
.melo-express shopify-accelerated-checkout,
.melo-express shopify-buy-it-now-button,
.melo-express .shopify-payment-button__button { width:100% !important; max-width:none !important; display:block; }

/* PDP gallery on a phone: tall main image with the other photos in a column
   down the right, so the page gets more product above the fold. The column
   scrolls if there are more photos than fit beside the main image. */
@media (max-width:749px){
  .melo-pdp__media { display:grid; grid-template-columns:minmax(0,1fr) 58px; gap:8px; align-items:stretch; }
  .melo-gallery__main { aspect-ratio:4/5; padding:10px; }
  .melo-gallery__main img { width:100%; height:100%; object-fit:contain; }
  .melo-gallery__thumbs {
    flex-direction:column; margin-top:0; gap:6px;
    height:0; min-height:100%;            /* never taller than the main image */
    overflow-x:hidden; overflow-y:auto; padding:0 0 2px;
  }
  .melo-gallery__thumb { width:58px; height:58px; flex:none; padding:3px; }
}

/* PDP flavor picker: smaller names so "Passionfruit" clears the card edges. */
@media (max-width:749px){
  .melo-flavours .melo-flavours__card { padding:6px 4px; }
  .melo-flavours__name { font-size:.6875rem; letter-spacing:-.01em; line-height:1.2; overflow-wrap:anywhere; }
}

/* Judge.me testimonials carousel on a WHITE section (the PDP). Its heading,
   header stars and arrows take the card's white text colour, so on white they
   were invisible: that was the "big empty space" above and below the card,
   and it left the arrows (the only way to move it, with autoplay off)
   unseeable. Ink them, and tighten Judge.me's own spacing. */
.melo.color-scheme-1 .jdgm-testimonials-carousel .jdgm-title,
.melo.color-scheme-1 .jdgm-testimonials-carousel .jdgm-header-info,
.melo.color-scheme-1 .jdgm-testimonials-carousel .jdgm-rating-text,
.melo.color-scheme-1 .jdgm-testimonials-carousel .jdgm-header .jdgm-star { color:#0A0A0A !important; }
.melo.color-scheme-1 .jdgm-testimonials-carousel .jdgm-arrow { color:#0A0A0A !important; border-color:#0A0A0A !important; }
.jdgm-testimonials-carousel { padding-block:8px !important; }
.jdgm-testimonials-carousel .jdgm-header { margin-bottom:20px !important; }
.jdgm-testimonials-carousel .jdgm-content { margin-bottom:16px !important; }
@media (max-width:749px){
  .jdgm-testimonials-carousel .jdgm-header { margin-bottom:14px !important; }
  .jdgm-testimonials-carousel .jdgm-content { margin-bottom:10px !important; }
}

/* v59 (Jay, 21 Sep): PDP phone gallery — the main image's bottom lines up with
   the SIXTH thumbnail (the most photos a product will have). The height comes
   from the thumbnail column, not from the image ratio: 6 thumbs of 46px plus
   5 gaps of 6px = 306px. That is shorter than the old 4:5 image, so more of
   the buy box comes above the fold. 46px keeps each thumb above the 44px touch
   minimum. With fewer than six photos the main image keeps the same height. */
@media (max-width:749px){
  .melo-pdp__media { --melo-th:46px; --melo-thgap:6px; grid-template-columns:minmax(0,1fr) var(--melo-th); align-items:start; }
  .melo-gallery__main { aspect-ratio:auto; height:calc(var(--melo-th) * 6 + var(--melo-thgap) * 5); }
  .melo-gallery__thumbs { gap:var(--melo-thgap); height:calc(var(--melo-th) * 6 + var(--melo-thgap) * 5); min-height:0; overflow-y:auto; }
  .melo-gallery__thumb { width:var(--melo-th); height:var(--melo-th); min-width:44px; min-height:44px; padding:2px; }
}

/* v60 — PDP add-to-cart error line (empty = no space) */
.melo-pdp__adderr{margin:0;font-size:.875rem;color:#B00020}
.melo-pdp__adderr:empty{display:none}

/* v61 — cart PAGE on desktop: frequency picker and Subscribe at ~a third of
   the width (Jay, 21 Sep). Scoped to main so the narrow drawer keeps its
   full-width stacked controls. */
@media screen and (min-width: 750px) {
  main .melo-coffer__controls { grid-template-columns: repeat(2, 210px); justify-content: start; }
}

/* v63 — phone fixes from Jay's device check (21 Sep)
   1. "Most popular" was clipped. v56 capped the flag at the tile width with
      overflow:hidden; in the live font (Geist) at 11px it is 108px wide and a
      390px phone's middle tile is ~100px, so the text was cut. The flag is
      centered on its tile, so it may overhang into the gutter. Never clip it. */
.melo-opt__flag { max-width:none; overflow:visible; }
@media (max-width:480px){ .melo-opt__flag { font-size:.625rem; letter-spacing:.02em; padding:3px 6px; } }
/* 2. PDP flavor switcher pictures were 0x0 on EVERY width. `.melo-flavours a`
      (0,1,1, align-items:center) outranked `.melo-flavours__card` (0,1,0,
      stretch), so the picture box shrank to its padding (12px), and a lazy
      image in a 0px box never loads. Stretch the card and fill the box. */
.melo-flavours .melo-flavours__card { align-items:stretch; justify-content:flex-start; }
.melo-flavours .melo-flavours__shot { position:relative; width:100%; }
.melo-flavours .melo-flavours__shot img {
  position:absolute; inset:4px; width:calc(100% - 8px); height:calc(100% - 8px);
  max-width:none; max-height:none; object-fit:contain;
}