/** Shopify CDN: Minification failed

Line 970:22 Expected identifier but found whitespace
Line 970:23 Unexpected "var("

**/
/* ============================================================
   HERCULES — lp-bundle-tiers.css
   Tokens follow the existing lp-* sections:
     #072835  deep teal (primary text / selected border)
     #FFD900  signature yellow (badges, progress)
     #f5f5f3  section grey
     #667085  muted copy
     #d7dbe3  hairline
   ============================================================ */

/* WARNING: a single stray character before this rule (there was a rogue "="
   at byte 0 of this file) makes the selector invalid, which silently drops
   EVERY declaration below - including all --lpbt-* variables. Symptoms are
   baffling rather than obvious: the ATC button turns invisible until hover
   (transparent background + white text, hover sets a literal colour), the
   save badge loses its yellow, and the section loses its padding and font.
   If this section ever looks unstyled again, validate this file first. */
.lpbt {
  /* Column width for the tier stack. 900px lines up with the lp-faq section
     directly above it on these landing pages; lp-reasons uses 1080 and
     lp-benefits 1200 if you want it wider. Was 560px, which read as a narrow
     ribbon on desktop. */
  --lpbt-max: 900px;



  --lpbt-ink: #000000ff;
  --lpbt-yellow: #ffd900;
  --lpbt-muted: #667085;
  --lpbt-line: #d7dbe3;
  --lpbt-line-soft: #ececec;
  --lpbt-good: #1a7f37;
  --lpbt-radius: 16px;

  display: block;
  background: var(--lpbt-bg, #fff);
  padding: 40px 20px 48px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--lpbt-ink);
}

@media (min-width: 750px) {
  .lpbt { padding: 64px 24px 72px; }
}

/* ---------- Heading ---------- */

.lpbt__head {
  max-width: 640px;
  margin: 0 auto 24px;
  text-align: center;
}

.lpbt__eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--lpbt-muted);
}

.lpbt__title {
  margin: 0 0 10px;
  font-size: clamp(26px, 5vw, 38px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.lpbt__title em {
  font-style: normal;
  background: linear-gradient(transparent 62%, var(--lpbt-yellow) 62%);
}

.lpbt__subtitle {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--lpbt-muted);
}

/* ---------- Purchase-mode toggle ---------- */

.lpbt__modes {
  display: flex;
  gap: 4px;
  max-width: var(--lpbt-max);
  margin: 0 auto 24px;
  padding: 4px;
  background: #f2f4f6;
  border-radius: 999px;
}

.lpbt__mode {
  flex: 1 1 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--lpbt-muted);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.lpbt__mode.is-active {
  background: #fff;
  color: var(--lpbt-ink);
  box-shadow: 0 1px 3px rgba(7, 40, 53, 0.14);
}

.lpbt__mode-flag {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--lpbt-yellow);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--lpbt-ink);
}

/* ---------- Tier cards ---------- */

.lpbt__tiers {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: var(--lpbt-max);
  margin: 0 auto;
}

.lpbt__tier {
  position: relative;
  overflow: visible;
  border: 1.5px solid var(--lpbt-line);
  border-radius: var(--lpbt-radius);
  background: #fff;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.lpbt__tier:hover:not(.is-selected) { border-color: #b9c1cc; }

.lpbt__tier.is-selected {
  border-color: var(--lpbt-ink);
  border-width: 2px;
  background: #fffef7;
  box-shadow: 0 6px 20px rgba(7, 40, 53, 0.08);
}

/* Corner ribbon */
.lpbt__ribbon {
  position: absolute;
  top: -1px;
  right: 16px;
  transform: translateY(-50%);
  z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--lpbt-ink);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

.lpbt__tier--hero .lpbt__ribbon {
  background: var(--lpbt-yellow);
  color: var(--lpbt-ink);
}

/* Clickable header of each card.
   The theme styles labels, buttons and their descendants (uppercase,
   letter-spacing, constrained heights). Everything inside a tier card
   is reset here first, then restyled deliberately below. Without this
   reset the price block overflows instead of expanding the card. */

.lpbt .lpbt__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.lpbt .lpbt__tier-hit,
.lpbt .lpbt__tier-hit * {
  box-sizing: border-box;
  font-family: inherit;
  font-style: normal;
  text-transform: none;
  letter-spacing: normal;
  text-align: left;
  height: auto;
  min-height: 0;
  max-height: none;
  max-width: none;
  overflow: visible;
  margin: 0;
  background: none;
  border: 0;
}

.lpbt .lpbt__tier-hit {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 18px 18px 14px;
  color: inherit;
  cursor: pointer;
}

.lpbt .lpbt__tier-main {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

/* Focus ring is driven by the visually hidden input. */
.lpbt .lpbt__input:focus-visible + .lpbt__tier-hit {
  outline: 3px solid var(--lpbt-yellow);
  outline-offset: -3px;
  border-radius: var(--lpbt-radius);
}

.lpbt .lpbt__radio {
  display: block;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  min-height: 22px;
  margin-top: 3px;
  border: 2px solid #b9c1cc;
  border-radius: 50%;
  background: #fff;
  transition: border-color 0.18s ease, border-width 0.18s ease;
}

.lpbt .lpbt__tier.is-selected .lpbt__radio {
  border-color: var(--lpbt-ink);
  border-width: 6px;
}

.lpbt .lpbt__tier-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 2px;
}

.lpbt .lpbt__tier-label {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.lpbt .lpbt__save-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--lpbt-yellow, #ffd900);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--lpbt-ink, #072835);
  white-space: nowrap;
}

.lpbt .lpbt__save-badge[hidden] { display: none; }

.lpbt .lpbt__price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}

.lpbt .lpbt__price {
  font-size: clamp(26px, 5.5vw, 34px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.lpbt .lpbt__price-unit {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--lpbt-muted);
}

.lpbt .lpbt__billing {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--lpbt-muted);
}

.lpbt .lpbt__billing-was { color: #98a2b3; }
.lpbt .lpbt__billing-was[hidden] { display: none; }

/* ---------- Card body (only shown when selected) ---------- */

.lpbt__tier-body {
  display: none;
  padding: 0 18px 18px;
}

.lpbt__tier.is-selected .lpbt__tier-body { display: block; }

.lpbt__features {
  margin: 0 0 4px;
  padding: 14px 0 0;
  border-top: 1px solid var(--lpbt-line-soft);
  list-style: none;
}

.lpbt__features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 5px 0;
  font-size: 14.5px;
  line-height: 1.4;
}

.lpbt__tick {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--lpbt-good);
}

