/** Shopify CDN: Minification failed

Line 8036:53 Expected ")" to end URL token
Line 8036:261 Expected ")" to end URL token
Line 8036:469 Expected ")" to end URL token
Line 8036:677 Expected ")" to end URL token

**/
/*
 * WILLIES REBRAND — 2026
 *
 * Plain CSS overrides for the brand reskin. Defines the design tokens on :root
 * so any rule that uses var(--token, fallback) picks them up automatically.
 *
 * Loaded AFTER frontend.min.css in layout/theme.liquid so :root values override
 * any tokens declared earlier in the cascade.
 *
 * Source: Figma "Willies Rebrand"
 * https://www.figma.com/design/vHups7IQGblR1Wu7KToRgz/Willies-Rebrand
 *
 * NOTE: src/scss/ source files are NOT updated — they remain on the previous
 * palette. Post-launch cleanup: fold this file back into src/scss/ when the
 * brand has stabilized.
 */

/* Highway Gothic Expanded — display font for headings + nav decorations.
   TTF for now; convert to WOFF2 post-launch for a smaller payload. */
@font-face {
  font-family: "Highway Gothic Expanded";
  src: url("HighwayGothicExpanded.TTF") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Highway Gothic (regular weight) — body font. Local HWYGOTH.TTF
   (the actual regular HG, not the wide/expanded variant). The
   previous Shopify CDN reference at HWYGWDE.TTF was the EXPANDED
   font under the regular family name, so everywhere using
   var(--w-font-body) was actually rendering Expanded. Fixed by
   serving the proper regular face. */
@font-face {
  font-family: "Highway Gothic";
  src: url("HWYGOTH.TTF") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ─────────────────────────────────────────────────────────────
   SMITHOUSE catch-all alias — kept because base.bundle.css and
   third-party CDN CSS may still reference the legacy "SMITHOUSE"
   identifier. Aliased to the display TTF so any stray rule lands on
   the brand display font.
   The previous WRXHand / "WRX Hand" / Interstate / INTERSTATE / INTER
   aliases are gone — the sweep-legacy-fonts.js sweep replaced every
   theme reference with var(--w-font-body) / var(--w-font-display).
   ─────────────────────────────────────────────────────────────*/
@font-face {
  font-family: "SMITHOUSE";
  src: url("HighwayGothicExpanded.TTF") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Brand primaries */
  --w-color-navy:        #071D49;
  --w-color-off-white:   #F1E9E5;
  --w-color-site-bg:     #F1E9E5;
  --w-color-white:       #FFFFFF; /* Pure white — distinct from --w-color-off-white (which is the brand cream) */

  /* ── Accents */
  --w-color-orange:       #FF8200;
  --w-color-red-orange:   #E73C3E;
  --w-color-pale-yellow:  #EBE49A;
  --w-color-berry:        #A20067;
  --w-color-cobalt:       #2A55AB; /* PDP heading eyebrow + size subtitle ("WILLIE'S REMEDY+" / "750ml") */
  --w-color-copper:       #A7662B; /* Merch tile LIMITED EDITION badge fill */
  /* Gummies purple family — Figma "Willies - THC Gummies Update" 3318-6436,
     specs/01-gummies-pdp-colour-scheme.md */
  --w-color-purple-deep:    #3C1C6C; /* gummies CTA / tags / was-price */
  --w-color-purple-mid:     #8D6EBB; /* gummies selected borders, MOST POPULAR band */
  --w-color-purple-darkest: #341267; /* gummies how-it-feels bar gradient end */
  --w-color-lavender:       #E5E1F3; /* gummies card bg */
  --w-color-lavender-text:  #B8AADB; /* gummies utility links, chart totals row */

  /* ── Hover states — per-token darker variant.
     Source: Daniel's Figma. Use on :hover for buttons, links,
     interactive surfaces where the base token paints the bg/color. */
  --w-color-navy-hover:        #051536;
  --w-color-off-white-hover:   #DECCC3;
  --w-color-orange-hover:      #CC5F02;
  --w-color-red-orange-hover:  #B32224;
  --w-color-pale-yellow-hover: #DAC145;
  --w-color-berry-hover:       #60003D;
  --w-color-cobalt-hover:      #1F4080;
  --w-color-copper-hover:      #7E4D20;
  --w-color-purple-deep-hover: #2C1450;
  --w-color-purple-mid-hover:  #785D9F;

  /* ── Section padding scale — consumed by section schema selects.
     Order: none < tiny < xs < s < m < l < xl
     Default M desktop, S mobile. */
  --w-pad-none:    0;
  --w-pad-tiny: 10px;
  --w-pad-xs:   16px;
  --w-pad-s:    32px;
  --w-pad-m:    64px;
  --w-pad-l:    96px;
  --w-pad-xl:  128px;

  /* ── Content width scale — consumed by section schema select
     narrow/default/wide/full. Clamp() floors at small viewport,
     scales by vw mid-range, ceilings at big monitor. */
  --content-narrow:  clamp(560px, 48vw, 720px);
  --content-default: clamp(720px, 70vw, 1100px);
  --content-wide:    clamp(1000px, 80vw, 1440px);
  --content-full:    100%;
  --max-site-width:  var(--content-wide);

  /* ── Breakpoint reference values
     Note: CSS @media (min-width: var(--w-bp-md)) is NOT supported; these tokens
     are reference values for clamp()/calc()/min()/max() and container queries.
     Media queries continue to use literal px values aligned to this scale. */
  --w-bp-sm:   640px;
  --w-bp-md:   768px;
  --w-bp-lg:  1024px;
  --w-bp-xl:  1280px;
  --w-bp-2xl: 1536px;

  /* ── Typography
     Display falls back to Highway Gothic until the Expanded font file ships. */
  --w-font-display:        "Highway Gothic Expanded", "Highway Gothic", sans-serif;
  --w-font-body:           "Highway Gothic", sans-serif;

  /* ── Typography scale (DESKTOP defaults — mobile values override in
     the @media block below). Sections consume role tokens rather than
     literal sizes so a single edit here cascades site-wide.

       display-xl : hero / banner wordmarks
       display-lg : section h2 (PWI, feature-text-columns, etc)
       display-md : subheadings, eyebrow lines
       display-sm : compact subheadings, column labels
       body-md    : body copy
       body-sm    : captions, small print

     Each role exposes -size / -lh (line-height) / -ls (letter-spacing). */
  --w-text-display-xl-size: 108px;    --w-text-display-xl-lh: 1;      --w-text-display-xl-ls: -1.5px;
  --w-text-display-lg-size: 55px;     --w-text-display-lg-lh: 63px;   --w-text-display-lg-ls: -2.7px;
  --w-text-display-md-size: 36px;     --w-text-display-md-lh: 44px;   --w-text-display-md-ls: -0.8px;
  --w-text-display-sm-size: 27px;     --w-text-display-sm-lh: 38px;   --w-text-display-sm-ls: 2px;
  --w-text-display-xs-size: 22px;     --w-text-display-xs-lh: 24px;   --w-text-display-xs-ls: 0.2px;
  --w-text-body-lg-size:    21px;     --w-text-body-lg-lh:    24px;   --w-text-body-lg-ls:    0;
  --w-text-body-md-size:    18px;     --w-text-body-md-lh:    22px;   --w-text-body-md-ls:    0;
  --w-text-body-sm-size:    14px;     --w-text-body-sm-lh:    20px;   --w-text-body-sm-ls:    0.3px;

  /* ── Rope decoration height (consumed by rope masks via height: var()).
     Swap mobile value in the @media block below so a single edit ripples
     across every rope on the site. */
  --w-rope-h: 5px;

  /* ── Letter-spacing tokens for non-typography-role elements (buttons,
     interactive labels, decorative spacing). The type-scale `-ls` tokens
     above are coupled to specific size roles; use these standalone vars
     when you want the brand letter-spacing without binding to a size.
     One-off Figma-export values (-0.4, -0.48, -0.42, -0.28, etc) stay
     literal — they're context-specific to individual elements. */
  --w-ls-tight: -0.8px;  /* display headings, ATC buttons (9 brand uses) */
  --w-ls-body:  -0.6px;  /* body uppercase, rich-text style (5 uses) */
  --w-ls-wide:   1.5px;  /* FAQ section title, decorative interactive labels (4 uses) */

  /* ── Decorative shape masks
     Used with -webkit-mask-image / mask-image + background-color so any element
     can render the shape in any color via `color` inheritance (currentColor). */
  /* NOTE: relative url() inside a CSS variable resolves against the CONSUMING stylesheet, not this file.
     These vars work in rules declared HERE (rebrand.css = /assets/) but 404 from inline <style> blocks
     in section liquid files. In section inline styles, use: url('{{ "rope-small.svg" | asset_url }}') */
  --star-mask:       url("star.svg");
  --ornament-mask:   url("ornament.svg");
  --shop-arrow-mask: url("shop-arrow.svg");
  --mark-mask:     url("w-icon-navy.svg");
  --rope-small-mask: url("rope-small.svg");
  --rope-small-vertical-mask: url("rope-small-vertical.svg");
  --rope-large-mask: url("rope-large.svg");
  --divider-rope-mask: url("divider-navy.svg");
}

/* ── Typography scale — MOBILE overrides
   Same role tokens redeclared at :root inside a max-width media query
   so any rule that reads `var(--w-text-display-lg-size)` etc. auto-
   swaps when the viewport drops below 768px. No per-section @media
   blocks needed. */
@media (max-width: 767px) {
  :root {
    --w-text-display-xl-size: 56px;     --w-text-display-xl-lh: 1;       --w-text-display-xl-ls: -0.8px;
    --w-text-display-lg-size: 44px;     --w-text-display-lg-lh: 42px;    --w-text-display-lg-ls: -0.8px;
    --w-text-display-md-size: 28px;     --w-text-display-md-lh: 32px;    --w-text-display-md-ls: -0.4px;
    --w-text-display-sm-size: 27px;     --w-text-display-sm-lh: 30px;    --w-text-display-sm-ls: 1.12px;
    --w-text-display-xs-size: 22px;     --w-text-display-xs-lh: 24px;    --w-text-display-xs-ls: 0.2px;
    --w-text-body-lg-size:    21px;     --w-text-body-lg-lh:    22px;    --w-text-body-lg-ls:    0;
    --w-text-body-md-size:    18px;     --w-text-body-md-lh:    22px;    --w-text-body-md-ls:    0;
    --w-text-body-sm-size:    14px;     --w-text-body-sm-lh:    18px;    --w-text-body-sm-ls:    0.3px;

    /* Mobile rope = 3px sitewide. Rules that read `height: var(--w-rope-h)`
       auto-swap from the 5px desktop default. */
    --w-rope-h: 3px;
  }
}

/* Reusable star icon — picks up text color via currentColor */
.star-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: var(--star-mask);
          mask-image: var(--star-mask);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Reusable ornament — picks up text color via currentColor */
.ornament-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: var(--ornament-mask);
          mask-image: var(--ornament-mask);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  flex-shrink: 0;
  vertical-align: middle;
}


/* ─────────────────────────────────────────────────────────────
   Page-level horizontal-scroll guard.
   Belt + braces: `overflow-x: hidden` for max compat (works on every
   browser that ships Shopify), `overflow-x: clip` as the modern
   alternative that doesn't create a scroll container (so position:
   sticky/fixed children keep working). When both are declared, browsers
   that support `clip` use the later rule. `max-width: 100%` on body
   constrains body to the html width — IMPORTANT: do NOT use `100vw`
   here. On Windows (and some other platforms with non-overlay
   scrollbars), `100vw` INCLUDES the scrollbar width, so `max-width: 100vw`
   actually permits body to be ~15px wider than the visible viewport,
   exposing a horizontal scrollbar. `100%` (= html's content-area width,
   which excludes the scrollbar) is what we actually want. Diagnosed
   2026-06-03 from Daniel's DevTools dump: viewport 1703 vs body 1718.

   `position: relative` ensures absolutely-positioned descendants are
   contained by body, not by html (prevents 100vw + margin-left:-50vw
   tricks from escaping). */
html, body {
  overflow-x: hidden;
  overflow-x: clip;
}
body {
  max-width: 100%;
  position: relative;
}

/* ─────────────────────────────────────────────────────────────
   SNIPPET BASE STYLES
   Geometry + mask wiring for the 4 decorative-pattern snippets:
   rope-divider, vertical-rope, paisley-flanks, w-mark.
   Consuming sections set the parent's `color` to control the
   decoration colour (currentColor pattern). Sections can override
   sizes by re-declaring width/height/gap on these classes.
   ─────────────────────────────────────────────────────────────*/

/* Horizontal rope divider — used by snippets/rope-divider.liquid */
.rope-divider {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rope-divider__star {
  flex-shrink: 0;
  width: 12px;
  height: auto;
}
.rope-divider__line {
  flex: 1 1 auto;
  height: var(--w-rope-h);
  min-width: 0;
  background-color: currentColor;
  -webkit-mask: var(--rope-small-mask) center / auto 100% repeat-x;
          mask: var(--rope-small-mask) center / auto 100% repeat-x;
}

/* Vertical rope divider — used by snippets/vertical-rope.liquid */
.vertical-rope {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 12px;
  align-self: stretch;
}
.vertical-rope__star {
  width: 10px;
  height: auto;
  flex-shrink: 0;
}
.vertical-rope__line {
  flex: 1 1 auto;
  width: 5px;
  min-height: 40px;
  background-color: currentColor;
  -webkit-mask: var(--rope-small-vertical-mask) center / 100% auto repeat-y;
          mask: var(--rope-small-vertical-mask) center / 100% auto repeat-y;
}

/* Paisley flanks around a heading — used by snippets/paisley-flanks.liquid */
.paisley-flanks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.paisley-flanks__paisley {
  width: 36px;
  height: auto;
  flex-shrink: 0;
}

/* W-mark glyph + adjacent star — used by snippets/w-mark.liquid */
.w-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.w-mark__w {
  width: 55px;
  height: 62px;
  background-color: currentColor;
  -webkit-mask: var(--mark-mask) center / contain no-repeat;
          mask: var(--mark-mask) center / contain no-repeat;
}
.w-mark__star {
  width: 12px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: var(--star-mask) center / contain no-repeat;
          mask: var(--star-mask) center / contain no-repeat;
}


/* ─────────────────────────────────────────────────────────────
   PAGE / HEADER BACKGROUND
   Body has Shopify's data-color-scheme attribute which carries a
   bg via the scheme CSS variables — we need higher specificity +
   !important to force the brand cream.
   ─────────────────────────────────────────────────────────────*/

html body,
html body[data-color-scheme] {
  background-color: var(--w-color-site-bg) !important;
}


/* ─────────────────────────────────────────────────────────────
   HEADER — SHOP top-level button (desktop only — hidden on mobile)
   Orange button with navy border, stars + arrow, Highway Gothic.
   ─────────────────────────────────────────────────────────────*/

.has-custom-dropdown .shop-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  background: var(--w-color-navy);
  border: none;
  border-radius: 6px;
  color: var(--w-color-off-white);
  font-family: var(--w-font-display);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 1px;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.has-custom-dropdown .shop-button {
  transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.has-custom-dropdown .shop-button:hover,
.has-custom-dropdown .shop-button:focus-visible {
  background: var(--w-color-navy-hover);
  transform: translateY(-1px);
}
.has-custom-dropdown .shop-label {
  color: inherit;
}
.has-custom-dropdown .shop-button__star {
  display: inline-block;
  width: 11px;
  height: 11px;
  background-color: currentColor;
  -webkit-mask-image: var(--star-mask);
          mask-image: var(--star-mask);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  flex-shrink: 0;
}
.has-custom-dropdown .shop-button__arrow {
  display: inline-block;
  width: 14px;
  height: 8px;
  /* Arrow tracks the SHOP button label colour (off-white on the navy
     base; hover swap on :hover handles the inverted state). */
  background-color: currentColor;
  -webkit-mask-image: var(--shop-arrow-mask);
          mask-image: var(--shop-arrow-mask);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  flex-shrink: 0;
  transition: transform 200ms ease, background-color 150ms ease;
}
.has-custom-dropdown .shop-button:hover .shop-button__arrow {
  background-color: currentColor;
}
.has-custom-dropdown .shop-button__arrow.is-open {
  transform: rotate(180deg);
}


/* ─────────────────────────────────────────────────────────────
   ANNOUNCEMENT BAR — text styling
   Color is inherited from the inline brand-color override on
   #AnnouncementBar; this rule only handles font + size + leading.
   ─────────────────────────────────────────────────────────────*/

#AnnouncementBar,
#AnnouncementBar a,
#AnnouncementBar p,
#AnnouncementBar span {
  font-family: var(--w-font-body) !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
}


/* ─────────────────────────────────────────────────────────────
   SHOP MEGA MENU CONTENT (snippet `custom-shop-menu`)
   Mobile-first: vertical list. Desktop overrides further down build
   the 2-column grid layout. The same snippet renders in both the
   desktop dropdown and the mobile sidebar nav.
   ─────────────────────────────────────────────────────────────*/

/* ── Cards: default mobile list (image left, label right) */
.mega-cards-wrap {
  min-width: 0;
}
.mega-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mega-card {
  list-style: none;
}
.mega-card a {
  display: flex !important;
  align-items: center;
  gap: 12px !important;
  text-decoration: none;
  color: var(--w-color-navy);
  padding: 6px 0;
}
.mega-card__img,
.menu-img {
  width: 56px !important;
  height: 56px !important;
  object-fit: cover;
  border-radius: 8px !important;
  background: rgba(7, 29, 73, 0.04);
  flex-shrink: 0;
}
.mega-card__label {
  font-family: var(--w-font-display);
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.292px;
  text-align: center;
  text-transform: uppercase;
  color: var(--w-color-navy);
}
.mega-card a:hover .mega-card__label {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Divider: default mobile is a thin horizontal navy line */
.mega-divider {
  list-style: none;
  border: none;
  height: 1px;
  background-color: var(--w-color-navy);
  opacity: 0.25;
  margin: 14px 0;
  padding: 0;
}
.mega-divider hr {
  display: none;
}

/* ── Quick links: vertical list, uppercase Highway Gothic navy */
.mega-links-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mega-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mega-link {
  list-style: none;
}
.mega-links .menu-extra-link {
  font-family: var(--w-font-display);
  font-weight: 400;
  font-size: 18px;
  line-height: 33px;
  letter-spacing: -0.292px;
  text-transform: uppercase;
  color: var(--w-color-navy);
  text-decoration: none;
  display: inline-block;
  padding: 4px 0;
}
.mega-links .menu-extra-link:hover,
.menu-extra-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Shop All CTA button — orange fill, no border, flanking stars.
   Typography per spec: Highway Gothic 24/19.2 uppercase navy center. */
.mega-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  background: var(--w-color-orange);
  border: none;
  border-radius: 6px;
  color: var(--w-color-navy);
  font-family: var(--w-font-body);
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 19.2px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition: filter 150ms ease;
  width: 100%;
  margin-top: 16px;
}
.mega-cta-btn:hover {
  background: var(--w-color-orange-hover);
}
.mega-cta-btn__star {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask-image: var(--star-mask);
          mask-image: var(--star-mask);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  flex-shrink: 0;
  /* Hide the unicode fallback character if present */
  font-size: 0;
}


/* ─────────────────────────────────────────────────────────────
   DESKTOP overrides — applies only to the .has-custom-dropdown
   wrapper so mobile sidebar rendering is untouched.
   ─────────────────────────────────────────────────────────────*/

@media (min-width: 992px) {

  /* Anchor the dropdown to the entire header section group so `top: 100%`
     puts it below the announcement bar + main header row. */
  .shopify-section-group-header-group {
    position: relative;
    z-index: 50;
  }

  /* Take .has-custom-dropdown OUT of the positioning chain so the dropdown
     measures from the section group above instead of the SHOP button's <li>. */
  .has-custom-dropdown {
    position: static !important;
  }

  /* Outer dropdown container — full-width band below the header.
     Inner grid is constrained via a calc'd padding so content centers
     within ~1280px on wide screens with the cream band extending edge-to-edge. */
  .has-custom-dropdown .custom-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;

    background: var(--w-color-off-white);
    border: none;
    border-radius: 0;
    box-shadow: 0 12px 24px -12px rgba(7, 29, 73, 0.18);
    transform-origin: top center;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(240px, 320px);
    gap: 32px;
    align-items: stretch;
    /* Sides match the header bar's 40px padding so the first
       mega card column lines up with the Shop button. */
    padding: 48px 40px;
  }
  .has-custom-dropdown .custom-dropdown > li {
    list-style: none;
    margin: 0;
  }

  /* Cards become a fluid grid with image above label.
     auto-fit + minmax lets columns reflow at intermediate viewports
     (992-1199) instead of locking to 5 × 140px which needs ~1180px+
     of dropdown width to fit cleanly. Above 1200px the 1fr cap holds
     each tile at ~140-160px so the layout reads as a tidy 5-col row. */
  .has-custom-dropdown .mega-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    justify-content: start;
    gap: 20px;
  }
  .has-custom-dropdown .mega-card a {
    flex-direction: column !important;
    align-items: center;
    text-align: center;
    gap: 10px !important;
    padding: 0;
  }
  .has-custom-dropdown .mega-card__img {
    width: 100% !important;
    height: auto !important;
    max-width: 140px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
  /* Wrap long labels (e.g. "Build Your Own Bundle") inside their
     column — the <span> defaults to inline so we force block + wrap. */
  .has-custom-dropdown .mega-card__label {
    display: block;
    width: 100%;
    max-width: 140px;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
  }

  /* Divider becomes a vertical rope. rope-small-vertical.svg has
     viewBox 0 0 8 13 — the rope-small path rotated -90deg. Use
     explicit pixel mask-size matching the natural aspect so the
     tile keeps its shape, then repeat-y to stack ropes down the
     full column height. mask + currentColor for navy fill. */
  .has-custom-dropdown .mega-divider {
    align-self: stretch;
    width: 3px;
    height: auto;
    background-color: currentColor;
    color: var(--w-color-navy);
    border: none;
    -webkit-mask-image: var(--rope-small-vertical-mask);
            mask-image: var(--rope-small-vertical-mask);
    /* Rope tile shrunk to 3px wide, height scaled to keep the 8:13
       intrinsic aspect (3 * 13 / 8 ≈ 4.9px). */
    -webkit-mask-size: 3px 5px;
            mask-size: 3px 5px;
    -webkit-mask-repeat: repeat-y;
            mask-repeat: repeat-y;
    -webkit-mask-position: center top;
            mask-position: center top;
    opacity: 1;
    margin: 0;
  }

  /* Right column: links stack, CTA sits at the bottom */
  .has-custom-dropdown .mega-links-wrap {
    justify-content: space-between;
    gap: 24px;
    min-width: 220px;
  }
  .has-custom-dropdown .mega-links {
    gap: 0;
  }

  /* CTA button shrinks to content width on desktop, fills bottom of column */
  .has-custom-dropdown .mega-cta-btn {
    align-self: stretch;
    width: auto;
    padding: 14px 22px;
    margin-top: 0;
  }

  /* ── Flat dropdown variant (nested_nav_style == 'dropdown')
     Reverts the full-width band layout back to a compact popup
     anchored under the Shop button. Used by wholesale. */
  .has-custom-dropdown .custom-dropdown--flat {
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    width: 240px;
    max-width: 95vw;
    min-width: 0;
    margin: 0;

    background: var(--w-color-off-white);
    border-radius: 8px;
    box-shadow: 0 12px 24px -12px rgba(7, 29, 73, 0.18);

    display: block;
    padding: 12px 0;
    gap: 0;
  }
  .has-custom-dropdown .custom-dropdown--flat .shop-dropdown-item {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .has-custom-dropdown .custom-dropdown--flat .shop-dropdown-item a {
    display: block;
    padding: 10px 20px;
    font-family: var(--w-font-body);
    font-size: 16px;
    line-height: 1.2;
    color: var(--w-color-navy);
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 150ms ease;
  }
  .has-custom-dropdown .custom-dropdown--flat .shop-dropdown-item a:hover,
  .has-custom-dropdown .custom-dropdown--flat .shop-dropdown-item a:focus-visible {
    background-color: rgba(7, 29, 73, 0.06);
  }
  .has-custom-dropdown .custom-dropdown--flat .shop-dropdown-cta a {
    margin-top: 4px;
    color: var(--w-color-orange);
    font-weight: 500;
  }


  /* Animation rules are now defined OUTSIDE the @media block so
     they don't depend on viewport ≥992px to apply (the dropdown
     itself is hidden by x-show on mobile so there's no risk). */


  /* ── Top-nav links (BUILD BUNDLE, OUR STORY, etc.)
     Per spec: Highway Gothic 18/18.31, navy, uppercase. */
  .split-nav-left .menu-link-with-icon,
  .split-nav-item > a {
    font-family: var(--w-font-body);
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 18.31px;
    color: var(--w-color-navy) !important;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-top: 6px;
    padding-bottom: 6px;
    background-image: var(--rope-small-mask);
    background-size: auto 2px;
    background-repeat: repeat-x;
    background-position: bottom center;
    transition: background-size 150ms ease;
  }
  .split-nav-left .menu-link-with-icon:hover,
  .split-nav-item > a:hover {
    background-size: auto 3px;
  }
  .split-nav-left .menu-link-with-icon::before,
  .split-nav-left .menu-link-with-icon::after,
  .split-nav-item > a::before,
  .split-nav-item > a::after {
    content: "";
    display: inline-block;
    width: 11px;
    height: 11px;
    background-color: currentColor;
    -webkit-mask-image: var(--star-mask);
            mask-image: var(--star-mask);
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    flex-shrink: 0;
    transform: translateY(-1px);
  }
}

/* ── Hard-lock the mega card grid to 5 cols at >=1200px so wide
   viewports always read as the canonical 5-up layout. Below this,
   the auto-fit + minmax(120px, 1fr) rule above reflows to 4 / 3
   columns at intermediate widths. */
@media (min-width: 1200px) {
  .has-custom-dropdown .mega-cards {
    grid-template-columns: repeat(5, 140px);
  }
}


/* ── Featured product + PDP grid-cols-12 split at intermediate widths.
   The Tailwind `lg:col-span-7` (media) + `lg:col-span-5` (content) kicks
   in at >=1024px, but at 1024-1279 the 58:42 split squashes the title +
   accordion in the content column. Force 6:6 at those widths so both
   columns scale evenly; at 1280+ the original Liquid-set ratio holds.
   Applies to .product-wrapper (PDP) and .featured-product-wrapper. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .product-wrapper.grid.grid-cols-12 > .product-media,
  .featured-product-wrapper.grid.grid-cols-12 > .product-media,
  .product-wrapper.grid.grid-cols-12 > .product-content,
  .featured-product-wrapper.grid.grid-cols-12 > .product-content {
    grid-column: span 6 / span 6 !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   HEADER — account + cart + other utility icons → navy
   Scoped to the header section group so we don't affect icons
   inside cart drawers / other sections.
   ─────────────────────────────────────────────────────────────*/

#shopify-section-header [data-utility-links],
#shopify-section-header [data-utility-links] a,
#shopify-section-header [data-utility-links] button {
  color: var(--w-color-navy) !important;
}
#shopify-section-header [data-utility-links] svg,
#shopify-section-header [data-utility-links] [class*="icon"] {
  color: var(--w-color-navy);
  fill: currentColor;
}


/* ─────────────────────────────────────────────────────────────
   MEGA MENU OPEN/CLOSE ANIMATION
   Alpine x-transition:enter/leave hooks on the <ul class=
   "custom-dropdown"> element in sections/header.liquid pass
   these class names. Outside the desktop @media block so the
   classes resolve even if Alpine fires the transition on mobile
   (the dropdown is x-show'd anyway so won't actually appear).
   ─────────────────────────────────────────────────────────────*/
.custom-dropdown-enter {
  transition: opacity 450ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
}
.custom-dropdown-leave {
  transition: opacity 280ms ease-in,
              transform 280ms ease-in;
}
.custom-dropdown-enter-from,
.custom-dropdown-leave-to {
  opacity: 0;
  transform: translateY(-20px) scaleY(0.94);
}
.custom-dropdown-enter-to,
.custom-dropdown-leave-from {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}


/* ─────────────────────────────────────────────────────────────
   WILLIES TAGLINE BAR
   ─────────────────────────────────────────────────────────────*/

.tagline-bar {
  position: relative;
  padding: 10px 16px;
}

.tagline-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  max-width: 1280px;
  margin: 0 auto;
}

.tagline-bar__stars {
  display: inline-flex;
  align-items: center;
  gap: 30px;
}
.tagline-bar__stars .star-icon {
  width: 16px;
  height: 16px;
}

.tagline-bar__text {
  font-family: var(--w-font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 19.2px;
  letter-spacing: 1.54px;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
}

@media (max-width: 640px) {
  .tagline-bar__inner {
    gap: 8px;
  }
  .tagline-bar__stars {
    gap: 6px;
  }
  .tagline-bar__stars .star-icon {
    width: 6px;
    height: 6px;
  }
  .tagline-bar__text {
    font-size: 14px;
    letter-spacing: 0.4px;
  }
}


/* ─────────────────────────────────────────────────────────────
   TEXT WITH IMAGES SECTION (sections/text-with-images.liquid)
   3-image hero layout (left | center | right) with vertical
   flanking labels, two-line heading (solid + outlined), rope
   decorator + W icon at top, orange CTA at bottom.

   Responsive:
     <768px : single center image, short ropes
     768-1023px : 3 images smaller, capped rope width
     >=1024px : full layout, ropes fill remaining space
   ─────────────────────────────────────────────────────────────*/

.twi {
  padding-top: var(--pad-top, 80px);
  padding-bottom: var(--pad-bottom, 80px);
  text-align: center;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.twi__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ── Heading group: wraps decorator + headings so width: fit-content
   shrinks to the heading text width, and the decorator's ropes only
   stretch as wide as the heading below it. */
.twi__heading-group {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* ── Top decorator: rope + W icon + rope */
.twi__decorator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 28px;
}
.twi__rope {
  flex: 1 1 auto;
  height: 3px;
  background-color: currentColor;
  -webkit-mask: var(--rope-small-mask) center / auto 100% repeat-x;
          mask: var(--rope-small-mask) center / auto 100% repeat-x;
  opacity: 0.75;
}
.twi__decor-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  object-fit: contain;
}
.twi__decor-icon--default {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: var(--mark-mask) center / contain no-repeat;
          mask: var(--mark-mask) center / contain no-repeat;
}
@media (max-width: 767px) {
  .twi__decor-icon { width: 44px; height: 44px; }
}

/* ── Headings */
.twi__heading {
  font-family: var(--w-font-display);
  font-weight: 400;
  font-size: clamp(37px, 5.5vw, 55px);
  line-height: 1.15;
  letter-spacing: -2.73px;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
}
.twi__heading--outlined {
  -webkit-text-stroke-width: 1.5px;
  -webkit-text-stroke-color: currentColor;
  -webkit-text-fill-color: transparent;
}

/* ── Images row */
.twi__images {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  margin-top: 36px;
}
.twi__image-block {
  flex-shrink: 0;
  overflow: hidden;
}
.twi__image-block img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  display: block;
}
.twi__image-block--side {
  width: 200px;
  height: 280px;
}
.twi__image-block--center {
  width: 320px;
  height: 480px;
}

/* Shapes */
.twi__image-block--shape-default  { border-radius: 0; }
.twi__image-block--shape-oval     { border-radius: 50%; }
.twi__image-block--shape-arch     { border-radius: 50% 50% 8px 8px; }
.twi__image-block--shape-circle   { aspect-ratio: 1; height: auto; border-radius: 50%; }
.twi__image-block--shape-rectangle { border-radius: 8px; }

/* ── Vertical labels (flanking center image) */
.twi__label {
  writing-mode: vertical-rl;
  font-family: var(--w-font-display);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 2px;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* Left label flipped 180° so it reads bottom-up, mirroring the right one. */
.twi__label--left {
  transform: rotate(180deg);
}
@media (max-width: 767px) {
  .twi__label {
    font-size: 18px;
    letter-spacing: var(--w-ls-wide);
  }
}

/* Outer stars — flank the whole image row at the section's far left + right.
   Three stars per side, stacked vertically with a 20px gap between each. */
.twi__outer-stars {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
  align-self: center;
}
.twi__outer-star {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
/* Stars flanking the vertical label at top + bottom — removed per
   Daniel 2026-06-02. Left the rule in place (display: none) so the
   selector + comment remain discoverable if we ever bring them back. */
.twi__label::before,
.twi__label::after {
  display: none;
}

/* ── CTA — sized to the centre image above */
.twi__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--w-color-orange);
  border: 1px solid var(--w-color-navy);
  border-radius: 6px;
  color: var(--w-color-navy) !important;
  font-family: var(--w-font-display);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 150ms ease;
  margin: 0 auto;
  width: 320px;
  max-width: 100%;
}
.twi__btn:hover {
  background: var(--w-color-orange-hover);
}
.twi__btn-star {
  width: 12px;
  height: 12px;
}
.twi__btn-label {
  color: var(--w-color-navy, #071D49);
  text-align: center;
  font-family: var(--w-font-body);
  font-size: 33px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

/* ── Responsive */
@media (max-width: 767px) {
  /* Hide side images + outer star columns (left + right) on mobile */
  .twi__image-block--side { display: none; }
  .twi__outer-stars       { display: none; }
  .twi__image-block--center {
    width: clamp(220px, 65vw, 320px);
    height: clamp(320px, 90vw, 480px);
  }
  .twi__images { gap: 24px; margin-top: 24px; }
  .twi__label  { font-size: 18px; letter-spacing: var(--w-ls-wide); }
  .twi__btn {
    padding: 12px 22px;
    font-size: 14px;
    width: 100%;
    margin-top: 36px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .twi__image-block--side   { width: 160px; height: 224px; }
  .twi__image-block--center { width: 260px; height: 380px; }
  .twi__images { gap: 48px; }
  .twi__btn    { width: 260px; }
}


/* ─────────────────────────────────────────────────────────────
   PRODUCT WITH INSIGHTS (sections/product-with-insights.liquid)
   Top pills row → heading + subheading → two-column insights
   flanking a centered product image → orange CTA.
   ─────────────────────────────────────────────────────────────*/

.pwi {
  padding-top: var(--pad-top, 80px);
  padding-bottom: var(--pad-bottom, 60px);
  background-size: 100% auto;
  background-position: center bottom;
  background-repeat: no-repeat;
  overflow: hidden;
}
/* Mobile: anchor bg so the top of the image lines up with the top of
   the first question (the questions sit roughly mid-section after the
   heading + subheading + pills). background-size: 100% auto keeps the
   image at full width so its top edge is a clean horizontal cut. */
@media (max-width: 767px) {
  .pwi {
    background-size: 100% auto;
    background-position: center 70%;
  }
}

/* Content alignment */
.pwi--align-left   { text-align: left; }
.pwi--align-center { text-align: center; }
.pwi--align-right  { text-align: right; }
.pwi__inner {
  max-width: var(--max-site-width);
  margin: 0 auto;
  padding: 0 16px;
}

/* ── Top pills row */
.pwi__pills {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 64px;
  flex-wrap: wrap;
}
.pwi__pill-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  list-style: none;
}
/* Image variant — pre-designed SVG/PNG replaces the text pill */
.pwi__pill-wrap--image { gap: 0; }
.pwi__pill-image {
  display: block;
  height: 140px;
  width: 140px;
  max-width: 100%;
  object-fit: contain;
}
@media (max-width: 767px) {
  /* Mobile: keep all 3 pills on one row. Each pill takes a third of
     the available width (minus the row gap), capped at 140px so wider
     mobile viewports don't blow them up beyond the desktop size. */
  .pwi__pills {
    flex-wrap: nowrap;
  }
  .pwi__pill-wrap--image {
    flex: 1 1 0;
    min-width: 0;
  }
  .pwi__pill-image {
    height: auto;
    width: 100%;
    max-width: 90px;
    aspect-ratio: 1 / 1;
    margin-inline: auto;
  }
}

/* image-with-logo-overlay 500px height option */
.pt-500 { padding-top: 500px; }

/* ─────────────────────────────────────────────────────────────
   Responsive content width utilities. Backed by the --content-*
   token scale declared in :root. Sections opt in via the
   `content_width` schema select (narrow/default/wide/full).
   - .max-w-narrow  — forms, FAQ list, focused prose
   - .max-w-default — default content (heading + columns + body)
   - .max-w-wide    — galleries, grids, carousels
   - .max-w-full    — full bleed (heroes, image strips)
   margin: 0 auto centers them in the section.
   ─────────────────────────────────────────────────────────────*/
.max-w-narrow  { max-width: var(--content-narrow);  margin-left: auto; margin-right: auto; }
.max-w-default { max-width: var(--content-default); margin-left: auto; margin-right: auto; }
.max-w-wide    { max-width: var(--content-wide);    margin-left: auto; margin-right: auto; }
.max-w-full    { max-width: var(--content-full);    margin-left: auto; margin-right: auto; }
.pwi__pill-accent {
  font-family: var(--w-font-display);
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.5px;
  line-height: 1;
  text-transform: uppercase;
}
.pwi__pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 18px;
  background-color: transparent;
  border-radius: 999px;
  font-family: var(--w-font-display);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.5px;
  line-height: 1.1;
  text-transform: uppercase;
  min-width: 110px;
}
/* Border style variants on the section, applied to inner pills */
.pwi--pill-solid  .pwi__pill { border: 1px solid currentColor; }
.pwi--pill-dotted .pwi__pill { border: 1.5px dotted currentColor; }
.pwi--pill-none   .pwi__pill { border: none; }
.pwi__pill-line { display: block; }

/* ── Optional rope + W mark above the heading */
.pwi__brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0 auto 24px;
  color: rgb(var(--color-scheme-text));
}
/* No max-width on the wrapper or the rope lines, so the mark spans the
   same width as the heading below it (both fill .pwi__inner). */
