/* One viewport campaign, followed by the shopping journey. */
:root { --masthead-height: 126px; scroll-padding-top: calc(var(--masthead-height) + 20px); }
.site-masthead { position: sticky; top: 0; z-index: 10; height: var(--masthead-height); pointer-events: none; --announcement-height: 34px; --nav-scale: .73913; --compact-nav-height: 68px; }
.masthead-surface { position: absolute; inset: 0 0 auto; isolation: isolate; pointer-events: auto; }
.masthead-surface::before { content: ''; position: absolute; top: var(--announcement-height); left: 0; right: 0; height: calc(var(--masthead-height) - var(--announcement-height)); background: var(--carbon); transform-origin: top; transition: transform .26s var(--ease); z-index: -1; }
.masthead-surface .site-header { background: transparent; }
.mobile-nav { background: var(--carbon); }
.site-masthead.is-compact .header-inner { height: var(--compact-nav-height); }
.site-masthead.is-compact .masthead-surface::before { transform: scaleY(var(--nav-scale)); }
.brand { transition: scale .26s var(--ease); transform-origin: left center; }
.site-masthead.is-compact .brand { scale: .92; }
html.lenis { scroll-behavior: auto !important; }
.hero-inner { height: calc(100svh - var(--masthead-height)); min-height: 0; }
.hero-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-block: 24px; }
.hero h1 { font-size: clamp(3rem, min(7.1vw, 12svh), 6rem); }
.hero h1 .hero-line { display: block; color: var(--paper); }
.hero h1 .hero-line-accent { color: var(--yellow); }
.hero-copy > p { margin-block: clamp(12px, 3svh, 28px); }
.hero-footnote { margin-top: clamp(16px, 5svh, 50px); }
.hero-whey { height: 96%; top: 0; animation: none; }
.hero-mass { height: 79%; top: 5%; animation: none; }
.stage-field { animation: none; }
.stage-label { bottom: 12%; }
.gummy-photo, .mindset-photo { overflow: hidden; }
.button:active, .quick-add:active, .icon-button:active, .bag-button:active { scale: .97; }
.button, .quick-add, .icon-button, .bag-button { transition: background .2s, color .2s, scale .15s var(--ease), translate .2s var(--ease); }
@media (hover:hover) and (pointer:fine) {
  :is(.button, .quick-add, .icon-button, .bag-button):hover:not(:disabled):not(:active) { translate: 0 -2px; }
}
:is(.button, .quick-add, .icon-button, .bag-button):focus-visible { translate: 0 -2px; }
.product-image .product-alternate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--white); opacity: 0; mix-blend-mode: normal; transform: none; transition: opacity .3s var(--ease); pointer-events: none; }
@media (hover:hover) and (pointer:fine) {
  .has-alternate-ready .product-open:hover .product-alternate { opacity: 1; }
}
.has-alternate-ready .product-open:focus-visible .product-alternate { opacity: 1; }
.card-added { position: absolute; bottom: 22px; right: 62px; padding: 6px 9px; background: var(--paper); font-size: 10px; font-weight: 800; opacity: 0; transform: translateX(6px); pointer-events: none; transition: opacity .15s, transform .2s var(--ease); }
.product-image:has(.quick-add[data-added]) .card-added { opacity: 1; transform: none; }
[data-added] { background: var(--yellow); color: var(--carbon); }
.button[data-added], .button[data-added]:hover { background: var(--yellow); color: var(--carbon); }
.quick-purchase .button { transition: scale .15s var(--ease), translate .2s var(--ease); }
.toast[popover] { inset: auto auto 25px 50%; margin: 0; border: 0; overflow: visible; }
.toast::backdrop { background: transparent; pointer-events: none; }
.bag-flight { position: fixed; inset: 0 auto auto 0; margin: 0; width: 64px; height: 80px; max-width: none; max-height: none; padding: 0; border: 0; background: transparent; object-fit: contain; filter: drop-shadow(0 8px 8px #17171535); pointer-events: none; }
.bag-flight::backdrop { background: transparent; pointer-events: none; }
.quick-toolbar { position: sticky; top: 0; z-index: 3; min-height: 62px; padding: 9px 16px; display: flex; justify-content: space-between; align-items: center; background: var(--paper); border-bottom: 1px solid var(--line); }
.quick-toolbar .dialog-close { position: static; }
.quick-bag-button { font-size: 11px; font-weight: 700; }
.quick-image { position: relative; overflow: hidden; }
.quick-gallery-image { transition: opacity .28s var(--ease); }
.quick-image .quick-gallery-alternate { position: absolute; inset: 26px; width: calc(100% - 52px); height: calc(100% - 52px); max-height: none; opacity: 0; mix-blend-mode: normal; object-fit: contain; }
.quick-image[data-view="alternate"] .quick-gallery-image { opacity: 0; }
.quick-image[data-view="alternate"] .quick-gallery-alternate { opacity: 1; }
.gallery-views { position: absolute; z-index: 1; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 5px; padding: 4px; background: var(--paper); box-shadow: 0 6px 18px #17171515; white-space: nowrap; }
.gallery-views button { min-height: 38px; padding: 8px 11px; background: transparent; font-size: 10px; font-weight: 700; transition: background .15s; }
.gallery-views button[aria-pressed="true"] { background: var(--carbon); color: var(--paper); }
.gallery-views button:hover:not([aria-pressed="true"]):not(:disabled) { background: var(--yellow); }
.flavour-picker { position: fixed; inset: auto; width: min(320px,calc(100vw - 24px)); margin: 0; padding: 20px; border: 0; border-radius: 8px; background: var(--paper); color: var(--carbon); box-shadow: 0 12px 40px #17171538; }
.flavour-picker h3 { padding-right: 35px; font-size: 28px; line-height: 1; }
.flavour-picker > p { margin: 9px 0 14px; font-size: 11px; color: var(--muted); }
.flavour-picker .icon-button { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; }
.flavour-options { display: grid; gap: 6px; }
.flavour-option { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 46px; padding: 10px 12px; background: #ecebe5; text-align: left; font-size: 12px; font-weight: 700; transition: background .15s; }
.flavour-option:hover, .flavour-option:focus-visible { background: var(--yellow); }
.flavour-option .icon { width: 18px; height: 18px; }
.format-strip .icon, .text-link .icon, .routine-links .icon, .closing-banner .icon { transition: transform .25s var(--ease); }
.format-strip a:hover .icon, .text-link:hover .icon, .routine-links a:hover .icon, .closing-banner a:hover .icon { transform: translate(3px, -3px); }
dialog { --veil-opacity: 1; }
dialog::backdrop { opacity: var(--veil-opacity); transition: opacity .22s ease-out; }
dialog[data-closing]::backdrop { opacity: 0; }
@starting-style { dialog[open]::backdrop { opacity: 0; } }
@media (max-width:800px) {
  :root { --masthead-height: 114px; }
  .site-masthead { --nav-scale: .8; --compact-nav-height: 64px; }
  .hero h1 { font-size: clamp(3rem, min(8.4vw, 12svh), 4.5rem); }
}
@media (max-width:600px) {
  :root { --masthead-height: 102px; }
  .site-masthead { --announcement-height: 30px; --nav-scale: .83333; --compact-nav-height: 60px; }
  .toast[popover] { bottom: 16px; }
  .product-dialog { width: 100%; max-width: 100%; max-height: calc(100dvh - 18px); margin: auto 0 0; border-radius: 14px 14px 0 0; }
  .quick-toolbar { min-height: 58px; padding-inline: 20px; }
  .quick-image .quick-gallery-alternate { inset: 12px 20px 45px; width: calc(100% - 40px); height: calc(100% - 57px); }
  .quick-image .quick-gallery-image { max-height: 178px; margin-bottom: 34px; }
  .gallery-views { bottom: 8px; }
  .gallery-views button { min-height: 32px; font-size: 9px; }
  .hero-inner { height: calc(100svh - var(--masthead-height)); display: grid; grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); }
  .hero-copy { padding: clamp(16px, 3svh, 30px) 24px 22px; }
  .hero h1 { font-size: clamp(2.9rem, min(15vw, 8.6svh), 4.4rem); }
  .hero-copy > p { margin-block: 13px 16px; font-size: 12px; line-height: 1.65; max-width: 330px; }
  .hero-secondary { margin-top: 12px; }
  .product-stage { min-height: 0; }
  .hero-whey { height: 112%; width: 80%; top: -10%; left: -2%; }
  .hero-mass { height: 95%; width: 65%; top: -3%; right: -7%; }
  .stage-word { font-size: clamp(3rem, 10svh, 5.5rem); }
  .stage-label { bottom: 32px; padding: 10px 12px; }
  .stage-label strong { font-size: 20px; }
  .stage-caption { bottom: 12px; }
}
@media (max-height:640px) and (min-width:601px) {
  .hero-copy { padding-block: 15px; }
  .hero-copy > p { margin-block: 10px; font-size: 11px; }
  .hero-copy .button { min-height: 42px; padding-block: 10px; }
  .hero-secondary { margin-top: 10px; }
  .hero-footnote { display: none; }
  .stage-word { font-size: 4rem; }
}
@media (max-height:600px) and (max-width:600px) {
  .hero-copy { padding-block: 13px 16px; }
  .hero h1 { font-size: 2.9rem; }
  .hero-copy > p { margin-block: 10px; font-size: 11px; }
  .hero-copy .button { min-height: 42px; padding-block: 10px; }
  .hero-secondary { margin-top: 10px; }
  .stage-label { bottom: 27px; }
}
/* At browser zoom / exceptionally short screens, keep all copy reachable. */
@media (max-height:450px) { .hero-inner { height: auto; min-height: 350px; } .product-stage { min-height: 240px; } }
@media (prefers-reduced-motion: reduce) {
  dialog::backdrop { transition: none; }
  :is(.button, .quick-add, .icon-button, .bag-button):hover, :is(.button, .quick-add, .icon-button, .bag-button):focus-visible { translate: none; }
  .button:active, .quick-add:active, .icon-button:active, .bag-button:active { scale: 1; }
  .product-image:hover img, .button:hover .icon, .format-strip a:hover .icon, .text-link:hover .icon, .routine-links a:hover .icon, .closing-banner a:hover .icon { transform: none; }
}