/* ---------- Gifts ---------- */

.lpbt__gifts { margin-top: 16px; }
.lpbt__gifts[hidden] { display: none !important; }

.lpbt__gifts-heading {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--lpbt-ink);
}

.lpbt__gift-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  gap: 12px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lpbt__gift {
  text-align: center;
  transition: opacity 0.18s ease;
}

.lpbt__gift.is-locked { opacity: 0.42; }

.lpbt__gift-media {
  position: relative;
  display: block;
  margin-bottom: 6px;
}

.lpbt__gift-img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  background: #f5f5f3;
}

.lpbt__gift-img--empty { border: 1px dashed var(--lpbt-line); }

.lpbt__gift-lock {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  font-size: 10px;
  font-weight: 700;
  color: var(--lpbt-ink);
}

.lpbt__gift-lock[hidden] { display: none; }

.lpbt__gift-value {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: #98a2b3;
}

.lpbt__gift-name {
  display: block;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 600;
}

/* Collapsible monthly gifts */

.lpbt__disclosure {
  border: 1px solid var(--lpbt-line-soft);
  border-radius: 12px;
  background: #fdfbf3;
}

.lpbt__disclosure summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.lpbt__disclosure summary::-webkit-details-marker { display: none; }

.lpbt__disclosure summary svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}

.lpbt__disclosure[open] summary svg { transform: rotate(180deg); }

.lpbt__disclosure-body { padding: 0 14px 14px; }

/* ---------- Shipping progress ---------- */

.lpbt__ship {
  max-width: var(--lpbt-max);
  margin: 14px auto 0;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: var(--lpbt-good);
}

.lpbt__ship[hidden] { display: none; }

/* ---------- Actions ---------- */

.lpbt__actions {
  max-width: var(--lpbt-max);
  margin: 18px auto 0;
  text-align: center;
}

.lpbt__atc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 56px;
  padding: 14px 20px;
  border: 0;
  border-radius: 999px;
  /* Fallback is deliberate: without it an undefined --lpbt-ink gives a
     transparent button with white text, i.e. an invisible ATC. */
  background: var(--lpbt-ink, #072835);
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.14s ease, background 0.18s ease;
}

.lpbt__atc:hover { background: #0b3a4c; }
.lpbt__atc:active { transform: translateY(1px); }

.lpbt__atc:focus-visible {
  outline: 3px solid var(--lpbt-yellow);
  outline-offset: 2px;
}

.lpbt__atc[aria-busy='true'] { opacity: 0.7; pointer-events: none; }

.lpbt__atc-sep { opacity: 0.5; }

.lpbt__error {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #b42318;
}

.lpbt__error[hidden] { display: none; }

.lpbt__trust {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--lpbt-muted);
}

.lpbt__guarantee {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--lpbt-ink);
}

.lpbt__guarantee svg { width: 18px; height: 18px; }

.lpbt__disclaimer {
  margin: 12px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: #98a2b3;
}

.lpbt__disclaimer[hidden] { display: none; }

/* ---------- Motion & contrast ---------- */

@media (prefers-reduced-motion: reduce) {
  .lpbt *,
  .lpbt *::before,
  .lpbt *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  .lpbt__tier.is-selected { border-color: Highlight; }
  .lpbt__radio { border-color: ButtonText; }
}

/* ============================================================
   Variant chips (variant_mode: picker)

   Uses the shared --hps-chip-* tokens from hps-tokens.css, so these
   pills are identical to the PDP buy-box flavour pills, the bundle
   buy box and the tub tiers. Do not hardcode padding or radius here -
   change the tokens.
   ============================================================ */

.lpbt .lpbt__variants {
  max-width: var(--lpbt-max);
  margin: 0 auto 20px;
}

.lpbt .lpbt__variants-label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--lpbt-ink, #072835);
}

.lpbt .lpbt__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hps-chip-gap, 8px);
}