.pwi__brand-mark .rope-divider__line {
  flex: 1 1 0;
}

/* ── Heading + subheading */
.pwi__heading {
  font-family: var(--w-font-display);
  font-weight: 400;
  font-size: clamp(32px, 5vw, 55px);
  line-height: 0.98; /* 54/55 per Figma node 2026:8607 */
  letter-spacing: var(--w-ls-tight);
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 12px;
}
.pwi__heading-line {
  display: block;
}
.pwi__heading-line--first {
  color: var(--w-color-navy, #071D49);
  text-align: center;
  font-family: var(--w-font-display);
  font-size:      var(--w-text-display-lg-size);
  font-style: normal;
  font-weight: 400;
  /* line-height kept tighter than token-default 63/42 to match the
     stacked-lines look in Figma (node 2026:8607) — 49 desktop pairs
     with the 55px size; mobile uses 0.9 of the 44px token size. */
  line-height: 49px;
  letter-spacing: var(--w-ls-tight);
  text-transform: uppercase;
}
@media (max-width: 767px) {
  .pwi__heading-line--first {
    font-size: 40px;
    line-height: 40px;
  }
}
/* Desktop: stars flank the heading first line via explicit
   <span class="star-icon pwi__heading-star"> markup. The first-line
   span becomes a flex container so the stars sit OUTSIDE the wrapping
   text block (vertically centered against the text), rather than
   inline with the text (which made them land at line-1-start +
   line-2-end when the heading wrapped — Daniel's screenshot 2026-06-03).

   Inner .pwi__heading-text holds the text so it can wrap internally
   while the stars stay at outer left/right of the whole text block. */
.pwi__heading-line--first:has(.pwi__heading-star) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.15em;
}
.pwi__heading-line--first .pwi__heading-text {
  display: inline-block;
}
@media (min-width: 768px) {
  .pwi__heading-line--first .pwi__heading-text {
    max-width: 70%;
  }
}

/* Section h2 (.inline-heading-rte.heading-standard) — 16px side
   padding on mobile so long headings ("Beverages Crafted by Willie
   Nelson", etc.) don't run edge-to-edge on narrow viewports. */
@media (max-width: 767px) {
  /* Judge.me histogram frequency column hidden on mobile (per Daniel). */
  .jdgm-histogram__frequency {
    display: none !important;
  }
}
.pwi__heading-line--first .pwi__heading-star {
  width: 0.5em;
  height: 0.5em;
  flex-shrink: 0;
}

/* Mobile: stars move to a row ABOVE the heading at the outer
   corners (per Figma). Hide the inline first-line stars and
   absolutely position fresh stars at the h2's top-left / top-right. */
@media (max-width: 767px) {
  .pwi__heading-line--first .pwi__heading-star {
    display: none;
  }
  .pwi--heading-stars .pwi__heading {
    position: relative;
    /* 30px star height + 24px gap = 54px reserved above heading text */
    padding-top: 54px;
  }
  .pwi--heading-stars .pwi__heading::before,
  .pwi--heading-stars .pwi__heading::after {
    content: "";
    position: absolute;
    top: 0;
    width: 30px;
    height: 30px;
    background-color: currentColor;
    -webkit-mask: url('star.svg') center / contain no-repeat;
            mask: url('star.svg') center / contain no-repeat;
  }
  .pwi--heading-stars .pwi__heading::before { left: 16px; }
  .pwi--heading-stars .pwi__heading::after  { right: 16px; }
}
.pwi__subheading {
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: clamp(18px, 2.4vw, 33px);
  letter-spacing: 2px;
  line-height: 1.65; /* 54.667/33 per Figma node 2026:8608 */
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 32px;
  /* Outlined per Figma: scheme-text colour drives the stroke; fill is transparent */
  color: rgb(var(--color-scheme-text));
  -webkit-text-stroke: 1.5px currentColor;
  -webkit-text-fill-color: transparent;
}
@media (max-width: 767px) {
  .pwi__subheading { font-size: 27px; }
}

/* ── 3-col body: insights-left | product image | insights-right */
.pwi__body {
  display: grid;
  grid-template-columns: 250px auto 250px;
  gap: 32px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

/* ── Insight columns */
.pwi__col {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
/* (flex:1 1 0 equal-height rule on .pwi__col .pwi__insight removed —
   it squished tall insights so their text overflowed through the
   rope divider on top of the next item, same root cause as the
   product-spec-sheet break. Rope alignment across cols sacrificed
   for layout correctness.) */
.pwi__col--left  { text-align: inherit; }
.pwi__col--right { text-align: inherit; }

.pwi__insight { list-style: none; }
.pwi__insight + .pwi__insight {
  position: relative;
  padding-top: 41px;
}
.pwi__insight + .pwi__insight::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  height: var(--w-rope-h);
  background-color: rgb(var(--color-scheme-text));
  -webkit-mask: var(--rope-small-mask) center / auto 100% repeat-x;
          mask: var(--rope-small-mask) center / auto 100% repeat-x;
}

/* Toggle button is a transparent shell — styled like a heading on desktop,
   becomes an interactive control in mobile accordion mode. */
.pwi__insight-toggle {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  background: none;
  border: 0;
  text-align: inherit;
  color: inherit;
  cursor: default;
  font: inherit;
}
.pwi__insight-heading {
  font-family: var(--w-font-display);
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 22.7px);
  line-height: 1.05; /* 24/22.7 per Figma */
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
.pwi__insight-chevron {
  display: none; /* Hidden by default — accordion mode reveals it on mobile */
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 32px;
  line-height: 1;
  font-weight: 700;
  /* Follows the scheme text colour for the same reason the accordion
     dividers do: hardcoded navy vanished against the gummies navy
     background. Light schemes resolve this to navy anyway, so the
     drinks pages are unchanged. */
  color: rgb(var(--color-scheme-text));
  transition: transform 200ms ease;
}
.pwi__insight-desc {
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: clamp(14px, 1.4vw, 18px);
  letter-spacing: 0.3px;
  line-height: 22px; /* per Figma node 2026:8583 */
  text-transform: uppercase;
  margin: 0;
}

/* ── Product image (center column) */
.pwi__product-image {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pwi__product-image img {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
}

/* ── CTA */
.pwi__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 36px;
  background: var(--pwi-btn-bg, var(--w-color-orange));
  border: 0;
  border-radius: 6px;
  color: var(--w-color-navy) !important;
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 33px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 150ms ease;
  margin-top: 8px;
}
.pwi__btn:hover { background: var(--pwi-btn-bg-hover, var(--w-color-orange-hover)); }
.pwi__btn-description {
  max-width: 1086px;
  margin: 16px auto 0;
  font-family: var(--w-font-body);
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 21px; /* 140% */
  text-align: center;
  text-transform: uppercase;
  color: var(--w-color-off-white);
}
.pwi__btn-star  { width: 12px; height: 12px; }

/* Mobile-only secondary CTA (between image and insights) — hidden ≥768px */
.pwi__btn--mobile-only { display: none; }

/* Desktop: the bottom CTA stretches to roughly the bottle image's width
   so the two visually align below the body grid. :not() excludes the
   mobile-only sibling — otherwise display:flex here overrides the
   display:none rule above (same specificity, later source wins) and
   the mobile-only button takes column 3 of the body grid, pushing the
   right-hand insight column onto a new row. */
@media (min-width: 768px) {
  .pwi__btn:not(.pwi__btn--mobile-only) {
    display: flex;
    width: 100%;
    max-width: 360px;
    margin: 8px auto 0;
  }
}

/* ── Responsive */
@media (max-width: 767px) {
  /* Both .pwi__btn variants render full-width on mobile so they
     span the section's inner content box (which already has the
     section's horizontal padding applied). */
  .pwi__btn,
  .pwi__btn--mobile-only {
    display: flex;
    width: 100%;
  }
  .pwi__pills {
    gap: 0;
    margin-bottom: 36px;
    justify-content: space-between;
  }
  .pwi__pill {
    min-width: 88px;
    padding: 8px 12px;
    font-size: 10px;
  }
  .pwi__pill-accent { font-size: 8px; }
  .pwi__body {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  /* Mobile order: image first, then insights stacked */
  .pwi__product-image { order: 1; }
  .pwi__col--left     { order: 2; }
  .pwi__col--right    { order: 3; }
  .pwi__product-image img { width: 75%; height: auto; max-height: none; }

  /* Mobile-only CTA between image and insights — display flips
     from `none` (default above) to flex via the unified rule at
     the top of this @media block. Just zero out the desktop
     margin-top here so it sits flush. */
  .pwi__btn--mobile-only {
    margin-top: 0;
  }

  /* Accordion mode on mobile
     One 3px divider between items (border-top on every item +
     border-bottom on the very last so the accordion is bounded top
     and bottom). Tried top + bottom on every item — created a 4px
     doubled-line look between adjacent items.

     The divider follows the colour scheme's TEXT colour, so it always
     matches the heading it sits under. It was hardcoded to navy, which
     on the gummies navy background rendered navy-on-navy and read as
     no divider at all — same failure as the order-summary strikethrough
     and the global focus ring. Scheme-native also keeps it correct on
     light schemes, where the text is navy and so is the line. */
  .pwi--mobile-accordion .pwi__insight {
    border-top: 3px solid rgb(var(--color-scheme-text));
    padding: 0;
    background-image: none !important;
  }
  .pwi--mobile-accordion .pwi__col:last-child .pwi__insight:last-child {
    border-bottom: 3px solid rgb(var(--color-scheme-text));
  }
  .pwi--mobile-accordion .pwi__insight-toggle {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 14px 0;
    margin: 0;
    text-align: left;
  }
  .pwi--mobile-accordion .pwi__insight-heading {
    font-family: var(--w-font-display);
    font-size: 15px;
    font-weight: 400;
    line-height: 19.2px;
  }
  .pwi--mobile-accordion .pwi__insight-chevron {
    display: inline-block;
  }
  .pwi--mobile-accordion .pwi__insight.is-open .pwi__insight-chevron {
    transform: rotate(180deg);
  }
  .pwi--mobile-accordion .pwi__insight-desc {
    display: none;
    padding: 0 0 14px;
    text-align: left;
    font-family: var(--w-font-body);
    font-size: 16px;
    line-height: 19.2px;
    text-transform: none;
  }
  .pwi--mobile-accordion .pwi__insight.is-open .pwi__insight-desc {
    display: block;
  }
  /* Both insight columns flow as one continuous accordion */
  .pwi--mobile-accordion .pwi__col {
    gap: 0;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .pwi__body { gap: 24px; }
  .pwi__product-image img { max-height: 440px; }
}


/* Icon list defensive overrides removed 2026-05-28 — they were written to
   neutralise the Sunmed-era frontend.css icon-list block, which was deleted
   in commit 76e65e4. Two rules in this defensive block used `var(--scheme-background)`
   and `var(--scheme-text)` (wrong variable names — should be --color-scheme-*),
   which made `background-color` resolve to transparent under !important, killing
   the colour-scheme picker on icon-list sections. Block removed cleanly; the
   section's native bg-scheme-background class now drives the bg correctly. */


/* ─────────────────────────────────────────────────────────────
   SCROLLING LOGOS (sections/scrolling-logos.liquid)
   The theme already drives the horizontal scroll via a CSS keyframe
   animation called `scrolling-items` on the <scrolling-items> custom
   element. We add:
     1. A mask-image fade on left + right edges
     2. A safety overflow:clip on the section + content area so the
        track can't push the viewport horizontally on any device.
   Scoped via the wrapper class `scrolling-logos-wrap` added to
   the section in sections/scrolling-logos.liquid.
   ─────────────────────────────────────────────────────────────*/

.scrolling-logos-wrap {
  overflow: hidden;
}
.scrolling-logos-wrap .section-content {
  overflow: hidden;
}
.scrolling-logos-wrap scrolling-items-container {
  display: block;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    black 30%,
    black 70%,
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    transparent 0,
    black 30%,
    black 70%,
    transparent 100%
  );
}

/* Mobile: pull the fade closer to the edges so more logos stay visible */
@media (max-width: 640px) {
  .scrolling-logos-wrap scrolling-items-container {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      black 4%,
      black 96%,
      transparent 100%
    );
            mask-image: linear-gradient(
      to right,
      transparent 0,
      black 4%,
      black 96%,
      transparent 100%
    );
  }
}


/* ─────────────────────────────────────────────────────────────
   DIVIDER SECTION (sections/divider.liquid)
   Standalone rope divider with token-driven color via mask-image.
   Independent overlap amounts on mobile vs desktop so the rope can
   bleed into either the section above or below at different sizes
   per breakpoint. The "rope" mask source is divider-navy.svg
   (path is identical across the 4 color variants — color is set
   by background-color, not by the SVG's hardcoded fill).
   ─────────────────────────────────────────────────────────────*/

/* Ripped-paper divider — works as both standalone section AND inline
   block inside any section. The 100vw + symmetric -50vw lateral margins
   make it escape any parent container's max-width/padding. The vertical
   margins are negative to bleed the divider INTO adjacent layout space. */
.divider-section {
  position: relative;
  z-index: 2;
  width: 100vw !important;
  max-width: 100vw !important;
  left: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  margin-top:    calc(-1 * var(--divider-overlap-above-mobile, 0px)) !important;
  margin-bottom: calc(-1 * var(--divider-overlap-below-mobile, 0px)) !important;
  padding: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  overflow: visible !important;
}
@media (min-width: 768px) {
  .divider-section {
    margin-top:    calc(-1 * var(--divider-overlap-above-desktop, 0px)) !important;
    margin-bottom: calc(-1 * var(--divider-overlap-below-desktop, 0px)) !important;
  }
}

/* Standalone Divider section wrapper — same transparent + overflow-visible
   treatment so the inner div's 100vw escape doesn't get clipped. */
.shopify-section.shopify-section-divider {
  background-color: transparent !important;
  background-image: none !important;
  overflow: visible !important;
  padding: 0 !important;
}


/* ─────────────────────────────────────────────────────────────
   CUSTOM PRODUCT GRID (sections/custom-product-grid.liquid)
   Per spec: cream Highway Gothic Expanded heading + product
   titles, plain Highway Gothic shop link with a rope underline.
   The legacy Tailwind text-white classes have been removed from
   the section markup so these rules win without !important.
   ─────────────────────────────────────────────────────────────*/
[id*="__custom_product_grid"] h2.inline-heading-rte {
  color: var(--w-color-off-white);
  font-family: var(--w-font-display);
  font-weight: 400;
  font-style: normal;
  font-size: 26px;
  line-height: 26.88px;
  letter-spacing: 1.12px;
  text-transform: uppercase;
  text-align: center;
}
/* "Choose your favorite Willies" spec's tight tracking, not the
   +1.12px the shared rule above gives the navy "All Products" band. */
[id*="__custom_product_grid_4GGFcY"] h2.inline-heading-rte {
  letter-spacing: var(--w-ls-tight);
}
[id*="__custom_product_grid"] .block-item h3 {
  color: var(--w-color-off-white);
  font-family: var(--w-font-display);
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -1.3px;
  text-align: center;
  text-transform: uppercase;
}
/* Jagged-oval product frame.
   .oval-frame contains an absolutely-stacked .oval-frame__shape
   (the white torn-paper oval bg) + .oval-frame__img (the product
   render, positioned slightly above the oval top so it appears
   sitting in the frame).
   The shape uses mask-image with oval-frame-jagged.svg — current
   asset is a feTurbulence-driven placeholder; swap that file for
   the designer's final torn-paper oval and the CSS stays the same. */
[id*="__custom_product_grid"] .oval-frame {
  position: relative;
  width: 125px;
  height: 200px;
  z-index: 1;
}
[id*="__custom_product_grid"] .oval-frame__shape {
  position: absolute;
  inset: 0;
  background-color: var(--w-color-white);
  -webkit-mask-image: url("oval-frame-jagged.svg");
          mask-image: url("oval-frame-jagged.svg");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
/* PNG-based oval — used when section.settings.oval_image is set. Positioned
   identically to the CSS shape so the product image inside still lands right. */
[id*="__custom_product_grid"] .oval-frame__shape-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
/* No negative `top` here. It lifted the product image above the white oval
   behind it, so the top of every bottle/can sat outside the shape and read as
   cropped. With top:auto the image sits at its static position inside the
   frame. The mobile companion offset in the max-width:767px block below was
   removed for the same reason — dropping only this one left the crop on
   phones. */
[id*="__custom_product_grid"] .oval-frame__img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 200px;
  width: auto;
  z-index: 2;
  max-width: none;
}

[id*="__custom_product_grid"] .shop-now-link {
  position: relative;
  display: inline-block;
  color: var(--w-color-off-white);
  font-family: var(--w-font-body);
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  line-height: 18.31px;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 8px;
  margin-top: 20px;
}
/* Rope under the shop link — same mask + currentColor pattern
   used elsewhere so the rope is exact cream regardless of bg. */
[id*="__custom_product_grid"] .shop-now-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.5px;
  background-color: currentColor;
  -webkit-mask: var(--rope-small-mask) center / auto 100% repeat-x;
          mask: var(--rope-small-mask) center / auto 100% repeat-x;
  transition: height 150ms ease;
}
[id*="__custom_product_grid"] .shop-now-link:hover::after {
  height: 3px;
}

/* ── Mobile overrides per Figma spec (≤767px) ───────────────── */
@media (max-width: 767px) {
  [id*="__custom_product_grid"] h2.inline-heading-rte {
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 1.12px;
  }
  [id*="__custom_product_grid"] .block-item h3 {
    font-size: 16px;
    line-height: 23.285px;
    letter-spacing: -1.514px;
  }
  [id*="__custom_product_grid"] .shop-now-link {
    font-size: 21px;
    line-height: 21.317px;
  }
  [id*="__custom_product_grid"] .oval-frame {
    width: 145.529px;
    height: 232.847px;
  }
  /* Scale product image to match the larger oval (was 200px height to
     match the 200px oval; new oval is 232.847 → bump image + the -25px
     "sit in the frame" offset proportionally). */
  [id*="__custom_product_grid"] .oval-frame__img {
    height: 232.847px;
  }
}


/* ─────────────────────────────────────────────────────────────
   WILLIES HERO SECTION (sections/willies-hero.liquid)
   Purpose-built flexible hero. Per-block typography is set
   inline by the section's <style> blocks; this file handles
   the structural layout, rope decorations, icon row, and CTA
   button color palettes.
   ─────────────────────────────────────────────────────────────*/

.willies-hero {
  position: relative;
  overflow: hidden;
  min-height: var(--willies-hero-min-h-mobile, 500px);
  padding-top: var(--willies-hero-pt-mobile, 32px);
  padding-bottom: var(--willies-hero-pb-mobile, 32px);
  /* Side padding follows the sitewide --section-x-padding so the hero
     lines up with every other section's horizontal gutters. */
  padding-left: var(--section-x-padding);
  padding-right: var(--section-x-padding);
}
@media (min-width: 768px) {
  .willies-hero {
    min-height: var(--willies-hero-min-h-desktop, 600px);
    padding-top: var(--willies-hero-pt-desktop, 64px);
    padding-bottom: var(--willies-hero-pb-desktop, 64px);
    /* Desktop side padding also follows sitewide --section-x-padding so
       the hero aligns with every other section's horizontal gutters. */
    padding-left: var(--section-x-padding);
    padding-right: var(--section-x-padding);
  }
}

/* Background image — absolute, cover, focal point from setting.
   Implemented as CSS background-image on the .willies-hero__bg div
   (per-section inline <style>) so the desktop/mobile swap is a
   pure @media swap with no picture/source/img element complexity. */
.willies-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: var(--willies-hero-bg-size, cover);
  background-position: var(--willies-hero-bg-pos, center center);
  background-repeat: no-repeat;
}

/* Two-column layout — mobile stacks; desktop flexes */
.willies-hero__layout {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--willies-hero-col-gap-mob, 32px);
  width: 100%;
  max-width: none;
}
@media (min-width: 768px) {
  .willies-hero__layout {
    flex-direction: row;
    align-items: center;
    gap: var(--willies-hero-col-gap, 60px);
    max-width: 1440px;
    margin: 0 auto;
  }
}

/* Hero image position — desktop: absolute pinned to the section's
   bottom-left or bottom-right corner. Bottom is a negative offset
   equal to the section's padding-bottom so the image hugs the true
   bottom edge of the section, ignoring the inner padding. */
@media (min-width: 768px) {
  .willies-hero--image-desktop-left .willies-hero__image,
  .willies-hero--image-desktop-right .willies-hero__image {
    position: absolute;
    bottom: calc(-1 * var(--willies-hero-pb-desktop, 80px));
    z-index: 1;
    pointer-events: none;
  }
  .willies-hero--image-desktop-left .willies-hero__image  { left: 0; }
  .willies-hero--image-desktop-right .willies-hero__image { right: 0; }
  .willies-hero--image-desktop-hidden .willies-hero__image { display: none; }
}

/* Mobile image position — above / below / behind / hidden */
.willies-hero--image-mobile-above .willies-hero__image   { order: 0; }
.willies-hero--image-mobile-above .willies-hero__content { order: 1; }
.willies-hero--image-mobile-below .willies-hero__image   { order: 1; }
.willies-hero--image-mobile-below .willies-hero__content { order: 0; }
.willies-hero--image-mobile-hidden .willies-hero__image  { display: none; }

/* Behind: hero image absolute-positioned behind content (overlay style) */
@media (max-width: 767px) {
  .willies-hero--image-mobile-behind .willies-hero__image {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .willies-hero--image-mobile-behind .willies-hero__image img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover;
  }
  .willies-hero--image-mobile-behind .willies-hero__content {
    position: relative;
    z-index: 2;
  }
}

/* Content column */
.willies-hero__content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
}
@media (min-width: 768px) {
  .willies-hero__content {
    flex: 1 1 auto;
    max-width: var(--willies-hero-content-max, 800px);
  }
}

/* Content alignment — desktop */
@media (min-width: 768px) {
  .willies-hero--align-desktop-left .willies-hero__content   { align-items: flex-start; text-align: left; }
  .willies-hero--align-desktop-center .willies-hero__content { align-items: center;     text-align: center; margin-left: auto; margin-right: auto; }
  .willies-hero--align-desktop-right .willies-hero__content  { align-items: flex-end;   text-align: right;  margin-left: auto; }
  .willies-hero--valign-desktop-top .willies-hero__layout    { align-items: flex-start; }
  .willies-hero--valign-desktop-center .willies-hero__layout { align-items: center; }
  .willies-hero--valign-desktop-bottom .willies-hero__layout { align-items: flex-end; }
}
/* Content alignment — mobile */
@media (max-width: 767px) {
  .willies-hero--align-mobile-left .willies-hero__content   { align-items: flex-start; text-align: left; }
  .willies-hero--align-mobile-center .willies-hero__content { align-items: center;     text-align: center; }
  .willies-hero--align-mobile-right .willies-hero__content  { align-items: flex-end;   text-align: right; }
}

/* Hero image column — free-flowing img, no cropping.
   On desktop the column hugs the bottom of the layout row so the
   product/lifestyle imagery sits flush at the bottom of the
   section (respecting padding-bottom). The image inside is still
   centered within the column for tight crops. */
.willies-hero__image {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex: 0 0 auto;
}
@media (min-width: 768px) {
  .willies-hero__image {
    align-self: flex-end;
  }
}
.willies-hero__image img {
  width: auto;
  height: auto;
  display: block;
  /* max-width / max-height set inline per section instance */
}

/* ─────────────────────────────────────────────────────────────
   Block — text row, with per-decoration rope above/below
   Rope rendered via ::before/::after with mask + currentColor
   so the rope picks up the chosen text color (or the override
   via --willies-hero-rope-color).
   ─────────────────────────────────────────────────────────────*/
.willies-hero-block {
  position: relative;
  max-width: 100%;
}
/* Per-viewport alignment — desktop wins above 768px, mobile below. */
@media (min-width: 768px) {
  .willies-hero-block--align-desktop-left   { align-self: flex-start; text-align: left; }
  .willies-hero-block--align-desktop-center { align-self: center;     text-align: center; }
  .willies-hero-block--align-desktop-right  { align-self: flex-end;   text-align: right; }
  .willies-hero-block--align-desktop-inherit { align-self: stretch; }
}
@media (max-width: 767px) {
  .willies-hero-block--align-mobile-left   { align-self: flex-start; text-align: left; }
  .willies-hero-block--align-mobile-center { align-self: center;     text-align: center; }
  .willies-hero-block--align-mobile-right  { align-self: flex-end;   text-align: right; }
  .willies-hero-block--align-mobile-inherit { align-self: stretch; }
}
/* Backwards-compat for any blocks still using the old combined class
   (pre-2026-05-23-evening edit). Safe to remove once all instances
   have been re-saved in admin. */
.willies-hero-block--text-align-left   { align-self: flex-start; text-align: left; }
.willies-hero-block--text-align-center { align-self: center;     text-align: center; }
.willies-hero-block--text-align-right  { align-self: flex-end;   text-align: right; }
.willies-hero-block--text-align-inherit { align-self: stretch; }

/* Split alignment — used by text block where block-position and text-direction
   need independent controls. --balign-* sets only align-self (block's spot in
   the column); --talign-* sets only text-align (direction text runs inside the
   block). */
@media (min-width: 768px) {
  .willies-hero-block--balign-desktop-left   { align-self: flex-start; }
  .willies-hero-block--balign-desktop-center { align-self: center; }
  .willies-hero-block--balign-desktop-right  { align-self: flex-end; }
  .willies-hero-block--balign-desktop-inherit { align-self: stretch; }
  .willies-hero-block--talign-desktop-left   { text-align: left; }
  .willies-hero-block--talign-desktop-center { text-align: center; }
  .willies-hero-block--talign-desktop-right  { text-align: right; }
  .willies-hero-block--talign-desktop-inherit { text-align: inherit; }
}
@media (max-width: 767px) {
  .willies-hero-block--balign-mobile-left   { align-self: flex-start; }
  .willies-hero-block--balign-mobile-center { align-self: center; }
  .willies-hero-block--balign-mobile-right  { align-self: flex-end; }
  .willies-hero-block--balign-mobile-inherit { align-self: stretch; }
  .willies-hero-block--talign-mobile-left   { text-align: left; }
  .willies-hero-block--talign-mobile-center { text-align: center; }
  .willies-hero-block--talign-mobile-right  { text-align: right; }
  .willies-hero-block--talign-mobile-inherit { text-align: inherit; }
}

.willies-hero-block--text {
  width: 100%;
}
.willies-hero-block--text .willies-hero-block__text {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Rope decorations on text blocks */
.willies-hero-block--decoration-above .willies-hero-block__text,
.willies-hero-block--decoration-below .willies-hero-block__text,
.willies-hero-block--decoration-both .willies-hero-block__text {
  position: relative;
  padding-top: 22px;
  padding-bottom: 22px;
}
.willies-hero-block--decoration-above .willies-hero-block__text { padding-bottom: 0; }
.willies-hero-block--decoration-below .willies-hero-block__text { padding-top: 0; }
.willies-hero-block--decoration-above .willies-hero-block__text::before,
.willies-hero-block--decoration-both  .willies-hero-block__text::before,
.willies-hero-block--decoration-below .willies-hero-block__text::after,
.willies-hero-block--decoration-both  .willies-hero-block__text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.9px;
  background-color: var(--willies-hero-rope-color, currentColor);
  -webkit-mask: var(--rope-small-mask) center / auto 100% repeat-x;
          mask: var(--rope-small-mask) center / auto 100% repeat-x;
}
.willies-hero-block--decoration-above .willies-hero-block__text::before,
.willies-hero-block--decoration-both  .willies-hero-block__text::before {
  top: 0;
}
.willies-hero-block--decoration-below .willies-hero-block__text::after,
.willies-hero-block--decoration-both  .willies-hero-block__text::after {
  bottom: 0;
}

/* ─────────────────────────────────────────────────────────────
   Block — SVG row
   ─────────────────────────────────────────────────────────────*/
.willies-hero-block--svg {
  width: 100%;
}
.willies-hero-block--svg img,
.willies-hero-block--svg picture {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}
.willies-hero-block--svg.willies-hero-block--text-align-center img { margin-left: auto; margin-right: auto; }
.willies-hero-block--svg.willies-hero-block--text-align-right  img { margin-left: auto; }

/* ─────────────────────────────────────────────────────────────
   Block — icons row
   ─────────────────────────────────────────────────────────────*/
.willies-hero-block--icons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--willies-hero-icon-gap, 20px);
  align-items: flex-start;
  width: 100%;
  justify-content: center;
}
.willies-hero-block--icons-align-left   { justify-content: flex-start; }
.willies-hero-block--icons-align-center { justify-content: center; }
.willies-hero-block--icons-align-right  { justify-content: flex-end; }
.willies-hero-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: var(--willies-hero-icon-size, 90px);
}
.willies-hero-icon img,
.willies-hero-icon__mask {
  width: var(--willies-hero-icon-size, 90px);
  height: var(--willies-hero-icon-size, 90px);
  display: block;
  flex-shrink: 0;
}
.willies-hero-icon img {
  object-fit: contain;
}
/* Asset-fallback SVGs: mask-image + background-color gives a
   pixel-perfect tint to the exact theme color (here #F1E9E5
   cream). The <span class="willies-hero-icon__mask"> has the
   mask URL set inline by the section. */
.willies-hero-icon__mask {
  background-color: var(--w-color-off-white);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
.willies-hero-icon__label {
  font-family: var(--w-font-display);
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-align: center;
  color: inherit;
}

/* ─────────────────────────────────────────────────────────────
   Block — CTA button, with hover-inverse per universal rule
   ─────────────────────────────────────────────────────────────*/
.willies-hero-block--cta {
  width: 100%;
}
.willies-hero-cta {
  /* inline-flex (not flex+width:100%) so the button sizes to its content
     and the block's alignment classes (align-self / text-align) can actually
     position it left/center/right within the column. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 40px;
  border-radius: 6px;
  border: none;
  text-decoration: none;
  font-family: var(--w-font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
@media (max-width: 767px) {
  .willies-hero-cta {
    gap: 10px;
    padding: 14px 32px;
    font-size: 18px;
  }
}
.willies-hero-cta--bordered { border: 1px solid var(--w-color-navy); }

.willies-hero-cta__star {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask-image: var(--star-mask);
          mask-image: var(--star-mask);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .willies-hero-cta__star {
    width: 11px;
    height: 11px;
  }
}

/* Color palettes — default + token-darkened hover. Hover swaps the bg
   to the colour's *-hover variant; text colour stays unchanged per
   Daniel (font colour should not shift on hover). */
.willies-hero-cta--cream       { background: var(--w-color-off-white);   color: var(--w-color-navy); }
.willies-hero-cta--cream:hover { background: var(--w-color-off-white-hover); }

.willies-hero-cta--navy        { background: var(--w-color-navy);        color: var(--w-color-off-white); }
.willies-hero-cta--navy:hover  { background: var(--w-color-navy-hover); }

.willies-hero-cta--orange      { background: var(--w-color-orange);       color: var(--w-color-navy); }
.willies-hero-cta--orange:hover{ background: var(--w-color-orange-hover); }

.willies-hero-cta--red-orange       { background: var(--w-color-red-orange);    color: var(--w-color-navy); }
.willies-hero-cta--red-orange:hover { background: var(--w-color-red-orange-hover); }

.willies-hero-cta--pale-yellow      { background: var(--w-color-pale-yellow);   color: var(--w-color-navy); }
.willies-hero-cta--pale-yellow:hover{ background: var(--w-color-pale-yellow-hover); }

.willies-hero-cta--berry       { background: var(--w-color-berry);        color: var(--w-color-off-white); border-color: var(--w-color-off-white); }

.willies-hero-cta--purple-mid       { background: var(--w-color-purple-mid);  color: var(--w-color-off-white); }
.willies-hero-cta--purple-mid:hover { background: var(--w-color-purple-mid-hover); }
.willies-hero-cta--berry:hover { background: var(--w-color-berry-hover); }


/* ─────────────────────────────────────────────────────────────
   ICON LIST SECTION — icon row spacing
   The 4 stamps should sit 60px apart from each other, centered
   as a group on the page rather than stretched edge-to-edge.
   The default markup gives each li `md:flex-1` so they spread
   to fill the section width.
   ─────────────────────────────────────────────────────────────*/
@media (min-width: 768px) {
  [id*="__icon_list"] ul.feature-icon-list {
    gap: 60px;
    justify-content: center;
  }
  [id*="__icon_list"] ul.feature-icon-list > li {
    flex: 0 0 auto;
    max-width: none;
  }
}


/* ─────────────────────────────────────────────────────────────
   ICON LIST SECTION — heading + subheading typography
   The icon-list section renders section.settings.title as <h2>
   and section.settings.subheading as <h4>. Per spec the heading
   is Highway Gothic Expanded 48/60 cream, and the subheading
   uses the same rope underline pattern as the top-nav links.
   Scoped to .shopify-section-icon-list so other sections aren't
   affected.
   ─────────────────────────────────────────────────────────────*/
[id*="__icon_list"] h2.inline-heading-rte,
[id*="__icon_list"] .heading-standard {
  color: var(--w-color-off-white);
  font-family: var(--w-font-display);
  font-weight: 400;
  font-style: normal;
  font-size: 48px;
  line-height: 60px;
  letter-spacing: -2.485px;
  text-transform: uppercase;
  text-align: left;
  width: 100%;
  max-width: 580px;
}
/* SVG alternatives for title / subheading. Match the text-version
   max-widths so layout doesn't jump when toggling. */
[id*="__icon_list"] .icon-list__title-image {
  display: block;
  width: 100%;
  max-width: 580px;
  height: auto;
}
[id*="__icon_list"] .icon-list__subheading-image-wrap {
  position: relative;
  display: inline-block;
  /* Cap to parent column width so the SVG honours the section's
     side padding on narrow viewports (was overflowing because
     inline-block sizes to the image's intrinsic width). */
  max-width: 100%;
  margin-top: 12px;
  padding-top: 20px;
  padding-bottom: 20px;
  color: var(--w-color-off-white);
}
[id*="__icon_list"] .icon-list__subheading-image-wrap::before,
[id*="__icon_list"] .icon-list__subheading-image-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background-color: currentColor;
  -webkit-mask: var(--rope-small-mask) center / auto 100% repeat-x;
          mask: var(--rope-small-mask) center / auto 100% repeat-x;
}
[id*="__icon_list"] .icon-list__subheading-image-wrap::before { top: 0; }
[id*="__icon_list"] .icon-list__subheading-image-wrap::after { bottom: 0; }

/* Rope toggle (Show rope around subheading image = OFF in section settings) */
[id*="__icon_list"] .icon-list__subheading-image-wrap--no-rope::before,
[id*="__icon_list"] .icon-list__subheading-image-wrap--no-rope::after { display: none; }

/* Top column split — controlled by section setting `column_layout`.
   Each column carries `--col-width` inline; default 50/50 if unset. */
@media (min-width: 768px) {
  [id*="__icon_list"] .icon-list-col {
    flex: 0 0 var(--col-width, 50%);
    max-width: var(--col-width, 50%);
  }
}
[id*="__icon_list"] .icon-list__subheading-image {
  display: block;
  width: 100%;
  height: auto;
}


/* ─────────────────────────────────────────────────────────────
   ICON LIST SECTION — column layout
   Outer container .custom-justify-around holds the left text
   column (heading + subheading) and the right side_image column.
   - Desktop: 175px gap between columns, clamped down on
     narrower viewports so they don't overflow.
   - Heading column shrinks to fit its 580px max-width;
     image column takes remaining space.
   - Mobile (<768px): the outer is block-flow so columns stack
     full-width; no gap rule needed.
   ─────────────────────────────────────────────────────────────*/
@media (min-width: 768px) {
  [id*="__icon_list"] .custom-justify-around {
    gap: clamp(40px, 12vw, 175px);
    align-items: center;
  }
  [id*="__icon_list"] .custom-justify-around > div:first-child {
    flex: 0 1 580px;
  }
  [id*="__icon_list"] .custom-justify-around > div:last-child {
    flex: 1 1 auto;
  }
}


/* ─────────────────────────────────────────────────────────────
   ICON LIST SECTION — mobile 2x2 stamps grid
   The section's liquid switches to grid-cols-2 on mobile when
   layout_on_mobile=wrap and the icon count isn't divisible by 3
   (which is true with 4 icons). Set the row + column gap explicitly.
   ─────────────────────────────────────────────────────────────*/
@media (max-width: 767px) {
  [id*="__icon_list"] ul.feature-icon-list {
    gap: 32px;
    justify-items: center;
  }
}
[id*="__icon_list"] h4.inline-heading-rte {
  position: relative;
  display: inline-block;
  color: var(--w-color-off-white);
  font-family: var(--w-font-display);
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 12px;
  padding-top: 8px;
  padding-bottom: 8px;
}
/* Rope above + below via pseudo-elements so we can mask-recolor
   the rope SVG with currentColor (cream from the h4 text). The
   background-image approach uses the SVG's baked-in navy fill. */
[id*="__icon_list"] h4.inline-heading-rte::before,
[id*="__icon_list"] h4.inline-heading-rte::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.9px;
  background-color: currentColor;
  -webkit-mask: var(--rope-small-mask) center / auto 100% repeat-x;
          mask: var(--rope-small-mask) center / auto 100% repeat-x;
}
[id*="__icon_list"] h4.inline-heading-rte::before {
  top: 0;
}
[id*="__icon_list"] h4.inline-heading-rte::after {
  bottom: 0;
}


