/* ──────────────────────────────────────────────────────────────
   Main Product Hero — glacier palette, matches Figma 3660:7758
   ────────────────────────────────────────────────────────────── */

.product-hero {
  /* Shared tokens */
  --ivory-100: #fefefd;
  --shale-300: #aaadb6;
  --shale-base: #545a6d;

  /* Default (glacier) theme — overridden by [data-theme="…"] below */
  --theme-100: #e9edf6;
  --theme-400: #b7c3e0;
  --theme-700: #626e8b;
  --theme-900: #313745;

  display: block;
  position: relative; /* anchor for absolute-positioned back link on desktop */
  width: 100%;
  background: var(--theme-100);
  color: var(--theme-900);
  padding: 96px;
  min-height: 720px;
  box-sizing: border-box;
}

.product-hero[data-theme="glacier"] {
  --theme-100: #e9edf6;
  --theme-400: #b7c3e0;
  --theme-700: #626e8b;
  --theme-900: #313745;
}
.product-hero[data-theme="moss"] {
  --theme-100: #eef1f0;
  --theme-400: #c8d2ce;
  --theme-700: #737d79;
  --theme-900: #393e3c;
}
.product-hero[data-theme="shale"] {
  --theme-100: #dddee2;
  --theme-400: #8d919e;
  --theme-700: #383c49;
  --theme-900: #1c1e24;
}
.product-hero[data-theme="dune"] {
  --theme-100: #f8f6f3;
  --theme-400: #e8e0d8;
  --theme-700: #938b83;
  --theme-900: #494641;
}
.product-hero[data-theme="canyon"] {
  --theme-100: #f7ece6;
  --theme-400: #e3bfad;
  --theme-700: #8e6a58;
  --theme-900: #47352c;
}


.product-hero *,
.product-hero *::before,
.product-hero *::after { box-sizing: border-box; }

.product-hero__inner {
  display: flex;
  gap: 96px;
  max-width: 1728px;
  min-height: 640px;
  align-items: stretch;
  margin: 0 auto;
}

.product-hero__col { display: flex; flex-direction: column; }
.product-hero__col--info,
.product-hero__col--features { flex: 1 0 0; min-width: 0; }
.product-hero__col--info { gap: 48px; justify-content: center; }
/* Anchor tagline + accordions to the TOP so they're visible above the
   fold on tall PDPs. Was flex-end (bottom-aligned to match the gallery
   bottom edge), but that pushed key product info below the viewport on
   shorter screens — stakeholder asked for top-anchored.
   48px top padding gives the tagline some breathing room from the
   section's top edge so it doesn't sit flush against the gallery top.
   Only applied when columns are side-by-side (>1100px) — on stacked
   mobile/tablet the inner gap (32px) already provides separation. */
.product-hero__col--features { justify-content: flex-start; }
@media (min-width: 1101px) {
  .product-hero__col--features { padding-top: 48px; }
}
.product-hero__col--gallery { flex: 0 0 460px; width: 460px; gap: 12px; align-items: center; justify-content: center; }

/* ── Column 1: Product Info ─────────────────────────────── */
.product-hero__info { display: flex; flex-direction: column; gap: 8px; }

/* "← All Products" breadcrumb-style back link.
   Lives as a direct child of .product-hero so on mobile it renders
   *above the product image* (gallery has order: -1 inside .product-hero__inner)
   and on desktop it can be absolute-positioned into the top padding/margin
   zone — see desktop rules at the bottom of this file.
   Inherits the product's per-PDP theme color via --theme-700 / --theme-900. */
.product-hero__back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: var(--theme-700);
  text-decoration: none;
  transition: color 0.15s ease;
  margin-bottom: 16px; /* mobile default — gap before gallery */
}
.product-hero__back-link:hover {
  color: var(--theme-900);
}
.product-hero__back-link svg {
  flex-shrink: 0;
}

.product-hero__title {
  font-family: 'Conso Serif', Georgia, serif;
  font-weight: 400;
  font-size: 60px;
  line-height: 72px;
  letter-spacing: 0;
  color: var(--theme-900);
  margin: 0;
}

.product-hero__intro {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--theme-700);
  margin: 0;
}

.product-hero__price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px 16px;
}

.product-hero__price-info {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.product-hero__price {
  font-family: 'Conso Serif', Georgia, serif;
  font-weight: 400;
  font-size: 34px;
  line-height: 40px;
  color: var(--theme-900);
}

.product-hero__sub-price {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--theme-700);
  white-space: nowrap;
}
.product-hero__sub-price--strike {
  text-decoration: line-through;
}