.lpbt .lpbt__chip {
  padding: var(--hps-chip-pad-y, 11px) var(--hps-chip-pad-x, 20px);
  border: var(--hps-chip-border-width, 1.5px) solid rgba(0, 0, 0, 0.12);
  border-radius: var(--hps-chip-radius, 999px);
  background: #fff;
  color: var(--lpbt-ink, #072835);
  font-family: inherit;
  font-size: var(--hps-chip-font-size, 14px);
  font-weight: 400;
  line-height: var(--hps-chip-line-height, 1.3);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.lpbt .lpbt__chip:hover:not(.is-soldout) {
  border-color: rgba(0, 0, 0, 0.35);
}

.lpbt .lpbt__chip.is-selected {
  background: var(--lpbt-ink, #072835);
  border-color: var(--lpbt-ink, #072835);
  color: #fff;
}

/* Sold out: struck through and non-interactive, matching the flavour
   pills in the PDP buy box. */
.lpbt .lpbt__chip.is-soldout {
  opacity: 0.45;
  text-decoration: line-through;
  cursor: not-allowed;
}

@media (max-width: 767.98px) {
  .lpbt .lpbt__chip {
    padding: var(--hps-chip-pad-y-mobile, 10px) var(--hps-chip-pad-x-mobile, 16px);
  }
}


/* ============================================================
   IN-BUY-BOX VARIANT (.lpbt--in-buybox)

   Used by snippets/lp-multi-tier-box.liquid, which renders this
   component as the "LP — Multi Tier Box" block inside the PDP buy
   box column instead of as a full-width page section.

   .lpbt was built as a page section: 40px/64px vertical padding, its
   own background, and an inner column capped at --lpbt-max and
   centred with margin auto. In a ~400-500px buy box column that
   gives dead space top and bottom and pointless centring, so all of
   it is neutralised here.

   Two classes, so this beats the single-class .lpbt rules above
   (including the desktop padding inside @media min-width 1024px)
   regardless of source order.
   ============================================================ */

.lpbt.lpbt--in-buybox {
  /* Inner column fills the buy box instead of centring inside it.
     Every child that uses max-width: var(--lpbt-max) - the toggle,
     variant chips, tier list, shipping line and actions - follows
     from this one value. */
  --lpbt-max: 100%;
  padding: 0;
  background: none;
}

@media (min-width: 1024px) {
  .lpbt.lpbt--in-buybox {
    padding: 0;
  }
}

/* The PDP already has its own h1 and description above this block, so
   the section header is not rendered by lp-multi-tier-box. This is a
   guard in case one is ever added. */
.lpbt.lpbt--in-buybox .lpbt__head {
  display: none;
}

/* Tighter vertical rhythm than the page section, which had room to
   breathe. The buy box column is dense. */
.lpbt.lpbt--in-buybox .lpbt__modes,
.lpbt.lpbt--in-buybox .lpbt__variants {
  margin-bottom: 16px;
}

.lpbt.lpbt--in-buybox .lpbt__actions {
  margin-top: 16px;
}


/* ============================================================
   IMAGE SWATCHES (.lpbt__swatches)

   Circular variant images with the flavour name beneath, replacing
   text pills. Rendered by lp-multi-tier-box.liquid from
   variant.featured_image.
   ============================================================ */

.lpbt .lpbt__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 10px;
  max-width: var(--lpbt-max);
  margin: 0 auto;
}

.lpbt .lpbt__swatch {
  /* Fixed-basis flex so swatches keep a consistent size and wrap onto a
     second row rather than shrinking to slivers on narrow columns.
     min-width:0 lets the label inside be constrained rather than forcing
     the cell wider than its declared width. */
  flex: 0 0 auto;
  width: 82px;
  min-width: 0;
  text-transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.lpbt .lpbt__swatch-media {
  /* display + aspect-ratio, NOT width + height. This is a <span> inside a
     flex column; relying on an explicit height let it collapse, and a
     999px radius on a non-square box renders as a pill, which is why these
     were not circles. aspect-ratio cannot collapse. 50% is also safer than
     999px - it is always a circle whatever the size. */
  display: block;
  flex: 0 0 auto;
  position: relative;
  width: 72px;
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 50%;
  overflow: hidden;
  background: var(--hps-surface, #f5f5f3);
  /* Ring drawn inside with box-shadow so selecting a swatch never changes
     its size and the row cannot reflow on click. */
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.15s ease;
}

.lpbt .lpbt__swatch-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lpbt .lpbt__swatch-label {
  /* Reserve two lines so a one-word flavour and a three-word flavour keep
     their circles on the same baseline instead of the row going ragged. */
  display: block;
  min-height: 2.5em;

  /* width:100% + min-width:0 are REQUIRED. This is a flex item in a column
     with align-items:center, so without them its width is content-based and a
     long flavour name grows past the cell and overlaps its neighbours -
     "Athena's Mixed Berry" is wider than the circle. overflow-wrap:anywhere
     rather than break-word so it breaks even with no space to break on. */
  width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;

  /* Explicit reset: the label inherits uppercase from ancestor rules
     otherwise, and .lpbt__swatch is a <button>. Title Case is applied in
     Liquid (see lp-multi-tier-box.liquid), so any inherited transform
     undoes it. */
  text-transform: none;
  letter-spacing: normal;

  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  color: var(--lpbt-muted, #667085);
  transition: color 0.15s ease, font-weight 0.15s ease;
}

.lpbt .lpbt__swatch:hover:not(.is-soldout) .lpbt__swatch-media {
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.35);
}

.lpbt .lpbt__swatch.is-selected .lpbt__swatch-media {
  box-shadow: inset 0 0 0 2.5px var(--lpbt-ink, #072835);
}

.lpbt .lpbt__swatch.is-selected .lpbt__swatch-label {
  color: var(--lpbt-ink, #072835);
  font-weight: 700;
}

.lpbt .lpbt__swatch.is-soldout {
  cursor: not-allowed;
}

.lpbt .lpbt__swatch.is-soldout .lpbt__swatch-media {
  opacity: 0.4;
}

.lpbt .lpbt__swatch.is-soldout .lpbt__swatch-label {
  text-decoration: line-through;
  opacity: 0.6;
}


/* ============================================================
   RIBBON — top LEFT, above the radio (MULTI TIER BOX ONLY)
   The base rule pins it top: -1px / right: 16px. The radio sits at the
   left of .lpbt__tier-hit, so this moves the ribbon over it.
   Scoped to the block: the landing-page section keeps it on the right.
   ============================================================ */

.lpbt.lpbt--in-buybox .lpbt__ribbon {
  right: auto;
  left: 14px;
}


/* ============================================================
   IN-BUY-BOX SIZING

   .lpbt was sized for a full-width page section. In the buy box
   column (~400-500px on desktop) the toggle's two 50% flex buttons
   plus the "Best value" flag do not fit on one line, and the price
   at clamp(26px, 5.5vw, 34px) resolves to 34px on wide viewports.
   ============================================================ */

.lpbt.lpbt--in-buybox .lpbt__modes {
  padding: 3px;
}

/* Stack label above flag so "Subscribe & save" + "Best value" cannot
   overflow. Row layout is what breaks the container. */
.lpbt.lpbt--in-buybox .lpbt__mode {
  flex-direction: column;
  gap: 2px;
  min-height: 40px;
  padding: 7px 8px;
  font-size: 13px;
  line-height: 1.2;
}

.lpbt.lpbt--in-buybox .lpbt__mode-flag {
  font-size: 9px;
  padding: 1px 6px;
}

/* ============================================================
   MULTI TIER BOX — TEXT & SWATCH SIZES

   >>> THIS IS THE ONLY PLACE TO CHANGE SIZES FOR THE
   >>> "LP — Multi Tier Box" BLOCK. <<<

   Scoped to .lpbt--in-buybox, which only snippets/lp-multi-tier-box.liquid
   sets. sections/lp-bundle-tiers.liquid (the landing-page section) keeps its
   own hardcoded sizes and is NOT affected by anything below.

   The --mtb-* prefix is deliberate: --lpbt-* would read as belonging to the
   shared component. These belong to the block only.
   ============================================================ */

.lpbt.lpbt--in-buybox {
  /* ---- TEXT ---- */
  --mtb-fs-tier-label: 15px;
  --mtb-fs-price: 26px;
  --mtb-fs-price-unit: 13px;
  --mtb-fs-billing: 12px;
  --mtb-fs-was: 15px;         /* struck-through RRP, right of the price */
  --mtb-fs-feature: 13px;
  --mtb-fs-mode: 13px;
  --mtb-fs-mode-flag: 9px;
  --mtb-fs-atc: 15px;
  --mtb-fs-badge: 10px;
  --mtb-fs-ribbon: 10px;
  --mtb-fs-gift: 11px;
  --mtb-fs-fine: 12px;
  --mtb-fs-swatch: 11px;
  --mtb-fs-dd: 15px;         /* flavour dropdown name */
  --mtb-fs-dd-price: 14px;   /* flavour dropdown price */
  --mtb-fs-step: 15px;       /* step headings */
  --mtb-fs-gift-status: 11px; /* gift unlocked / add-more line */
  --mtb-gift-gap: 6px;        /* between gift tiles inside a tier */
  --mtb-gift-solo-thumb: 64px; /* thumb width when slider = 1 */
  --mtb-fs-gift-solo: 14px;    /* gift name when slider = 1 */
  --mtb-gift-thumb-max: 120px; /* thumb cap when slider = 2 */
  --mtb-fs-gift-heading: 13px; /* "Your free gifts" line inside a tier */
  --mtb-fs-ship: 12px;        /* free-shipping progress line */
  --mtb-atc-height: 54px;     /* Add to cart button height */

  /* ---- SPACING ---- */
  --mtb-step-gap: 20px;      /* between the four steps */
  --mtb-tier-gap: 8px;       /* between supply options */

  /* ---- SWATCHES ---- */
  --mtb-swatch-size: 64px;   /* diameter of the circle */
  --mtb-swatch-cell: 74px;   /* column width, i.e. circle + label gutter */
}

/* Three classes, so each of these beats the two-class section rules above
   regardless of source order. */
.lpbt.lpbt--in-buybox .lpbt__tier-label { font-size: var(--mtb-fs-tier-label); }
.lpbt.lpbt--in-buybox .lpbt__price { font-size: var(--mtb-fs-price); }
.lpbt.lpbt--in-buybox .lpbt__price-unit { font-size: var(--mtb-fs-price-unit); }
.lpbt.lpbt--in-buybox .lpbt__billing { font-size: var(--mtb-fs-billing); }
.lpbt.lpbt--in-buybox .lpbt__features li { font-size: var(--mtb-fs-feature); }
.lpbt.lpbt--in-buybox .lpbt__atc { font-size: var(--mtb-fs-atc); }
.lpbt.lpbt--in-buybox .lpbt__save-badge { font-size: var(--mtb-fs-badge); }
.lpbt.lpbt--in-buybox .lpbt__ribbon { font-size: var(--mtb-fs-ribbon); }
.lpbt.lpbt--in-buybox .lpbt__gift-name { font-size: var(--mtb-fs-gift); }
.lpbt.lpbt--in-buybox .lpbt__trust,
.lpbt.lpbt--in-buybox .lpbt__guarantee { font-size: var(--mtb-fs-fine); }

/* Toggle. Stacking label above flag is what stops "Subscribe & save" plus
   "Best value" overflowing a ~400px column - the row layout is the bug. */
.lpbt.lpbt--in-buybox .lpbt__modes { padding: 3px; }

.lpbt.lpbt--in-buybox .lpbt__mode {
  flex-direction: column;
  gap: 2px;
  min-height: 40px;
  padding: 7px 8px;
  font-size: var(--mtb-fs-mode);
  line-height: 1.2;
}

.lpbt.lpbt--in-buybox .lpbt__mode-flag {
  font-size: var(--mtb-fs-mode-flag);
  padding: 1px 6px;
}

/* Swatch geometry. Only the block renders swatches, but the fallbacks keep
   these sane if they are ever used outside it. */
.lpbt.lpbt--in-buybox .lpbt__swatch { width: var(--mtb-swatch-cell, 74px); }
.lpbt.lpbt--in-buybox .lpbt__swatch-media { width: var(--mtb-swatch-size, 64px); }
.lpbt.lpbt--in-buybox .lpbt__swatch-label { font-size: var(--mtb-fs-swatch, 11px); }


/* ============================================================
   BUTTON RESET — undo the theme's global <button> rule

   assets/theme.css has:
     button, .btn {
       white-space: nowrap;
       height: var(--buttons-height);
       line-height: 30px;
       padding: 0 var(--buttons-padding);       /* 3.2rem */
       text-transform: var(--buttons-transform, capitalize);
       gap: 0 var(--buttons-gap, 0.4rem);
     }

   .lpbt__swatch and .lpbt__mode are <button> elements, so they inherited
   all of it. Two of those are destructive rather than cosmetic:

     white-space: nowrap  - the flavour label physically CANNOT wrap, so it
                            overflows its cell and overlaps its neighbours.
                            overflow-wrap cannot help against nowrap.
     height: --buttons-height - a FIXED height, so content overflows the
                            button box and swatch rows overlap each other
                            and the heading above them.

   Anything added here that is a <button> needs this reset.
   ============================================================ */

.lpbt .lpbt__swatch,
.lpbt .lpbt__mode,
.lpbt .lpbt__atc {
  height: auto;
  min-height: 0;
  white-space: normal;
  text-transform: none;
  letter-spacing: normal;
  gap: 6px;
}

.lpbt .lpbt__swatch-label,
.lpbt .lpbt__mode {
  white-space: normal;
}

/* Restore the toggle's own minimum tap target, lost to min-height: 0 above. */
.lpbt .lpbt__mode {
  min-height: 44px;
  gap: 6px;
}

.lpbt.lpbt--in-buybox .lpbt__mode {
  min-height: 40px;
}


/* ============================================================
   FLAVOUR DROPDOWN (.lpbt__dd)

   Collapsed row shows the selected variant's thumbnail and name; the
   panel lists every variant with thumbnail, name and price. Native
   details/summary, so open state needs no JS.

   Only lp-multi-tier-box.liquid renders this. The landing-page section
   still uses .lpbt__chip text pills, which are untouched.

   NOTE: .lpbt__dd-opt is a <button>, so it needs the same
   white-space / height reset as the other buttons in this file - see the
   BUTTON RESET block. theme.css sets white-space: nowrap and a fixed
   height on every button, which otherwise squashes these rows.
   ============================================================ */

.lpbt .lpbt__dd {
  --mtb-dd-thumb: 44px;
  max-width: var(--lpbt-max);
  margin: 0 auto;
  border: 1.5px solid var(--lpbt-line, #d7dbe3);
  border-radius: var(--lpbt-radius, 16px);
  background: #fff;
  overflow: hidden;
}

.lpbt .lpbt__dd[open] {
  border-color: var(--lpbt-ink, #072835);
}

/* Collapsed row / trigger */
.lpbt .lpbt__dd-current {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
}

/* Hide the native disclosure triangle in both engines. */
.lpbt .lpbt__dd-current::-webkit-details-marker { display: none; }
.lpbt .lpbt__dd-current::marker { content: ''; }

.lpbt .lpbt__dd-thumb {
  flex: 0 0 auto;
  display: block;
  width: var(--mtb-dd-thumb);
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--hps-surface, #f5f5f3);
}

.lpbt .lpbt__dd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.lpbt .lpbt__dd-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--mtb-fs-dd, 15px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--lpbt-ink, #072835);
}

.lpbt .lpbt__dd-chev {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--lpbt-ink, #072835);
  transition: transform 0.18s ease;
}

.lpbt .lpbt__dd[open] .lpbt__dd-chev {
  transform: rotate(180deg);
}

/* Panel */
.lpbt .lpbt__dd-panel {
  border-top: 1px solid var(--lpbt-line-soft, #ececec);
  /* Cap the list so a long flavour range cannot push the buy box down the
     page; scroll inside instead. */
  max-height: 320px;
  overflow-y: auto;
}

.lpbt .lpbt__dd-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid var(--lpbt-line-soft, #ececec);
  border-radius: 0;
  background: none;
  font: inherit;
  white-space: normal;
  text-transform: none;
  letter-spacing: normal;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}

.lpbt .lpbt__dd-opt:last-child {
  border-bottom: 0;
}

.lpbt .lpbt__dd-opt:hover:not(.is-soldout) {
  background: var(--hps-surface, #f5f5f3);
}

.lpbt .lpbt__dd-opt-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--mtb-fs-dd, 15px);
  font-weight: 500;
  line-height: 1.3;
  color: var(--lpbt-ink, #072835);
}

.lpbt .lpbt__dd-opt.is-selected .lpbt__dd-opt-name {
  font-weight: 700;
}

.lpbt .lpbt__dd-opt-price {
  flex: 0 0 auto;
  font-size: var(--mtb-fs-dd-price, 14px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--lpbt-muted, #667085);
}

.lpbt .lpbt__dd-opt.is-soldout {
  cursor: not-allowed;
  opacity: 0.45;
}

.lpbt .lpbt__dd-opt.is-soldout .lpbt__dd-opt-name {
  text-decoration: line-through;
}

@media (prefers-reduced-motion: reduce) {
  .lpbt .lpbt__dd-chev,
  .lpbt .lpbt__dd-opt {
    transition: none;
  }
}


/* ============================================================
   STEP LAYOUT (.lpbt__step) — MULTI TIER BOX ONLY

   The buy box reads as a numbered sequence:
     1 Choose your flavour   2 Select your supply
     3 Free gifts            4 Add to cart
   Each step is a labelled group. Only lp-multi-tier-box.liquid renders
   these; the landing-page section is unaffected.
   ============================================================ */

.lpbt.lpbt--in-buybox .lpbt__step {
  margin: 0 0 var(--mtb-step-gap, 20px);
}

.lpbt.lpbt--in-buybox .lpbt__step:last-of-type {
  margin-bottom: 0;
}

.lpbt.lpbt--in-buybox .lpbt__step-title {
  margin: 0 0 8px;
  font-size: var(--mtb-fs-step, 15px);
  font-weight: 700;
  line-height: 1.2;
  /* No text-transform: headings render exactly as typed in the Customizer,
     so "Choose your flavour" stays sentence case. */
  letter-spacing: normal;
  text-transform: none;
  color: var(--lpbt-ink, #072835);
}

/* Tighter tier stack. The section spaces these for a full-width page; in a
   buy box column that reads as disconnected cards. */
.lpbt.lpbt--in-buybox .lpbt__tiers {
  gap: var(--mtb-tier-gap, 8px);
}

/* The toggle sits inside step 2 above the tiers, so it needs less air
   beneath it than when it was the first thing in the component. */
.lpbt.lpbt--in-buybox .lpbt__modes {
  margin-bottom: 10px;
}

/* Gifts are now a standalone step rather than nested in a tier card, so the
   per-tier insets no longer apply. */
.lpbt.lpbt--in-buybox [data-lpbt-gifts-standalone] .lpbt__gifts {
  margin: 0;
  padding: 0;
  border: 0;
}


/* ============================================================
   FLAVOUR DROPDOWN — VISIBLE SCROLL AFFORDANCE

   The panel caps at max-height and scrolls. Default scrollbars are
   invisible until you scroll on macOS, so shoppers cannot tell there
   are more flavours below the fold. Two cues:
     1. a permanently visible, styled scrollbar
     2. a soft fade at the bottom edge of the panel
   ============================================================ */

.lpbt .lpbt__dd-panel {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(7, 40, 53, 0.35) transparent;

  /* The fade sits on the panel background and is pinned to the bottom of the
     scroll VIEWPORT, not the content, so it stays put while scrolling and
     signals "more below". */
  background-image: linear-gradient(
    to top,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.95) 100%
  );
  background-repeat: no-repeat;
  background-attachment: local, scroll;
  background-position: bottom;
  background-size: 100% 28px;
}

/* WebKit / Blink. -webkit-scrollbar has no standard equivalent, so both the
   Firefox properties above and these are needed for full coverage. */
.lpbt .lpbt__dd-panel::-webkit-scrollbar {
  width: 10px;
}

.lpbt .lpbt__dd-panel::-webkit-scrollbar-track {
  background: rgba(7, 40, 53, 0.06);
  border-radius: 999px;
}

.lpbt .lpbt__dd-panel::-webkit-scrollbar-thumb {
  background: rgba(7, 40, 53, 0.35);
  border-radius: 999px;
  /* Inset the thumb from the track edge without changing the track width. */
  border: 2px solid transparent;
  background-clip: content-box;
}

.lpbt .lpbt__dd-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(7, 40, 53, 0.6);
  background-clip: content-box;
}

/* Gifts step: the rail grid needs no extra chrome now it is standalone. */
.lpbt.lpbt--in-buybox [data-lpbt-gifts-standalone] .lp-gwp {
  margin: 0;
}


/* ============================================================
   BOXED STEP (.lpbt__step--boxed)

   Gives the free-gifts row the same light outline as the tier cards and
   the flavour dropdown, so the four steps read as one family. Values are
   taken from .lpbt__tier deliberately - if the card border changes,
   change it in both or pull it into a token.
   ============================================================ */

.lpbt.lpbt--in-buybox .lpbt__step--boxed {
  padding: 14px;
  border: 1.5px solid var(--lpbt-line, #d7dbe3);
  border-radius: var(--lpbt-radius, 16px);
  background: #fff;
}

/* The heading sits inside the box now, so it needs less space beneath it
   than a bare step title. */
.lpbt.lpbt--in-buybox .lpbt__step--boxed .lpbt__step-title {
  margin-bottom: 10px;
}

/* Status line is always visible in this row (both locked and unlocked
   states are stated), so give it room and stop it wrapping raggedly. */
.lpbt.lpbt--in-buybox [data-lpbt-gifts-standalone] .lp-gwp__status {
  display: block;
  min-height: 2.4em;
  font-size: var(--mtb-fs-gift-status, 11px);
  line-height: 1.2;
}


/* Gifts inside a tier card: tighter than the standalone row, and separated
   from the feature list above by a rule rather than more whitespace. */
.lpbt.lpbt--in-buybox .lp-gwp--in-tier {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--lpbt-line-soft, #ececec);
}

.lpbt.lpbt--in-buybox .lp-gwp--in-tier .lp-gwp__grid {
  gap: var(--mtb-gift-gap, 6px);
}

.lpbt.lpbt--in-buybox .lp-gwp--in-tier .lp-gwp__status {
  display: block;
  min-height: 2.4em;
  font-size: var(--mtb-fs-gift-status, 11px);
  line-height: 1.2;
}


/* Gifts heading inside a tier card. lp-gwp-rail.css uppercases
   .lp-gwp__heading for the standalone row; in the buy box every heading
   renders exactly as typed in the Customizer, so undo it here. */
.lpbt.lpbt--in-buybox .lp-gwp--in-tier .lp-gwp__heading {
  margin: 0 0 8px;
  font-size: var(--mtb-fs-gift-heading, 13px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: normal;
  text-transform: none;
  color: var(--lpbt-ink, #072835);
}


/* ============================================================
   BELOW THE TIERS — ship line, ATC, fine print

   The section spaces these for a full-width page. In the buy box the
   result was three competing text sizes and a guarantee line heavier
   than the trust line above it, which read as a heading rather than
   fine print.

   Changes, all buy-box only:
     - ship progress sits closer to the button it relates to
     - ATC drops to the buy-box type scale
     - trust and guarantee become ONE fine-print stack: same size,
       same weight, same colour, tight leading
   ============================================================ */

.lpbt.lpbt--in-buybox .lpbt__actions {
  margin-top: 12px;
}

/* Belongs to the button, so keep it tight to it. */
.lpbt.lpbt--in-buybox .lpbt__ship {
  margin: 0 0 8px;
  font-size: var(--mtb-fs-ship, 12px);
  font-weight: 600;
}

.lpbt.lpbt--in-buybox .lpbt__atc {
  /* height: auto comes from the BUTTON RESET block above - REQUIRED, because
     theme.css sets a fixed `height: var(--buttons-height)` on every button and
     --buttons-height resolves differently per scope (3.2rem, 3.8rem, even
     var(--swiper-navigation-size)). Without it the button ignores these values
     entirely and takes whatever the theme decided. min-height is the floor;
     the token controls it. */
  min-height: var(--mtb-atc-height, 52px);
  padding: 12px 18px;
  font-weight: 800;
}

/* One fine-print stack. The guarantee was 600 weight in ink while the
   trust line was 400 in muted, so it out-shouted the line above it. */
.lpbt.lpbt--in-buybox .lpbt__trust,
.lpbt.lpbt--in-buybox .lpbt__guarantee {
  margin: 6px 0 0;
  font-size: var(--mtb-fs-fine, 12px);
  font-weight: 500;
  line-height: 1.35;
  color: var(--lpbt-muted, #667085);
}

.lpbt.lpbt--in-buybox .lpbt__trust {
  margin-top: 10px;
}

.lpbt.lpbt--in-buybox .lpbt__error {
  margin: 8px 0 0;
  font-size: var(--mtb-fs-fine, 12px);
}

.lpbt.lpbt--in-buybox .lpbt__sub-note {
  margin: 6px 0 0;
  font-size: var(--mtb-fs-fine, 12px);
  line-height: 1.35;
  color: var(--lpbt-muted, #667085);
}


/* [hidden] guard for the per-mode feature lists. .lpbt__features declares no
   display of its own today, so the attribute would work - but every other
   element this file hides has an explicit guard, and adding one now means a
   future `display` declaration cannot silently break the mode swap. */
.lpbt__features[hidden] {
  display: none;
}

/* NOTE: do NOT use .lpbt__features + .lpbt__features to de-duplicate the
   divider. Adjacent-sibling selectors ignore visibility, so when One-time is
   selected the SECOND list is the visible one and it would lose its top
   border. Only one list is ever displayed, so both keep their own divider. */


/* Gift name wraps to two lines instead of truncating.

   lp-gwp-rail.css sets white-space: nowrap + text-overflow: ellipsis on
   .lp-gwp__name, which is why "Recovery Su..." was cut off. All three of those
   properties have to be undone - removing nowrap alone leaves the ellipsis
   rules inert but present.

   min-height reserves both lines whether or not a name needs them, so a
   one-line gift and a two-line gift keep their status text on the same
   baseline instead of the row going ragged.

   Scoped to the tier box; the standalone rail keeps its single-line behaviour. */
.lpbt.lpbt--in-buybox .lp-gwp--in-tier .lp-gwp__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  min-height: calc(2 * 1.3em);
  line-height: 1.3;
}


/* Second gift row sits under a hairline, not just more whitespace, so the
   two groups read as separate offers rather than one long grid. Applied to
   the subscription row only; the standard row keeps the divider it already
   has from .lp-gwp--in-tier. */
.lpbt.lpbt--in-buybox .lp-gwp--row-subscription {
  margin-top: 12px;
}


/* Gift tiles sized as though there are always four across.

   The base grid in lp-gwp-rail.css is repeat(auto-fit, minmax(0, 1fr)), which
   divides the row by however many gifts exist - so three gifts stretched to a
   third of the card each and rendered oversized.

   A fixed four-column track keeps every tile at the same width whatever the
   count: three gifts fill columns 1-3 and leave column 4 empty, which also
   left-aligns the row without needing justify-content. A fifth gift wraps to
   the next row at the same size rather than shrinking the first four.

   Literal 4 rather than a custom property: repeat() with a var() count fails
   the whole declaration if it does not resolve, and the fallback would be the
   stretched auto-fit grid with no error anywhere. */
.lpbt.lpbt--in-buybox .lp-gwp--in-tier .lp-gwp__grid {
  /* Fallback only. The real column count is written inline by
     lp-multi-tier-box.liquid from the "Gift tiles per row" slider, and an
     inline style beats this without !important. This value applies only if
     that attribute is ever missing. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-items: start;
}

/* Each tile fills its own column so thumbnails stay square and aligned;
   justify-items: start above only stops a lone tile stretching. */
.lpbt.lpbt--in-buybox .lp-gwp--in-tier .lp-gwp__tile {
  width: 100%;
}


/* ---- Single full-width offer (slider set to 1) ----
   A one-column grid would otherwise give a square thumbnail as wide as the
   card - a ~400px image for one gift. Switch the tile to a horizontal strip
   instead: fixed thumbnail on the left, text beside it. */
.lpbt.lpbt--in-buybox .lp-gwp--cols-1 .lp-gwp__tile {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1.5px solid var(--lpbt-line, #d7dbe3);
  border-radius: 10px;
}

.lpbt.lpbt--in-buybox .lp-gwp--cols-1 .lp-gwp__thumb {
  flex: 0 0 auto;
  width: var(--mtb-gift-solo-thumb, 64px);
}

.lpbt.lpbt--in-buybox .lp-gwp--cols-1 .lp-gwp__info {
  flex: 1 1 auto;
  min-width: 0;
}

/* Full width available, so no need to clamp or reserve two lines. */
.lpbt.lpbt--in-buybox .lp-gwp--cols-1 .lp-gwp__name {
  display: block;
  min-height: 0;
  font-size: var(--mtb-fs-gift-solo, 14px);
}

.lpbt.lpbt--in-buybox .lp-gwp--cols-1 .lp-gwp__status {
  min-height: 0;
}

/* Two across is the other case where a square thumbnail gets oversized. */
.lpbt.lpbt--in-buybox .lp-gwp--cols-2 .lp-gwp__thumb {
  max-width: var(--mtb-gift-thumb-max, 120px);
}


/* Add to cart is driven entirely by its tokens - --mtb-fs-atc for the text and
   --mtb-atc-height for the minimum height, both in the knob block above.
   It was briefly chained to --mtb-fs-price; that is undone, so the two size
   independently again. Change the tokens, not this rule. */


/* Total gift value, appended to the gifts heading. Slightly lighter than the
   heading so it reads as a figure rather than part of the label. */
.lpbt.lpbt--in-buybox .lp-gwp__heading-total {
  margin-left: 4px;
  font-weight: 800;
  color: var(--lpbt-good, #1a7f37);
}

.lpbt.lpbt--in-buybox .lp-gwp__heading-total[hidden] {
  display: none;
}


/* Price row: price on the left, struck-through RRP hard right.

   The RRP used to sit on the billing line under the price, where it competed
   with "Billed $206.43 per delivery". On the right of the price row it reads as
   a direct before/after against the price it is anchored opposite. */
.lpbt.lpbt--in-buybox .lpbt__price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.lpbt.lpbt--in-buybox .lpbt__price-now {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
}

.lpbt.lpbt--in-buybox .lpbt__price-was {
  flex: 0 0 auto;
  font-size: var(--mtb-fs-was, 15px);
  font-weight: 600;
  color: var(--lpbt-muted, #667085);
  white-space: nowrap;
}

.lpbt.lpbt--in-buybox .lpbt__price-was[hidden] {
  display: none;
}


/* ---- Simple Bundles component pickers ----
   One labelled native <select> per component, rendered at runtime because the
   app injects its selects asynchronously. Native rather than the custom
   details dropdown: the list is app-supplied and can be long, and this gets
   keyboard, screen reader and mobile pickers for free. */
.lpbt.lpbt--in-buybox .lpbt__bundle-component + .lpbt__bundle-component {
  margin-top: 12px;
}

.lpbt.lpbt--in-buybox .lpbt__bundle-select {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 11px 14px;
  border: 1.5px solid var(--lpbt-line, #d7dbe3);
  border-radius: var(--lpbt-radius, 16px);
  background: #fff;
  font-family: inherit;
  font-size: var(--mtb-fs-dd, 15px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--lpbt-ink, #072835);
  white-space: normal;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}

.lpbt.lpbt--in-buybox .lpbt__bundle-select:focus-visible {
  outline: 2px solid var(--lpbt-ink, #072835);
  outline-offset: 2px;
}

.lpbt.lpbt--in-buybox [data-lpbt-bundle-components][hidden] {
  display: none;
}


/* [hidden] guards for the flavour dropdown.

   .lpbt__dd-thumb sets display: block, which defeats the hidden attribute -
   the UA rule only wins when no author rule sets display. That is why bundle
   components with no resolvable image rendered an empty grey square instead of
   collapsing: the JS was setting hidden and nothing happened.

   Same class of bug as the welcome-kit tile. Anything in this file that JS
   hides needs a guard here at the same time. */
.lpbt .lpbt__dd-thumb[hidden],
.lpbt .lpbt__dd-opt[hidden],
.lpbt .lpbt__dd-opt-price[hidden] {
  display: none;
}

/* With no image the row would start hard against the edge, so give the text
   back the space the thumbnail was holding. */
.lpbt .lpbt__dd-current .lpbt__dd-thumb[hidden] + .lpbt__dd-name,
.lpbt .lpbt__dd-opt .lpbt__dd-thumb[hidden] + .lpbt__dd-opt-name {
  padding-left: 2px;
}


/* Gifts heading: label left, total value hard right - the total is a figure,
   not part of the sentence, so it reads better anchored opposite. */
.lpbt.lpbt--in-buybox .lp-gwp__heading--split {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

/* Add to cart: matches the proposed design - slightly taller, lighter weight
   than the previous 800, which read as shouty next to the tier prices. */
.lpbt.lpbt--in-buybox .lpbt__atc {
  min-height: var(--mtb-atc-height, 54px);
  font-weight: 600;
  letter-spacing: 0;
}


/* ---- Quantity mode ----
   One always-selected tier with a stepper instead of a radio. The card keeps
   its body (features, gifts) because .is-selected is always on. */
.lpbt.lpbt--in-buybox .lpbt__tier-hit--qty {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}

.lpbt.lpbt--in-buybox .lpbt__qty {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1.5px solid var(--lpbt-line, #d7dbe3);
  border-radius: 999px;
  padding: 2px;
}

.lpbt.lpbt--in-buybox .lpbt__qty-btn {
  width: 30px;
  height: 30px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  color: var(--lpbt-ink, #072835);
  cursor: pointer;
  white-space: normal;
  text-transform: none;
}

.lpbt.lpbt--in-buybox .lpbt__qty-btn:hover:not(:disabled) {
  background: var(--hps-surface, #f5f5f3);
}

/* Disabled rather than hidden at the bounds, so the row does not shift and the
   other button never slides under the cursor. */
.lpbt.lpbt--in-buybox .lpbt__qty-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.lpbt.lpbt--in-buybox .lpbt__qty-val {
  min-width: 26px;
  text-align: center;
  font-size: var(--mtb-fs-tier-label, 15px);
  font-weight: 700;
  color: var(--lpbt-ink, #072835);
}

/* No radio in this mode, and the single card should not read as "selectable". */
.lpbt.lpbt--in-buybox[data-layout-mode="quantity"] .lpbt__tier {
  cursor: default;
}


/* Quantity mode: price unit hidden, and the card has no radio to align to, so
   the price sits beside the stepper rather than indented behind one. */
.lpbt.lpbt--in-buybox .lpbt__price-unit[hidden] {
  display: none;
}

.lpbt.lpbt--in-buybox[data-layout-mode="quantity"] .lpbt__tier-top:empty {
  display: none;
}

.lpbt.lpbt--in-buybox[data-layout-mode="quantity"] .lpbt__tier-main {
  gap: 2px;
}


/* Purchase mode stated inside the card - the toggle is often scrolled out of
   view by the time someone reads a tier price, and the same card shows two
   different prices depending on which mode is active. */
.lpbt.lpbt--in-buybox .lpbt__mode-note {
  display: block;
  margin: 1px 0 0;
  font-size: var(--mtb-fs-mode-note, 12px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--lpbt-good, #1a7f37);
}

.lpbt.lpbt--in-buybox .lpbt__mode-note:empty {
  display: none;
}


/* ---- Gifts as a contained card ----
   Was a hairline rule with tiles below it, which read as a continuation of the
   tier. A bordered container with its own header makes it a distinct offer -
   "and you also get these" - rather than more tier detail. */
.lpbt.lpbt--in-buybox .lp-gwp--in-tier {
  margin: 12px 0 0;
  padding: 0;
  border: 1.5px solid var(--lpbt-line, #d7dbe3);
  border-radius: var(--lpbt-radius, 16px);
  border-top: 1.5px solid var(--lpbt-line, #d7dbe3);
  overflow: hidden;
  background: #fff;
}

.lpbt.lpbt--in-buybox .lp-gwp--in-tier .lp-gwp__heading--split {
  margin: 0;
  padding: 8px 12px;
  background: var(--lpbt-ink, #072835);
  color: #fff;
  font-size: var(--mtb-fs-gift-heading, 13px);
}

.lpbt.lpbt--in-buybox .lp-gwp--in-tier .lp-gwp__heading-total {
  color: var(--lpbt-yellow, #ffd900);
}

.lpbt.lpbt--in-buybox .lp-gwp--in-tier .lp-gwp__grid {
  padding: 12px;
}


/* ---- Tier banner ----
   Replaces the corner ribbon. A ribbon is decoration the eye skips; a bar
   across the top of the card is read before the price, and has room to say
   what the tier gives rather than just labelling it.

   Sits flush to the card edges, so the card needs overflow hidden and the
   banner needs to escape the card's padding. */
.lpbt.lpbt--in-buybox .lpbt__tier {
  overflow: hidden;
}

/* No negative margins. The banner is already the FIRST CHILD of .lpbt__tier,
   and that element carries no padding of its own - the padding lives on
   .lpbt__tier-hit inside it. Pulling the banner outwards therefore pushed it
   beyond the card, where overflow:hidden cropped it. It simply spans the card
   and lets the card's own radius clip its corners. */
.lpbt.lpbt--in-buybox .lpbt__banner {
  display: block;
  margin: 0;
  padding: 8px 12px;
  background: var(--lpbt-ink, #072835);
  color: var(--lpbt-yellow, #ffd900);
  font-size: var(--mtb-fs-banner, 11px);
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
}

/* The emphasised tier gets the brand colour rather than ink, so the two
   states are distinguishable when more than one tier carries a banner. */
.lpbt.lpbt--in-buybox .lpbt__tier--hero .lpbt__banner {
  background: var(--lpbt-yellow, #ffd900);
  color: var(--lpbt-ink, #072835);
}

.lpbt.lpbt--in-buybox .lpbt__banner[hidden] {
  display: none;
}

/* The corner ribbon is retired. Left neutralised rather than deleted so an
   older template that still renders one does not show a stray floating tag. */
.lpbt.lpbt--in-buybox .lpbt__ribbon {
  display: none;
}


/* ============================================================
   COMPACT GIFT TILES — scroll reduction

   The square thumbnail was the whole problem: at four across in a ~430px
   column each tile was as TALL as the column was wide, so two gift groups
   cost ~380px of scroll on the one card that is already the longest thing
   in the buy box.

   A fixed height with object-fit: contain shows the same product at a size
   that suits a buy box, and the group drops to roughly half the height.
   Everything here is a knob so it can be tuned without hunting selectors.
   ============================================================ */

.lpbt.lpbt--in-buybox .lp-gwp--in-tier {
  --mtb-gift-thumb-h: 56px;
  --mtb-gift-name: 11px;
  --mtb-gift-status: 10px;
  --mtb-gift-head: 12px;
}

/* aspect-ratio must be cleared, not just overridden with a height - it stays
   in the cascade and keeps forcing the square. */
.lpbt.lpbt--in-buybox .lp-gwp--in-tier .lp-gwp__thumb {
  aspect-ratio: auto;
  height: var(--mtb-gift-thumb-h);
  /* lp-gwp-rail.css fills the thumb with a grey surface. That was hidden while
     the box was square and the image covered it; with object-fit: contain the
     image no longer fills the box and the grey shows as gutters either side.

     Transparent rather than white so it takes whichever card it sits on - the
     emphasised tier is tinted, and a hardcoded white would read as a block
     against it. */
  background: transparent;
}

/* contain, not cover: a shorter box would otherwise crop the top and bottom
   off the tub. */
.lpbt.lpbt--in-buybox .lp-gwp--in-tier .lp-gwp__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lpbt.lpbt--in-buybox .lp-gwp--in-tier .lp-gwp__heading--split {
  padding: 6px 10px;
  font-size: var(--mtb-gift-head);
}

.lpbt.lpbt--in-buybox .lp-gwp--in-tier .lp-gwp__grid {
  padding: 8px;
  gap: 6px;
}

.lpbt.lpbt--in-buybox .lp-gwp--in-tier .lp-gwp__name {
  font-size: var(--mtb-gift-name);
  line-height: 1.2;
  min-height: calc(2 * 1.2em);
  margin-top: 4px;
}

.lpbt.lpbt--in-buybox .lp-gwp--in-tier .lp-gwp__status {
  font-size: var(--mtb-gift-status);
  line-height: 1.2;
  min-height: calc(2 * 1.2em);
}

/* Second group sits tighter to the first - they read as one offer. */
.lpbt.lpbt--in-buybox .lp-gwp--row-subscription {
  margin-top: 8px;
}