/* ─────────────────────────────────────────────────────────────
   NATIVE SHAPE_DIVIDER BLOCK — ripped-paper variant
   The snippet sets `shape-divider--ripped-paper` on the .shape-divider
   element when style starts with "ripped-paper-".

   Two things going on here:

   1. translateY(±50%) shifts the SVG so its vertical centre sits
      on the section boundary — the .shape-divider wrapper stays
      anchored at top:0 / bottom:0 (per the snippet) and only the
      visible SVG is offset.

   2. min-height: 24px on the SVG container keeps the rip readable
      at every viewport. The snippet sets `padding-top: 2%` for
      the 1200×24 ripped-paper asset (aspect-ratio trick), so the
      rendered height tracks viewport width — 24px on desktop,
      ~7.5px on a 375px phone. That's too thin to read on mobile
      ("rip floating in a thin line"). The min-height floor keeps
      the asset at its desktop pixel size at narrow viewports;
      the SVG (preserveAspectRatio="none") just stretches to fit.
   ───────────────────────────────────────────────────────────── */
.shape-divider--ripped-paper .shape-divider-svg-container {
  min-height: 24px;
}
/* Mobile floor — ripped-paper only, since the rip is the brand divider
   and has the thinnest aspect (1453x23 = ~6px at 375px viewport).
   preserveAspectRatio="none" on the outer <svg> (snippet) lets the rip
   stretch to fill this 48px. Non-ripped divider styles keep their
   natural aspect (they're path geometry, not raster), so they're left
   alone here to avoid visual distortion. */
@media (max-width: 767px) {
  .shape-divider--ripped-paper .shape-divider-svg-container {
    min-height: 48px;
  }
}
.shape-divider--ripped-paper-above .shape-divider-svg-container {
  transform: translateY(-50%);
}
.shape-divider--ripped-paper-below .shape-divider-svg-container {
  transform: translateY(50%);
}
.shopify-section.shopify-section-divider [data-color-scheme],
.shopify-section.shopify-section-divider .color-scheme,
.shopify-section.shopify-section-divider .bg-scheme-background {
  background-color: transparent !important;
  background-image: none !important;
}

.divider-section__paper {
  display: block;
  width: 100%;
  height: var(--divider-h-mobile, 16px);
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  max-width: none !important;
}
@media (min-width: 768px) {
  .divider-section__paper {
    height: var(--divider-h-desktop, 24px);
  }
}


/* ─────────────────────────────────────────────────────────────
   HEADER BACKGROUND + LAYOUT
   The visible bar is .headerBorderWrap (assets/base.bundle.css:6832
   sets background:#F1E9E5). Override to --w-color-off-white default
   and navy when mobile menu opens. Alpine binding
   :class="{ 'is-mobile-menu-open': mobileMenuOpen }" added on the
   element in sections/header.liquid.

   Padding spec: 20px top / 25px bottom / 40px sides (desktop).
   ─────────────────────────────────────────────────────────────*/
.headerBorderWrap {
  background: var(--w-color-off-white) !important;
  transition: background-color 200ms ease;
}
/* When menu is open the header bar stays OFF-WHITE so it reads as one
   continuous cream panel with the mobile-nav (which is off-white too).
   Previously it turned navy and looked like a separate band sitting on
   top of the cream menu, which Daniel flagged as a visual seam. */
.headerBorderWrap.is-mobile-menu-open {
  background: var(--w-color-off-white) !important;
}

/* Mobile-menu-open text colours — navy on the off-white bar. */
.headerBorderWrap.is-mobile-menu-open,
.headerBorderWrap.is-mobile-menu-open [data-utility-links],
.headerBorderWrap.is-mobile-menu-open [data-utility-links] a,
.headerBorderWrap.is-mobile-menu-open [data-utility-links] button,
.headerBorderWrap.is-mobile-menu-open .menu-link-with-icon,
.headerBorderWrap.is-mobile-menu-open .split-nav-item > a {
  color: var(--w-color-navy) !important;
}

/* The OUTER <header> element (parent of headerBorderWrap) also gets
   Tailwind `bg-[var(--w-color-navy)] text-white` when mobileMenuOpen
   is true (see header.liquid:734/740/750 :class bindings). That painted
   navy around the headerBorderWrap edges and broke the cream-continuity
   look. Use :has() to detect the open state on a descendant and force
   the wrapping <header> to off-white as well. :has() is Chrome 105+,
   Safari 15.4+, Firefox 121+ — broad enough for this brand. */
header:has(.headerBorderWrap.is-mobile-menu-open) {
  background-color: var(--w-color-off-white) !important;
  color: var(--w-color-navy) !important;
}

/* Header bar padding. The existing inline style block in
   sections/header.liquid sets #headerBorderWrap padding-top:15px on
   desktop and 0 on mobile — override with our spec values.
   Mobile gets tighter sides (16px) so a 150px logo + hamburger
   fit comfortably on narrow viewports. */
#headerBorderWrap.headerBorderWrap {
  padding: 14px 16px 16px !important;
}
@media (min-width: 992px) {
  #headerBorderWrap.headerBorderWrap {
    padding: 12px 24px !important;
  }
}
/* base.bundle.css:6836-6842 constrains #headerContainer to
   max-width:1070px and adds 30px padding-bottom. We want the outer
   .headerBorderWrap padding to be the only spacing, full-width
   content. */
#headerContainer {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* The inner .px-section adds another 45px bottom padding
   (base.bundle.css:6844). Zero it. */
#headerContainer .px-section,
#headerContainer .overflow-hidden.px-section {
  padding: 0 !important;
}


/* ─────────────────────────────────────────────────────────────
   DESKTOP HEADER LAYOUT — equal spacing between EVERY visible
   item (Shop button, Build Bundle, logo, right-nav links, login
   utility, cart utility). The default markup wraps these in 3
   column containers (.split-nav-{left,center,right}-container),
   so space-between only spaces the 3 wrappers, not the actual
   items inside.

   Fix: `display: contents` on the column wrappers AND the inner
   .split-nav-left / .split-nav-menu / .split-nav-links ul makes
   their children behave as direct flex children of the outer
   row. Then space-between on the outer flex distributes ALL
   the leaf items at equal intervals.
   ─────────────────────────────────────────────────────────────*/
@media (min-width: 992px) {
  /* Outer header row. NB: the original rule used
     `#headerContainer > .flex.items-center.justify-items-center`,
     but there's an `overflow-hidden px-section py-2 lg:py-0` wrapper
     between #headerContainer and the outer row, so the > combinator
     never matched. Switched to a descendant match on .headerBorderWrap
     (fixed 2026-06-09 after Daniel flagged unequal spacing). */
  .headerBorderWrap .flex.items-center.justify-items-center {
    display: grid !important;
    grid-template-columns: 1fr 1fr auto 1fr 1fr;
    align-items: center !important;
    justify-items: center;
    width: 100% !important;
  }
  /* Pin SHOP + the utility group to the outer edges so the row reads
     left -> center -> right instead of bunching at the centre column.
     NB: .split-nav-item:first-child was previously included but actually
     only matched OUR STORY (its <li> is the only one with .split-nav-item
     in the right column), pulling it left out of its track centre. */
  .headerBorderWrap .split-nav-left > ul > li:first-child {
    justify-self: start;
  }
  .headerBorderWrap .willies-utility-group,
  .headerBorderWrap .split-nav-right-container > *:last-child {
    justify-self: end;
  }
  /* Pin the LOGO to the centre column (col 3) and the utility group to
     the last column (col 5). Without these, when the number of leaf
     items is fewer than 5 (e.g. wholesale: SHOP + LOGO + utility = 3
     items), grid auto-placement packs them into cols 1-3 and the logo
     ends up off-centre. Pinning gives:
       DTC (5 items): SHOP=1 / BUILD BUNDLE=2 / LOGO=3 / Our Story=4 / util=5
       Wholesale (3): SHOP=1 / [2 empty] / LOGO=3 / [4 empty] / util=5
     Either way LOGO sits dead-centre and utility hugs the right edge. */
  .headerBorderWrap h2.h2.font-heading,
  .headerBorderWrap div.h2.font-heading {
    grid-column: 3;
  }
  .headerBorderWrap .willies-utility-group {
    grid-column: 5;
  }
  /* Dissolve the 3 column wrappers + their inner wrappers so each leaf
     item (Shop / Build Bundle / Logo / Our Story / utility-group)
     becomes a direct flex child of the outer row. !important so we beat
     Tailwind's `lg:flex` etc. on .split-nav-menu. */
  .headerBorderWrap .split-nav-left-container,
  .headerBorderWrap .split-nav-center-container,
  .headerBorderWrap .split-nav-right-container,
  .headerBorderWrap .split-nav-left,
  .headerBorderWrap .split-nav-menu,
  .headerBorderWrap .split-nav-left > ul,
  .headerBorderWrap .split-nav-menu > ul,
  .headerBorderWrap .split-nav-links {
    display: contents !important;
  }
  /* Hide the dead login-text wrapper (its accounts text is
     duplicated by the new .willies-utility-group). */
  .headerBorderWrap .split-nav-right-container > .login {
    display: none !important;
  }
  /* Each leaf item should size to its content; flex doesn't get
     to stretch them. Override Tailwind `inline-block h-full` so the
     <a> inside isn't stranded at the top of a 100%-height li (which
     would otherwise stretch to match the tallest grid track item
     — the logo H2 — and pin its <a> against the top edge). */
  .headerBorderWrap .split-nav-item,
  .headerBorderWrap .split-nav-left > ul > li {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center !important;
    height: auto !important;
  }
}
/* ─────────────────────────────────────────────────────────────
   STICKY HEADER — hide on scroll down, reveal on scroll up
   The script in sections/header.liquid (gated on the sticky_header
   setting) toggles .header-hidden on the [data-sticky-header]
   element based on scroll direction. The transform is applied to
   the sticky SECTION WRAPPER (via :has) rather than the inner
   data-island: translating only the inner element left a painted
   strip pinned at the top of the page (border/backdrop at wrapper
   level — flagged by SA 31/07). Moving the wrapper hides every
   painted layer together. No will-change here: a permanent
   containing block would break position:fixed descendants
   (menu/cart drawers).
   ─────────────────────────────────────────────────────────────*/
.shopify-section:has([data-sticky-header]) {
  transition: transform 250ms ease;
}
.shopify-section:has([data-sticky-header].header-hidden) {
  transform: translateY(-100%);
}
/* Don't hide the header while any nav/menu drawer is open. */
.shopify-section:has([data-sticky-header].header-is-active.header-hidden),
.shopify-section:has([data-sticky-header].is-mobile-menu-open.header-hidden) {
  transform: none;
}

/* ─────────────────────────────────────────────────────────────
   HEADER LOGO — 150px wide, auto height, centered in column
   Dropped #shopify-section-header prefix because header-group
   sections render with #shopify-section-sections--XXX__header,
   not #shopify-section-header. Scope via .headerBorderWrap
   instead.
   ─────────────────────────────────────────────────────────────*/
.headerBorderWrap .willies-logo-swap,
.headerBorderWrap .logo-image {
  width: 150px !important;
  max-width: 150px !important;
  margin: 0 auto !important;
  line-height: 1;
  font-size: 0;
}

/* The logo's parent <h2> uses Tailwind `py-2.5 text-l md:text-xl lg:text-3xl`
   which adds 10px padding + a 30px inline-baseline gap below the <img>,
   shifting the logo's visible centre below the row centre. Strip the
   inline-baseline gap + padding so the logo's BBox centre matches its
   visible centre — then the grid's align-items: center actually lines
   up the logo with the text nav links. */
.headerBorderWrap h2:has(.logo-image),
.headerBorderWrap h2:has(.willies-logo-swap) {
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.headerBorderWrap .willies-logo-swap > img,
.headerBorderWrap .logo-image > img,
.headerBorderWrap .willies-logo-swap__navy,
.headerBorderWrap .willies-logo-swap__cream {
  width: 150px !important;
  max-width: 150px !important;
  height: auto !important;
  display: block;
  margin: 0 auto !important;
}


/* ─────────────────────────────────────────────────────────────
   RIGHT COLUMN — keep nav links + utility group on one line
   The parent wrapper at sections/header.liquid:1018 has
   `flex flex-wrap items-center justify-end` which wraps the
   OUR STORY nav UL above the LOG IN | CART utility group.
   ─────────────────────────────────────────────────────────────*/
.headerBorderWrap [data-utility-links] {
  flex-wrap: nowrap !important;
  gap: 24px;
}
.headerBorderWrap .split-nav-right-container,
.headerBorderWrap .split-nav-left-container {
  flex-wrap: nowrap !important;
}
.headerBorderWrap .split-nav-menu {
  flex-shrink: 1;
}


/* ─────────────────────────────────────────────────────────────
   RIGHT-SIDE UTILITY GROUP — icon+label pairs with divider
   Markup is in sections/header.liquid:1123-1145 (the new
   .willies-utility-group block that replaced the old separate
   {{ accounts }} text + hardcoded account icon + raw cart_button).

   Display is NOT set here — the markup uses Tailwind `hidden lg:flex`
   to control visibility (hidden on mobile, flex on desktop). Setting
   display:flex globally would beat .hidden via same-specificity
   later-in-cascade and leak the group onto mobile.
   ─────────────────────────────────────────────────────────────*/
.willies-utility-group {
  align-items: center;
  gap: 14px;
  font-family: var(--w-font-body);
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  color: var(--w-color-navy);
  white-space: nowrap;
}
.willies-utility-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}
.willies-utility-link:hover {
  text-decoration: none;
  opacity: 0.7;
}
.willies-utility-icon {
  width: 16px !important;
  height: 16px !important;
  display: inline-block;
  flex-shrink: 0;
}
.willies-utility-divider {
  width: 1px;
  height: 18px;
  background: currentColor;
  opacity: 0.4;
  display: inline-block;
}
/* Mobile: keep utility icons, drop the labels (parked pending
   designer mockup). Divider also hidden so the two icons read as
   a clean pair. Icons bumped from 16px to 24px so they don't look
   undersized on touch viewports. */
@media (max-width: 991px) {
  .willies-utility-label,
  .willies-utility-divider {
    display: none;
  }
  .willies-utility-icon {
    width: 24px !important;
    height: 24px !important;
  }
  .willies-utility-group {
    gap: 16px;
  }
}


/* ─────────────────────────────────────────────────────────────
   TOP NAV — no wrap (keep Shop button + Build Bundle on one line
   on the left, and the remaining links on one line on the right).
   ─────────────────────────────────────────────────────────────*/
.split-nav-left > ul,
.split-nav-left .split-nav-left-ul,
.split-nav-links {
  flex-wrap: nowrap !important;
  white-space: nowrap;
}
.split-nav-left .menu-link-with-icon,
.split-nav-item > a {
  white-space: nowrap;
}


/* ─────────────────────────────────────────────────────────────
   LOGO SWAP — navy default, cream when mobile menu is open
   Two img tags rendered in sections/header.liquid; container
   gets `.is-mobile-menu-open` via :class when Alpine
   `mobileMenuOpen` is true.
   ─────────────────────────────────────────────────────────────*/
.willies-logo-swap {
  position: relative;
}
.willies-logo-swap > img {
  display: block;
  margin: 0 auto;
  transition: opacity 150ms ease;
}
.willies-logo-swap__cream {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}
/* Logo stays navy in both states per Daniel 2026-06-08. The cream
   variant is kept in markup (still loaded eagerly) in case we want
   to swap on dark schemes elsewhere, but the mobile-menu-open opacity
   swap is intentionally dropped. */


/* ─────────────────────────────────────────────────────────────
   PDP — product heading block (exact Figma typography spec)
   Rendered by snippets/willies-product-block-heading.liquid inside
   <section class="willies-main-product"> on the .template-product body.

   Legacy frontend.css rules use the same 4-class selector chain
   (.template-product .willies-main-product .product-block-X .product-block-Y),
   so I match the chain here — rebrand.css loads after frontend.css, so
   source-order makes my rule win at the same specificity.

   Per-seltzer overrides in frontend.css (5+ classes including product
   handle) still outrank these — preserved for the alt template pass.
   ─────────────────────────────────────────────────────────────*/
/* Heading uses explicit margins (not flex gap) so each spacing pair can
   be individually tuned to spec. */
[class^="template-product"] .willies-main-product .product-block-heading {
  display: block;
}
/* "WILLIE'S REMEDY+" eyebrow — 8px to title below */
[class^="template-product"] .willies-main-product .product-block-heading .product-block-brand {
  color: var(--w-color-cobalt);
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  text-transform: uppercase;
  margin: 0 0 8px;
}
/* Main product title — h1.font-heading per the legacy chain.
   The template-product h1 carries `.font-heading` class on it; including
   that here bumps specificity to (0, 5, 1) to match the existing rule.
   8px below to shortname/size. */
[class^="template-product"] .willies-main-product .product-block-heading .product-block-title {
  margin: 0 0 8px;
}
[class^="template-product"] .willies-main-product .product-block-heading .product-block-title h1.font-heading,
[class^="template-product"] .willies-main-product .product-block-heading .product-block-title h2.font-heading {
  color: var(--w-color-navy);
  font-family: var(--w-font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 36px;
  letter-spacing: -0.76px;
  text-transform: uppercase;
  margin: 0;
}
/* Subtitle / size — "750ml". 4px below to reviews row. Doubled
   .product-block-shortname class ties per-seltzer 0,0,5,0; rebrand
   source order wins. Accent-driven colour + uppercase per Daniel. */
/* Non-seltzers (bundles / spirits / shots / merch / etc.) → cobalt.
   Seltzers override below to use the per-product accent variable. */
[class^="template-product"] .willies-main-product .product-block-heading .product-block-shortname.product-block-shortname,
[class^="template-product"] #shopify-section-template--23847429243127__main .product-block-heading .product-block-shortname.product-block-shortname {
  color: var(--w-color-cobalt) !important;
  text-transform: uppercase !important;
}
/* Seltzers — accent (berry on BCL, orange on POG, red-orange on
   strawberry, navy on variety). Extra [class*=seltzer] attribute
   selector bumps specificity over the non-seltzer rule above. */
[class*="template-product"][class*="seltzer"] .willies-main-product .product-block-heading .product-block-shortname.product-block-shortname,
[class*="template-product"][class*="seltzer"] #shopify-section-template--23847429243127__main .product-block-heading .product-block-shortname.product-block-shortname {
  color: var(--stay-ai-selected-accent-color, var(--w-color-cobalt)) !important;
}
[class^="template-product"] .willies-main-product .product-block-heading .product-block-shortname {
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  margin: 0 0 4px;
}

/* Judge.me review preview badge — stars + "4.8/5 Read 991 reviews".
   Stars accent/orange, surrounding text + link use the body font.
   40px below the badge to step 1. */
[class^="template-product"] .willies-main-product .product-block-judge-me-reviews-preview-badge {
  margin-bottom: 40px;
}
[class^="template-product"] .willies-main-product .product-block-judge-me-reviews-preview-badge .jdgm-prev-badge__stars .jdgm-star,
[class^="template-product"] .willies-main-product .product-block-judge-me-reviews-preview-badge .jdgm-star {
  color: var(--w-color-orange) !important;
}
[class^="template-product"] .willies-main-product .product-block-judge-me-reviews-preview-badge .jdgm-prev-badge__text {
  color: var(--w-color-navy);
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 15.6px;
  line-height: normal;
}
[class^="template-product"] .willies-main-product .product-block-judge-me-reviews-preview-badge .jdgm-prev-badge__text a {
  color: var(--w-color-navy);
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 15.6px;
  line-height: normal;
  text-decoration: underline;
  text-underline-offset: auto;
}


/* ─────────────────────────────────────────────────────────────
   PDP — steps block (exact Figma typography spec)
   Same 4-class selector chain as the heading block above.
   ─────────────────────────────────────────────────────────────*/

/* "1." number — plain navy text prefix, no colored circle */
[class^="template-product"] .willies-main-product .product-block-steps .ac-trigger .step-number {
  color: var(--w-color-navy);
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 25px;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  width: auto;
  height: auto;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  display: inline;
}
[class^="template-product"] .willies-main-product .product-block-steps .ac-trigger .step-number::after {
  content: ".";
}
/* Step title text — navy uppercase. .orange class on the title gets
   overridden because we include it in the selector. */
[class^="template-product"] .willies-main-product .product-block-steps .ac-trigger .step-title,
[class^="template-product"] .willies-main-product .product-block-steps .ac-trigger .step-title.orange {
  color: var(--w-color-navy);
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 25px;
  text-transform: uppercase;
}
/* Selected dose label below the step title — "10 MG THC HIGH DOSE".
   .step-title-group included to bump specificity over the legacy
   .step-title-group .selected-value rule that paints it orange.
   Colour drives off the per-product accent. */
[class^="template-product"] .willies-main-product .product-block-steps .ac-trigger .step-title-group .selected-value {
  color: var(--stay-ai-selected-accent-color, var(--w-color-navy)) !important;
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 24px;
  line-height: 25px;
  text-transform: uppercase;
}
@media (max-width: 989px) {
  [class^="template-product"] .willies-main-product .product-block-steps .ac-trigger .step-title-group .selected-value {
    font-size: 20px;
  }
}
/* Radio-card label "5 MG THC" inside .group-option — accent colour
   per Daniel; PDP accent drives the dose/flavour label colour. */
[class^="template-product"] .willies-main-product .product-block-steps .group-option .group-label {
  color: var(--stay-ai-selected-accent-color, var(--w-color-navy)) !important;
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 24px;
  line-height: normal;
}
@media (max-width: 989px) {
  [class^="template-product"] .willies-main-product .product-block-steps .group-option .group-label {
    font-size: 18px;
  }
}

/* Per-flavor card title — each .group-option pins to its own brand color
   via href match, so the flavor picker shows correct colours regardless of
   which product page you're viewing (BCL card stays berry on POG page, etc.). */
[class^="template-product"] .product-block-steps .group-option[href*="black-cherry-lime"] .group-label {
  color: var(--w-color-berry) !important;
}
[class^="template-product"] .product-block-steps .group-option[href*="pog"]:not([href*="pog-2-copy"]) .group-label,
[class^="template-product"] .product-block-steps .group-option[href*="passion-orange-guava"] .group-label {
  color: var(--w-color-orange) !important;
}
/* pog-2-copy is the Strawberry Watermelon handle (cloned from POG) — red, not orange */
[class^="template-product"] .product-block-steps .group-option[href*="pog-2-copy"] .group-label,
[class^="template-product"] .product-block-steps .group-option[href*="strawberry-watermelon"] .group-label {
  color: var(--w-color-red-orange) !important;
}
/* Step cards (flavor + dose): unselected labels read faded navy so
   the selected card (own flavour colour) carries the state. Doubled
   .group-option lifts specificity to (0,7,0) — beats both the
   per-flavour href rules above (0,5,0) and the accent-var label rule
   (0,6,0). Hover stays NAVY (full opacity as the interactive cue) —
   accent only ever appears on the selected card. */
[class^="template-product"] .product-block-steps .group-option.group-option:not(.selected) .group-label {
  color: var(--w-color-navy) !important;
  opacity: 0.6;
}
[class^="template-product"] .product-block-steps .group-option.group-option:not(.selected):hover .group-label {
  color: var(--w-color-navy) !important;
  opacity: 1;
}
/* Card border on hover: the per-flavour rules in frontend.css paint
   it in the flavour colour (ID-scoped + !important). Unselected cards
   should hover NAVY — accent border stays selected-only. Doubled
   .group-option + :not(.selected) + matching ID variant outguns them. */
[class^="template-product"] .willies-main-product .product-steps-accordion .group-option.group-option:not(.selected):hover,
[class^="template-product"] #shopify-section-template--23847429243127__main .product-steps-accordion .group-option.group-option:not(.selected):hover {
  border-color: var(--w-color-navy) !important;
}
/* Radio circle: unselected cards get faded navy (matches the label
   treatment); only the selected card's radio carries the accent. */
[class^="template-product"] .product-block-steps .group-option:not(.selected) .group-option-radio {
  border-color: var(--w-color-navy);
  opacity: 0.6;
}
[class^="template-product"] .product-block-steps .group-option:not(.selected):hover .group-option-radio {
  opacity: 1;
}
/* Quantity card summary list (8 EACH / $7 PER CAN rich-text metafield) —
   accent on the selected card, faded navy on the rest. */
[class^="template-product"] .quantity-option-card .metafield-rich_text_field {
  color: var(--w-color-navy);
  opacity: 0.6;
}
[class^="template-product"] .quantity-option-card:has(input:checked) .metafield-rich_text_field {
  color: var(--stay-ai-selected-accent-color, var(--w-color-navy));
  opacity: 1;
}
/* Pack size (12PACK) + gift lines (+ FREE SHIPPING etc.) — same
   treatment: flavour colour only on the selected card, faded navy on
   the rest. Doubled scope (+ID variant) mirrors the per-flavour
   selectors in frontend.css so this wins on every template. */
[class^="template-product"] .willies-main-product .product-steps-accordion .quantity-option-card:not(:has(input:checked)) .quantity-count,
[class^="template-product"] #shopify-section-template--23847429243127__main .product-steps-accordion .quantity-option-card:not(:has(input:checked)) .quantity-count,
[class^="template-product"] .willies-main-product .product-steps-accordion .quantity-option-card:not(:has(input:checked)) .quantity-gifts .gift-orange,
[class^="template-product"] #shopify-section-template--23847429243127__main .product-steps-accordion .quantity-option-card:not(:has(input:checked)) .quantity-gifts .gift-orange,
[class^="template-product"] .willies-main-product .product-steps-accordion .quantity-option-card:not(:has(input:checked)) .quantity-gifts .gift-text,
[class^="template-product"] #shopify-section-template--23847429243127__main .product-steps-accordion .quantity-option-card:not(:has(input:checked)) .quantity-gifts .gift-text {
  color: var(--w-color-navy) !important;
  opacity: 0.6;
}
/* Unselected quantity card border on hover: navy, not the flavour
   accent — same treatment as the group-option cards. */
[class^="template-product"] .willies-main-product .product-steps-accordion .quantity-option-card.quantity-option-card:not(:has(input:checked)):hover,
[class^="template-product"] #shopify-section-template--23847429243127__main .product-steps-accordion .quantity-option-card.quantity-option-card:not(:has(input:checked)):hover {
  border-color: var(--w-color-navy) !important;
}
[class^="template-product"] .product-block-steps .group-option[href*="seltzer-variety"] .group-label {
  color: var(--w-color-navy) !important;
}

/* #12 Step 2 heading "2. HOW MANY BOTTLES?" — slightly larger than steps 1/3 */
[class^="template-product"] .willies-main-product .product-block-steps .step-2 .ac-trigger .step-number,
[class^="template-product"] .willies-main-product .product-block-steps .step-2 .ac-trigger .step-title {
  font-size: 17px;
}

/* #9 / #16 HIDE / EDIT toggle in the step header */
[class^="template-product"] .willies-main-product .product-block-steps .ac-trigger .hide-toggle,
[class^="template-product"] .willies-main-product .product-block-steps .ac-trigger .edit-link {
  color: rgba(42, 85, 171, 0.50);
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.28px;
  text-align: right;
}

/* #13 "1 BOTTLE" selected value (step 2) — already matches Daniel's #8 spec */

/* #14 "BUY 2 SAVE $10" pill — copper accent text */
[class^="template-product"] .willies-main-product .product-block-steps .buy-save-pill,
[class^="template-product"] .willies-main-product .product-block-steps .save-pill {
  color: #A7662B;
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: -0.42px;
  text-transform: uppercase;
}

/* #15 "ADD MORE +" link */
[class^="template-product"] .willies-main-product .product-block-steps .add-more,
[class^="template-product"] .willies-main-product .product-block-steps .add-more-link {
  color: var(--w-color-cobalt);
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.28px;
  text-align: right;
}


/* ─────────────────────────────────────────────────────────────
   PDP — Stay AI subscription widget
   Two cards: Subscribe & Save (selected/orange) + One-Time Purchases.
   Subscribe card has a "MOST POPULAR: GET 20% OFF" orange banner at top
   added via ::before, flanked by 3 stars on each side.
   ─────────────────────────────────────────────────────────────*/

/* Container — stack with gap between the two cards.
   Stay AI sometimes renders One-Time first; flex `order` keeps the
   Subscribe & Save card on top regardless of DOM order. */
[class^="template-product"] .willies-main-product .stayai-widget {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
[class^="template-product"] .willies-main-product .stayai-widget .stayai-purchase-label:has([data-stayai-subscription-price]) {
  order: 1;
}
[class^="template-product"] .willies-main-product .stayai-widget .stayai-purchase-label:has([data-stayai-onetime-price]) {
  order: 2;
}

/* Both cards — base style */
[class^="template-product"] .willies-main-product .stayai-purchase-label {
  display: block;
  position: relative;
  border: 2px solid #D8D2CE;
  border-radius: 12px;
  background: transparent;
  padding: 18px 20px;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}

/* Subscribe card always reserves space for the banner above the content. */
[class^="template-product"] .willies-main-product .stayai-purchase-label:has([data-stayai-subscription-price]) {
  padding-top: 60px;
  overflow: hidden;
}
/* Selected card (either one) — cream bg + 2px orange border, 12px radius. */
[class^="template-product"] .willies-main-product .stayai-purchase-label.is-selected {
  border: 2px solid var(--w-color-orange);
  border-radius: 12px;
  background: #FFFAEC;
}
/* Neutralize Stay AI CDN's inner-wrapper background/border on both cards
   so the parent label's bg + border are the only paint. */
[class^="template-product"] .willies-main-product .stayai-purchase-label .stayai-purchase-label__wrapper {
  background: transparent;
  border: 0;
  color: inherit;
}

/* #18 MOST POPULAR banner — orange full-width band at top of selected card.
   "MOST POPULAR: GET 20% OFF" centered with 2 white 15px stars on each
   side rendered via background-image. (Was 3/side; the inner 98px pair
   overlapped the centered nowrap text — the desktop PDP column keeps
   the card at ~460-475px even on wide viewports.) */
[class^="template-product"] .willies-main-product .stayai-purchase-label:has([data-stayai-subscription-price])::before {
  content: var(--most-popular-copy, "MOST POPULAR: GET 20% OFF");
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 42px;
  background-color: var(--w-color-orange);
  color: #FFF;
  font-family: var(--w-font-display);
  font-weight: 400;
  font-size: 17.4px;
  line-height: 42px;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 15' fill='white'><path d='M8 0l1.94 5.97h6.27l-5.07 3.69 1.94 5.97L8 11.94l-5.08 3.69 1.94-5.97L0 5.97h6.27z'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 15' fill='white'><path d='M8 0l1.94 5.97h6.27l-5.07 3.69 1.94 5.97L8 11.94l-5.08 3.69 1.94-5.97L0 5.97h6.27z'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 15' fill='white'><path d='M8 0l1.94 5.97h6.27l-5.07 3.69 1.94 5.97L8 11.94l-5.08 3.69 1.94-5.97L0 5.97h6.27z'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 15' fill='white'><path d='M8 0l1.94 5.97h6.27l-5.07 3.69 1.94 5.97L8 11.94l-5.08 3.69 1.94-5.97L0 5.97h6.27z'/></svg>");
  background-repeat: no-repeat;
  background-size: 15px 15px;
  background-position:
    28px center,
    63px center,
    calc(100% - 63px) center,
    calc(100% - 28px) center;
}
/* Narrow viewport (laptop down to mobile): the 17.4px banner + 6 stars
   got cramped against the SUBSCRIBE & SAVE row. Shrink the banner +
   star count + the padding-top reservation on the card. Applies up to
   1199px: between 992-1199 the desktop PDP column squeezes the card to
   ~430-560px and the fixed-offset inner stars overlap the centered
   text, so the 6-star spread is desktop-wide (1200px+) only. */
@media (max-width: 1199px) {
  [class^="template-product"] .willies-main-product .stayai-purchase-label:has([data-stayai-subscription-price])::before {
    height: 34px;
    font-size: 13px;
    line-height: 34px;
    background-size: 12px 12px;
    background-image:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 15' fill='white'><path d='M8 0l1.94 5.97h6.27l-5.07 3.69 1.94 5.97L8 11.94l-5.08 3.69 1.94-5.97L0 5.97h6.27z'/></svg>"),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 15' fill='white'><path d='M8 0l1.94 5.97h6.27l-5.07 3.69 1.94 5.97L8 11.94l-5.08 3.69 1.94-5.97L0 5.97h6.27z'/></svg>");
    background-position:
      14px center,
      calc(100% - 14px) center;
  }
  /* Card padding-top tracks the smaller banner so the SUBSCRIBE &
     SAVE row no longer crowds against it. */
  [class^="template-product"] .willies-main-product .stayai-purchase-label:has([data-stayai-subscription-price]) {
    padding-top: 50px;
  }
}
/* Tight viewports: drop the banner stars entirely so "MOST POPULAR:
   GET 20% OFF" reads cleanly without crowding. Text stays centered. */
@media (max-width: 480px) {
  [class^="template-product"] .willies-main-product .stayai-purchase-label:has([data-stayai-subscription-price])::before {
    background-image: none;
  }
}
/* Below 480: kill the stars entirely so the band reads as a clean label. */
@media (max-width: 479px) {
  [class^="template-product"] .willies-main-product .stayai-purchase-label:has([data-stayai-subscription-price])::before {
    background-image: none;
    font-size: 12px;
  }
}

/* Radio button — styled circle, navy filled when selected */
[class^="template-product"] .willies-main-product .stayai-purchase-label input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #D8D2CE;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
  position: relative;
}
[class^="template-product"] .willies-main-product .stayai-purchase-label input[type="radio"]:checked {
  border-color: var(--w-color-navy);
}
[class^="template-product"] .willies-main-product .stayai-purchase-label input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--w-color-navy);
}

/* Restructure: flatten .stayai-purchase-label__inner__wrapper out of
   the layout tree via display: contents. This makes the radio + the
   inner (title/price block) become direct children of the OUTER
   .stayai-purchase-label__wrapper, alongside the details-container
   (checklist). Now we can grid the OUTER wrapper as 22px | 1fr and
   place children explicitly:
     radio   → col 1, row 1
     inner   → col 2, row 1
     details → col 2, row 2 (col 1 row 2 is empty, leaving the
               checklist indented past the radio width)
   This matches the Figma layout — radio sits next to the title and
   the checklist is indented past it. */