/* Buy block */
.product-hero__buy { display: flex; flex-direction: column; gap: 16px; }

/* Purchase option cards (subscribe / one-time) */
.product-hero__options {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-hero__option {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  padding: 16px;
  background: var(--theme-100);
  border: 1px solid var(--shale-300);
  border-radius: 8px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--theme-900);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.product-hero__option:hover {
  border-color: var(--shale-base);
}
.product-hero__option.is-selected {
  border-color: var(--shale-900, #1c1e24);
}

.product-hero__option-head {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.product-hero__option-radio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  color: var(--shale-300);
}
.product-hero__option-radio svg {
  width: 24px;
  height: 24px;
}
.product-hero__option-radio-dot {
  opacity: 0;
  transform-origin: center;
  transform: scale(0.5);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.product-hero__option.is-selected .product-hero__option-radio {
  color: var(--shale-900, #1c1e24);
}
.product-hero__option.is-selected .product-hero__option-radio-dot {
  opacity: 1;
  transform: scale(1);
}

.product-hero__option-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.product-hero__option-title {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: var(--theme-900);
}
.product-hero__option-subtitle {
  display: inline-flex;
  align-items: center;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--theme-700);
}

.product-hero__option-price {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  text-align: right;
}
.product-hero__option-price-main {
  font-family: 'Conso Serif', Georgia, serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 32px;
  color: var(--theme-900);
  white-space: nowrap;
}
.product-hero__option-price-strike {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 24px;
  color: var(--theme-700);
  text-decoration: line-through;
  white-space: nowrap;
}

/* Subscribe card expanded details (delivered / pause) */
.product-hero__option-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.product-hero__option-details-divider {
  height: 1px;
  width: 100%;
  background: var(--theme-400);
  margin-top: 0;
}
.product-hero__option-detail {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--theme-700);
}
.product-hero__option-detail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 24px;
  color: var(--theme-700);
  flex-shrink: 0;
}
.product-hero__option-detail-icon svg {
  width: 24px;
  height: 24px;
}

/* Details only show when subscribe card is selected */
.product-hero__option--subscribe .product-hero__option-details {
  display: none;
}
.product-hero__option--subscribe.is-selected .product-hero__option-details {
  display: flex;
}

.product-hero__options-disclaimer {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 300;
  font-size: 10px;
  line-height: 16px;
  color: var(--theme-700);
  margin: 0;
}

/* ── Frequency trigger pill (replaces the old "Monthly" subtitle) ──
   Compact pill that lives INSIDE the Subscription option card, in the
   subtitle slot. Click opens a custom popover (built by JS) — see
   `.hvn-freq-popover` below. The trigger is a real <button>; the
   parent option card is a <div role="radio"> so the nesting is valid.
   `pointer-events: auto` here is critical — when the parent option
   card is the *unselected* card (one-time mode), JS suppresses card
   click via stopPropagation, but we want the trigger itself to still
   open the popover. */
.hvn-freq-trigger {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  /* Fixed width — matches the popover width so the popover opens flush
     below the trigger without horizontal jumps. */
  width: 200px;
  height: 32px;
  padding: 0 12px;
  /* Transparent — inherits the option card's per-theme bg (var(--theme-100)
     via the card's background) so the trigger reads as part of the card,
     not a competing surface. Also dodges hardcoding a per-theme color. */
  background: transparent;
  border: 1px solid var(--theme-400);
  border-radius: 6px;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
  color: var(--theme-900);
  /* Neutralize parent option-subtitle's uppercase + letter-spacing — the pill
     reads as a control, not the subtitle text it replaces. */
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.hvn-freq-trigger:hover {
  border-color: var(--theme-700);
}
.hvn-freq-trigger:focus-visible {
  outline: none;
  border-color: var(--theme-700);
  box-shadow: 0 0 0 2px rgba(98, 110, 139, 0.18);
}
.hvn-freq-trigger[aria-expanded="true"] {
  border-color: var(--theme-700);
}
.hvn-freq-trigger__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hvn-freq-trigger__chev {
  flex-shrink: 0;
  color: var(--theme-700);
  transition: transform 0.18s ease;
}
.hvn-freq-trigger[aria-expanded="true"] .hvn-freq-trigger__chev {
  transform: rotate(180deg);
}

/* ── Frequency trigger: badge variant ────────────────────────────
   Used in the sticky footer (inside the Subscribe pill) — small,
   shale-tinted, content-sized. Mirrors the cart's frequency badge so
   the affordance reads the same across surfaces. Overrides the default
   200px-wide trigger styles. */
.hvn-freq-trigger--badge {
  width: auto;
  height: auto;
  padding: 1px 6px;
  gap: 4px;
  background: #dddee2; /* shale/100 */
  color: #2a2d37;       /* shale/800 */
  border: 0;
  border-radius: 3px;
  font-size: 11px;
  line-height: 16px;
}
.hvn-freq-trigger--badge:hover {
  background: #c8cbd3;
  border-color: transparent;
}
.hvn-freq-trigger--badge:focus-visible {
  background: #c8cbd3;
  border-color: transparent;
  box-shadow: 0 0 0 2px rgba(84, 90, 109, 0.25);
}
.hvn-freq-trigger--badge[aria-expanded="true"] {
  background: #c8cbd3;
  border-color: transparent;
}
.hvn-freq-trigger--badge .hvn-freq-trigger__chev {
  color: #545a6d; /* shale/base */
}

/* Hide the sticky frequency badge when One-Time is the active buy mode —
   no plan to pick when the user isn't subscribing. The data-buy-mode
   attr lives on the section root (set by renderMode in JS). */
.product-hero[data-buy-mode="onetime"] .hvn-freq-trigger--badge {
  display: none;
}

/* ── Frequency popover (custom dropdown menu) ──────────────────
   Position is `fixed` and computed in JS at open time
   (getBoundingClientRect of trigger). This frees the popover from any
   ancestor's `overflow:hidden`/scrolling — important for the sticky
   footer trigger, whose parent pill clips its overflow.
   Width is also set in JS to match the trigger's width so opening
   feels like the trigger expanded into a list. */
.hvn-freq-popover {
  position: fixed;
  z-index: 9999;
  padding: 6px;
  background: var(--ivory-100, #fefefd);
  border: 1px solid var(--theme-400);
  border-radius: 8px;
  box-shadow: 0 10px 24px -8px rgba(42, 45, 55, 0.18);
  display: none;
  flex-direction: column;
  gap: 2px;
  font-family: 'Lexend Deca', sans-serif;
}
.hvn-freq-popover.is-open {
  display: flex;
}
.hvn-freq-popover__item {
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 8px 12px;
  border-radius: 6px;
  font-family: inherit;
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: var(--theme-900);
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.hvn-freq-popover__item:hover,
.hvn-freq-popover__item:focus-visible {
  outline: none;
  background: var(--theme-100);
}
.hvn-freq-popover__item.is-active {
  background: var(--theme-100);
  font-weight: 500;
}

.product-hero__options-or {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--shale-900, #1c1e24);
}
.product-hero__options-or::before,
.product-hero__options-or::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--theme-400);
}
.product-hero__options-or span {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--shale-900, #1c1e24);
  white-space: nowrap;
}

/* Segmented ATC bar — [qty stepper] | [Add to Cart · $total] */
.product-hero__atc-bar {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 56px;
  background: var(--theme-700);
  border: 1px solid var(--theme-700);
  border-radius: 8px;
  overflow: hidden;
  color: var(--theme-100);
}

.product-hero__atc-qty {
  display: flex;
  align-items: center;
  padding: 0 6px;
  flex: 0 0 auto;
}

.product-hero__atc-qty-btn {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: var(--theme-100);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.product-hero__atc-qty-btn:hover { background: rgba(255, 255, 255, 0.12); }
.product-hero__atc-qty-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.product-hero__atc-qty-value {
  min-width: 24px;
  text-align: center;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 24px;
  color: var(--theme-100);
  font-variant-numeric: tabular-nums;
}

.product-hero__atc-divider {
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
  flex: 0 0 auto;
}

.product-hero__atc-cta {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 24px;
  border: 0;
  background: transparent;
  color: var(--theme-100);
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 1.4px;
  text-transform: capitalize;
  cursor: pointer;
  transition: background 0.15s ease;
}
.product-hero__atc-cta:hover { background: rgba(255, 255, 255, 0.1); }

.product-hero__atc-dot {
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.5;
  flex: 0 0 auto;
}

.product-hero__atc-total {
  font-variant-numeric: tabular-nums;
  text-transform: none;
}

.product-hero__disclaimer {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 300;
  font-size: 10px;
  line-height: 16px;
  color: var(--theme-700);
  margin: 0;
}

/* ── Column 2: Gallery ──────────────────────────────────── */
.product-hero__col--gallery {
  /* Thumbs sit directly under the main image at every width —
     letting the flex column grow taller than the image would
     strand the thumbnails at the bottom of the column. */
  justify-content: flex-start;
}

.product-hero__main-image {
  /* Fixed square aspect ratio so every product renders at the same visible
     size regardless of source image dimensions. object-fit: contain lets
     varied source ratios (square peptide renders vs. wide supplement bottles)
     fit inside without cropping or distortion. */
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.product-hero__main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-hero__thumbs {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  width: 100%;
}

.product-hero__thumb {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--shale-300);
  background: var(--ivory-100);
  cursor: pointer;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease;
}
.product-hero__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-hero__thumb.is-active { border-color: var(--shale-base); }
.product-hero__thumb:hover { border-color: var(--shale-base); }

/* ── Column 3: Tagline + Features Accordion ────────────── */
.product-hero__features-inner {
  display: flex;
  flex-direction: column;
  gap: 96px;
  width: 100%;
}

.product-hero__tagline {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--theme-700);
  margin: 0;
}

.product-hero__accordion {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.product-hero__feature {
  border-bottom: 1px solid var(--theme-400);
  display: flex;
  flex-direction: column;
}

.product-hero__feature-header {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 16px 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--theme-900);
}

.product-hero__feature-title {
  flex: 1 0 0;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--theme-900);
}

.product-hero__feature-icon {
  width: 24px;
  height: 24px;
  color: var(--theme-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Flip + to − when open */
.product-hero__feature.is-open .product-hero__icon-v {
  display: none;
}

.product-hero__feature-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, padding 0.25s ease;
  padding-right: 32px;
}
.product-hero__feature-body p {
  margin: 0 0 16px 0;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 24px;
  color: var(--theme-700);
}
.product-hero__feature.is-open .product-hero__feature-body {
  max-height: 400px;
}

/* ── Desktop back-link positioning ──────────────────────────────
   On desktop the back link sits absolute-positioned in the section's
   top padding zone. Math: link is ~24px tall (14px/24px text with
   16px icon, inline-flex). To leave a clean 24px breathing gap
   between the link's bottom edge and the title's top edge (which
   sits at the content boundary = section padding edge when content
   fills the column), the link bottom must be 24px above that edge.
   For a 96px-padded section: link bottom at y=72, link top at y=48.

   `left` tracks the inner column container's left edge. The inner has
   `max-width: 1728px; margin: 0 auto;`, so above ~1920px viewport it
   gets centered and its left edge sits at `50% - 864px`. Below that
   the inner is full-width and its left edge sits at the section's
   96px padding. `max(96px, calc(50% - 864px))` clamps to whichever
   is greater so the back link stays aligned with the leftmost column
   at every viewport instead of drifting left on wide displays. */
@media (min-width: 1101px) {
  .product-hero__back-link {
    position: absolute;
    top: 48px;   /* link bottom (≈ y=72) sits 24px above content boundary (y=96) */
    left: max(96px, calc(50% - 864px));
    margin-bottom: 0;
  }
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1200px) {
  .product-hero { padding: 64px; }
  .product-hero__inner { gap: 48px; }
  .product-hero__title { font-size: 48px; line-height: 56px; }
  .product-hero__features-inner { gap: 48px; }
}

/* Adjusted absolute coords to match the smaller 64px padding tier.
   Same math as above: link bottom 24px above content boundary.
   For 64px padding: link bottom at y=40, link top at y=16. */
@media (min-width: 1101px) and (max-width: 1200px) {
  .product-hero__back-link {
    top: 16px;  /* link bottom (≈ y=40) sits 24px above content boundary (y=64) */
    left: 64px;
  }
}

@media (max-width: 540px) {
  .product-hero__atc-dot,
  .product-hero__atc-total { display: none; }
  .product-hero__atc-cta { gap: 0; }
}

@media (max-width: 1100px) {
  .product-hero { padding: 32px 24px; min-height: 0; }
  .product-hero__inner {
    flex-direction: column;
    gap: 32px;
    min-height: 0;
  }
  .product-hero__col--gallery {
    flex: 0 0 auto;
    width: 100%;
    order: -1;
  }
  .product-hero__main-image {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 4 / 5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .product-hero__main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .product-hero__thumbs { justify-content: flex-start; }
  .product-hero__title { font-size: 40px; line-height: 48px; }
  .product-hero__features-inner { gap: 32px; }
}

/* ── Sticky ATC footer (mobile + desktop) ───────────────────────
   Position + visibility driven by inline styles set in JS (see
   main_product/index.liquid). Mirrors the main page's buy controls
   (subscribe/one-time toggle + qty stepper + ATC button).
   Appears once the hero section is out of view at any viewport size. */
.product-hero__sticky-atc {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 40;
  background: #fefefd; /* ivory/100 */
  border-top: 1px solid #dbe1ef; /* glacier/200 */
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
}
/* Mobile: stacked toggle + ATC bar, narrow centered container */
.product-hero__sticky-atc-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  max-width: 640px;
  margin: 0 auto;
}
/* Desktop: toggle on the left, ATC bar on the right, side-by-side */
@media (min-width: 901px) {
  .product-hero__sticky-atc-inner {
    flex-direction: row;
    align-items: center;
    gap: 24px;
    padding: 12px 32px;
    max-width: 1248px;
  }
  .product-hero__sticky-toggle {
    /* Hug content. Was max-width: 420px before pills sized to content; that
       cap could clip the wider Subscribe pill (label + freq badge + price).
       Plenty of room in the 1248px container even unconstrained. */
    flex: 0 0 auto;
  }
  .product-hero__sticky-atc-bar {
    flex: 1 1 auto;
    max-width: 480px;
    margin-left: auto; /* push ATC bar to the right edge */
  }
}

/* ── Subscribe / One-Time toggle (compact pills) ──────────────── */
/* Mobile default: pills stack vertically so the Subscribe pill (now containing
   a frequency badge alongside the label + price) has full row width and never
   truncates. Desktop override below switches to a horizontal row where each
   pill hugs its own content. */
.product-hero__sticky-toggle {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.product-hero__sticky-toggle-opt {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  /* flex-start (not space-between) so the label + freq badge stay flush
     against each other on the left. The price uses margin-left: auto to
     push to the right edge, leaving the badge trailing the label rather
     than floating in the dead center of a wide mobile pill. */
  justify-content: flex-start;
  gap: 8px;
  padding: 8px 12px;
  height: 44px;
  background: #fff;
  border: 1px solid #dbe1ef; /* glacier/200 */
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-family: 'Lexend Deca', sans-serif;
  box-sizing: border-box;
  min-width: 0;
}
/* Desktop: row layout, each pill hugs its content. The Subscribe pill is
   wider (label + frequency badge + price) than the One-Time pill (label +
   price only). flex: 0 0 auto + width: auto lets each pill be its natural
   content width — no truncation, no equal-share squashing. */
@media (min-width: 901px) {
  .product-hero__sticky-toggle {
    flex-direction: row;
    width: auto;
  }
  .product-hero__sticky-toggle-opt {
    flex: 0 0 auto;
    width: auto;
  }
}
.product-hero__sticky-toggle-opt:hover {
  border-color: var(--theme-700, #626e8b);
}
.product-hero__sticky-toggle-opt.is-selected {
  background: var(--theme-100, #e9edf6);
  border-color: var(--theme-700, #626e8b);
  border-width: 2px;
  padding: 7px 11px; /* compensate for 2px border */
}
.product-hero__sticky-toggle-label {
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: var(--theme-900, #313745);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-hero__sticky-toggle-opt.is-selected .product-hero__sticky-toggle-label {
  font-weight: 500;
}
.product-hero__sticky-toggle-price {
  /* margin-left: auto pushes the price to the right edge of the pill,
     while the label + frequency badge stay flush left as a group. On
     content-sized desktop pills this is a no-op (no extra space to
     consume); on full-width mobile pills it prevents the price from
     squashing toward the center. */
  margin-left: auto;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: var(--theme-700, #626e8b);
  white-space: nowrap;
  flex-shrink: 0;
}
.product-hero__sticky-toggle-opt.is-selected .product-hero__sticky-toggle-price {
  font-weight: 500;
  color: var(--theme-900, #313745);
}

/* ── ATC bar (qty stepper + Add To Cart) — mirrors main page ─── */
.product-hero__sticky-atc-bar {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 48px;
  background: var(--theme-700, #626e8b);
  border-radius: 8px;
  overflow: hidden;
  color: var(--theme-100, #e9edf6);
}
.product-hero__sticky-qty {
  display: flex;
  align-items: center;
  padding: 0 4px;
  flex: 0 0 auto;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.product-hero__sticky-qty-btn {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--theme-100, #e9edf6);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.product-hero__sticky-qty-btn:hover { background: rgba(255, 255, 255, 0.12); }
.product-hero__sticky-qty-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.product-hero__sticky-qty-value {
  min-width: 24px;
  text-align: center;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--theme-100, #e9edf6);
  font-variant-numeric: tabular-nums;
}
.product-hero__sticky-cta {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--theme-100, #e9edf6);
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 1.4px;
  text-transform: capitalize;
  cursor: pointer;
  transition: background 0.15s ease;
}
.product-hero__sticky-cta:hover { background: rgba(255, 255, 255, 0.1); }
.product-hero__sticky-cta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
  flex-shrink: 0;
}
.product-hero__sticky-cta-total {
  font-variant-numeric: tabular-nums;
}