[class^="template-product"] .willies-main-product .stayai-purchase-label__wrapper {
  display: grid;
  grid-template-columns: 22px 1fr;
  column-gap: 16px;
  align-items: start;
}
[class^="template-product"] .willies-main-product .stayai-purchase-label__inner__wrapper {
  display: contents;
}
[class^="template-product"] .willies-main-product .stayai-purchase-label__wrapper > .stayai-purchase-label__inner__wrapper > .stayai-input__wrapper {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-top: -6px;
}
[class^="template-product"] .willies-main-product .stayai-purchase-label__wrapper > .stayai-purchase-label__inner__wrapper > .stayai-purchase-label__inner,
[class^="template-product"] .willies-main-product .stayai-purchase-label__wrapper > .stayai-purchase-label__inner {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}
/* One-Time card omits the __inner__wrapper intermediate, so the radio
   is a direct child of the grid wrapper. Pin it explicitly to col 1/row 1
   so the inner (label + price) flex-row spreads across the full 1fr
   track and pins the price to the right edge. */
[class^="template-product"] .willies-main-product .stayai-purchase-label__wrapper > .stayai-input__wrapper {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-top: -6px;
}
[class^="template-product"] .willies-main-product .stayai-purchase-label__wrapper > .stayai-subscription-details-container {
  grid-column: 2;
  grid-row: 2;
}
[class^="template-product"] .willies-main-product .stayai-purchase-label__wrapper > .stayai-subscription-box {
  /* WR-201: column 2 (was 1/-1) — 1/-1 put it under the 22px radio
     track, which read as a broken row. */
  grid-column: 2;
  grid-row: 3;
}
/* Inner — label on the left, price block on the right, justified out.
   Tag selector (div.) bumps specificity over any Stay AI defaults that
   try to put .stayai-purchase-label__inner back to display: block.
   Reset the 58px padding-inline-start Stay AI ships on .__inner. */
[class^="template-product"] .willies-main-product div.stayai-purchase-label__inner {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding-inline-start: 0;
  padding-inline-end: 0;
  font-weight: 400;
}
[class^="template-product"] .willies-main-product div.stayai-purchase-label__inner > .subscription-label,
[class^="template-product"] .willies-main-product div.stayai-purchase-label__inner > .one-time-purchase-label {
  flex: 1 1 auto;
  text-align: left;
  padding-inline-start: 0 !important;
  padding-inline-end: 0 !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
}
[class^="template-product"] .willies-main-product div.stayai-purchase-label__inner > [data-stayai-subscription-price],
[class^="template-product"] .willies-main-product div.stayai-purchase-label__inner > [data-stayai-onetime-price] {
  flex: 0 0 auto;
  margin-left: auto;
  text-align: right;
}

/* #19 "SUBSCRIBE & SAVE" label — navy */
[class^="template-product"] .willies-main-product .subscription-label {
  color: var(--w-color-navy);
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 24px;
  line-height: normal;
  text-transform: uppercase;
}
@media (max-width: 989px) {
  [class^="template-product"] .willies-main-product .subscription-label {
    font-size: 18px;
  }
}
/* #20 "ONE-TIME PURCHASES" label */
[class^="template-product"] .willies-main-product .one-time-purchase-label {
  color: var(--w-color-navy);
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 24px;
  line-height: normal;
  text-transform: uppercase;
}
@media (max-width: 989px) {
  [class^="template-product"] .willies-main-product .one-time-purchase-label {
    font-size: 18px;
  }
}
/* Hide the inline 20% Stay-AI savings pill — banner already says "GET 20% OFF" */
[class^="template-product"] .willies-main-product .subscription-savings {
  display: none;
}

/* #21 Subscribe price element — wraps [s.fullPrice $WAS][text $NEW].
   Use column-reverse so the new price renders ON TOP and the strikethrough
   "(WAS $X)" sits below it per Figma. */
[class^="template-product"] .willies-main-product [data-stayai-subscription-price] {
  color: var(--w-color-navy);
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.1;
  text-align: right;
  text-transform: uppercase;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 4px;
  white-space: nowrap;
}
/* Drop nowrap on the smallest viewports so the "$XX.XX (WAS $XX.XX)"
   subscribe price doesn't overflow the card on sub-380px handsets. */
@media (max-width: 379px) {
  [class^="template-product"] .willies-main-product [data-stayai-subscription-price] {
    white-space: normal;
    font-size: 20px;
  }
}
/* #22 "(WAS $X)" strikethrough inside subscribe price block — orange 16px
   right with paren wrappers via ::before / ::after on the <s>. */
[class^="template-product"] .willies-main-product [data-stayai-subscription-price] .fullPrice {
  color: var(--stay-ai-selected-accent-color);
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 19.2px;
  text-align: right;
  text-decoration: line-through;
  text-decoration-color: var(--stay-ai-selected-accent-color);
}
[class^="template-product"] .willies-main-product [data-stayai-subscription-price] .fullPrice::before {
  content: "(";
  text-decoration: none;
  display: inline;
}
[class^="template-product"] .willies-main-product [data-stayai-subscription-price] .fullPrice::after {
  content: ")";
  text-decoration: none;
  display: inline;
}
/* #23 One-time price "$89.99" — navy 21px right */
[class^="template-product"] .willies-main-product [data-stayai-onetime-price] {
  color: var(--w-color-navy);
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 21px;
  line-height: 25.92px;
  text-align: right;
}

/* Subscription details checklist — orange ✓ + navy text.
   Indent is now handled by the parent grid (col 2), so no
   padding-left or margin-top needed. */
[class^="template-product"] .willies-main-product .stayai-subscription-details-container {
  margin-top: 0;
  padding-left: 0;
}
[class^="template-product"] .willies-main-product .stayai-subscription-details-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* #24 Stay AI checklist items — Highway Gothic body 14px / 18px uppercase left-aligned */
[class^="template-product"] .willies-main-product .stayai-subscription-details-container li {
  position: relative;
  padding-left: 24px;
  color: var(--w-color-navy);
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  text-align: left;
  text-transform: uppercase;
}
[class^="template-product"] .willies-main-product .stayai-subscription-details-container li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--w-color-orange);
  font-weight: 700;
}

/* ── WR-201 subscription cadence selector (Stay AI frequency dropdown)
   Revealed by OVERRIDING frontend.css's global
   `[data-retextion-subscription-box]{display:none!important}`, not by
   removing it: that file is hand-maintained and diverged from its SCSS
   source, so it must never be rebuilt. The override also scopes the
   dropdown to the selected card for free.
   The hider was deleted once as dead code and restored as regression
   fix WR-145 — it is live Stay AI markup, leave it in place.
   The whole block is gated on body.cadence-enabled, set by the
   show_cadence_selector theme setting (A/B test flag): flag off means
   frontend.css's hider wins everywhere, exactly the pre-WR-201 page. */
[class^="template-product"].cadence-enabled .willies-main-product
  label[for="purchaseTypeSubscription"].is-selected [data-retextion-subscription-box] {
  display: block !important;
}

[class^="template-product"].cadence-enabled .willies-main-product .stayai-subscription-box {
  margin-top: 14px;
}
[class^="template-product"].cadence-enabled .willies-main-product .stayai-subscription-dropdown,
[class^="template-product"].cadence-enabled .willies-main-product .stayai-subscription-box select {
  width: 100%;
  -webkit-appearance: none;
          appearance: none;
  border: 1px solid var(--w-color-navy);
  border-radius: 6px;
  background-color: var(--w-color-white);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%23071D49' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding: 10px 36px 10px 12px;
  color: var(--w-color-navy);
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
}
/* Accent focus ring — UserWay's dashed default reads as a broken border. */
[class^="template-product"].cadence-enabled .willies-main-product .stayai-subscription-dropdown:focus-visible,
[class^="template-product"].cadence-enabled .willies-main-product .stayai-subscription-box select:focus-visible {
  outline: 2px solid var(--stay-ai-selected-accent-color, var(--w-color-orange));
  outline-offset: 2px;
}


/* ─────────────────────────────────────────────────────────────
   PDP — selected-plan summary panel + ATC button
   Markup pasted by Daniel — actual classes used by
   snippets/willies-product-block-order-summary.liquid:
     [class^="template-product"] .order-summary-block
       .order-summary-pricing
         .old-price  >  text "(WAS " + .strike "$X.XX"
         .now-only   >  text "NOW ONLY " + .new-price "$X.XX"
       .order-summary-row.discounts-row
         .order-summary-label "DISCOUNTS"
         .discount-badge > .discount-text "20% OFF" + .emoji "🎉"
       .order-summary-add-to-cart
         .add-to-cart-btn.push-btn > .push-btn__surface > span "Add to Cart"
   ─────────────────────────────────────────────────────────────*/

/* "(WAS $X.XX)" wrapper + strikethrough price — all orange per Figma.
   Dropped the .order-summary-block scope so this also catches the
   Stay AI Subscribe & Save card, which renders an .old-price outside
   the OrderSummary block. */
[class^="template-product"] .old-price {
  color: var(--w-color-orange);
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 19.2px;
  text-align: center;
  text-transform: uppercase;
}
[class^="template-product"] .old-price .strike {
  color: var(--w-color-orange);
  text-decoration: line-through;
  text-decoration-color: var(--w-color-orange);
}

/* The order summary panel is navy, but frontend.css colours .old-price /
   .strike with --stay-ai-selected-accent-color, which the Stay AI widget
   sets to --w-color-navy. Inside this panel that renders "(WAS $X.XX)"
   navy on navy and it vanishes — the multi-bottle saving on Social Tonic
   and THC Shots was invisible, not missing. The variable is correct for
   Stay AI's own Subscribe & Save card, which sits on the light card
   background, so scope this to the summary rather than changing it.
   frontend.css wins on specificity at (0,4,0); this matches and rebrand.css
   loads second. */
[class^="template-product"] .order-summary-block .order-summary-pricing .old-price,
[class^="template-product"] .order-summary-block .order-summary-pricing .old-price .strike {
  color: var(--w-color-orange);
  text-decoration-color: var(--w-color-orange);
}

/* "NOW ONLY $X.XX" — full line off-white 37px Highway Gothic uppercase */
[class^="template-product"] .order-summary-block .now-only {
  color: var(--w-color-off-white);
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 37px;
  line-height: 25.92px;
  text-align: center;
  text-transform: uppercase;
}

/* WR-207 — cost per serving. Both labels are filled by
   updatePerServing() with the same "$X.XX/SERVING" string. [hidden]
   is honoured explicitly: parents set display on these spans, which
   would beat the UA hidden rule and show an empty span.
   Card label (287:6464): absolute with no `left` keeps its inline
   position right of the price while the centred "NOW ONLY $X" stays
   exactly where it is with the flag off. */
[class^="template-product"] .order-summary-block .now-only {
  position: relative;
}
[class^="template-product"] .order-summary-block .now-only .per-serving-price {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 4px;
  white-space: nowrap;
  color: var(--w-color-off-white);
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  text-transform: uppercase;
}
[class^="template-product"] .order-summary-block .now-only .per-serving-price[hidden] {
  display: none;
}
@media (max-width: 480px) {
  [class^="template-product"] .order-summary-block .now-only .per-serving-price {
    position: static;
    display: inline-block;
    vertical-align: middle;
    transform: none;
    margin-left: 7px;
    font-size: 12px;
    line-height: 1;
  }
}
/* WR-207 sticky bar (287:6987): with the flag on, compare+price+label
   render inside a dedicated group (see willies-sticky-atc.liquid) so
   the label sits under the price pair at every breakpoint. Flag off
   renders the original markup, untouched. */
.willies-sticky-atc .willies-sticky-atc__price-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.willies-sticky-atc .willies-sticky-atc__price-pair {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* mock shows struck-before-price on mobile too; scoped to the pair
   so the flag-off bar keeps its released order (order: 1) */
.willies-sticky-atc .willies-sticky-atc__price-pair .willies-sticky-atc__compare {
  order: 0;
}
.willies-sticky-atc .willies-sticky-atc__per-serving {
  /* no margin on desktop: the price's 36px line box already provides
     the visual gap */
  display: block;
  color: var(--w-color-off-white);
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
}
.willies-sticky-atc .willies-sticky-atc__per-serving[hidden] {
  display: none;
}
@media (max-width: 767px) {
  /* mobile mock: pair and label share a LEFT edge */
  .willies-sticky-atc .willies-sticky-atc__price-group {
    align-items: flex-start;
  }
  /* the 18px/21px mobile price box has none of the desktop 36px box's
     slack, so the label carries the gap itself */
  .willies-sticky-atc .willies-sticky-atc__per-serving {
    margin-top: 4px;
  }
}

/* DISCOUNTS row */
[class^="template-product"] .order-summary-block .order-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
[class^="template-product"] .order-summary-block .order-summary-label {
  color: var(--w-color-off-white);
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  text-transform: uppercase;
}
[class^="template-product"] .order-summary-block .discount-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #D2FFE7;
  padding: 4px 12px;
  border-radius: 8px;
}
[class^="template-product"] .order-summary-block .discount-badge .discount-text {
  color: #1A9C5E;
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 16.8px;
  line-height: 20.16px;
}
[class^="template-product"] .order-summary-block .discount-badge .emoji {
  font-size: 14px;
  line-height: 1;
}

/* ATC button — navy 33px Highway Gothic body uppercase center */
[class^="template-product"] .order-summary-block .add-to-cart-btn,
[class^="template-product"] .order-summary-block .add-to-cart-btn .push-btn__surface,
[class^="template-product"] .order-summary-block .add-to-cart-btn .push-btn__surface span {
  color: var(--stay-ai-selected-accent-text-color, var(--w-color-navy));
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 33px;
  line-height: 1.0;
  text-align: center;
  text-transform: uppercase;
}
[class^="template-product"] .order-summary-block .add-to-cart-btn .push-btn__surface .add-to-cart-btn__star {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  font-size: 0;
}

/* SOLD OUT state — variant unavailable. Outlined cream pill with cream
   text + stars on the navy order-summary surface. Matches Daniel's
   Figma for the disabled state.

   IMPORTANT — the SOLD OUT markup is structurally different from the
   AVAILABLE markup. In product-block-buy-buttons.liquid:94 the button
   class swaps from `.push-btn` (available) to `.btn ... bg-scheme-secondary-background text-scheme-text` (unavailable),
   and the inner wrapper <span> at line 105 has `class=""` (empty) instead of
   `.push-btn__surface`. So `.push-btn__surface span` selectors don't match
   in the disabled state — the Tailwind text-scheme-text class wins and
   text colour matches the scheme bg (button reads as "empty").
   Fix: set color on the button itself + a universal descendant rule
   that beats text-scheme-text. */
[class^="template-product"] .order-summary-block .add-to-cart-btn:disabled,
[class^="template-product"] .order-summary-block .add-to-cart-btn[disabled],
[class^="template-product"] button.add-to-cart-btn:disabled,
[class^="template-product"] button.add-to-cart-btn[disabled] {
  background: transparent !important;
  background-image: none !important;
  border: 2px solid var(--w-color-off-white) !important;
  /* Daniel wants text + stars + border all at 60% opacity in the
     disabled state. opacity on the button cascades to all descendants
     (text, stars) AND applies to the border itself. */
  opacity: 0.6 !important;
  cursor: not-allowed;
  color: var(--w-color-off-white) !important;
}
/* All descendants — covers the unavailable bare-span case AND the
   available push-btn__surface case in one rule. */
[class^="template-product"] .order-summary-block .add-to-cart-btn:disabled *,
[class^="template-product"] .order-summary-block .add-to-cart-btn[disabled] *,
[class^="template-product"] button.add-to-cart-btn:disabled *,
[class^="template-product"] button.add-to-cart-btn[disabled] * {
  color: var(--w-color-off-white) !important;
  background: transparent !important;
}
/* Star icons use background-color: currentColor via .star-icon — they
   tint off-white from the cascading color above. No extra rule needed. */


/* ─────────────────────────────────────────────────────────────
   PDP — #30 P65 warning + packaging-transition richtext blocks
   Markup is from product.json: <p>⚠️ <strong>WARNING:</strong> ...</p>
   plus the packaging disclaimer. Both use the site body font.
   ─────────────────────────────────────────────────────────────*/
[class^="template-product"] .willies-main-product .product-block-richtext-block,
[class^="template-product"] .willies-main-product .product-block-richtext-block p {
  color: var(--w-color-navy);
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
}
/* The warning emoji at start (inline ⚠️ character) — render via :first-letter
   not really possible; the orange color targets <strong> contrast. */
[class^="template-product"] .willies-main-product .product-block-richtext-block strong {
  color: var(--w-color-navy);
  font-weight: 700;
}
[class^="template-product"] .willies-main-product .product-block-richtext-block a {
  color: var(--w-color-navy);
  text-decoration: underline;
}


/* ─────────────────────────────────────────────────────────────
   PDP — Key benefits + Key benefits alt blocks
   Both blocks share the same visual treatment per goal:
   - navy heading uppercase Highway Gothic Expanded
   - no orange box border
   - navy circle check icons (not orange)
   - navy mixed-case body
   "Key benefits"      → "KEY BENEFITS" / product.description
   "Key benefits alt"  → "WHAT YOU'RE SIPPING ON" / metafield
   ─────────────────────────────────────────────────────────────*/
[class^="template-product"] .willies-main-product .product-block-key-benefits,
[class^="template-product"] .willies-main-product .product-block-key-benefits-alt {
  background: transparent;
  border: 0;
  padding: 0;
}
[class^="template-product"] .willies-main-product .product-block-key-benefits h2,
[class^="template-product"] .willies-main-product .product-block-key-benefits h3,
[class^="template-product"] .willies-main-product .product-block-key-benefits .block-heading,
[class^="template-product"] .willies-main-product .product-block-key-benefits-alt h2,
[class^="template-product"] .willies-main-product .product-block-key-benefits-alt h3,
[class^="template-product"] .willies-main-product .product-block-key-benefits-alt .block-heading {
  color: var(--w-color-navy);
  font-family: var(--w-font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.0;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  margin: 0 0 16px;
}
/* List items navy mixed-case Highway Gothic body */
[class^="template-product"] .willies-main-product .product-block-key-benefits li,
[class^="template-product"] .willies-main-product .product-block-key-benefits-alt li,
[class^="template-product"] .willies-main-product .product-block-key-benefits p,
[class^="template-product"] .willies-main-product .product-block-key-benefits-alt p {
  color: var(--w-color-navy);
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
}
/* The bullet check icon (often an SVG or pseudo-element). Force navy. */
[class^="template-product"] .willies-main-product .product-block-key-benefits .check-icon,
[class^="template-product"] .willies-main-product .product-block-key-benefits-alt .check-icon,
[class^="template-product"] .willies-main-product .product-block-key-benefits svg,
[class^="template-product"] .willies-main-product .product-block-key-benefits-alt svg {
  color: var(--w-color-navy);
  fill: var(--w-color-navy);
}
[class^="template-product"] .willies-main-product .product-block-key-benefits li::before,
[class^="template-product"] .willies-main-product .product-block-key-benefits-alt li::before {
  color: var(--w-color-navy);
  background-color: var(--w-color-navy);
}


/* ─────────────────────────────────────────────────────────────
   PDP — How It Feels block (#33 heading + #34 bar labels).
   Heading was painting orange via legacy frontend.css — override to
   navy. Selector chain includes the section + block class for enough
   specificity. */
[class^="template-product"] .willies-main-product .product-block-how-it-feels h2,
[class^="template-product"] .willies-main-product .product-block-how-it-feels h3,
[class^="template-product"] .willies-main-product .product-block-how-it-feels .block-heading,
[class^="template-product"] .willies-main-product .product-block-how-it-feels .how-it-feels-heading,
[class^="template-product"] .willies-main-product .product-block-how-it-feels .title {
  color: var(--w-color-navy);
  font-family: var(--w-font-display);
  font-weight: 400;
  font-size: 28.9px;
  line-height: 26.484px;
  text-transform: uppercase;
}
[class^="template-product"] .willies-main-product .product-block-how-it-feels .feel-label,
[class^="template-product"] .willies-main-product .product-block-how-it-feels .bar-label {
  color: var(--w-color-navy);
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  text-transform: uppercase;
}


/* ─────────────────────────────────────────────────────────────
   PDP — Judge.me featured carousel ("Why our fans love Willies Remedy+")
   Sits below the hero in the .template-product apps section. Reskin
   from orange-on-orange Sunmed default to cream-bg + navy text +
   navy review stars (only the top-of-page rating stars stay orange).
   ─────────────────────────────────────────────────────────────*/
[class^="template-product"] .jdgm-carousel-wrapper {
  background: transparent;
  padding: 0;
  border-radius: 0;
}
[class^="template-product"] .jdgm-carousel-title-and-link {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}
[class^="template-product"] .jdgm-carousel-title,
[class^="template-product"] h2.jdgm-carousel-title {
  color: var(--w-color-navy);
  font-family: var(--w-font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.0;
  letter-spacing: -1px;
  text-transform: uppercase;
  margin: 0;
  max-width: 480px;
}
[class^="template-product"] .jdgm-all-reviews-rating-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
[class^="template-product"] .jdgm-carousel-number-of-reviews {
  color: var(--w-color-navy);
  font-family: var(--w-font-body);
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: underline;
}
/* Carousel cards — markup uses .jdgm-carousel-item__* classes (NOT
   .jdgm-rev__*, which is the review widget elsewhere). Prefix with
   .willies-reviews-below-media to beat the Judge.me app's inline <style>
   block that scopes under .jdgm-carousel--compact-theme. */
[class^="template-product"] .willies-reviews-below-media .jdgm-all-reviews-rating .jdgm-star {
  color: var(--w-color-orange);
}
[class^="template-product"] .willies-reviews-below-media .jdgm-carousel-item__review-rating .jdgm-star {
  color: var(--w-color-navy);
}
[class^="template-product"] .willies-reviews-below-media .jdgm-carousel-item__review-title {
  color: var(--w-color-navy);
  font-family: var(--w-font-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  text-transform: uppercase;
  margin: 8px 0;
}
[class^="template-product"] .willies-reviews-below-media .jdgm-carousel-item__review-body,
[class^="template-product"] .willies-reviews-below-media .jdgm-carousel-item__review-body p {
  color: var(--w-color-navy);
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
}
[class^="template-product"] .willies-reviews-below-media .jdgm-carousel-item__reviewer-name {
  color: var(--w-color-navy);
  font-family: var(--w-font-body);
  font-weight: 600;
  font-size: 13px;
  text-transform: none;
}
[class^="template-product"] .willies-reviews-below-media .jdgm-carousel-item__timestamp,
[class^="template-product"] .willies-reviews-below-media .jdgm-carousel-item__product {
  color: var(--w-color-navy);
}
/* Arrow SVG fill — override the hardcoded fill="#071D49" attribute */
[class^="template-product"] .willies-reviews-below-media .jdgm-carousel__left-arrow svg path,
[class^="template-product"] .willies-reviews-below-media .jdgm-carousel__right-arrow svg path {
  fill: var(--w-color-navy);
}
/* Legacy/review-widget arrow selectors (kept as no-ops in case used elsewhere) */
[class^="template-product"] .jdgm-carousel-wrapper .jdgm-prev-arrow svg,
[class^="template-product"] .jdgm-carousel-wrapper .jdgm-next-arrow svg,
[class^="template-product"] .jdgm-carousel-wrapper .splide__arrow svg {
  fill: var(--w-color-navy);
}
/* Hide the "All reviews" link below — not in Figma layout */
[class^="template-product"] .willies-all-reviews-link {
  display: none;
}


/* ─────────────────────────────────────────────────────────────
   PDP — #40 WILLIE'S VS OTHERS section heading
   ─────────────────────────────────────────────────────────────*/
.willies-vs-table h2.section-heading,
.willies-vs-table .willies-vs-title {
  color: var(--w-color-navy);
  text-align: center;
  font-family: var(--w-font-display);
  font-weight: 400;
  font-size: 44px;
  line-height: 42px;
  letter-spacing: var(--w-ls-tight);
  text-transform: uppercase;
}


/* ─────────────────────────────────────────────────────────────
   PDP — Willies product global menu (sub-nav above the hero)
   Sticky pill row: SPIRITS / BUNDLES / SELTZERS / SHOTS / MERCH,
   flanked by 4 small stars on each side.

   All selectors prefixed `.willies-product-global-menu-section` (the
   section schema's wrapper class) so they outweigh legacy frontend.css
   rules that use the same prefix.
   ─────────────────────────────────────────────────────────────*/
.willies-product-global-menu-section .willies-product-global-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 10px;
}

/* 4 stars on each side at 16px with 32px gap between */
.willies-product-global-menu-section .willies-product-global-menu .wpgm-stars {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-shrink: 0;
  color: var(--w-color-navy);
}
.willies-product-global-menu-section .willies-product-global-menu .wpgm-stars .star-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
/* Hide the flanking stars below 1200px so they don't crowd / overlap
   the tab strip on narrower laptops. Above 1200px there's enough
   horizontal room for the 4-star clusters either side of the menu. */
@media (max-width: 1199px) {
  .willies-product-global-menu-section .willies-product-global-menu .wpgm-stars {
    display: none;
  }
}

/* The item list */
.willies-product-global-menu-section .willies-product-global-menu .global-menu-list {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Each <li> — keep it transparent; the bg/border lives on the link below
   (legacy frontend.css puts the visible card style on .global-menu-link,
   so styling the <li> directly gets covered by the link's own bg). Also
   reset legacy's opacity: 0.5 on inactive items — Daniel's spec keeps
   inactive items at full opacity, just lighter colors. */
.willies-product-global-menu-section .willies-product-global-menu .global-menu-item {
  background: transparent;
  border: 0;
  opacity: 1;
}
.willies-product-global-menu-section .willies-product-global-menu .global-menu-item.active {
  opacity: 1;
}

/* The clickable card — bg/border + padding live here. Override legacy
   white bg + navy 2px border with Daniel's cream@40% bg + navy@5% border. */
.willies-product-global-menu-section .willies-product-global-menu .global-menu-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--w-color-navy);
  border-radius: 8px;
  border: 2px solid rgba(7, 29, 73, 0.05);
  background: rgba(241, 233, 229, 0.40);
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.willies-product-global-menu-section .willies-product-global-menu .global-menu-item.active .global-menu-link,
.willies-product-global-menu-section .willies-product-global-menu .global-menu-link:hover,
.willies-product-global-menu-section .willies-product-global-menu .global-menu-link:focus-visible {
  border-color: var(--w-color-navy);
  background: var(--w-color-navy);
  color: var(--w-color-off-white);
}
/* On navy-scheme instances (FAQ page uses scheme6, navy bg) the navy
   hover card disappears into the section background, and the resting
   card already reads light so off-white is a no-op — use the orange
   accent: distinct from both the navy section bg and the resting card.
   PDP instances (scheme2) keep navy hover. */
.willies-product-global-menu-section .willies-product-global-menu[data-color-scheme="scheme6"] .global-menu-item.active .global-menu-link,
.willies-product-global-menu-section .willies-product-global-menu[data-color-scheme="scheme6"] .global-menu-link:hover,
.willies-product-global-menu-section .willies-product-global-menu[data-color-scheme="scheme6"] .global-menu-link:focus-visible {
  border-color: var(--w-color-orange);
  background: var(--w-color-orange);
  color: var(--w-color-navy);
}

/* Icons */
.willies-product-global-menu-section .willies-product-global-menu .global-menu-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  object-fit: contain;
}

/* Title + subtitle stack */
.willies-product-global-menu-section .willies-product-global-menu .global-menu-labels {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

/* Title — Highway Gothic Expanded 13.2px */
.willies-product-global-menu-section .willies-product-global-menu .global-menu-title {
  font-family: var(--w-font-display);
  font-weight: 400;
  font-size: 13.2px;
  line-height: normal;
  text-align: center;
  text-transform: uppercase;
  color: inherit;
}

/* Subtitle — Highway Gothic body 11.8px, -webkit-text-stroke 0.5px */
.willies-product-global-menu-section .willies-product-global-menu .global-menu-subtitle {
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 11.8px;
  line-height: normal;
  letter-spacing: 1.298px;
  text-transform: uppercase;
  text-align: center;
  color: inherit;
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: var(--w-color-navy);
}
.willies-product-global-menu-section .willies-product-global-menu .global-menu-item.active .global-menu-subtitle,
.willies-product-global-menu-section .willies-product-global-menu .global-menu-link:hover .global-menu-subtitle,
.willies-product-global-menu-section .willies-product-global-menu .global-menu-link:focus-visible .global-menu-subtitle {
  -webkit-text-stroke-color: var(--w-color-off-white);
}
/* Scheme6 inverted hover: text is navy on off-white, keep stroke navy. */
.willies-product-global-menu-section .willies-product-global-menu[data-color-scheme="scheme6"] .global-menu-item.active .global-menu-subtitle,
.willies-product-global-menu-section .willies-product-global-menu[data-color-scheme="scheme6"] .global-menu-link:hover .global-menu-subtitle,
.willies-product-global-menu-section .willies-product-global-menu[data-color-scheme="scheme6"] .global-menu-link:focus-visible .global-menu-subtitle {
  -webkit-text-stroke-color: var(--w-color-navy);
}


/* ─────────────────────────────────────────────────────────────
   PDP — "A Message From Willie" title split
   Two lines: "A MESSAGE" solid navy + "FROM WILLIE" outlined
   (transparent fill with 1.5px navy text-stroke).
   ─────────────────────────────────────────────────────────────*/
[class^="template-product"] .willies-message-title .willies-message-title__line {
  display: block;
}
[class^="template-product"] .willies-message-title .willies-message-title__line--outline {
  color: transparent;
  -webkit-text-stroke-width: 1.5px;
  -webkit-text-stroke-color: var(--w-color-navy);
}

/* Portrait above the title — 200px tall per spec */
[class^="template-product"] .willie-illustration--portrait {
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
[class^="template-product"] .willie-illustration--portrait img {
  height: 200px;
  width: auto;
}

/* Signature scribble below the body */
[class^="template-product"] .willie-illustration--signature {
  margin: 24px auto 0;
  display: flex;
  justify-content: center;
}
[class^="template-product"] .willie-illustration--signature img {
  max-width: 180px;
  height: auto;
}


/* Suppress Klaviyo back-in-stock auto-injected trigger button on PDP.
   Klaviyo renders <a class="button notify-button klaviyo-bis-trigger">
   into the page via JS (configured in theme.liquid). We don't want it
   visible — drop it without disabling the Klaviyo module. */
.notify-button.klaviyo-bis-trigger,
a.klaviyo-bis-trigger {
  display: none !important;
}


/* ─────────────────────────────────────────────────────────────
   PDP ALT TEMPLATE — per-product color FAQ block
   The "alt" PDP look applies on:
     - .template-product-altcans (the altcans template variant)
     - any seltzer body class (matches via [class*=seltzer] on any
       element with a template-product class — pog / pog-2 / cherry /
       watermelon / variety / passion-orange-guava all carry
       "seltzer-..." in their product handle class).
   FAQ card paints in the brand accent color (product.js writes
   --stay-ai-selected-accent-color per body class) and all FAQ text +
   chevron is white.
   ─────────────────────────────────────────────────────────────*/
.template-product-altcans .willies-faqs-left,
[class*=template-product][class*=seltzer] .willies-faqs-left {
  background: var(--stay-ai-selected-accent-color, var(--w-color-orange));
}
.template-product-altcans .willies-faqs-title,
.template-product-altcans .willies-faqs-accordion .ac-trigger,
.template-product-altcans .willies-faqs-accordion .ac.is-active .ac-trigger,
.template-product-altcans .willies-faqs-accordion .ac-panel,
.template-product-altcans .willies-faqs-accordion .faq-chevron,
.template-product-altcans .willies-faqs-accordion .ac.is-active .faq-chevron,
[class*=template-product][class*=seltzer] .willies-faqs-title,
[class*=template-product][class*=seltzer] .willies-faqs-accordion .ac-trigger,
[class*=template-product][class*=seltzer] .willies-faqs-accordion .ac.is-active .ac-trigger,
[class*=template-product][class*=seltzer] .willies-faqs-accordion .ac-panel,
[class*=template-product][class*=seltzer] .willies-faqs-accordion .faq-chevron,
[class*=template-product][class*=seltzer] .willies-faqs-accordion .ac.is-active .faq-chevron {
  color: #FFF;
}
.template-product-altcans .willies-faqs-accordion .ac,
[class*=template-product][class*=seltzer] .willies-faqs-accordion .ac {
  border-bottom-color: rgba(255, 255, 255, 0.30);
}
.template-product-altcans .willies-faqs-accordion .ac-trigger:after,
[class*=template-product][class*=seltzer] .willies-faqs-accordion .ac-trigger:after {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='13' viewBox='0 0 12 13' fill='none'><path d='M0.646447 3.40572C0.841709 3.21046 1.15822 3.21046 1.35348 3.40572L5.99996 8.05221L10.6464 3.40572L10.7246 3.34127C10.9187 3.21311 11.1826 3.23486 11.3535 3.40572C11.5243 3.57659 11.5461 3.84055 11.4179 4.03463L11.3535 4.11276L6.35348 9.11276L6.28512 9.17037C6.11749 9.2869 5.89424 9.28925 5.72457 9.17721L5.64645 9.11276L0.646447 4.11276C0.451184 3.91749 0.451184 3.60099 0.646447 3.40572Z' fill='white'/></svg>");
}


/* ─────────────────────────────────────────────────────────────
   PDP — inline rope-circle badges rendered below the Judge.me
   reviews carousel inside the left column of the product hero.
   Markup lives in snippets/product-template.liquid.
   ─────────────────────────────────────────────────────────────*/
.pdp-badges--inline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 40px;
}
.pdp-badges--inline .pdp-badges__item {
  width: 120px;
  height: auto;
  flex: 0 0 auto;
}
@media (max-width: 767px) {
  .pdp-badges--inline {
    gap: 20px;
  }
  .pdp-badges--inline .pdp-badges__item {
    width: 100px;
  }
}


/* ─────────────────────────────────────────────────────────────
   PDP — Judge.me review widget section ("Customer Reviews")
   The bottom-of-page reviews block is wrapped in .card / .card__surface
   by the theme. Daniel wants the whole card on navy bg with off-white
   text everywhere inside the widget.
   ─────────────────────────────────────────────────────────────*/
/* Shopify's apps-section paints the inner <section class=
   "bg-scheme-background" data-color-scheme="scheme-fd26c099-..."> using
   --color-scheme-background which evaluates to #131b43 — not the brand
   #071D49. Force brand navy on BOTH the shopify-section wrapper AND the
   inner section element (the one that actually paints visible). */
/* 24/08/2026: these were unconditional, which meant the section's colour
   scheme picker could never do anything — the !important navy always won.
   Brand navy is now only the fallback for a section with NO scheme chosen.
   Where a scheme is set, the wrapper goes transparent and the element
   carrying data-color-scheme paints instead, because that is the only
   element the scoped --color-scheme-* vars are defined on. */
[class^="template-product"] [id^="shopify-section-"]:has(#judgeme_product_reviews):not(:has([data-color-scheme])) {
  background-color: var(--w-color-navy) !important;
  background-image: none !important;
}
[class^="template-product"] [id^="shopify-section-"]:has(#judgeme_product_reviews):has([data-color-scheme]) {
  background-color: transparent !important;
  background-image: none !important;
}
[class^="template-product"] [id^="shopify-section-"]:has(#judgeme_product_reviews) [data-color-scheme] {
  background-color: rgb(var(--color-scheme-background)) !important;
}
[class^="template-product"] .card:has(#judgeme_product_reviews),
[class^="template-product"] .card:has(#judgeme_product_reviews) .card__surface {
  background-color: transparent !important;
  background-image: none !important;
}
[class^="template-product"] #judgeme_product_reviews,
[class^="template-product"] #judgeme_product_reviews .jdgm-rev-widg__title,
[class^="template-product"] #judgeme_product_reviews .jdgm-rev-widg__summary-average,
[class^="template-product"] #judgeme_product_reviews .jdgm-rev-widg__summary-text,
[class^="template-product"] #judgeme_product_reviews .jdgm-histogram__frequency,
[class^="template-product"] #judgeme_product_reviews .jdgm-histogram__row,
[class^="template-product"] #judgeme_product_reviews .jdgm-write-rev-link,
[class^="template-product"] #judgeme_product_reviews .jdgm-rev__title,
[class^="template-product"] #judgeme_product_reviews .jdgm-rev__body,
[class^="template-product"] #judgeme_product_reviews .jdgm-rev__body p,
[class^="template-product"] #judgeme_product_reviews .jdgm-rev__author,
[class^="template-product"] #judgeme_product_reviews .jdgm-rev__timestamp,
[class^="template-product"] #judgeme_product_reviews .jdgm-rev__location,
[class^="template-product"] #judgeme_product_reviews .jdgm-paginate__page {
  color: var(--w-color-navy);
}
[class^="template-product"] #judgeme_product_reviews .jdgm-sort-dropdown {
  color: var(--w-color-navy);
  background: transparent;
}

/* ─────────────────────────────────────────────────────────────
   Shopify built-in Policy pages (privacy-policy, terms-of-service,
   refund-policy, shipping-policy, etc.)
   Shopify auto-injects a .shopify-policy__container wrapper around
   the policy body — target THAT regardless of what body class
   Shopify ends up writing (the `{{ template }}` variable is
   sometimes empty on policy URLs, which broke the earlier
   body[class*="template-policies-"] selector). */
.shopify-policy__container {
  background-color: var(--w-color-site-bg);
  color: var(--w-color-navy);
  font-family: var(--w-font-body);
}
.shopify-policy__container h1,
.shopify-policy__container h2,
.shopify-policy__container h3,
.shopify-policy__container h4,
.shopify-policy__container h5,
.shopify-policy__container h6,
.shopify-policy__title {
  font-family: var(--w-font-display);
  color: var(--w-color-navy);
}
.shopify-policy__container p,
.shopify-policy__container li,
.shopify-policy__container a,
.shopify-policy__container strong,
.shopify-policy__container em {
  font-family: var(--w-font-body);
  color: var(--w-color-navy);
}
.shopify-policy__container a {
  text-decoration: underline;
}
.shopify-policy__container a:hover {
  color: var(--w-color-orange);
}
/* Keep the body class fallback in case Shopify drops the
   .shopify-policy__container wrapper on some routes. */
body[class*="template-policies"],
body.template-policy {
  background-color: var(--w-color-site-bg);
  color: var(--w-color-navy);
  font-family: var(--w-font-body);
}


/* Footer + Judge.me reviews — force brand navy on both so they paint
   the exact same #071D49 instead of relying on Shopify color schemes
   (which were drifting #131b43 vs #071D49 vs scheme-default). */
footer.custom-footer {
  background-color: var(--w-color-navy) !important;
  background-image: none !important;
}


/* ─────────────────────────────────────────────────────────────
   PDP Step 1 — visual radio button on .group-option cards
   The dose cards are <a> anchors (cross-product navigation, not a
   form control) so we can't drop a real <input type="radio"> in. The
   .group-option-radio span renders a styled circle that fills navy
   when the card is .selected — visually matches Step 2 + Step 3.
   ─────────────────────────────────────────────────────────────*/
[class^="template-product"] .group-option {
  position: relative;
}
[class^="template-product"] .group-option-radio {
  display: inline-block;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--stay-ai-selected-accent-color, var(--w-color-navy));
  background: transparent;
  position: relative;
  margin-right: 12px;
}

[class^="template-product"] .group-option.selected .group-option-radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--stay-ai-selected-accent-color, var(--w-color-navy));
}

/* group-option SELECTED border-color → accent. Per-seltzer :hover
   in frontend.css paints purple/red border at 0,0,6,0 specificity;
   double .group-option + .selected:hover variant gets us 0,0,7,0
   to win in both rest and hover state. */
[class^="template-product"] .willies-main-product .product-steps-accordion .group-option.group-option.selected,
[class^="template-product"] .willies-main-product .product-steps-accordion .group-option.group-option.selected:hover,
[class^="template-product"] #shopify-section-template--23847429243127__main .product-steps-accordion .group-option.group-option.selected,
[class^="template-product"] #shopify-section-template--23847429243127__main .product-steps-accordion .group-option.group-option.selected:hover {
  border-color: var(--stay-ai-selected-accent-color, var(--w-color-navy)) !important;
}

/* .order-summary-block border removed per Daniel. frontend.css sets
   1px solid cobalt; same-spec override + later source order wins. */
[class^="template-product"] .willies-main-product .order-summary-block,
[class^="template-product"] #shopify-section-template--23847429243127__main .order-summary-block {
  border: 0 !important;
}


/* Step 1 dose card order: radio (0, DOM order) -> texts (2) -> image (3) */
[class^="template-product"] .group-option .group-option-texts {
  order: 2;
}
[class^="template-product"] .group-option .group-image {
  order: 3;
}


/* Judge.me featured carousel emits its own <h2 class="jdgm-carousel-title">
   via the metafield render, in addition to the one we hardcode in
   product-template.liquid. The hardcoded one carries .jdgm-carousel-
   title--theme; hide any sibling without that class so only the theme
   title shows. (Was previously matching by [role="heading"] but a
   screen-reader plugin adds that role to ALL h2 elements dynamically,
   which hid both titles.) */
.willies-reviews-below-media h2.jdgm-carousel-title:not(.jdgm-carousel-title--theme) {
  display: none !important;
}


/* Hide the "All reviews" anchor under the carousel — not in the spec. */
.willies-reviews-below-media .willies-all-reviews-link {
  display: none !important;
}


/* Shopify theme defines --heading-font-stack and --main-font-stack from
   the font_picker settings (currently Fraunces + DM Sans). Override at
   :root so every utility class — .font-heading, .font-body,
   .heading-feature, .font-secondary — lands on the Willies brand fonts
   without rule-by-rule chasing. */
:root {
  --heading-font-stack: "Highway Gothic Expanded", "Highway Gothic", sans-serif;
  --main-font-stack: "Highway Gothic", sans-serif;
}
.font-heading {
  font-family: var(--w-font-display) !important;
}
.font-body,
.font-secondary {
  font-family: var(--w-font-body) !important;
}
/* Card surface wrapper around forms (Contact Form etc.) — soft brand
   corner radius. */
.card__surface {
  border-radius: 12px;
}


/* FAQ page accordion chevron — mask the legacy PNG so the bg-color
   (which inherits from the question via currentColor) paints it. */
.faq-block__chevron {
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  -webkit-mask: url("/cdn/shop/files/Vector_e3aa5b3f-f4a9-4f93-a3f1-41c783498937.png?v=1738777455") center / contain no-repeat;
          mask: url("/cdn/shop/files/Vector_e3aa5b3f-f4a9-4f93-a3f1-41c783498937.png?v=1738777455") center / contain no-repeat;
}

/* FAQ page — global-menu stars switch from navy to off-white so they
   show against the navy menu background. */
.template-page-faq .willies-product-global-menu-section .willies-product-global-menu .wpgm-stars {
  color: var(--w-color-off-white);
}


/* Global-menu stars — pinned 40px from each screen edge. The stars
   sit at the left and right of the menu bar; absolute-position them
   relative to the section so they don't ride the inner container. */
.willies-product-global-menu-section {
  position: relative;
}
.willies-product-global-menu-section .wpgm-stars--left {
  position: absolute;
  left: 40px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
.willies-product-global-menu-section .wpgm-stars--right {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

/* Judge.me featured carousel — "from X reviews" link override. */
.willies-reviews-below-media .jdgm-carousel-number-of-reviews {
  color: var(--w-color-navy);
  text-align: right;
  font-family: var(--w-font-body);
  font-size: 15.9px;
  font-weight: 400;
  line-height: 16px;
  text-decoration: underline;
  text-decoration-skip-ink: auto;
  text-underline-position: from-font;
  text-transform: uppercase;
}


/* FAQ page — move the existing border-t-2 divider on each accordion
   item to a border-BOTTOM. Border color flows from the scheme text
   token (rgb(var(--color-scheme-text))) so it tracks whatever scheme
   the page is on — no hardcoded color, no !important. */
.template-page-faq li > div.border-scheme-text.border-t-2 {
  border-top-width: 0;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: rgb(var(--color-scheme-text));
}

/* FAQ page question line-height. */
.template-page-faq li button .break-words {
  line-height: 1.25;
}

/* FAQ pills layout — stop cards from stretching to the tallest sibling.
   Without this, closed cards inherit the height of an open card, which
   reads as "all are open with empty content". */
.faq-section__pills {
  align-items: flex-start;
}
.faq-section__pills > li {
  align-self: flex-start;
}

/* feature-text-columns bottom rope decoration — 32px top margin. */
.ftc__bottom-decor {
  margin-top: 32px;
}

/* FAQ page — accordion card border pulls from active scheme text color.
   The FAQ section's own custom_css (set in the editor) paints
   "border: 0 !important" on each li, which beats anything not !important.
   Override at body-level for higher specificity AND with !important to
   match the inline rule. Source the color from rgb(var(--color-scheme-
   text)) so the border tracks the page's scheme (off-white on the navy
   FAQ section, navy on cream sections) — no hardcoded color. */
body.template-page-faq .faq-section--accordion .faq-section__list > li,
body.template-page-faq .faq-section--accordion .faq-section__list > li.card {
  border: 2px solid rgb(var(--color-scheme-text)) !important;
}


/* ─────────────────────────────────────────────────────────────
   PDP ALT / per-flavor seltzers — Stay AI Subscribe & Save card
   adopts the per-product brand accent color instead of brand orange.
   --stay-ai-selected-accent-color is set on :root by product.js
   based on the body class (orange / purple / red / etc).

   Scope: .template-product-altcans OR any seltzer body
   ([class*=template-product][class*=seltzer]).
   ───────────────────────────────────────────────────────────── */
.template-product-altcans .willies-main-product .stayai-purchase-label.is-selected,
[class*=template-product][class*=seltzer] .willies-main-product .stayai-purchase-label.is-selected {
  border-color: var(--stay-ai-selected-accent-color);
  background: color-mix(in srgb, var(--stay-ai-selected-accent-color) 12%, var(--w-color-white));
}
.template-product-altcans .willies-main-product .stayai-purchase-label:has([data-stayai-subscription-price])::before,
[class*=template-product][class*=seltzer] .willies-main-product .stayai-purchase-label:has([data-stayai-subscription-price])::before {
  background-color: var(--stay-ai-selected-accent-color);
}
/* Subscribe & Save title + price + checklist + radio fill use the accent color. */
.template-product-altcans .willies-main-product .subscription-label,
[class*=template-product][class*=seltzer] .willies-main-product .subscription-label,
.template-product-altcans .willies-main-product [data-stayai-subscription-price],
[class*=template-product][class*=seltzer] .willies-main-product [data-stayai-subscription-price],
.template-product-altcans .willies-main-product [data-stayai-subscription-price] .fullPrice,
[class*=template-product][class*=seltzer] .willies-main-product [data-stayai-subscription-price] .fullPrice,
.template-product-altcans .willies-main-product .stayai-subscription-details-container li,
[class*=template-product][class*=seltzer] .willies-main-product .stayai-subscription-details-container li,
.template-product-altcans .willies-main-product .one-time-purchase-label,
[class*=template-product][class*=seltzer] .willies-main-product .one-time-purchase-label,
.template-product-altcans .willies-main-product [data-stayai-onetime-price],
[class*=template-product][class*=seltzer] .willies-main-product [data-stayai-onetime-price] {
  color: var(--stay-ai-selected-accent-color);
}
.template-product-altcans .willies-main-product .stayai-subscription-details-container li::before,
[class*=template-product][class*=seltzer] .willies-main-product .stayai-subscription-details-container li::before {
  color: var(--stay-ai-selected-accent-color);
}
.template-product-altcans .willies-main-product .stayai-purchase-label input[type="radio"]:checked,
[class*=template-product][class*=seltzer] .willies-main-product .stayai-purchase-label input[type="radio"]:checked {
  border-color: var(--stay-ai-selected-accent-color);
}
.template-product-altcans .willies-main-product .stayai-purchase-label input[type="radio"]:checked::after,
[class*=template-product][class*=seltzer] .willies-main-product .stayai-purchase-label input[type="radio"]:checked::after {
  background: var(--stay-ai-selected-accent-color);
}


/* PDP reviews — neutralize any Judge.me container bg painting inside the
   .willies-reviews-below-media card so the parent #F8F4F2 shows through.
   Also re-target the inter-item divider with :nth-child so it works even
   if Judge.me wraps each item in its own intermediate div. */
.willies-reviews-below-media .jdgm-rev-widg,
.willies-reviews-below-media .jdgm-legacy-widget-content,
.willies-reviews-below-media .jdgm-widget,
.willies-reviews-below-media .jdgm-review-widget,
.willies-reviews-below-media .shopify-block,
.willies-reviews-below-media .jdgm-carousel,
.willies-reviews-below-media .jdgm-carousel__item-container,
.willies-reviews-below-media .jdgm-carousel__item-wrapper {
  background: transparent !important;
}
.willies-reviews-below-media .jdgm-carousel-item:nth-child(n+2) {
  border-left: 1px solid var(--w-color-navy);
  padding-left: 24px;
}

/* PDP reviews — paint the hardcoded h2.jdgm-carousel-title--theme navy.
   Judge.me's JS sometimes mutates the text inside our hardcoded h2; lock
   the color so whatever ends up there reads navy. */
.willies-reviews-below-media h2.jdgm-carousel-title.jdgm-carousel-title--theme {
  color: var(--w-color-navy) !important;
  text-align: left !important;
  align-self: flex-start;
}
/* Carousel wrapper aligns to the left of the parent card (the parent
   .willies-reviews-below-media uses align-items: center). */
.willies-reviews-below-media .jdgm-carousel-wrapper {
  align-self: flex-start;
}


/* ─────────────────────────────────────────────────────────────
   split-content-carousel — button stars + right-edge star column.
   Matches the Figma "BUY NOW" pill (★ BUY NOW ★) + the 4-star
   vertical column down the right edge of the section.
   ─────────────────────────────────────────────────────────────*/
.split-content-carousel-section .btn-orange {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.split-content-carousel-section .btn-orange .star-icon {
  width: 12px;
  height: 12px;
  color: currentColor;
  flex: 0 0 12px;
}

/* Right-edge 4-star column. The section is position: relative below; the
   stars stack absolute on the right at 24px from the edge, with a soft
   gap between each. Stars track the section's text color via currentColor
   (so they go navy on cream sections, off-white on navy sections). */
.split-content-carousel-section {
  position: relative;
}
.scc-stars-right {
  position: absolute;
  right: 32px;
  bottom: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  color: rgb(var(--color-scheme-text));
  pointer-events: none;
  z-index: 1;
}
.scc-stars-right .star-icon {
  width: 24px;
  height: 24px;
  color: inherit;
}
@media (max-width: 991px) {
  .scc-stars-right {
    display: none;
  }
}

/* split-content-carousel — per-block background category image (huge
   SPIRITS / SELTZERS / SHOTS SVG sitting behind the product cards).
   Block setting block.settings.background_text feeds the <img>; we
   absolute-position it inside .collection-group so it sits behind
   the products and scales to fill the right column. Mobile hides it
   to keep the centered layout uncluttered. */
.split-content-carousel-section .collection-group {
  position: relative;
}
/* SVG is masked, not embedded as <img>, so currentColor (driven by the
   section's color_scheme via text-scheme-text) fills the shape. Same
   SVG renders navy on a cream scheme, magenta on a light-pink scheme,
   off-white on a navy-bg scheme — no per-scheme CSS overrides. */
.split-content-carousel-section .scc-bg-text {
  position: absolute;
  right: 0;
  top: 0;
  width: 80%;
  max-width: 1400px;
  aspect-ratio: 5 / 1;
  background-color: currentColor;
  -webkit-mask-position: right top;
          mask-position: right top;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.split-content-carousel-section .collection-products {
  position: relative;
  z-index: 1;
}
@media (max-width: 991px) {
  .split-content-carousel-section .scc-bg-text {
    display: none;
  }
}

/* Layer the text/product info above the bg-text image, and keep the
   Buy Now label on a single line. */
.split-content-carousel-section .text-content,
.split-content-carousel-section .product-info,
.split-content-carousel-section .product-image-container,
.split-content-carousel-section .product-button-container {
  position: relative;
  z-index: 2;
}
.split-content-carousel-section .btn-orange {
  white-space: nowrap;
  line-height: 1 !important;
}
.split-content-carousel-section .btn-orange > span:not(.star-icon) {
  display: inline-block;
}

/* ════════════════════════════════════════════════════════════════════════
   MERCH COLLECTION GRID
   Scoped to body.template-collection-merch so styles don't leak to other
   product grids. Card spec from Daniel's Figma:
   - Image area 426x426, per-card desert/cactus backdrop, badges flex-end
   - Title 22 / Price 26 / Button 22 — Highway Gothic, navy, uppercase
   - Gaps: image→title 48, title→price 16, price→button 22
   - ATC button: navy text on orange, 6px radius, 18px vertical padding,
     width = product title's column width
   - Buttons align across the row regardless of variant picker presence
   ════════════════════════════════════════════════════════════════════════ */

/* Kill any inherited pinstripe / patterned bg on the page. White card
   surface so the image area + the text/button area read as one card. */
body.template-collection-merch .product-tile,
body.template-collection-merch .product-tile__container {
  background: #ffffff !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Grid gap between product cards — overrides gap-theme Tailwind class */
body.template-collection-merch ul.grid {
  gap: 30px !important;
}

/* Grid items (<li>) become flex columns. CSS grid's default align-items:
   stretch makes all <li> in the same row equal-height, so the
   margin-top: auto on the quick-buy block lands the button at the bottom
   of each card and they all line up across the row.

   When quick-buy is enabled, product-tile.liquid wraps .product-tile__
   container in a <data-island class="contents"> — display: contents
   means data-island is "invisible" in layout and its children become
   flex children of the .product-tile. We need to keep this. */
body.template-collection-merch ul.grid > li {
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch;
}
body.template-collection-merch ul.grid > li > .product-tile {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  height: auto;
}
body.template-collection-merch ul.grid > li data-island {
  display: contents !important;
}
body.template-collection-merch .product-tile__container {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* Image area — full card width, square aspect, white background. Image
   inside fills the container (object-fit: contain keeps aspect). */
body.template-collection-merch .product-tile__featured-media {
  display: block;
  width: 100%;
  margin: 0;
  aspect-ratio: 1 / 1;
  padding: 0;
  background: var(--w-color-white);
  border-radius: 0;
  position: relative;
}
body.template-collection-merch .product-tile__featured-media .product-media-object,
body.template-collection-merch .product-tile__featured-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Text block — sized to content. Don't flex-grow it, otherwise the
   margin-top: auto on the button container has no room to absorb. */
body.template-collection-merch .product-tile .product-tile {
  margin-top: 48px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 0 0 auto;
  width: 100%;
}

/* Title — 22 / 22 Highway Gothic, navy, uppercase */
body.template-collection-merch .product-tile h3 {
  font-family: var(--w-font-body) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 22px !important;
  color: var(--w-color-navy) !important;
  text-align: center !important;
  text-transform: uppercase !important;
  margin: 0 0 16px !important;
}

/* Price (covers both the quick-buy span path and the price-snippet path).
   26 / 18.523, navy, uppercase. Title→price 16px (set above via title
   margin-bottom); price→button 22px (set via margin-bottom here). */
body.template-collection-merch .product-tile [data-product-price],
body.template-collection-merch .product-tile .price,
body.template-collection-merch .product-tile .price * {
  font-family: var(--w-font-body) !important;
  font-size: 26px !important;
  font-weight: 400 !important;
  line-height: 18.523px !important;
  color: var(--w-color-navy) !important;
  text-align: center !important;
  text-transform: uppercase !important;
}
body.template-collection-merch .product-tile [data-product-price],
body.template-collection-merch .product-tile .price {
  display: block !important;
  margin: 0 0 22px !important;
}

/* Pin the quick-buy block (variant picker + ATC) to the bottom of the card
   so buttons line up across the row regardless of whether a picker exists.
   Quick-buy markup: .product-tile__quick-buy > .product-quick-buy__container
   > <form> > variant picker + button. */
body.template-collection-merch .product-tile__quick-buy {
  margin-top: auto;
  width: 100%;
}
body.template-collection-merch .product-tile__quick-buy .product-quick-buy__container {
  margin-top: 0 !important;
  max-width: none !important;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}
body.template-collection-merch .product-tile__quick-buy form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  width: 100%;
}

/* SIZE variant picker — pill with 1px navy border, navy text + chevron */
body.template-collection-merch .product-tile__quick-buy select,
body.template-collection-merch .product-tile__quick-buy .variant-picker__select {
  font-family: var(--w-font-body);
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--w-color-navy);
  background: transparent;
  border: 1px solid var(--w-color-navy);
  border-radius: 8px;
  padding: 12px 36px 12px 18px;
  min-width: 180px;
  text-transform: uppercase;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%23071D49' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* ATC button — navy text, orange bg, 6px radius, 18px vertical padding,
   width matches the title column (= 100% of card text area).
   The base theme renders the button with .push-btn class (3D-style button
   with .push-btn__surface span inside). We flatten it: strip the 3D shadow,
   override the surface span styling, and force full width. */
body.template-collection-merch .product-tile__quick-buy .push-btn,
body.template-collection-merch .product-tile__quick-buy button,
body.template-collection-merch .product-tile__quick-buy [type="submit"],
body.template-collection-merch .product-tile__quick-buy .btn {
  font-family: var(--w-font-body) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 19.541px !important;
  color: var(--w-color-navy) !important;
  text-transform: uppercase !important;
  text-align: center !important;
  background: var(--w-color-orange) !important;
  border: 1px solid var(--w-color-orange) !important;
  border-radius: 6px !important;
  padding: 18px 1rem !important;
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: none !important;
  transform: none !important;
  position: static !important;
}
/* Inner span used by .push-btn — make it inline so flex layout still works
   and the icon (cart svg) sits beside the label. Also force the typography
   to match the parent button: theme defaults this span to Smithouse with
   mixed case (e.g. "Add to Cart"), we want Highway Gothic uppercase to
   match the SOLD OUT state. */
body.template-collection-merch .product-tile__quick-buy .push-btn__surface,
body.template-collection-merch .product-tile__quick-buy .push-btn__surface * {
  font-family: var(--w-font-body) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 19.541px !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  color: var(--w-color-navy) !important;
}
body.template-collection-merch .product-tile__quick-buy .push-btn__surface {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
/* Wrapper around the button can add a "lifted shadow" (pt-button-shadow
   or pb-button-shadow). Strip those so the button sits flush. */
body.template-collection-merch .product-tile__quick-buy [class*="-button-shadow"] {
  padding: 0 !important;
}

/* Badges — flatten ALL sticker variants (the SVG-clipped scalloped /
   wavy / rotated ones AND the simple fit_to_text ones) to a uniform
   rectangular pill at the top-right of the image area. Color flips by
   state:
     custom metafield (NEW! / LIMITED EDITION / IN STOCK)  → orange
     auto SOLD OUT                                         → cream
*/

/* Outer wrapper — absolute-positioned 16px from top-right corner of the
   image area (.product-tile__featured-media is position: relative). */
body.template-collection-merch .product-tile [class^="sticker-"] {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  animation: none !important;
  origin: top right !important;
  width: auto !important;
  height: auto !important;
}

/* Kill the rotate-anim 3D animation that the SVG sticker variant uses. */
body.template-collection-merch .product-tile .sticker__container,
body.template-collection-merch .product-tile .sticker__container.rotate-anim {
  position: static !important;
  transform: none !important;
  animation: none !important;
  width: auto !important;
  height: auto !important;
}
body.template-collection-merch .product-tile .sticker__container > .relative {
  position: static !important;
  width: auto !important;
  height: auto !important;
}

/* Hide the SVG outline + drop shadow — they make the scalloped/wavy
   shape and the rotation feel. We want a flat rectangle. */
body.template-collection-merch .product-tile .sticker__width-container,
body.template-collection-merch .product-tile .sticker__drop-shadow,
body.template-collection-merch .product-tile .sticker__svg {
  display: none !important;
}

/* The .absolute.inset-0 child carries the clip-path that creates the
   shape — strip it and make it a normal block we can style as a pill. */
body.template-collection-merch .product-tile .sticker__container .absolute.inset-0 {
  position: static !important;
  inset: auto !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  width: auto !important;
  height: auto !important;
  background: var(--w-color-orange) !important;
  color: var(--w-color-navy) !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* The text wrapper inside — undo its absolute-inset positioning and
   inherit color/font from the parent pill. */
body.template-collection-merch .product-tile .sticker__text {
  position: static !important;
  inset: auto !important;
  background: transparent !important;
  color: inherit !important;
  font-family: var(--w-font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  display: block !important;
}

/* fit_to_text variant — already a simple div, just apply the pill style */
body.template-collection-merch .product-tile .sticker,
body.template-collection-merch .product-tile .sticker--fit-to-test {
  font-family: var(--w-font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: var(--w-color-navy) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  background: var(--w-color-orange) !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Sold-out variant — cream pill (covers both the fit_to_text simple div
   AND the SVG-shaped variant where the pill is the .absolute.inset-0). */
body.template-collection-merch .product-tile [class*="sold-out"] .sticker,
body.template-collection-merch .product-tile [class*="sold-out"] .sticker--fit-to-test,
body.template-collection-merch .product-tile [class*="sold-out"] .sticker__container .absolute.inset-0 {
  background: var(--w-color-off-white) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   GIFT CARD PDP
   Scoped to body.template-product-gift-card so changes don't leak to the
   other PDPs (which share the main-product section).
   5 fixes batched:
   1) Hide redundant vendor "WILLIE'S REMEDY+" above title
   2) Denomination variant buttons → 1px navy border pills; selected =
      navy fill + cream text
   3) Judge.me star rating → navy (override the orange-red default)
   4) ATC button → flat orange pill matching merch (drop gradient + stars
      + 3D shadow)
   5) "I want to send this as a gift" checkbox/label → Highway Gothic
   ════════════════════════════════════════════════════════════════════════ */

/* 1) Hide vendor above title — confirmed via DevTools paste: the
   "Willie's Remedy+" line is rendered inside .product-block-brand,
   a direct child of .product-block-heading. */
body.template-product-gift-card .product-block-brand {
  display: none !important;
}

/* 2) Denomination buttons — variant picker uses button style for the
   gift card amounts. Match the merch SIZE picker pattern: 1px navy
   border, navy text, cream bg; selected = navy bg + cream text. */
body.template-product-gift-card .variant-input label,
body.template-product-gift-card .product-variant-picker-block label,
body.template-product-gift-card fieldset[class*="variant"] label {
  font-family: var(--w-font-body) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: var(--w-color-navy) !important;
  background: transparent !important;
  border: 1px solid var(--w-color-navy) !important;
  border-radius: 8px !important;
  padding: 14px 20px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  min-width: 120px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: background-color 150ms ease, color 150ms ease;
}
body.template-product-gift-card .variant-input input:checked + label,
body.template-product-gift-card .product-variant-picker-block input:checked + label {
  background: var(--w-color-navy) !important;
}
/* Inner <span>$50.00</span> needs the colour override too — inherit
   alone loses to the Tailwind peer-checked:text-scheme-text-contrast
   utility that targets the label directly. */
body.template-product-gift-card .variant-input input:checked + label,
body.template-product-gift-card .variant-input input:checked + label *,
body.template-product-gift-card .product-variant-picker-block input:checked + label,
body.template-product-gift-card .product-variant-picker-block input:checked + label * {
  color: var(--w-color-off-white) !important;
}

/* 3) Judge.me star rating → orange (matches every other PDP — set
   via the [class^=template-product] rule in frontend.css:4806).
   Stars are <span class="jdgm-star jdgm--on"></span> empty spans —
   normally Judge.me's own CSS adds ::before { content: '★' } and
   ::before { content: '☆' } via their widget styles. Daniel reports
   empty boxes (missing glyph), so the brand body font (Highway
   Gothic) is being inherited but lacks the unicode star glyphs.
   Force ::before content + system font with guaranteed glyph
   coverage so the stars render regardless of Judge.me's CSS state. */
body.template-product-gift-card .jdgm-star {
  color: var(--w-color-orange) !important;
  font-family: Arial, "Helvetica Neue", sans-serif !important;
  font-size: 18px !important;
  line-height: 1 !important;
  display: inline-block !important;
}
body.template-product-gift-card .jdgm-star::before {
  content: '\2606' !important;
  font-family: Arial, "Helvetica Neue", sans-serif !important;
}
body.template-product-gift-card .jdgm-star.jdgm--on::before {
  content: '\2605' !important;
  font-family: Arial, "Helvetica Neue", sans-serif !important;
}
body.template-product-gift-card .jdgm-prev-badge__text,
body.template-product-gift-card .jdgm-prev-badge__text a {
  color: var(--w-color-navy) !important;
}

/* 4) ATC button — flat orange pill matching the merch grid ATC. Strip
   the push-btn 3D shadow, hide the leading/trailing star icons, and the
   inner .push-btn__surface span gets Highway Gothic uppercase. */
body.template-product-gift-card .add-to-cart-btn,
body.template-product-gift-card .product__add-to-cart,
body.template-product-gift-card .buy-buttons .push-btn,
body.template-product-gift-card .buy-buttons button[type="submit"],
body.template-product-gift-card .product-form__buttons button[type="submit"] {
  font-family: var(--w-font-body) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 19.541px !important;
  color: var(--w-color-navy) !important;
  text-transform: uppercase !important;
  text-align: center !important;
  background: var(--w-color-orange) !important;
  background-image: none !important;
  border: 1px solid var(--w-color-orange) !important;
  border-radius: 6px !important;
  padding: 18px 1rem !important;
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: none !important;
  transform: none !important;
}
body.template-product-gift-card .push-btn__surface,
body.template-product-gift-card .push-btn__surface * {
  font-family: var(--w-font-body) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 19.541px !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  color: var(--w-color-navy) !important;
}
body.template-product-gift-card .push-btn__surface {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
/* Hide the decorative star icons that flank the label on the legacy
   button design. Keep the bag/cart icon (an svg) — only stars are
   matched by 'star-icon' class. */
body.template-product-gift-card .add-to-cart-btn .star-icon,
body.template-product-gift-card .buy-buttons .star-icon,
body.template-product-gift-card .product-form__buttons .star-icon {
  display: none !important;
}
/* Strip the lifted-shadow wrapper that the theme adds around the
   button (pt-button-shadow / pb-button-shadow). */
body.template-product-gift-card .buy-buttons [class*="-button-shadow"],
body.template-product-gift-card .product-form [class*="-button-shadow"] {
  padding: 0 !important;
}

/* 5) Gift card recipient form — confirmed via DevTools paste:
   wrapped in <data-island x-data="GiftCardRecipient">. Checkbox uses
   .custom-checkbox / .custom-checkbox__input. Inputs use .input
   class. Labels use Tailwind .font-secondary .text-sm utilities. */
body.template-product-gift-card [x-data*="GiftCardRecipient"] label,
body.template-product-gift-card [x-data*="GiftCardRecipient"] input,
body.template-product-gift-card [x-data*="GiftCardRecipient"] textarea,
body.template-product-gift-card [x-data*="GiftCardRecipient"] .font-secondary,
body.template-product-gift-card .custom-checkbox label {
  font-family: var(--w-font-body) !important;
  color: var(--w-color-navy) !important;
}
body.template-product-gift-card [x-data*="GiftCardRecipient"] label {
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
}
body.template-product-gift-card [x-data*="GiftCardRecipient"] input.input,
body.template-product-gift-card [x-data*="GiftCardRecipient"] textarea.input {
  border: 1px solid var(--w-color-navy) !important;
  border-radius: 8px !important;
  background: transparent !important;
  padding: 14px 16px !important;
  font-size: 16px !important;
  color: var(--w-color-navy) !important;
}

/* 6) Legal copy under the ATC — wrapped in <i> tag by the editor text
   block, rendering serif italic via the browser default. Force brand
   font and roman style, but keep the visual softness via lower
   font-size and tighter line-height. */
body.template-product-gift-card .product-block-text i,
body.template-product-gift-card .product-block-text em {
  font-family: var(--w-font-body) !important;
  font-style: normal !important;
  color: var(--w-color-navy) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* 7) Force the jdgm-prev-badge wrapper visible. Judge.me ships it as
   inline style="display:none" until their widget JS unhides it; on the
   gift card page the JS doesn't seem to be firing in time. The widget
   block is server-rendered with all the data we need (score + count). */
body.template-product-gift-card .jdgm-prev-badge {
  display: inline-block !important;
}

/* ════════════════════════════════════════════════════════════════════════
   ABOUT US PAGE
   Scoped to body.template-page-about-us. The page composes generic
   theme sections (image-with-text-overlay × 1, image-with-text × 3,
   feature-text, apps/instafeed, image-with-logo-overlay) so we only
   restyle here — don't touch the section files.
   ════════════════════════════════════════════════════════════════════════ */

/* 1) Kill the mid-word title break.
   image-with-text snippet sets .break-words (overflow-wrap: break-word)
   on the heading. Combined with a narrow text column it splits long
   words like "Remedy" → "Remed y" or "Perfected" → "Perfect ed". Force
   normal word-break + no hyphens so titles wrap at word boundaries. */
body.template-page-about-us .inline-heading-rte,
body.template-page-about-us .heading-feature,
body.template-page-about-us h1,
body.template-page-about-us h2,
body.template-page-about-us h3 {
  word-break: normal !important;
  overflow-wrap: normal !important;
  -webkit-hyphens: none !important;
  hyphens: none !important;
}

/* 2) Tighten heading-feature size on the page so long titles fit in the
   image-with-text columns without aggressive wrapping. The default
   heading-feature is quite large (~80px+) — taper to ~56px desktop /
   36px mobile so "The Roots of Willie's Remedy" + "Inspired by Nature,
   Perfected by Willie" fit cleanly. */
body.template-page-about-us .heading-feature {
  font-family: var(--w-font-display) !important;
  font-weight: 400 !important;
  font-size: clamp(32px, 5vw, 56px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  color: var(--w-color-navy) !important;
}

/* 3) Body text — Highway Gothic, navy. Covers .rte (rich text wrapper
   used inside image-with-text richtext setting) and any loose p tags. */
body.template-page-about-us .rte,
body.template-page-about-us .rte p,
body.template-page-about-us p {
  font-family: var(--w-font-body) !important;
  color: var(--w-color-navy) !important;
  font-size: 17px !important;
  line-height: 1.5 !important;
}

/* 4) Hero — image-with-text-overlay. Currently the title field is empty
   so the section renders as a bare image strip. When the editor drops
   "OUR STORY" + the subtitle in, this gives the hero an on-brand frame:
   navy background, big cream display title, centered with breathing
   room. Use scheme6 token vars (already configured in the JSON) so
   the navy-bg / cream-text scheme paints naturally. */
body.template-page-about-us > div:first-child section,
body.template-page-about-us [data-section-type*="image-with-text-overlay"],
body.template-page-about-us .image-with-text-overlay {
  background: var(--w-color-navy);
  color: var(--w-color-off-white);
  min-height: clamp(360px, 50vh, 560px);
}
body.template-page-about-us [data-section-type*="image-with-text-overlay"] h1,
body.template-page-about-us [data-section-type*="image-with-text-overlay"] h2,
body.template-page-about-us .image-with-text-overlay h1,
body.template-page-about-us .image-with-text-overlay h2 {
  font-family: var(--w-font-display) !important;
  font-size: clamp(64px, 12vw, 144px) !important;
  font-weight: 400 !important;
  line-height: 0.95 !important;
  letter-spacing: -0.02em !important;
  color: var(--w-color-off-white) !important;
  text-transform: uppercase !important;
}

/* 5) Feature-text section (the tagline "Count your blessings daily…").
   Centered display, navy on cream — already mostly there from scheme. */
body.template-page-about-us .feature-text,
body.template-page-about-us [data-section-type*="feature-text"] {
  text-align: center;
}
body.template-page-about-us [data-section-type*="feature-text"] .rte,
body.template-page-about-us [data-section-type*="feature-text"] .rte * {
  font-family: var(--w-font-display) !important;
  font-size: clamp(32px, 5vw, 56px) !important;
  line-height: 1.1 !important;
  color: var(--w-color-navy) !important;
  text-transform: uppercase !important;
  letter-spacing: -0.02em !important;
}

/* 6) Instagram block (FOLLOW ALONG @DRINKWILLIES) — heading typography
   so the title reads on-brand even when the feed grid is empty. */
body.template-page-about-us [data-section-type*="apps"] h1,
body.template-page-about-us [data-section-type*="apps"] h2,
body.template-page-about-us .instafeed h1,
body.template-page-about-us .instafeed h2 {
  font-family: var(--w-font-display) !important;
  font-size: clamp(28px, 4vw, 44px) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  color: var(--w-color-navy) !important;
  text-transform: uppercase !important;
}

/* ── Home page instafeed (mobile) ────────────────────────────────
   "Follow Along @drinkwillies" heading per Daniel's Figma spec.
   Mobile-only — desktop instafeed styling unchanged. Includes a
   3px rope flourish above the heading rendered via ::before pseudo
   (we can't modify the app's markup). */
@media (max-width: 767px) {
  body.template-index .instafeed h2 {
    font-family: var(--w-font-display);
    font-size: 28px;
    line-height: 23px;
    letter-spacing: -0.56px;
    font-weight: 400;
    color: var(--w-color-off-white);
    text-transform: uppercase;
    margin-bottom: 24px;
    position: relative;
    padding-top: 16px;
  }
  body.template-index .instafeed h2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: currentColor;
    -webkit-mask: var(--rope-small-mask) center / auto 100% repeat-x;
            mask: var(--rope-small-mask) center / auto 100% repeat-x;
  }
}

/* 7) Image ovals — Figma shows several oval framed images (Willie portrait,
   THC INFUSED / ALCOHOL FREE on Roots). The image-with-text snippet uses
   blob_type which the snippet maps to a SVG shape; ensure the rendered
   image has the brand cream border-frame look so it reads as a "sticker"
   not a raw photo. */
body.template-page-about-us .product-image-shape,
body.template-page-about-us [class*="blob"] img {
  border-radius: 50% / 60%;
}

/* ════════════════════════════════════════════════════════════════════════
   SITEWIDE BUTTON HOVER STATES (added 2026-05-31)
   Token-driven darker variant per brand colour from Daniel's Figma.
   Single block so every button's hover state lives in one place — when
   design tweaks come, update :root tokens and everything reacts.
   ════════════════════════════════════════════════════════════════════════ */

/* Transitions on every brand-styled interactive surface */
.btn-orange,
.add-to-cart-btn,
.push-btn,
.about-our-story__cta,
.willies-hero-cta--orange,
.willies-hero-cta--navy,
.willies-hero-cta--cream,
.willies-hero-cta--red-orange,
.willies-hero-cta--pale-yellow,
.jdgm-write-rev-link,
.jdgm-submit-rev,
.jdgm-cancel-rev,
.jdgm-form-dynamic__submit-rev,
.jdgm-btn,
body.template-product-gift-card .variant-input label,
body.template-product-gift-card .product-variant-picker-block label,
body.template-collection-merch .product-tile__quick-buy select,
body.template-collection-merch .product-tile__quick-buy button,
[class^=template-product] .jdgm-paginate__page {
  transition: background-color 180ms ease, color 180ms ease,
              border-color 180ms ease, opacity 180ms ease;
}

/* ── ORANGE-BG BUTTONS → orange-hover ─────────────────────────────
   The big set: Buy Now (split-content-carousel), merch ATC, gift card
   ATC, about-us CTA, hero orange CTA, Judge.me Write a Review +
   Submit Review. */
body.template-product-gift-card .add-to-cart-btn:hover,
body.template-product-gift-card .product__add-to-cart:hover,
body.template-product-gift-card .buy-buttons .push-btn:hover,
body.template-product-gift-card .buy-buttons button[type="submit"]:hover,
body.template-product-gift-card .product-form__buttons button[type="submit"]:hover,
body.template-collection-merch .product-tile__quick-buy .push-btn:hover,
body.template-collection-merch .product-tile__quick-buy button:hover,
body.template-collection-merch .product-tile__quick-buy [type="submit"]:hover,
body.template-collection-merch .product-tile__quick-buy .btn:hover,
.about-our-story__cta:hover,
.willies-hero-cta--orange:hover,
[class^=template-product] #judgeme_product_reviews .jdgm-write-rev-link:hover,
[class^=template-product] .jdgm-form .jdgm-btn.jdgm-btn--solid:hover,
[class^=template-product] .jdgm-form-dynamic .jdgm-btn.jdgm-btn--solid:hover,
[class^=template-product] .jdgm-form .jdgm-submit-rev:hover,
[class^=template-product] .jdgm-form-dynamic .jdgm-form-dynamic__submit-rev:hover {
  background: var(--w-color-orange-hover) !important;
  border-color: var(--w-color-orange-hover) !important;
}

/* Split-content-carousel Buy Now is scheme-driven (accent-1), not
   orange — hover darkens the accent in place (~15% toward black) so
   it works on red/navy/any scheme (was inheriting the orange-hover
   group above). */
.split-content-carousel-section .btn-orange:hover {
  background: color-mix(in srgb, rgb(var(--color-scheme-accent-1)) 85%, black) !important;
  border-color: color-mix(in srgb, rgb(var(--color-scheme-accent-1)) 85%, black) !important;
}

/* ── NAVY-BG BUTTONS → navy-hover ─────────────────────────────────
   Solid navy CTAs + gift card denomination when SELECTED. */
.willies-hero-cta--navy:hover,
body.template-product-gift-card .variant-input input:checked + label:hover,
body.template-product-gift-card .product-variant-picker-block input:checked + label:hover {
  background: var(--w-color-navy-hover) !important;
  border-color: var(--w-color-navy-hover) !important;
}

/* ── OUTLINE NAVY → darken border on hover ────────────────────────
   Gift card denomination (unselected), Judge.me Cancel / Back / Next
   border buttons. Border darkens to navy-hover, text colour stays
   navy (per Daniel — font colour should not shift on hover). */
body.template-product-gift-card .variant-input label:hover,
body.template-product-gift-card .product-variant-picker-block label:hover,
[class^=template-product] .jdgm-form .jdgm-btn.jdgm-btn--border:hover,
[class^=template-product] .jdgm-form-dynamic .jdgm-btn.jdgm-btn--border:hover,
[class^=template-product] .jdgm-form .jdgm-cancel-rev:hover {
  border-color: var(--w-color-navy-hover) !important;
}

/* ── OFF-WHITE / CREAM-BG → off-white-hover ───────────────────────
   Cream surface buttons (hero cream CTA, etc.). */
.willies-hero-cta--cream:hover {
  background: var(--w-color-off-white-hover);
}

/* ── RED-ORANGE → red-orange-hover ────────────────────────────────
   Hero red-orange CTA. */
.willies-hero-cta--red-orange:hover {
  background: var(--w-color-red-orange-hover) !important;
  border-color: var(--w-color-red-orange-hover) !important;
}

/* ── PALE-YELLOW → pale-yellow-hover ──────────────────────────────
   Hero pale-yellow CTA. */
.willies-hero-cta--pale-yellow:hover {
  background: var(--w-color-pale-yellow-hover) !important;
}

/* ── JUDGE.ME PAGINATION → underline on hover (text colour stays) ─
   Pagination is borderless navy text; no colour change per Daniel,
   so use underline as the hover affordance instead. */
[class^=template-product] .jdgm-paginate__page:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ── BERRY → berry-hover (per-flavor PDP) ─────────────────────────
   Stay AI alt-PDP / seltzer accent cards use
   var(--stay-ai-selected-accent-color). When Daniel surfaces a
   hover spec for the per-flavor card we'll add a parallel
   --stay-ai-selected-accent-hover var. Leaving the berry hover
   token (--w-color-berry-hover) defined at :root so it's ready. */

/* ── SPLIDE / CAROUSEL ARROWS sitewide → navy + hover ────────────
   Catches every Splide-based carousel arrow regardless of section:
   testimonials, image-focus, hero slideshow, etc. SVGs inside use
   fill='currentColor' so setting color on the button paints them. */
.splide__arrow,
.split-content-carousel-section .carousel-button,
[class^="template-product"] .jdgm-carousel-wrapper .splide__arrow {
  color: var(--w-color-navy);
  transition: color 150ms ease, opacity 150ms ease;
}
.splide__arrow:hover,
.split-content-carousel-section .carousel-button:hover,
[class^="template-product"] .jdgm-carousel-wrapper .splide__arrow:hover {
  color: var(--w-color-navy-hover);
}

/* ── SHAPE DIVIDER overflow fix ───────────────────────────────────
   base.bundle.css:5298 sets `.shape-divider { transform: scale(1.01, 1) }`
   — supposedly to mask sub-pixel gaps at the divider's left/right
   edges. In practice it expanded the element 1% past the viewport
   on every section with a divider, forcing horizontal scroll site-
   wide regardless of overflow-x containment on parents (browsers
   count the post-transform bounding box for scroll-overflow calc on
   some platforms).

   Daniel confirmed 2026-06-03 by commenting the rule out locally
   that the transform IS the cause. Override here to disable it.

   Earlier belt-and-braces (clip-path:inset(0) on .shape-divider +
   overflow-x:clip on the section) was removed 2026-06-08: the
   clip-path killed the ripped-paper translateY(-50%) overlap, and
   overflow-x:clip forces overflow-y:visible to compute as auto per
   spec — also clipping vertical overflow. Body already has
   overflow-x:clip (rebrand.css ~L235), so the page-level guard is
   sufficient. */
.shape-divider {
  transform: none;
  max-width: 100%;
}

/* ── NEWSLETTER + GENERIC SUBMIT BUTTONS → orange-hover ──────────
   Newsletter footer SIGN UP button (.newsletter-backstage__submit),
   subscribe forms (.btn-submit), and any orange-bg type=submit
   variants. */
.newsletter-backstage__submit,
.btn-submit {
  transition: background-color 150ms ease;
}
.newsletter-backstage__submit:hover,
.btn-submit:hover {
  background: var(--w-color-orange-hover);
}

/* Brand body typography for rich-text + image-with-text sections used
   across about/our-story pages. Headings + paragraphs per Figma. */
.inline-heading-rte.heading-standard,
.inline-heading-rte.heading-feature {
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 29px;
  line-height: 46px;
  letter-spacing: var(--w-ls-body);
  text-transform: uppercase;
}
.rte p {
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: var(--w-ls-body);
  text-transform: uppercase;
}

/* PDP Add to Cart button — hover bg dims to orange-hover. The per-
   seltzer rules in frontend.css paint .add-to-cart-btn / .push-btn__surface
   with an ID-scoped selector (specificity 0,1,4) that beats the base
   theme's .push-btn:hover .push-btn__surface rule, so hover does
   nothing. This rule matches that specificity (+ !important to beat
   gradient bg's painted by the per-seltzer rules). */
[class^=template-product] .willies-main-product button.add-to-cart-btn:hover,
[class^=template-product] .willies-main-product button.add-to-cart-btn:hover .push-btn__surface,
[class^=template-product] #shopify-section-template--23847429243127__main button.add-to-cart-btn:hover,
[class^=template-product] #shopify-section-template--23847429243127__main button.add-to-cart-btn:hover .push-btn__surface {
  /* ATC base background is hardcoded var(--w-color-orange) (see the
     rule at 5410-ish), so the hover should darken to orange-hover
     directly — NOT track the per-product accent variable. Using the
     accent var here previously caused navy-accent products (bundles,
     spirits) to flip to dark navy on hover even though the button
     itself stayed orange. */
  background: var(--w-color-orange-hover) !important;
}
/* …EXCEPT on seltzer/soda PDPs (handle contains "seltzer"), where the
   ATC base IS the per-product accent — there the hover darkens the
   accent in place (red page → darker red), not orange-hover. Extra
   [class*=seltzer] outweighs the rule above. */
[class^=template-product][class*=seltzer] .willies-main-product button.add-to-cart-btn:hover,
[class^=template-product][class*=seltzer] .willies-main-product button.add-to-cart-btn:hover .push-btn__surface,
[class^=template-product][class*=seltzer] #shopify-section-template--23847429243127__main button.add-to-cart-btn:hover,
[class^=template-product][class*=seltzer] #shopify-section-template--23847429243127__main button.add-to-cart-btn:hover .push-btn__surface {
  background: color-mix(in srgb, var(--stay-ai-selected-accent-color, var(--w-color-orange)) 85%, black) !important;
}

/* ATC text colour — paired with accent per Figma "Shop Button" table:
   navy + berry bgs → white text, everything else → navy. Driven from
   --stay-ai-selected-accent-text-color (emitted by product-accent-color
   snippet alongside the bg colour). One rule covers default + alt
   seltzers + any future themed product. */
[class^=template-product] .willies-main-product button.add-to-cart-btn,
[class^=template-product] .willies-main-product button.add-to-cart-btn .push-btn__surface,
[class^=template-product] #shopify-section-template--23847429243127__main button.add-to-cart-btn,
[class^=template-product] #shopify-section-template--23847429243127__main button.add-to-cart-btn .push-btn__surface {
  color: var(--stay-ai-selected-accent-text-color, var(--w-color-navy)) !important;
}

/* ATC border — frontend.css per-seltzer rules paint a 2px white border
   that Daniel doesn't want. Doubled .add-to-cart-btn class ties the
   per-seltzer specificity (0,0,4,1); later source order wins. */
[class^=template-product] .willies-main-product button.add-to-cart-btn.add-to-cart-btn,
[class^=template-product] #shopify-section-template--23847429243127__main button.add-to-cart-btn.add-to-cart-btn {
  border: 0 !important;
}

/* No border / outline / shadow on .btn.btn-orange (the generic Buy
   Now pill several sections render). Two-class selector beats the
   single-class scoped rules in frontend.css that paint a 2px navy
   border, and also kills any inherited focus outline / box-shadow
   that was rendering as a thin line on navy backgrounds. */
a.btn.btn-orange,
.btn.btn-orange {
  border: 0;
  box-shadow: none;
  outline: 0;
}
/* :focus (no -visible) — mouse + touch users get no ring (original
   intent of yesterday's "thin white line" fix). */
a.btn.btn-orange:focus,
.btn.btn-orange:focus {
  outline: 0;
  box-shadow: none;
}
/* :focus-visible — keyboard users get a visible ring back. Uses
   currentColor so the outline picks up the button's text colour and
   stays readable on every bg variant. WCAG 2.4.7. */
a.btn.btn-orange:focus-visible,
.btn.btn-orange:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
  box-shadow: none;
}

/* ── Focus-visible rings for the remaining major CTAs ─────────────
   currentColor pattern lets one rule serve every color variant
   (navy/cream/orange/red-orange/pale-yellow/berry hero CTAs, ATC's
   navy-when-available / off-white-when-disabled, etc.). WCAG 2.4.7. */
.willies-hero-cta:focus-visible,
.mega-cta-btn:focus-visible,
.about-our-story__cta:focus-visible,
.btn-submit:focus-visible,
[class^="template-product"] .order-summary-block .add-to-cart-btn:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────
   MOBILE NAV (.mobile-nav--reskin in sections/header.liquid)
   Off-white panel — opens FIXED below the header, fills the whole
   viewport below; scrolls internally if content overflows.
   2×3 grid of product cards, rope divider, text link list,
   full-width orange Shop All button.
   Targets header.liquid #764 markup (Alpine x-show driven). */

/* Body-scroll lock for the mobile menu is handled by the
   `x-trap.noscroll.inert="mobileMenuOpen"` Alpine directive on the
   .mobile-nav--reskin div in header.liquid (same convention as the
   cart drawer + modals + popups). The `.noscroll` modifier handles
   cross-browser scroll lock (incl. iOS Safari), `.inert` makes the
   rest of the page inert for assistive tech, and x-trap provides
   the focus trap. No custom JS needed in CSS. */

.mobile-nav--reskin {
  /* `position: absolute; top: 100%` anchors the menu directly below the
     <header> regardless of whether an announcement bar pushes the header
     down. Body-scroll-lock (via x-trap.noscroll on the open state) keeps
     the page still while open.
     Use 100dvh - header height as the cap so:
       - Menu bottom doesn't extend past the viewport (was 100vh, which
         pushed the bottom past the visible area when anchored below the
         header → showed a permanent internal scrollbar even when content
         fit).
       - `dvh` (dynamic viewport) accounts for mobile browser UI chrome
         (address bar) so the menu shrinks alongside it instead of
         getting clipped. */
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: calc(100dvh - 80px);
  background: var(--w-color-off-white);
  border: 1px solid var(--w-color-off-white);
  color: var(--w-color-navy);
  padding: 35px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 24px;
}
/* Drop the per-section margin-bottoms now that gap handles spacing. */
.mobile-nav--reskin .mobile-nav__cards,
.mobile-nav--reskin .mobile-nav__rope,
.mobile-nav--reskin .mobile-nav__links {
  margin: 0;
}
.mobile-nav--reskin .mobile-nav__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 19px;
  margin: 0 0 32px;
}
.mobile-nav--reskin .mobile-nav__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-decoration: none;
  color: inherit;
}
.mobile-nav--reskin .mobile-nav__card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  /* All four corners explicitly to defeat any framework reset that
     might be applying asymmetric radii. */
  border-radius: 8px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  overflow: hidden;
  display: block;
}
/* Placeholder square for menu items that have no image set (Variety
   Packs, Build Your Own Bundle, Merch, etc.). Same dimensions as the
   image so the 2-col grid rows stay even. Brand-cream fill with a
   subtle 1px navy outline so it reads as a card surface rather than an
   empty cell. */
.mobile-nav--reskin .mobile-nav__card-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  background: var(--w-color-off-white);
  border: 1px solid rgba(7, 29, 73, 0.12);
}
.mobile-nav--reskin .mobile-nav__card span {
  font-family: var(--w-font-display);
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.2916px;
  text-transform: uppercase;
  text-align: center;
  color: #131B43;
}
/* ─────────────────────────────────────────────────────────────
   ALT PDP (per-seltzer variants) — unified overrides
   Each seltzer variant in frontend.css has per-flavor color overrides
   on key-benefits-title / how-it-feels-header / key-benefits-alt-block
   etc. (purple for black-cherry-lime, red for POG, etc.). Daniel
   wants the same TREATMENT on every variant — heading navy, alt block
   bg transparent, alt-title in the per-product accent — with the
   per-product COLOR coming from --stay-ai-selected-accent-color
   (set per-product by snippets/product-accent-color.liquid).

   These rules use !important to beat the per-seltzer [class*=X]
   selectors in frontend.css (which have specificity 0,2,3+ via the
   .willies-main-product + ID-scoped chain). One rule, every variant,
   correctly themed per product. */

[class^="template-product"] .willies-main-product .key-benefits-title,
[class^="template-product"] .willies-main-product .how-it-feels-header,
[class^="template-product"] #shopify-section-template--23847429243127__main .key-benefits-title,
[class^="template-product"] #shopify-section-template--23847429243127__main .how-it-feels-header {
  color: var(--w-color-navy) !important;
}

[class^="template-product"] .willies-main-product .key-benefits-alt-block,
[class^="template-product"] #shopify-section-template--23847429243127__main .key-benefits-alt-block {
  background-color: transparent !important;
  background-image: none !important;
}
[class^="template-product"] .willies-main-product .key-benefits-alt-block .key-benefits-alt-title,
[class^="template-product"] #shopify-section-template--23847429243127__main .key-benefits-alt-block .key-benefits-alt-title {
  color: var(--w-color-navy) !important;
}

/* .willies-vs-table-title — per-seltzer rules in frontend.css paint
   the heading in the flavour accent (purple on BCL, etc.). Daniel
   wants it navy everywhere. Doubled class on .willies-vs-table-title
   bumps specificity to 0,0,4,0 to tie the per-seltzer selector; same
   !important + later source order then wins. */
[class^="template-product"] .willies-vs-table-section .willies-vs-table-title.willies-vs-table-title {
  color: var(--w-color-navy) !important;
}

/* .vs-table-img-desktop — replace the legacy 808px cap with a 100%
   cap so the image fills its parent .willies-vs-table-container
   (which is capped at 994px on desktop) without overflowing on
   smaller viewports. */
[class^="template-product"] .willies-vs-table-section .vs-table-img-desktop {
  max-width: 100% !important;
  width: 100% !important;
}

/* .willies-vs-table-tabs — Figma spec for the mobile tabs strip:
   1.5px navy border, 12px radius, off-white-grey bg, 6px padding,
   4px gap. Cleaner look than the original 16px-radius bg-white +
   stacked 2px tab borders that read as jagged. */
[class^="template-product"] .willies-vs-table-section .willies-vs-table-tabs {
  border: 1.5px solid var(--w-color-navy) !important;
  border-radius: 12px !important;
  background: #F6F3F2 !important;
  padding: 6px !important;
  gap: 4px !important;
}
[class^="template-product"] .willies-vs-table-section .willies-vs-table-tabs .willies-vs-table-tab .willies-vs-table-link {
  border: 1.5px solid var(--w-color-navy) !important;
  border-radius: 8px !important;
}

/* .willies-vs-table-label — uppercase per Daniel. */
[class^="template-product"] .willies-vs-table-section .willies-vs-table-label {
  text-transform: uppercase !important;
}

/* Active mobile tab — border + text in PDP accent. Inactive tabs
   keep the navy border/text + 60% opacity from frontend.css. Same
   0,0,7,0 specificity as the existing active rule + later source
   order wins. */
[class^="template-product"] .willies-vs-table-section .willies-vs-table-tabs-wrapper .willies-vs-table-tabs .willies-vs-table-tab.active .willies-vs-table-link {
  border-color: var(--stay-ai-selected-accent-color, var(--w-color-navy)) !important;
  color: var(--stay-ai-selected-accent-color, var(--w-color-navy)) !important;
}

/* .willies-faqs-right mobile padding: 0 (was 0 16px in frontend.css). */
@media (max-width: 991px) {
  [class^="template-product"] .willies-faqs-right {
    padding: 0 !important;
  }
}

/* "A Message From Willie" title — drop from 54px to 48px on mobile,
   then 36px sub-480 so it doesn't ugly-wrap on handsets. */
@media (max-width: 991px) {
  [class^="template-product"] .willies-message-title {
    font-size: 48px !important;
  }
}
@media (max-width: 479px) {
  [class^="template-product"] .willies-message-title {
    font-size: 36px !important;
  }
}

/* Lead paragraph (h2) inside .key-benefits-richtext gets bottom
   breathing room before the bullet list (Red Headed Stranger Bundle
   blurb + similar long intro paras). */
[class^="template-product"] .key-benefits-richtext h2 {
  padding-bottom: 16px;
}

/* PDP media gallery arrows — frontend.css renders these via
   `content: url(<base64 orange-gradient svg>)`, which replaces the
   element wholesale so colour/background can't reach the visible
   arrow. Override `content` with inline orange SVGs (mirror pair).
   Hover + :active swap to the darker orange-hover token via a
   second content URL. */
[class^="template-product"] .product-gallery-main .swiper-gallery-button-prev {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='31' height='23' viewBox='0 0 31 23' fill='none'><path d='M20.5 22.9937C13.8226 17.1048 9.40378 14.5225 0.5 10.9937C4.9 10.9937 15.6667 3.66032 20.5 -0.00634853L20.5 7.99365C25.3 7.99365 29.5 6.32698 31 5.49365L31 17.4937C26.2 15.0937 22 15.1603 20.5 15.4937L20.5 22.9937Z' fill='%23FF8200'/></svg>") !important;
}
[class^="template-product"] .product-gallery-main .swiper-gallery-button-next {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='31' height='23' viewBox='0 0 31 23' fill='none'><path d='M10.5 22.9937C17.1774 17.1048 21.5962 14.5225 30.5 10.9937C26.1 10.9937 15.3333 3.66032 10.5 -0.00634853L10.5 7.99365C5.7 7.99365 1.5 6.32698 -2.40413e-07 5.49365L-7.64949e-07 17.4937C4.8 15.0937 9 15.1603 10.5 15.4937L10.5 22.9937Z' fill='%23FF8200'/></svg>") !important;
}
[class^="template-product"] .product-gallery-main .swiper-gallery-button-prev:hover,
[class^="template-product"] .product-gallery-main .swiper-gallery-button-prev:active {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='31' height='23' viewBox='0 0 31 23' fill='none'><path d='M20.5 22.9937C13.8226 17.1048 9.40378 14.5225 0.5 10.9937C4.9 10.9937 15.6667 3.66032 20.5 -0.00634853L20.5 7.99365C25.3 7.99365 29.5 6.32698 31 5.49365L31 17.4937C26.2 15.0937 22 15.1603 20.5 15.4937L20.5 22.9937Z' fill='%23CC5F02'/></svg>") !important;
}
[class^="template-product"] .product-gallery-main .swiper-gallery-button-next:hover,
[class^="template-product"] .product-gallery-main .swiper-gallery-button-next:active {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='31' height='23' viewBox='0 0 31 23' fill='none'><path d='M10.5 22.9937C17.1774 17.1048 21.5962 14.5225 30.5 10.9937C26.1 10.9937 15.3333 3.66032 10.5 -0.00634853L10.5 7.99365C5.7 7.99365 1.5 6.32698 -2.40413e-07 5.49365L-7.64949e-07 17.4937C4.8 15.0937 9 15.1603 10.5 15.4937L10.5 22.9937Z' fill='%23CC5F02'/></svg>") !important;
}
[class^="template-product"] .product-gallery-main .swiper-gallery-button-prev,
[class^="template-product"] .product-gallery-main .swiper-gallery-button-next {
  transition: opacity 150ms ease;
}
[class^="template-product"] .product-gallery-main .swiper-gallery-button-prev.swiper-button-disabled,
[class^="template-product"] .product-gallery-main .swiper-gallery-button-next.swiper-button-disabled {
  opacity: 0.4;
}

/* Heading dividers (the small rope) on .how-it-feels-header and
   .key-benefits-title — the per-seltzer rules in frontend.css paint
   the ::after as a flat 1px coloured line, so it doesn't match the
   rope-mask divider used on .key-benefits-alt-divider. Unify: 5px
   navy rope-small mask on every PDP. */
[class^="template-product"] .willies-main-product .how-it-feels-header::after,
[class^="template-product"] .willies-main-product .key-benefits-title::after,
[class^="template-product"] #shopify-section-template--23847429243127__main .how-it-feels-header::after,
[class^="template-product"] #shopify-section-template--23847429243127__main .key-benefits-title::after {
  flex: 1 !important;
  height: 5px !important;
  background-color: var(--w-color-navy) !important;
  background-image: none !important;
  -webkit-mask: var(--rope-small-mask) center / auto 100% repeat-x !important;
          mask: var(--rope-small-mask) center / auto 100% repeat-x !important;
  border-radius: 0 !important;
}

/* Key-benefits bullet circle — preserve the original navy-ring + white-
   check SVG detail, drive only the circle bg from per-product accent.
   The per-seltzer rules in frontend.css set `content: url(<base64>)`
   with a hard-coded circle fill per flavour. We replace `content` with
   an empty pseudo sized 20×21, fill with accent via background-color,
   round to a circle via border-radius, and overlay the navy ring +
   white check via background-image (transparent fill so the bg shows
   through inside the ring). One rule covers default + alt PDPs. */
[class^="template-product"] .willies-main-product .key-benefits-richtext li::before,
[class^="template-product"] .willies-main-product .key-benefits-alt-block .key-benefits-alt-richtext li::before,
[class^="template-product"] #shopify-section-template--23847429243127__main .key-benefits-richtext li::before,
[class^="template-product"] #shopify-section-template--23847429243127__main .key-benefits-alt-block .key-benefits-alt-richtext li::before {
  content: '' !important;
  display: inline-block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  border-radius: 50%;
  background-color: var(--stay-ai-selected-accent-color, var(--w-color-orange));
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 21' fill='none'><circle cx='10' cy='10.0608' r='9.58333' fill='none' stroke='%23121943' stroke-width='0.833333'/><path d='M5.52796 11.0467C5.23424 10.7455 5.23424 10.265 5.52796 9.96374C5.83238 9.65151 6.33428 9.65151 6.63871 9.96374L8.79167 12.1719L14.1946 6.63041C14.499 6.31818 15.001 6.31818 15.3054 6.63041C15.5991 6.93166 15.5991 7.41214 15.3054 7.7134L9.38833 13.7822C9.06127 14.1176 8.52206 14.1176 8.195 13.7822L5.52796 11.0467Z' fill='white'/></svg>");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* Kill the basket/shopping-bag SVG injected via ::after on the ATC
   button's push-btn surface. frontend.css ships ~28 per-seltzer rules
   that paint `content: url(data:image/svg+xml;base64,...)` on the
   pseudo-element. Daniel doesn't want a basket on the ATC. One global
   override beats every per-variant rule. */
[class^="template-product"] .add-to-cart-btn .push-btn__surface::after,
[class^="template-product"] button.add-to-cart-btn .push-btn__surface::after {
  content: none !important;
  display: none !important;
}

/* Rope divider — full-width horizontal navy rope. Locked at 6px tall
   with flex-shrink:0 so the flex column's `justify-content: space-between`
   can't shrink it to 0. Width:100% + display:block defensive against
   any inherited flex sizing. */
.mobile-nav--reskin .mobile-nav__rope {
  display: block;
  width: 100%;
  height: var(--w-rope-h);
  min-height: var(--w-rope-h);
  flex: 0 0 var(--w-rope-h);
  margin: 0;
  background-color: var(--w-color-navy);
  -webkit-mask: var(--rope-small-mask) center / auto 100% repeat-x;
          mask: var(--rope-small-mask) center / auto 100% repeat-x;
}
.mobile-nav--reskin .mobile-nav__links {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}
.mobile-nav--reskin .mobile-nav__links li {
  margin: 0;
}
.mobile-nav--reskin .mobile-nav__links a {
  display: block;
  font-family: var(--w-font-display);
  font-weight: 400;
  font-size: 18px;
  line-height: 33px;
  letter-spacing: -0.2916px;
  text-transform: uppercase;
  color: var(--w-color-navy);
  text-decoration: none;
}
/* Shop All button — full-width orange with star flanks. */
.mobile-nav--reskin .mobile-nav__shop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 56px;
  padding: 10px;
  border: 1px solid var(--w-color-orange);
  border-radius: 6px;
  background: var(--w-color-orange);
  color: var(--w-color-navy);
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 22px;
  line-height: 19.2px;
  text-transform: uppercase;
  text-decoration: none;
}
.mobile-nav--reskin .mobile-nav__shop .star-icon {
  width: 13px;
  height: 12px;
  color: var(--w-color-navy);
  flex-shrink: 0;
}

/* ── Your Privacy Choices page (page.your-privacy-choice template) ─
   Shopify auto-generates the data-sharing opt-out form inside
   {{ page.content }} — including a flat <button>Opt out</button>
   with no usable class. Body-class scope keeps this paint limited to
   this one template; the button gets the sitewide push-btn look
   (orange fill, navy text, 6px radius, HG body uppercase). */
body.template-page-your-privacy-choice .rte button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--w-color-orange);
  color: var(--w-color-navy);
  border: 0;
  border-radius: 6px;
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 150ms ease;
}
body.template-page-your-privacy-choice .rte button:hover {
  background: var(--w-color-orange-hover);
}

/* ── .push-btn — sitewide button used on 404, slide CTAs, etc.
   Restyle to the brand default look: orange fill, navy text + 1px
   border, 6px radius, Highway Gothic body uppercase. Drops the theme
   default shadow-block behaviour in favour of the same flat look as
   the Willies hero CTA + newsletter submit. */
.push-btn,
.push-btn::after { box-shadow: none; }
.push-btn .push-btn__surface {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--w-color-orange);
  color: var(--w-color-navy);
  border: 0;
  border-radius: 6px;
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transition: background-color 150ms ease;
}
.push-btn:hover .push-btn__surface {
  background: var(--w-color-orange-hover);
  transform: none;
}

/* ── Pagination prev / next arrow buttons (.pagination__item.push-btn)
   Used at the bottom of blog lists, search results, paginated
   collections. Brand-styled square icon button: orange fill, navy
   stroke icon, 6px radius, hover orange-hover. */
.pagination__item.push-btn,
a.pagination__item.push-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 6px;
  background: var(--w-color-orange);
  border: 0;
  color: var(--w-color-navy);
  text-decoration: none;
  transition: background-color 150ms ease;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}
.pagination__item.push-btn:hover,
.pagination__item.push-btn:focus-visible {
  background: var(--w-color-orange-hover);
}
.pagination__item.push-btn .push-btn__surface,
.pagination__item.push-btn .push-btn__surface--secondary {
  display: contents;
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
  color: inherit;
}
/* Inner Tailwind h-5 w-5 (20×20) span is replaced with a bigger
   square so the 0–48 viewBox arrow + round-cap stroke don't kiss
   the edge. */
.pagination__item.push-btn .block.h-5,
.pagination__item.push-btn .w-5 {
  width: 28px !important;
  height: 28px !important;
}
.pagination__item.push-btn svg {
  width: 28px;
  height: 28px;
  display: block;
  overflow: visible;
}
.pagination__item.push-btn svg path {
  stroke: currentColor;
}

/* ── Judge.me carousel item review title + body line-clamp:
   cut at a word boundary instead of mid-word. The base CSS uses
   -webkit-line-clamp which truncates at the line count, but
   overflow-wrap: break-word elsewhere can force a hyphenless
   mid-word break before the ellipsis. Forcing word-break: normal
   + overflow-wrap: normal restores clean word boundaries. */
.jdgm-carousel-item__review-title.jdgm-line-clamp,
.jdgm-carousel-item__review-body.jdgm-line-clamp,
.jdgm-carousel-item__review-title.jdgm-line-clamp p,
.jdgm-carousel-item__review-body.jdgm-line-clamp p {
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

/* ── Blog list article card heading → orange on hover.
   The card-wrap span is the clickable overlay; both :hover (on the
   <a>) and :focus-visible flip the h2 link text to brand orange. */
.heading-secondary a[href*="/blogs/"]:hover,
.heading-secondary a[href*="/blogs/"]:focus-visible,
.heading-secondary:has(a[href*="/blogs/"]):hover a {
  color: var(--w-color-orange);
}

/* ────────────────────────────────────────────────────────────────
   MERCH PRODUCT TILES + COLLECTION CHROME
   Scope: [data-merch] attribute on .product-tile (set in
   snippets/product-tile.liquid when template.suffix == 'merch'),
   plus body.template-collection-merch for grid/filter chrome.
   Cactus card-bg asset pending — placeholder pink applied via
   --w-merch-card-bg token so swap is one line when asset lands.
   ──────────────────────────────────────────────────────────────── */
:root {
  /* Cactus / desert pink background painted behind every merch product
     image on the merch tile + (eventually) sitewide where the [data-merch]
     attribute lights up. Asset dropped 2026-06-10. The #F8D5C4 fallback
     sits behind the image while it loads (avoids a navy flash). */
  --w-merch-card-bg: url("Merch Background.png") center / cover no-repeat #F8D5C4;
}

/* — Outer .product-tile li wrapper: flex column, content-sized, 6 radius — */
body.template-collection-merch ul.grid > li > .product-tile {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  height: auto;
  border-radius: 6px;
  overflow: hidden;
}

/* — Card container — keep the theme's Tailwind p-2.5 lg:p-5 inset so
   image + text + button breathe inside the rounded card. */
.product-tile[data-merch] .product-tile__container {
  background: transparent;
  border-radius: 6px;
  overflow: hidden;
  height: auto;
  box-shadow: none;
}

/* — Image area (1:1 + cactus bg behind product PNG) — */
.product-tile[data-merch] .product-tile__featured-media {
  display: block;
  border-radius: 6px;
  overflow: hidden;
  background: var(--w-merch-card-bg);
}
.product-tile[data-merch] .product-media-object {
  position: relative;
  aspect-ratio: 1 / 1;
  background: transparent;
}
.product-tile[data-merch] .product-media-object .media,
.product-tile[data-merch] .product-media-object .object-wrapper {
  background: transparent;
}
.product-tile[data-merch] .product-media-object img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* — Text block (title + price) — */
.product-tile[data-merch] .product-tile__container > .product-tile.mt-5 {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
}
.product-tile[data-merch] .product-tile__container > .product-tile.mt-5 > a {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-decoration: none;
}

/* — Title — */
.product-tile[data-merch] h3 {
  font-family: var(--w-font-body);
  font-size: 22px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0;
  color: var(--w-color-navy);
  text-align: center;
  text-transform: uppercase;
  margin: 0;
}

/* — Price (Quick-buy + non-quick-buy rendering both targeted) — */
.product-tile[data-merch] [data-product-price],
.product-tile[data-merch] .price__regular .price-item,
.product-tile[data-merch] .price__sale .price-item--sale {
  font-family: var(--w-font-body);
  font-size: 26px;
  font-weight: 400;
  line-height: 18.523px;
  color: var(--w-color-navy);
  text-align: center;
  text-transform: uppercase;
  margin: 0;
  display: inline-block;
}

/* — Variant select (fallback selector) — */
.product-tile[data-merch] select[id^="fallback-selector-"] {
  display: flex;
  width: 127px;
  max-width: 100%;
  height: auto;
  padding: 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  border: 2px solid var(--w-color-navy);
  background-color: var(--w-color-off-white);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23071D49' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  color: var(--w-color-navy);
  font-family: var(--w-font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
  text-align: center;
  text-align-last: center;
  -webkit-appearance: none;
  appearance: none;
  margin: 0 auto;
  cursor: pointer;
}
.product-tile[data-merch] select[id^="fallback-selector-"]:focus {
  outline: 2px solid var(--w-color-navy);
  outline-offset: 2px;
}

/* — Quick-buy wrapper sits 32px from the card bottom (Figma spec) — */
.product-tile[data-merch] .product-tile__quick-buy {
  padding: 16px;
}

/* — Add to Cart button (override .push-btn for merch) — */
.product-tile[data-merch] .product-tile__quick-buy .push-btn {
  display: flex;
  width: 317px;
  max-width: 100%;
  height: 56px;
  padding: 8.142px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10.177px;
  border-radius: 6.106px;
  border: 1.018px solid var(--w-color-orange);
  background: var(--w-color-orange);
  color: var(--w-color-navy);
  font-family: var(--w-font-body);
  font-size: clamp(16px, 5vw, 22px);
  font-weight: 400;
  line-height: 19.541px;
  text-align: center;
  text-transform: uppercase;
  margin: 0 auto;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.product-tile[data-merch] .product-tile__quick-buy .push-btn::before,
.product-tile[data-merch] .product-tile__quick-buy .push-btn::after {
  content: none;
}
.product-tile[data-merch] .product-tile__quick-buy .push-btn .push-btn__surface,
.product-tile[data-merch] .product-tile__quick-buy .push-btn .push-btn__surface--secondary {
  display: contents;
  background: none;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  padding: 0;
  border: 0;
  box-shadow: none;
}
.product-tile[data-merch] .product-tile__quick-buy .push-btn:hover,
.product-tile[data-merch] .product-tile__quick-buy .push-btn:focus-visible {
  background: var(--w-color-orange-hover);
  border-color: var(--w-color-orange-hover);
}
.product-tile[data-merch] .product-tile__quick-buy .push-btn[disabled],
.product-tile[data-merch] .product-tile__quick-buy .push-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* — Cart icon (rendered inline in the button when is_merch) — */
.product-tile[data-merch] .merch-cart-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-block;
}

/* — Badges (replace static-sticker for merch) — */
.product-tile[data-merch] .merch-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  display: inline-flex;
  padding: 10px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 6px;
  font-family: var(--w-font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
  max-width: calc(100% - 32px);
}
/* Allow wrap + smaller font on narrow tiles so LIMITED EDITION
   doesn't push past the card edge on handsets. */
@media (max-width: 479px) {
  .product-tile[data-merch] .merch-badge {
    font-size: 14px;
    line-height: 18px;
    padding: 8px;
    white-space: normal;
  }
}
.product-tile[data-merch] .merch-badge--new {
  background: var(--w-color-orange);
  color: var(--w-color-navy);
}
.product-tile[data-merch] .merch-badge--limited-edition {
  background: var(--w-color-copper);
  color: var(--w-color-white);
}
.product-tile[data-merch] .merch-badge--sold-out {
  background: var(--w-color-off-white);
  color: var(--w-color-navy);
}

/* — Grid column gap on merch collection page — */
body.template-collection-merch ul.grid {
  column-gap: 48px;
  row-gap: 48px;
}

/* — Filter + Sort buttons on merch collection (data-collection-toggle) — */
body.template-collection-merch .push-btn[data-collection-toggle] {
  display: flex;
  width: 127px;
  height: 54px;
  padding: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  border: 2px solid var(--w-color-navy);
  background: var(--w-color-off-white);
  color: var(--w-color-navy);
  font-family: var(--w-font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
  text-align: center;
  text-transform: none;
}
body.template-collection-merch .push-btn[data-collection-toggle]::before,
body.template-collection-merch .push-btn[data-collection-toggle]::after {
  content: none;
}
body.template-collection-merch .push-btn[data-collection-toggle] .push-btn__surface,
body.template-collection-merch .push-btn[data-collection-toggle] .push-btn__surface--secondary {
  display: contents;
  background: none;
  color: inherit;
  font: inherit;
  padding: 0;
  border: 0;
  box-shadow: none;
  text-transform: inherit;
}
body.template-collection-merch .push-btn[data-collection-toggle]:hover,
body.template-collection-merch .push-btn[data-collection-toggle]:focus-visible {
  background: var(--w-color-off-white-hover);
}

/* — Rope divider under the filter/sort row on merch collection — */
body.template-collection-merch .merch-collection-rope {
  color: var(--w-color-navy);
  margin-bottom: 32px;
}
body.template-collection-merch .merch-collection-rope .rope-divider {
  display: flex;
  align-items: center;
  gap: 0;
}
/* No stars on the merch collection rope (Daniel 2026-06-10). */
body.template-collection-merch .merch-collection-rope .rope-divider__star {
  display: none;
}
body.template-collection-merch .merch-collection-rope .rope-divider__line {
  flex: 1 1 auto;
  height: 3px;
  min-width: 0;
  background-color: currentColor;
  -webkit-mask: var(--rope-small-mask) center / auto 100% repeat-x;
          mask: var(--rope-small-mask) center / auto 100% repeat-x;
}

/* — Filter (left drawer) + Sort (right drawer) modal contents — */
body.template-collection-merch :is(#left-drawer-slot, #right-drawer-slot) {
  background: var(--w-color-off-white);
  color: var(--w-color-navy);
}
body.template-collection-merch :is(#left-drawer-slot, #right-drawer-slot) :is(.heading-standard, h1) {
  font-family: var(--w-font-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: var(--w-ls-tight);
  text-transform: uppercase;
  color: var(--w-color-navy);
}
body.template-collection-merch :is(#left-drawer-slot, #right-drawer-slot) button.flex.w-full.items-center.py-2 {
  font-family: var(--w-font-body);
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--w-color-navy);
}
body.template-collection-merch :is(#left-drawer-slot, #right-drawer-slot) .custom-checkbox label {
  font-family: var(--w-font-body);
  font-size: 16px;
  color: var(--w-color-navy);
  text-transform: none;
}
body.template-collection-merch :is(#left-drawer-slot, #right-drawer-slot) :is(.input, input[type="number"]) {
  border: 1px solid var(--w-color-navy);
  background: var(--w-color-off-white);
  color: var(--w-color-navy);
  border-radius: 8px;
  padding: 10px;
  font-family: var(--w-font-body);
  font-size: 18px;
}
body.template-collection-merch :is(#left-drawer-slot, #right-drawer-slot) .push-btn {
  border-radius: 6.106px;
  border: 1.018px solid var(--w-color-orange);
  background: var(--w-color-orange);
  color: var(--w-color-navy);
  font-family: var(--w-font-body);
  font-size: 22px;
  font-weight: 400;
  line-height: 19.541px;
  text-transform: uppercase;
  height: 56px;
}
body.template-collection-merch :is(#left-drawer-slot, #right-drawer-slot) .push-btn .push-btn__surface {
  display: contents;
  background: none;
  color: inherit;
  font: inherit;
  padding: 0;
  border: 0;
  box-shadow: none;
}
body.template-collection-merch :is(#left-drawer-slot, #right-drawer-slot) .push-btn:hover {
  background: var(--w-color-orange-hover);
  border-color: var(--w-color-orange-hover);
}
body.template-collection-merch :is(#left-drawer-slot, #right-drawer-slot) button[aria-label="Move to top"] svg path {
  stroke: var(--w-color-navy);
}
body.template-collection-merch :is(#left-drawer-slot, #right-drawer-slot) .svg-scale svg path {
  stroke: var(--w-color-navy);
}

/* ════════════════════════════════════════════════════════════════════════
   DESTINI STORE LOCATOR widget (#locator-template-container)
   Third-party Chakra-UI-based locator embedded on /pages/find-in-stores.
   Restyle to brand: HG body / navy text / orange links / brand buttons.
   Scoped to #locator-template-container so it doesn't bleed elsewhere.
   ════════════════════════════════════════════════════════════════════════ */
#locator-template-container,
#locator-template-container * {
  font-family: var(--w-font-body) !important;
  color: var(--w-color-navy) !important;
  box-sizing: border-box;
}
#locator-template-container .chakra-text {
  color: var(--w-color-navy) !important;
}
/* Headings (h1..h5) — HG display + uppercase + navy. Match the
   bare-tag Destini selector (`#locator-template h3`) and broaden to
   the full container scope so brand styling wins. */
#locator-template-container h1,
#locator-template-container h2,
#locator-template-container h3,
#locator-template-container h4,
#locator-template-container h5,
#locator-template-container h1.chakra-text,
#locator-template-container h2.chakra-text,
#locator-template-container h3.chakra-text,
#locator-template-container h4.chakra-text,
#locator-template-container h5.chakra-text,
body #locator-template-container h1[class*="chakra-text"],
body #locator-template-container h2[class*="chakra-text"],
body #locator-template-container h3[class*="chakra-text"],
body #locator-template-container h4[class*="chakra-text"],
body #locator-template-container h5[class*="chakra-text"] {
  font-family: var(--w-font-display) !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  color: var(--w-color-navy) !important;
}
/* Brand buttons inside the widget. Selector list includes `body` +
   button element + ID + a broad attribute-style class match so any
   Destini hash-suffixed class (.destini-css-XXXXXX) on a button still
   gets brand styling. */
#locator-template-container .chakra-button,
body #locator-template-container button.chakra-button,
body #locator-template-container button[class*="destini-css-"] {
  font-family: var(--w-font-body) !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  color: var(--w-color-navy) !important;
  background: var(--w-color-off-white) !important;
  background-color: var(--w-color-off-white) !important;
  background-image: none !important;
  border: 1px solid var(--w-color-navy) !important;
  border-radius: 6px !important;
  padding: 10px 16px !important;
  height: auto !important;
  min-height: 40px !important;
  box-shadow: none !important;
  outline: none !important;
  transition: background-color 150ms ease, color 150ms ease !important;
  cursor: pointer;
}
#locator-template-container .chakra-button:hover,
body #locator-template-container button.chakra-button:hover,
body #locator-template-container button[class*="destini-css-"]:hover {
  background: var(--w-color-navy) !important;
  background-color: var(--w-color-navy) !important;
  color: var(--w-color-off-white) !important;
}
#locator-template-container .chakra-button:hover svg {
  fill: var(--w-color-off-white) !important;
  stroke: var(--w-color-off-white) !important;
}
#locator-template-container .chakra-button svg {
  fill: var(--w-color-navy) !important;
  stroke: var(--w-color-navy) !important;
  transition: fill 150ms ease, stroke 150ms ease !important;
}
/* Inline brand links (orange + underline) */
#locator-template-container a.chakra-link {
  color: var(--w-color-orange) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
#locator-template-container a.chakra-link:hover {
  color: var(--w-color-orange-hover) !important;
}
/* Status icons (no stores found, etc.) — navy */
#locator-template-container .chakra-icon {
  color: var(--w-color-navy) !important;
  fill: var(--w-color-navy) !important;
}
/* Footer — keep destini attribution low-key but brand-coloured */
#locator-template-container footer,
#locator-template-container footer * {
  font-family: var(--w-font-body) !important;
  font-size: 12px !important;
}
#locator-template-container footer {
  background: var(--w-color-off-white) !important;
  border-top: 1px solid color-mix(in srgb, var(--w-color-navy) 15%, transparent) !important;
}

/* NOTE: Destini renders inside a declarative shadow DOM
   (<template shadowrootmode="open">) so light-DOM CSS cannot reach
   any element with .destini-css-* classes. Brand styling for those
   elements is injected directly into the shadow root by the
   snippet 'destini-shadow-styles.liquid', wired into the Custom
   Liquid block on /pages/find-in-store. */

/* /cart page — bump all Tailwind text-sm / text-xs utility classes to 16px.
   Cart items, free-shipping unlock message, quantity input, remove link,
   subtotal line, note label, shipping calc text + error pill all use those
   utilities. Scoped to .template-cart so /collections, PDP etc. are
   untouched. */
.template-cart .text-sm,
.template-cart .text-xs {
  font-size: 16px;
  line-height: 1.4;
}

/* ──────────────────────────────────────────────────────────────
   Image Focus Carousel — jagged-arch border on each slide
   Opt-in via section setting (Apply jagged arch outline to each slide).
   Pseudo-element overlay uses mask-image on assets/recipe-border.svg
   so the navy outline tints via background-color and scales with the
   slide. Inside of the arch stays transparent so the cocktail image
   shows through. */
.ifc--arch-border .splide__slide .pb-media-shadow,
.ifc--arch-border .splide__slide [data-slide-scale-container] > .relative {
  position: relative;
}
.ifc--arch-border .splide__slide .pb-media-shadow::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--w-color-navy);
  -webkit-mask: url('/cdn/shop/t/files/recipe-border.svg') center / 100% 100% no-repeat;
          mask: url('/cdn/shop/t/files/recipe-border.svg') center / 100% 100% no-repeat;
  pointer-events: none;
  z-index: 5;
}

/* ─────────────────────────────────────────────────────────────
   WR-205 — Sticky Add to Cart bar (PDP, mobile + desktop)
   Figma: Willie's x Anatta Optimization 2026 node 58-615
   (mobile bars 67:1764 / 67:323, desktop bars 287:5555 / 287:5533).
   Markup: snippets/willies-sticky-atc.liquid
   Behavior (show-after-buy-box, Stay AI sync, price mirroring):
   initStickyAtc() in src/js/templates/product.js.
   Sits at z-index 40 — below the cart drawer (z-50) so the drawer
   overlays the bar after an add-to-cart.
   ─────────────────────────────────────────────────────────────*/
/* Plain fixed bar: no transform or animation. iOS clips a transform
   layer at the viewport, which reopens the gap under Safari's toolbar —
   the band in initStickyAtc() covers that zone instead. Out of document
   flow, so it adds no scroll space after the footer (WR-223). */
.willies-sticky-atc-anchor {
  position: static;
  height: 0;
}
.willies-sticky-atc {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--w-color-navy);
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); /* Figma 67:1764: 16px all around */
  visibility: hidden;
}
.willies-sticky-atc.is-visible {
  visibility: visible;
}

/* Richpanel's chat launcher pins itself to the same corner as the bar's
   ADD TO CART button, inline-styled bottom:0 at z-index 2147483647. The
   bar cannot win that z-index war (and must stay below the cart drawer),
   so while the bar is visible the launcher is lifted above it instead.
   116px = measured bar height under 768px, 124px at 768px and up; the
   bubble carries its own 20px inset inside the 100px container.
   !important because the vendor value is an inline style. */
body:has(.willies-sticky-atc.is-visible) .rp-micro-app-dummy-icon-container {
  bottom: 116px !important;
}
@media (min-width: 768px) {
  body:has(.willies-sticky-atc.is-visible) .rp-micro-app-dummy-icon-container {
    bottom: 124px !important;
  }
}

/* Alia's "Mystery Discount" teaser. In teaser state the [id^=alia-root]
   node IS the pill: inline position:fixed; left:16px; bottom:16px;
   z-index:99. In popup state the same node goes full-viewport (inset:0
   at max z-index) and must not move — the [style*="bottom:"] guard
   matches the teaser state only, because the popup state positions via
   the inset shorthand. Every inner id is random-suffixed, so the root
   is the only stable hook. Bar height + the pill's own 16px gap. */
body:has(.willies-sticky-atc.is-visible) [id^="alia-root"][style*="bottom:"] {
  bottom: 132px !important;
}
@media (min-width: 768px) {
  body:has(.willies-sticky-atc.is-visible) [id^="alia-root"][style*="bottom:"] {
    bottom: 140px !important;
  }
}


.willies-sticky-atc__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  width: 100%;
  /* Figma 287:5555: the bar is full-bleed with 16px edge padding — no
     centered max-width container (QA note: paddings looked wrong on wide
     screens with the previous max-site-width cap). */
}

/* ── Product identity block (desktop only) */
.willies-sticky-atc__product {
  display: none;
}

/* ── Controls column: toggle row over price + CTA row */
.willies-sticky-atc__controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.willies-sticky-atc__toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  /* Badge (24px) comes and goes with the discount — reserve its height so
     the bar doesn't jump when toggling Subscribe/OTP (Laura's QA note). */
  min-height: 24px;
}
.willies-sticky-atc__toggle-row[hidden] {
  display: none;
}
/* WR-211 (QA): the discount badge was clipped on narrow phones — the badge
   never shrinks (it's the row's anchor), the toggle group absorbs the
   squeeze, and everything compacts a touch below 400px. */
.willies-sticky-atc__toggle-row .willies-sticky-atc__badge {
  flex-shrink: 0;
}
.willies-sticky-atc__toggle {
  min-width: 0;
}
@media (max-width: 399px) {
  .willies-sticky-atc__toggle {
    font-size: 11px;
    gap: 3px;
  }
  .willies-sticky-atc__badge {
    font-size: 12px;
    padding: 4px 8px;
    gap: 4px;
  }
}

.willies-sticky-atc__toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--w-color-off-white);
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: normal;
  white-space: nowrap;
}

/* Active side reads orange, inactive off-white */
.willies-sticky-atc__toggle-label {
  color: var(--w-color-off-white);
  transition: color 0.2s ease;
}
.willies-sticky-atc.is-subscription .willies-sticky-atc__toggle-label--sub,
.willies-sticky-atc:not(.is-subscription) .willies-sticky-atc__toggle-label--otp {
  color: var(--w-color-orange);
}

/* Pill track + sliding knob */
.willies-sticky-atc__toggle-pill {
  display: flex;
  align-items: center;
  width: 30px;
  height: 14px;
  padding: 1px;
  border-radius: 99px;
  background: var(--w-color-white);
  border: 0.6px solid var(--w-color-orange);
  box-sizing: content-box;
}
.willies-sticky-atc__toggle-knob {
  width: 16px;
  height: 12px;
  border-radius: 99px;
  background: var(--w-color-orange);
  transition: transform 0.2s ease;
}
.willies-sticky-atc:not(.is-subscription) .willies-sticky-atc__toggle-knob {
  transform: translateX(14px);
}

/* Document-layer iOS band (created by initStickyAtc, iOS only) — belt &
   suspenders alongside the bar's in-box extension. Cover is JS-sized to
   the document and clips the band so it can't grow the scrollable area. */
.willies-sticky-atc-underlay-cover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  overflow: clip;
  pointer-events: none;
  z-index: 39;
}
.willies-sticky-atc-underlay {
  position: absolute;
  left: 0;
  right: 0;
  height: 400px;
  background: var(--w-color-navy);
  display: none;
}
.willies-sticky-atc-underlay.is-visible {
  display: block;
}
/* Translated by exactly the scroll offset, on the compositor, so it
   never lags. --sticky-band-range is published by initStickyAtc() and
   must equal the scroller's range for progress to map 1:1 to pixels. */
@keyframes willies-sticky-band-follow {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(var(--sticky-band-range, 0px));
  }
}
@supports (animation-timeline: scroll()) {
  .willies-sticky-atc-underlay.is-css-tracked {
    animation: willies-sticky-band-follow linear both;
    animation-timeline: scroll(root block);
  }
}

/* ── Discount badge — green pill, matches the order-summary badge */
.willies-sticky-atc__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 4px 10px;
  border-radius: 8px;
  background: #d2ffe7; /* same pair as .discount-badge in the order summary */
  color: #1a9c5e;
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}
.willies-sticky-atc__badge[hidden] {
  display: none;
}
.willies-sticky-atc__badge--desktop {
  display: none;
}

/* ── Price + CTA row */
.willies-sticky-atc__cta-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  height: 52px;
}

.willies-sticky-atc__prices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  font-family: var(--w-font-body);
  font-weight: 400;
}
.willies-sticky-atc__price {
  color: var(--w-color-off-white);
  font-size: 18px;
  line-height: 21px;
}
.willies-sticky-atc__compare {
  color: var(--w-color-orange);
  font-size: 14px;
  line-height: 19px;
  text-decoration: line-through;
  order: 1; /* mobile: struck compare sits under the price */
}
.willies-sticky-atc__compare[hidden] {
  display: none;
}

/* ── ATC button — flat orange, star-flanked navy label */
.willies-sticky-atc__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex: 1 1 auto;
  min-width: 0;
  height: 52px;
  padding: 10px;
  border: 1px solid var(--w-color-orange);
  border-radius: 6px;
  background: var(--w-color-orange);
  color: var(--w-color-navy);
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.willies-sticky-atc__button:hover {
  background: var(--w-color-orange-hover);
  border-color: var(--w-color-orange-hover);
}
.willies-sticky-atc__button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.willies-sticky-atc__button .star-icon {
  width: 13px;
  height: 12px;
  font-size: 0;
}

/* ── Per-product accent (seltzer PDPs)
   The bar mirrors the order-summary card, so it themes with it.
   Scoped to [class*=seltzer] and [class*=gummies] like the rest of the accent theming — do
   NOT key off --stay-ai-selected-accent-color alone: it defaults to
   NAVY on non-seltzer products whose CTA stays orange, which would
   paint a navy button on the navy bar. */
[class*="template-product"][class*="seltzer"] .willies-sticky-atc__button,
[class*="template-product"][class*="gummies"] .willies-sticky-atc__button {
  background: var(--stay-ai-selected-accent-color, var(--w-color-orange));
  border-color: var(--stay-ai-selected-accent-color, var(--w-color-orange));
  color: var(--stay-ai-selected-accent-text-color, var(--w-color-navy));
}
[class*="template-product"][class*="seltzer"] .willies-sticky-atc__button:hover,
[class*="template-product"][class*="gummies"] .willies-sticky-atc__button:hover {
  background: var(--stay-ai-selected-accent-hover, var(--w-color-orange-hover));
  border-color: var(--stay-ai-selected-accent-hover, var(--w-color-orange-hover));
}
[class*="template-product"][class*="seltzer"] .willies-sticky-atc__compare,
[class*="template-product"][class*="gummies"] .willies-sticky-atc__compare {
  color: var(--stay-ai-selected-accent-color, var(--w-color-orange));
}
[class*="template-product"][class*="seltzer"] .willies-sticky-atc.is-subscription .willies-sticky-atc__toggle-label--sub,
[class*="template-product"][class*="gummies"] .willies-sticky-atc.is-subscription .willies-sticky-atc__toggle-label--sub,
[class*="template-product"][class*="seltzer"] .willies-sticky-atc:not(.is-subscription) .willies-sticky-atc__toggle-label--otp,
[class*="template-product"][class*="gummies"] .willies-sticky-atc:not(.is-subscription) .willies-sticky-atc__toggle-label--otp {
  color: var(--stay-ai-selected-accent-color, var(--w-color-orange));
}
[class*="template-product"][class*="seltzer"] .willies-sticky-atc__toggle-pill,
[class*="template-product"][class*="gummies"] .willies-sticky-atc__toggle-pill {
  border-color: var(--stay-ai-selected-accent-color, var(--w-color-orange));
}
[class*="template-product"][class*="seltzer"] .willies-sticky-atc__toggle-knob,
[class*="template-product"][class*="gummies"] .willies-sticky-atc__toggle-knob {
  background: var(--stay-ai-selected-accent-color, var(--w-color-orange));
}

/* Gummies: the order-summary card this bar mirrors is light there
   (#E5E1F3 surface, navy text), not navy. No --stay-ai var carries the
   card surface, so the pair is hard-coded from the gummies scheme. */
[class*="template-product"][class*="gummies"] .willies-sticky-atc,
[class*="template-product"][class*="gummies"] .willies-sticky-atc-underlay {
  background: #E5E1F3;
}
[class*="template-product"][class*="gummies"] .willies-sticky-atc__title,
[class*="template-product"][class*="gummies"] .willies-sticky-atc__price,
[class*="template-product"][class*="gummies"] .willies-sticky-atc__per-serving,
[class*="template-product"][class*="gummies"] .willies-sticky-atc__rating,
[class*="template-product"][class*="gummies"] .willies-sticky-atc__toggle,
[class*="template-product"][class*="gummies"] .willies-sticky-atc__toggle-label {
  color: var(--w-color-navy);
}
[class*="template-product"][class*="gummies"] .willies-sticky-atc__stars-track {
  color: color-mix(in srgb, var(--w-color-navy) 35%, transparent);
}

/* ── UserWay accessibility launcher — lift it above the bar while the bar
      is visible so it doesn't cover the price/CTA (Laura's QA note).
      .uwy is UserWay's root container (holds the round trigger in
      .userway_buttons_wrapper plus the menu iframe); .uw-sl is only the
      skip-links helper, not the visible icon. --sticky-atc-height is set
      by initStickyAtc() in product.js. transform (not top/bottom) so
      UserWay's own positioning script isn't fought. */
/* Transform ONLY the icon wrapper — transforming the .uwy root would make
   it the containing block for this fixed-positioned wrapper and throw the
   icon off-screen. */
body.sticky-atc-visible .userway_buttons_wrapper {
  transform: translateY(calc(-1 * var(--sticky-atc-height, 110px))) !important;
  transition: transform 0.3s ease;
}

/* Richpanel chat launcher — same lift as UserWay above (client report:
   the bar covered the chat bubble). bottom, not transform: transforms
   are inert on Richpanel's container. */
body.sticky-atc-visible .richpanel-micro .rp-micro-app-dummy-icon-container {
  bottom: var(--sticky-atc-height, 110px) !important;
  transition: bottom 0.3s ease;
}

/* ── OTP-only products with a promotion (bundles) — mobile
   Without selling plans there is no toggle row, and the mobile badge
   lives inside it, so the discount showed only on desktop. Per Laura's
   design, prices and badge share the top row with a full-width CTA.
   Scoped to .has-promo (set in syncPrices) so a bundle with no discount
   keeps the compact row. */
@media (max-width: 767px) {
  .willies-sticky-atc--no-plans.has-promo .willies-sticky-atc__cta-row {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    gap: 8px;
  }
  .willies-sticky-atc--no-plans.has-promo .willies-sticky-atc__prices {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  .willies-sticky-atc--no-plans.has-promo .willies-sticky-atc__price {
    order: 0;
  }
  .willies-sticky-atc--no-plans.has-promo .willies-sticky-atc__compare {
    order: 1;
  }
  .willies-sticky-atc--no-plans.has-promo .willies-sticky-atc__badge--desktop {
    display: inline-flex;
    order: 2;
    margin-left: auto; /* prices grouped left, badge pinned right */
  }
  .willies-sticky-atc--no-plans.has-promo .willies-sticky-atc__badge--desktop[hidden] {
    display: none;
  }
  .willies-sticky-atc--no-plans.has-promo .willies-sticky-atc__button {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* ── Desktop (≥768px): product identity on the left, right-aligned
      toggle above badge + inline prices + 400px CTA */
@media (min-width: 768px) {
  .willies-sticky-atc {
    padding: 16px;
  }

  .willies-sticky-atc__product {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1 0;
    min-width: 0;
  }
  .willies-sticky-atc__thumb {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
  }
  .willies-sticky-atc__product-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
  }
  .willies-sticky-atc__rating {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--w-color-off-white);
    font-family: var(--w-font-body);
    font-size: 14px;
    line-height: 17px;
    text-transform: uppercase;
  }
  .willies-sticky-atc__stars {
    position: relative;
    display: inline-flex;
    font-size: 12px; /* .star-icon is 1em square */
  }
  .willies-sticky-atc__stars-track,
  .willies-sticky-atc__stars-fill {
    display: inline-flex;
    gap: 3px;
  }
  .willies-sticky-atc__stars-track {
    color: color-mix(in srgb, var(--w-color-off-white) 35%, transparent);
  }
  .willies-sticky-atc__stars-fill {
    position: absolute;
    inset: 0;
    overflow: hidden;
    white-space: nowrap;
    color: var(--w-color-orange); /* Figma: stars are orange (QA note) */
  }
  .willies-sticky-atc__title {
    margin: 0;
    color: var(--w-color-off-white);
    font-family: var(--w-font-display);
    font-weight: 400;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: -1.3px;
    text-transform: uppercase;
    /* Figma: the name wraps to two lines within the left block — cap the
       width so it breaks like the design instead of one long line (QA). */
    max-width: 560px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .willies-sticky-atc__controls {
    flex: 1 1 0;
    align-items: flex-end;
    gap: 16px;
  }
  .willies-sticky-atc__toggle-row {
    justify-content: flex-end;
  }
  .willies-sticky-atc__toggle {
    font-size: 18px;
    line-height: 21px;
  }

  /* Badge moves from the toggle row into the price row */
  .willies-sticky-atc__badge--mobile {
    display: none;
  }
  .willies-sticky-atc__badge--desktop {
    display: inline-flex;
  }
  .willies-sticky-atc__badge--desktop[hidden] {
    display: none;
  }

  .willies-sticky-atc__cta-row {
    gap: 24px; /* Figma 287:5562 */
  }
  .willies-sticky-atc__prices {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  .willies-sticky-atc__price {
    font-size: 24px;
    line-height: 36px;
  }
  .willies-sticky-atc__compare {
    order: 0; /* desktop: struck compare inline before the price */
  }

  .willies-sticky-atc__button {
    flex: 0 0 auto;
    width: 400px;
  }
}

/* Controls size to their content and the product block absorbs the
   remainder (its title clamps and ellipsizes) — with a 50/50 split
   the ~650px cta-row overflows LEFT over the title below ~1330px.
   768–1023 also narrows the CTA so the product keeps real width. */
@media (min-width: 768px) {
  .willies-sticky-atc__controls {
    flex: 0 0 auto;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .willies-sticky-atc__button {
    width: 280px;
  }
}

/* WR-241 — PDP legal notice box (Figma 58-1912), via the block's
   "Style as legal notice" setting. */
[class^="template-product"] .willies-main-product .product-block-richtext-block.product-legal-notice {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--w-color-cobalt);
  border-radius: 8px;
}
/* scoped to beat the generic richtext-block rule above */
[class^="template-product"] .willies-main-product .product-block-richtext-block.product-legal-notice p {
  margin: 0;
  color: var(--w-color-cobalt-hover);
  font-family: var(--w-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.6px;
  text-transform: none;
}
[class^="template-product"] .willies-main-product .product-block-richtext-block.product-legal-notice strong,
[class^="template-product"] .willies-main-product .product-block-richtext-block.product-legal-notice a {
  color: var(--w-color-cobalt-hover);
}
@media (min-width: 768px) {
  [class^="template-product"] .willies-main-product .product-block-richtext-block.product-legal-notice {
    gap: 12px;
  }
}
@media (max-width: 767px) {
  /* margins collapse here, so 40 wins over the next block's 20 */
  [class^="template-product"] .willies-main-product .product-block-richtext-block.product-legal-notice {
    margin-bottom: 40px;
  }
}

/* WR-229 — restyled PDP reviews carousel (Figma 317-138).
   !important throughout: the featured_carousel metafield ships its own
   inline <style> later in the document. */
.willies-reviews-restyled {
  width: 100%;
  background: #F8F4F2;
  border-radius: 24px;
  padding: 32px 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.willies-reviews-restyled__inner {
  display: flex;
  flex-direction: column;
}
/* margin, not a flex gap: the metafield appends stray nodes that would
   each earn a gap */
.willies-reviews-restyled__strip { margin-top: 32px; }
.willies-reviews-restyled--desktop { margin-top: 24px; }
.willies-reviews-restyled--mobile { display: none; }
@media (max-width: 767px) {
  .willies-reviews-restyled--desktop { display: none; }
  .willies-reviews-restyled--mobile { display: block; }
}

.willies-reviews-restyled__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
}
.willies-reviews-restyled__title {
  margin: 0;
  color: var(--w-color-navy);
  /* theme h2 rules outrank the bare class */
  font-family: var(--w-font-display) !important;
  font-weight: 400 !important;
  font-size: 24px;
  line-height: 25px;
  text-transform: uppercase;
}
.willies-reviews-restyled__rating {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.willies-reviews-restyled__count {
  color: var(--w-color-navy);
  font-family: var(--w-font-body);
  font-size: 15.9px;
  line-height: 16px;
  text-transform: uppercase;
  text-decoration: underline;
}
/* Judge.me paints .jdgm-star itself, so colour lands on the star */
.willies-reviews-restyled .jdgm-all-reviews-rating {
  font-size: 16px !important;
  line-height: 16px !important;
}
.willies-reviews-restyled .jdgm-all-reviews-rating .jdgm-star {
  color: var(--w-color-orange) !important;
}

/* cards are lifted into our strip; the emptied section and the stray
   node the metafield trails stay hidden */
.willies-reviews-restyled .jdgm-carousel,
.willies-reviews-restyled__inner > section:not([class]) {
  display: none !important;
}
/* Judge.me's own carousel JS paginates by sliding a transform strip and
   hides the items that don't fit its stale width math, so the strip
   becomes a native horizontal scroller instead: transform dead, every
   card visible, scrollbar hidden, our own arrows below drive scrollBy. */
/* our strip, so no specificity war with jdgm */
.willies-reviews-restyled__strip {
  display: flex;
  align-items: center;
  gap: 24px;
  overflow-x: auto;
  padding: 8px 8px 8px 24px;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.willies-reviews-restyled__strip::-webkit-scrollbar { display: none; }
.willies-reviews-restyled .jdgm-carousel__arrows { display: none !important; }
.willies-reviews-restyled__nav {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 0 24px;
}
.willies-reviews-restyled__nav button {
  border: 0;
  background: none;
  padding: 4px;
  cursor: pointer;
  color: var(--w-color-navy);
}
.willies-reviews-restyled__nav button:hover { opacity: 0.75; }
.willies-reviews-restyled__nav button:focus-visible {
  outline: 2px solid var(--w-color-navy);
  outline-offset: 2px;
}

/* the cards (mock: 232x220, off-white, 2px navy border, r16, hard
   cobalt shadow down-left) */
/* WR-266 curated cards. Own classes, not jdgm-*: Judge.me's script claims
   any element carrying its class names and removes ours from the DOM. */
.willies-reviews-restyled .willies-review-card {
  width: 232px;
  min-width: 232px;
  max-width: 232px;
  height: 220px;
  flex: 0 0 232px;
  padding: 16px;
  background: var(--w-color-off-white);
  border: 2px solid var(--w-color-navy);
  border-radius: 16px;
  box-shadow: -8px 8px 0 0 #2C5EAB;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}
.willies-reviews-restyled .willies-review-card:focus-visible {
  outline: 2px solid var(--w-color-navy);
  outline-offset: 3px;
}
.willies-reviews-restyled .willies-review-card__body {
  flex: 0 0 auto;
}
.willies-reviews-restyled .willies-review-card__rating {
  display: flex;
  gap: 5px;
  height: 18px;
  margin-bottom: 16px;
  color: var(--w-color-navy);
}
.willies-reviews-restyled .willies-review-card__rating .star-icon {
  width: 19px;
  height: 18px;
}
.willies-reviews-restyled .willies-review-card__title {
  color: #111944;
  font-family: var(--w-font-display);
  font-weight: 400;
  font-size: 18px;
  line-height: 23px;
  text-transform: uppercase;
  margin-bottom: 9px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.willies-reviews-restyled .willies-review-card__quote {
  color: var(--w-color-navy);
  font-family: var(--w-font-body);
  font-size: 15px;
  line-height: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.willies-reviews-restyled .willies-review-card__author {
  color: #2C5EAB;
  font-family: var(--w-font-body);
  font-size: 14px;
  line-height: 20px;
}
@media (max-width: 767px) {
  .willies-reviews-restyled .willies-review-card {
    padding: 17px;
    border-width: 1px;
    box-shadow: -5px 5px 0 0 #2C5EAB;
  }
  .willies-reviews-restyled .willies-review-card__title {
    font-family: var(--w-font-body);
    font-size: 16px;
    margin-bottom: 8px;
  }
}

.willies-reviews-restyled .jdgm-carousel-item {
  width: 232px !important;
  min-width: 232px !important;
  max-width: 232px !important;
  height: 220px !important;
  /* Figma strokes sit inside the 18px inset, so padding + border = 18 */
  padding: 16px !important;
  background: var(--w-color-off-white) !important;
  border: 2px solid var(--w-color-navy) !important;
  border-radius: 16px !important;
  box-shadow: -8px 8px 0 0 #2C5EAB !important;
  overflow: hidden !important;
  /* pins the author to the card bottom */
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  /* flex child of the scroller: never shrink, never hide */
  flex: 0 0 232px !important;
  position: static !important;
  visibility: visible !important;
  opacity: 1 !important;
  cursor: pointer;
}
.willies-reviews-restyled .jdgm-carousel-item:focus-visible {
  outline: 2px solid var(--w-color-navy) !important;
  outline-offset: 3px;
}
.willies-reviews-restyled .jdgm-carousel-item__reviewer-name-wrapper {
  flex: 0 0 auto;
}
.willies-reviews-restyled .jdgm-carousel-item__review {
  /* shrinking chops the clamped line without an ellipsis */
  flex: 0 0 auto !important;
  height: auto !important;
  width: 100% !important;
  padding: 0 !important;
  text-align: left !important;
}
.willies-reviews-restyled .jdgm-carousel-item__review-rating {
  margin-bottom: 16px !important;
  font-size: 19px !important;
  letter-spacing: 5px !important;
  height: 18px !important;
  line-height: 18px !important;
}
/* jdgm adds its own 4px padding on top of the letter-spacing */
.willies-reviews-restyled .jdgm-carousel-item__review-rating .jdgm-star {
  padding: 0 !important;
  color: var(--w-color-navy) !important;
}
.willies-reviews-restyled .jdgm-carousel-item__review-title {
  color: #111944 !important;
  font-family: var(--w-font-display) !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  line-height: 23px !important;
  text-transform: uppercase !important;
  margin-bottom: 9px !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.willies-reviews-restyled .jdgm-carousel-item__review-body {
  color: var(--w-color-navy) !important;
  font-family: var(--w-font-body) !important;
  font-size: 15px !important;
  line-height: 18px !important;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.willies-reviews-restyled .jdgm-carousel-item__reviewer-name-wrapper {
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
}
.willies-reviews-restyled .jdgm-carousel-item__reviewer-name {
  color: #2C5EAB !important;
  font-family: var(--w-font-body) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 400 !important;
  padding: 0 !important;
}

@media (max-width: 767px) {
  /* 373:3989 — header stacks, lighter card chrome, no arrows */
  .willies-reviews-restyled {
    padding: 16px 0;
  }
  .willies-reviews-restyled__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 0 12px;
    margin-bottom: 0;
  }
  .willies-reviews-restyled__title {
    font-size: 20px;
    line-height: 26px;
    letter-spacing: -1.3px;
  }
  .willies-reviews-restyled__rating {
    flex-direction: row;
    align-items: flex-start;
    gap: 4px;
  }
  .willies-reviews-restyled__strip {
    margin-top: 16px;
    gap: 16px;
    padding-left: 16px;
  }
  .willies-reviews-restyled__nav {
    display: none;
  }
  .willies-reviews-restyled .jdgm-carousel-item {
    padding: 17px !important;
    border-width: 1px !important;
    box-shadow: -5px 5px 0 0 #2C5EAB !important;
  }
  .willies-reviews-restyled .jdgm-carousel-item__review-title {
    font-family: var(--w-font-body) !important;
    font-size: 16px !important;
    margin-bottom: 8px !important;
  }
}

/* ── Gummies purple scheme — buy-box skin.
   Everything here is scoped to [data-color-scheme="scheme-gummies-purple"] so
   picking Scheme 15 on a section is the single switch; no other scheme or PDP
   changes. Colour truth: specs/01-gummies-pdp-colour-scheme.md (Figma 3318-6436).
   The Stay AI accent variables are re-declared at the section scope so the
   ATC button, radio accents and strikethrough all follow without touching
   product-accent-color.liquid's per-product resolution. */
[data-color-scheme="scheme-gummies-purple"] {
  --stay-ai-selected-accent-color: var(--w-color-purple-deep);
  --stay-ai-selected-accent-text-color: var(--w-color-off-white);
  --stay-ai-selected-accent-hover: var(--w-color-purple-deep-hover);
}

/* Page backdrop: the design's sky gradient (official Figma dev-mode stops,
   23/08/2026, supersedes the sampled approximation in the spec). The gradient
   lives on the .shopify-section wrapper — its base cream (#f1e9e5) was
   otherwise visible around the island — and the island itself goes
   transparent so the gradient is painted exactly once. */
.shopify-section:has([data-color-scheme="scheme-gummies-purple"]) {
  background: linear-gradient(180deg, #05102D 4.93%, #05112F 17.54%, #0B1C44 36.2%, #173A68 73.97%, #071D49 93.81%);
  /* Painted in viewport space so consecutive gummies sections sample the same
     gradient at the same point and read as ONE continuous sky. Each section
     otherwise restarts the gradient at its own top edge, which puts a hard
     seam wherever two of them meet (found 24/08/2026 joining the buy box to
     the VS table). */
  background-attachment: fixed;
}
[data-color-scheme="scheme-gummies-purple"].bg-scheme-background {
  background: transparent;
}

/* Steps accordion: base rules paint titles/numbers navy, invisible on the
   navy page. !important matches the specificity the flavour overrides in
   frontend.css already use. */
[data-color-scheme="scheme-gummies-purple"] .product-steps-accordion .step-title,
[data-color-scheme="scheme-gummies-purple"] .product-steps-accordion .step-title.orange,
[data-color-scheme="scheme-gummies-purple"] .product-steps-accordion .step-number,
[data-color-scheme="scheme-gummies-purple"] .product-steps-accordion .selected-value {
  color: rgb(var(--color-scheme-text)) !important;
}
/* The accent-driven selected-value rule at ~3089 is (0,6,0) !important; this
   mirrors its chain inside the scheme scope so it ties on specificity and
   wins on source order. Off-white per the design; if Daniel prefers the
   accent-purple pattern instead, delete this one rule. */
[data-color-scheme="scheme-gummies-purple"][data-color-scheme] .product-block-steps .ac-trigger .step-title-group .selected-value {
  color: rgb(var(--color-scheme-text)) !important;
}
[data-color-scheme="scheme-gummies-purple"] .product-steps-accordion .ac {
  border-color: rgba(241, 233, 229, 0.3) !important;
}
[data-color-scheme="scheme-gummies-purple"] .product-steps-accordion .ac:first-child {
  border-top-color: rgba(241, 233, 229, 0.3) !important;
}
[data-color-scheme="scheme-gummies-purple"] .product-steps-accordion .step-actions,
[data-color-scheme="scheme-gummies-purple"] .product-steps-accordion .step-actions a,
[data-color-scheme="scheme-gummies-purple"] .product-steps-accordion .step-actions button,
[data-color-scheme="scheme-gummies-purple"] .product-block-steps .ac-trigger .hide-toggle,
[data-color-scheme="scheme-gummies-purple"] .product-block-steps .ac-trigger .edit-link {
  color: var(--w-color-lavender-text) !important;
}

/* Gallery thumbnails: active/hover border is hardcoded orange #ff7e1d in the
   base theme; the selection colour here is accent-2 mid purple. */
[data-color-scheme="scheme-gummies-purple"] .product-gallery-thumbs .swiper-slide.swiper-slide-active,
[data-color-scheme="scheme-gummies-purple"] .product-gallery-thumbs .swiper-slide:hover {
  border-color: rgb(var(--color-scheme-accent-2)) !important;
}

/* Selected picker cards (dose/quantity .group-option): white bg in the base
   theme, lavender in the gummies design. Background only; the border already
   follows the scoped accent var. */
[data-color-scheme="scheme-gummies-purple"] .product-steps-accordion .group-option.selected {
  background-color: var(--w-color-lavender) !important;
  border-color: var(--w-color-purple-mid) !important;
}
/* Unselected picker cards: the base border is navy at 50%, invisible on the
   navy backdrop (probed rgba(17,25,68,.5)). Off-white, dimmed by the card's
   own opacity, per the design's unselected-card treatment. */
[data-color-scheme="scheme-gummies-purple"] .product-steps-accordion .group-option:not(.selected) {
  border-color: rgb(var(--color-scheme-text)) !important;
}
/* Picker card internals. Unselected: radio ring and label go scheme text
   (base paints them navy at .6, invisible on navy) — the label chain is
   (0,6,0) !important so the doubled attribute overshoots to (0,7,0).
   Selected: label is card-text navy on the lavender card per the design,
   not the accent purple the base rule resolves to. */
[data-color-scheme="scheme-gummies-purple"] .product-block-steps .group-option:not(.selected) .group-option-radio {
  border-color: rgb(var(--color-scheme-text)) !important;
}
[data-color-scheme="scheme-gummies-purple"][data-color-scheme] .product-block-steps .group-option.group-option:not(.selected) .group-label {
  color: rgb(var(--color-scheme-text)) !important;
}
[data-color-scheme="scheme-gummies-purple"][data-color-scheme] .product-block-steps .group-option.selected .group-label {
  color: rgb(var(--color-scheme-card-text)) !important;
}
/* Hover on an unselected card: the base theme lifts it to a white card
   (frontend.css:3267) and a navy border (!important hover in the legacy
   restyle) — under the scheme that stranded an off-white label on white.
   Hover previews the selected treatment instead: lavender card, mid-purple
   border, navy label and radio. */
[data-color-scheme="scheme-gummies-purple"][data-color-scheme] .product-steps-accordion .group-option.group-option:not(.selected):hover {
  background-color: rgb(var(--color-scheme-card)) !important;
  border-color: rgb(var(--color-scheme-accent-2)) !important;
}
[data-color-scheme="scheme-gummies-purple"][data-color-scheme] .product-block-steps .group-option.group-option:not(.selected):hover .group-label {
  color: rgb(var(--color-scheme-card-text)) !important;
}
[data-color-scheme="scheme-gummies-purple"][data-color-scheme] .product-block-steps .group-option.group-option:not(.selected):hover .group-option-radio {
  border-color: rgb(var(--color-scheme-card-text)) !important;
}

/* Stay AI purchase cards: selected goes lavender with a mid-purple border
   (deep purple is the CTA colour, mid purple is the selection colour);
   unselected keeps the page bg with off-white outline and text. */
[data-color-scheme="scheme-gummies-purple"] .stayai-purchase-label.is-selected .stayai-purchase-label__wrapper {
  background: var(--w-color-lavender);
  border-color: var(--w-color-purple-mid) !important;
}
[data-color-scheme="scheme-gummies-purple"] .stayai-purchase-label.is-selected {
  border-color: var(--w-color-purple-mid) !important;
  background: var(--w-color-lavender) !important;
}
[data-color-scheme="scheme-gummies-purple"] .stayai-purchase-label.is-selected .stayai-input__wrapper {
  background-color: var(--w-color-lavender);
}
[data-color-scheme="scheme-gummies-purple"] .stayai-purchase-label:not(.is-selected) .stayai-purchase-label__wrapper {
  background: transparent;
  border-color: rgba(241, 233, 229, 0.6);
}
[data-color-scheme="scheme-gummies-purple"] .stayai-purchase-label:not(.is-selected) .stayai-purchase-label__wrapper,
[data-color-scheme="scheme-gummies-purple"] .stayai-purchase-label:not(.is-selected) .stayai-purchase-label__inner,
[data-color-scheme="scheme-gummies-purple"] .stayai-purchase-label:not(.is-selected) .stayai-purchase-label__inner .subscription-label {
  color: rgb(var(--color-scheme-text));
}
/* The One-Time Purchase label carries its own navy colour rule
   (frontend.css:643) — navy on navy made the whole row look empty. Only the
   UNSELECTED state changes: selected sits on the lavender card where the base
   navy is correct. */
[data-color-scheme="scheme-gummies-purple"] .stayai-purchase-label:not(.is-selected) .one-time-purchase-label,
[data-color-scheme="scheme-gummies-purple"] .stayai-purchase-label:not(.is-selected) [data-stayai-onetime-price],
[data-color-scheme="scheme-gummies-purple"] .stayai-purchase-label:not(.is-selected) [data-stayai-subscription-price] {
  color: rgb(var(--color-scheme-text)) !important;
}
/* Heading eyebrow ("WILLIE'S REMEDY+"): cobalt in the base theme, lavender
   text in the gummies design. Colour only; the type ramp already matches.
   !important beats the (0,4,0) chain in frontend.css. */
[data-color-scheme="scheme-gummies-purple"] .product-block-heading .product-block-brand {
  color: var(--w-color-lavender-text) !important;
}
/* Size subtitle ("10 MG THC"): cobalt !important at (0,5,0) in the base
   theme; doubled attribute + doubled class ties it. Lavender-text, matching
   the eyebrow it sits under. */
[data-color-scheme="scheme-gummies-purple"][data-color-scheme] .product-block-heading .product-block-shortname.product-block-shortname {
  color: var(--w-color-lavender-text) !important;
}
/* Judge.me "Read N reviews" link: navy on navy; lavender-text like the other
   utility links, underline kept. Stars match it — the design has no rating
   row, so this is a pairing call, not a spec value. */
[data-color-scheme="scheme-gummies-purple"] [id*=judge_me_reviews_preview_badge] .jdgm-prev-badge__text a,
[data-color-scheme="scheme-gummies-purple"] [id*=judge_me_reviews_preview_badge] .jdgm-star {
  color: var(--w-color-lavender-text) !important;
}

/* Richtext blocks (description copy): navy in the base theme, off-white on
   the gummies backdrop. Colour only. */
[data-color-scheme="scheme-gummies-purple"] .product-block-richtext-block,
[data-color-scheme="scheme-gummies-purple"] .product-block-richtext-block p,
[data-color-scheme="scheme-gummies-purple"] .product-block-richtext-block strong,
[data-color-scheme="scheme-gummies-purple"] .product-block-richtext-block a {
  color: rgb(var(--color-scheme-text)) !important;
}

/* Product title: navy in the base theme, off-white in the gummies design.
   Colour only; Highway Gothic Expanded 30/36 -0.76 already comes from
   --w-font-display. */
[data-color-scheme="scheme-gummies-purple"] .product-block-heading .product-block-title h1.font-heading,
[data-color-scheme="scheme-gummies-purple"] .product-block-heading .product-block-title h2.font-heading {
  color: rgb(var(--color-scheme-text)) !important;
}

/* The MOST POPULAR / BEST VALUE tag on the quantity cards is deep purple in
   the design (3318:7019/7030). The base rule is a (0,5,0) chain in
   frontend.css, hence the !important. */
/* Subscribe checklist ticks: hardcoded orange in the base theme, deep purple
   (accent-1) on the lavender card per the spec. */
[data-color-scheme="scheme-gummies-purple"] .stayai-subscription-details-container li::before {
  color: rgb(var(--color-scheme-accent-1)) !important;
}

[data-color-scheme="scheme-gummies-purple"] .most-popular-badge {
  background: rgb(var(--color-scheme-accent-1)) !important;
  color: rgb(var(--color-scheme-accent-1-contrast)) !important;
}

/* The MOST POPULAR: GET 20% OFF band is a ::before with CSS content on the
   subscription card (why no DOM search ever found it). Mid purple with
   deep-purple text and stars per the design (accent-2 pair). The star SVGs
   are baked into background-image, so recolouring means restating them with
   fill %233C1C6C. */
[data-color-scheme="scheme-gummies-purple"] .stayai-purchase-label:has([data-stayai-subscription-price]):before {
  background-color: rgb(var(--color-scheme-accent-2)) !important;
  color: rgb(var(--color-scheme-accent-2-contrast)) !important;
  background-image: url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 15' fill='%233C1C6C'><path d='M8 0l1.94 5.97h6.27l-5.07 3.69 1.94 5.97L8 11.94l-5.08 3.69 1.94-5.97L0 5.97h6.27z'/></svg>), url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 15' fill='%233C1C6C'><path d='M8 0l1.94 5.97h6.27l-5.07 3.69 1.94 5.97L8 11.94l-5.08 3.69 1.94-5.97L0 5.97h6.27z'/></svg>), url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 15' fill='%233C1C6C'><path d='M8 0l1.94 5.97h6.27l-5.07 3.69 1.94 5.97L8 11.94l-5.08 3.69 1.94-5.97L0 5.97h6.27z'/></svg>), url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 15' fill='%233C1C6C'><path d='M8 0l1.94 5.97h6.27l-5.07 3.69 1.94 5.97L8 11.94l-5.08 3.69 1.94-5.97L0 5.97h6.27z'/></svg>) !important;
}

/* Order summary: the price + ATC cluster sits in a lavender card in the
   design (Figma 3318:7087, mid-purple border), navy text. Colours ONLY —
   the theme's own radius/padding (16px / 24px, frontend.css ~6092) stand.
   The was-price strikethrough follows the Stay AI accent var, so it lands
   deep purple. !important beats the same (0,5,0) chains as above. */
[data-color-scheme="scheme-gummies-purple"][data-color-scheme] .order-summary-block {
  background: var(--w-color-lavender) !important;
  border-color: var(--w-color-purple-mid) !important;
  color: var(--w-color-navy) !important;
}
[data-color-scheme="scheme-gummies-purple"] .order-summary-block .order-summary-label,
[data-color-scheme="scheme-gummies-purple"] .order-summary-block .order-summary-pricing .now-only,
[data-color-scheme="scheme-gummies-purple"] .order-summary-block .order-summary-pricing .new-price,
[data-color-scheme="scheme-gummies-purple"] .order-summary-block .now-only .per-serving-price,
[data-color-scheme="scheme-gummies-purple"] .order-summary-block .delivery-dates {
  color: var(--w-color-navy) !important;
}
[data-color-scheme="scheme-gummies-purple"] .order-summary-block .order-summary-divider {
  border-color: rgba(7, 29, 73, 0.2);
}
[data-color-scheme="scheme-gummies-purple"] .order-summary-block .discount-badge {
  background: #d2ffe7;
  color: #1a9c5e;
}

/* ADD TO CART: hardcoded orange in frontend.css (base + !important hover),
   deep purple with off-white label in the gummies design. Hover mirrors the
   base rule's button + .push-btn__surface pair. */
[data-color-scheme="scheme-gummies-purple"] button.add-to-cart-btn {
  border-color: rgb(var(--color-scheme-accent-1)) !important;
  background: rgb(var(--color-scheme-accent-1)) !important;
  color: rgb(var(--color-scheme-accent-1-contrast)) !important;
}
[data-color-scheme="scheme-gummies-purple"][data-color-scheme] button.add-to-cart-btn:hover,
[data-color-scheme="scheme-gummies-purple"][data-color-scheme] button.add-to-cart-btn:hover .push-btn__surface {
  background: var(--w-color-purple-deep-hover) !important;
}

/* Was-price strikethrough: orange in the base theme, deep purple on the
   lavender summary card per the design. */
[data-color-scheme="scheme-gummies-purple"] .order-summary-block .order-summary-pricing .old-price,
[data-color-scheme="scheme-gummies-purple"] .order-summary-block .order-summary-pricing .old-price .strike {
  color: var(--w-color-purple-deep) !important;
  text-decoration-color: var(--w-color-purple-deep) !important;
}

/* Section headers (KEY BENEFITS / HOW IT FEELS): the base rule is navy
   !important at (0,3,0); the doubled attribute ties the specificity and this
   file's later source order wins. */
[data-color-scheme="scheme-gummies-purple"][data-color-scheme] .key-benefits-title,
[data-color-scheme="scheme-gummies-purple"][data-color-scheme] .how-it-feels-header {
  color: rgb(var(--color-scheme-text)) !important;
}
/* Their rope-mask divider stays; only the rope's colour flips to scheme text. */
[data-color-scheme="scheme-gummies-purple"][data-color-scheme] .key-benefits-title:after,
[data-color-scheme="scheme-gummies-purple"][data-color-scheme] .how-it-feels-header:after {
  background-color: rgb(var(--color-scheme-text)) !important;
}
/* Key-benefits checklist items + how-it-feels bar labels: hardcoded navy in
   the base theme; the scheme's text colour here. */
[data-color-scheme="scheme-gummies-purple"] .key-benefits-richtext li,
[data-color-scheme="scheme-gummies-purple"] .how-it-feels-label {
  color: rgb(var(--color-scheme-text)) !important;
}

/* FAQ card: navy card with off-white text in the base theme; inverts to the
   scheme card (lavender) with card-text (navy) in the gummies design. Panel
   text and dividers flip with it or they render invisible. */
[data-color-scheme="scheme-gummies-purple"] .willies-faqs-left {
  background: rgb(var(--color-scheme-card)) !important;
}
[data-color-scheme="scheme-gummies-purple"] .willies-faqs-title,
[data-color-scheme="scheme-gummies-purple"] .willies-faqs-accordion .ac-trigger,
[data-color-scheme="scheme-gummies-purple"] .willies-faqs-accordion .ac.is-active .ac-trigger,
[data-color-scheme="scheme-gummies-purple"] .willies-faqs-accordion .ac-panel {
  color: rgb(var(--color-scheme-card-text)) !important;
}
[data-color-scheme="scheme-gummies-purple"] .willies-faqs-accordion .ac {
  border-color: rgba(7, 29, 73, 0.2) !important;
}

/* How it feels: bar fill takes the design's purple gradient, stops verbatim
   from the Figma-generated values. Track and borders stay off-white. */
[data-color-scheme="scheme-gummies-purple"] .how-it-feels-bar-fill {
  background: linear-gradient(90deg, #8d6ebb 0.413%, #341267 75.255%);
}
/* Bar track: white with a navy border in the base theme; the design runs
   track and 3px border both in off-white (spec: track bg + borders #f1e9e5),
   so the gradient fill sits in an off-white capsule. */
[data-color-scheme="scheme-gummies-purple"] .how-it-feels-bar {
  background: rgb(var(--color-scheme-text)) !important;
  border-color: rgb(var(--color-scheme-text)) !important;
}

/* ── Order summary: shipping policy link below the buy box (gummies launch,
   MK's launch doc 22/08). The summary panel is navy, so the link renders
   white like .delivery-dates; underline keeps it readable as a link. */
.willies-main-product .order-summary-shipping-policy {
  text-align: center;
  margin-top: 16px;
}
.willies-main-product .order-summary-shipping-policy a {
  /* 44px tap target: the link is 15px of text, well under the minimum for a
     touch target, and this store has a live ADA thread. */
  display: inline-block;
  padding: 12px 8px;
  /* Was hardcoded #fff, which was right only while this link lived INSIDE the
     navy summary card. It moved OUT on 24/08/2026 to sit between the buy box
     and the warning copy, so on every drinks PDP it became white on the cream
     page backdrop - invisible. The gummies scheme had already been given an
     override for exactly this; the base rule needed the same treatment.
     Scheme text works on both: navy on cream, off-white on navy. */
  color: rgb(var(--color-scheme-text));
  font-family: var(--w-font-body);
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.willies-main-product .order-summary-shipping-policy a:hover {
  color: var(--w-color-orange);
}
/* Gummies scheme: the summary card is lavender, not navy, so the white link
   is unreadable there. Navy link, deep-purple hover, same underline. */
/* The link moved OUT of the summary card on 24/08/2026 to sit between the buy
   box and the warning copy, per the design. It therefore sits on the page
   backdrop, not the lavender card, so it takes the scheme's text colour -
   the earlier navy was correct only while it was inside the card. */
[data-color-scheme="scheme-gummies-purple"] .order-summary-shipping-policy a {
  color: rgb(var(--color-scheme-text));
}
[data-color-scheme="scheme-gummies-purple"] .order-summary-shipping-policy a:hover {
  color: var(--w-color-lavender-text);
}

/* Unselected quantity cards (rich picker, .quantity-option-card): the drinks
   reskin paints their internals NAVY at .6 (rebrand ~3169-3195), invisible on
   the gummies navy page — the .group-option rules above never matched this
   component. Design (3318:7021): off-white 2px border, off-white text, whole
   card dimmed; SAVE tag border+text off-white; MOST POPULAR / BEST VALUE stay
   solid deep purple. Ties beaten by the doubled attribute + later source
   order against the (0,5,0) !important chains. Colour only. */
[data-color-scheme="scheme-gummies-purple"][data-color-scheme] .product-steps-accordion .quantity-option-card:not(:has(input:checked)) {
  border-color: rgb(var(--color-scheme-text)) !important;
  background: transparent !important;
}
[data-color-scheme="scheme-gummies-purple"][data-color-scheme] .product-steps-accordion .quantity-option-card:not(:has(input:checked)) .quantity-count,
[data-color-scheme="scheme-gummies-purple"][data-color-scheme] .product-steps-accordion .quantity-option-card:not(:has(input:checked)) .quantity-gifts .gift-orange,
[data-color-scheme="scheme-gummies-purple"][data-color-scheme] .product-steps-accordion .quantity-option-card:not(:has(input:checked)) .quantity-gifts .gift-text,
[data-color-scheme="scheme-gummies-purple"][data-color-scheme] .product-steps-accordion .quantity-option-card:not(:has(input:checked)) .sold-out {
  color: rgb(var(--color-scheme-text)) !important;
}
[data-color-scheme="scheme-gummies-purple"][data-color-scheme] .product-steps-accordion .quantity-option-card:not(:has(input:checked)) .metafield-rich_text_field {
  color: rgb(var(--color-scheme-text)) !important;
}
[data-color-scheme="scheme-gummies-purple"][data-color-scheme] .product-steps-accordion .quantity-option-card:not(:has(input:checked)) .quantity-radio {
  border-color: rgb(var(--color-scheme-text)) !important;
}
[data-color-scheme="scheme-gummies-purple"][data-color-scheme] .product-steps-accordion .quantity-option-card:not(:has(input:checked)) .save-badge {
  color: rgb(var(--color-scheme-text)) !important;
  border-color: rgb(var(--color-scheme-text)) !important;
}
/* BEST VALUE mirrors the MOST POPULAR tag treatment (both 3318:7019/7030 are
   solid deep purple in the design) — both card states. */
[data-color-scheme="scheme-gummies-purple"] .best-value-badge {
  background: rgb(var(--color-scheme-accent-1)) !important;
  color: rgb(var(--color-scheme-accent-1-contrast)) !important;
}
/* Hover on an unselected quantity card previews the selected treatment, the
   same behaviour the .group-option cards get above: lavender card, mid-purple
   border, navy internals at full strength. */
[data-color-scheme="scheme-gummies-purple"][data-color-scheme] .product-steps-accordion .quantity-option-card.quantity-option-card:not(:has(input:checked)):hover {
  background: rgb(var(--color-scheme-card)) !important;
  border-color: rgb(var(--color-scheme-accent-2)) !important;
}
[data-color-scheme="scheme-gummies-purple"][data-color-scheme] .product-steps-accordion .quantity-option-card.quantity-option-card:not(:has(input:checked)):hover .quantity-count,
[data-color-scheme="scheme-gummies-purple"][data-color-scheme] .product-steps-accordion .quantity-option-card.quantity-option-card:not(:has(input:checked)):hover .quantity-gifts .gift-orange,
[data-color-scheme="scheme-gummies-purple"][data-color-scheme] .product-steps-accordion .quantity-option-card.quantity-option-card:not(:has(input:checked)):hover .metafield-rich_text_field {
  color: rgb(var(--color-scheme-card-text)) !important;
  opacity: 1;
}
[data-color-scheme="scheme-gummies-purple"][data-color-scheme] .product-steps-accordion .quantity-option-card.quantity-option-card:not(:has(input:checked)):hover .quantity-radio {
  border-color: rgb(var(--color-scheme-card-text)) !important;
}
/* .save-badge was missed out of the hover set above. The unselected rule
   pins it to the scheme TEXT colour with !important — cream, correct on the
   navy card — but hover flips the card to lavender and the badge stayed
   cream on light, so "SAVE $5" vanished at exactly the moment the customer
   was pointing at it. Same navy-on-navy family as the order-summary
   strikethrough and the global focus ring, inverted. */
[data-color-scheme="scheme-gummies-purple"][data-color-scheme] .product-steps-accordion .quantity-option-card.quantity-option-card:not(:has(input:checked)):hover .save-badge {
  color: rgb(var(--color-scheme-card-text)) !important;
  border-color: rgb(var(--color-scheme-card-text)) !important;
}

/* Was-price strikethrough on the UNSELECTED Stay AI card: .fullPrice carries
   its own colour rule reading the accent var, which the scheme resolves to
   deep purple — invisible on the navy card. Off-white with a matching
   line-through, unselected only: on the selected lavender card the deep
   purple is the design (spec: was-price + strikethrough #3c1c6c). */
[data-color-scheme="scheme-gummies-purple"][data-color-scheme] .stayai-purchase-label:not(.is-selected) [data-stayai-subscription-price] .fullPrice,
[data-color-scheme="scheme-gummies-purple"][data-color-scheme] .stayai-purchase-label:not(.is-selected) [data-stayai-onetime-price] .fullPrice {
  color: rgb(var(--color-scheme-text)) !important;
  text-decoration-color: rgb(var(--color-scheme-text)) !important;
}

/* Key-benefits checklist bullets: the disc behind the white tick. The base rule
   (~6136) paints it with the Stay AI accent var, which this scheme resolves to
   purple-deep #3c1c6c — the design wants purple-mid #8d6ebb here.

   Specificity, because the base rule is not weak: it runs
   (0,3,2) for .key-benefits-richtext and (0,4,2) for the alt block. Chaining
   .willies-main-product (a confirmed ancestor of the scheme <data-island>) onto
   the doubled scheme attribute puts these at (0,4,2) and (0,5,2), so each beats
   its counterpart by one class rather than tying and relying on source order.
   Only the background-color is overridden — the var stays correct for the Stay
   AI card and the was-price strikethrough above. */
.willies-main-product [data-color-scheme="scheme-gummies-purple"][data-color-scheme] .key-benefits-richtext li::before,
.willies-main-product [data-color-scheme="scheme-gummies-purple"][data-color-scheme] .key-benefits-alt-block .key-benefits-alt-richtext li::before {
  background-color: var(--w-color-purple-mid);
}

/* SHOP button on the gummies sections: off-white label and stars on the purple
   fill. The base rule paints .pwi__btn navy !important, which is correct for
   the tonics instance (navy on brand orange) — hence the scheme scope rather
   than changing the base. The doubled attribute clears the base rule's
   !important at (0,2,0) vs (0,1,0), and .star-icon is background-color:
   currentColor behind a mask, so the label and both stars recolour together. */
[data-color-scheme="scheme-gummies-purple"][data-color-scheme] .pwi__btn {
  color: var(--w-color-off-white) !important;
}

/* Added-to-cart confirmation ("View cart or continue shopping") sits INSIDE
   the lavender summary card, where the links compute to white: invisible on
   #e5e1f3. Navy like the card's own text, deep-purple hover: the same pair
   the shipping-policy link used while it lived inside the card. */
[data-color-scheme="scheme-gummies-purple"][data-color-scheme] .order-summary-block .rte a {
  color: var(--w-color-navy);
}
[data-color-scheme="scheme-gummies-purple"][data-color-scheme] .order-summary-block .rte a:hover {
  color: var(--w-color-purple-deep);
}

/* ── Transparent video (stacked-matte). The <video> is a decoder only and is
   never shown: it holds the double-height frame (picture over matte). What
   the viewer sees is the canvas that transparent-video.js paints. The video
   is moved off-view rather than display:none, because a display:none video
   does not reliably decode frames.

   The poster shows until the first frame is composited, and permanently if
   WebGL or playback is unavailable, so the fallback is a still image rather
   than an empty box. */
.transparent-video {
  position: relative;
  display: block;
  aspect-ratio: var(--tv-aspect, 1);
  background-image: var(--tv-poster, none);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.transparent-video[data-tv-ready] {
  background-image: none;
}
.transparent-video__source {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  left: -9999px;
}
.transparent-video__canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.transparent-video[data-tv-fallback] .transparent-video__canvas {
  display: none;
}

/* ── Gummies pages read as one continuous backdrop, but product sections carry
   an 84px vertical margin and the page's cream shows through it as a band
   between every section (found under the reviews widget, 24/08/2026). Any
   section running a gummies scheme drops that margin so its neighbours meet.
   Scoped to the gummies schemes, so no other page moves. Sections keep their
   own padding, so internal spacing is unaffected. */
.shopify-section:has([data-color-scheme^="scheme-gummies"]) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ── Product line switching (Gummies / Social Tonics), 24/08/2026.
   Sections opt in by rendering snippets/line-group.liquid, which drops a
   hidden marker carrying data-line-group. A section is hidden when its marker
   does not match the line active on <html>. Sections with no marker are
   shared and always show, which is what makes this safe to adopt one section
   at a time.

   :has() is what lets a section be targeted by its own contents - Shopify
   generates the section wrapper, so its markup cannot add attributes to it.

   Hiding is CSS driven by an attribute set before paint, so there is no flash
   of the wrong line on load. */
html[data-active-line="gummies"] .shopify-section:has(> * [data-line-group="tonics"]),
html[data-active-line="gummies"] .shopify-section:has(> [data-line-group="tonics"]) {
  display: none !important;
}
html[data-active-line="tonics"] .shopify-section:has(> * [data-line-group="gummies"]),
html[data-active-line="tonics"] .shopify-section:has(> [data-line-group="gummies"]) {
  display: none !important;
}
/* The marker itself never occupies space, even though [hidden] can be
   overridden by a display rule elsewhere in the theme. */
.line-group-marker {
  display: none !important;
}

/* ============================================================================
   STEP OPTIONS AS LARGE IMAGE CARDS  (opt-in: block setting `step_image_cards`)
   Design: Figma OKo2RUyP00js0kVD0YJpDs, gummies "Choose your size" step.

   Scoped entirely under .steps--image-cards, which only renders when the
   Steps block opts in. A PDP without it cannot be reached by one rule here,
   which is the no-regression guarantee for the tonics dose/flavour steps that
   share snippets/willies-product-block-steps.liquid.

   The class is doubled to reach (0,6,0). Legacy card rules run up to (0,5,0)
   across rebrand.css AND frontend.css, and relying on source order alone
   would depend on which of those two files loads last.
   ========================================================================= */
[class^="template-product"] .product-block-steps.steps--image-cards.steps--image-cards .group-option {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 10px;
  border: 2px solid transparent;
  background-color: var(--w-color-lavender);
  text-align: center;
}
[class^="template-product"] .product-block-steps.steps--image-cards.steps--image-cards .group-option.selected {
  border-color: var(--w-color-purple-mid);
}
/* The radio is the whole card now. */
[class^="template-product"] .product-block-steps.steps--image-cards.steps--image-cards .group-option .group-option-radio {
  display: none;
}
/* Beats the width/height ATTRIBUTES on the img (40x40) as well as the legacy
   sizing rules. object-fit: contain so a tin and a pouch of different aspect
   ratios both sit correctly in the same box rather than one being cropped. */
[class^="template-product"] .product-block-steps.steps--image-cards.steps--image-cards .group-option .group-image {
  width: 100%;
  height: 168px;
  max-width: none;
  margin: 0;
  object-fit: contain;
  display: block;
}
[class^="template-product"] .product-block-steps.steps--image-cards.steps--image-cards .group-option .group-option-texts {
  width: 100%;
  padding: 12px 10px 14px;
  border-top: 1px solid var(--w-color-purple-mid);
  text-align: center;
}
[class^="template-product"] .product-block-steps.steps--image-cards.steps--image-cards .group-option .group-label {
  text-align: center;
  text-transform: uppercase;
}
[class^="template-product"] .product-block-steps.steps--image-cards.steps--image-cards .group-option .group-desc,
[class^="template-product"] .product-block-steps.steps--image-cards.steps--image-cards .group-option .group-volume {
  text-align: center;
  text-transform: uppercase;
}
@media (max-width: 767px) {
  [class^="template-product"] .product-block-steps.steps--image-cards.steps--image-cards .group-option .group-image {
    height: 132px;
  }
}

/* Four PDP badges do not fit the hero's left column at the 3-badge sizing:
   4 x 120px + 3 x 40px gaps = 600px of content, so the fourth wraps onto its
   own line. When a product carries four, shrink the row to fit on one line
   instead of wrapping.

   Scoped with :has() to rows that actually contain a fourth item, so every
   3-badge PDP - which is every drinks product - keeps its existing 120px /
   40px layout byte-identical. flex: 1 1 0 shares the row equally and
   max-width holds them at the original size when the column is wide enough,
   so this only ever shrinks, never inflates. */
.pdp-badges--inline:has(> .pdp-badges__item:nth-child(4)) {
  flex-wrap: nowrap;
  gap: clamp(8px, 2.2vw, 24px);
}
.pdp-badges--inline:has(> .pdp-badges__item:nth-child(4)) .pdp-badges__item {
  width: auto;
  flex: 1 1 0;
  min-width: 0;
  max-width: 120px;
}
@media (max-width: 767px) {
  .pdp-badges--inline:has(> .pdp-badges__item:nth-child(4)) .pdp-badges__item {
    max-width: 100px;
  }
}