/* xalt-v2.css */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("./xalt-bricolage-grotesque-latin.woff2") format("woff2");
}

/* Instrument Sans is the clean commerce/editorial heading face. The noindex
   preview uses the project CDN build; self-host the OFL webfont before launch. */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("./xalt-instrument-sans-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Glofium Preview";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("./xalt-glofium-preview-only.woff2") format("woff2");
  unicode-range: U+0030-0039, U+0041-005A, U+0061-007A;
}

@font-face {
  font-family: "Host Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: block;
  src: url("./xalt-host-grotesk-latin.woff2") format("woff2");
}

:root {
  --v2-red: #ed3024;
  --v2-red-deep: #d4241a;
  --v2-purple: #5a35aa;
  --v2-lime: #d9ff54;
  --v2-blue: #bfe7f1;
  --v2-paper: #f5f1e8;
  --v2-white: #fffefa;
  --v2-ink: #181817;
  --v2-muted: #64635e;
  --v2-line: rgba(24, 24, 23, 0.16);
  /* Fluid through large desktop displays, then capped so editorial lines and
     commerce controls never become uncomfortably wide on 4K screens. */
  --v2-shell: min(1920px, calc(100vw - clamp(64px, 6vw, 180px)));
  --v2-radius-card: 22px;
  /* Shopper hierarchy: choices are compact rounded rectangles; only primary
     actions use the full pill silhouette. Keep the legacy control alias on
     the action radius so existing CTAs do not silently change shape. */
  --v2-radius-selection: 14px;
  --v2-radius-action: 999px;
  --v2-radius-control: var(--v2-radius-action);
  --v2-heading-clean: "Instrument Sans", "Host Grotesk", sans-serif;
  --v2-brand-display: "Bricolage Grotesque", "Host Grotesk", sans-serif;
  --v2-display: var(--v2-heading-clean);
  --v2-body: "Host Grotesk", Arial, sans-serif;
  --v2-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --v2-layer-header: 30;
  --v2-layer-menu: 40;
  --v2-layer-dialog: 50;
}

* {
  box-sizing: border-box;
}

.preview-v2 [hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  background: var(--v2-paper);
}

body.preview-v2 {
  margin: 0;
  overflow-x: clip;
  color: var(--v2-ink);
  background: var(--v2-paper);
  font-family: var(--v2-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.preview-v2[data-v2-font="glofium"] {
  --v2-brand-display: "Glofium Preview", "Host Grotesk", sans-serif;
}

body.preview-v2[data-v2-font="glofium"] .v2-display,
body.preview-v2[data-v2-font="glofium"] .v2-footer__wordmark,
body.preview-v2[data-v2-font="glofium"] .v2-mobile-menu nav a {
  font-weight: 400;
  letter-spacing: 0.008em;
  line-height: 1.06;
}

body.preview-v2[data-v2-font="glofium"] .v2-display--hero {
  max-width: 1080px;
  font-size: clamp(54px, 6.3vw, 90px);
  letter-spacing: 0.015em;
  line-height: 1.08;
}

body.preview-v2[data-v2-font="glofium"] .v2-hero__content {
  width: min(1080px, 86vw);
}

body.preview-v2[data-v2-font="glofium"] .v2-display--xl {
  font-size: clamp(46px, 5.8vw, 82px);
}

body.preview-v2[data-v2-font="glofium"] .v2-display--lg {
  font-size: clamp(38px, 4.6vw, 64px);
}

body.preview-v2[data-v2-font="glofium"] .v2-display--md {
  font-size: clamp(31px, 3.5vw, 50px);
}

body.preview-v2[data-v2-font="glofium"] .v2-display--sm {
  font-size: clamp(24px, 2.25vw, 33px);
  line-height: 1.02;
}

.preview-v2 img,
.preview-v2 video {
  display: block;
  max-width: 100%;
}

.preview-v2 a {
  color: inherit;
}

.preview-v2 button,
.preview-v2 input {
  font: inherit;
}

.v2-skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 14px;
  color: var(--v2-white);
  background: var(--v2-ink);
  transform: translateY(-160%);
}

.v2-skip:focus {
  transform: translateY(0);
}

.v2-preview-note {
  min-height: 32px;
  display: grid;
  place-items: center;
  padding: 6px 24px;
  color: var(--v2-ink);
  background: var(--v2-red);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.11em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
}

.v2-font-switcher {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: calc(var(--v2-layer-dialog) - 1);
  display: grid;
  grid-template-columns: auto auto;
  gap: 3px;
  border: 1px solid rgba(24, 24, 23, 0.22);
  border-radius: var(--v2-radius-control);
  padding: 4px;
  color: var(--v2-ink);
  background: rgba(255, 254, 250, 0.94);
  box-shadow: 0 10px 36px rgba(24, 24, 23, 0.14);
  backdrop-filter: blur(14px);
}

.v2-font-switcher button {
  min-height: 34px;
  border: 0;
  border-radius: var(--v2-radius-control);
  padding: 7px 12px;
  color: inherit;
  background: transparent;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.v2-font-switcher button[aria-pressed="true"] {
  color: var(--v2-white);
  background: var(--v2-ink);
}

.v2-hero__motion-toggle {
  position: absolute;
  top: 116px;
  right: 24px;
  z-index: 3;
  border: 1px solid rgba(255, 255, 255, .64);
  border-radius: 999px;
  padding: 9px 13px;
  color: var(--v2-white);
  background: rgba(24, 24, 23, .22);
  backdrop-filter: blur(10px);
  font: 800 10px/1 var(--v2-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.v2-shell {
  width: var(--v2-shell);
  margin-inline: auto;
}

.v2-header {
  position: absolute;
  inset: 32px 0 auto;
  z-index: var(--v2-layer-header);
  height: 72px;
  color: var(--v2-white);
  transition: color 260ms ease, background-color 260ms ease, box-shadow 260ms ease;
}

.v2-header.is-inner,
.v2-header.is-solid {
  position: sticky;
  inset: 0 0 auto;
  color: var(--v2-ink);
  background: rgba(255, 254, 250, 0.94);
  box-shadow: 0 1px 0 var(--v2-line);
  backdrop-filter: blur(16px);
}

.v2-header.is-solid {
  position: fixed;
  top: 0;
}

.v2-header__inner {
  width: var(--v2-shell);
  height: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 150px 1fr auto;
  align-items: center;
  gap: 28px;
}

.v2-logo {
  width: 106px;
  line-height: 0;
}

.v2-logo img {
  width: 106px;
  height: auto;
}

.preview-v2 .v2-logo__dark {
  display: none;
}

.v2-header.is-inner .v2-logo__light,
.v2-header.is-solid .v2-logo__light {
  display: none;
}

.v2-header.is-inner .v2-logo__dark,
.v2-header.is-solid .v2-logo__dark {
  display: block;
}

.v2-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.4vw, 38px);
}

.v2-nav a,
.v2-header-actions button,
.v2-header-actions a {
  position: relative;
  border: 0;
  padding: 8px 0;
  color: inherit;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.v2-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 260ms var(--v2-ease);
}

.v2-nav a:hover::after,
.v2-nav a:focus-visible::after,
.v2-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.v2-header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.v2-bag-count {
  display: inline-grid;
  width: 22px;
  height: 22px;
  margin-left: 4px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
}

.v2-menu-toggle {
  display: none;
}

.v2-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--v2-layer-menu);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 28px;
  color: var(--v2-ink);
  background: var(--v2-red);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-16px);
  transition: opacity 260ms ease, transform 360ms var(--v2-ease);
}

.v2-mobile-menu[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.v2-mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.v2-mobile-menu__head img {
  width: 108px;
}

.v2-mobile-menu__close {
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: var(--v2-radius-control);
  padding: 9px 14px;
  color: inherit;
  background: transparent;
}

.v2-mobile-menu nav {
  align-self: center;
  display: grid;
  gap: 8px;
}

.v2-mobile-menu nav a {
  font-family: var(--v2-display);
  font-size: clamp(40px, 12vw, 70px);
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.05em;
  text-decoration: none;
}

.v2-mobile-menu__foot {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.34);
  padding-top: 18px;
  font-size: 13px;
}

.v2-hero {
  position: relative;
  min-height: calc(100svh - 32px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--v2-white);
  background: #2d6570;
}

.v2-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(12, 25, 28, 0.72) 0%, rgba(12, 25, 28, 0.18) 58%, rgba(12, 25, 28, 0.08) 100%),
    linear-gradient(0deg, rgba(12, 25, 28, 0.34), transparent 42%);
}

.v2-hero video,
.v2-hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.v2-hero video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v2-hero__poster {
  display: none;
  object-fit: cover;
}

@media (max-width: 820px) {
  .v2-hero video {
    display: none;
  }

  .v2-hero__poster {
    display: block;
  }
}

/* Shop sachet scale and flavour marquee */
.v3-product-card--sachet .v3-product-card__media {
  isolation: isolate;
}

.v3-product-card--sachet .v3-product-card__media::after {
  content: none;
}

.v3-product-card--sachet .v3-product-card__media img {
  z-index: 2;
  width: min(70%, 460px);
  max-height: 470px;
  transform: rotate(-3deg) scale(1.04);
  transform-origin: center;
  transition: transform 650ms var(--v2-ease), filter 650ms var(--v2-ease);
}

.v3-flavour-marquee {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;
  width: max-content;
  display: flex;
  align-items: center;
  gap: clamp(34px, 4vw, 72px);
  color: rgba(255, 253, 248, 0.42);
  font-family: var(--v2-display);
  font-size: clamp(74px, 9vw, 140px);
  font-weight: 760;
  letter-spacing: 0.035em;
  line-height: 0.9;
  white-space: nowrap;
  transform: translate3d(-8%, -50%, 0);
  will-change: transform;
}

.v3-product-card--sachet:hover .v3-product-card__media img,
.v3-product-card--sachet:focus-visible .v3-product-card__media img {
  filter: drop-shadow(0 40px 34px rgba(40, 14, 13, 0.3));
  transform: rotate(-1deg) scale(1.13);
}

.v3-product-card--sachet:hover .v3-flavour-marquee,
.v3-product-card--sachet:focus-visible .v3-flavour-marquee {
  animation: v3-flavour-loop 8s linear infinite;
}

@keyframes v3-flavour-loop {
  from { transform: translate3d(-8%, -50%, 0); }
  to { transform: translate3d(-33%, -50%, 0); }
}

@media (max-width: 820px) {
  .v3-product-card--sachet .v3-product-card__media img {
    width: min(78%, 330px);
    max-height: 350px;
  }

  .v3-flavour-marquee {
    gap: 28px;
    font-size: clamp(58px, 20vw, 92px);
    letter-spacing: 0.04em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v3-product-card--sachet:hover .v3-flavour-marquee,
  .v3-product-card--sachet:focus-visible .v3-flavour-marquee {
    animation: none;
  }
}

/* V4 Shop scale and product-world motion */
body.preview-v2[data-v2-font="glofium"] .v2-display--hero { font-size: clamp(52px, 5.9vw, 84px); }
body.preview-v2[data-v2-font="glofium"] .v2-display--xl { font-size: clamp(44px, 5.1vw, 72px); }
body.preview-v2[data-v2-font="glofium"] .v2-display--lg { font-size: clamp(36px, 4.15vw, 58px); }
body.preview-v2[data-v2-font="glofium"] .v2-display--md { font-size: clamp(30px, 3.2vw, 45px); }
body.preview-v2[data-v2-font="glofium"] .v2-display--sm { font-size: clamp(22px, 2.15vw, 31px); }

.v2-shop-hero {
  min-height: clamp(430px, 58vh, 620px);
  display: flex;
  align-items: flex-end;
  padding-top: clamp(150px, 17vh, 210px);
  color: #fff;
  background: var(--v2-red);
}

.v2-shop-hero .v2-display {
  max-width: 12ch;
}

.v2-shop-hero .v2-lead {
  color: rgba(255, 255, 255, 0.84);
}

.v3-shop-range__grid {
  max-width: 1180px;
  margin-inline: auto;
  gap: 22px;
}

.v3-product-card {
  min-height: 570px;
  border-radius: 20px;
}

.v3-product-card:nth-child(3),
.v3-product-card:nth-child(4) {
  min-height: 450px;
}

.v3-product-card__media {
  min-height: 320px;
}

.v3-product-card:nth-child(3) .v3-product-card__media,
.v3-product-card:nth-child(4) .v3-product-card__media {
  min-height: 260px;
}

.v3-product-card--sachet .v3-product-card__media img {
  width: min(62%, 380px);
  max-height: 390px;
}

.v3-flavour-marquee {
  font-size: clamp(68px, 7.6vw, 112px);
  animation: v3-flavour-loop 24s linear infinite;
}

.v3-product-card--sachet:hover .v3-flavour-marquee,
.v3-product-card--sachet:focus-visible .v3-flavour-marquee {
  animation-duration: 10s;
}

.v3-product-card__body {
  padding: clamp(22px, 2.4vw, 30px);
}

@media (max-width: 820px) {
  body.preview-v2[data-v2-font="glofium"] .v2-display--hero { font-size: clamp(40px, 10.8vw, 52px); }
  body.preview-v2[data-v2-font="glofium"] .v2-display--xl { font-size: clamp(36px, 9.5vw, 48px); }
  body.preview-v2[data-v2-font="glofium"] .v2-display--lg { font-size: clamp(31px, 8.2vw, 42px); }

  .v2-shop-hero {
    min-height: 430px;
    padding-top: 138px;
  }

  .v3-product-card,
  .v3-product-card:nth-child(3),
  .v3-product-card:nth-child(4) {
    min-height: 0;
  }

  .v3-product-card__media,
  .v3-product-card:nth-child(3) .v3-product-card__media,
  .v3-product-card:nth-child(4) .v3-product-card__media {
    min-height: 300px;
  }

  .v3-product-card--sachet .v3-product-card__media img {
    width: min(72%, 300px);
    max-height: 320px;
  }

  .v3-flavour-marquee {
    font-size: clamp(54px, 17vw, 82px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .v3-flavour-marquee,
  .v3-product-card--sachet:hover .v3-flavour-marquee,
  .v3-product-card--sachet:focus-visible .v3-flavour-marquee {
    animation: none;
  }
}

.v2-hero__content {
  position: relative;
  z-index: 1;
  width: min(900px, 74vw);
  padding: 150px 0 clamp(56px, 8vh, 92px);
}

.v2-kicker {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.v2-display {
  margin: 0;
  font-family: var(--v2-display);
  font-weight: 760;
  font-stretch: 92%;
  letter-spacing: -0.055em;
  line-height: 0.95;
  text-wrap: balance;
}

.v2-display--hero {
  max-width: 850px;
  font-size: clamp(62px, 8.5vw, 126px);
}

.v2-display--xl {
  font-size: clamp(48px, 7vw, 96px);
}

.v2-display--lg {
  font-size: clamp(42px, 5.6vw, 76px);
}

.v2-display--md {
  font-size: clamp(34px, 4vw, 58px);
}

.v2-display--sm {
  font-size: clamp(27px, 2.6vw, 38px);
  letter-spacing: -0.04em;
  line-height: 1;
}

.v2-lead {
  max-width: 57ch;
  margin: 22px 0 0;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.46;
  text-wrap: pretty;
}

.v2-hero .v2-lead {
  max-width: 580px;
}

.v2-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 30px;
}

.v2-button,
.v2-text-link {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--v2-radius-control);
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 220ms var(--v2-ease), background-color 220ms ease, color 220ms ease, border-color 220ms ease;
}

.preview-v2 .v2-button {
  color: var(--v2-ink);
  background: var(--v2-red);
}

.preview-v2 .v2-button--light {
  color: var(--v2-ink);
  background: var(--v2-white);
}

.preview-v2 .v2-button--ink {
  color: var(--v2-white);
  background: var(--v2-ink);
}

.preview-v2 .v2-button--outline {
  border-color: currentColor;
  color: currentColor;
  background: transparent;
}

.v2-button:hover,
.v2-button:focus-visible,
.v2-text-link:hover,
.v2-text-link:focus-visible {
  transform: translateY(-3px);
}

.v2-button:active,
.v2-text-link:active {
  transform: translateY(1px) scale(0.98);
}

.v2-text-link {
  min-height: auto;
  border-bottom-color: currentColor;
  border-radius: 0;
  padding: 8px 0 6px;
}

.v2-proof-rail {
  background: var(--v2-white);
}

.v2-proof-rail__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.v2-proof {
  min-height: 138px;
  padding: 30px clamp(20px, 3vw, 42px);
  border-right: 1px solid var(--v2-line);
}

.v2-proof:last-child {
  border-right: 0;
}

.v2-proof strong {
  display: block;
  margin-bottom: 2px;
  font-family: var(--v2-display);
  font-size: clamp(38px, 4.5vw, 66px);
  font-weight: 760;
  letter-spacing: -0.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.v2-section {
  padding-block: clamp(72px, 8vw, 112px);
}

.v2-section--tight {
  padding-block: clamp(58px, 7vw, 98px);
}

.v2-section-head {
  max-width: 780px;
  margin-bottom: clamp(42px, 6vw, 76px);
}

.v2-section-head .v2-lead {
  color: var(--v2-muted);
}

.v2-range {
  background: var(--v2-paper);
}

.v2-range-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.v2-range-card {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border-radius: var(--v2-radius-card);
  color: var(--v2-ink);
  background: var(--card-bg, var(--v2-blue));
  text-decoration: none;
  isolation: isolate;
}

.v2-range-card::before {
  content: attr(data-word);
  position: absolute;
  inset: auto -4% 4%;
  z-index: -1;
  color: rgba(255, 255, 255, 0.44);
  font-family: var(--v2-display);
  font-size: clamp(90px, 15vw, 210px);
  font-weight: 780;
  letter-spacing: -0.08em;
  line-height: 0.72;
  text-align: right;
  white-space: nowrap;
  transform: translateX(9%);
  transition: transform 700ms var(--v2-ease);
}

.v2-range-card:hover::before,
.v2-range-card:focus-visible::before {
  transform: translateX(0);
}

.v2-range-card--red {
  --card-bg: #f0665b;
}

.v2-range-card--purple {
  --card-bg: #7450bf;
  color: var(--v2-white);
}

.v2-range-card--lime {
  --card-bg: var(--v2-lime);
}

.v2-range-card--pool {
  --card-bg: #a8dbe4;
}

.v2-range-card__copy {
  position: absolute;
  inset: 28px 28px auto;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.v2-range-card__copy p {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.35;
}

.v2-range-card__hint {
  display: inline-grid;
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
  transition: color 260ms ease, background-color 260ms ease, transform 420ms var(--v2-ease);
}

.v2-range-card:hover .v2-range-card__hint,
.v2-range-card:focus-visible .v2-range-card__hint {
  color: var(--card-bg);
  background: currentColor;
  transform: rotate(8deg) scale(1.08);
}

.v2-range-card__media {
  position: absolute;
  inset: 90px 8% 8%;
  display: grid;
  place-items: center;
}

.v2-range-card__media img {
  max-width: 70%;
  max-height: 88%;
  object-fit: contain;
  filter: drop-shadow(0 28px 24px rgba(80, 28, 24, 0.2));
  transform: rotate(var(--card-rotate, -4deg)) translateY(7%);
  transition: transform 620ms var(--v2-ease), filter 300ms ease;
}

.v2-range-card:nth-child(even) .v2-range-card__media img {
  --card-rotate: 4deg;
}

.v2-range-card:hover .v2-range-card__media img,
.v2-range-card:focus-visible .v2-range-card__media img {
  transform: rotate(0) translateY(0) scale(1.06);
  filter: drop-shadow(0 34px 34px rgba(80, 28, 24, 0.26));
}

.v2-range-stack {
  position: relative;
  width: 70%;
  height: 90%;
}

.v2-range-stack img {
  position: absolute;
  inset: 0 auto 0 22%;
  width: auto;
  height: 100%;
}

.v2-range-stack img:last-child {
  transform: translateX(34%) rotate(7deg);
}

.v2-range-card:hover .v2-range-stack img:first-child,
.v2-range-card:focus-visible .v2-range-stack img:first-child {
  transform: translateX(-16%) rotate(-7deg);
}

.v2-range-card:hover .v2-range-stack img:last-child,
.v2-range-card:focus-visible .v2-range-stack img:last-child {
  transform: translateX(50%) rotate(10deg);
}

.v2-formula {
  background: var(--v2-white);
}

.v2-formula-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(44px, 8vw, 110px);
}

.v2-formula-media {
  min-height: 640px;
  overflow: hidden;
  border-radius: var(--v2-radius-card);
}

.v2-formula-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v2-reason-list {
  margin-top: 42px;
  display: grid;
  gap: 0;
}

.v2-reason {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 18px;
  padding: 24px 0;
  border-top: 1px solid var(--v2-line);
}

.v2-reason:last-child {
  border-bottom: 1px solid var(--v2-line);
}

.v2-reason strong {
  font-family: var(--v2-display);
  font-size: 25px;
}

.v2-reason h3,
.v2-reason p {
  margin: 0;
}

.v2-reason h3 {
  font-family: var(--v2-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.v2-reason p {
  max-width: 44ch;
  margin-top: 5px;
  color: var(--v2-muted);
  font-size: 16px;
}

.v2-subscribe {
  background: var(--v2-red);
}

.v2-subscribe-card {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  overflow: hidden;
  border-radius: var(--v2-radius-card);
  color: var(--v2-white);
  background: var(--v2-red-deep);
}

.v2-subscribe-card__media {
  min-height: 560px;
}

.v2-subscribe-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v2-subscribe-card__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 6vw, 86px);
}

.v2-subscribe-bits {
  margin: 34px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.v2-subscribe-bit {
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.42);
  font-size: 14px;
  line-height: 1.35;
}

.v2-moments {
  background: var(--v2-paper);
}

.v2-moment-track {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1fr;
  gap: 18px;
}

.v2-moment {
  min-width: 0;
}

.v2-moment__media {
  height: 460px;
  overflow: hidden;
  border-radius: var(--v2-radius-card);
}

.v2-moment:nth-child(2) .v2-moment__media {
  height: 380px;
  margin-top: 82px;
}

.v2-moment__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 560ms var(--v2-ease);
}

.v2-moment:hover img {
  transform: scale(1.04);
}

.v2-moment h3 {
  margin: 18px 0 5px;
  font-family: var(--v2-display);
  font-size: 28px;
  letter-spacing: -0.04em;
}

.v2-moment p {
  max-width: 36ch;
  margin: 0;
  color: var(--v2-muted);
  font-size: 15px;
}

.v2-community-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.v2-community-panel {
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(42px, 6vw, 88px);
  color: var(--v2-white);
  text-decoration: none;
  transition: padding 460ms var(--v2-ease);
}

.preview-v2 .v2-community-panel {
  color: var(--v2-white);
}

.v2-community-panel:hover,
.v2-community-panel:focus-visible {
  padding-left: clamp(52px, 7vw, 112px);
}

.v2-community-panel:first-child {
  background: #4b35d1;
}

.v2-community-panel:last-child {
  background: var(--v2-red);
}

.v2-community-panel:last-child {
  background: var(--v2-red-deep);
}

.v2-community-panel p {
  max-width: 38ch;
  margin: 16px 0 0;
}

.v2-community-panel__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
}

.v2-footer {
  overflow: hidden;
  color: var(--v2-white);
  background: var(--v2-ink);
}

.v2-footer__top {
  display: grid;
  grid-template-columns: 1.45fr repeat(3, 0.7fr);
  gap: clamp(34px, 5vw, 82px);
  padding: clamp(70px, 9vw, 126px) 0 52px;
}

.v2-footer__brand img {
  width: 112px;
}

.v2-footer__brand p {
  max-width: 37ch;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.7);
}

.v2-footer h2 {
  margin: 0 0 18px;
  font-size: 13px;
  font-family: var(--v2-body);
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.55;
  text-transform: uppercase;
}

.v2-footer ul {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  list-style: none;
}

.v2-footer a {
  color: rgba(255, 255, 255, 0.74);
  text-decoration: none;
}

.v2-footer a:hover,
.v2-footer a:focus-visible {
  color: var(--v2-white);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.v2-newsletter {
  max-width: 480px;
  margin-top: 30px;
}

.v2-newsletter__row {
  display: grid;
  grid-template-columns: 1fr auto;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

.v2-newsletter input,
.v2-newsletter button {
  min-height: 52px;
  border: 0;
  color: var(--v2-white);
  background: transparent;
}

.v2-newsletter input {
  min-width: 0;
  padding: 10px 0;
}

.v2-newsletter input::placeholder {
  color: rgba(255, 255, 255, 0.68);
}

.v2-newsletter button {
  padding: 10px 0 10px 20px;
  font-weight: 800;
  cursor: pointer;
}

.v2-newsletter__message {
  min-height: 22px;
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
}

.v2-footer__legal {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.64);
}

.v2-footer__wordmark {
  margin: 0 -1vw -4.8vw;
  color: var(--v2-red);
  font-family: var(--v2-display);
  font-size: clamp(170px, 31vw, 500px);
  font-weight: 800;
  font-stretch: 80%;
  letter-spacing: -0.1em;
  line-height: 0.72;
  text-align: center;
  user-select: none;
}

.v2-page-hero {
  padding: clamp(92px, 12vw, 168px) 0 clamp(66px, 8vw, 110px);
  background: var(--v2-white);
}

.v2-page-hero__grid {
  display: grid;
  grid-template-columns: 1fr 0.62fr;
  align-items: end;
  gap: 50px;
}

.v2-page-hero__aside {
  max-width: 42ch;
  margin: 0;
  color: var(--v2-muted);
  font-size: 19px;
}

.v2-page-hero[style*="color:#fff"] .v2-kicker,
.v2-page-hero[style*="color:#fff"] .v2-page-hero__aside {
  color: var(--v2-white) !important;
}

.v2-filter-bar {
  position: sticky;
  top: 72px;
  z-index: 12;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 16px 0;
  background: rgba(245, 241, 232, 0.94);
  backdrop-filter: blur(12px);
}

.v2-filter {
  flex: 0 0 auto;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-radius-selection);
  padding: 9px 16px;
  color: var(--v2-ink);
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.v2-filter[aria-pressed="true"] {
  border-color: var(--v2-ink);
  color: var(--v2-white);
  background: var(--v2-ink);
}

.v2-shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.v2-shop-card {
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border-radius: var(--v2-radius-card);
  background: var(--v2-white);
  transition: transform 420ms var(--v2-ease);
}

.v2-shop-card[hidden] {
  display: none;
}

.v2-shop-card:hover {
  transform: translateY(-6px);
}

.v2-shop-card__media {
  position: relative;
  min-height: 520px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--shop-bg, var(--v2-blue));
}

.v2-shop-card__media img {
  width: auto;
  max-width: 62%;
  height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 30px 24px rgba(41, 25, 20, 0.18));
  transition: transform 650ms var(--v2-ease);
}

.v2-shop-card:hover .v2-shop-card__media img {
  transform: translateY(-10px) rotate(-4deg) scale(1.06);
}

.v2-shop-card__cheek {
  position: absolute;
  right: 20px;
  bottom: 20px;
  border-radius: var(--v2-radius-control);
  padding: 9px 13px;
  color: var(--v2-ink);
  background: var(--v2-lime);
  font-size: 12px;
  font-weight: 800;
  opacity: 0;
  transform: translateY(10px) rotate(4deg);
  transition: opacity 240ms ease, transform 420ms var(--v2-ease);
}

.v2-shop-card:hover .v2-shop-card__cheek,
.v2-shop-card:focus-within .v2-shop-card__cheek {
  opacity: 1;
  transform: translateY(0) rotate(-3deg);
}

.v2-shop-card__body {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 18px;
  padding: 26px;
}

.v2-shop-card__body h2,
.v2-shop-card__body p {
  margin: 0;
}

.v2-shop-card__body h2 {
  font-family: var(--v2-display);
  font-size: 30px;
  font-weight: 720;
  letter-spacing: -0.04em;
}

.v2-shop-card__meta {
  margin-top: 4px !important;
  color: var(--v2-muted);
  font-size: 14px;
}

.v2-shop-card__price {
  text-align: right;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.v2-shop-card__price small {
  display: block;
  color: var(--v2-muted);
  font-size: 12px;
  font-weight: 500;
}

.v2-shop-card__details {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 18px;
  padding-top: 20px;
  border-top: 1px solid var(--v2-line);
}

.v2-shop-card__details p {
  max-width: 50ch;
  color: var(--v2-muted);
  font-size: 14px;
}

.v2-price-lines {
  display: grid;
  gap: 2px;
  margin-top: 10px;
  color: var(--v2-ink) !important;
  font-variant-numeric: tabular-nums;
}

.v2-price-lines strong {
  font-weight: 800;
}

.v2-shop-card__link {
  border-bottom: 1px solid currentColor;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.v2-info-band {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  overflow: hidden;
  border-radius: var(--v2-radius-card);
  color: var(--v2-white);
  background: var(--v2-purple);
}

.v2-info-band__copy {
  padding: clamp(42px, 6vw, 82px);
}

.v2-info-band__facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.v2-info-band__fact {
  min-height: 180px;
  padding: 30px;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.v2-info-band__fact:nth-child(even) {
  border-right: 0;
}

.v2-info-band__fact:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.v2-info-band__fact strong {
  display: block;
  margin-bottom: 8px;
  font-family: var(--v2-display);
  font-size: 28px;
  line-height: 1;
}

.v2-editorial-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 18px;
}

.v2-product-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.92fr);
  gap: clamp(34px, 5vw, 76px);
  align-items: start;
}

.v2-product-gallery {
  position: sticky;
  top: 96px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.v2-product-gallery__item {
  min-height: 420px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--v2-radius-card);
  background: var(--gallery-bg, var(--v2-blue));
}

.v2-product-gallery__item:first-child {
  grid-column: 1 / -1;
  min-height: 640px;
}

.v2-product-gallery__item img {
  width: auto;
  max-width: 72%;
  height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 30px 28px rgba(41, 25, 20, 0.18));
}

.v2-product-gallery__item:first-child img {
  height: 88%;
}

.v2-purchase {
  padding-top: 10px;
}

.v2-purchase__intro p {
  max-width: 52ch;
  color: var(--v2-muted);
}

.v2-purchase__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 24px 0 34px;
}

.v2-purchase__proof span {
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-radius-control);
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 700;
}

.v2-option {
  margin: 0;
  padding: 24px 0;
  border: 0;
  border-top: 1px solid var(--v2-line);
}

.v2-option legend {
  margin-bottom: 12px;
  padding: 0;
  font-family: var(--v2-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.v2-option__choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.v2-option__choice {
  min-height: 56px;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-radius-selection);
  padding: 12px 14px;
  color: var(--v2-ink);
  background: var(--v2-white);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease, transform 200ms ease;
}

.v2-option__choice:hover,
.v2-option__choice:focus-visible {
  border-color: var(--v2-ink);
  transform: translateY(-2px);
}

.v2-option__choice[aria-pressed="true"] {
  border-color: var(--v2-ink);
  color: var(--v2-white);
  background: var(--v2-ink);
}

.v2-option__choice small {
  display: block;
  margin-top: 2px;
  color: inherit;
  font-size: 12px;
  font-weight: 500;
  opacity: 0.72;
}

.v2-purchase__price {
  padding: 24px 0;
  border-top: 1px solid var(--v2-line);
  font-variant-numeric: tabular-nums;
}

.v2-purchase__price-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 4px 0;
}

.v2-purchase__price-line strong {
  font-family: var(--v2-display);
  font-size: 26px;
  letter-spacing: -0.035em;
}

.v2-purchase__trust {
  margin: 14px 0 0;
  color: var(--v2-muted);
  font-size: 13px;
}

.v2-purchase__button {
  width: 100%;
  min-height: 58px;
  border: 0;
  border-radius: var(--v2-radius-control);
  color: var(--v2-ink);
  background: var(--v2-red);
  font-weight: 800;
}

.v2-purchase__button:disabled {
  opacity: 1;
  cursor: not-allowed;
}

.v2-product-note {
  margin-top: 12px;
  color: var(--v2-muted);
  font-size: 13px;
  text-align: center;
}

.v2-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.v2-faq-item {
  border-radius: var(--v2-radius-card);
  padding: clamp(28px, 4vw, 46px);
  background: var(--v2-white);
}

.v2-faq-item h3,
.v2-faq-item p {
  margin: 0;
}

.v2-faq-item h3 {
  font-family: var(--v2-display);
  font-size: 27px;
  letter-spacing: -0.035em;
}

.v2-faq-item p {
  margin-top: 10px;
  color: var(--v2-muted);
}

.v2-editorial-card {
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-radius: var(--v2-radius-card);
  color: var(--v2-white);
  text-decoration: none;
}

.v2-editorial-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 650ms var(--v2-ease);
}

.v2-editorial-card::after {
  content: "";
  position: absolute;
  inset: 25% 0 0;
  background: linear-gradient(transparent, rgba(14, 14, 13, 0.78));
}

.v2-editorial-card:hover img,
.v2-editorial-card:focus-visible img {
  transform: scale(1.05);
}

.v2-editorial-card__copy {
  position: relative;
  z-index: 1;
  padding: 30px;
}

.v2-editorial-card__copy p {
  margin: 10px 0 0;
}

.v2-page-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}

.v2-page-tile {
  grid-column: span 6;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: var(--v2-radius-card);
  padding: clamp(32px, 4vw, 54px);
  background: var(--tile-bg, var(--v2-white));
  text-decoration: none;
}

.v2-page-tile:nth-child(3n + 1) {
  grid-column: span 7;
}

.v2-page-tile:nth-child(3n + 2) {
  grid-column: span 5;
}

.v2-page-tile p {
  max-width: 42ch;
  color: #4c4b47;
}

.v2-page-tile[style*="#f0665b"] p {
  color: var(--v2-ink) !important;
}

.v2-page-tile[style*="#7450bf"] p {
  color: var(--v2-white) !important;
}

.v2-page-tile__link {
  font-weight: 800;
}

.v2-dialog {
  width: min(660px, calc(100vw - 32px));
  border: 0;
  border-radius: var(--v2-radius-card);
  padding: 0;
  color: var(--v2-ink);
  background: var(--v2-white);
  box-shadow: 0 40px 100px rgba(24, 24, 23, 0.28);
}

.v2-dialog::backdrop {
  background: rgba(24, 24, 23, 0.64);
  backdrop-filter: blur(8px);
}

.v2-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 26px;
  border-bottom: 1px solid var(--v2-line);
}

.v2-dialog__head h2 {
  margin: 0;
  font-family: var(--v2-display);
  font-size: 30px;
  letter-spacing: -0.04em;
}

.v2-dialog__close {
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-radius-control);
  padding: 8px 12px;
  background: transparent;
  cursor: pointer;
}

.v2-dialog__body {
  padding: 26px;
}

.v2-search-input {
  width: 100%;
  min-height: 58px;
  border: 1px solid var(--v2-ink);
  border-radius: 12px;
  padding: 12px 16px;
  color: var(--v2-ink);
  background: var(--v2-white);
}

.v2-search-results {
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  list-style: none;
}

.v2-search-results a {
  display: flex;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--v2-line);
  font-weight: 700;
  text-decoration: none;
}

.v2-cart-note {
  min-height: 280px;
  display: grid;
  place-items: center;
  text-align: center;
}

.v2-cart-note p {
  max-width: 40ch;
  color: var(--v2-muted);
}

[data-v2-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 620ms ease, transform 620ms var(--v2-ease);
}

[data-v2-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

:focus-visible {
  outline: 3px solid var(--v2-lime);
  outline-offset: 4px;
}

@media (max-width: 1080px) {
  :root {
    --v2-shell: min(100% - 40px, 1360px);
  }

  .v2-header__inner {
    grid-template-columns: 120px 1fr auto;
    gap: 20px;
  }

  .v2-nav {
    gap: 18px;
  }

  .v2-nav a {
    font-size: 13px;
  }

  .v2-header-actions {
    gap: 12px;
  }

  .v2-range-card {
    min-height: 450px;
  }

  .v2-range-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .v2-footer__top {
    grid-template-columns: 1.3fr repeat(3, 0.7fr);
  }
}

@media (max-width: 820px) {
  :root {
    --v2-shell: min(100% - 32px, 1360px);
  }

  body.preview-v2 {
    font-size: 16px;
  }

  .v2-preview-note {
    min-height: 36px;
    font-size: 9px;
  }

  .v2-header {
    inset: 36px 0 auto;
    height: 64px;
  }

  .v2-header.is-inner,
  .v2-header.is-solid {
    inset: 0 0 auto;
  }

  .v2-header__inner {
    display: flex;
    justify-content: space-between;
  }

  /* The text links collapse into the menu on a phone; search, account and
     the bag stay in the header, as on every other screen size. Hiding them
     too left mobile shoppers with no way to reach their bag from the top of
     the page. */
  .v2-nav {
    display: none;
  }
  .v2-header-actions { gap: 2px; }
  .v2-header-actions .v2-icon-btn { width: 36px; height: 36px; }

  .v2-menu-toggle {
    display: inline-flex;
  }

  .v2-hero {
    min-height: calc(100svh - 36px);
  }

  .v2-hero::after {
    background: linear-gradient(0deg, rgba(12, 25, 28, 0.76) 0%, rgba(12, 25, 28, 0.16) 75%);
  }

  .v2-hero__content {
    width: 100%;
    padding: 130px 0 48px;
  }

  .v2-display--hero {
    max-width: 640px;
    font-size: clamp(54px, 15vw, 82px);
  }

  .v2-proof-rail__inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .v2-proof {
    min-height: 118px;
    border-bottom: 1px solid var(--v2-line);
  }

  .v2-proof:nth-child(even) {
    border-right: 0;
  }

  .v2-proof:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .v2-range-grid {
    display: flex;
    margin-inline: -16px;
    overflow-x: auto;
    padding-inline: 16px;
    scroll-padding-inline: 16px;
    scroll-snap-type: x mandatory;
  }

  .v2-range-card,
  .v2-range-card:nth-child(n) {
    flex: 0 0 min(82vw, 460px);
    min-height: 460px;
    scroll-snap-align: start;
  }

  .v2-formula-grid,
  .v2-subscribe-card,
  .v2-page-hero__grid,
  .v2-info-band,
  .v2-editorial-grid,
  .v2-product-layout {
    grid-template-columns: 1fr;
  }

  .v2-product-gallery {
    position: static;
  }

  .v2-purchase {
    padding-top: 28px;
  }

  .v2-formula-media,
  .v2-subscribe-card__media {
    min-height: 440px;
  }

  .v2-subscribe-card__copy {
    min-height: 480px;
  }

  .v2-moment-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 16px;
  }

  .v2-moment {
    min-width: min(82vw, 470px);
    scroll-snap-align: start;
  }

  .v2-moment:nth-child(2) .v2-moment__media {
    height: 460px;
    margin-top: 0;
  }

  .v2-community-band {
    grid-template-columns: 1fr;
  }

  .v2-community-panel {
    min-height: 400px;
  }

  .v2-footer__top {
    grid-template-columns: 1fr 1fr;
  }

  .v2-footer__brand {
    grid-column: 1 / -1;
  }

  .v2-shop-card__media {
    min-height: 420px;
  }

  .v2-info-band__facts {
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-left: 0;
  }

  .v2-faq-grid {
    grid-template-columns: 1fr;
  }

  .v2-page-tile:nth-child(n) {
    grid-column: span 12;
  }
}

@media (max-width: 620px) {
  :root {
    --v2-shell: min(100% - 24px, 1360px);
    --v2-radius-card: 16px;
  }

  .v2-display--hero {
    font-size: clamp(50px, 15.5vw, 68px);
  }

  .v2-font-switcher {
    right: 10px;
    bottom: 10px;
  }

  .v2-font-switcher button {
    padding-inline: 10px;
  }

  .v2-display--xl {
    font-size: clamp(43px, 13vw, 64px);
  }

  .v2-display--lg {
    font-size: clamp(38px, 11vw, 56px);
  }

  .v2-actions {
    align-items: stretch;
  }

  .v2-button {
    width: 100%;
  }

  .v2-text-link {
    width: auto;
  }

  .v2-proof {
    padding: 24px 16px;
  }

  .v2-range-card,
  .v2-range-card:nth-child(n) {
    flex-basis: 84vw;
    min-height: 420px;
  }

  .v2-range-grid {
    margin-inline: -12px;
    padding-inline: 12px;
    scroll-padding-inline: 12px;
  }

  .v2-range-card__copy {
    inset: 20px 20px auto;
  }

  .v2-range-card__hint {
    width: 46px;
    height: 46px;
  }

  .v2-formula-media,
  .v2-subscribe-card__media {
    min-height: 360px;
  }

  .v2-subscribe-card__copy {
    min-height: auto;
    padding: 36px 24px 46px;
  }

  .v2-subscribe-bits {
    grid-template-columns: 1fr;
  }

  .v2-moment__media,
  .v2-moment:nth-child(2) .v2-moment__media {
    height: 390px;
  }

  .v2-footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 42px 24px;
  }

  .v2-footer__brand {
    grid-column: 1 / -1;
  }

  .v2-footer__legal {
    flex-direction: column;
  }

  .v2-shop-grid {
    grid-template-columns: 1fr;
  }

  .v2-product-gallery {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .v2-product-gallery__item,
  .v2-product-gallery__item:first-child {
    min-width: 88%;
    min-height: 430px;
    scroll-snap-align: start;
  }

  .v2-shop-card__media {
    min-height: 390px;
  }

  .v2-shop-card__body,
  .v2-shop-card__details {
    grid-template-columns: 1fr;
  }

  .v2-shop-card__price {
    text-align: left;
  }

  .v2-info-band__facts {
    grid-template-columns: 1fr;
  }

  .v2-info-band__fact,
  .v2-info-band__fact:nth-child(n) {
    min-height: 130px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }

  .v2-info-band__fact:last-child {
    border-bottom: 0;
  }
}

body.preview-v2[data-v2-font="glofium"] .v2-display--electro {
  max-width: 980px;
  font-size: clamp(50px, 7.3vw, 100px);
  letter-spacing: 0.015em;
  line-height: 1.04;
}

body.preview-v2[data-v2-font="glofium"] .v2-electro-step strong {
  font-size: clamp(52px, 6.5vw, 90px);
  letter-spacing: 0.015em;
  line-height: 1.04;
}

body.preview-v2[data-v2-font="glofium"] .v2-electro-step h3 {
  max-width: 15ch;
  font-size: clamp(30px, 3.3vw, 46px);
  letter-spacing: 0.012em;
  line-height: 1.08;
}

@media (max-width: 620px) {
  body.preview-v2[data-v2-font="glofium"] .v2-display--electro {
    font-size: clamp(42px, 11.5vw, 56px);
    line-height: 1.06;
  }

  body.preview-v2[data-v2-font="glofium"] .v2-electro-step strong {
    font-size: clamp(46px, 13vw, 66px);
  }

  body.preview-v2[data-v2-font="glofium"] .v2-electro-step h3 {
    font-size: clamp(28px, 7.5vw, 38px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-v2-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* XALT v3 refinement: editorial commerce, readable layers and a restrained core palette */
:root {
  --v2-purple: #7d1f2b;
  --v2-blue: #e8d8ca;
  --v2-paper: #f3eee5;
  --v2-white: #fffdf8;
  --v2-lime: #d7ff52;
}

body.preview-v2[data-v2-font="glofium"] .v2-display,
body.preview-v2[data-v2-font="glofium"] .v2-mobile-menu nav a {
  letter-spacing: 0.045em;
  line-height: 1.16;
  word-spacing: 0.06em;
}

body.preview-v2[data-v2-font="glofium"] .v2-display--hero {
  max-width: 1040px;
  font-size: clamp(50px, 5.9vw, 84px);
  letter-spacing: 0.05em;
  line-height: 1.15;
}

body.preview-v2[data-v2-font="glofium"] .v2-display--xl {
  font-size: clamp(43px, 5.1vw, 72px);
  line-height: 1.14;
}

body.preview-v2[data-v2-font="glofium"] .v2-display--lg {
  font-size: clamp(36px, 4.1vw, 58px);
  line-height: 1.15;
}

body.preview-v2[data-v2-font="glofium"] .v2-display--md {
  font-size: clamp(29px, 3.15vw, 44px);
  line-height: 1.16;
}

body.preview-v2[data-v2-font="glofium"] .v2-display--sm {
  font-size: clamp(22px, 2.05vw, 30px);
  letter-spacing: 0.04em;
  line-height: 1.17;
}

.v2-nav {
  gap: clamp(16px, 1.8vw, 30px);
}

.v2-nav a {
  font-size: 12px;
  white-space: nowrap;
}

.v2-footer--clean .v2-footer__top {
  grid-template-columns: minmax(300px, 1.6fr) repeat(3, minmax(120px, 0.55fr));
  padding: clamp(62px, 8vw, 104px) 0 40px;
}

.v2-footer--clean .v2-footer__brand {
  max-width: 520px;
}

.v2-footer--clean .v2-footer__wordmark,
.v2-footer__wordmark {
  display: none;
}

.v3-shop-range {
  padding: clamp(64px, 8vw, 112px) 0 clamp(90px, 11vw, 148px);
  background: var(--v2-paper);
}

.v3-shop-range__head {
  max-width: 850px;
  margin-bottom: clamp(42px, 6vw, 76px);
}

.v3-shop-range__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}

.v3-product-card {
  position: relative;
  min-height: 650px;
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
  color: var(--v2-ink);
  background: var(--v2-white);
  text-decoration: none;
}

.v3-product-card:nth-child(3),
.v3-product-card:nth-child(4) {
  min-height: 520px;
  grid-column: span 6;
}

.v3-product-card__media {
  position: relative;
  min-height: 380px;
  flex: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--card-bg, var(--v2-red));
}

.v3-product-card__media::after {
  content: attr(data-word);
  position: absolute;
  inset: auto -2% -8%;
  color: rgba(255, 255, 255, 0.35);
  font-family: var(--v2-display);
  font-size: clamp(96px, 14vw, 210px);
  font-weight: 800;
  letter-spacing: -0.08em;
  line-height: 0.7;
  text-align: center;
}

.v3-product-card__media img {
  position: relative;
  z-index: 1;
  width: min(54%, 350px);
  max-height: 390px;
  object-fit: contain;
  filter: drop-shadow(0 34px 28px rgba(40, 14, 13, 0.22));
  transition: transform 600ms var(--v2-ease);
}

.v3-product-card__media--photo img {
  width: 100%;
  max-height: none;
  height: 100%;
  object-fit: cover;
  filter: none;
}

.v3-product-card:hover .v3-product-card__media img {
  transform: translateY(-8px) rotate(-2deg) scale(1.025);
}

.v3-product-card__body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  padding: clamp(24px, 3vw, 38px);
}

.v3-product-card__body h2,
.v3-product-card__body p {
  margin: 0;
}

.v3-product-card__body p {
  max-width: 42ch;
  margin-top: 8px;
  color: var(--v2-muted);
}

.v3-product-card__price {
  text-align: right;
}

.v3-product-card__price strong,
.v3-product-card__price span,
.v3-product-card__price small {
  display: block;
}

.v3-product-card__price strong {
  font-size: 20px;
}

.v3-product-card__price span,
.v3-product-card__price small {
  margin-top: 4px;
  color: var(--v2-muted);
  font-size: 12px;
}

.v3-product-card__cta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--v2-line);
  font-weight: 800;
}

.v3-compare {
  padding: clamp(80px, 10vw, 138px) 0;
  color: var(--v2-white);
  background: var(--v2-ink);
}

.v3-compare__head {
  max-width: 780px;
  margin-bottom: 56px;
}

.v3-compare__table {
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.v3-compare__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.v3-compare__row span {
  color: rgba(255, 255, 255, 0.62);
}

.v3-compare__row--head {
  color: var(--v2-lime);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.v3-product-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(470px, 0.92fr);
  align-items: start;
  gap: clamp(42px, 6vw, 94px);
  padding-block: clamp(42px, 6vw, 84px) clamp(84px, 10vw, 140px);
}

.v3-gallery {
  position: sticky;
  top: 96px;
}

.v3-gallery__stage {
  position: relative;
  min-height: min(700px, calc(100vh - 156px));
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 24px;
  background: var(--v2-red);
}

.v3-gallery__stage[data-tone="nude"] { background: #ddcabb; }
.v3-gallery__stage[data-tone="black"] { background: #1b1b1a; }
.v3-gallery__stage img {
  width: 100%;
  height: 100%;
  max-height: min(700px, calc(100vh - 156px));
  object-fit: contain;
}

.v3-gallery__caption {
  position: absolute;
  inset: auto 18px 18px;
  border-radius: 999px;
  padding: 9px 13px;
  background: rgba(255, 253, 248, 0.9);
  font-size: 12px;
  font-weight: 800;
}

.v3-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.v3-gallery__thumbs button {
  min-height: 56px;
  border: 1px solid var(--v2-line);
  border-radius: 12px;
  color: var(--v2-ink);
  background: var(--v2-white);
  font-weight: 750;
  cursor: pointer;
}

.v3-gallery__thumbs button[aria-pressed="true"] {
  border-color: var(--v2-ink);
  box-shadow: inset 0 0 0 1px var(--v2-ink);
}

.v3-purchase-heading {
  margin-bottom: 26px;
}

.v3-purchase-heading h1 {
  margin: 7px 0 10px;
}

.v3-purchase-heading__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.v3-purchase-heading__meta span {
  border: 1px solid var(--v2-line);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 800;
}

.v3-value-lines {
  display: grid;
  gap: 4px;
  margin: 14px 0 0;
  padding: 14px;
  border-radius: 12px;
  background: #f1ebe2;
  font-size: 13px;
}

.v3-value-lines strong:last-child {
  color: var(--v2-red-deep);
}

.v3-you-get {
  margin: 24px 0;
  padding: 22px 0;
  border-block: 1px solid var(--v2-line);
}

.v3-you-get h2 {
  margin: 0 0 12px;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.v3-you-get ul {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  list-style: none;
}

.v3-you-get li::before {
  content: "✓";
  margin-right: 9px;
  color: var(--v2-red);
  font-weight: 900;
}

.v3-home-stack {
  position: relative;
  background: var(--v2-paper);
}

.v3-layer {
  position: relative;
  isolation: isolate;
}

.v3-electro-story {
  min-height: 240vh;
  overflow-x: clip;
  padding: clamp(90px, 10vw, 140px) 0 0;
  color: var(--v2-ink);
  background: var(--v2-red);
}

/* Right-to-left colour sweep. Enters from the right, covers, the base colour
   swaps underneath, then it exits left — so the join is never visible.
   Transform-only: no repaint, no scroll listener. */
.v3-electro-story::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--v3-wipe, transparent);
  transform: translateX(100%);
  will-change: transform;
}

.v3-electro-story.is-wiping::after {
  animation: v3-colour-wipe 760ms var(--v2-ease) forwards;
}

@keyframes v3-colour-wipe {
  0%   { transform: translateX(100%); }
  48%  { transform: translateX(0); }
  52%  { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Content must ride above the sweep */
.v3-electro-story .v2-electro-story__intro,
.v3-electro-story .v2-electro-story__grid { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .v3-electro-story.is-wiping::after { animation: none; }
}

.v3-electro-story::before {
  content: "";
  position: absolute;
  top: -86px;
  left: -10%;
  width: 120%;
  height: 120px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: inherit;
}

.v3-electro-story .v2-electro-story__intro {
  padding-bottom: clamp(52px, 8vw, 100px);
}

.v3-electro-story .v2-display--electro {
  max-width: 940px;
  font-size: clamp(52px, 7.6vw, 108px);
  line-height: 0.94;
}

.v3-electro-story .v2-electro-step {
  min-height: 48vh;
  opacity: 0.72;
}

.v3-electro-story .v2-electro-step > div {
  border-radius: 18px;
  padding: clamp(24px, 3vw, 38px);
  color: var(--v2-ink);
  background: rgba(255, 253, 248, 0.96);
  box-shadow: 0 28px 70px rgba(24, 24, 23, 0.14);
}

.v3-electro-story .v2-electro-step p {
  color: var(--v2-muted);
}

.v3-electro-story .v2-electro-step h3 {
  letter-spacing: -0.02em;
  line-height: 1.02;
}

.v3-electro-story .v2-electro-step.is-current {
  opacity: 1;
}

.v3-story-layer {
  min-height: calc(100dvh - 72px);
  color: var(--v2-white);
  background: var(--v2-ink);
  clip-path: polygon(0 5vw, 34% 0, 100% 4vw, 100% 100%, 0 100%);
}

.v3-story-layer__grid {
  min-height: calc(100dvh - 72px);
  display: grid;
  grid-template-columns: 1.18fr 0.82fr;
  align-items: stretch;
}

.v3-story-layer__media {
  min-height: 720px;
}

.v3-story-layer__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v3-story-layer__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(58px, 8vw, 118px);
}

.v3-story-layer__copy p:not(.v2-kicker) {
  color: rgba(255, 255, 255, 0.75);
}

.v3-subscription-layer {
  min-height: calc(100dvh - 72px);
  display: grid;
  align-items: center;
  padding: clamp(80px, 9vw, 132px) 0;
  background: #ddcabb;
  border-radius: 42px 42px 0 0;
}

.v3-subscription-layer__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
  gap: clamp(48px, 8vw, 120px);
}

.v3-subscription-layer__media {
  min-height: 620px;
  overflow: hidden;
  border-radius: 50% 50% 22px 22px;
}

.v3-subscription-layer__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v3-testimony-home {
  padding: clamp(94px, 12vw, 168px) 0;
  background: var(--v2-white);
}

.v3-testimony-home__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(48px, 8vw, 120px);
  align-items: center;
}

.v3-testimony-home__media {
  min-height: 690px;
  overflow: hidden;
  border-radius: 24px 24px 160px 24px;
}

.v3-testimony-home__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v3-proof-list {
  margin: 34px 0;
  border-top: 1px solid var(--v2-line);
}

.v3-proof-list div {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  padding: 17px 0;
  border-bottom: 1px solid var(--v2-line);
}

.v3-proof-list span {
  color: #7d1f2b;
  font-weight: 800;
}

.v3-story-hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--v2-white);
  background: var(--v2-ink);
}

.v3-story-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v3-story-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 10, 9, 0.78), rgba(10, 10, 9, 0.12) 68%), linear-gradient(0deg, rgba(10, 10, 9, 0.58), transparent 55%);
}

.v3-story-hero__copy {
  position: relative;
  z-index: 1;
  max-width: 890px;
  padding-block: clamp(110px, 15vw, 190px) clamp(72px, 10vw, 130px);
}

.v3-story-hero__copy .v2-lead {
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.82);
}

.v3-narrative {
  padding: clamp(95px, 12vw, 180px) 0;
  background: var(--v2-white);
}

.v3-narrative__grid {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: clamp(50px, 10vw, 150px);
}

.v3-narrative__chapters article {
  padding: clamp(40px, 6vw, 76px) 0;
  border-top: 1px solid var(--v2-line);
}

.v3-narrative__chapters article:first-child { padding-top: 0; border-top: 0; }
.v3-narrative__chapters h2 { margin: 0; }
.v3-narrative__chapters p { max-width: 52ch; color: var(--v2-muted); }

.v3-image-break {
  min-height: 72vh;
  overflow: hidden;
}

.v3-image-break img {
  width: 100%;
  height: 72vh;
  object-fit: cover;
}

.v3-creator-hero {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  min-height: calc(100dvh - 72px);
  background: var(--v2-white);
}

.v3-creator-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(56px, 8vw, 120px);
}

.v3-creator-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v3-program {
  display: grid;
  grid-template-columns: 0.55fr 1.45fr;
  gap: clamp(40px, 9vw, 140px);
  padding: clamp(86px, 11vw, 160px) max(32px, calc((100vw - 1360px) / 2));
}

.v3-program--affiliate { color: var(--v2-white); background: var(--v2-ink); }
.v3-program--ugc { background: var(--v2-red); }
.v3-program__copy { max-width: 760px; }
.v3-program__copy .v2-lead { color: inherit; opacity: 0.78; }
.v3-program__terms { margin-top: 34px; border-top: 1px solid currentColor; }
.v3-program__terms div { display: grid; grid-template-columns: 160px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid currentColor; }
.v3-program__terms span { opacity: 0.64; }

.v3-contact-strip {
  padding: clamp(76px, 9vw, 124px) 0;
  background: var(--v2-paper);
}

.v3-contact-strip__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(46px, 9vw, 130px);
}

.v3-contact-lines a,
.v3-contact-lines span {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--v2-line);
  text-decoration: none;
}

.v3-contact-lines > :last-child { border-bottom: 1px solid var(--v2-line); }

@media (min-width: 821px) {
  .v3-home-stack > .v3-layer:not(.v3-electro-story) {
    position: sticky;
    top: 72px;
  }
}

@media (max-width: 1180px) {
  .v2-nav { display: none; }
  .v2-menu-toggle { display: inline-flex; }
  .v2-header__inner { grid-template-columns: 1fr auto; }
}

@media (max-width: 820px) {
  body.preview-v2[data-v2-font="glofium"] .v2-display--hero {
    font-size: clamp(40px, 11vw, 52px);
    letter-spacing: 0.055em;
    line-height: 1.18;
  }

  body.preview-v2[data-v2-font="glofium"] .v2-display--xl {
    font-size: clamp(36px, 9.6vw, 48px);
    line-height: 1.17;
  }

  body.preview-v2[data-v2-font="glofium"] .v2-display--lg {
    font-size: clamp(31px, 8.2vw, 42px);
    line-height: 1.18;
  }

  .v3-shop-range__grid,
  .v3-product-layout,
  .v3-story-layer__grid,
  .v3-subscription-layer__grid,
  .v3-testimony-home__grid,
  .v3-narrative__grid,
  .v3-creator-hero,
  .v3-program,
  .v3-contact-strip__grid {
    grid-template-columns: 1fr;
  }

  .v3-product-card,
  .v3-product-card:nth-child(3),
  .v3-product-card:nth-child(4) {
    grid-column: 1;
    min-height: 560px;
  }

  .v3-product-card__body { grid-template-columns: 1fr; }
  .v3-product-card__price { text-align: left; }
  .v3-compare__row { grid-template-columns: 0.85fr 1fr 1fr; gap: 10px; font-size: 13px; }
  .v3-gallery { position: relative; top: auto; }
  .v3-gallery__stage { min-height: 480px; }
  .v3-product-layout { padding-top: 20px; }

  .v3-electro-story {
    min-height: auto;
    padding-bottom: 80px;
  }

  .v3-electro-story::before { top: -44px; height: 70px; }
  .v3-electro-story .v2-electro-story__grid { grid-template-columns: 1fr; }
  .v3-electro-story .v2-electro-visual { position: relative; top: auto; height: 430px; }
  .v3-electro-story .v2-electro-steps { margin: 0; padding: 0; }
  .v3-electro-story .v2-electro-step { min-height: auto; padding: 12px 0; opacity: 1; transform: none; }
  .v3-electro-story .v2-electro-step > div { width: 100%; }

  .v3-story-layer { clip-path: polygon(0 30px, 35% 0, 100% 24px, 100% 100%, 0 100%); }
  .v3-story-layer__grid { min-height: auto; }
  .v3-story-layer__media { min-height: 520px; }
  .v3-subscription-layer__media, .v3-testimony-home__media { min-height: 500px; }
  .v3-creator-hero__media { min-height: 540px; order: -1; }
  .v3-program__terms div { grid-template-columns: 1fr; gap: 4px; }

  .v2-footer--clean .v2-footer__top {
    grid-template-columns: repeat(2, 1fr);
  }

  .v2-footer--clean .v2-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .v3-product-card { min-height: 510px; }
  .v3-product-card__media { min-height: 320px; }
  .v3-compare { overflow-x: auto; }
  .v3-compare__table { min-width: 540px; }
  .v3-gallery__stage { min-height: 420px; }
  .v3-story-layer__media, .v3-creator-hero__media { min-height: 410px; }
  .v3-subscription-layer__media, .v3-testimony-home__media { min-height: 420px; }
  .v2-footer--clean .v2-footer__top { grid-template-columns: 1fr; }
  .v2-footer--clean .v2-footer__brand { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .v3-electro-story { min-height: auto; background: var(--v2-red); }
  .v3-home-stack > .v3-layer { position: relative; top: auto; }
  .v3-product-card__media img { transition: none; }
}

/* Layered homepage, scroll-led electrolyte story and conversion surfaces */
.v2-home-stack {
  position: relative;
  background: var(--v2-paper);
}

.v2-layer {
  position: relative;
  isolation: isolate;
}

.v2-layer--range {
  z-index: 1;
}

.v2-layer--scroll {
  z-index: 2;
}

.v2-layer--formula {
  z-index: 3;
}

.v2-layer--subscribe {
  z-index: 4;
}

.v2-layer--moments {
  z-index: 5;
}

.v2-layer--proof {
  z-index: 6;
}

.v2-curve::before {
  content: "";
  position: absolute;
  top: -74px;
  left: -15%;
  z-index: -1;
  width: 130%;
  height: 116px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: inherit;
  pointer-events: none;
}

.v2-curve,
.v2-footer {
  overflow-x: clip;
}

.v2-range-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.42fr);
  align-items: end;
  gap: 36px;
  margin-bottom: clamp(38px, 5vw, 64px);
}

.v2-range-intro .v2-kicker {
  grid-column: 1 / -1;
  margin-bottom: -14px;
}

.v2-range-intro .v2-lead {
  margin: 0 0 7px;
  color: var(--v2-muted);
}

.v2-range-grid--home {
  grid-template-columns: 0.8fr 0.8fr 1.4fr;
}

.v2-range-grid--home .v2-range-card--wide .v2-range-card__media {
  inset-inline: 22%;
}

.v2-display--electro {
  max-width: 1020px;
  font-size: clamp(58px, 8.7vw, 126px);
  line-height: 0.9;
}

.v2-electro-story {
  min-height: 360vh;
  padding: clamp(88px, 11vw, 150px) 0 0;
  color: var(--v2-white);
  background: var(--v2-red);
  transition: background-color 700ms var(--v2-ease);
}

.v2-electro-story[data-stage="1"] {
  background: var(--v2-purple);
}

.v2-electro-story[data-stage="2"] {
  background: #232323;
}

.v2-electro-story[data-stage="3"] {
  background: var(--v2-red-deep);
}

.v2-electro-story__intro {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(70px, 10vw, 130px);
}

.v2-electro-story__grid {
  display: grid;
  grid-template-columns: minmax(340px, 0.9fr) minmax(360px, 0.74fr);
  justify-content: space-between;
  gap: clamp(50px, 10vw, 160px);
}

.v2-electro-visual {
  position: sticky;
  top: 13vh;
  height: 74vh;
  display: grid;
  place-items: center;
}

.v2-electro-orbit {
  position: absolute;
  inset: 8% 4%;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 50%;
  transform: rotate(-9deg);
  transition: transform 700ms var(--v2-ease);
}

.v2-electro-orbit span {
  position: absolute;
  padding: 6px 10px;
  color: var(--v2-ink);
  background: var(--v2-white);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.v2-electro-orbit span:nth-child(1) {
  top: 2%;
  left: 18%;
}

.v2-electro-orbit span:nth-child(2) {
  right: 2%;
  bottom: 27%;
}

.v2-electro-orbit span:nth-child(3) {
  bottom: 1%;
  left: 18%;
}

.v2-electro-pack {
  position: absolute;
  width: min(24vw, 300px);
  max-height: 68vh;
  object-fit: contain;
  filter: drop-shadow(0 44px 34px rgba(58, 12, 18, 0.28));
  transform: translate3d(0, 2%, 0);
  transition: opacity 500ms ease, transform 700ms var(--v2-ease), filter 500ms ease;
}

.v2-electro-pack--purple {
  opacity: 0;
  transform: translate3d(12%, 4%, 0) scale(0.92);
}

.v2-electro-story[data-stage="1"] .v2-electro-pack--red,
.v2-electro-story[data-stage="3"] .v2-electro-pack--red {
  opacity: 0;
  transform: translate3d(-18%, -3%, 0) scale(0.88);
}

.v2-electro-story[data-stage="1"] .v2-electro-pack--purple,
.v2-electro-story[data-stage="3"] .v2-electro-pack--purple {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.v2-electro-story[data-stage="2"] .v2-electro-pack--red {
  transform: translate3d(8%, -2%, 0) scale(1.06);
  filter: drop-shadow(0 56px 42px rgba(0, 0, 0, 0.36));
}

.v2-electro-story[data-stage="1"] .v2-electro-orbit,
.v2-electro-story[data-stage="3"] .v2-electro-orbit {
  transform: rotate(8deg) scale(0.94);
}

.v2-electro-steps {
  padding-bottom: 28vh;
}

.v2-electro-step {
  min-height: 74vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.32;
  transform: translateY(26px);
  transition: opacity 420ms ease, transform 620ms var(--v2-ease);
}

.v2-electro-step.is-current {
  opacity: 1;
  transform: translateY(0);
}

.v2-electro-step strong {
  display: block;
  margin-bottom: 20px;
  font-family: var(--v2-display);
  font-size: clamp(60px, 8vw, 116px);
  font-weight: 760;
  letter-spacing: -0.05em;
  line-height: 0.82;
}

.v2-electro-step h3 {
  max-width: 12ch;
  margin: 0;
  font-family: var(--v2-display);
  font-size: clamp(34px, 4vw, 58px);
  letter-spacing: -0.04em;
  line-height: 0.96;
}

.v2-electro-step p {
  max-width: 38ch;
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(17px, 1.5vw, 20px);
}

.v2-layer--formula {
  min-height: calc(100dvh - 72px);
}

.v2-layer--subscribe {
  min-height: calc(100dvh - 72px);
  display: grid;
  align-items: center;
  padding-block: clamp(66px, 8vw, 110px);
}

.v2-layer--moments {
  min-height: calc(112dvh - 72px);
  padding-block: clamp(92px, 11vw, 150px);
}

.v2-moments-heading {
  max-width: 1050px;
  margin-bottom: clamp(50px, 8vw, 100px);
}

.v2-proof-stage {
  min-height: calc(100dvh - 72px);
  display: grid;
  align-items: center;
  padding-block: clamp(88px, 10vw, 144px);
  background: var(--v2-blue);
}

.v2-proof-stage__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(420px, 1.2fr);
  align-items: center;
  gap: clamp(46px, 8vw, 120px);
}

.v2-proof-stage__media {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  border-radius: var(--v2-radius-card);
}

.v2-proof-stage__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v2-proof-stage__media span {
  position: absolute;
  inset: auto 20px 20px;
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--v2-ink);
  background: rgba(255, 254, 250, 0.92);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.3;
  backdrop-filter: blur(12px);
}

@media (min-width: 821px) {
  .v2-home-stack > .v2-layer:not(.v2-layer--scroll) {
    position: sticky;
    top: 72px;
  }
}

@media (max-width: 1080px) {
  .v2-range-grid--home {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .v2-range-grid--home .v2-range-card--wide {
    grid-column: 1 / -1;
  }

  .v2-range-grid--home .v2-range-card--wide .v2-range-card__media {
    inset-inline: 30%;
  }
}

@media (max-width: 820px) {
  .v2-layer {
    position: relative;
    top: auto;
  }

  .v2-curve::before {
    top: -38px;
    height: 70px;
  }

  .v2-range-intro {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .v2-range-intro .v2-kicker {
    margin-bottom: 0;
  }

  .v2-range-grid--home {
    display: flex;
  }

  .v2-range-grid--home .v2-range-card--wide {
    grid-column: auto;
  }

  .v2-range-grid--home .v2-range-card--wide .v2-range-card__media {
    inset-inline: 10%;
  }

  .v2-display--electro {
    font-size: clamp(48px, 14vw, 74px);
    line-height: 0.92;
  }

  .v2-electro-story {
    min-height: 390vh;
    padding-top: 84px;
  }

  .v2-electro-story__intro {
    padding-bottom: 28px;
  }

  .v2-electro-story__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .v2-electro-visual {
    top: 78px;
    z-index: 1;
    height: 48vh;
    min-height: 330px;
  }

  .v2-electro-orbit {
    inset: 5% 6%;
  }

  .v2-electro-pack {
    width: min(46vw, 230px);
    max-height: 43vh;
  }

  .v2-electro-steps {
    position: relative;
    z-index: 2;
    margin-top: -5vh;
    padding-bottom: 20vh;
  }

  .v2-electro-step {
    min-height: 72vh;
    justify-content: flex-end;
    padding: 0 4px 10vh;
  }

  .v2-electro-step > * {
    width: fit-content;
    max-width: min(100%, 430px);
    padding-inline: 14px;
    color: var(--v2-white);
    background: rgba(24, 24, 23, 0.72);
  }

  .v2-electro-step strong {
    margin: 0;
    padding-top: 14px;
    font-size: clamp(54px, 17vw, 84px);
  }

  .v2-electro-step h3 {
    padding-top: 8px;
    font-size: clamp(32px, 9vw, 46px);
  }

  .v2-electro-step p {
    margin-top: 0;
    padding-top: 14px;
    padding-bottom: 16px;
    color: rgba(255, 255, 255, 0.8);
  }

  .v2-layer--formula,
  .v2-layer--subscribe,
  .v2-layer--moments,
  .v2-proof-stage {
    min-height: auto;
  }

  .v2-proof-stage__grid {
    grid-template-columns: 1fr;
  }

  .v2-proof-stage__media {
    min-height: 440px;
  }
}

.v2-shop-hero {
  padding-top: clamp(72px, 7vw, 100px);
  padding-bottom: clamp(78px, 10vw, 138px);
  background: var(--v2-paper);
}

.v2-shop-hero .v2-display {
  max-width: 980px;
}

.v2-shop-hero .v2-lead {
  max-width: 730px;
}

.v2-offer-section {
  padding: 0 0 clamp(86px, 10vw, 144px);
  background: var(--v2-paper);
}

.v2-offer-builder {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(480px, 1.1fr);
  align-items: start;
  overflow: hidden;
  border-radius: var(--v2-radius-card);
  background: var(--v2-white);
  box-shadow: 0 30px 90px rgba(72, 32, 28, 0.1);
}

.v2-offer-builder__visual {
  position: sticky;
  top: 72px;
  min-height: calc(100dvh - 72px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #f0665b;
  isolation: isolate;
}

.v2-offer-builder__visual > img {
  position: relative;
  z-index: 1;
  width: min(54%, 350px);
  max-height: 68vh;
  object-fit: contain;
  filter: drop-shadow(0 44px 32px rgba(75, 21, 20, 0.24));
  transform: rotate(-5deg);
  transition: transform 620ms var(--v2-ease), opacity 240ms ease;
}

.v2-offer-builder__wash {
  position: absolute;
  inset: auto -4% 4%;
  z-index: -1;
  color: rgba(255, 255, 255, 0.34);
  font-family: var(--v2-display);
  font-size: clamp(120px, 20vw, 330px);
  font-weight: 780;
  letter-spacing: -0.09em;
  line-height: 0.72;
  white-space: nowrap;
}

.v2-offer-builder__facts {
  position: absolute;
  inset: auto 24px 24px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.v2-offer-builder__facts span {
  border: 1px solid rgba(24, 24, 23, 0.2);
  border-radius: var(--v2-radius-control);
  padding: 8px 12px;
  background: rgba(255, 254, 250, 0.88);
  font-size: 11px;
  font-weight: 750;
  backdrop-filter: blur(10px);
}

.v2-offer-builder__panel {
  padding: clamp(34px, 5vw, 76px);
}

.v2-option--first {
  margin-top: 30px;
}

.v2-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  border-radius: 15px;
  padding: 5px;
  background: #edeae3;
}

.v2-mode-tab {
  min-height: 66px;
  border: 0;
  border-radius: 11px;
  padding: 11px 14px;
  color: var(--v2-ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: color 220ms ease, background-color 220ms ease, transform 220ms ease;
}

.v2-mode-tab span,
.v2-mode-tab small {
  display: block;
}

.v2-mode-tab span {
  font-weight: 800;
}

.v2-mode-tab small {
  margin-top: 2px;
  font-size: 11px;
  opacity: 0.7;
}

.v2-mode-tab[aria-pressed="true"] {
  color: var(--v2-white);
  background: var(--v2-ink);
  box-shadow: 0 8px 22px rgba(24, 24, 23, 0.16);
}

.v2-mode-tab:active,
.v2-box-option:active {
  transform: scale(0.985);
}

.v2-box-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.v2-box-option {
  min-width: 0;
  border: 1px solid var(--v2-line);
  border-radius: 14px;
  padding: 16px;
  color: var(--v2-ink);
  background: var(--v2-white);
  text-align: left;
  cursor: pointer;
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.v2-box-option:hover,
.v2-box-option:focus-visible,
.v2-box-option[aria-pressed="true"] {
  border-color: var(--v2-ink);
}

.v2-box-option[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px var(--v2-ink);
}

.v2-box-option__head,
.v2-box-option__schedule,
.v2-box-option__schedule span {
  display: flex;
}

.v2-box-option__head {
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.v2-box-option__head > strong {
  font-family: var(--v2-display);
  font-size: 24px;
  letter-spacing: -0.035em;
}

.v2-box-option__head > span {
  font-weight: 800;
}

.v2-box-option > small {
  display: block;
  margin-top: 2px;
  color: var(--v2-muted);
  font-size: 12px;
}

.v2-box-option__schedule {
  flex-direction: column;
  gap: 5px;
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid var(--v2-line);
  font-size: 11px;
}

.v2-box-option__schedule span {
  justify-content: space-between;
  gap: 8px;
}

.v2-purchase__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-inline: 24px;
  cursor: pointer;
  transition: background-color 220ms ease, transform 220ms ease;
}

.v2-purchase__button:hover,
.v2-purchase__button:focus-visible {
  color: var(--v2-white);
  background: var(--v2-red-deep);
  transform: translateY(-2px);
}

.v2-purchase__button:active {
  transform: translateY(1px) scale(0.99);
}

.v2-purchase__button strong {
  font-variant-numeric: tabular-nums;
}

.v2-shop-support {
  color: var(--v2-white);
  background: var(--v2-purple);
}

.v2-shop-support__heading {
  max-width: 900px;
}

.v2-shop-support__facts {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 1fr 1.2fr;
  gap: 0;
  margin-top: clamp(52px, 8vw, 96px);
  border-top: 1px solid rgba(255, 255, 255, 0.34);
}

.v2-shop-support__facts article {
  min-height: 210px;
  padding: 28px 24px 28px 0;
  border-right: 1px solid rgba(255, 255, 255, 0.34);
}

.v2-shop-support__facts article:not(:first-child) {
  padding-left: 24px;
}

.v2-shop-support__facts article:last-child {
  border-right: 0;
}

.v2-shop-support__facts strong {
  display: block;
  font-family: var(--v2-display);
  font-size: clamp(26px, 3vw, 42px);
  line-height: 0.98;
}

.v2-shop-support__facts p {
  max-width: 24ch;
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.74);
}

.v2-merch-band {
  background: var(--v2-blue);
}

.v2-merch-preview {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  align-items: center;
  gap: clamp(34px, 6vw, 90px);
}

.v2-merch-preview__media {
  height: 590px;
  overflow: hidden;
  border-radius: var(--v2-radius-card);
}

.v2-merch-preview__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v2-merch-preview p {
  max-width: 40ch;
  color: var(--v2-muted);
}

.v2-purchase--detailed {
  padding-bottom: 24px;
}

.v2-near-purchase-proof {
  margin-top: 24px;
  border-radius: 14px;
  padding: 20px;
  background: var(--v2-blue);
}

.v2-near-purchase-proof strong,
.v2-near-purchase-proof p,
.v2-near-purchase-proof a {
  display: block;
}

.v2-near-purchase-proof p {
  margin: 6px 0 12px;
  font-size: 13px;
  line-height: 1.4;
}

.v2-near-purchase-proof a {
  width: fit-content;
  border-bottom: 1px solid currentColor;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.v2-product-story {
  padding-block: clamp(84px, 10vw, 144px);
  color: var(--v2-white);
  background: var(--v2-red-deep);
}

.v2-product-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(420px, 1.18fr);
  gap: clamp(48px, 9vw, 140px);
}

.v2-product-accordions details {
  border-top: 1px solid rgba(255, 255, 255, 0.42);
  padding: 22px 0;
}

.v2-product-accordions details:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.42);
}

.v2-product-accordions summary {
  cursor: pointer;
  font-family: var(--v2-display);
  font-size: clamp(23px, 2.5vw, 34px);
  font-weight: 700;
  letter-spacing: -0.035em;
}

.v2-product-accordions p {
  max-width: 54ch;
  margin: 14px 0 2px;
  color: rgba(255, 255, 255, 0.94);
}

.v2-mobile-buy {
  display: none;
}

.v2-cart-preview {
  display: grid;
  gap: 18px;
}

.v2-cart-preview__line {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  align-items: center;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--v2-line);
}

.v2-cart-preview__line img {
  width: 84px;
  height: 104px;
  object-fit: contain;
  border-radius: 10px;
  background: #f0665b;
}

.v2-cart-preview__line p,
.v2-cart-preview__line strong {
  margin: 0;
}

.v2-cart-preview__meta {
  color: var(--v2-muted);
  font-size: 13px;
}

.v2-cart-preview__totals {
  display: grid;
  gap: 7px;
}

.v2-cart-preview__totals span {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.v2-cart-preview__notice {
  border-radius: 12px;
  padding: 14px;
  color: var(--v2-ink);
  background: var(--v2-lime);
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 1080px) {
  .v2-offer-builder {
    grid-template-columns: minmax(0, 0.8fr) minmax(440px, 1.2fr);
  }

  .v2-box-options {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .v2-offer-builder {
    grid-template-columns: 1fr;
  }

  .v2-offer-builder__visual {
    position: relative;
    top: auto;
    min-height: 68vh;
  }

  .v2-offer-builder__visual > img {
    width: min(44%, 260px);
    max-height: 54vh;
  }

  .v2-shop-support__facts {
    grid-template-columns: repeat(2, 1fr);
  }

  .v2-shop-support__facts article:nth-child(2) {
    border-right: 0;
  }

  .v2-shop-support__facts article:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, 0.34);
  }

  .v2-merch-preview,
  .v2-product-story__grid {
    grid-template-columns: 1fr;
  }

  .v2-product-page {
    padding-bottom: 78px;
  }

  .v2-product-page .v2-font-switcher {
    bottom: 88px;
  }

  .v2-mobile-buy {
    position: fixed;
    inset: auto 0 0;
    z-index: 39;
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 16px;
    border-top: 1px solid var(--v2-line);
    background: rgba(255, 254, 250, 0.96);
    box-shadow: 0 -12px 32px rgba(24, 24, 23, 0.12);
    backdrop-filter: blur(14px);
  }

  .v2-mobile-buy span,
  .v2-mobile-buy strong {
    display: block;
  }

  .v2-mobile-buy span {
    color: var(--v2-muted);
    font-size: 11px;
  }

  .v2-mobile-buy strong {
    font-size: 17px;
    font-variant-numeric: tabular-nums;
  }

  .v2-mobile-buy button {
    min-height: 46px;
    border: 0;
    border-radius: var(--v2-radius-control);
    padding: 10px 18px;
    color: var(--v2-ink);
    background: var(--v2-red);
    font-size: 13px;
    font-weight: 800;
  }
}

@media (max-width: 620px) {
  .v2-mode-tabs {
    grid-template-columns: 1fr;
  }

  .v2-offer-builder__panel {
    padding: 30px 18px 38px;
  }

  .v2-offer-builder__visual {
    min-height: 56vh;
  }

  .v2-offer-builder__facts {
    inset: auto 14px 14px;
  }

  .v2-shop-support__facts {
    grid-template-columns: 1fr;
  }

  .v2-shop-support__facts article,
  .v2-shop-support__facts article:not(:first-child) {
    min-height: auto;
    padding: 24px 0;
    border-right: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.34);
  }

  .v2-merch-preview__media {
    height: 400px;
  }

  .v2-cart-preview__line {
    grid-template-columns: 64px 1fr;
  }

  .v2-cart-preview__line img {
    width: 64px;
    height: 84px;
  }

  .v2-cart-preview__line > strong {
    grid-column: 2;
  }
}

.v2-b2b-hero {
  padding-block: clamp(74px, 9vw, 132px);
  color: var(--v2-ink);
  background: var(--v2-red);
}

.v2-b2b-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(420px, 1.15fr);
  align-items: center;
  gap: clamp(46px, 8vw, 120px);
}

.v2-b2b-hero__media {
  min-height: 640px;
  overflow: hidden;
  border-radius: var(--v2-radius-card);
}

.v2-b2b-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v2-b2b-use {
  background: var(--v2-paper);
}

.v2-b2b-use > .v2-shell > .v2-display {
  max-width: 900px;
}

.v2-b2b-use__grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1fr 1.1fr;
  margin-top: clamp(54px, 8vw, 98px);
  border-top: 1px solid var(--v2-line);
}

.v2-b2b-use__grid article {
  min-height: 300px;
  padding: 28px 24px 28px 0;
  border-right: 1px solid var(--v2-line);
}

.v2-b2b-use__grid article:not(:first-child) {
  padding-left: 24px;
}

.v2-b2b-use__grid article:last-child {
  border-right: 0;
}

.v2-b2b-use__grid strong {
  font-family: var(--v2-display);
  font-size: clamp(27px, 3vw, 42px);
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.v2-b2b-use__grid p {
  color: var(--v2-muted);
}

.v2-b2b-process {
  padding-block: clamp(86px, 10vw, 144px);
  color: var(--v2-white);
  background: var(--v2-purple);
}

.v2-b2b-process__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(420px, 1.14fr);
  gap: clamp(50px, 9vw, 140px);
}

.v2-b2b-process ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.v2-b2b-process li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 20px;
  padding: 26px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.36);
}

.v2-b2b-process li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.36);
}

.v2-b2b-process li > span,
.v2-b2b-process h3 {
  font-family: var(--v2-display);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.v2-b2b-process h3,
.v2-b2b-process p {
  margin: 0;
}

.v2-b2b-process p {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.75);
}

.v2-b2b-close {
  padding-block: clamp(100px, 13vw, 190px);
  background: var(--v2-lime);
}

.v2-b2b-close .v2-display {
  max-width: 960px;
}

.v2-testimonial-hero {
  padding-block: clamp(100px, 13vw, 190px);
  background: var(--v2-blue);
}

.v2-testimonial-hero .v2-display {
  max-width: 1050px;
}

.v2-testimonial-hero .v2-lead {
  max-width: 720px;
}

.v2-testimonial-stage {
  padding-block: clamp(88px, 10vw, 150px);
  color: var(--v2-white);
  background: var(--v2-ink);
}

.v2-testimonial-stage__head {
  max-width: 920px;
  margin-bottom: clamp(54px, 8vw, 100px);
}

.v2-testimonial-slots {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1fr;
  gap: 12px;
}

.v2-testimonial-slot {
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--v2-radius-card);
  padding: clamp(24px, 3vw, 40px);
}

.v2-testimonial-slot--review {
  color: var(--v2-ink);
  background: var(--v2-red);
}

.v2-testimonial-slot--ugc {
  min-height: 420px;
  margin-top: 80px;
  background: var(--v2-purple);
}

.v2-testimonial-slot--press {
  background: #356f78;
}

.v2-testimonial-slot > span {
  font-size: 13px;
  font-weight: 800;
}

.v2-testimonial-slot h3 {
  margin: 0;
  font-family: var(--v2-display);
  font-size: clamp(31px, 3.8vw, 54px);
  letter-spacing: -0.045em;
  line-height: 0.96;
}

.v2-testimonial-slot p {
  color: rgba(255, 255, 255, 0.76);
}

.v2-testimonial-slot--review p {
  color: var(--v2-ink);
}

.v2-testimonial-slot--press p {
  color: var(--v2-white);
}

.v2-testimonial-slot > strong {
  width: fit-content;
  border-radius: var(--v2-radius-control);
  padding: 8px 11px;
  color: var(--v2-ink);
  background: var(--v2-white);
  font-size: 11px;
}

.v2-testimonial-media {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  color: var(--v2-white);
  background: var(--v2-red-deep);
}

.v2-testimonial-media__image {
  min-height: 760px;
}

.v2-testimonial-media__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v2-testimonial-media__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(46px, 7vw, 100px);
}

.v2-testimonial-media__copy p:not(.v2-kicker) {
  max-width: 42ch;
  color: rgba(255, 255, 255, 0.94);
}

.v2-testimonial-rules {
  padding-block: clamp(82px, 10vw, 140px);
  background: var(--v2-paper);
}

.v2-testimonial-rules__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: start;
  gap: clamp(40px, 8vw, 120px);
}

.v2-testimonial-rules ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.v2-testimonial-rules li {
  padding: 20px 0;
  border-top: 1px solid var(--v2-line);
  font-size: clamp(18px, 2vw, 26px);
}

.v2-testimonial-rules li:last-child {
  border-bottom: 1px solid var(--v2-line);
}

@media (max-width: 820px) {
  .v2-b2b-hero__grid,
  .v2-b2b-process__grid,
  .v2-testimonial-media,
  .v2-testimonial-rules__grid {
    grid-template-columns: 1fr;
  }

  .v2-b2b-hero__media {
    min-height: 480px;
  }

  .v2-b2b-use__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .v2-b2b-use__grid article:nth-child(2) {
    border-right: 0;
  }

  .v2-b2b-use__grid article:nth-child(n + 3) {
    border-top: 1px solid var(--v2-line);
  }

  .v2-testimonial-slots {
    grid-template-columns: 1fr;
  }

  .v2-testimonial-slot,
  .v2-testimonial-slot--ugc {
    min-height: 400px;
    margin-top: 0;
  }

  .v2-testimonial-media__image {
    min-height: 520px;
  }
}

@media (max-width: 620px) {
  .v2-b2b-use__grid {
    grid-template-columns: 1fr;
  }

  .v2-b2b-use__grid article,
  .v2-b2b-use__grid article:not(:first-child) {
    min-height: auto;
    padding: 24px 0;
    border-right: 0;
    border-top: 1px solid var(--v2-line);
  }

  .v2-b2b-hero__media,
  .v2-testimonial-media__image {
    min-height: 400px;
  }
}

@media (max-width: 620px) {
  body.preview-v2[data-v2-font="glofium"] .v2-display--hero {
    max-width: 100%;
    font-size: clamp(44px, 12.8vw, 59px);
    letter-spacing: 0.016em;
    line-height: 1.06;
  }

  body.preview-v2[data-v2-font="glofium"] .v2-display--xl {
    font-size: clamp(39px, 10.8vw, 53px);
  }

  body.preview-v2[data-v2-font="glofium"] .v2-display--lg {
    font-size: clamp(34px, 9.4vw, 47px);
  }

  body.preview-v2[data-v2-font="glofium"] .v2-display--md {
    font-size: clamp(29px, 8.2vw, 40px);
  }

  .v2-proof-stage__media {
    min-height: 360px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v2-electro-story {
    min-height: auto;
    background: var(--v2-red);
  }

  .v2-electro-story__grid {
    padding-bottom: 72px;
  }

  .v2-electro-visual {
    position: relative;
    top: auto;
    height: 520px;
  }

  .v2-electro-pack--purple {
    display: none;
  }

  .v2-electro-steps {
    padding-bottom: 0;
  }

  .v2-electro-step {
    min-height: auto;
    padding-block: 36px;
    opacity: 1;
    transform: none;
  }
}

/* Final v3 cascade overrides */
body.preview-v2[data-v2-font="glofium"] .v2-display,
body.preview-v2[data-v2-font="glofium"] .v2-mobile-menu nav a {
  letter-spacing: 0.075em;
  line-height: 1.22;
  word-spacing: 0.08em;
}

body.preview-v2[data-v2-font="glofium"] .v2-display--hero { font-size: clamp(48px, 5.6vw, 80px); letter-spacing: 0.07em; line-height: 1.19; }
body.preview-v2[data-v2-font="glofium"] .v2-display--xl { font-size: clamp(41px, 4.8vw, 68px); line-height: 1.22; }
body.preview-v2[data-v2-font="glofium"] .v2-display--lg { font-size: clamp(34px, 3.9vw, 54px); line-height: 1.21; }
body.preview-v2[data-v2-font="glofium"] .v2-display--md { font-size: clamp(28px, 3vw, 42px); line-height: 1.21; }
body.preview-v2[data-v2-font="glofium"] .v2-display--sm { font-size: clamp(21px, 2vw, 29px); letter-spacing: 0.065em; line-height: 1.22; }

.v2-testimonial-slot--ugc { background: #8f2630; }
.v2-testimonial-slot--press { color: var(--v2-ink); background: #ddcabb; }
.v2-testimonial-slot--press p { color: var(--v2-ink); }
.v3-program--ugc .v2-lead,
.v3-program--ugc .v3-program__terms span { opacity: 1; }
.v2-community-panel:first-child { background: var(--v2-ink); }
.v2-community-panel:last-child { background: var(--v2-red); }
.v2-b2b-close { background: #ddcabb; }

@media (max-width: 820px) {
  body.preview-v2[data-v2-font="glofium"] .v2-display--hero { font-size: clamp(38px, 10.2vw, 49px); letter-spacing: 0.07em; line-height: 1.22; }
  body.preview-v2[data-v2-font="glofium"] .v2-display--xl { font-size: clamp(34px, 9vw, 45px); line-height: 1.23; }
  body.preview-v2[data-v2-font="glofium"] .v2-display--lg { font-size: clamp(29px, 7.7vw, 39px); line-height: 1.23; }
}

/* Final shop motion cascade */
.v3-product-card--sachet .v3-product-card__media img {
  width: min(70%, 460px);
  max-height: 470px;
  transform: rotate(-3deg) scale(1.04);
}

.v3-flavour-marquee {
  font-family: var(--v2-body);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(255, 253, 248, 0.72);
}

.v3-product-card--sachet:hover .v3-product-card__media img,
.v3-product-card--sachet:focus-visible .v3-product-card__media img {
  transform: rotate(-1deg) scale(1.13);
}

body.preview-v2[data-v2-font="glofium"] .v3-product-card__body {
  grid-template-columns: 1fr;
}

body.preview-v2[data-v2-font="glofium"] .v3-product-card__price {
  text-align: left;
}

@media (max-width: 820px) {
  .v3-product-card--sachet .v3-product-card__media img {
    width: min(78%, 330px);
    max-height: 350px;
  }
}

/* V4 homepage scroll states and source-led Melonberry story */
body.preview-v2[data-v2-font="glofium"] .v2-display,
body.preview-v2[data-v2-font="glofium"] .v2-mobile-menu nav a {
  letter-spacing: 0.045em;
  line-height: 1.18;
  word-spacing: 0.045em;
}

body.preview-v2[data-v2-font="glofium"] .v2-display--hero {
  letter-spacing: 0.045em;
  line-height: 1.16;
}

body.preview-v2[data-v2-font="glofium"] .v2-display--sm {
  letter-spacing: 0.04em;
  line-height: 1.18;
}

.v3-electro-story {
  min-height: 240vh;
  color: #fff;
  background: var(--v2-red);
  /* No background-color transition: the colour change is carried by the
     right-to-left wipe layer (::after) instead of a crossfade. */
  transition: color 650ms ease;
}

.v3-electro-story::before {
  display: none;
}

.v3-electro-story[data-bg="1"] {
  color: #fff;
  background: #4b35d1;
}

.v3-electro-story[data-bg="2"] {
  color: var(--v2-ink);
  background: #ddcabb;
}

.v3-electro-story[data-bg="3"] {
  color: var(--v2-ink);
  background: #fff;
}

.v4-section-wave {
  position: absolute;
  top: -88px;
  left: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 90px;
  pointer-events: none;
}

.v4-section-wave path {
  fill: currentColor;
}

.v4-section-wave--red { color: var(--v2-red); }
.v4-section-wave--purple { color: #4b35d1; }
.v4-section-wave--nude { color: #ddcabb; }
.v4-section-wave--white { color: #fff; }

.v3-electro-story .v2-electro-story__intro {
  position: relative;
  top: auto;
  z-index: 4;
  padding-bottom: 0;
  pointer-events: none;
}

.v3-electro-story .v2-display--electro {
  max-width: 13ch;
  color: currentColor;
  font-size: clamp(48px, 6vw, 86px);
  line-height: 0.95;
}

.v2-electro-story__grid {
  margin-top: clamp(80px, 13vw, 188px);
}

.v2-electro-visual {
  height: 78vh;
  top: 11vh;
  overflow: visible;
}

.v2-electro-orbit {
  display: none;
}

.v2-electro-pack {
  width: min(33vw, 430px);
  max-height: 76vh;
  filter: drop-shadow(0 42px 42px rgba(35, 12, 24, 0.28));
  scale: 1;
  transition: opacity 720ms ease, transform 900ms var(--v2-ease), filter 650ms ease;
  animation: v4-pack-breathe 5.4s ease-in-out infinite;
}

@keyframes v4-pack-breathe {
  0%, 100% { scale: 1; }
  50% { scale: 1.035; }
}

.v2-electro-pack--red {
  transform: translate3d(-2%, 2%, 0);
}

.v2-electro-pack--purple {
  transform: translate3d(10%, 3%, 0) scale(0.93);
}

.v3-electro-story[data-stage="1"] .v2-electro-pack--red,
.v3-electro-story[data-stage="3"] .v2-electro-pack--red {
  opacity: 0;
  transform: translate3d(-14%, -1%, 0) scale(0.9);
}

.v3-electro-story[data-stage="1"] .v2-electro-pack--purple,
.v3-electro-story[data-stage="3"] .v2-electro-pack--purple {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.v3-electro-story[data-stage="2"] .v2-electro-pack--red {
  opacity: 1;
  transform: translate3d(5%, -1%, 0) scale(1.04);
}

.v3-electro-story[data-stage="2"] .v2-electro-pack--purple {
  opacity: 0;
}

.v3-electro-story .v2-electro-step {
  min-height: 52vh;
  opacity: 0.28;
  transform: translateY(42px);
  transition: opacity 650ms ease, transform 760ms var(--v2-ease);
}

.v3-electro-story .v2-electro-step.is-current {
  opacity: 1;
  transform: translateY(0);
}

.v3-electro-story .v2-electro-step > div {
  width: min(100%, 570px);
  padding: 0;
  color: currentColor;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.v3-electro-story .v2-electro-step strong,
.v3-electro-story .v2-electro-step h3,
.v3-electro-story .v2-electro-step p {
  color: currentColor;
}

.v3-electro-story .v2-electro-step p {
  opacity: 0.82;
}

.v3-story-layer {
  min-height: 100dvh;
  overflow: hidden;
  color: #fff;
  background: #4b35d1;
  clip-path: none;
}

.v3-story-layer__grid {
  position: relative;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
}

.v3-story-layer__media {
  position: absolute;
  inset: 0;
  min-height: 0;
}

.v3-story-layer__media::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(64, 35, 164, 0.95) 0%, rgba(64, 35, 164, 0.7) 43%, rgba(64, 35, 164, 0.12) 78%), linear-gradient(0deg, rgba(28, 18, 75, 0.72), transparent 62%);
}

.v3-story-layer__media img {
  filter: saturate(0.85) contrast(1.02);
}

.v3-story-layer__copy {
  position: relative;
  z-index: 2;
  width: min(720px, 90vw);
  padding: clamp(110px, 12vw, 170px) clamp(20px, 4vw, 56px);
}

.v3-subscription-layer {
  position: relative;
  border-radius: 0;
}

.v3-subscription-layer__media,
.v3-testimony-home__media {
  border-radius: 24px;
}

.v3-testimony-home {
  position: relative;
}

.v4-melonberry-story {
  position: relative;
  overflow: hidden;
  padding: clamp(96px, 12vw, 176px) 0;
  color: #fff;
  background: #4b35d1;
}

.v4-melonberry-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(360px, 0.96fr);
  gap: clamp(48px, 8vw, 120px);
  align-items: center;
}

.v4-melonberry-story__visual {
  position: relative;
  min-height: clamp(520px, 58vw, 760px);
  display: grid;
  place-items: center;
}

.v4-melonberry-story__visual img {
  position: relative;
  z-index: 2;
  width: min(78%, 560px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 44px 46px rgba(20, 12, 65, 0.32));
  animation: v4-pack-breathe 5.4s ease-in-out infinite;
}

.v4-melonberry-story__word {
  position: absolute;
  left: 50%;
  width: 130%;
  color: rgba(255, 255, 255, 0.12);
  font-size: clamp(58px, 9vw, 136px);
  font-weight: 850;
  letter-spacing: 0.025em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
}

.v4-melonberry-story__copy {
  position: relative;
  z-index: 3;
}

.v4-melonberry-story__support {
  margin: 20px 0 34px;
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.v4-ingredient-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.34);
}

.v4-ingredient-list > div {
  min-height: 94px;
  padding: 16px 18px 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.34);
}

.v4-ingredient-list > div:nth-child(even) {
  padding-left: 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.34);
}

.v4-ingredient-list strong,
.v4-ingredient-list span {
  display: block;
}

.v4-ingredient-list strong {
  font-size: 16px;
}

.v4-ingredient-list span {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.42;
}

@media (max-width: 820px) {
  body.preview-v2[data-v2-font="glofium"] .v2-display,
  body.preview-v2[data-v2-font="glofium"] .v2-mobile-menu nav a {
    letter-spacing: 0.045em;
    line-height: 1.19;
  }

  body.preview-v2[data-v2-font="glofium"] .v2-display--hero {
    letter-spacing: 0.042em;
    line-height: 1.17;
  }

  .v4-section-wave {
    top: -48px;
    height: 50px;
  }

  .v3-electro-story {
    min-height: 380vh;
    padding-top: 76px;
  }

  .v3-electro-story .v2-electro-story__intro {
    position: relative;
    top: auto;
    padding-bottom: 8px;
  }

  .v3-electro-story .v2-display--electro {
    max-width: 12ch;
    font-size: clamp(39px, 11.5vw, 57px);
  }

  .v3-electro-story .v2-electro-story__grid {
    display: block;
    margin-top: 0;
  }

  .v3-electro-story .v2-electro-visual {
    position: sticky;
    top: 84px;
    z-index: 2;
    height: 48vh;
    min-height: 330px;
  }

  .v2-electro-pack {
    width: min(84vw, 410px);
    max-height: 47vh;
  }

  .v3-electro-story .v2-electro-steps {
    position: relative;
    z-index: 3;
    margin-top: -8vh;
    padding: 0 0 14vh;
  }

  .v3-electro-story .v2-electro-step {
    min-height: 58vh;
    padding: 0 0 8vh;
    justify-content: flex-end;
    opacity: 0.18;
    transform: translateY(26px);
  }

  .v3-electro-story .v2-electro-step > div {
    width: 100%;
    padding: 28px 22px 30px 0;
    background: linear-gradient(90deg, rgba(239, 67, 56, 0.98) 0%, rgba(239, 67, 56, 0.92) 72%, rgba(239, 67, 56, 0) 100%);
  }

  .v3-electro-story[data-stage="1"] .v2-electro-step > div { background: linear-gradient(90deg, rgba(75, 53, 209, 0.98) 0%, rgba(75, 53, 209, 0.9) 72%, rgba(75, 53, 209, 0) 100%); }
  .v3-electro-story[data-stage="2"] .v2-electro-step > div { background: linear-gradient(90deg, rgba(221, 202, 187, 0.99) 0%, rgba(221, 202, 187, 0.92) 72%, rgba(221, 202, 187, 0) 100%); }
  .v3-electro-story[data-stage="3"] .v2-electro-step > div { background: linear-gradient(90deg, rgba(255, 255, 255, 0.99) 0%, rgba(255, 255, 255, 0.92) 72%, rgba(255, 255, 255, 0) 100%); }

  .v3-electro-story .v2-electro-step strong {
    font-size: clamp(58px, 19vw, 88px);
    line-height: 0.98;
    margin-bottom: 18px;
  }

  .v3-electro-story .v2-electro-step h3 {
    max-width: 11ch;
    font-size: clamp(31px, 8.6vw, 43px);
    line-height: 1.08;
  }

  .v3-electro-story .v2-electro-step p {
    max-width: 32ch;
    font-size: 17px;
  }

  .v3-story-layer__copy {
    width: 100%;
    padding: 110px clamp(20px, 4vw, 56px) 76px;
  }

  .v3-story-layer__media::after {
    background: linear-gradient(0deg, rgba(64, 35, 164, 0.96) 0%, rgba(64, 35, 164, 0.64) 58%, rgba(64, 35, 164, 0.14) 100%);
  }

  .v3-subscription-layer__media,
  .v3-testimony-home__media {
    border-radius: 18px;
  }

  .v4-melonberry-story__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .v4-melonberry-story__visual {
    min-height: 450px;
  }

  .v4-melonberry-story__visual img {
    width: min(88%, 430px);
  }

  .v4-ingredient-list {
    grid-template-columns: 1fr;
  }

  .v4-ingredient-list > div,
  .v4-ingredient-list > div:nth-child(even) {
    min-height: 0;
    padding: 15px 0;
    border-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v2-electro-pack,
  .v4-melonberry-story__visual img {
    animation: none;
  }

  .v3-electro-story {
    min-height: auto;
    color: #fff;
    background: var(--v2-red);
  }

  .v3-electro-story .v2-electro-visual {
    position: relative;
    top: auto;
  }

  .v3-electro-story .v2-electro-step {
    min-height: auto;
    opacity: 1;
  }
}

/* Final V4 type and Shop cascade */
body.preview-v2[data-v2-font="glofium"] .v2-display--hero { font-size: clamp(52px, 5.9vw, 84px); }
body.preview-v2[data-v2-font="glofium"] .v2-display--xl { font-size: clamp(44px, 5.1vw, 72px); }
body.preview-v2[data-v2-font="glofium"] .v2-display--lg { font-size: clamp(36px, 4.15vw, 58px); }
body.preview-v2[data-v2-font="glofium"] .v2-display--md { font-size: clamp(30px, 3.2vw, 45px); }
body.preview-v2[data-v2-font="glofium"] .v2-display--sm { font-size: clamp(22px, 2.15vw, 31px); }
.v2-shop-hero { min-height: clamp(430px, 58vh, 620px); display: flex; align-items: flex-end; padding-top: clamp(150px, 17vh, 210px); color: #fff; background: var(--v2-red); }
.v2-shop-hero .v2-lead { color: rgba(255, 255, 255, 0.84); }
.v3-shop-range__grid { max-width: 1180px; margin-inline: auto; gap: 22px; }
.v3-product-card { min-height: 570px; border-radius: 20px; }
.v3-product-card:nth-child(3), .v3-product-card:nth-child(4) { min-height: 450px; }
.v3-product-card__media { min-height: 320px; }
.v3-product-card:nth-child(3) .v3-product-card__media, .v3-product-card:nth-child(4) .v3-product-card__media { min-height: 260px; }
.v3-product-card--sachet .v3-product-card__media img { width: min(62%, 380px); max-height: 390px; }
.v3-flavour-marquee { font-size: clamp(68px, 7.6vw, 112px); animation: v3-flavour-loop 24s linear infinite; }
.v3-product-card--sachet:hover .v3-flavour-marquee, .v3-product-card--sachet:focus-visible .v3-flavour-marquee { animation-duration: 10s; }

@media (max-width: 820px) {
  body.preview-v2[data-v2-font="glofium"] .v2-display--hero { font-size: clamp(40px, 10.8vw, 52px); }
  body.preview-v2[data-v2-font="glofium"] .v2-display--xl { font-size: clamp(36px, 9.5vw, 48px); }
  body.preview-v2[data-v2-font="glofium"] .v2-display--lg { font-size: clamp(31px, 8.2vw, 42px); }
  .v2-shop-hero { min-height: 430px; padding-top: 138px; }
  .v3-product-card, .v3-product-card:nth-child(3), .v3-product-card:nth-child(4) { min-height: 0; }
  .v3-product-card__media, .v3-product-card:nth-child(3) .v3-product-card__media, .v3-product-card:nth-child(4) .v3-product-card__media { min-height: 300px; }
  .v3-product-card--sachet .v3-product-card__media img { width: min(72%, 300px); max-height: 320px; }
  .v3-flavour-marquee { font-size: clamp(54px, 17vw, 82px); }
}

@media (prefers-reduced-motion: reduce) {
  .v3-flavour-marquee,
  .v3-product-card--sachet:hover .v3-flavour-marquee,
  .v3-product-card--sachet:focus-visible .v3-flavour-marquee { animation: none; }
}

/* V6 commerce migration: mainxalt decision flow, stronger proof and responsive cart. */
body.preview-v2[data-v2-font="glofium"] .v2-display,
body.preview-v2[data-v2-font="glofium"] .v2-mobile-menu nav a {
  letter-spacing: 0.02em;
  line-height: 1.13;
  word-spacing: 0;
}

body.preview-v2[data-v2-font="glofium"] .v2-display--hero { letter-spacing: 0.018em; line-height: 1.1; }
body.preview-v2[data-v2-font="glofium"] .v2-display--xl { letter-spacing: 0.018em; line-height: 1.11; }
body.preview-v2[data-v2-font="glofium"] .v2-display--lg,
body.preview-v2[data-v2-font="glofium"] .v2-display--md,
body.preview-v2[data-v2-font="glofium"] .v2-display--sm { letter-spacing: 0.02em; line-height: 1.14; }

.v3-shop-range__head .v2-lead { max-width: 58ch; }
.v3-product-card__media { color: inherit; text-decoration: none; }
.v3-product-card__body h2 a { color: inherit; text-decoration: none; }

.v5-product-card__actions {
  display: grid;
  grid-column: 1 / -1;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding-top: 18px;
  border-top: 1px solid var(--v2-line);
}

.v5-quick-subscribe,
.v5-details-link {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 10px;
  padding: 12px 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.v5-quick-subscribe {
  border: 1px solid var(--v2-ink);
  color: var(--v2-white);
  background: var(--v2-ink);
  cursor: pointer;
  transition: background-color 220ms ease, transform 220ms ease;
}

.v5-quick-subscribe:hover,
.v5-quick-subscribe:focus-visible { background: var(--v2-red-deep); transform: translateY(-2px); }
.v5-quick-subscribe:active { transform: translateY(1px) scale(.99); }
.v5-details-link { border: 1px solid var(--v2-line); color: var(--v2-ink); text-decoration: none; }
.v5-details-link:hover,
.v5-details-link:focus-visible { border-color: var(--v2-ink); }

.v2-near-purchase-proof { background: #ddcabb; }

.v2-cart-preview__lines { display: grid; gap: 18px; }
.v2-cart-preview__line { grid-template-columns: 84px minmax(0, 1fr); align-items: start; }
.v2-cart-preview__line-main { min-width: 0; }
.v2-cart-preview__line-head,
.v2-cart-preview__schedule > span,
.v2-cart-preview__line-foot,
.v2-cart-preview__quantity { display: flex; align-items: center; }
.v2-cart-preview__line-head { align-items: start; justify-content: space-between; gap: 14px; }
.v2-cart-preview__line-head > strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.v2-cart-preview__plan { width: fit-content; display: inline-flex; margin-top: 8px; border: 1px solid var(--v2-line); border-radius: 999px; padding: 5px 8px; font-size: 10px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.v2-cart-preview__schedule { display: grid; gap: 5px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--v2-line); font-size: 12px; }
.v2-cart-preview__schedule > span { justify-content: space-between; gap: 16px; }
.v2-cart-preview__schedule strong { text-align: right; }
.v2-cart-preview__gift { margin: 10px 0 0; color: var(--v2-red-deep); font-size: 12px; font-weight: 800; }
.v2-cart-preview__line-foot { justify-content: space-between; gap: 16px; margin-top: 14px; }
.v2-cart-preview__quantity { border: 1px solid var(--v2-line); border-radius: 9px; overflow: hidden; }
.v2-cart-preview__quantity button { width: 34px; height: 34px; border: 0; color: var(--v2-ink); background: transparent; cursor: pointer; }
.v2-cart-preview__quantity span { min-width: 28px; text-align: center; font-size: 12px; font-weight: 800; }
.v2-cart-preview__remove { border: 0; border-bottom: 1px solid currentColor; padding: 3px 0; color: var(--v2-muted); background: transparent; font-size: 11px; font-weight: 800; cursor: pointer; }
.v2-cart-preview__totals { padding-top: 18px; border-top: 2px solid var(--v2-ink); font-size: 15px; }
.v2-cart-preview__totals strong { font-variant-numeric: tabular-nums; }

.v5-category-compare {
  position: relative;
  overflow: hidden;
  padding: clamp(92px, 12vw, 170px) 0;
  color: var(--v2-ink);
  background: #ddcabb;
}

.v5-category-compare::before {
  content: "XALT";
  position: absolute;
  top: -0.18em;
  right: -0.08em;
  color: rgba(239, 67, 56, .12);
  font-family: var(--v2-display);
  font-size: clamp(150px, 30vw, 480px);
  font-weight: 850;
  letter-spacing: -.08em;
  line-height: 1;
  pointer-events: none;
}

.v5-category-compare__head { position: relative; z-index: 1; max-width: 880px; margin-bottom: clamp(48px, 7vw, 86px); }
.v5-category-compare__head .v2-lead { max-width: 54ch; }
.v5-category-table { position: relative; z-index: 1; border-top: 2px solid var(--v2-ink); }
.v5-category-table__row { display: grid; grid-template-columns: 1.05fr 1fr 1fr 1fr; gap: clamp(12px, 2.4vw, 34px); padding: 19px 0; border-bottom: 1px solid rgba(24, 24, 23, .28); font-size: clamp(13px, 1.25vw, 16px); line-height: 1.35; }
.v5-category-table__row strong { font-weight: 850; }
.v5-category-table__row > :nth-child(2) { color: var(--v2-red-deep); }
.v5-category-table__row--head { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.v5-category-table__row--head > :nth-child(2) { width: fit-content; border-radius: 4px; padding: 4px 7px; color: var(--v2-white); background: var(--v2-red); }
.v5-category-compare__note { position: relative; z-index: 1; max-width: 60ch; margin: 18px 0 0; color: rgba(24, 24, 23, .68); font-size: 12px; }

.v5-testimony-final { padding-block: clamp(96px, 12vw, 170px); }
.v5-testimony-final__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); align-items: center; gap: clamp(46px, 8vw, 120px); }
.v5-proof-media-grid { min-height: 690px; display: grid; grid-template-columns: 1.08fr .92fr; grid-template-rows: 1fr 1fr; gap: 10px; }
.v5-proof-media-grid figure { position: relative; min-height: 0; margin: 0; overflow: hidden; border-radius: 18px; background: #ddcabb; }
.v5-proof-media-grid figure:first-child { grid-row: 1 / 3; }
.v5-proof-media-grid img { width: 100%; height: 100%; object-fit: cover; }
.v5-proof-media-grid figcaption { position: absolute; inset: auto 10px 10px; width: fit-content; border-radius: 999px; padding: 7px 10px; color: var(--v2-ink); background: rgba(255, 253, 248, .9); font-size: 10px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; backdrop-filter: blur(8px); }

@media (max-width: 820px) {
  body.preview-v2[data-v2-font="glofium"] .v2-display,
  body.preview-v2[data-v2-font="glofium"] .v2-mobile-menu nav a { letter-spacing: 0.02em; line-height: 1.15; }
  body.preview-v2[data-v2-font="glofium"] .v2-display--hero { line-height: 1.11; }
  .v5-product-card__actions { grid-template-columns: 1fr; }
  .v5-category-table { overflow-x: auto; overscroll-behavior-inline: contain; }
  .v5-category-table__row { min-width: 700px; }
  .v5-testimony-final__grid { grid-template-columns: 1fr; }
  .v5-proof-media-grid { min-height: 560px; }
}

@media (max-width: 620px) {
  .v2-cart-preview__line { grid-template-columns: 64px minmax(0, 1fr); }
  .v2-cart-preview__line > strong { grid-column: auto; }
  .v2-cart-preview__line-head { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .v2-cart-preview__line-head > strong { white-space: normal; }
  .v5-proof-media-grid { min-height: 650px; grid-template-columns: 1fr 1fr; grid-template-rows: 1.3fr .7fr; }
  .v5-proof-media-grid figure:first-child { grid-column: 1 / 3; grid-row: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .v5-quick-subscribe:hover,
  .v5-quick-subscribe:focus-visible { transform: none; }
}

/* V6 mobile purchase bar appears only after the primary CTA leaves view. */
@media (max-width: 820px) {
  .v2-mobile-buy {
    opacity: 0;
    pointer-events: none;
    transform: translateY(110%);
    transition: opacity 220ms ease, transform 320ms var(--v2-ease);
  }

  .v2-mobile-buy.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .v2-product-page .v2-font-switcher {
    bottom: calc(88px + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .v2-mobile-buy { transition: none; }
}

.v2-shop-hero .v2-lead { color: var(--v2-ink); }
.v3-flavour-marquee { color: rgba(255, 255, 255, 0.92); }

/* Direct Shop catalogue retained from V7. Purchase decisions stay on the PDP. */
.v7-shop-range .v3-shop-range__head { max-width: 760px; }
.v7-shop-range .v3-shop-range__grid { align-items: start; }
.v7-range-card { min-height: 0; }
.v7-range-card .v3-product-card__body { min-height: 290px; }
.v7-range-card .v5-details-link {
  grid-column: 1 / -1;
  margin-top: auto;
  width: 100%;
}

.v3-product-card--sachet .v3-product-card__media .v7-product-hover-bg {
  filter: saturate(.85) contrast(.9);
  height: 100%;
  inset: 0;
  max-height: none;
  object-fit: cover;
  opacity: 0;
  position: absolute;
  transform: scale(1.04);
  transition: opacity 380ms ease, transform 700ms var(--v2-ease), filter 380ms ease;
  width: 100%;
  z-index: 0;
}

.v3-product-card--sachet .v3-product-card__media .v7-product-pack {
  max-height: 390px;
  object-fit: contain;
  position: relative;
  transition: transform 560ms var(--v2-ease), filter 380ms ease;
  width: min(62%, 380px);
  z-index: 3;
}

.v7-range-card .v3-product-card__media::after {
  background: linear-gradient(180deg, rgba(18, 16, 15, .08), rgba(18, 16, 15, .36));
  opacity: 0;
  transition: opacity 360ms ease;
  z-index: 1;
}

.v7-range-card .v3-flavour-marquee {
  font-size: clamp(58px, 6vw, 88px);
  gap: clamp(40px, 4vw, 64px);
  letter-spacing: .045em;
  z-index: 2;
}

.v7-range-card:hover .v7-product-hover-bg,
.v7-range-card:focus-within .v7-product-hover-bg {
  filter: saturate(1) contrast(1);
  opacity: 1;
  transform: scale(1);
}

.v7-range-card:hover .v3-product-card__media::after,
.v7-range-card:focus-within .v3-product-card__media::after { opacity: 1; }

.v7-range-card:hover .v7-product-pack,
.v7-range-card:focus-within .v7-product-pack {
  filter: drop-shadow(0 22px 28px rgba(0, 0, 0, .2));
  transform: scale(1.08) rotate(-2deg);
}

@media (max-width: 620px) {
  .v7-range-card .v3-product-card__body { min-height: 0; }
  .v3-product-card--sachet .v3-product-card__media .v7-product-pack {
    max-height: 320px;
    width: min(72%, 300px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .v7-range-card:hover .v7-product-hover-bg,
  .v7-range-card:focus-within .v7-product-hover-bg,
  .v7-range-card:hover .v7-product-pack,
  .v7-range-card:focus-within .v7-product-pack { transform: none; }
}


/* ─────────────────────────────────────────────────────────────
   USP strip + use-case segmentation
   ───────────────────────────────────────────────────────────── */

.v5-usp-strip {
  background: var(--v2-ink);
  color: var(--v2-white);
  padding: 26px 0;
}

.v5-usp-strip__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.v5-usp {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  text-align: center;
  padding: 0 10px;
  border-left: 1px solid rgba(255, 254, 250, 0.18);
}

.v5-usp:first-child { border-left: 0; }

.v5-usp strong {
  font-family: var(--v2-display);
  font-size: clamp(1.5rem, 2.4vw, 2.05rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.v5-usp span {
  font-size: 0.78rem;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 254, 250, 0.68);
}

.v5-usecases {
  background: var(--v2-paper);
  padding: clamp(64px, 8vw, 104px) 0;
}

.v5-usecases__head {
  max-width: 22ch;
  margin-bottom: clamp(32px, 4vw, 52px);
}

.v5-usecases__head .v2-kicker { margin-bottom: 12px; }

.v5-usecases__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 28px);
  align-items: stretch;
}

.v5-usecase {
  display: flex;
  flex-direction: column;
  background: var(--v2-white);
  border-radius: var(--v2-radius-card);
  overflow: hidden;
  border: 1px solid var(--v2-line);
}

.v5-usecase__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--v2-paper);
}

.v5-usecase__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms var(--v2-ease);
}

.v5-usecase:hover .v5-usecase__media img { transform: scale(1.04); }

.v5-usecase__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(20px, 2vw, 28px);
  flex: 1;
}

.v5-usecase__who {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v2-red);
  margin: 0;
}

.v5-usecase__body p:last-child {
  margin: 0;
  color: var(--v2-muted);
  line-height: 1.5;
}

@media (max-width: 980px) {
  .v5-usecases__grid { grid-template-columns: 1fr; }
  .v5-usp-strip__list { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
  .v5-usp { border-left: 0; align-items: flex-start; text-align: left; padding: 0; }
  .v5-usp:last-child { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .v5-usecase__media img,
  .v5-usecase:hover .v5-usecase__media img { transition: none; transform: none; }
}


/* ─────────────────────────────────────────────────────────────
   Testimony — quote row + UGC collection grid
   ───────────────────────────────────────────────────────────── */

.v5-testimony__head {
  max-width: 62ch;
  margin-bottom: clamp(34px, 4vw, 56px);
}

.v5-testimony__head .v2-kicker { margin-bottom: 12px; }

.v5-quote-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 26px);
  align-items: stretch;
  margin-bottom: clamp(56px, 7vw, 92px);
}

.v5-quote {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: clamp(22px, 2.4vw, 32px);
  background: var(--v2-white);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-radius-card);
}

.v5-quote__flag {
  margin: 0;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v2-muted);
}

.v5-quote__stars {
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  color: var(--v2-red);
  line-height: 1;
}

.v5-quote__body {
  margin: 0;
  flex: 1;
}

.v5-quote__body p {
  margin: 0;
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.5;
  color: var(--v2-ink);
}

.v5-quote__by {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 12px;
  border-top: 1px solid var(--v2-line);
}

.v5-quote__by strong { font-size: 0.92rem; }

.v5-quote__by span {
  font-size: 0.78rem;
  color: var(--v2-muted);
}

.v5-ugc__head {
  max-width: 54ch;
  margin-bottom: clamp(20px, 2.5vw, 30px);
}

.v5-ugc__head p {
  margin: 8px 0 0;
  color: var(--v2-muted);
}

.v5-ugc__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(10px, 1.2vw, 16px);
}

.v5-ugc__tile {
  position: relative;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--v2-paper);
  border: 1px solid var(--v2-line);
}

.v5-ugc__tile img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

.v5-ugc__tile figcaption {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 12px 13px;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--v2-muted);
}

.v5-ugc__flag {
  align-self: flex-start;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--v2-ink);
  color: var(--v2-white);
  font-size: 0.6rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.v5-testimony__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(44px, 5vw, 68px);
}

@media (max-width: 980px) {
  .v5-quote-row { grid-template-columns: 1fr; }
  .v5-ugc__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
  .v5-ugc__grid { grid-template-columns: repeat(2, 1fr); }
  .v5-testimony__foot { flex-direction: column; align-items: flex-start; }
}


/* ─────────────────────────────────────────────────────────────
   PDP — mode badges + delivery schedule
   ───────────────────────────────────────────────────────────── */

.v2-mode-tab { position: relative; }

.v2-mode-tab__badge {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--v2-red);
  color: var(--v2-white);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.v2-mode-tab__badge--quiet {
  background: transparent;
  color: var(--v2-muted);
  border: 1px solid var(--v2-line);
  font-weight: 600;
}

.v3-schedule {
  margin: 22px 0 4px;
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-radius-card);
  background: var(--v2-white);
}

.v3-schedule[hidden] { display: none; }

.v3-schedule h2 {
  margin: 0 0 14px;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-muted);
}

.v3-schedule__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.v3-schedule__row {
  display: grid;
  grid-template-columns: minmax(96px, auto) minmax(72px, auto) 1fr auto;
  align-items: baseline;
  gap: 6px 14px;
  padding: 12px 0;
  border-top: 1px solid var(--v2-line);
}

.v3-schedule__row:first-child { border-top: 0; padding-top: 0; }

.v3-schedule__n {
  font-weight: 700;
  font-size: 0.88rem;
}

.v3-schedule__when {
  font-size: 0.78rem;
  color: var(--v2-muted);
}

.v3-schedule__what {
  font-size: 0.86rem;
  line-height: 1.4;
}

.v3-schedule__amount {
  font-size: 0.94rem;
  white-space: nowrap;
}

.v3-schedule__row.is-gift .v3-schedule__what {
  color: var(--v2-red);
  font-weight: 600;
}

.v3-schedule__note {
  margin: 14px 0 0;
  font-size: 0.76rem;
  color: var(--v2-muted);
}

@media (max-width: 560px) {
  .v3-schedule__row {
    grid-template-columns: 1fr auto;
  }
  .v3-schedule__when { grid-column: 1 / -1; order: 2; }
  .v3-schedule__what { grid-column: 1 / -1; order: 3; }
  .v3-schedule__amount { order: 1; }
}


/* ─────────────────────────────────────────────────────────────
   Affiliate — tiers, payout terms, UpPromote slots
   ───────────────────────────────────────────────────────────── */

.v5-tier-table {
  display: flex;
  flex-direction: column;
  margin: clamp(22px, 3vw, 32px) 0;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-radius-card);
  overflow: hidden;
  background: var(--v2-white);
}

.v5-tier {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr 2fr;
  align-items: baseline;
  gap: 6px 16px;
  padding: 14px clamp(16px, 2vw, 22px);
  border-top: 1px solid var(--v2-line);
}

.v5-tier:first-child { border-top: 0; }

.v5-tier--head {
  background: var(--v2-paper);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--v2-muted);
}

.v5-tier__name { font-weight: 700; }

.v5-tier__rate {
  font-family: var(--v2-display);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--v2-red);
}

.v5-tier__req,
.v5-tier__note {
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--v2-muted);
}

.v5-payout-note {
  margin: clamp(22px, 3vw, 32px) 0;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--v2-radius-card);
  background: var(--v2-paper);
  border: 1px solid var(--v2-line);
}

.v5-payout-note h3 {
  margin: 0 0 12px;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-muted);
}

.v5-payout-note ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.v5-payout-note li {
  font-size: 0.92rem;
  line-height: 1.45;
}

.v5-payout-note__honest {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--v2-line);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--v2-muted);
}

.v5-app-slot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin: clamp(22px, 3vw, 32px) 0;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px dashed var(--v2-line);
  border-radius: var(--v2-radius-card);
  background: var(--v2-white);
}

.v5-app-slot p {
  margin: 0;
  color: var(--v2-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.v5-app-slot__tag {
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--v2-ink);
  color: var(--v2-white);
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.v5-dashboard-mock {
  margin: clamp(22px, 3vw, 32px) 0 0;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px dashed var(--v2-line);
  border-radius: var(--v2-radius-card);
  background: var(--v2-white);
}

.v5-dashboard-mock figcaption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--v2-muted);
}

.v5-dashboard-mock__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.v5-dashboard-mock__grid > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border-radius: 14px;
  background: var(--v2-paper);
}

.v5-dashboard-mock__grid span {
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--v2-muted);
}

.v5-dashboard-mock__grid strong {
  font-family: var(--v2-display);
  font-size: 1.3rem;
  line-height: 1.1;
}

@media (max-width: 820px) {
  .v5-tier,
  .v5-tier--head {
    grid-template-columns: 1fr 1fr;
  }
  .v5-tier--head { display: none; }
  .v5-tier__req,
  .v5-tier__note { grid-column: 1 / -1; }
  .v5-dashboard-mock__grid { grid-template-columns: repeat(2, 1fr); }
}

/* V9: clean commerce typography, concise homepage story and simpler Shop. */
.v2-display {
  font-family: var(--v2-heading-clean);
  font-stretch: 94%;
  font-weight: 650;
  letter-spacing: -0.042em;
  line-height: 0.98;
  text-wrap: balance;
}

.v2-display--hero { font-size: clamp(50px, 6.2vw, 92px); line-height: 0.98; }
.v2-display--xl { font-size: clamp(44px, 5.4vw, 76px); }
.v2-display--lg { font-size: clamp(36px, 4.2vw, 58px); }
.v2-display--md { font-size: clamp(30px, 3.2vw, 44px); }
.v2-display--sm { font-size: clamp(23px, 2.2vw, 31px); line-height: 1.02; }

.v2-display--brand {
  font-family: var(--v2-brand-display);
  font-stretch: normal;
  font-weight: 650;
}

body.preview-v2[data-v2-font="glofium"] .v2-display,
body.preview-v2[data-v2-font="glofium"] .v2-mobile-menu nav a,
body.preview-v2[data-v2-font="glofium"] .v2-footer__wordmark {
  font-family: var(--v2-heading-clean) !important;
  font-weight: 650;
  letter-spacing: -0.042em !important;
  line-height: 0.98 !important;
}

body.preview-v2[data-v2-font="glofium"] .v2-display--brand {
  font-family: var(--v2-brand-display) !important;
  font-weight: 400;
  letter-spacing: 0.012em !important;
  line-height: 1.12 !important;
}

.v2-font-switcher button { white-space: nowrap; }

.v2-mobile-font-switcher { display: none; }

.v9-benefits {
  padding: clamp(72px, 7vw, 96px) 0;
  background: var(--v2-paper);
}

.v9-benefits__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  align-items: center;
  gap: clamp(48px, 8vw, 118px);
}

.v9-benefits__copy { max-width: 620px; }
.v9-benefits__copy > .v2-lead { margin: 24px 0 0; color: var(--v2-muted); }
.v9-benefits__copy > .v2-button { margin-top: 32px; }

.v9-benefits__list {
  display: grid;
  gap: 0;
  margin: 36px 0 0;
  padding: 0;
  border-top: 1px solid var(--v2-line);
  list-style: none;
}

.v9-benefits__list li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid var(--v2-line);
}

.v9-benefits__list li > span {
  color: var(--v2-red-deep);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.v9-benefits__list h3 { margin: 0; font: 650 20px/1.08 var(--v2-heading-clean); letter-spacing: -0.025em; }
.v9-benefits__list p { max-width: 52ch; margin: 7px 0 0; color: var(--v2-muted); font-size: 15px; line-height: 1.48; }

.v9-benefits__media {
  position: relative;
  min-height: clamp(500px, 46vw, 620px);
  margin: 0;
  overflow: hidden;
  border-radius: 22px;
  background: #ddcabb;
}

.v9-benefits__media img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.v9-benefits__media figcaption { position: absolute; inset: auto 18px 18px; width: fit-content; border-radius: 999px; padding: 8px 12px; color: var(--v2-ink); background: rgba(255,254,250,.9); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(10px); }

.v3-shop-range__head { max-width: 760px; }
.v3-shop-range__head .v2-kicker { margin-bottom: 12px; }
.v3-shop-range__head .v2-lead { margin-top: 18px; color: var(--v2-muted); }
.v3-product-card__body .v2-kicker { margin: 0 0 8px; }
.v3-shop-range { padding-block: clamp(76px, 7vw, 96px); }
.v3-shop-range .v3-product-card__media { min-height: 280px; }
.v3-shop-range .v3-product-card__body { min-height: 250px; }

.v9-electro-story {
  min-height: 152vh;
  padding: clamp(96px, 10vw, 132px) 0 0;
  color: var(--v2-ink);
  background: #ddcabb;
  transition: none;
}

.v9-electro-story::before,
.v9-electro-story::after { display: none; }
.v9-electro-story .v2-electro-story__intro { padding-bottom: clamp(38px, 5vw, 66px); }
.v9-electro-story .v2-electro-story__intro .v2-kicker { margin-bottom: 12px; }
.v9-electro-story .v2-electro-story__intro h2 { max-width: 760px; }
.v9-electro-story .v2-electro-story__grid { grid-template-columns: minmax(340px, .9fr) minmax(340px, .72fr); gap: clamp(46px, 9vw, 132px); }
.v9-electro-story .v2-electro-visual { height: 68vh; min-height: 520px; top: 14vh; }
.v9-electro-story .v2-electro-pack { width: min(25vw, 320px); max-height: 59vh; animation: v2-pack-breathe 4.8s ease-in-out infinite; transform: rotate(-5deg); }
.v9-electro-orbit { position: absolute; inset: 11% 6%; border: 1px solid rgba(24,24,23,.18); border-radius: 50%; }

.v9-electro-illustration {
  position: absolute;
  right: 2%;
  bottom: 10%;
  width: clamp(108px, 11vw, 160px);
  fill: none;
  stroke: var(--v2-red-deep);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
  opacity: 0;
  transform: translateY(16px) scale(.92);
  transition: opacity 360ms ease, transform 620ms var(--v2-ease);
}

.v9-electro-story[data-stage="0"] [data-v2-electro-illustration="0"],
.v9-electro-story[data-stage="1"] [data-v2-electro-illustration="1"],
.v9-electro-story[data-stage="2"] [data-v2-electro-illustration="2"] { opacity: 1; transform: translateY(0) scale(1); }

.v9-electro-story .v2-electro-steps { padding-bottom: 12vh; }
.v9-electro-story .v2-electro-step { min-height: 38vh; opacity: .2; }
.v9-electro-story .v2-electro-step.is-current { opacity: 1; }
.v9-electro-story .v2-electro-step > div { padding: 0; color: inherit; background: transparent; box-shadow: none; }
.v9-electro-story .v2-electro-step strong { color: var(--v2-red-deep); font-family: var(--v2-body); font-size: 12px; font-weight: 850; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; }
.v9-electro-story .v2-electro-step h3 { max-width: 13ch; margin-top: 18px; color: var(--v2-ink); font: 650 clamp(34px, 3.8vw, 54px)/.98 var(--v2-heading-clean); letter-spacing: -.04em; }
.v9-electro-story .v2-electro-step p { max-width: 38ch; margin-top: 18px; color: rgba(24,24,23,.68); font-size: clamp(16px, 1.5vw, 19px); line-height: 1.5; }

.v5-category-compare { padding-block: clamp(72px, 7vw, 96px); }
.v5-testimony-final { padding-block: clamp(72px, 7vw, 96px); }
.v5-testimony__head .v2-lead { max-width: 72ch; font-size: 16px; }
.v5-quote-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v5-quote:nth-child(3) { display: none; }
.v5-quote-row { margin-bottom: 48px; }
.v5-ugc__tile:nth-child(n+5) { display: none; }
.v5-ugc__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v5-ugc__tile img { height: auto; }
.v5-testimony__foot .v3-proof-list { display: none; }
.v5-testimony__foot { margin-top: 38px; }

.v2-shop-hero { min-height: clamp(390px, 50vh, 540px); padding-top: clamp(138px, 15vh, 180px); }
.v2-shop-hero .v2-kicker { margin-bottom: 12px; color: rgba(255,255,255,.74); }
.v2-shop-hero .v2-lead { max-width: 60ch; color: rgba(255,255,255,.86); }
.v9-shop { padding-top: clamp(72px, 8vw, 108px); }
.v9-shop .v3-shop-range__head { margin-bottom: clamp(30px, 4vw, 50px); }
.v9-shop__electrolytes .v7-range-card { min-height: 0; }
.v9-shop__electrolytes .v3-product-card__media { min-height: 290px; }
.v9-shop__electrolytes .v7-range-card .v3-product-card__body { min-height: 245px; }
.v9-shop__electrolytes .v3-product-card__body > div:first-child > p:last-child { margin-bottom: 0; color: var(--v2-muted); }

.v9-addons { display: grid; grid-template-columns: minmax(180px,.38fr) minmax(0,1fr); gap: clamp(28px, 5vw, 72px); align-items: start; margin-top: clamp(58px, 8vw, 108px); padding-top: 32px; border-top: 1px solid var(--v2-line); }
.v9-addons__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.v9-addons__grid article { display: grid; grid-template-columns: 136px minmax(0,1fr); gap: 20px; align-items: center; padding: 12px; border: 1px solid var(--v2-line); border-radius: 16px; background: var(--v2-white); }
.v9-addons__grid img { width: 136px; height: 122px; border-radius: 10px; object-fit: cover; }
.v9-addons__grid article:last-child img { object-position: 72% center; }
.v9-addons__grid h3 { margin: 0; font: 650 20px/1.05 var(--v2-heading-clean); letter-spacing: -.03em; }
.v9-addons__grid p { margin: 8px 0 0; color: var(--v2-muted); font-size: 13px; line-height: 1.45; }

@media (max-width: 980px) {
  .v9-benefits__grid { grid-template-columns: 1fr; }
  .v9-benefits__copy { max-width: 720px; }
  .v9-benefits__media { min-height: min(680px, 86vw); }
  .v9-electro-story { min-height: 158vh; }
  .v9-electro-story .v2-electro-story__grid { grid-template-columns: minmax(280px,.8fr) minmax(300px,1fr); gap: 34px; }
  .v9-addons { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .v2-display--hero { font-size: clamp(40px, 11vw, 50px); }
  .v2-display--xl { font-size: clamp(38px, 10vw, 46px); }
  .v2-display--lg { font-size: clamp(33px, 8.8vw, 40px); }
  .v2-display--md { font-size: clamp(29px, 7.7vw, 36px); }
  .v2-display--sm { font-size: clamp(24px, 6.7vw, 30px); }
  body.preview-v2[data-v2-font="glofium"] .v2-display--brand { letter-spacing: .01em !important; line-height: 1.14 !important; }
  .v2-font-switcher { display: none; }
  .v2-hero__motion-toggle { display: none; }
  .v2-mobile-menu__foot { flex-wrap: wrap; gap: 14px; }
  .v2-mobile-font-switcher {
    display: flex;
    width: 100%;
    gap: 6px;
    padding-top: 4px;
  }
  .v2-mobile-font-switcher button {
    flex: 1 1 0;
    border: 1px solid rgba(24, 24, 23, .34);
    border-radius: 999px;
    padding: 9px 10px;
    color: var(--v2-ink);
    background: transparent;
    font: 700 11px/1 var(--v2-ui);
  }
  .v2-mobile-font-switcher button[aria-pressed="true"] {
    color: var(--v2-paper);
    background: var(--v2-ink);
  }
  .v9-benefits { padding-block: 72px; }
  .v9-benefits__grid { gap: 42px; }
  .v9-benefits__media { min-height: 360px; }
  .v9-benefits__list h3 { font-size: 19px; }
  .v9-benefits__copy > .v2-button { width: 100%; }
  .v9-electro-story { min-height: 158vh; padding-top: 82px; }
  .v9-electro-story .v2-electro-story__grid { display: block; }
  .v9-electro-story .v2-electro-visual { height: 39vh; min-height: 300px; top: 76px; z-index: 1; }
  .v9-electro-story .v2-electro-pack { width: min(45vw, 190px); max-height: 34vh; }
  .v9-electro-orbit { inset: 7% 12%; }
  .v9-electro-illustration { right: 6%; bottom: 8%; width: 94px; stroke-width: 4.5; }
  .v9-electro-story .v2-electro-steps { position: relative; z-index: 2; margin-top: -2vh; padding-bottom: 8vh; }
  .v9-electro-story .v2-electro-step { min-height: 39vh; justify-content: flex-end; padding-bottom: 5vh; opacity: .24; }
  .v9-electro-story .v2-electro-step > div { max-width: 100%; padding: 18px; border-radius: 14px; background: rgba(255,254,250,.93); box-shadow: 0 12px 42px rgba(24,24,23,.08); }
  .v9-electro-story .v2-electro-step h3 { font-size: clamp(30px, 8.3vw, 38px); }
  .v5-category-table__row { min-width: 650px; }
  .v3-shop-range__grid {
    display: flex;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .v3-shop-range__grid::-webkit-scrollbar { display: none; }
  .v3-shop-range__grid > .v3-product-card { flex: 0 0 min(84vw, 330px); scroll-snap-align: center; }
  .v3-shop-range .v3-product-card__media,
  .v9-shop__electrolytes .v3-product-card__media { min-height: 230px; }
  .v3-shop-range .v3-product-card__body { min-height: 300px; }
  .v5-quote-row,
  .v5-ugc__grid {
    display: flex;
    margin-inline: 0;
    padding-inline: 0 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .v5-quote-row::-webkit-scrollbar,
  .v5-ugc__grid::-webkit-scrollbar { display: none; }
  .v5-quote { flex: 0 0 min(82vw, 330px); scroll-snap-align: center; }
  .v5-ugc__tile { flex: 0 0 min(64vw, 250px); scroll-snap-align: center; }
  .v2-shop-hero { min-height: 390px; padding-top: 132px; }
  .v9-shop__electrolytes .v3-product-card__media { min-height: 270px; }
  .v9-shop__electrolytes .v7-range-card .v3-product-card__body { min-height: 0; }
  .v9-addons__grid { grid-template-columns: 1fr; }
  .v9-addons__grid article { grid-template-columns: 112px minmax(0,1fr); }
  .v9-addons__grid img { width: 112px; height: 104px; }
}

@media (prefers-reduced-motion: reduce) {
  .v9-electro-story .v2-electro-pack { animation: none; }
  .v9-electro-illustration { transition: none; }
}

/* V10: restore the approved expressive homepage. Glofium is the homepage
   display system again; commerce pages keep Instrument Sans for clarity. */
body.v2-home[data-v2-font="glofium"] main h1,
body.v2-home[data-v2-font="glofium"] main h2,
body.v2-home[data-v2-font="glofium"] main h3,
body.v2-home[data-v2-font="glofium"] .v2-display {
  font-family: var(--v2-brand-display) !important;
  font-stretch: normal;
  font-weight: 400;
  letter-spacing: .014em !important;
  line-height: 1.13 !important;
}

body.v2-home .v5-usecases__head { max-width: min(100%, 920px); }

body.v2-home[data-v2-font="glofium"] .v2-display--hero {
  letter-spacing: .01em !important;
  line-height: 1.1 !important;
}

body.v2-home .v5-quote-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.v2-home .v5-quote:nth-child(3) { display: block; }
body.v2-home .v5-ugc__tile:nth-child(n+5) { display: block; }
body.v2-home .v5-ugc__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
body.v2-home .v5-testimony__foot .v3-proof-list { display: grid; }

@media (max-width: 620px) {
  body.v2-home[data-v2-font="glofium"] main h1,
  body.v2-home[data-v2-font="glofium"] main h2,
  body.v2-home[data-v2-font="glofium"] main h3,
  body.v2-home[data-v2-font="glofium"] .v2-display {
    letter-spacing: .012em !important;
    line-height: 1.15 !important;
  }
  body.v2-home[data-v2-font="glofium"] .v2-display--hero { line-height: 1.12 !important; }
  body.v2-home .v3-shop-range__grid,
  body.v2-home .v5-quote-row,
  body.v2-home .v5-ugc__grid {
    display: grid;
    grid-template-columns: 1fr;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
  body.v2-home .v3-shop-range__grid > .v3-product-card,
  body.v2-home .v5-quote,
  body.v2-home .v5-ugc__tile { width: auto; }
}


/* ─────────────────────────────────────────────────────────────
   XALT placeholder system (.xph)
   Purpose-built stand-ins for unshot media. Deliberately designed
   rather than grey boxes, so a placeholder never reads as a bug —
   and never as a real photograph either. Each carries its own brief.
   ───────────────────────────────────────────────────────────── */

.xph {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  aspect-ratio: var(--xph-ar, 3 / 4);
  padding: 18px;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  color: var(--v2-ink);
  background:
    radial-gradient(115% 85% at 18% 10%, hsl(var(--xph-h, 8) 74% 63% / 0.5), transparent 58%),
    radial-gradient(105% 80% at 88% 92%, hsl(calc(var(--xph-h, 8) + 22) 66% 52% / 0.42), transparent 60%),
    linear-gradient(158deg, #f7f3ea 0%, #e6dfd2 100%);
}

/* Fine grain so the gradient never looks like a broken image fill. */
.xph::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  background-image: radial-gradient(circle at 1px 1px, rgba(24, 24, 23, 0.16) 1px, transparent 0);
  background-size: 7px 7px;
}

.xph__mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 254, 250, 0.72);
  border: 1px solid rgba(24, 24, 23, 0.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.xph__mark svg { width: 19px; height: 19px; display: block; }

.xph__label {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--v2-ink);
  color: var(--v2-white);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.xph__spec {
  font-size: 0.68rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: rgba(24, 24, 23, 0.66);
  max-width: 22ch;
}

/* Wide variants for banner/story slots */
.xph--wide { --xph-ar: 16 / 10; }
.xph--square { --xph-ar: 1 / 1; }

@media (prefers-reduced-motion: reduce) {
  .xph { transition: none; }
}


/* ─────────────────────────────────────────────────────────────
   Marquee band — full-width rhythm break between sections.
   Two identical halves translated -50% for a seamless loop, so
   there is no visible jump at the wrap point. Transform-only.
   ───────────────────────────────────────────────────────────── */

.v5-marquee {
  overflow: hidden;
  padding: clamp(14px, 1.8vw, 22px) 0;
  background: var(--v2-red);
  color: var(--v2-white);
  border-block: 1px solid rgba(24, 24, 23, 0.12);
}

.v5-marquee--ink { background: var(--v2-ink); }
.v5-marquee--paper { background: var(--v2-paper); color: var(--v2-ink); }

.v5-marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(22px, 3vw, 46px);
  width: max-content;
  animation: v5-marquee-loop 34s linear infinite;
  will-change: transform;
}

.v5-marquee__word {
  font-family: var(--v2-display);
  font-size: clamp(30px, 4.6vw, 62px);
  font-weight: 760;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.v5-marquee__dot {
  flex: none;
  width: clamp(7px, 0.8vw, 11px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}

@keyframes v5-marquee-loop {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Pause on hover so the words stay readable if someone stops to look. */
.v5-marquee:hover .v5-marquee__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .v5-marquee__track { animation: none; }
  .v5-marquee { display: flex; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   V11 — GLOFIUM SITEWIDE

   Glofium is the brand display face. It was only reaching the
   homepage: an earlier rule forces --v2-heading-clean (Instrument
   Sans) onto .v2-display whenever glofium is selected, and the V10
   fix that undid it was scoped to body.v2-home. Every other page
   therefore rendered in Instrument. This applies Glofium across the
   whole site.

   Glofium's letterforms collide when set tight, so the leading and
   tracking stay at the collision-safe values rather than being
   pulled in. Impact comes from scale instead — the hero and section
   heads step up hard so the hierarchy reads without crowding.
   ═══════════════════════════════════════════════════════════════ */

body.preview-v2[data-v2-font="glofium"] .v2-display,
body.preview-v2[data-v2-font="glofium"] .v2-display--brand,
body.preview-v2[data-v2-font="glofium"] .v2-footer__wordmark,
body.preview-v2[data-v2-font="glofium"] .v2-mobile-menu nav a,
body.preview-v2[data-v2-font="glofium"] main h1,
body.preview-v2[data-v2-font="glofium"] main h2,
body.preview-v2[data-v2-font="glofium"] main h3 {
  font-family: var(--v2-brand-display) !important;
  font-weight: 400 !important;
  font-stretch: normal !important;
  letter-spacing: 0.014em !important;
  line-height: 1.13 !important;
  text-transform: none;
  text-wrap: balance;
}

/* Scale contrast carries the impact, since the face cannot be
   tightened. The hero should dominate, not sit a notch above the
   section heads. */
body.preview-v2[data-v2-font="glofium"] .v2-display--hero { font-size: clamp(54px, 7.4vw, 112px) !important; }
body.preview-v2[data-v2-font="glofium"] .v2-display--xl   { font-size: clamp(44px, 5.8vw, 84px)  !important; }
body.preview-v2[data-v2-font="glofium"] .v2-display--lg   { font-size: clamp(36px, 4.4vw, 62px)  !important; }
body.preview-v2[data-v2-font="glofium"] .v2-display--md   { font-size: clamp(29px, 3.2vw, 44px)  !important; }
body.preview-v2[data-v2-font="glofium"] .v2-display--sm   { font-size: clamp(22px, 2.1vw, 30px)  !important; }

/* Mobile needs a touch more leading — the face crowds faster at
   small sizes on a narrow measure. */
@media (max-width: 820px) {
  body.preview-v2[data-v2-font="glofium"] .v2-display,
  body.preview-v2[data-v2-font="glofium"] main h1,
  body.preview-v2[data-v2-font="glofium"] main h2,
  body.preview-v2[data-v2-font="glofium"] main h3 {
    line-height: 1.18 !important;
  }
}

/* Kickers take their contrast from wide tracking against the
   display, and stay in the body face for legibility at small size. */
body.preview-v2 .v2-kicker {
  font-family: var(--v2-body);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ============================================================
   Motion variants — 2026-08-23

   Extends the existing [data-v2-reveal] system rather than
   replacing it. The IntersectionObserver in xalt-v2.js already
   toggles .is-visible; every variant below simply describes a
   different way of arriving. No JS change, and a bare
   data-v2-reveal keeps its original fade-and-rise exactly.

   Variants are opt-in:  data-v2-reveal="blinds"
   Tunable per element:  style="--v2-reveal-delay: 120ms"
   ============================================================ */

@property --v2-blind-open {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

[data-v2-reveal="fade"],
[data-v2-reveal="blinds"],
[data-v2-reveal="stagger"],
[data-v2-reveal="wipe"],
[data-v2-reveal="pop"] {
  --v2-reveal-delay: 0ms;
  --v2-reveal-duration: 760ms;
}

/* 1 · Fade — the house default, with a longer travel and a
   softer settle than the base rule. For headings and copy. */
[data-v2-reveal="fade"] {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity var(--v2-reveal-duration) ease,
    transform var(--v2-reveal-duration) var(--v2-ease);
  transition-delay: var(--v2-reveal-delay);
}

[data-v2-reveal="fade"].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 2 · Blinds — slats sweep open across the element. The mask is
   a repeating gradient whose lit band grows from nothing to the
   full slat height, so the content arrives in strips.
   --v2-blind-band sets slat size: 12.5% = eight slats. */
[data-v2-reveal="blinds"] {
  --v2-blind-band: 12.5%;
  --v2-blind-open: 0%;
  opacity: 1;
  transform: none;
  -webkit-mask-image: repeating-linear-gradient(
    to bottom,
    #000 0 var(--v2-blind-open),
    transparent var(--v2-blind-open) var(--v2-blind-band)
  );
  mask-image: repeating-linear-gradient(
    to bottom,
    #000 0 var(--v2-blind-open),
    transparent var(--v2-blind-open) var(--v2-blind-band)
  );
  transition: --v2-blind-open var(--v2-reveal-duration) var(--v2-ease);
  transition-delay: var(--v2-reveal-delay);
}

[data-v2-reveal="blinds"].is-visible {
  --v2-blind-open: var(--v2-blind-band);
}

/* Vertical slats instead of horizontal. */
[data-v2-reveal="blinds"][data-v2-reveal-axis="x"] {
  -webkit-mask-image: repeating-linear-gradient(
    to right,
    #000 0 var(--v2-blind-open),
    transparent var(--v2-blind-open) var(--v2-blind-band)
  );
  mask-image: repeating-linear-gradient(
    to right,
    #000 0 var(--v2-blind-open),
    transparent var(--v2-blind-open) var(--v2-blind-band)
  );
}

/* 3 · Stagger — children cascade instead of the parent moving.
   Put it on a grid or list; the parent itself stays put so the
   layout never shifts. Twelve steps covers the longest row on
   the site (the footer link lists); anything beyond lands with
   the twelfth. */
[data-v2-reveal="stagger"] {
  opacity: 1;
  transform: none;
}

[data-v2-reveal="stagger"] > * {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 620ms ease,
    transform 620ms var(--v2-ease);
}

[data-v2-reveal="stagger"].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

[data-v2-reveal="stagger"].is-visible > *:nth-child(1)  { transition-delay: calc(var(--v2-reveal-delay) + 0ms); }
[data-v2-reveal="stagger"].is-visible > *:nth-child(2)  { transition-delay: calc(var(--v2-reveal-delay) + 70ms); }
[data-v2-reveal="stagger"].is-visible > *:nth-child(3)  { transition-delay: calc(var(--v2-reveal-delay) + 140ms); }
[data-v2-reveal="stagger"].is-visible > *:nth-child(4)  { transition-delay: calc(var(--v2-reveal-delay) + 210ms); }
[data-v2-reveal="stagger"].is-visible > *:nth-child(5)  { transition-delay: calc(var(--v2-reveal-delay) + 280ms); }
[data-v2-reveal="stagger"].is-visible > *:nth-child(6)  { transition-delay: calc(var(--v2-reveal-delay) + 350ms); }
[data-v2-reveal="stagger"].is-visible > *:nth-child(7)  { transition-delay: calc(var(--v2-reveal-delay) + 420ms); }
[data-v2-reveal="stagger"].is-visible > *:nth-child(8)  { transition-delay: calc(var(--v2-reveal-delay) + 490ms); }
[data-v2-reveal="stagger"].is-visible > *:nth-child(9)  { transition-delay: calc(var(--v2-reveal-delay) + 560ms); }
[data-v2-reveal="stagger"].is-visible > *:nth-child(10) { transition-delay: calc(var(--v2-reveal-delay) + 630ms); }
[data-v2-reveal="stagger"].is-visible > *:nth-child(11) { transition-delay: calc(var(--v2-reveal-delay) + 700ms); }
[data-v2-reveal="stagger"].is-visible > *:nth-child(n + 12) { transition-delay: calc(var(--v2-reveal-delay) + 770ms); }

/* 4 · Wipe — a directional curtain. Echoes the colour wipe the
   homepage story already uses, so it reads as the same family.
   Default sweeps up; set the axis attribute to change it. */
[data-v2-reveal="wipe"] {
  opacity: 1;
  transform: none;
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--v2-reveal-duration) var(--v2-ease);
  transition-delay: var(--v2-reveal-delay);
}

[data-v2-reveal="wipe"].is-visible {
  clip-path: inset(0 0 0 0);
}

[data-v2-reveal="wipe"][data-v2-reveal-from="left"]   { clip-path: inset(0 100% 0 0); }
[data-v2-reveal="wipe"][data-v2-reveal-from="right"]  { clip-path: inset(0 0 0 100%); }
[data-v2-reveal="wipe"][data-v2-reveal-from="top"]    { clip-path: inset(0 0 100% 0); }

[data-v2-reveal="wipe"][data-v2-reveal-from="left"].is-visible,
[data-v2-reveal="wipe"][data-v2-reveal-from="right"].is-visible,
[data-v2-reveal="wipe"][data-v2-reveal-from="top"].is-visible {
  clip-path: inset(0 0 0 0);
}

/* 5 · Pop — overshoots slightly and settles. The back-out curve
   does the spring work. For cards, product media and anything
   that should feel physical rather than editorial. */
[data-v2-reveal="pop"] {
  opacity: 0;
  transform: scale(0.94) translateY(18px);
  transition:
    opacity 420ms ease,
    transform var(--v2-reveal-duration) cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: var(--v2-reveal-delay);
}

[data-v2-reveal="pop"].is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Reduced motion. This has to be restated here: the sitewide
   reduce block sits earlier in the file, and these rules would
   otherwise win on source order and animate anyway. */
@media (prefers-reduced-motion: reduce) {
  [data-v2-reveal="fade"],
  [data-v2-reveal="blinds"],
  [data-v2-reveal="stagger"],
  [data-v2-reveal="wipe"],
  [data-v2-reveal="pop"],
  [data-v2-reveal="stagger"] > * {
    opacity: 1;
    transform: none;
    clip-path: none;
    -webkit-mask-image: none;
    mask-image: none;
    transition: none;
    transition-delay: 0ms;
  }
}

/* ============================================================
   Homepage build — flavours, ingredients, credentials
   2026-08-24

   Liquid glass, used sparingly. drinkxalt.com puts glass on six
   elements across the whole page — chips and one form panel —
   and that restraint is what keeps it off the tech-company look.
   Here it earns a place on the ingredient and credential cards
   and nowhere else: flavour cards, the comparison table and the
   product cards all stay solid.
   ============================================================ */

:root {
  --v6-cream: #fff1e5;          /* drinkxalt.com ground, warmer than --v2-paper */
  --v6-hairline: rgba(14, 11, 8, 0.13);
  --v6-glass-tint: rgba(255, 253, 248, 0.72);
  --v6-glass-solid: #fffaf3;    /* fallback where backdrop-filter is unsupported */
}

/* ---- shared glass ------------------------------------------ */

/* Solid by default. The frosted version is additive, behind a
   support query, so an unsupporting browser gets an opaque card
   rather than unreadable transparency. */
.v6-glass {
  background: var(--v6-glass-solid);
  border: 1px solid var(--v6-hairline);
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(14, 11, 8, 0.08);
}

@supports ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .v6-glass {
    background: var(--v6-glass-tint);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

.v6-pending {
  margin: 10px 0 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(24, 24, 23, 0.5);
}

/* ---- 1 · flavours ------------------------------------------- */

.v6-flavours {
  padding-block: clamp(80px, 10vw, 140px);
  background: var(--v2-paper);
}

.v6-flavours__head {
  max-width: 60ch;
  margin-bottom: clamp(36px, 5vw, 62px);
}

.v6-flavours__head .v2-lead { margin-top: 14px; }

.v6-flavours__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 26px);
}

.v6-flavour {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--v2-radius-card);
  background: var(--v2-white);
}

.v6-flavour__media {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(260px, 30vw, 400px);
  overflow: hidden;
}

/* The flavour word sits behind the pack as a ground, echoing the
   marquee treatment the shop cards already use. */
.v6-flavour__word {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  translate: 0 -50%;
  font-family: var(--v2-display);
  font-size: clamp(46px, 7vw, 104px);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.24);
  pointer-events: none;
}

.v6-flavour__media img {
  position: relative;
  width: min(62%, 300px);
  height: auto;
  transition: transform 620ms var(--v2-ease);
}

.v6-flavour:hover .v6-flavour__media img { transform: scale(1.045); }

.v6-flavour--watermelon .v6-flavour__media { background: var(--v2-red); }
.v6-flavour--melonberry .v6-flavour__media { background: #a93437; }

.v6-flavour__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(22px, 2.6vw, 32px);
}

.v6-flavour__body p { margin: 0; color: var(--v2-muted); }

.v6-flavour__profile {
  font-weight: 700;
  color: var(--v2-ink) !important;
}

.v6-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.v6-chip {
  padding: 6px 12px;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-radius-control);
  font-size: 12px;
  color: var(--v2-ink);
}

/* The unannounced third flavour reads as a held space, not a
   product — outlined rather than filled, and it never pretends
   to be a card you can buy. */
.v6-flavour--next {
  grid-column: 1 / -1;
  border: 1px dashed rgba(24, 24, 23, 0.28);
  background: transparent;
}

.v6-flavour--next .v6-flavour__body { gap: 8px; }

/* ---- 2 · ingredients ---------------------------------------- */

.v6-inside {
  position: relative;
  isolation: isolate;
  padding-block: clamp(84px, 11vw, 150px);
  background: var(--v6-cream);
  overflow: hidden;
}

/* Glass needs something behind it or the blur has nothing to
   catch. These are the only colour on the section and they stay
   under 0.2 alpha so they read as warmth, not as a second palette. */
.v6-inside::before,
.v6-credentials::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(60vw, 720px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 67, 56, 0.18), transparent 68%);
  top: -14%;
  right: -12%;
  pointer-events: none;
}

.v6-inside::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(52vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(125, 31, 43, 0.14), transparent 68%);
  bottom: -18%;
  left: -10%;
  pointer-events: none;
}

.v6-inside__head {
  max-width: 62ch;
  margin-bottom: clamp(34px, 4.5vw, 56px);
}

.v6-inside__head .v2-lead { margin-top: 14px; }

.v6-inside__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.v6-ingredient { padding: clamp(22px, 2.4vw, 30px); }

.v6-ingredient h3 {
  margin: 0 0 8px;
  font-family: var(--v2-display);
  font-size: clamp(17px, 1.5vw, 21px);
}

.v6-ingredient p {
  margin: 0;
  color: var(--v2-muted);
  font-size: 14.5px;
  line-height: 1.55;
}

.v6-ingredient--negative h3 { color: var(--v2-red-deep); }

.v6-inside__panel {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-top: clamp(16px, 2vw, 22px);
  padding: clamp(24px, 3vw, 36px);
  border: 1px dashed rgba(24, 24, 23, 0.3);
  border-radius: var(--v2-radius-card);
}

.v6-inside__panel-copy { max-width: 64ch; }
.v6-inside__panel-copy h3 { margin: 0 0 8px; }
.v6-inside__panel-copy p { margin: 0; color: var(--v2-muted); }
.v6-inside__panel .v6-pending { margin: 0; }

/* ---- 3 · credentials ---------------------------------------- */

.v6-credentials {
  position: relative;
  isolation: isolate;
  padding-block: clamp(72px, 9vw, 120px);
  background: var(--v6-cream);
  overflow: hidden;
}

.v6-credentials__head {
  max-width: 52ch;
  margin-bottom: clamp(28px, 3.6vw, 44px);
}

.v6-credentials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(262px, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.v6-credential { padding: clamp(22px, 2.4vw, 30px); }

.v6-credential h3 {
  margin: 0 0 8px;
  font-family: var(--v2-display);
  font-size: clamp(17px, 1.5vw, 21px);
}

.v6-credential p {
  margin: 0;
  color: var(--v2-muted);
  font-size: 14.5px;
  line-height: 1.55;
}

/* ---- 4 · comparison table, now five columns ------------------ */

.v5-category-table--four .v5-category-table__row {
  grid-template-columns: 1.05fr 1fr 1fr 1fr 1fr;
}

.v5-category-compare__note em { font-style: italic; }

/* ---- responsive ---------------------------------------------- */

@media (max-width: 820px) {
  /* Five columns need more room before the table starts scrolling
     horizontally than the three-column version did. */
  .v5-category-table--four .v5-category-table__row { min-width: 880px; }

  .v6-flavours__grid { grid-template-columns: 1fr; }
  .v6-inside__panel { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 620px) {
  .v5-category-table--four .v5-category-table__row { min-width: 820px; }

  .v6-flavour__media { min-height: 240px; }
  .v6-flavour__word { font-size: clamp(38px, 13vw, 58px); }
}

/* ============================================================
   Section reveals — angled and circle
   2026-08-24

   Two more arrival shapes for [data-v2-reveal], same contract as
   the rest: the observer in xalt-v2.js toggles .is-visible and
   the shape does the work. Longer and slower than the page
   defaults — a whole section arriving should feel unhurried,
   where a paragraph arriving should not.
   ============================================================ */

[data-v2-reveal="angled"],
[data-v2-reveal="circle"] {
  --v2-reveal-delay: 0ms;
  --v2-reveal-duration: 980ms;
}

/* Angled — the leading edge is a slanted line that travels up
   the section. The 12% offset between the two top corners is
   what keeps it from reading as an ordinary wipe; the bottom
   edge never moves, so nothing appears to slide. */
[data-v2-reveal="angled"] {
  opacity: 1;
  transform: none;
  clip-path: polygon(0% 100%, 100% 112%, 100% 100%, 0% 100%);
  transition: clip-path var(--v2-reveal-duration) var(--v2-ease);
  transition-delay: var(--v2-reveal-delay);
}

[data-v2-reveal="angled"].is-visible {
  clip-path: polygon(0% -12%, 100% 0%, 100% 100%, 0% 100%);
}

/* Mirror the slant for alternating sections, so consecutive
   angled reveals don't read as a repeated tic. */
[data-v2-reveal="angled"][data-v2-reveal-from="right"] {
  clip-path: polygon(0% 112%, 100% 100%, 100% 100%, 0% 100%);
}

[data-v2-reveal="angled"][data-v2-reveal-from="right"].is-visible {
  clip-path: polygon(0% 0%, 100% -12%, 100% 100%, 0% 100%);
}

/* Circle — opens from a corner rather than the centre, which
   gives the section a direction to arrive from. 142% is the
   reach needed to clear the far corner of a wide viewport. */
[data-v2-reveal="circle"] {
  opacity: 1;
  transform: none;
  clip-path: circle(0% at 28% 100%);
  transition: clip-path var(--v2-reveal-duration) var(--v2-ease);
  transition-delay: var(--v2-reveal-delay);
}

[data-v2-reveal="circle"].is-visible {
  clip-path: circle(142% at 28% 100%);
}

[data-v2-reveal="circle"][data-v2-reveal-from="right"] { clip-path: circle(0% at 74% 100%); }
[data-v2-reveal="circle"][data-v2-reveal-from="right"].is-visible { clip-path: circle(142% at 74% 100%); }

/* Restated locally: the sitewide reduce block sits far earlier in
   this file, so without this these would win on source order. */
@media (prefers-reduced-motion: reduce) {
  [data-v2-reveal="angled"],
  [data-v2-reveal="circle"] {
    clip-path: none;
    transition: none;
    transition-delay: 0ms;
  }
}

/* ============================================================
   Shop — full-bleed colour rhythm
   2026-08-24

   drinkpoppi.com reads as a strong scroll experience but runs no
   scroll animation at all: no library, no reveal hooks, one
   marquee. The effect is entirely art direction — tall full-bleed
   sections alternating between two brand colours, so the page
   changes colour under you as you scroll.

   Applied here with XALT's own palette. The hero is already red,
   so the range lands on warm cream and the extras return to ink:
   three distinct grounds instead of one continuous page.
   ============================================================ */

.v9-shop {
  padding-block: clamp(88px, 12vw, 168px);
  background: var(--v6-cream);
}

/* The seam between two full-bleed grounds is where this either
   reads as deliberate or as a mistake. A generous curve on the
   leading edge makes the next colour feel like it is arriving
   rather than abutting. */
.v9-shop {
  position: relative;
  margin-top: -34px;
  border-start-start-radius: clamp(28px, 4vw, 56px);
  border-start-end-radius: clamp(28px, 4vw, 56px);
}

.v9-addons {
  position: relative;
  margin-top: clamp(-40px, -3vw, -24px);
  padding-block: clamp(78px, 10vw, 140px);
  padding-inline: clamp(20px, 4vw, 64px);
  border-start-start-radius: clamp(28px, 4vw, 56px);
  border-start-end-radius: clamp(28px, 4vw, 56px);
  color: var(--v2-white);
  background: var(--v2-ink);
}

.v9-addons .v2-kicker { color: var(--v2-lime); }
.v9-addons h2,
.v9-addons h3 { color: var(--v2-white); }
.v9-addons p { color: rgba(255, 255, 255, 0.74); }

/* Cards sat on white by default, which disappears against the new
   cream ground. Give them their own surface back. */
.v9-shop .v3-product-card { background: var(--v2-white); }

/* Sticky range bar — poppi keeps a buy control with you the whole
   way down the product page. The shop equivalent is a persistent
   route to the PDP, since this page lists a range rather than one
   product. Hidden until the hero has left, so it never competes
   with the page's own opening call to action. */
.v9-shop-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--v2-layer-header);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 14px clamp(18px, 4vw, 44px);
  color: var(--v2-white);
  background: var(--v2-ink);
  transform: translateY(100%);
  transition: transform 520ms var(--v2-ease);
}

.v9-shop-bar.is-visible { transform: translateY(0); }

.v9-shop-bar__copy { display: flex; flex-direction: column; gap: 2px; }
.v9-shop-bar__copy strong { font-size: 15px; }
.v9-shop-bar__copy span { font-size: 12.5px; color: rgba(255, 255, 255, 0.68); }
.v9-shop-bar__actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (prefers-reduced-motion: reduce) {
  .v9-shop-bar { transition: none; }
}

@media (max-width: 620px) {
  .v9-shop-bar { justify-content: center; text-align: center; }
  .v9-shop-bar__copy { align-items: center; }
}

/* ============================================================
   Graza-led commerce refinement — comparison branch only
   The product image leads, the decision column stays quiet, and
   the secondary-heading control is review tooling rather than a
   public storefront setting.
   ============================================================ */

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("./xalt-instrument-serif-regular.woff2") format("woff2");
}

:root {
  --xg-secondary-heading: "Bricolage Grotesque", "Host Grotesk", sans-serif;
  --xg-hairline: color-mix(in srgb, var(--v2-ink) 18%, transparent);
}

body.preview-v2[data-xg-secondary="bricolage"] { --xg-secondary-heading: "Bricolage Grotesque", "Host Grotesk", sans-serif; }



.xg-secondary-heading {
  max-width: 15ch;
  margin: 0;
  font-family: var(--xg-secondary-heading);
  font-size: clamp(38px, 4.3vw, 68px);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.96;
  text-wrap: balance;
}

.xg-text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin-top: 28px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 5px;
  color: inherit;
  font-family: "Instrument Sans", "Host Grotesk", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-decoration: none;
  text-transform: uppercase;
}

.xg-text-link span { transition: transform 220ms var(--v2-ease); }
.xg-text-link:hover span { transform: translateY(4px); }

.xg-font-switcher {
  position: fixed;
  right: 16px;
  bottom: 76px;
  z-index: 55;
  display: grid;
  gap: 8px;
  max-width: min(350px, calc(100vw - 32px));
  padding: 11px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 15px;
  color: var(--v2-white);
  background: rgba(24,24,23,.9);
  box-shadow: 0 16px 40px rgba(24,24,23,.2);
  backdrop-filter: blur(14px);
}

.xg-font-switcher > span {
  color: rgba(255,255,255,.62);
  font-family: "Instrument Sans", sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.xg-font-switcher div { display: flex; flex-wrap: wrap; gap: 5px; }
.xg-font-switcher button {
  min-height: 28px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  padding: 5px 8px;
  color: rgba(255,255,255,.75);
  background: transparent;
  font: 600 10px/1 "Instrument Sans", sans-serif;
  cursor: pointer;
}
.xg-font-switcher button[aria-pressed="true"] { border-color: var(--v2-lime); color: var(--v2-ink); background: var(--v2-lime); }

body::after {
  position: fixed;
  z-index: 999;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  pointer-events: none;
  background: var(--v2-red);
  transform: translateY(100%);
  transition: transform 260ms cubic-bezier(.76,0,.24,1);
}
html.xg-is-navigating body::after { transform: translateY(0); }

.xg-shop-hero {
  position: relative;
  isolation: isolate;
  min-height: 270px;
  display: grid;
  align-items: end;
  padding-top: 0;
  overflow: hidden;
  color: var(--v2-white);
  background: var(--v2-ink);
}

.xg-shop-hero::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  content: "";
  opacity: .42;
  background: linear-gradient(90deg, rgba(24,24,23,.96) 0%, rgba(24,24,23,.62) 62%, rgba(24,24,23,.28)), url("./xalt-everyday-v4.webp") center 42% / cover;
}
.xg-shop-hero::after {
  position: absolute;
  z-index: -1;
  inset: auto -7vw -36vw auto;
  width: 48vw;
  aspect-ratio: 1;
  border-radius: 50%;
  content: "";
  background: var(--v2-red);
  mix-blend-mode: screen;
}
.xg-shop-hero .v2-shell { padding-bottom: 30px; }
.xg-shop-hero .v2-kicker { color: var(--v2-lime); }
.xg-shop-hero .v2-display { max-width: none; margin-bottom: 6px; color: inherit; font-size: clamp(38px, 5vw, 66px); text-wrap: balance; }
.xg-shop-hero .v2-lead { max-width: 54ch; margin: 0; color: rgba(255,255,255,.8); font-size: 14px; }

.xg-shop-index { margin-top: 0; border-radius: 0; padding-block: 28px 58px; background: var(--v2-paper); }
.xg-shop-index .v3-shop-range__head { display: grid; grid-template-columns: auto minmax(220px, 1fr) auto; align-items: end; gap: 22px; max-width: none; margin-bottom: 22px; }
.xg-shop-index .v3-shop-range__head .v2-lead { max-width: 34ch; margin: 0; }
.xg-shop-quick-actions { display: flex; align-items: center; gap: 9px; }
.xg-shop-quick-actions a {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--v2-ink);
  border-radius: var(--v2-radius-selection);
  padding: 9px 15px;
  color: var(--v2-ink);
  background: var(--v2-white);
  box-shadow: none;
  font-size: 11px;
  text-decoration: none;
  transition: box-shadow 250ms ease, transform 250ms ease, background-color 250ms ease;
}
.xg-shop-quick-actions strong { font-variant-numeric: tabular-nums; }
.xg-shop-quick-actions a:hover,
.xg-shop-quick-actions a:focus-visible { border-color: var(--v2-red); background: color-mix(in srgb, var(--v2-red) 8%, var(--v2-white)); box-shadow: none; transform: translateY(-1px); }
.xg-shop-index .v3-shop-range__grid { max-width: none; gap: clamp(14px, 2vw, 28px); }
.xg-product-card { overflow: clip; border: 1px solid var(--xg-hairline); border-radius: 20px; background: var(--v2-white); box-shadow: none; }
.xg-product-card .v3-product-card__media { min-height: clamp(250px, 25vw, 340px); border-radius: 19px 19px 0 0; }
.xg-product-card .v7-product-pack { width: min(56%, 300px); transition: transform 700ms cubic-bezier(.16,1,.3,1); }
.xg-product-card:hover .v7-product-pack { transform: translateY(-12px) rotate(-2deg) scale(1.035); }
.xg-product-card .v3-product-card__body { min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px 24px; padding: 18px 20px 22px; }
.xg-product-card .v3-product-card__body h2 { margin: 4px 0; }
.xg-product-card .v3-product-card__body p { max-width: 38ch; margin: 0; font-size: 13px; }
.xg-product-card .v3-product-card__price { align-self: end; border: 0; padding: 0; text-align: right; }
.xg-card-cta {
  grid-column: 1 / -1;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2px 4px 4px 0;
  border: 1px solid var(--v2-ink);
  border-radius: 9999px;
  padding: 11px 18px;
  color: var(--v2-white);
  background: var(--v2-ink);
  box-shadow: 4px 4px 0 var(--v2-red);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: box-shadow 250ms ease, transform 250ms ease, background-color 250ms ease;
}
.xg-card-cta:hover,
.xg-card-cta:focus-visible { background: var(--v2-red-deep); box-shadow: 6px 6px 0 var(--v2-ink); transform: translate(-2px,-2px); }
.xg-card-cta:active { box-shadow: 2px 2px 0 var(--v2-ink); transform: translate(2px,2px); }

body.v2-product-page .xg-pdp-layout {
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 56fr) minmax(420px, 44fr);
  gap: 0;
  padding: 0;
}

.xg-pdp-gallery {
  top: 0;
  height: 100svh;
  padding-top: 0;
}
.xg-pdp-gallery .v3-gallery__stage {
  min-height: 100%;
  height: 100%;
  border-radius: 0;
  background: var(--v2-red);
}
.xg-pdp-gallery .v3-gallery__stage img { max-height: none; padding: clamp(30px, 6vw, 108px); }
.xg-pdp-gallery .v3-gallery__caption { bottom: 26px; left: 26px; right: auto; border: 1px solid rgba(24,24,23,.14); box-shadow: none; }
.xg-pdp-gallery .v3-gallery__thumbs { position: absolute; z-index: 2; right: 20px; bottom: 20px; width: min(310px, 44%); margin: 0; }
.xg-pdp-gallery .v3-gallery__thumbs button { border: 0; border-radius: 0; background: rgba(255,254,250,.9); backdrop-filter: blur(8px); }

.xg-pdp-purchase {
  width: min(100%, 650px);
  margin-inline: auto;
  padding: 76px clamp(26px, 5vw, 66px) 76px;
}
.xg-pdp-purchase .v3-purchase-heading { margin-bottom: 16px; }
.xg-pdp-purchase .v3-purchase-heading h1 { max-width: 12ch; margin-block: 5px 8px; font-size: clamp(38px, 4vw, 58px); line-height: .98; letter-spacing: -.055em; }
.xg-pdp-purchase .v3-purchase-heading > p:not(.v2-kicker) { max-width: 46ch; margin: 0; color: var(--v2-muted); font-size: 13px; line-height: 1.4; }
.xg-pdp-purchase .v3-purchase-heading__meta { display: none; }
.xg-pdp-purchase .v2-option { margin: 0; border-top: 1px solid var(--xg-hairline); padding: 12px 0 0; }
.xg-pdp-purchase .v2-option + .v2-option { margin-top: 12px; }
.xg-pdp-purchase .v2-option legend { margin-bottom: 8px; color: var(--v2-muted); font-family: "Instrument Sans", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.xg-pdp-purchase .v2-option__choices,
.xg-pdp-purchase .v2-mode-tabs,
.xg-pdp-purchase .v2-box-options { gap: 8px; }
.xg-pdp-purchase .v2-mode-tabs { padding: 0; background: transparent; }
.xg-pdp-purchase [data-v2-frequency-group] .v2-option__choices { grid-template-columns: repeat(3,minmax(0,1fr)); }
.xg-pdp-purchase [data-v2-frequency-group] .v2-option__choice { justify-content: center; padding-inline: 8px; text-align: center; }
.xg-pdp-purchase .v2-option__choice,
.xg-pdp-purchase .v2-mode-tab,
.xg-pdp-purchase .v2-box-option {
  min-height: 56px;
  border: 1px solid var(--xg-hairline);
  border-radius: var(--v2-radius-selection);
  padding: 11px 13px;
  color: var(--v2-ink);
  background: var(--v2-white);
  box-shadow: none;
  transition: border-color 250ms ease, background-color 250ms ease, transform 250ms ease;
}
.xg-pdp-purchase .v2-option__choice:hover,
.xg-pdp-purchase .v2-option__choice:focus-visible,
.xg-pdp-purchase .v2-mode-tab:hover,
.xg-pdp-purchase .v2-mode-tab:focus-visible,
.xg-pdp-purchase .v2-box-option:hover,
.xg-pdp-purchase .v2-box-option:focus-visible { border-color: var(--v2-ink); transform: translateY(-1px); }
.xg-pdp-purchase .v2-option__choice[aria-pressed="true"],
.xg-pdp-purchase .v2-mode-tab[aria-pressed="true"],
.xg-pdp-purchase .v2-box-option[aria-pressed="true"] { border-color: var(--v2-ink); color: var(--v2-ink); background: var(--v2-lime); box-shadow: inset 0 0 0 1px var(--v2-ink); }
.xg-pdp-purchase .v2-mode-tab { min-height: 74px; }
.xg-pdp-purchase .v2-mode-tab__badge { right: 8px; bottom: 7px; color: var(--v2-ink); background: rgba(255,255,255,.78); }
.xg-pdp-purchase .v2-mode-tab__badge--quiet { background: rgba(255,255,255,.78); }
.xg-pdp-purchase .v2-box-option__schedule { display: none; }
.xg-pdp-purchase .v2-box-option__head > strong { font-size: 20px; }
.xg-pdp-purchase .v3-value-lines,
.xg-pdp-purchase .v3-schedule,
.xg-pdp-purchase .v3-you-get,
.xg-pdp-purchase .v2-near-purchase-proof { display: none; }
.xg-pdp-purchase .v2-purchase__price { margin-top: 14px; border-top: 1px solid var(--v2-ink); border-bottom: 0; padding: 10px 0 4px; }
.xg-pdp-purchase .v2-purchase__price-line { padding: 1px 0; }
.xg-pdp-purchase .v2-purchase__price-line strong { font-size: 21px; }
.xg-pdp-purchase .v2-purchase__trust { margin-top: 5px; font-size: 10px; }
.xg-pdp-purchase .v2-purchase__button { min-height: 56px; margin: 12px 5px 5px 0; border: 1px solid var(--v2-ink); border-radius: 9999px; color: var(--v2-white); background: var(--v2-ink); box-shadow: 5px 5px 0 var(--v2-red); }
.xg-pdp-purchase .v2-purchase__button:hover { background: var(--v2-red-deep); box-shadow: 7px 7px 0 var(--v2-ink); transform: translate(-2px,-2px); }
.xg-pdp-purchase .v2-purchase__button:active { box-shadow: 2px 2px 0 var(--v2-ink); transform: translate(2px,2px); }
.xg-pdp-purchase .v2-product-note { margin-top: 13px; color: var(--v2-muted); font-size: 11px; }

.v2-product-page .xg-font-switcher { right: auto; bottom: 16px; left: 16px; }
.v2-product-page .v2-font-switcher { right: auto; bottom: 102px; left: 16px; }
.v2-product-page .v2-mobile-buy {
  position: fixed;
  z-index: 48;
  inset: auto 0 0 auto;
  width: 44%;
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px clamp(24px,4vw,60px);
  border-top: 1px solid var(--xg-hairline);
  background: rgba(255,254,250,.96);
  box-shadow: 0 -12px 34px rgba(24,24,23,.12);
  opacity: 0;
  pointer-events: none;
  transform: translateY(110%);
  transition: opacity 220ms ease, transform 320ms var(--v2-ease);
  backdrop-filter: blur(14px);
}
.v2-product-page .v2-mobile-buy.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.v2-product-page .v2-mobile-buy span,
.v2-product-page .v2-mobile-buy strong { display: block; }
.v2-product-page .v2-mobile-buy span { color: var(--v2-muted); font-size: 10px; }
.v2-product-page .v2-mobile-buy strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.v2-product-page .v2-mobile-buy button {
  min-height: 46px;
  border: 1px solid var(--v2-ink);
  border-radius: 9999px;
  padding: 10px 20px;
  color: var(--v2-white);
  background: var(--v2-ink);
  box-shadow: 4px 4px 0 var(--v2-red);
  font-size: 13px;
  font-weight: 800;
}

.xg-nutrition { padding-block: clamp(88px, 10vw, 160px); background: var(--v2-paper); }
.xg-nutrition__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(340px, .65fr); align-items: end; gap: clamp(48px, 9vw, 156px); }
.xg-nutrition p { max-width: 42ch; color: var(--v2-muted); }
.xg-nutrition__panel { display: grid; align-content: end; min-height: 300px; padding: 25px; color: var(--v2-white); background: var(--v2-ink); }
.xg-nutrition__panel span { color: var(--v2-lime); font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.xg-nutrition__panel strong { margin-top: auto; font-family: var(--xg-secondary-heading); font-size: 48px; font-weight: 400; letter-spacing: -.05em; }
.xg-nutrition__panel p { margin-bottom: 0; color: rgba(255,255,255,.65); }

.v2-product-story .xg-secondary-heading { color: var(--v2-white); }

@media (max-width: 880px) {
  .xg-shop-index .v3-shop-range__head,
  .xg-nutrition__grid { grid-template-columns: 1fr; }
  .xg-shop-index .v3-shop-range__head { grid-template-columns: auto 1fr; gap: 8px 16px; }
  .xg-shop-quick-actions { grid-column: 1 / -1; }
  body.v2-product-page .xg-pdp-layout { grid-template-columns: 1fr; }
  .xg-pdp-gallery { position: relative; height: min(740px, 86svh); }
  .xg-pdp-gallery .v3-gallery__stage { min-height: 100%; }
  .xg-pdp-purchase { width: 100%; padding: 42px 22px 88px; }
  .v2-product-page .v2-mobile-buy { inset: auto 0 0; width: 100%; padding: 10px 16px; }
}

@media (max-width: 620px) {
  .xg-font-switcher { display: none; }
  .xg-shop-hero { min-height: 230px; }
  .xg-shop-hero::before { background: linear-gradient(0deg, rgba(24,24,23,.94), rgba(24,24,23,.16)), url("./xalt-everyday-v4.webp") 62% center / cover; }
  .xg-shop-hero::after { width: 100vw; inset: auto -32vw -40vw auto; }
  .xg-shop-hero .v2-shell { padding-bottom: 22px; }
  .xg-shop-hero .v2-display { max-width: 10ch; }
  .xg-shop-index { padding-block: 22px 44px; }
  .xg-shop-index .v3-shop-range__head { grid-template-columns: 1fr; margin-bottom: 16px; }
  .xg-shop-quick-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .xg-shop-quick-actions a { justify-content: space-between; gap: 8px; padding-inline: 12px; }
  .xg-shop-index .v3-shop-range__grid { display: grid; overflow: visible; }
  .xg-shop-index .v3-shop-range__grid > .xg-product-card { width: 100%; flex: none; }
  .xg-product-card .v3-product-card__media { min-height: 280px; }
  .xg-product-card .v3-product-card__body { grid-template-columns: 1fr auto; padding: 16px 16px 20px; }
  .xg-product-card .v3-product-card__price { font-size: 12px; }
  .xg-pdp-gallery { height: 68svh; }
  .xg-pdp-gallery .v3-gallery__stage img { padding: 42px; }
  .xg-pdp-gallery .v3-gallery__thumbs { right: 12px; bottom: 12px; width: 55%; }
  .xg-pdp-gallery .v3-gallery__thumbs button { min-height: 42px; font-size: 10px; }
  .xg-pdp-purchase .v3-purchase-heading h1 { font-size: 42px; }
  .xg-pdp-purchase .v2-option__choices { grid-template-columns: 1fr 1fr; }
  .xg-pdp-purchase [data-v2-frequency-group] .v2-option__choices { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .xg-pdp-purchase .v2-option__choices .v2-option__choice:last-child:nth-child(3) { grid-column: auto; }
  .xg-nutrition__panel { min-height: 250px; }
}

@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
  .xg-product-card .v7-product-pack,
  .xg-text-link span,
  .xg-card-cta,
  .xg-shop-quick-actions a,
  .xg-pdp-purchase .v2-option__choice,
  .xg-pdp-purchase .v2-mode-tab,
  .xg-pdp-purchase .v2-box-option,
  .xg-pdp-purchase .v2-purchase__button,
  .v2-product-page .v2-mobile-buy { transition: none; }
}

/* ================================================================
   RESPONSIVE HARDENING
   Wide displays gain a larger editorial canvas; mobile commerce uses safe
   areas and bottom-sheet dialogs without changing the approved hierarchy.
   ================================================================ */

@media (min-width: 1600px) {
  body.preview-v2 { font-size: 18px; }
  .v2-header__inner { grid-template-columns: 170px minmax(0, 1fr) auto; }
  .v2-nav { gap: clamp(24px, 1.7vw, 40px); }

  .v2-display--hero,
  body.preview-v2[data-v2-font="glofium"] .v2-display--hero {
    max-width: 1320px;
    font-size: clamp(88px, 5.4vw, 118px);
  }

  .v2-shop-card__media,
  .v3-product-card__media,
  .xg-product-card .v3-product-card__media {
    min-height: clamp(360px, 23vw, 520px);
  }

  .xg-product-card .v7-product-pack { width: min(60%, 390px); }
  .v7-range-card .v3-product-card__body { min-height: 270px; }
  .v9-addons__grid article { grid-template-columns: 176px minmax(0, 1fr); }
  .v9-addons__grid img { width: 176px; height: 154px; }
  .v5-proof-media-grid { min-height: clamp(720px, 42vw, 920px); }
  .v2-editorial-card { min-height: clamp(580px, 36vw, 760px); }
  .v2-community-panel { min-height: clamp(560px, 34vw, 760px); }
  .v2-product-gallery__item:first-child { min-height: clamp(680px, 42vw, 880px); }
}

@media (min-width: 2200px) {
  .xg-product-card .v7-product-pack { width: min(62%, 440px); }
  .v2-footer__wordmark { font-size: min(28vw, 620px); }
}

@media (max-width: 820px) {
  html { scroll-padding-top: 72px; }

  .preview-v2 img,
  .preview-v2 video,
  .preview-v2 svg,
  .preview-v2 canvas { height: auto; max-width: 100%; }

  .preview-v2 input,
  .preview-v2 select,
  .preview-v2 textarea { max-width: 100%; font-size: 16px; }

  .preview-v2 button,
  .preview-v2 a { touch-action: manipulation; }

  .v2-display,
  .v2-lead,
  .v2-page-hero__aside,
  .v2-cart-preview,
  .v2-dialog { overflow-wrap: anywhere; }

  .v2-dialog {
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - 12px);
    margin: auto 0 0;
    border-radius: 20px 20px 0 0;
  }

  .v2-dialog__head {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 18px 18px 16px;
    background: var(--v2-white);
  }

  .v2-dialog__body {
    max-height: calc(100dvh - 82px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px 18px calc(24px + env(safe-area-inset-bottom));
  }

  .v2-cart-preview__line-main,
  .v2-cart-preview__line-head > div { min-width: 0; }

  .v2-cart-preview__line-foot,
  .v2-cart-preview__schedule > span,
  .v2-cart-preview__totals span { align-items: flex-start; }

  .v2-mobile-buy,
  .v9-shop-bar { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
}

@media (max-width: 620px) {
  .v2-dialog__head h2 { font-size: clamp(24px, 7vw, 30px); }
  .v2-dialog__close { min-height: 44px; padding-inline: 14px; }
  .v2-cart-preview__line { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
  .v2-cart-preview__line img { width: 72px; height: 90px; }
  .v2-cart-preview__line-head { grid-template-columns: minmax(0, 1fr) auto; }
  .v2-cart-preview__line-head > strong { white-space: nowrap; }
  .v2-cart-preview__line-foot { flex-wrap: wrap; }
  .v2-cart-preview__schedule > span { gap: 10px; }
  .v2-cart-preview__schedule strong { max-width: 52%; }
  .v2-newsletter__row { grid-template-columns: minmax(0, 1fr) auto; }
  .v2-footer__top { grid-template-columns: 1fr; }
  .v2-footer__brand { grid-column: auto; }
}

@media (max-width: 380px) {
  :root { --v2-shell: calc(100% - 20px); }
  .v2-cart-preview__line { grid-template-columns: 60px minmax(0, 1fr); }
  .v2-cart-preview__line img { width: 60px; height: 78px; }
  .v2-cart-preview__line-head { grid-template-columns: 1fr; }
  .v2-cart-preview__line-head > strong { white-space: normal; }
}

/* Header icon buttons: search and account read as glyphs beside the bag
   rather than as words, so the row stays compact as items are added. */
.v2-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;color:inherit;background:transparent;cursor:pointer;text-decoration:none;transition:background .18s ease}
.v2-icon-btn:hover{background:rgba(255,255,255,.14)}
.v2-icon-btn svg{display:block}

/* Site bag: an icon with a count badge, matching search and account and the
   product page's bag. The badge sits outside the icon's ink so it never
   covers the bag; a filled bag turns red and glows, and bumps on each add. */
.v2-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.v2-bag-btn{position:relative;width:38px;height:38px}
.v2-bag-btn .v2-bag-count{position:absolute;top:-3px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;color:#fff;background:#ed3024;font:800 10.5px/18px var(--v2-body,system-ui);text-align:center;transition:transform .2s cubic-bezier(.34,1.56,.64,1),opacity .15s ease}
/* Always shows its number. Empty reads as a quiet outline in the header's own
   colour, so it works on the dark hero and the light pinned header alike. */
.v2-bag-btn .v2-bag-count[data-empty]{color:inherit;background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
.v2-bag-btn:has(.v2-bag-count:not([data-empty])){color:#ed3024;animation:v2-bag-glow 2.4s ease-in-out infinite}
@keyframes v2-bag-glow{0%,100%{filter:drop-shadow(0 0 0 rgba(237,48,36,0))}50%{filter:drop-shadow(0 0 8px rgba(237,48,36,.7))}}
.v2-bag-btn.is-bump svg{animation:v2-bag-bump 420ms cubic-bezier(.34,1.56,.64,1)}
@keyframes v2-bag-bump{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.v2-bag-btn,.v2-bag-btn.is-bump svg{animation:none}}
/* The bag's count badge hangs off its top-right corner; keep Menu clear of it. */
.v2-header-actions .v2-bag-btn + .v2-menu-toggle { margin-left: 10px; }

/* Motion controls carry no visible words anywhere on the site: no "Pause
   video", "Pause", "Play motion". They stay in the page, invisible, and
   appear only when reached with the keyboard, because moving video and
   auto-advancing panels must still be pausable for people who need it
   (WCAG 2.2.2). The homepage video also pauses on a tap, and nothing moves
   at all under reduced motion. */
body :is(.xh-video-toggle, .xh-benefits__pause, .v2-hero__motion-toggle, [data-xh-pause], [data-v2-video-toggle]):not(:focus-visible) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
body .xh-benefits__controls:not(:focus-within) { margin: 0 !important; min-height: 0 !important; }

/* xalt-checkout.css */
/* Checkout and bag surfaces.

   The geometry here is measured from a live Shopify checkout, because that
   is the checkout Malaysian shoppers have already been trained on and
   familiarity is worth more than novelty at the one step where hesitation
   costs a sale: 49px fields with a 12px radius and a #dedede hairline, 10px
   between them, a #fafafa summary rail on the right, a centred wordmark, and
   a 12px-radius pay button rather than a pill.

   What stays XALT is everything that carries the brand: the wordmark, the
   red on the pay button, and the type. */

/* body.xc, not .xc: body.preview-v2 already sets a background and would
   otherwise win on specificity. Shopify's greys are cool and XALT's palette
   is warm, so the rail and hairline are the warm equivalents rather than
   Shopify's own #fafafa and #dedede. */
body.xc {
  --xc-line: rgba(24, 24, 23, 0.14);
  --xc-rail: var(--v2-paper);
  --xc-radius: 12px;
  --xc-field: 49px;
  --xc-gap: 10px;

  min-height: 100vh;
  margin: 0;
  background: var(--v2-white);
  color: var(--v2-ink);
  font-family: var(--v2-body);
}

.xc__bar {
  display: flex;
  justify-content: center;
  padding: 20px 16px;
  border-bottom: 1px solid var(--xc-line);
}

.xc__wordmark {
  display: inline-flex;
  text-decoration: none;
}

.xc__wordmark img {
  height: 30px;
  width: auto;
}

/* Two rails. The summary keeps its tint to the right edge of the window,
   which is what makes it read as a panel rather than a card. */
.xc__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  min-height: calc(100vh - 71px);
}

.xc__main {
  display: flex;
  justify-content: flex-end;
  padding: 40px 40px 96px;
}

.xc__col {
  width: 100%;
  max-width: 481px;
}

.xc__aside {
  min-height: 100%;
  padding: 40px 40px 96px;
  border-left: 1px solid var(--xc-line);
  background: var(--xc-rail);
}

.xc__section + .xc__section {
  margin-top: 32px;
}

.xc__legend {
  margin: 0 0 14px;
  font-family: var(--v2-heading-clean);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.xc__sub {
  margin: -8px 0 14px;
  font-size: 13px;
  color: var(--v2-muted);
}

/* Fields ---------------------------------------------------------------- */

.xc__field {
  position: relative;
  display: block;
  height: var(--xc-field);
  margin-bottom: var(--xc-gap);
  border: 1px solid var(--xc-line);
  border-radius: var(--xc-radius);
  background: var(--v2-white);
  overflow: hidden;
}

.xc__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--xc-gap);
}

.xc__row--three {
  grid-template-columns: 1fr 1fr 1fr;
}

.xc__input,
.xc__select {
  width: 100%;
  height: 100%;
  /* Top padding leaves room for the label once it floats. */
  padding: 18px 11px 4px;
  border: 0;
  background: transparent;
  color: var(--v2-ink);
  font-family: inherit;
  font-size: 14px;
  appearance: none;
}

.xc__select {
  background-image: linear-gradient(45deg, transparent 50%, var(--v2-muted) 50%),
    linear-gradient(135deg, var(--v2-muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 27px, calc(100% - 12px) 27px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
}

.xc__label {
  position: absolute;
  left: 12px;
  top: 15px;
  color: var(--v2-muted);
  font-size: 14px;
  pointer-events: none;
  transition: top 0.12s var(--v2-ease), font-size 0.12s var(--v2-ease);
}

.xc__input:focus + .xc__label,
.xc__input:not(:placeholder-shown) + .xc__label,
.xc__field--static .xc__label {
  top: 6px;
  font-size: 11px;
}

.xc__field:focus-within {
  border-color: var(--v2-ink);
  box-shadow: 0 0 0 1px var(--v2-ink);
}

.xc__input:focus-visible,
.xc__select:focus-visible {
  outline: none;
}

.xc__field:has([aria-invalid='true']) {
  border-color: var(--v2-red);
  box-shadow: 0 0 0 1px var(--v2-red);
}

.xc__error {
  display: block;
  margin: -4px 0 var(--xc-gap);
  font-size: 12px;
  color: var(--v2-red);
}

.xc__error:empty {
  display: none;
}

.xc__vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

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

.xc__shipping {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 14px;
  border: 1px solid var(--v2-ink);
  border-radius: var(--xc-radius);
  background: var(--xc-rail);
  font-size: 14px;
  font-weight: 600;
}

/* Payment methods ------------------------------------------------------- */

/* Shopify's selectable method card: a bordered list where the chosen row
   darkens its border and opens a body underneath. */
.xc__methods {
  border: 1px solid var(--xc-line);
  border-radius: var(--xc-radius);
  overflow: hidden;
}

.xc__method + .xc__method {
  border-top: 1px solid var(--xc-line);
}

.xc__method-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 14px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

.xc__method-radio {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border: 1px solid #b5b5b5;
  border-radius: 50%;
  background: var(--v2-white);
}

.xc__method[data-selected='true'] .xc__method-radio {
  border: 5px solid var(--v2-ink);
}

.xc__method[data-selected='true'] {
  background: var(--xc-rail);
}

.xc__method-tag {
  margin-left: auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--v2-paper);
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.xc__method-body {
  padding: 0 14px 15px 42px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--v2-muted);
}

.xc__method[data-selected='false'] .xc__method-body {
  display: none;
}

.xc__pay {
  width: 100%;
  height: 50px;
  margin-top: 18px;
  border: 0;
  border-radius: var(--xc-radius);
  background: var(--v2-red);
  color: var(--v2-lime);
  font-family: var(--v2-heading-clean);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s var(--v2-ease);
}

.xc__pay:hover {
  background: var(--v2-red-deep);
}

.xc__pay[disabled] {
  opacity: 0.5;
  cursor: default;
}

.xc__notice {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--xc-radius);
  background: rgba(237, 48, 36, 0.08);
  color: var(--v2-red-deep);
  font-size: 14px;
}

.xc__notice:empty {
  display: none;
}

.xc__dev {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px dashed var(--xc-line);
  border-radius: var(--xc-radius);
  font-size: 13px;
  color: var(--v2-muted);
}

/* Summary --------------------------------------------------------------- */

.xc__summary {
  position: sticky;
  top: 40px;
  max-width: 420px;
}

.xc__summary-toggle {
  display: none;
}

.xc__items {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.xc__item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  align-items: center;
}

.xc__item + .xc__item {
  margin-top: 16px;
}

.xc__item-thumb {
  position: relative;
  width: 64px;
  height: 64px;
}

.xc__item-thumb img {
  width: 64px;
  height: 64px;
  border: 1px solid var(--xc-line);
  border-radius: 8px;
  object-fit: cover;
  background: var(--v2-white);
}

.xc__item-qty {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--v2-ink);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}

.xc__item-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.xc__item-meta {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--v2-muted);
}

.xc__item-price {
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.xc__discount {
  display: flex;
  gap: var(--xc-gap);
}

.xc__input--plain {
  flex: 1 1 auto;
  height: var(--xc-field);
  padding: 0 12px;
  border: 1px solid var(--xc-line);
  border-radius: var(--xc-radius);
  background: var(--v2-white);
}

.xc__input--plain:focus-visible {
  outline: none;
  border-color: var(--v2-ink);
  box-shadow: 0 0 0 1px var(--v2-ink);
}

.xc__apply {
  flex: 0 0 auto;
  height: var(--xc-field);
  padding: 0 22px;
  border: 1px solid var(--xc-line);
  border-radius: var(--xc-radius);
  background: var(--v2-paper);
  color: var(--v2-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s var(--v2-ease), color 0.18s var(--v2-ease);
}

.xc__apply:hover {
  background: var(--v2-ink);
  border-color: var(--v2-ink);
  color: var(--v2-white);
}

.xc__apply[disabled] {
  opacity: 0.5;
  cursor: default;
}

.xc__applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 10px 13px;
  border: 1px dashed var(--xc-line);
  border-radius: var(--xc-radius);
  font-size: 13px;
}

.xc__applied strong {
  letter-spacing: 0.04em;
}

.xc__applied button {
  border: 0;
  background: none;
  color: var(--v2-muted);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.xc__totals {
  display: grid;
  gap: 8px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--xc-line);
  font-size: 14px;
}

.xc__total-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.xc__total-row--saving {
  color: var(--v2-red);
}

.xc__total-row--grand {
  align-items: baseline;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--xc-line);
  font-family: var(--v2-heading-clean);
  font-size: 21px;
  font-weight: 700;
}

/* "MYR" sits small beside the figure, as it does on a Shopify total. */
.xc__total-row--grand small {
  margin-right: 6px;
  font-size: 12px;
  font-weight: 400;
  color: var(--v2-muted);
}

.xc__recurring {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
}

.xc__recurring-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--v2-muted);
}

.xc__empty {
  padding: 80px 20px;
  text-align: center;
}

.xc__empty a {
  display: inline-block;
  margin-top: 16px;
  padding: 14px 26px;
  border-radius: var(--v2-radius-action);
  background: var(--v2-ink);
  color: var(--v2-white);
  text-decoration: none;
  font-weight: 600;
}

@media (max-width: 899px) {
  .xc__grid {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  /* Summary first on a phone, collapsed, so the fields are reachable
     without scrolling past the whole order. */
  .xc__aside {
    order: -1;
    min-height: 0;
    padding: 16px;
    border-left: 0;
    border-bottom: 1px solid var(--xc-line);
  }

  .xc__summary {
    position: static;
    max-width: none;
  }

  .xc__summary-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 4px 0 14px;
    border: 0;
    background: none;
    color: var(--v2-ink);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
  }

  .xc__summary-toggle span:last-child {
    font-family: var(--v2-heading-clean);
    font-size: 18px;
  }

  .xc__summary[data-open='false'] .xc__summary-body {
    display: none;
  }

  .xc__main {
    padding: 24px 16px 72px;
  }

  .xc__col {
    max-width: none;
  }

  /* Three across is too tight for a phone; the state drops to its own row. */
  .xc__row--three {
    grid-template-columns: 1fr 1fr;
  }

  .xc__row--three > div:last-child {
    grid-column: 1 / -1;
  }
}

/* Subscriptions: the card must be saved in Curlec's window to be charged
   for each delivery. */
.xc__save-card { margin: 0 0 14px; padding: 12px 14px; border: 1.5px solid var(--v2-ink, #181817); border-radius: 14px; background: #d9ff54; font-size: 13.5px; line-height: 1.45; color: var(--v2-ink, #181817); }
.xc__save-card[hidden] { display: none; }

/* xalt-account.css */
/* Sign-in and account creation.

   One email field and nothing else: the same form signs a returning customer
   in and creates an account for a new one, so there is no wrong door to pick
   and no password to lose. */

.xa {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(32px, 6vw, 72px) clamp(20px, 5vw, 40px) 80px;
}

.xa__card {
  padding: clamp(26px, 4vw, 40px);
  border: 1.5px solid var(--m-ink, #181817);
  border-radius: 20px;
  background: #fffaf5;
  box-shadow: 6px 7px 0 var(--m-ink, #181817);
}

.xa__eyebrow {
  margin: 0 0 10px;
  color: var(--m-red, #ed3024);
  font: 800 10px/1 var(--v2-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.xa__title {
  margin: 0 0 10px;
  font: 780 clamp(27px, 3.4vw, 38px)/1.04 var(--m-display, var(--v2-display));
  letter-spacing: -0.025em;
}

.xa__lede {
  margin: 0 0 20px;
  color: var(--m-muted, #6d6a66);
  font: 550 14px/1.5 var(--v2-body);
}

/* The voucher is the reason to hand over an email, so it is stated before
   the field rather than buried in the small print underneath. */
.xa__offer {
  display: grid;
  gap: 3px;
  margin: 0 0 22px;
  padding: 13px 15px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--m-red, #ed3024) 9%, transparent);
}
.xa__offer b { color: var(--m-red, #ed3024); font: 800 13.5px/1.2 var(--v2-body); }
.xa__offer span { color: var(--m-ink, #181817); font: 550 12.5px/1.45 var(--v2-body); }

.xa__form { display: grid; gap: 4px; }

.xa .xa__submit {
  min-height: 52px;
  margin-top: 10px;
  border: 2px solid var(--m-ink, #181817);
  border-radius: 999px;
  color: #fff;
  background: var(--m-red, #ed3024);
  font: 800 13px/1 var(--v2-body);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.xa .xa__submit:hover { transform: translateY(-1px); box-shadow: 0 6px 0 var(--m-ink, #181817); }
.xa .xa__submit:active { transform: translateY(1px); box-shadow: none; }
.xa .xa__submit[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

.xa__note {
  margin: 12px 0 0;
  font: 600 12.5px/1.5 var(--v2-body);
}
.xa__note[data-tone="ok"] { color: #1c7a4a; }
.xa__note[data-tone="error"] { color: var(--m-red, #ed3024); }

.xa__fine {
  margin: 18px 0 0;
  color: var(--m-muted, #6d6a66);
  font: 500 11.5px/1.5 var(--v2-body);
}

.xa__aside { padding-top: 10px; }
.xa__aside-title {
  margin: 0 0 14px;
  font: 750 16px/1.2 var(--v2-body);
}
.xa__perks { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.xa__perks li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  color: var(--m-ink, #181817);
  font: 550 13.5px/1.45 var(--v2-body);
}
.xa__perks li::before {
  content: "✓";
  color: var(--m-red, #ed3024);
  font-weight: 900;
}

@media (max-width: 820px) {
  .xa { grid-template-columns: minmax(0, 1fr); padding-bottom: 56px; }
  .xa__card { box-shadow: 4px 5px 0 var(--m-ink, #181817); }
  .xa__aside { padding-top: 0; }
}

/* Marketing consent. Unticked by default and worded as optional: an account
   must never be conditional on agreeing to be marketed to. */
.xa__check {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  margin-top: 16px;
  cursor: pointer;
}
.xa__check input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--m-red, #ed3024);
  cursor: pointer;
}
.xa__check span {
  color: var(--m-muted, #6d6a66);
  font: 550 12.5px/1.45 var(--v2-body);
}

/* Lifestyle shots: one tall frame with two stacked beside it, so the column
   has a shape rather than being a plain stack of squares. */
.xa__gallery {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 26px;
}
.xa__shot {
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  background: color-mix(in srgb, var(--m-ink, #181817) 6%, transparent);
  aspect-ratio: 1;
}
.xa__shot--tall { grid-row: span 2; aspect-ratio: auto; }
.xa__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 820px) {
  /* Below the form on a phone, and shorter so it never buries the field. */
  .xa__gallery { grid-template-rows: 116px 116px; margin-top: 28px; }
}

/* WCAG 2.2 asks for a 24px minimum target. The label is clickable too, so
   the usable target is the whole row, but the box itself should still meet
   it for anyone aiming at the control. */
.xa__check { grid-template-columns: 24px minmax(0, 1fr); min-height: 24px; }
.xa__check input { width: 24px; height: 24px; margin: 0; }

/* ==========================================================================
   Signed-in profile.

   The same language as the sign-in card and the receipt: ink hairline
   borders, a hard offset shadow on the one card that matters most, warm
   paper, red for the action, lime for "all good". One wide column for the
   things people come here to do (subscription, orders) and a narrow one for
   everything else.
   ========================================================================== */

.xa-body { background: var(--v2-paper, #f5f1e8); }
.xa-main { min-height: 62vh; }
.xa-main [hidden] { display: none !important; }

.xa-wait {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 120px 20px;
  color: var(--m-muted, #6d6a66);
  font: 600 14px/1.4 var(--v2-body);
}
.xa-wait__spinner {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(24, 24, 23, 0.14);
  border-top-color: var(--m-red, #ed3024);
  border-radius: 50%;
  animation: xa-spin 0.8s linear infinite;
}
@keyframes xa-spin { to { transform: rotate(360deg); } }

.xp {
  --xp-ink: #181817;
  --xp-muted: #6b665f;
  --xp-line: rgba(24, 24, 23, 0.12);
  --xp-paper: #fffaf5;
  --xp-red: #ed3024;
  --xp-lime: #d7ff52;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(28px, 4.5vw, 56px) clamp(16px, 4vw, 40px) 88px;
  color: var(--xp-ink);
}

.xp__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(22px, 3vw, 32px);
}
.xp__title {
  margin: 0 0 8px;
  font: 780 clamp(32px, 3.6vw, 46px)/1 var(--m-display, var(--v2-display));
  letter-spacing: -0.028em;
}
.xp__sub { margin: 0; color: var(--xp-muted); font: 550 14px/1.45 var(--v2-body); overflow-wrap: anywhere; }

.xp__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: clamp(16px, 2vw, 24px);
  align-items: start;
}
.xp__main,
.xp__side { display: grid; gap: clamp(16px, 2vw, 24px); min-width: 0; }

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

.xp-card {
  padding: clamp(20px, 2.4vw, 28px);
  border: 1.5px solid var(--xp-ink);
  border-radius: 20px;
  background: var(--xp-paper);
}
.xp-card--flat { padding: 0; border: 0; background: none; }
.xp-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.xp-card__title {
  margin: 0;
  font: 780 clamp(20px, 1.7vw, 24px)/1.1 var(--m-display, var(--v2-display));
  letter-spacing: -0.02em;
}
.xp-card__count { color: var(--xp-muted); font: 650 12.5px/1 var(--v2-body); }

/* ---- buttons -------------------------------------------------------------

   Scoped under .xp because the site sets `.preview-v2 button { font: inherit }`,
   which outranks a single class and would reset every button's type. */

.xp .xp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1.5px solid var(--xp-ink);
  border-radius: 999px;
  color: var(--xp-ink);
  background: transparent;
  font: 800 12.5px/1 var(--v2-body);
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}
.xp .xp-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--xp-ink); }
.xp .xp-btn:active { transform: translateY(1px); box-shadow: none; }
.xp .xp-btn[disabled] { opacity: 0.55; cursor: progress; transform: none; box-shadow: none; }
.xp .xp-btn--red { color: #fff; background: var(--xp-red); }
.xp .xp-btn--ink { color: #fff; background: var(--xp-ink); }
.xp .xp-btn--ghost { background: #fff; }
.xp .xp-btn--quiet { border-color: transparent; color: var(--xp-muted); }
.xp .xp-btn--quiet:hover { color: var(--xp-red); box-shadow: none; transform: none; text-decoration: underline; text-underline-offset: 3px; }
.xp .xp-btn:focus-visible,
.xp .xp-switch:focus-visible,
.xp .xp-order__receipt:focus-visible,
.xp .xp-ticket__copy:focus-visible { outline: 3px solid var(--xp-red); outline-offset: 3px; }

/* ---- welcome ticket ------------------------------------------------------- */

.xp__welcome { margin-bottom: clamp(16px, 2vw, 24px); }

.xp-ticket {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1.5px solid var(--xp-ink);
  border-radius: 20px;
  background: var(--xp-paper);
  box-shadow: 6px 7px 0 var(--xp-ink);
}
.xp-ticket__value {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  min-width: 112px;
  padding: 22px 18px;
  color: #fff;
  background: var(--xp-red);
}
/* Perforation between stub and body, as on a real ticket. */
.xp-ticket__value::after {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  right: -1px;
  border-right: 2px dashed var(--xp-paper);
}
.xp-ticket__value b { font: 800 clamp(34px, 3.4vw, 44px)/0.9 var(--m-display, var(--v2-display)); letter-spacing: -0.03em; }
.xp-ticket__value span { margin-top: 4px; font: 800 12px/1 var(--v2-body); letter-spacing: 0.16em; text-transform: uppercase; }
.xp-ticket__body { display: grid; gap: 8px; align-content: start; padding: 20px 22px 22px; }
.xp-ticket__kicker { margin: 0; color: var(--xp-red); font: 800 10.5px/1 var(--v2-body); letter-spacing: 0.14em; text-transform: uppercase; }
.xp-ticket__lede { margin: 0; font: 700 15px/1.35 var(--v2-body); }
.xp-ticket__code {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 6px 6px 6px 14px;
  border: 1.5px dashed var(--xp-ink);
  border-radius: 12px;
  background: #fff;
}
.xp-ticket__code code { font: 800 16px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.06em; white-space: nowrap; }
.xp .xp-ticket__copy {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  color: var(--xp-ink);
  background: var(--xp-lime);
  font: 800 11.5px/1 var(--v2-body);
  cursor: pointer;
}
.xp-ticket__meta { margin: 0; color: var(--xp-muted); font: 550 12.5px/1.45 var(--v2-body); }
.xp-ticket .xp-btn { justify-self: start; margin-top: 4px; }
.xp-ticket.is-spent { box-shadow: none; }
.xp-ticket.is-spent .xp-ticket__value { background: #b9b3aa; }
.xp-ticket.is-spent code { text-decoration: line-through; color: var(--xp-muted); }

/* The fresh ticket is the page's headline, so it gets the room. */
.xp-ticket.is-fresh { grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); }
.xp-ticket.is-fresh .xp-ticket__value b { font-size: clamp(52px, 6vw, 76px); }
.xp-ticket.is-fresh .xp-ticket__body { padding: 26px 30px 28px; }
.xp-ticket.is-fresh .xp-ticket__lede { font-size: clamp(17px, 1.6vw, 20px); }
@media (prefers-reduced-motion: no-preference) {
  .xp-ticket.is-fresh { animation: xp-drop 620ms cubic-bezier(0.2, 0.9, 0.25, 1.15) both; }
}
@keyframes xp-drop {
  from { opacity: 0; transform: translateY(-14px) rotate(-1.2deg); }
  to { opacity: 1; transform: none; }
}

/* In the narrow sidebar the stub sits on top, so the code keeps one line. */
.xp__side .xp-ticket { grid-template-columns: minmax(0, 1fr); box-shadow: 5px 6px 0 var(--xp-ink); }
.xp__side .xp-ticket__value { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 8px; padding: 14px 20px; }
.xp__side .xp-ticket__value::after { top: auto; left: 10px; right: 10px; bottom: -1px; border-right: 0; border-bottom: 2px dashed var(--xp-paper); }
.xp__side .xp-ticket__value b { font-size: 36px; }
.xp__side .xp-ticket__body { padding: 18px 20px 20px; }

/* ---- subscription ---------------------------------------------------------- */

.xp-sub + .xp-sub { margin-top: 14px; padding-top: 18px; border-top: 1px solid var(--xp-line); }
.xp-sub__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}
.xp-thumb {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  object-fit: cover;
  background: #f1e8dd;
}
.xp-sub__name { margin: 0 0 3px; font: 750 16px/1.25 var(--v2-body); }
.xp-sub__meta { margin: 0; color: var(--xp-muted); font: 550 13px/1.4 var(--v2-body); }

.xp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  font: 800 10.5px/1 var(--v2-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.xp-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.xp-pill--active { background: var(--xp-lime); }
.xp-pill--paused { background: #ece6dc; color: #5b564f; }
.xp-pill--ending { background: #fff1d6; color: #8a5a00; }
.xp-pill--ended { background: #ece6dc; color: #8b857d; }
.xp-pill--attention { background: rgba(237, 48, 36, 0.12); color: var(--xp-red); }

.xp-sub__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 1px;
  margin: 16px 0 0;
  overflow: hidden;
  border: 1px solid var(--xp-line);
  border-radius: 14px;
  background: var(--xp-line);
}
.xp-sub__facts div { padding: 12px 14px; background: #fff; }
/* An odd one out spans the row, so a wrapped grid never ends in an empty grey cell. */
@media (max-width: 640px) {
  .xp-sub__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xp-sub__facts div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.xp-sub__facts dt { margin-bottom: 5px; color: var(--xp-muted); font: 700 10.5px/1 var(--v2-body); letter-spacing: 0.1em; text-transform: uppercase; }
.xp-sub__facts dd { margin: 0; font: 750 15px/1.2 var(--v2-body); }

.xp-sub__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.xp-sub__confirm {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff4ea;
}
.xp-sub__confirm p { margin: 0 0 12px; font: 600 13.5px/1.45 var(--v2-body); }
.xp-sub__confirm div { display: flex; flex-wrap: wrap; gap: 8px; }
.xp-sub__note { margin: 14px 0 0; color: var(--xp-muted); font: 550 13px/1.45 var(--v2-body); }
.xp-sub__note a { color: inherit; }
.xp-sub__error { margin: 10px 0 0; color: var(--xp-red); font: 650 13px/1.4 var(--v2-body); }
.xp-sub__error:empty { display: none; }

/* ---- orders ------------------------------------------------------------------ */

.xp-orders { margin: 0; padding: 0; list-style: none; }
.xp-order {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 13px 0;
  border-top: 1px solid var(--xp-line);
}
.xp-order:first-child { border-top: 0; padding-top: 0; }
.xp-order .xp-thumb { width: 44px; height: 44px; border-radius: 10px; }
.xp-order__num { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 3px; font: 750 14.5px/1.2 var(--v2-body); }
.xp-order__meta { margin: 0; color: var(--xp-muted); font: 550 12.5px/1.4 var(--v2-body); }
.xp-order__total { margin: 0; font: 780 15px/1 var(--v2-body); white-space: nowrap; }
.xp .xp-order__receipt {
  min-height: 36px;
  padding: 0 14px;
  border: 1.5px solid var(--xp-ink);
  border-radius: 999px;
  color: var(--xp-ink);
  background: #fff;
  font: 800 11.5px/1 var(--v2-body);
  cursor: pointer;
}
.xp .xp-order__receipt:hover { background: var(--xp-lime); }
.xp-tag {
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--xp-red);
  background: rgba(237, 48, 36, 0.1);
  font: 800 9.5px/1 var(--v2-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.xp-empty { display: grid; justify-items: start; gap: 8px; }
.xp-empty p { margin: 0; color: var(--xp-muted); font: 550 13.5px/1.5 var(--v2-body); max-width: 46ch; }
.xp-empty .xp-empty__title { color: var(--xp-ink); font: 750 16px/1.3 var(--v2-body); }
.xp-empty .xp-btn { margin-top: 6px; }

/* ---- XALT credits (coming soon) -------------------------------------------------- */

.xp-soon {
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--xp-ink);
  background: var(--xp-lime);
  font: 800 10px/1 var(--v2-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.xp-credits { background: var(--xp-ink); color: #fff6ec; border-color: var(--xp-ink); }
.xp-credits .xp-card__title { color: #fff6ec; }
.xp-credits__balance { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.xp-credits__coin {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 2px dashed rgba(255, 246, 236, 0.5);
  border-radius: 50%;
  color: rgba(255, 246, 236, 0.7);
  font: 800 18px/1 var(--m-display, var(--v2-display));
}
.xp-credits__balance p { margin: 0; color: rgba(255, 246, 236, 0.7); font: 650 13px/1 var(--v2-body); }
.xp-credits__balance b { color: #fff6ec; font: 800 32px/1 var(--m-display, var(--v2-display)); margin-right: 4px; }
.xp-credits__lede { margin: 0 0 14px; color: rgba(255, 246, 236, 0.78); font: 550 13.5px/1.5 var(--v2-body); }
.xp-credits__ways { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; border-radius: 12px; overflow: hidden; }
.xp-credits__ways li { display: grid; gap: 3px; padding: 11px 13px; background: rgba(255, 246, 236, 0.07); }
.xp-credits__ways b { font: 750 13px/1.2 var(--v2-body); }
.xp-credits__ways span { color: rgba(255, 246, 236, 0.66); font: 550 12px/1.35 var(--v2-body); }

/* ---- preferences -------------------------------------------------------------------- */

.xp-pref { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.xp-pref__copy { display: grid; gap: 4px; }
.xp-pref__copy b { font: 700 14px/1.3 var(--v2-body); }
.xp-pref__copy span { color: var(--xp-muted); font: 550 12.5px/1.45 var(--v2-body); }
.xp .xp-switch {
  position: relative;
  flex: none;
  width: 52px;
  height: 30px;
  padding: 0;
  border: 1.5px solid var(--xp-ink);
  border-radius: 999px;
  background: #e7e0d6;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.xp-switch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1.5px var(--xp-ink);
  transition: transform 0.22s cubic-bezier(0.3, 0.9, 0.3, 1.2);
}
.xp .xp-switch[aria-checked="true"] { background: var(--xp-red); }
.xp .xp-switch[aria-checked="true"] .xp-switch__knob { transform: translateX(22px); }
.xp-pref__note { margin: 10px 0 0; color: #1c7a4a; font: 600 12.5px/1.4 var(--v2-body); }
.xp-pref__note:empty { display: none; }

/* ---- phone ------------------------------------------------------------------------------ */

@media (max-width: 900px) {
  .xp__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .xp__head { flex-direction: column; align-items: flex-start; }
  .xp__head .xp-btn { align-self: flex-start; }
  .xp-ticket,
  .xp-ticket.is-fresh { grid-template-columns: minmax(0, 1fr); box-shadow: 4px 5px 0 var(--xp-ink); }
  .xp-ticket__value { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 8px; padding: 16px 20px; }
  .xp-ticket__value::after { top: auto; left: 10px; right: 10px; bottom: -1px; border-right: 0; border-bottom: 2px dashed var(--xp-paper); }
  .xp-ticket.is-fresh .xp-ticket__value b { font-size: 48px; }
  .xp-ticket.is-fresh .xp-ticket__body { padding: 20px; }
  .xp-sub__top { grid-template-columns: auto minmax(0, 1fr); }
  .xp-sub__top .xp-pill { grid-column: 2; justify-self: start; }
  .xp-order { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 8px; }
  .xp-order__receipt { grid-column: 2 / -1; justify-self: start; }
}

/* ==========================================================================
   Profile, tabbed. One screen at a time, each with a single job, and a
   sliding underline that shows where you are.
   ========================================================================== */

.xp { max-width: 880px; }
.xp__head { align-items: center; margin-bottom: 18px; }
.xp__who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.xp__avatar {
  display: grid; place-items: center; flex: none;
  width: 54px; height: 54px; border-radius: 50%;
  color: #fff; background: var(--xp-red);
  font: 800 22px/1 var(--m-display, var(--v2-display));
}
.xp__title { font-size: clamp(26px, 3vw, 36px); line-height: 1.1; }
.xp .xp__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.xp-toast {
  margin: 0 0 18px; padding: 12px 16px;
  border-radius: 14px; color: var(--xp-ink); background: var(--xp-lime);
  font: 700 13.5px/1.4 var(--v2-body);
}
.xp-toast[hidden] { display: none; }

/* Tabs: a row of plain words with a red underline that slides between
   them. On a phone the row scrolls sideways if it has to, never wraps. */
.xp-tabs {
  position: relative; display: flex; gap: 4px;
  margin: 0 0 22px; border-bottom: 1.5px solid var(--xp-line);
  overflow-x: auto; scrollbar-width: none;
}
.xp-tabs::-webkit-scrollbar { display: none; }
.xp .xp-tab {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 46px; padding: 0 14px;
  border: 0; background: none; color: var(--xp-muted);
  font: 750 14.5px/1 var(--v2-body); cursor: pointer;
  transition: color 0.2s ease;
}
.xp .xp-tab:hover { color: var(--xp-ink); }
.xp .xp-tab[aria-selected="true"] { color: var(--xp-ink); }
.xp .xp-tab:focus-visible { outline: 3px solid var(--xp-red); outline-offset: -3px; border-radius: 10px; }
.xp-tab__count {
  min-width: 20px; padding: 3px 6px; border-radius: 999px;
  color: #fff; background: var(--xp-ink); font: 800 10.5px/1 var(--v2-body);
}
.xp-tab__count:empty { display: none; }
.xp-tabs__ink {
  position: absolute; left: 0; bottom: -1.5px; height: 3px; width: 0;
  border-radius: 3px; background: var(--xp-red);
  transition: translate 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.xp-panel:focus-visible { outline: none; }
.xp-panel { display: grid; gap: 16px; }
.xp-panel[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .xp-panel:not([hidden]) { animation: xp-panel-in 0.32s ease both; }
}
@keyframes xp-panel-in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: none; } }

/* Overview tiles. */
.xp-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.xp-tile {
  display: grid; align-content: start; gap: 6px;
  padding: 20px; border: 1.5px solid var(--xp-ink); border-radius: 20px; background: var(--xp-paper);
}
.xp-tile--next { grid-row: span 2; background: #fff4ea; box-shadow: 5px 6px 0 var(--xp-ink); }
.xp-tile__label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; color: var(--xp-muted); font: 800 10.5px/1.2 var(--v2-body); letter-spacing: 0.12em; text-transform: uppercase; }
.xp-tile__big { margin: 2px 0 0; font: 780 clamp(28px, 3.4vw, 40px)/1.05 var(--m-display, var(--v2-display)); letter-spacing: -0.02em; }
.xp-tile__meta { margin: 0 0 10px; color: var(--xp-muted); font: 550 13.5px/1.45 var(--v2-body); }
.xp-tile .xp-btn { justify-self: start; margin-top: auto; }
.xp-tile__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.xp-tile--credits { color: #fff6ec; background: var(--xp-ink); }
.xp-tile--credits .xp-tile__label, .xp-tile--credits .xp-tile__meta { color: rgba(255, 246, 236, 0.72); }
.xp .xp-link {
  padding: 0; border: 0; background: none; color: var(--xp-ink);
  font: 750 13px/1 var(--v2-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* Orders: each row opens to show what was in it. */
.xp-orders { display: grid; gap: 10px; }
/* Replaces the older one-line order row: the row is the button, the
   detail opens underneath it. */
.xp .xp-order { display: block; padding: 0; border: 1.5px solid var(--xp-ink); border-radius: 18px; background: var(--xp-paper); overflow: hidden; }
.xp .xp-order__row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px;
  width: 100%; padding: 12px 16px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer;
  font: inherit;
}
.xp .xp-order__row:hover { background: rgba(24, 24, 23, 0.03); }
.xp .xp-order__row:focus-visible { outline: 3px solid var(--xp-red); outline-offset: -3px; }
.xp-order__body { display: grid; gap: 3px; min-width: 0; }
.xp-order__chev {
  width: 10px; height: 10px; margin-right: 4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  rotate: 45deg; translate: 0 -3px; transition: rotate 0.25s ease, translate 0.25s ease;
}
.xp-order__row[aria-expanded="true"] .xp-order__chev { rotate: -135deg; translate: 0 3px; }
.xp-order__detail { display: grid; gap: 14px; padding: 4px 16px 18px; border-top: 1px solid var(--xp-line); }
.xp-order__detail[hidden] { display: none; }
.xp-order__items { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.xp-order__items li { display: flex; align-items: center; gap: 12px; }
.xp-order__items .xp-thumb { width: 40px; height: 40px; border-radius: 10px; }
.xp-order__items span { display: grid; gap: 2px; }
.xp-order__items b { font: 700 14px/1.3 var(--v2-body); }
.xp-order__items small { color: var(--xp-muted); font: 550 12.5px/1.3 var(--v2-body); }
.xp-order__facts, .xp-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 0; }
.xp-order__facts dt, .xp-details dt { color: var(--xp-muted); font: 700 10.5px/1.2 var(--v2-body); letter-spacing: 0.1em; text-transform: uppercase; }
.xp-order__facts dd, .xp-details dd { margin: 4px 0 0; font: 700 14.5px/1.3 var(--v2-body); overflow-wrap: anywhere; }
.xp-order__detail .xp-btn { justify-self: start; }

.xp-sub { display: grid; gap: 0; }
.xp-settings__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

@media (max-width: 640px) {
  .xp__head { flex-direction: row; }
  .xp__avatar { width: 44px; height: 44px; font-size: 18px; }
  .xp .xp__title { font-size: 26px; }
  .xp-tiles { grid-template-columns: minmax(0, 1fr); }
  .xp-tile--next { grid-row: auto; }
  .xp .xp-tab { padding: 0 11px; font-size: 14px; }
  .xp .xp-order__row { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 12px 14px; }
  .xp-order__total { grid-column: 2; grid-row: 2; justify-self: start; font-size: 14px; }
  .xp-order__chev { grid-column: 3; grid-row: 1 / span 2; }
}

/* Sign-in code step. */
.xa__code[hidden] { display: none; }
.xa__code-sent { margin: 0 0 14px; font-size: 15px; line-height: 1.5; }
.xa__code-input { font-size: 24px !important; letter-spacing: .35em; font-weight: 700; }
.xa__code-links { margin: 14px 0 0; font-size: 13.5px; color: #6d6a66; }
.xa__link { background: none; border: 0; padding: 0; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.xa__form[hidden] { display: none !important; }

/* xalt-polish.css */
/* Shared commerce controls follow the product buy button. */
.xalt-home-world :is(.v2-font-switcher,.v2-mobile-font-switcher,.xg-font-switcher){display:none!important}
/* The one button. Every commerce CTA takes the shop card "Shop now" button: cream face,
   ink border, flavour offset, and a flavour wipe with an ink offset on hover.
   --flavour is only set on the product page, so everywhere else it stays brand red. */
body :is(.xh-button,.v2-button,.shop-card__button,.xalt-button,.button--primary,.m-cta,.m-floating-buy__button){border:2px solid #181817;border-radius:999px;background-color:#fffaf5!important;background-image:linear-gradient(var(--flavour,#ed3024),var(--flavour,#ed3024))!important;background-position:left center!important;background-repeat:no-repeat!important;background-size:0 100%!important;color:#181817!important;box-shadow:6px 8px 0 var(--flavour,#ed3024);transition:color .26s,background-size .36s cubic-bezier(.16,1,.3,1),box-shadow .26s,transform .26s!important}
body :is(.xh-button,.v2-button,.shop-card__button,.xalt-button,.button--primary,.m-cta,.m-floating-buy__button):focus-visible{background-size:100% 100%!important;color:#fffaf5!important;box-shadow:9px 11px 0 #181817;transform:translate(-3px,-3px)}
@media (hover:hover){body :is(.xh-button,.v2-button,.shop-card__button,.xalt-button,.button--primary,.m-cta,.m-floating-buy__button):hover,body .shop-card:hover .shop-card__button{background-size:100% 100%!important;color:#fffaf5!important;box-shadow:9px 11px 0 #181817;transform:translate(-3px,-3px)}}
body :is(.xh-button,.v2-button,.xalt-button,.m-cta,.m-floating-buy__button):active{transform:translate(2px,2px);box-shadow:2px 3px 0 #181817}
/* (The hover fill above is limited to devices that can hover: a phone keeps
   :hover on the last thing tapped, which left a button looking pressed.) */
/* Homepage CTAs use the shop card button's type and proportions. */
body .xh-button{min-height:44px;width:fit-content;display:inline-flex;align-items:center;justify-content:center;gap:20px;padding:11px 17px;font:800 11px/1 var(--v2-body,"Host Grotesk",sans-serif);letter-spacing:.05em;text-transform:uppercase;text-decoration:none}
body .xh-button>span:last-child{font-size:18px;transition:transform .18s ease}
body .xh-button:focus-visible>span:last-child{transform:translateX(3px)}
@media (hover:hover){body .xh-button:hover>span:last-child{transform:translateX(3px)}}
body .xh-button:focus-visible{outline:3px solid #d9ff54;outline-offset:4px}
/* On a red ground a red offset vanishes, so the face turns lime, the offset ink,
   and the hover wipe is ink with a lime label. */
body .xh-button.xh-button--on-red{background-color:#d9ff54!important;background-image:linear-gradient(#181817,#181817)!important;box-shadow:6px 8px 0 #181817}
body .xh-button.xh-button--on-red:focus-visible{color:#d9ff54!important;box-shadow:9px 11px 0 #181817}
@media (hover:hover){body .xh-button.xh-button--on-red:hover{color:#d9ff54!important;box-shadow:9px 11px 0 #181817}}
body .xh-button.xh-button--on-red:focus-visible{outline-color:#fff1e5}
/* Flavour card and subscribe card: white face, ink offset, lime on hover. */
body .xh-button.xh-button--white{background-color:#fff!important;background-image:linear-gradient(#d9ff54,#d9ff54)!important;color:#181817!important;box-shadow:6px 8px 0 #181817}
body .xh-button.xh-button--white:focus-visible{color:#181817!important;box-shadow:9px 11px 0 #181817}
@media (hover:hover){body .xh-button.xh-button--white:hover{color:#181817!important;box-shadow:9px 11px 0 #181817}}
body .xh-button.xh-button--white:focus-visible{outline-color:#fff1e5}
body :is(.xh-selector-nav button,.xh-ugc-controls button,.xp-benefits summary::after,.quantity__button){border:2px solid #181817;border-radius:50%;background:#fffaf5 linear-gradient(#ed3024,#ed3024) no-repeat left center/0 100%;color:#181817;box-shadow:3px 4px 0 #ed3024;transition:background-size .3s,transform .25s,box-shadow .25s,color .25s}
body :is(.xh-selector-nav button,.xh-ugc-controls button,.quantity__button):is(:hover,:focus-visible){background-size:100% 100%;color:#fff;box-shadow:4px 5px 0 #181817;transform:translate(-1px,-1px)}
.xh-disclosure__plus{display:grid;place-items:center;width:30px;height:30px;border:2px solid currentColor;border-radius:50%;font-size:20px!important;transition:background .25s,transform .25s}.xh-disclosure summary:hover .xh-disclosure__plus{background:#fffaf5;color:#ed3024}
body :is(.v2-footer,.xalt-site-footer){position:relative;background:#ed3024!important;color:#fffaf5!important;border:0;border-radius:50% 50% 0 0/55px 55px 0 0;padding-top:100px;overflow:hidden}
body :is(.v2-footer,.xalt-site-footer) :is(p,a,h2,h3,label,span){color:#fffaf5}
body .v2-footer::after{content:'xalt';display:block;font-family:'Glofium Preview',sans-serif;font-size:clamp(120px,28vw,480px);font-weight:400;line-height:1.25;text-align:center;letter-spacing:-.035em;padding:30px 3vw 0;color:#fffaf5}
body .xalt-site-footer__wordmark{font-family:'Glofium Preview',sans-serif!important;font-size:28vw;line-height:1.25;color:#fffaf5}
.xp-nav--product{border:0!important;border-radius:0 0 28px 28px}.xp-nav--product>a:first-child{font:650 22px/1.2 'Bricolage Grotesque',sans-serif}.xp-nav--product span{font-size:12px}.xp-nav--product>a:last-child{font-size:13px;font-weight:700}
body .xh-day{background:#181817!important;isolation:isolate;overflow:hidden;padding-top:150px}
.xh-day::before{content:'';position:absolute;z-index:-1;top:0;left:-10%;width:120%;height:500px;background:#d4241a;border-radius:0 0 58% 38%/0 0 42% 26%;transform:rotate(-4deg);transform-origin:top left}
body .xh-warning{height:108px;background:#ed3024;color:#fff1e5;border:0;border-radius:50% 50% 0 0/18px 18px 0 0;position:relative;z-index:9}.xh-warning__track{padding-block:18px}.xh-warning__track span{line-height:1.5!important;font-size:36px!important}
body .xh-ingredients{margin-top:-60px;border-radius:48% 52% 0 0/70px 80px 0 0;padding-top:150px}.xh-liquid-edge{display:none}
body .xh-comparison{border-radius:48% 52% 0 0/90px 60px 0 0}.xh-comparison .xc-table th:nth-child(2),.xh-comparison .xc-table td:nth-child(2){background:#ed3024!important;color:#fff1e5!important}
.xc-product-graphic{display:block;width:90px;height:110px;object-fit:contain;margin:0 auto 18px}.xc-table thead th{text-align:center}.xc-table{border-radius:28px;overflow:hidden}
body .xh-subscribe{border-radius:50% 50% 0 0/65px 95px 0 0;margin-top:-30px}.xh-community{border-radius:50% 50% 0 0/75px 55px 0 0!important}
.xh-section-meta,.xh-day-beat,.xh-taste,.xh-taste-bars,.xh-taste-bars>div{border:0!important}.xh-section-meta{gap:32px}.xh-mineral-grid>div{padding-bottom:35px!important}.xh-mineral-grid p{line-height:1.5!important}
.xh-mineral-grid .xh-liquid{transition:transform .5s cubic-bezier(.16,1,.3,1);transform:rotate(var(--water-tilt,0deg));transform-origin:50% 90%}.xh-liquid::after{content:'';position:absolute;left:var(--water-x,50%);top:0;width:55px;height:12px;border:2px solid #fff8;border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.2)}.xh-mineral-grid>div.is-rippling .xh-liquid::after{animation:xh-ripple .8s ease-out}
@keyframes xh-ripple{10%{opacity:.7}100%{opacity:0;transform:translate(-50%,-50%) scale(4)}}
body .xh-drop-pack{display:none!important}body .xh-collection.is-dropping :is(.xh-flavour-panel,.xh-flavour-art){overflow:visible}body .xh-collection.is-dropping .xh-flavour-plinth img{opacity:var(--pack-opacity,1);transform:translateY(var(--pack-fall,0px)) rotate(var(--pack-rotation,-5deg)) scale(var(--pack-scale,1));transition:none;z-index:7}
.xh-flavour-plinth{background:transparent!important;z-index:2}.xh-flavour-plinth::before{content:'';position:absolute;inset:0;background:#fff1e5;border-radius:50% 50% 0 0;clip-path:inset(0 0 16%)}.xh-flavour-plinth img{z-index:1}.xh-collection.is-dropping .xh-flavour-fruit{transform:none!important;border-radius:0 22px 22px 0}.xh-flavour-art{border-radius:0 22px 22px 0}
.xc-table caption{white-space:normal;max-width:calc(100vw - 40px);line-height:1.6;text-wrap:wrap}
.xh-flavour-copy h3{padding-top:12px;padding-bottom:12px!important;overflow-wrap:anywhere}.xh-ingredients__details summary{grid-template-columns:34px minmax(0,1fr) 32px!important}.xh-ingredients__details summary h3{line-height:1.25!important}
/* Entrances (mountLayers in xalt-home.js). Pictures only: headings, copy, cards
   and stickers are never hidden and never animate in. Only elements the script
   has armed carry a hidden state, so without JavaScript everything is simply
   visible, and the waiting state never transitions. Each section opens its
   picture its own way through data-xl-score. */
[data-xl].xl-wait,[data-xl].xl-wait img{transition:none!important}
[data-xl=media].xl-wait{clip-path:inset(0 0 44% 0)}
[data-xl=media].xl-wait img{scale:1.07}
[data-xl=media].xl-in{clip-path:inset(0);transition:clip-path 1.05s cubic-bezier(.76,0,.24,1)}
[data-xl=media].xl-in img{transition:scale 1.25s cubic-bezier(.16,1,.3,1)}
/* Flavours: the frame opens sideways. */
[data-xl-score=side] [data-xl=media].xl-wait{clip-path:inset(0 0 0 48%)}
/* Science and subscribe: the picture settles into place instead of wiping. */
[data-xl-score=settle] [data-xl=media].xl-wait{clip-path:none;opacity:0;scale:1.05}
[data-xl-score=settle] [data-xl=media].xl-wait img{scale:1}
[data-xl-score=settle] [data-xl=media].xl-in{clip-path:none;transition:opacity .65s ease,scale 1s cubic-bezier(.16,1,.3,1)}
@media(max-width:760px){body .xh-warning{height:88px}.xh-warning__track span{font-size:27px!important}.xp-nav--product span{display:none}.xp-nav--product>a:first-child{font-size:17px}.xp-nav--product>a:last-child{font-size:11px}.xh-day::before{height:450px}body .xh-ingredients{padding-top:120px}.xh-trust{gap:28px}.xh-section-meta{flex-direction:column;gap:10px}body .xh-collection.is-dropping .xh-flavour-plinth img{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){[data-xl].xl-wait{opacity:1!important;scale:none!important;clip-path:none!important}.xh-liquid::after{animation:none!important}body :is(.xh-button,.v2-button,.shop-card__button,.xalt-button,.quantity__button){transition:none!important;transform:none!important}}

/* September refinement: a tighter header, selective curves and calmer brand type. */
body :is(.v2-footer,.xalt-site-footer){border-radius:0!important}
body .v2-header{height:58px;inset-block-start:18px}
body .v2-header:is(.is-inner,.is-solid){inset-block-start:0}
body .v2-header__inner{grid-template-columns:124px minmax(0,1fr) auto;gap:20px}
body .v2-logo,body .v2-logo img{width:88px}
body :is(.v2-nav a,.v2-header-actions button,.v2-header-actions a){font-size:12px}
body .v2-nav{gap:clamp(14px,1.8vw,28px)}
.xalt-home-world .xh-hero__edge{display:none}
.xalt-home-world .xh-hero .xh-display{max-width:13ch!important;font-size:clamp(44px,4.6vw,62px)!important;line-height:.96!important}
.xalt-home-world :is(.xh-hero .xh-kicker,.xh-day-intro .xh-kicker,.xh-flavour-copy>.xh-kicker,.xh-science-intro>.xh-kicker,.xh-ugc-heading .xh-kicker,.xh-testimonial-heading .xh-kicker,.xh-subscribe .xh-kicker,.xh-finale .xh-kicker,.xh-section-meta){display:none!important}
.xalt-home-world .xh-flavour-head .xh-display{font-size:clamp(40px,5.4vw,72px)}
.xalt-home-world .xh-flavour-copy h3{font-size:clamp(40px,4.8vw,66px)!important}

/* Keep the hero to flavour transition straight, then spend the main curve on the day story. */
body .xh-collection{padding-top:clamp(82px,9vw,122px)}
body .xh-warning{height:118px;border-radius:0;background:#d4241a;color:#fff1e5}
.xh-warning__track{padding-block:22px}.xh-warning__track span{font-size:38px!important;white-space:nowrap}
body .xh-day{padding-top:clamp(260px,27vw,390px);background:#181817!important}
.xh-day::before{top:-1px;left:-9%;width:118%;height:clamp(560px,53vw,790px);border-radius:0 0 72% 16%/0 0 38% 13%;background:#d4241a;transform:rotate(-1.2deg);transform-origin:top left}
body .xh-ingredients{margin-top:0;border-radius:0;padding-top:clamp(112px,13vw,168px)}
body .xh-comparison{margin-top:-1px;border-radius:0;padding-top:clamp(110px,12vw,170px)}
body .xh-subscribe{margin-top:0;border-radius:0 52% 0 0/0 88px 0 0}
body .xh-community{border-radius:34% 0 0 0/64px 0 0 0!important}
body :is(.v2-footer,.xalt-site-footer){border-radius:62% 0 0 0/64px 0 0 0}

/* A compact, expandable moment selector. */
.xh-when{z-index:4;padding:clamp(78px,9vw,120px) 0;background:#d9ff54;color:#181817;overflow:hidden}
.xh-when__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.55fr);gap:clamp(36px,7vw,100px);align-items:end;margin-bottom:42px}
.xh-when__head .xh-display{font-size:clamp(40px,5.4vw,72px)}
.xh-when__head p{max-width:42ch;font-size:17px;line-height:1.5}
.xh-when__cards{display:flex;min-height:330px;gap:10px;contain:layout}
.xh-when-card{min-width:0;flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;overflow:hidden;border:1px solid #181817;border-radius:20px;padding:22px;background:#fff1e5;cursor:default;transition:flex .55s cubic-bezier(.16,1,.3,1),background .3s,color .3s,transform .3s}
.xh-when-card:nth-child(2){background:#ed3024;color:#fff1e5}.xh-when-card:nth-child(3){background:#5a35aa;color:#fff1e5}.xh-when-card:nth-child(4){background:#181817;color:#fff1e5}
.xh-when-card:is(:hover,:focus-visible){flex:2.15;outline:0;transform:translateY(-8px)}
.xh-when-card>span{margin-bottom:auto;font-size:11px;font-weight:800;letter-spacing:.1em}
.xh-when-card h3{max-width:8ch;font-size:clamp(26px,3vw,42px)!important;line-height:.98!important}
.xh-when-card p{width:min(31ch,32vw);max-height:0;margin:0;opacity:0;transform:translateY(12px);transition:max-height .45s,opacity .3s,transform .45s}
.xh-when-card b{font-size:11px;text-transform:uppercase;letter-spacing:.09em}
.xh-when-card:is(:hover,:focus-visible) p{max-height:90px;opacity:1;transform:none}

/* Shop keeps image and buying information visible together. */
.shop-collection__head.xalt-shop-hero__grid{width:100%;max-width:none}
.xalt-shop-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end}
.xalt-shop-filter{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.xalt-shop-filter a{border:1px solid currentColor;border-radius:999px;padding:10px 15px;color:inherit;font-size:11px;font-weight:800;text-decoration:none;transition:background .25s,color .25s,transform .25s}
.xalt-shop-filter a:is(:hover,:focus-visible),.xalt-shop-filter a[aria-current=true]{color:#181817;background:#d9ff54;transform:translateY(-2px)}
[data-shop-category][hidden]{display:none!important}
.shop-collection__eyebrow{display:none}
.shop-collection__grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto}
.shop-card__media{width:100%;min-width:0;height:clamp(280px,26vw,340px);aspect-ratio:auto}
.shop-collection__head h1{font-size:clamp(48px,5vw,72px)!important}
.shop-card__primary{padding:3%;transform:scale(.88)}
.shop-card__body{padding:20px!important}
.shop-card__body h3{font-size:clamp(22px,2vw,30px)!important;line-height:1.02!important}
.v9-shop__electrolytes .v3-product-card__media{min-height:clamp(250px,26vw,360px)!important}
.v9-shop__electrolytes .v7-product-pack{max-height:330px!important;transform:scale(.88)!important}
.v9-shop__electrolytes .v3-product-card__body{padding:24px!important}

/* Community proof uses an editorial rhythm instead of equal tiles. */
.xh-ugc figure{flex-basis:clamp(240px,24vw,340px)}
.xh-ugc figure:nth-child(3n+2){padding-top:72px}.xh-ugc figure:nth-child(3n){padding-top:28px}
.xh-review-card:nth-child(2){transform:rotate(1deg)}.xh-review-card:nth-child(3){transform:translateX(-10px) rotate(-1deg)}

@media(max-width:1000px){body .v2-nav{gap:12px}.xh-when__cards{min-height:300px}.xh-when-card{padding:18px}.shop-collection__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
 body .v2-header{height:54px;inset-block-start:8px}body .v2-header:is(.is-inner,.is-solid){inset-block-start:0}body .v2-header__inner{grid-template-columns:1fr auto}body .v2-logo,body .v2-logo img{width:76px}
 .xalt-home-world .xh-hero .xh-display{font-size:clamp(34px,10vw,44px)!important;line-height:.98!important}.xalt-home-world .xh-hero__content{padding-top:clamp(118px,19vh,158px)!important}
 .xalt-home-world .xh-flavour-head .xh-display{font-size:clamp(36px,11vw,48px)}.xalt-home-world .xh-flavour-copy h3{font-size:clamp(38px,12vw,48px)!important;overflow-wrap:normal;word-break:normal}
 body .xh-warning{height:96px}.xh-warning__track{padding-block:18px}.xh-warning__track span{font-size:29px!important}
 body .xh-day{padding-top:230px}.xh-day::before{left:-26%;width:145%;height:440px;border-radius:0 0 78% 12%/0 0 34% 11%;transform:rotate(-2deg)}
 body .xh-ingredients{padding-top:96px}body .xh-subscribe{border-radius:0 40% 0 0/0 48px 0 0}body .xh-community{border-radius:28% 0 0 0/38px 0 0 0!important}
 .xh-when{padding:70px 0}.xh-when__head{grid-template-columns:1fr;gap:18px;margin-bottom:30px}.xh-when__head .xh-display{font-size:44px}.xh-when__cards{min-height:0;flex-direction:column}.xh-when-card{min-height:105px;flex:none}.xh-when-card:is(:hover,:focus-visible){flex:none;transform:none}.xh-when-card p{width:auto}.xh-when-card:is(:hover,:focus-visible) p{max-height:100px}
 .xalt-shop-hero__grid{grid-template-columns:1fr}.xalt-shop-filter{justify-content:flex-start}.shop-collection__grid{grid-template-columns:1fr;grid-auto-rows:auto}.shop-card{height:auto}.shop-card__media{height:260px!important;aspect-ratio:auto}.shop-card__body{min-height:0;height:auto;padding:18px!important}.v9-shop__electrolytes .v3-product-card__media{min-height:250px!important}
 .xh-ugc figure:nth-child(n){padding-top:0}.xh-review-card:nth-child(n){transform:none}
}

/* xalt-bag.css */
/* The bag drawer contents. Small and loaded on every commerce page, which is
   why it is separate from the checkout stylesheet. Tokens only, so the drawer
   inherits the site rather than restating it. */

.xb-drawer {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.xb-lines {
  margin: 0;
  padding: 0;
  list-style: none;
}

.xb-line {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--v2-line);
}

.xb-line__image {
  width: 72px;
  height: 72px;
  border: 1px solid var(--v2-line);
  border-radius: 10px;
  object-fit: cover;
  background: var(--v2-paper);
}

.xb-line__body {
  min-width: 0;
}

.xb-line__title {
  margin: 0;
  font-weight: 600;
}

.xb-line__meta {
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--v2-muted);
}

.xb-line__qty {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 10px;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-radius-action);
  overflow: hidden;
}

.xb-line__qty button {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--v2-ink);
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s var(--v2-ease);
}

.xb-line__qty button:hover {
  background: var(--v2-paper);
}

.xb-line__qty output {
  min-width: 26px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.xb-line__money {
  text-align: right;
  white-space: nowrap;
}

.xb-line__price {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.xb-line__price s {
  color: var(--v2-muted);
  font-size: 13px;
}

.xb-line__recurring {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--v2-muted);
}

.xb-line__remove {
  margin-top: 8px;
  border: 0;
  background: none;
  color: var(--v2-muted);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

.xb-totals {
  display: grid;
  gap: 8px;
  font-size: 15px;
}

.xb-totals__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.xb-totals__row--saving {
  color: var(--v2-red);
}

.xb-totals__row--total {
  padding-top: 10px;
  border-top: 1px solid var(--v2-line);
  font-family: var(--v2-heading-clean);
  font-size: 19px;
  font-weight: 600;
}

.xb-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--v2-muted);
}

.xb-checkout {
  display: block;
  padding: 16px 24px;
  border-radius: var(--v2-radius-action);
  background: var(--v2-red);
  color: var(--v2-lime);
  font-family: var(--v2-heading-clean);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background 0.18s var(--v2-ease);
}

.xb-checkout:hover {
  background: var(--v2-red-deep);
}

/* xalt-confirmation.css */
/* The receipt (markup from assets/xalt-confirmation.js).

   Designed as a receipt rather than a web page: a status chip, the date, the
   amount paid as the headline, a real line-by-line breakdown, and a
   perforated tear between the header and the detail. Two columns on a
   laptop so the whole thing is readable without scrolling; one column on a
   phone. Shown over the storefront after a payment, and as its own page at
   /confirmation, from the same template. */

.xr {
  --xr-ink: #181817;
  --xr-muted: #6b665f;
  --xr-line: rgba(24, 24, 23, 0.12);
  --xr-paper: #fffaf5;
  --xr-red: #ed3024;
  --xr-cream: #fff6ec;
  --xr-lime: #d7ff52;
  position: relative;
  color: var(--xr-ink);
  background: var(--xr-paper);
  font-family: var(--v2-body, system-ui);
}

/* ---- Header ------------------------------------------------------------ */

.xr__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 26px 32px 0;
}
.xr__logo { display: block; width: 76px; height: auto; }
.xr__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px 6px 9px;
  border-radius: 999px;
  color: var(--xr-ink);
  background: var(--xr-lime);
  font: 800 10.5px/1 var(--v2-body, system-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.xr .xr__close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--xr-ink);
  background: var(--xr-paper);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.xr .xr__close:hover { background: rgba(24, 24, 23, 0.07); }
.xr .xr__close:focus-visible,
.xr .xr__btn:focus-visible { outline: 3px solid var(--xr-lime); outline-offset: 3px; }

.xr__dev {
  margin: 14px 32px 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(237, 48, 36, 0.1);
  color: var(--xr-red);
  font: 700 12px/1.4 var(--v2-body, system-ui);
}

.xr__hero { padding: 18px 32px 24px; }
.xr__title {
  margin: 0 0 8px;
  font: 780 clamp(30px, 3.4vw, 40px)/1 var(--m-display, var(--v2-display, system-ui));
  letter-spacing: -0.025em;
}
.xr__order { margin: 0; color: var(--xr-muted); font: 550 14px/1.4 var(--v2-body, system-ui); }
.xr__order strong { color: var(--xr-ink); font-weight: 800; letter-spacing: 0.02em; }

/* Perforation: a dashed rule with a half-circle notch bitten out of each
   edge, the way a paper receipt tears. */
.xr__tear {
  position: relative;
  height: 0;
  margin: 0 22px;
  border-top: 2px dashed var(--xr-line);
}
.xr__tear::before,
.xr__tear::after {
  content: "";
  position: absolute;
  top: -12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--xr-notch, rgba(24, 24, 23, 0.55));
}
.xr__tear::before { left: -34px; }
.xr__tear::after { right: -34px; }

/* ---- Body ---------------------------------------------------------------- */

.xr__body {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 30px;
  padding: 26px 32px 8px;
}
.xr__col { min-width: 0; display: grid; align-content: start; gap: 18px; }

.xr__label {
  margin: 0 0 8px;
  color: var(--xr-muted);
  font: 800 10.5px/1 var(--v2-body, system-ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.xr__paid { padding-bottom: 4px; }
.xr__amount {
  margin: 0;
  font: 800 clamp(36px, 4vw, 46px)/1 var(--v2-body, system-ui);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.xr__method { margin: 8px 0 0; color: var(--xr-muted); font: 600 13px/1.4 var(--v2-body, system-ui); }

.xr__items { display: grid; gap: 12px; margin: -2px 0 0; padding: 0; list-style: none; }
.xr__item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}
.xr__thumb {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: contain;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--xr-line);
}
.xr__item-name { margin: 0 0 3px; font: 800 14px/1.25 var(--v2-body, system-ui); }
.xr__item-meta,
.xr__item-plan { margin: 0; color: var(--xr-muted); font: 550 12.5px/1.4 var(--v2-body, system-ui); }
.xr__item-plan { color: var(--xr-red); font-weight: 700; }
.xr__item-price {
  display: grid;
  justify-items: end;
  gap: 2px;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.xr__item-price strong { font: 800 14.5px/1 var(--v2-body, system-ui); }
.xr__item-price s { color: var(--xr-muted); font: 600 12px/1 var(--v2-body, system-ui); }

.xr__totals { display: grid; gap: 9px; margin: 0; padding-top: 14px; border-top: 1px solid var(--xr-line); }
.xr__totals > div { display: flex; justify-content: space-between; gap: 16px; }
.xr__totals dt,
.xr__totals dd { margin: 0; font: 600 13.5px/1.3 var(--v2-body, system-ui); font-variant-numeric: tabular-nums; }
.xr__totals dt { color: var(--xr-muted); }
.xr__totals .is-saving dt,
.xr__totals .is-saving dd { color: var(--xr-red); font-weight: 750; }
.xr__total { margin-top: 4px; padding-top: 11px; border-top: 1.5px solid var(--xr-ink); }
.xr__total dt,
.xr__total dd { color: var(--xr-ink) !important; font: 800 15.5px/1.2 var(--v2-body, system-ui) !important; }

/* Subscription: today, then the next delivery, as a two-stop timeline. */
.xr__sub {
  padding: 18px 18px 16px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--xr-red) 7%, var(--xr-paper));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--xr-red) 25%, transparent);
}
.xr__timeline {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 4px 0 12px;
  padding: 0;
  list-style: none;
}
.xr__timeline::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 7px;
  right: 50%;
  height: 2px;
  background: linear-gradient(90deg, var(--xr-red), color-mix(in srgb, var(--xr-red) 30%, transparent));
}
.xr__timeline li { position: relative; display: grid; gap: 4px; }
.xr__dot {
  width: 14px;
  height: 14px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--xr-paper);
  box-shadow: inset 0 0 0 2px var(--xr-red);
}
.xr__timeline li.is-done .xr__dot { background: var(--xr-red); }
.xr__when { color: var(--xr-muted); font: 700 11.5px/1.2 var(--v2-body, system-ui); }
.xr__timeline strong { font: 800 17px/1 var(--v2-body, system-ui); font-variant-numeric: tabular-nums; }
.xr__sub-note { margin: 0; color: var(--xr-ink); font: 600 12.5px/1.45 var(--v2-body, system-ui); }

.xr__address,
.xr__email { margin: 0; font: 600 13.5px/1.55 var(--v2-body, system-ui); font-style: normal; overflow-wrap: anywhere; }

/* ---- Footer ------------------------------------------------------------ */

.xr__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 18px 32px 24px;
  border-top: 1px solid var(--xr-line);
}
.xr .xr__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px;
  border: 2px solid var(--xr-ink);
  border-radius: 999px;
  color: #fff;
  background: var(--xr-red);
  font: 800 12.5px/1 var(--v2-body, system-ui);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--xr-ink);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.xr .xr__btn:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--xr-ink); }
.xr .xr__btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--xr-ink); }
.xr .xr__btn--ghost { color: var(--xr-ink); background: transparent; box-shadow: none; }
.xr .xr__btn--ghost:hover { background: rgba(24, 24, 23, 0.06); box-shadow: none; }
.xr__help { margin: 0 0 0 auto; color: var(--xr-muted); font: 600 12.5px/1.4 var(--v2-body, system-ui); }
.xr__help a { color: var(--xr-ink); text-underline-offset: 3px; }

/* ---- Loading and missing states ------------------------------------------ */

.xr__state {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 64px 32px;
  text-align: center;
  color: var(--xr-muted);
  font: 600 14px/1.5 var(--v2-body, system-ui);
}
.xr__state p { max-width: 38ch; margin: 0; }
.xr__state-title { margin: 0; color: var(--xr-ink); font: 780 26px/1.1 var(--m-display, var(--v2-display, system-ui)); }
.xr__spinner {
  width: 26px;
  height: 26px;
  border: 3px solid var(--xr-line);
  border-top-color: var(--xr-red);
  border-radius: 50%;
  animation: xr-spin 0.8s linear infinite;
}
@keyframes xr-spin { to { transform: rotate(360deg); } }

/* ---- As a dialog over the storefront ------------------------------------ */

.xf-modal {
  width: min(820px, calc(100vw - 32px));
  max-height: calc(100dvh - 40px);
  padding: 0;
  border: 1.5px solid #181817;
  border-radius: 24px;
  background: #fffaf5;
  box-shadow: 0 30px 80px rgba(24, 24, 23, 0.32);
  overflow: auto;
}
.xf-modal::backdrop { background: rgba(24, 24, 23, 0.58); backdrop-filter: blur(4px); }
/* The perforation notches match the dimmed page behind the dialog. */
.xr--modal { --xr-notch: rgba(24, 24, 23, 0.58); }

/* ---- As a page (/confirmation) --------------------------------------------- */

.xr-page {
  min-height: 100vh;
  padding: clamp(24px, 5vw, 64px) 16px;
  background: #efe8df;
}
.xr-page .xr {
  max-width: 820px;
  margin: 0 auto;
  border: 1.5px solid #181817;
  border-radius: 24px;
  box-shadow: 8px 9px 0 #181817;
  overflow: hidden;
  --xr-notch: #efe8df;
}

/* ---- Phones ---------------------------------------------------------------- */

@media (max-width: 720px) {
  .xr__head { padding: 22px 20px 0; }
  .xr__hero { padding: 14px 20px 20px; }
  .xr__tear { margin: 0 12px; }
  .xr__tear::before { left: -24px; }
  .xr__tear::after { right: -24px; }
  .xr__body { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 22px 20px 4px; }
  .xr__foot { padding: 16px 20px 22px; }
  .xr__foot .xr__btn { flex: 1 1 100%; }
  .xr__help { margin: 4px 0 0; }
  .xf-modal { width: calc(100vw - 20px); border-radius: 20px; }
}

/* ---- Save receipt: print just the receipt, never the page behind it ------- */

@media print {
  /* Only when the receipt is a popup; on /confirmation it is the page. */
  body[data-xf-printing]:has(> .xf-modal[open]) > *:not(.xf-modal) { display: none !important; }
  .xf-modal {
    position: static;
    width: 100%;
    max-width: 100%;
    max-height: none;
    border: 0;
    box-shadow: none;
    overflow: visible;
  }
  .xf-modal::backdrop { display: none; }
  .xr-page { padding: 0; background: #fff; }
  .xr-page .xr { box-shadow: none; }
  .xr__close,
  .xr__foot .xr__btn { display: none !important; }
  .xr__tear::before,
  .xr__tear::after { display: none; }
  .xr__sub,
  .xr__status { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (prefers-reduced-motion: reduce) {
  .xr__spinner { animation-duration: 2s; }
  .xr__btn { transition: none; }
}

/* Account, straight after the order. */
.xr__account { margin: 0 24px; padding: 18px 0 4px; border-top: 1px solid var(--xr-line, #e3ddd3); }
.xr__account-copy { margin: 6px 0 14px; font: 500 14px/1.5 var(--v2-body, system-ui); color: var(--xr-ink); }
.xr__account-note { margin: 10px 0 0; font: 600 12.5px/1.4 var(--v2-body, system-ui); color: var(--xr-muted); }
.xr__account-note:empty { display: none; }
@media (max-width: 760px) { .xr__account { margin: 0 20px; } }

/* xalt-pour.css */
/* Welcome game: pour the perfect 500ml. Pairs with xalt-pour.js. */

.xpg {
  width: min(420px, calc(100vw - 28px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1.5px solid #181817;
  border-radius: 24px;
  color: #181817;
  background: #fffaf5;
  box-shadow: 0 30px 80px rgba(24, 24, 23, 0.32);
  overflow: auto;
}
.xpg::backdrop { background: rgba(24, 24, 23, 0.6); backdrop-filter: blur(4px); }

.xpg__inner { position: relative; padding: 26px 24px 24px; text-align: center; }

.xpg .xpg__close {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid currentColor; border-radius: 50%;
  background: transparent; color: inherit;
  font-size: 19px; line-height: 1; cursor: pointer;
}
.xpg .xpg__close:hover { background: rgba(24, 24, 23, 0.07); }

.xpg__eyebrow {
  margin: 0 0 8px; color: #ed3024;
  font: 800 10px/1 var(--v2-body, system-ui); letter-spacing: 0.14em; text-transform: uppercase;
}
.xpg__title {
  margin: 0 0 8px;
  font: 780 27px/1.05 var(--m-display, var(--v2-display, system-ui)); letter-spacing: -0.025em;
}
.xpg__lede {
  max-width: 32ch; margin: 0 auto 14px;
  color: #6d6a66; font: 550 13px/1.45 var(--v2-body, system-ui);
}

/* ---- The bottle ---------------------------------------------------- */

.xpg__stage { position: relative; margin: 0 auto; width: 200px; }
.xpg__bottle { display: block; width: 200px; height: 320px; overflow: visible; }

.xpg__glass {
  fill: none; stroke: #181817; stroke-width: 3; stroke-linejoin: round;
}
.xpg__cap { fill: #181817; opacity: 0; transform-box: fill-box; transform-origin: center; }
/* The bottle is open while it is filled, and capped once the sachet is in. */
.xpg[data-state="mixed"] .xpg__cap { opacity: 1; animation: xpg-cap 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes xpg-cap { from { transform: translateY(-22px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.xpg__marks line { stroke: rgba(24, 24, 23, 0.35); stroke-width: 2; stroke-linecap: round; }
.xpg__marks text { fill: rgba(24, 24, 23, 0.45); font: 700 9px/1 var(--v2-body, system-ui); }

/* The XALT line: the target. */
.xpg__line { stroke: #ed3024; stroke-width: 2.5; stroke-dasharray: 5 5; stroke-linecap: round; }
.xpg__line-label { fill: #ed3024; font: 800 11px/1 var(--v2-body, system-ui); }

/* Water: plain until the sachet lands, then it turns watermelon. */
.xpg__water { transition: transform 0.06s linear; }
.xpg__wave {
  fill: #bfe3f2;
  transition: fill 0.9s ease;
  animation: xpg-wave 1.6s linear infinite;
}
.xpg[data-state="mixed"] .xpg__wave { fill: #ff7b86; }
@keyframes xpg-wave { to { transform: translateX(100px); } }

.xpg__stream { fill: #bfe3f2; }

/* The sachet waits above the neck, then drops in once the pour is done. */
.xpg__sachet { transform: translateY(0); opacity: 0; transform-box: fill-box; transform-origin: center; }
.xpg__sachet rect { fill: #ed3024; }
.xpg__sachet text { fill: #fff; font: 800 8px/1 var(--v2-display, system-ui); }
.xpg[data-state="settling"] .xpg__sachet,
.xpg[data-state="mixed"] .xpg__sachet {
  animation: xpg-drop 0.9s cubic-bezier(0.55, 0, 0.45, 1) forwards;
}
@keyframes xpg-drop {
  0% { transform: translateY(0); opacity: 1; }
  55% { transform: translateY(150px) rotate(-8deg); opacity: 1; }
  100% { transform: translateY(210px) rotate(12deg); opacity: 0; }
}

/* Fizz once it dissolves. */
.xpg__bubbles circle {
  fill: rgba(255, 255, 255, 0.85);
  animation-name: xpg-rise;
  animation-timing-function: ease-in;
  animation-fill-mode: both;
  animation-iteration-count: 2;
}
@keyframes xpg-rise {
  from { transform: translateY(0); opacity: 0.9; }
  to { transform: translateY(var(--rise, -120px)); opacity: 0; }
}

.xpg__readout {
  margin: 6px 0 0;
  font: 800 22px/1 var(--v2-body, system-ui);
  font-variant-numeric: tabular-nums;
}

/* ---- Controls --------------------------------------------------------- */

.xpg .xpg__pour {
  width: 100%;
  min-height: 54px;
  margin-top: 16px;
  border: 2px solid #181817;
  border-radius: 999px;
  color: #fff;
  background: #ed3024;
  font: 800 14px/1 var(--v2-body, system-ui);
  letter-spacing: 0.03em;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  -webkit-touch-callout: none;
  box-shadow: 0 5px 0 #181817;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.xpg[data-state="pouring"] .xpg__pour { transform: translateY(4px); box-shadow: 0 1px 0 #181817; }
.xpg .xpg__pour:focus-visible { outline: 3px solid #d7ff52; outline-offset: 3px; }
.xpg__hint { margin: 10px 0 0; color: #8a857f; font: 600 11.5px/1.4 var(--v2-body, system-ui); }

/* ---- Result ----------------------------------------------------------- */

.xpg__result { margin-top: 14px; }
.xpg__verdict { margin: 0 0 4px; color: #6d6a66; font: 700 13px/1.3 var(--v2-body, system-ui); }
.xpg__won { margin: 0 0 4px; color: #ed3024; font: 800 24px/1.1 var(--v2-body, system-ui); }
.xpg__note { margin: 0 0 14px; color: #6d6a66; font: 550 12px/1.4 var(--v2-body, system-ui); }
.xpg .xpg__code {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border: 1.5px dashed #181817; border-radius: 12px;
  background: #fff; color: #181817;
  font: 800 16px/1 var(--v2-body, system-ui); letter-spacing: 0.08em;
  cursor: pointer;
}
.xpg__copy { color: #ed3024; font: 700 11px/1 var(--v2-body, system-ui); letter-spacing: 0.04em; text-transform: uppercase; }
.xpg__shop {
  display: block; margin-top: 14px;
  color: #181817; font: 800 12.5px/1 var(--v2-body, system-ui);
  letter-spacing: 0.04em; text-transform: uppercase; text-underline-offset: 3px;
}

.xpg__sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- "Win a discount" tab, for anyone who closed it unplayed ---------- */

.xpg-tab {
  position: fixed; left: 16px; bottom: 16px; z-index: 55;
  display: inline-flex; align-items: stretch;
  border: 1.5px solid #181817; border-radius: 999px;
  background: #d7ff52;
  box-shadow: 0 8px 22px rgba(24, 24, 23, 0.18);
  overflow: hidden;
}
.xpg-tab button {
  border: 0; background: transparent; color: #181817; cursor: pointer;
  font: 800 12px/1 var(--v2-body, system-ui); letter-spacing: 0.04em;
}
.xpg-tab__open { padding: 12px 6px 12px 16px; }
.xpg-tab__x { padding: 0 14px 0 8px; font-size: 16px; }
.xpg-tab button:focus-visible { outline: 3px solid #ed3024; outline-offset: -3px; }

@media (prefers-reduced-motion: reduce) {
  .xpg__wave, .xpg__bubbles circle, .xpg__sachet, .xpg__cap { animation: none !important; }
  .xpg__water { transition: none; }
}

/* Prize by email: the code is never shown; the player sends it to their
   inbox. */
.xpg .xpg__claim { display: grid; gap: 8px; margin-top: 14px; text-align: left; }
.xpg .xpg__label { font: 750 13px/1.3 var(--v2-body, system-ui); color: #181817; }
.xpg .xpg__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.xpg .xpg__row[hidden], .xpg .xpg__label[hidden] { display: none; }
.xpg .xpg__email {
  min-width: 0; min-height: 46px; padding: 0 14px;
  border: 1.5px solid #181817; border-radius: 12px; background: #fff;
  font: 550 16px/1 var(--v2-body, system-ui); color: #181817;
}
.xpg .xpg__email:focus-visible { outline: 3px solid #ed3024; outline-offset: 2px; }
.xpg .xpg__email[aria-invalid="true"] { border-color: #ed3024; }
.xpg .xpg__send {
  min-height: 46px; padding: 0 16px; border: 1.5px solid #181817; border-radius: 999px;
  background: #ed3024; color: #fff; font: 800 13px/1 var(--v2-body, system-ui); cursor: pointer; white-space: nowrap;
}
.xpg .xpg__send[disabled] { opacity: 0.6; cursor: progress; }
.xpg .xpg__send:focus-visible { outline: 3px solid #d7ff52; outline-offset: 3px; }
.xpg .xpg__status { margin: 0; min-height: 1em; font: 650 12.5px/1.4 var(--v2-body, system-ui); }
.xpg .xpg__status:empty { display: none; }
.xpg .xpg__status[data-tone="ok"] { color: #1c7a4a; }
.xpg .xpg__status[data-tone="error"] { color: #ed3024; }
.xpg .xpg__fine { margin: 0; color: #8a857f; font: 550 11.5px/1.4 var(--v2-body, system-ui); }
.xpg .xpg__shop[hidden] { display: none; }
@media (max-width: 420px) {
  .xpg .xpg__row { grid-template-columns: minmax(0, 1fr); }
}

.xpg .xpg__readout[hidden] { display: none; }

/* The tab steps aside while someone is reading down the page (the header
   tucks at the same moment) and returns as soon as they scroll back up. */
.xpg-tab { transition: translate 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
html.xs-reading .xpg-tab { translate: calc(-100% - 24px) 0; }
@media (max-width: 760px) {
  .xpg-tab { left: 12px; bottom: 12px; }
  .xpg-tab .xpg-tab__open { padding-inline: 12px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .xpg-tab { transition: none; } }

/* The tab is a round % button (replaces the "Win a discount" pill). */
.xpg-tab {
  left: 16px; bottom: 16px;
  display: block; width: 52px; height: 52px;
  border: 0; border-radius: 50%; background: none; box-shadow: none; overflow: visible;
}
.xpg-tab .xpg-tab__open {
  display: grid; place-items: center; width: 52px; height: 52px; padding: 0;
  border: 2px solid #181817; border-radius: 50%;
  color: #fff; background: #ed3024;
  box-shadow: 3px 4px 0 #181817;
  font: 800 24px/1 var(--v2-body, system-ui);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.xpg-tab .xpg-tab__open:hover { transform: translateY(-2px); box-shadow: 3px 6px 0 #181817; }
.xpg-tab .xpg-tab__x {
  position: absolute; top: -6px; right: -6px;
  display: grid; place-items: center; width: 22px; height: 22px; padding: 0;
  border: 1.5px solid #181817; border-radius: 50%;
  color: #181817; background: #fffaf5; font-size: 13px; line-height: 1;
}
@media (max-width: 760px) {
  .xpg-tab { left: 12px; bottom: 12px; width: 46px; height: 46px; }
  .xpg-tab .xpg-tab__open { width: 46px; height: 46px; padding: 0; font-size: 21px; }
}

/* Phones: out of the way while reading down (see xalt-pour.js). */
.xpg-tab { transition: opacity .25s ease, translate .3s cubic-bezier(0.22, 1, 0.36, 1); }
.xpg-tab.is-away { opacity: 0; translate: -16px 0; pointer-events: none; }

/* xalt-scroll.css */
/* Site scroll feel. Pairs with assets/xalt-scroll.js. */

/* Lenis base rules (lenis@1.3.26, MIT). */
html.lenis,
html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* The site sets scroll-behavior:smooth for anchor links. Lenis now does
   that easing itself, and the two together fight: each wheel step would be
   smoothed twice and feel like wading. */
html.lenis,
html.lenis body { scroll-behavior: auto !important; }

/* Depth layers move on the compositor. */
.xh-hero__media,
.xw-hero__media { will-change: translate; }

/* Flavour meters, before they are filled by scroll. The card's own rules in
   xalt-flavours-september.css are scoped by #xh-flavours, so these match
   that specificity rather than lose to it. Unfilled dots use the design's
   own empty tone (cream at 28%); a lit dot is the design's solid cream. The
   pop animation is held back, since the fill is the motion now. */
body #xh-flavours[data-xm-meters="armed"] .xh-tnote__meter i.is-on {
  background: rgba(255, 246, 236, 0.28);
  animation: none;
  transition: background-color 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
body #xh-flavours[data-xm-meters="armed"] .xh-tnote__meter i.is-on.is-lit {
  background: rgb(255, 246, 236);
}

@media (prefers-reduced-motion: reduce) {
  .xh-hero__media,
  .xw-hero__media { will-change: auto; translate: none !important; }
}

/* Header steps away on the way down and back on the way up. The original
   colour/background transitions are kept; translate is added alongside. */
.v2-header {
  transition: color 260ms ease, background-color 260ms ease, box-shadow 260ms ease,
    translate 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.v2-header.is-tucked { translate: 0 -110%; }
@media (prefers-reduced-motion: reduce) {
  .v2-header.is-tucked { translate: none; }
}

/* ---- Layered arrivals (assets/xalt-scroll.js, section 4) ----------------

   Armed only by the script, only below the fold, and handed back clean once
   played, so without JavaScript or with reduced motion nothing is hidden.
   Motion is opacity, translate and scale: no clip-path or overflow masks,
   so a heading's letters are never cropped and no dark edge shows ahead of
   it. The easing is a long exponential settle, quick to start and soft to
   land, to match the glide of the scroll itself. */

:root {
  --xs-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --xs-rise: 28px;
}

[data-xs].xs-arm { transition: none; }

/* Copy, buttons, labels and cards rise into place. */
[data-xs]:is([data-xs="text"], [data-xs="action"], [data-xs="kicker"], [data-xs="card"]).xs-arm {
  opacity: 0;
  translate: 0 var(--xs-rise);
}
[data-xs="card"].xs-arm { translate: 0 calc(var(--xs-rise) * 1.4); }
[data-xs]:is([data-xs="text"], [data-xs="action"], [data-xs="kicker"], [data-xs="card"]).xs-arm.xs-in {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity .7s ease var(--xs-d, 0ms),
    translate .9s var(--xs-ease) var(--xs-d, 0ms);
}

/* Pictures settle: they grow the last few percent into their frame rather
   than sliding, so a layout never shifts under them. */
[data-xs="media"].xs-arm {
  opacity: 0;
  scale: 0.94;
}
[data-xs="media"].xs-arm.xs-in {
  opacity: 1;
  scale: 1;
  transition:
    opacity .8s ease var(--xs-d, 0ms),
    scale 1.1s var(--xs-ease) var(--xs-d, 0ms);
}

/* Headings: each word rises from just under its own line, one after the
   other. The heading box itself never moves or hides. */
[data-xs="heading"] .xs-w { display: inline-block; }
[data-xs="heading"].xs-arm .xs-w {
  opacity: 0;
  translate: 0 0.45em;
}
[data-xs="heading"].xs-arm.xs-in .xs-w {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity .6s ease calc(var(--xs-d, 0ms) + var(--xs-i, 0) * 45ms),
    translate .9s var(--xs-ease) calc(var(--xs-d, 0ms) + var(--xs-i, 0) * 45ms);
}

/* Stickers pop on: they start small and turned, and spring into place. */
[data-xs="sticker"].xs-arm {
  opacity: 0;
  scale: 0.4;
  rotate: -16deg;
}
[data-xs="sticker"].xs-arm.xs-in {
  opacity: 1;
  scale: 1;
  rotate: 0deg;
  transition:
    opacity 0.4s ease var(--xs-d, 0ms),
    scale .9s cubic-bezier(0.34, 1.56, 0.64, 1) var(--xs-d, 0ms),
    rotate .9s cubic-bezier(0.34, 1.56, 0.64, 1) var(--xs-d, 0ms);
}

/* Phones: the same layering, a shorter rise to suit the smaller screen.
   Pictures never start fully blank, so a photo is always recognisable even
   mid-arrival. */
@media (max-width: 767px) {
  :root { --xs-rise: 20px; }
  [data-xs="heading"].xs-arm .xs-w { translate: 0 0.35em; }
  [data-xs="media"].xs-arm { opacity: 0.25; scale: 0.95; }
}

@media (prefers-reduced-motion: reduce), print {
  [data-xs].xs-arm,
  [data-xs].xs-arm .xs-w { opacity: 1 !important; translate: none !important; scale: none !important; rotate: none !important; }
}

/* Normal scrolling everywhere (October 2026): no easing, even for links
   that jump within a page, and no smooth/normal switch. */
html { scroll-behavior: auto !important; }
.xs-scroll-toggle { display: none !important; }

/* xalt-controls.css */
/* Shared controls: one definition for the pieces that appear on many pages,
   loaded after every page stylesheet (and before the phone layer) so it
   settles the arguments older page styles were having with each other.
   Several rules carry !important for exactly that reason: they replace
   three or four earlier, conflicting versions of the same control. */

/* ---- Header icons -------------------------------------------------------
   Search, account and bag are the same size box with the same size glyph on
   every page, so they line up on one centre line and space evenly. */
body :is(.v2-header-actions, .m-actions) {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
body :is(.v2-header-actions, .m-actions) .v2-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px;
  padding: 0 !important;
  border-radius: 50%;
}
body :is(.v2-header-actions, .m-actions) .v2-icon-btn svg {
  width: 20px !important;
  height: 20px !important;
  flex: none;
}
/* The bag count is a small solid badge on the bag's top-right corner,
   clear of the handle, with a ring in the header colour so it reads as
   separate from the glyph. Empty bags show a quiet grey 0. */
/* (The product page's bag is pinned to the screen; being fixed, it already
   anchors its badge, and must not be made relative.) */
body :is(.v2-header-actions, .m-actions, .xs-menu-actions) .v2-bag-btn:not(.m-bag-btn) { position: relative; }
body :is(.v2-header-actions, .m-actions, .xs-menu-actions) .v2-bag-btn .v2-bag-count {
  position: absolute !important;
  top: -2px !important;
  right: -5px !important;
  min-width: 17px !important;
  height: 17px !important;
  padding: 0 4px !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: #ed3024 !important;
  box-shadow: 0 0 0 2px var(--xs-header-bg, #fffefa) !important;
  font: 800 10px/17px var(--v2-body, system-ui) !important;
  text-align: center;
  letter-spacing: 0 !important;
  pointer-events: none;
}
body :is(.v2-header-actions, .m-actions, .xs-menu-actions) .v2-bag-btn .v2-bag-count[data-empty] {
  color: #181817 !important;
  background: #e9e3da !important;
}
body .v2-header:not(.is-solid):not(.is-inner) { --xs-header-bg: transparent; }
body .v2-mobile-menu { --xs-header-bg: #ed3024; }
body .m-actions { --xs-header-bg: transparent; }
/* Phones: slightly smaller icon boxes so logo, three icons and the Menu
   pill always fit on one line, down to a 320px screen. */
@media (max-width: 760px) {
  body :is(.v2-header-actions, .m-actions) { gap: 0 !important; }
  body :is(.v2-header-actions, .m-actions) .v2-icon-btn { width: 36px !important; height: 36px !important; min-width: 36px; }
  body :is(.v2-header-actions, .m-actions) .v2-icon-btn svg { width: 19px !important; height: 19px !important; }
  body .v2-header-actions .v2-bag-btn + .v2-menu-toggle { margin-left: 6px !important; }
}
/* The product page header fits its icons into a narrower column. */
@media (min-width: 761px) {
  body .m-actions { gap: 0 !important; flex: none; }
  /* The product page pins its bag to the screen so it stays reachable
     while the header scrolls away. Pinned items take no space in the row,
     so the row keeps a bag-sized gap for it, and the bag sits on the same
     centre line as search and account. */
  body .m-actions:has(.m-bag-btn) { padding-right: 42px !important; }
  body .m-actions .m-bag-btn { top: 25px !important; width: 38px !important; height: 38px !important; background: transparent !important; }
  /* Nav spacing that still fits the icons at 1280 wide. */
  body .m-header .m-nav { gap: clamp(12px, 1.3vw, 26px) !important; }
  body .m-actions .v2-icon-btn { width: 38px !important; height: 38px !important; min-width: 38px; }
}
/* Phones: the product page's bag sits in the row like every other page's
   (search, account, bag, Menu) instead of pinned past the Menu button. */
@media (max-width: 900px) {
  body .m-actions .m-bag-btn { position: relative !important; top: auto !important; right: auto !important; background: transparent !important; }
  body .m-actions:has(.m-bag-btn) { padding-right: 0 !important; }
  body .m-actions .m-bag-btn + .v2-menu-toggle { margin-left: 6px !important; }
}
/* Nav labels never break onto two lines ("WHY / XALT"). */
body :is(.v2-nav, .m-nav) a { white-space: nowrap !important; }

/* ---- Open / close icon ---------------------------------------------------
   Every accordion on the site (benefits, the science, FAQs, the product
   page) uses this one drawn icon: a thin ring with a plus that folds into a
   minus. Drawn with two bars rather than a "+" character, so it sits
   exactly centred in every font. */
body :is(.xh-disclosure__plus, .xp-plus, .benefit-plus) {
  position: relative !important;
  display: inline-block !important;
  flex: 0 0 28px !important;
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid currentColor !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: inherit !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: none !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease !important;
}
body :is(.xh-disclosure__plus, .xp-plus, .benefit-plus)::before,
body :is(.xh-disclosure__plus, .xp-plus, .benefit-plus)::after {
  content: "" !important;
  position: absolute !important;
  /* A 26px inside with a 12 x 2 bar: every edge on a whole pixel, so the
     plus is crisp and dead centre at any zoom. */
  top: 12px !important;
  left: 7px !important;
  right: auto !important;
  width: 12px !important;
  height: 2px !important;
  margin: 0 !important;
  border-radius: 1px;
  background: currentColor !important;
  transform: none !important;
  translate: none !important;
  rotate: 0deg !important;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) !important;
}
body :is(.xh-disclosure__plus, .xp-plus, .benefit-plus)::after {
  transform: rotate(90deg) !important;
}
body :is(
  details[open] > summary .xh-disclosure__plus,
  .xh-disclosure[open] .xh-disclosure__plus,
  .xh-benefits__item[data-active="true"] .xh-disclosure__plus,
  details[open] > summary .xp-plus,
  .benefit[aria-expanded="true"] .benefit-plus
)::after {
  transform: rotate(0deg) !important;
}
@media (hover: hover) {
  body :is(summary, .xh-benefits__toggle, .benefit):hover :is(.xh-disclosure__plus, .xp-plus, .benefit-plus) {
    background: color-mix(in srgb, currentColor 14%, transparent) !important;
  }
}

/* ---- Arrows ---------------------------------------------------------------
   Prev/next buttons draw their arrow instead of using a text character. */
.xs-arrow { display: block; width: 18px; height: 18px; }
/* Phones show no arrow characters beside words at all: the words carry the
   meaning, and the characters read as emoji at small sizes. */
@media (max-width: 760px) {
  .xs-glyph { display: none !important; }
}

/* ---- Phone menu ------------------------------------------------------------ */
@media (max-width: 1080px) {
  /* The Menu button is the one control on the bar with a filled shape, so
     it reads as the way in. */
  body .v2-menu-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    min-height: 36px !important;
    padding: 0 11px 0 10px !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #fffaf5 !important;
    background: #181817 !important;
    font: 800 11px/1 var(--v2-body) !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase;
    box-shadow: none !important;
  }
  body .v2-menu-toggle::before {
    content: "";
    width: 14px;
    height: 10px;
    background:
      linear-gradient(currentColor, currentColor) top / 100% 1.6px no-repeat,
      linear-gradient(currentColor, currentColor) center / 100% 1.6px no-repeat,
      linear-gradient(currentColor, currentColor) bottom / 100% 1.6px no-repeat;
  }
  /* The open menu: comfortable, not shouting. */
  body .v2-mobile-menu { padding: 22px 22px 26px !important; }
  body .v2-mobile-menu nav { align-self: start !important; gap: 0 !important; margin-top: 28px; }
  /* Links stay in the brand face, at a size that reads as a list rather
     than a poster. */
  body .v2-mobile-menu nav a:not(#xs) {
    display: flex;
    align-items: center;
    min-height: 54px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.24);
    font-size: 22px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
  }
  /* Search, account and bag live in the menu's top bar too, since the open
     menu covers the site header. */
  body .v2-mobile-menu__head { gap: 8px; }
  body .v2-mobile-menu__head img { margin-right: auto; }
  body .xs-menu-actions { display: flex; align-items: center; gap: 0; }
  body .xs-menu-actions .v2-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
    color: inherit; background: transparent; position: relative;
  }
  body .xs-menu-actions .v2-icon-btn svg { width: 20px; height: 20px; }
  body .v2-mobile-menu__close { min-height: 40px; padding: 0 16px !important; font-weight: 750; }
}

/* ---- Smooth scroll toggle (assets/xalt-scroll.js) --------------------------
   A small switch in the corner for comparing the two ways of scrolling.
   Laptops only: phones always scroll natively. */
.xs-scroll-toggle {
  position: fixed;
  left: 18px;
  bottom: 86px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 8px 0 14px;
  border: 1px solid rgba(24, 24, 23, 0.14);
  border-radius: 999px;
  color: #181817;
  background: #fffaf5;
  box-shadow: 0 8px 24px rgba(24, 24, 23, 0.12);
  font: 750 12px/1 var(--v2-body, system-ui);
  cursor: pointer;
}
.xs-scroll-toggle__track {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: #d8d1c7;
  transition: background-color 0.2s ease;
}
.xs-scroll-toggle__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: translate 0.22s cubic-bezier(0.3, 0.9, 0.3, 1.2);
}
.xs-scroll-toggle[aria-checked="true"] .xs-scroll-toggle__track { background: #ed3024; }
.xs-scroll-toggle[aria-checked="true"] .xs-scroll-toggle__track::after { translate: 14px 0; }
.xs-scroll-toggle:focus-visible { outline: 3px solid #ed3024; outline-offset: 3px; }
@media (hover: none), (max-width: 900px) {
  .xs-scroll-toggle { display: none; }
}
@media print { .xs-scroll-toggle { display: none; } }

/* ---- Scrolling performance ------------------------------------------------
   Frosted-glass blur (backdrop-filter) makes the graphics chip re-blur
   whatever is behind an element on every frame the page moves under it. On
   a sticky header, floating buttons and captions that ride over photos that
   is several screen-sized blurs per frame, which is what made scrolling
   stutter on ordinary laptops. None of them blur any more; they use
   near-solid colour instead, which reads the same. The product page's
   ingredient cards keep their glass on laptops (phones already drop it),
   because that look is the point of them. */
body *:not(.benefit),
body *::before,
body *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body .v2-header:is(.is-solid, .is-inner) { background: rgba(255, 254, 250, 0.98) !important; }
body .xs-scroll-toggle { background: #fffaf5; }

/* Summaries that carry the icon keep their words and the icon on one line. */
/* Only the two-part rows (question and icon: the FAQ, the science
   sources). Numbered rows keep their own grid, which aligns every title to
   the left after its number. */
body :is(.xh-faq, .xh-science-sources) summary { display: flex !important; align-items: center; justify-content: space-between; gap: 14px; list-style: none; text-align: left; }
body :is(.xh-faq, .xh-science-sources) summary::-webkit-details-marker { display: none; }
body :is(.xh-faq, .xh-science-sources) summary::after { content: none !important; }
/* Numbered rows: number, title, icon; the title always starts at the left. */
body .xh-disclosure summary:has(> .xh-disclosure__number) { display: grid !important; grid-template-columns: 34px minmax(0, 1fr) 32px; align-items: center; justify-content: stretch; text-align: left; }
body .xh-disclosure summary:has(> .xh-disclosure__number) > h3 { justify-self: start; text-align: left; margin: 0; }
body .xh-disclosure summary:has(> .xh-disclosure__number) > .xh-disclosure__plus { justify-self: end; }
body .xh-faq .xh-disclosure__plus { flex-basis: 24px !important; width: 24px !important; height: 24px !important; }

/* ---- No lime rings or glows ------------------------------------------------
   Lime stays a fill colour (chips, the When XALT background, button
   hovers), never a ring, outline or glow around a border. Keyboard focus is
   still always visible: a thin ring in the element's own text colour, which
   shows on light and dark backgrounds alike. Panels and dialogs that take
   focus only so screen readers land in the right place get no ring. */
body :focus-visible { outline: 2px solid currentColor !important; outline-offset: 3px !important; }
body :focus:not(:focus-visible) { outline: none !important; }
body :is(dialog, [role="dialog"], [role="tabpanel"], main, section, article, [tabindex="-1"]):focus,
body :is(dialog, [role="dialog"], [role="tabpanel"], main, section, article, [tabindex="-1"]):focus-visible { outline: none !important; }
body .xw-payout, body .xw-label { box-shadow: 9px 9px 0 #181817 !important; }
body .pp-card--ink { box-shadow: 5px 6px 0 #181817 !important; }
body :is(.xh-disclosure summary, .xh-benefits__toggle):is(:hover, :focus-visible) .xh-disclosure__plus { border-color: currentColor !important; }

/* ---- Tighter spacing --------------------------------------------------- */
@media (min-width: 761px) {
  /* When XALT: about a third less height; the cards stay generous. */
  body main .xh-when { padding-block: clamp(56px, 6vw, 84px) !important; }
  body main .xh-when__head { margin-bottom: 28px !important; }
  body main .xh-when__cards { min-height: 250px !important; }
  /* Footer: no long empty band before the brand block. */
  body .v2-footer--clean .v2-footer__top { padding-top: clamp(40px, 4.5vw, 64px) !important; }
}

/* ---- Floating bag (assets/xalt-scroll.js) -------------------------------
   Takes over from the header bag once it has scrolled away, in the same
   spot. Cream disc over light sections and photos; clear disc with a white
   icon over red or dark sections, so it always reads. */
body .xs-float-bag:not(#xs) {
  position: fixed;
  z-index: 55;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(24, 24, 23, 0.12);
  border-radius: 50%;
  color: #181817;
  background: rgba(255, 254, 250, 0.94);
  box-shadow: 0 6px 18px rgba(24, 24, 23, 0.12);
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  animation: none;
  opacity: 0;
  scale: 0.8;
  pointer-events: none;
  transition: opacity 260ms ease, scale 420ms cubic-bezier(0.34, 1.56, 0.64, 1),
    color 240ms ease, background-color 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}
body .xs-float-bag:not(#xs).is-shown { opacity: 1; scale: 1; pointer-events: auto; }
body .xs-float-bag:not(#xs) svg { width: 20px; height: 20px; }
body .xs-float-bag:not(#xs) .v2-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body .xs-float-bag:not(#xs) .v2-bag-count {
  position: absolute;
  top: -3px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  color: #fff;
  background: #ed3024;
  box-shadow: 0 0 0 2px #fffefa;
  font: 800 10px/18px var(--v2-body, system-ui);
  text-align: center;
  letter-spacing: 0;
  pointer-events: none;
}
body .xs-float-bag:not(#xs) .v2-bag-count[data-empty] { color: #181817; background: #e9e3da; box-shadow: 0 0 0 2px #fffefa; }
body .xs-float-bag:not(#xs)[data-xs-tone="dark"] {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}
body .xs-float-bag:not(#xs)[data-xs-tone="dark"] .v2-bag-count { color: #ed3024; background: #fff; box-shadow: none; }
body .xs-float-bag:not(#xs)[data-xs-tone="dark"] .v2-bag-count[data-empty] { color: #181817; background: #fff; }
/* The product page's pinned bag switches tone the same way. */
body .m-actions .m-bag-btn[data-xs-tone="dark"] { color: #fff !important; }
body .m-actions .m-bag-btn[data-xs-tone="dark"] .v2-bag-count { color: #ed3024 !important; background: #fff !important; }
html:has(dialog[open]) body .xs-float-bag:not(#xs) { opacity: 0; pointer-events: none; }
body.mockup .xs-float-bag { display: none; }
@media (max-width: 760px) {
  body .xs-float-bag:not(#xs) { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  body .xs-float-bag:not(#xs) { transition: none; scale: 1; }
}

/* ---- Six deliveries on the homepage ------------------------------------- */
body .xh-deliveries.xh-deliveries--six { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
body .xh-deliveries--six > div:nth-child(3) { color: var(--xh-ink, #181817); background: var(--xh-cream, #fff1e5); }
body .xh-deliveries--six strong { font-size: clamp(22px, 2.1vw, 29px); }
@media (max-width: 760px) {
  body .xh-deliveries.xh-deliveries--six { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body .xh-deliveries--six > div:first-child { grid-column: 1 / -1; }
}

/* ---- The buy button -------------------------------------------------------
   Checkout (bag) and Pay now (checkout page) are the homepage button: cream
   face, ink border, red offset shadow, and a red wipe with an ink shadow on
   hover. Label on the left, amount on the right. */
body .xs-buy:not(#xs) {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 56px;
  height: auto;
  margin-top: 18px;
  padding: 14px 22px;
  border: 2px solid #181817;
  border-radius: 999px;
  color: #181817;
  background-color: #fffaf5;
  background-image: linear-gradient(#ed3024, #ed3024);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 0 100%;
  box-shadow: 6px 8px 0 #ed3024;
  font: 800 13px/1 var(--v2-body, "Host Grotesk", system-ui);
  letter-spacing: .06em;
  text-align: left;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color .26s, background-size .36s cubic-bezier(.16, 1, .3, 1), box-shadow .26s, transform .26s;
}
body .xs-buy:not(#xs) > span:last-child { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
body .xs-buy:not(#xs):is(:hover, :focus-visible):not([disabled]) {
  color: #fffaf5;
  background-size: 100% 100%;
  box-shadow: 9px 11px 0 #181817;
  transform: translate(-3px, -3px);
}
body .xs-buy:not(#xs):active:not([disabled]) { box-shadow: 2px 3px 0 #181817; transform: translate(2px, 2px); }
body .xs-buy:not(#xs):focus-visible { outline: 3px solid #181817; outline-offset: 4px; }
body .xs-buy:not(#xs)[disabled] { opacity: .5; cursor: default; box-shadow: 4px 5px 0 rgba(237, 48, 36, .5); }
/* The bag drawer's six-delivery summary. */
body .xb-plan { margin: 4px 0 0; padding: 14px 14px 12px; border: 1.5px solid #181817; border-radius: 16px; background: #fffaf5; }
body .xb-plan__title { margin: 0 0 10px; font: 800 11px/1 var(--v2-body, system-ui); letter-spacing: .1em; text-transform: uppercase; }
body .xb-plan__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; padding: 0; list-style: none; }
body .xb-plan__steps li { display: grid; gap: 4px; padding: 10px; border-radius: 12px; background: #f3ebe1; }
body .xb-plan__steps li:last-child { background: #d9ff54; }
body .xb-plan__steps span { color: #6d6a66; font: 800 9.5px/1 var(--v2-body, system-ui); letter-spacing: .08em; text-transform: uppercase; }
body .xb-plan__steps span::before { content: "Delivery "; }
body .xb-plan__steps strong { font: 800 15px/1 var(--v2-body, system-ui); font-variant-numeric: tabular-nums; }
body .xb-plan__steps small { color: #4a4744; font: 600 11px/1.2 var(--v2-body, system-ui); }
body .xb-line__plan { font-weight: 700; }
/* The checkout page's six-delivery schedule. */
body .xc__plan { margin-top: 14px; padding: 14px 16px; border: 1px solid rgba(24, 24, 23, .18); border-radius: 14px; background: #fffaf5; }
body .xc__plan-title { margin: 0 0 8px; font: 800 12px/1.2 var(--v2-body, system-ui); letter-spacing: .06em; text-transform: uppercase; }
body .xc__plan-list { display: grid; gap: 0; margin: 0 0 10px; padding: 0; list-style: none; }
body .xc__plan-list li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(24, 24, 23, .1); font: 600 13px/1.2 var(--v2-body, system-ui); }
body .xc__plan-list li.is-now { font-weight: 800; }
body .xc__plan-list strong { font-variant-numeric: tabular-nums; }
body .xc__plan-pct { padding: 2px 7px; border-radius: 999px; color: #fff; background: #ed3024; font: 800 10px/1.3 var(--v2-body, system-ui); }
body .xc__plan-list li:last-child .xc__plan-pct { color: #181817; background: #d9ff54; }
body .xc__total-row small, body .xc__shipping small { display: block; margin-top: 3px; color: #6d6a66; font-size: 11.5px; font-weight: 500; line-height: 1.4; letter-spacing: 0; text-transform: none; }

/* A hover photo that has not loaded (phones) takes no space and shows no alt text. */
body img.shop-card__hover[data-hover-src] { display: none !important; }
body .xb-nudge { margin: 0; padding: 10px 14px; border-radius: 12px; color: #181817; background: #d9ff54; font: 700 12.5px/1.4 var(--v2-body, system-ui); }
/* Bag lines: the product column always keeps its width; the later-delivery
   prices sit under the product, not in the narrow price column. */
body .xb-line { grid-template-columns: 72px minmax(0, 1fr) auto !important; }
body .xb-line__body { min-width: 0; }
body .xb-line__recurring { margin: 4px 0 0; color: #6d6a66; font-size: 12px; line-height: 1.4; white-space: normal; }
body .xb-line__money { min-width: 0; text-align: right; }
@media (max-width: 480px) {
  body .xb-line { grid-template-columns: 56px minmax(0, 1fr) auto !important; gap: 12px !important; }
  body .xb-line__image { width: 56px !important; height: 56px !important; }
}

/* ---- Product page bar ------------------------------------------------------
   "XALT Electrolytes · 21 packs" is not part of the page flow any more: it
   slides down from the top only once the first section (the picture and the
   buy box) has scrolled fully away, and slides back up when you return to
   it (assets/xalt-pdp.js). */
body .xp-nav.xp-nav--product {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 45;
  translate: 0 -110%;
  visibility: hidden;
  box-shadow: 0 10px 24px rgba(24, 24, 23, 0.06);
  transition: translate .5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear .5s;
}
body .xp-nav.xp-nav--product.is-shown {
  translate: 0 0;
  visibility: visible;
  transition: translate .5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  body .xp-nav.xp-nav--product { transition: none; }
}
body .m-flavour[data-m-flavour-card] { cursor: pointer; }

/* ---- Back to top (phones) ------------------------------------------------ */
body .xs-top {
  position: fixed;
  right: 16px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 58;
  display: none;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1.5px solid #181817;
  border-radius: 50%;
  color: #181817;
  background: #fffaf5;
  box-shadow: 3px 4px 0 #ed3024;
  cursor: pointer;
  opacity: 0;
  translate: 0 12px;
  pointer-events: none;
  transition: opacity .25s ease, translate .35s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (max-width: 760px) {
  body .xs-top { display: grid; }
}
body .xs-top.is-shown { opacity: 1; translate: 0 0; pointer-events: auto; }
body .xs-top:active { translate: 2px 2px; box-shadow: 1px 2px 0 #ed3024; }
/* Above the product page's floating Add to cart bar when it is showing. */
body:has(.m-floating-buy:not([hidden])) .xs-top { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
html:has(dialog[open]) body .xs-top, html:has([data-v2-mobile-menu][aria-hidden="false"]) body .xs-top { opacity: 0; pointer-events: none; }
body.mockup .xs-top { display: none !important; }
body .xc__pending { color: #6d6a66; font-weight: 600; }
body .xc__prefilled { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #f3ebe1; color: #4a4744; font: 600 12.5px/1.4 var(--v2-body, system-ui); }

/* ---- Homepage: Subscribe and save, as a journey ---------------------------
   Six delivery cards on a red panel, joined by a track that fills as the
   section scrolls through. Percentages and gifts only, no price table. The
   1 box / 3 box switch is two radios and :has(). */
body .xh-journey { padding: clamp(72px, 9vw, 130px) 0; background: var(--xh-paper, #f6efe6); }
body .xh-journey__panel { position: relative; padding: clamp(30px, 5vw, 72px); border-radius: clamp(28px, 3.4vw, 48px); color: #fff8ef; background: #ed3024; overflow: hidden; }
body .xh-journey__radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
body .xh-journey__head { position: relative; z-index: 2; display: grid; gap: 16px; max-width: 700px; margin-bottom: clamp(34px, 4.5vw, 60px); }
body .xh-journey .xh-kicker { margin: 0; color: #d9ff54; }
body .xh-journey .xh-display { margin: 0; color: #fff8ef; font-size: clamp(44px, 6vw, 88px); }
body .xh-journey .xh-display em { display: block; font-style: normal; color: #181817; }
body .xh-journey__lead { margin: 0; max-width: 46ch; color: rgba(255, 248, 239, .88); font: 500 clamp(16px, 1.3vw, 19px)/1.5 var(--v2-body, system-ui); }
body .xh-journey__switch { display: inline-flex; width: fit-content; margin-top: 4px; padding: 4px; border: 1.5px solid #fff8ef; border-radius: 999px; }
body .xh-journey__switch label { padding: 11px 20px; border-radius: 999px; font: 800 12px/1 var(--v2-body, system-ui); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
body .xh-journey__panel:has(#xh-journey-one:checked) label[for="xh-journey-one"],
body .xh-journey__panel:has(#xh-journey-three:checked) label[for="xh-journey-three"] { color: #181817; background: #fff8ef; }
body .xh-journey__panel:has(.xh-journey__radio:focus-visible) .xh-journey__switch { outline: 2px solid #d9ff54; outline-offset: 3px; }
body .xh-journey__panel:has(#xh-journey-one:checked) [data-plan="three"],
body .xh-journey__panel:has(#xh-journey-three:checked) [data-plan="one"] { display: none !important; }

/* The "up to" sticker */
body .xh-journey__badge { position: absolute; z-index: 2; top: clamp(28px, 5vw, 70px); right: clamp(24px, 6vw, 96px); display: grid; place-items: center; align-content: center; gap: 3px; width: clamp(132px, 12vw, 170px); aspect-ratio: 1.3; margin: 0; border: 1.5px solid #181817; border-radius: 50%; color: #181817; background: #d9ff54; text-align: center; rotate: 9deg; box-shadow: 5px 6px 0 #181817; }
body .xh-journey__badge > span { font: 800 11px/1.1 var(--v2-body, system-ui); letter-spacing: .08em; text-transform: uppercase; }
body .xh-journey__badge b { font: 800 clamp(34px, 3.2vw, 46px)/.9 var(--v2-body, "Host Grotesk", system-ui); letter-spacing: -.03em; }

/* The six cards and the track that joins them */
body .xh-journey__steps { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
body .xh-journey__steps::before { content: ""; position: absolute; top: calc(50% - 60px); left: 3%; right: 3%; height: 3px; border-radius: 3px; background: rgba(255, 248, 239, .3); }
body .xh-journey__steps::after { content: ""; position: absolute; top: calc(50% - 60px); left: 3%; right: 3%; height: 3px; border-radius: 3px; background: #d9ff54; transform-origin: left; scale: 1 1; }
@supports (animation-timeline: view()) {
  body .xh-journey__steps::after { animation: xh-journey-fill linear both; animation-timeline: view(); animation-range: entry 40% cover 55%; }
  @keyframes xh-journey-fill { from { scale: 0 1; } to { scale: 1 1; } }
}
body .xh-journey__step { position: relative; z-index: 1; display: grid; align-content: start; gap: 7px; padding: 12px 12px 18px; border: 1.5px solid #181817; border-radius: 22px; color: #181817; background: #fff8ef; box-shadow: 5px 6px 0 #181817; transition: translate .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease; }
body .xh-journey__step:hover { translate: -2px -3px; box-shadow: 7px 9px 0 #181817; }
body .xh-journey__step--best { background: #d9ff54; }
body .xh-journey__step--gift::before { content: "Gift"; position: absolute; z-index: 2; top: -11px; right: 14px; padding: 5px 9px; border: 1.5px solid #181817; border-radius: 999px; color: #fff8ef; background: #181817; font: 800 10px/1 var(--v2-body, system-ui); letter-spacing: .1em; text-transform: uppercase; }
body .xh-journey__art { display: block; aspect-ratio: 1; overflow: hidden; margin-bottom: 6px; border-radius: 15px; background: #f3e6d8; }
body .xh-journey__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
body .xh-journey__art--logo { display: grid; place-items: center; background: #ed3024; }
body .xh-journey__art--logo img { width: 64%; height: auto; object-fit: contain; }
body .xh-journey__n { color: #6d6a66; font: 800 10px/1 var(--v2-body, system-ui); letter-spacing: .12em; text-transform: uppercase; }
body .xh-journey__rate { width: fit-content; }
body .xh-journey__rate span { display: inline-block; padding: 5px 10px; border-radius: 999px; color: #fff8ef; background: #ed3024; font: 800 12px/1 var(--v2-body, system-ui); letter-spacing: .02em; }
body .xh-journey__step--best .xh-journey__rate span { color: #d9ff54; background: #181817; }
body .xh-journey__step strong { margin-top: 2px; font: 800 15px/1.2 var(--v2-body, system-ui); }
body .xh-journey__copy { color: #4a4744; font: 500 13px/1.4 var(--v2-body, system-ui); }

body .xh-journey__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 30px; margin-top: clamp(30px, 4vw, 50px); padding-top: 24px; border-top: 1px solid rgba(255, 248, 239, .4); }
body .xh-journey__foot p { margin: 0; color: rgba(255, 248, 239, .9); font: 600 15px/1.45 var(--v2-body, system-ui); }

@media (max-width: 1100px) {
  body .xh-journey__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 16px; }
  body .xh-journey__steps::before, body .xh-journey__steps::after { display: none; }
}
@media (max-width: 760px) {
  body .xh-journey { padding: 56px 0; }
  body .xh-journey__panel { margin-inline: -4px; padding: 28px 18px 26px; }
  body .xh-journey .xh-display { font-size: clamp(38px, 11vw, 48px); max-width: 9ch; }
  body .xh-journey__badge { top: 18px; right: 12px; width: 94px; gap: 2px; box-shadow: 3px 4px 0 #181817; }
  body .xh-journey__badge b { font-size: 26px; }
  body .xh-journey__badge > span { font-size: 8.5px; }
  body .xh-journey__head { padding-right: 70px; }
  /* A swipeable row of deliveries */
  body .xh-journey__steps { display: flex; gap: 14px; overflow-x: auto; margin: 0 -18px; padding: 14px 18px 14px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  body .xh-journey__steps::-webkit-scrollbar { display: none; }
  body .xh-journey__step { flex: 0 0 66%; scroll-snap-align: start; }
  body .xh-journey__foot { flex-direction: column; align-items: stretch; }
  body .xh-journey__foot .xh-button { width: 100% !important; }
}
@media (prefers-reduced-motion: reduce) {
  body .xh-journey__steps::after { animation: none; }
  body .xh-journey__step { transition: none; }
}

/* Preview switch between the new and the previous Subscribe section */
body .xh-version-toggle { position: relative; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 6px; width: fit-content; margin: 26px auto -8px; padding: 5px 5px 5px 14px; border: 1px dashed rgba(24, 24, 23, .45); border-radius: 999px; color: #181817; background: #fffaf5; font: 700 11px/1 var(--v2-body, system-ui); letter-spacing: .06em; text-transform: uppercase; }
body .xh-version-toggle button { padding: 8px 12px; border: 0; border-radius: 999px; color: inherit; background: transparent; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
body .xh-version-toggle button[aria-pressed="true"] { color: #fffaf5; background: #181817; }

/* Shopify's bag page and drawer: their Checkout button is the buy button. */
body .cart__checkout-button.button:not(#xs) {
  min-height: 56px;
  border: 2px solid #181817;
  border-radius: 999px;
  color: #181817;
  background-color: #fffaf5;
  background-image: linear-gradient(#ed3024, #ed3024);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 0 100%;
  box-shadow: 6px 8px 0 #ed3024;
  font: 800 13px/1 var(--v2-body, "Host Grotesk", system-ui);
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: color .26s, background-size .36s cubic-bezier(.16, 1, .3, 1), box-shadow .26s, transform .26s;
}
body .cart__checkout-button.button:not(#xs)::before, body .cart__checkout-button.button:not(#xs)::after { display: none; }
body .cart__checkout-button.button:not(#xs):is(:hover, :focus-visible):not([disabled]) { color: #fffaf5; background-size: 100% 100%; box-shadow: 9px 11px 0 #181817; transform: translate(-3px, -3px); }

/* Subscribe & save while the store has no subscription plans yet. */
body .m-pay__opt.is-unavailable { opacity: .55; }
body .m-pay__opt.is-unavailable .m-pay__option-label { cursor: not-allowed; }
body .m-pay__opt.is-unavailable .m-pay__collapse { display: none; }

/* The red strip across the top belongs to the homepage only. */
body:not(.xalt-home-world):not(.v2-home) .v2-preview-note { display: none !important; }

/* ---- Pictures fit their frames ------------------------------------------
   Every photo is cut to the shape of the frame it sits in (scripts/dev/art.py),
   so the browser never has to crop a subject out. What is left here is the
   handful of frames that show a product render rather than a photo. */

/* Phones measure the page by its widest content. Anything wider than the
   screen, even something clipped out of sight, made the whole page a little
   wider than the phone: fixed bars then sat partly off the bottom and right
   edges. Clipping at the root keeps the page exactly screen-wide. */
html { overflow-x: clip; }

/* A <picture> only chooses which cut to load; its <img> is laid out as if
   the wrapper were not there. */
picture { display: contents; }

/* Home range cards: a product render is shown whole; a photo fills the card. */
body #xh-flavours .xh-range-teaser__media .xh-range-teaser__primary:not(.xh-range-teaser__primary--photo) {
  object-fit: contain;
  padding: 19% 9% 7%;
}

/* Shop cards: bottle and bandana are clear renders on a calm card, like the
   boxes; the bundle is a photo that fills its frame. */
body .shop-card .shop-card__media--merch img.shop-card__primary {
  width: 100% !important;
  height: 100% !important;
  min-height: 0;
  padding: 9% !important;
  object-fit: contain !important;
  object-position: center;
  transform: none !important;
}
body .shop-card .shop-card__media img.shop-card__primary--photo {
  padding: 0 !important;
  object-fit: cover !important;
  transform: none !important;
}
body .shop-card .shop-card__media img.shop-card__hover--render {
  padding: 7%;
  object-fit: contain !important;
  background: var(--card-colour, #efe7dc);
}

/* The seal on the product page's benefits photo sits inside the photo, not
   half off its edge. */
body .xp-benefits__media .xp-seal { top: 14px !important; left: 14px !important; }
/* Two lines, like the homepage seal: a third no longer fits the circle at a
   readable size. */
body .xp-benefits__media .xp-seal span:last-child { display: none; }

/* ---- Subscribe section: the price does the talking --------------------- */
body .xh-journey .xh-display em { display: inline; }
body .xh-journey__deal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0; }
body .xh-journey__deal s { color: rgba(255, 248, 239, .7); font: 600 clamp(18px, 1.8vw, 26px)/1 var(--v2-body, system-ui); text-decoration-thickness: 2px; }
body .xh-journey__deal strong { color: #d9ff54; font: 800 clamp(40px, 5vw, 72px)/.95 var(--v2-body, "Host Grotesk", system-ui); letter-spacing: -.03em; }
body .xh-journey__deal > span { flex-basis: 100%; color: rgba(255, 248, 239, .9); font: 600 15px/1.3 var(--v2-body, system-ui); }
body .xh-journey__worth { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 clamp(26px, 3.4vw, 44px); padding: 0; list-style: none; }
body .xh-journey__worth li { display: grid; gap: 6px; padding: 16px 18px; border: 1.5px solid rgba(255, 248, 239, .55); border-radius: 18px; }
body .xh-journey__worth b { color: #fff8ef; font: 800 clamp(22px, 2.4vw, 34px)/1 var(--v2-body, "Host Grotesk", system-ui); letter-spacing: -.02em; }
body .xh-journey__worth li > span { color: rgba(255, 248, 239, .88); font: 600 13px/1.3 var(--v2-body, system-ui); }
body .xh-journey__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
body .xh-journey__price s { color: #8a857f; font: 600 12px/1 var(--v2-body, system-ui); }
body .xh-journey__price b { color: #ed3024; font: 800 19px/1 var(--v2-body, "Host Grotesk", system-ui); letter-spacing: -.01em; }
body .xh-journey__step--best .xh-journey__price b { color: #181817; }
body .xh-journey__step--best .xh-journey__price s { color: #4a4744; }
body .xh-journey__copy { font-weight: 700; color: #ed3024; }
body .xh-journey__step--best .xh-journey__copy { color: #181817; }
@media (max-width: 760px) {
  body .xh-journey__head { padding-right: 0; }
  body .xh-journey__badge { display: none; }
  body .xh-journey__worth { grid-template-columns: 1fr 1fr; gap: 8px; }
  body .xh-journey__worth li { padding: 12px 12px; border-radius: 14px; }
  body .xh-journey__worth li:last-child { grid-column: 1 / -1; grid-template-columns: auto 1fr; align-items: baseline; gap: 8px; }
  body .xh-journey__deal strong { font-size: 44px; }
  body .xh-journey__art { aspect-ratio: 4 / 3; }
}

/* ---- Team QA, 11 October ------------------------------------------------ */
/* Shop cards: the price reads in one line, the unit set quieter beside it. */
body .shop-card__price strong span { color: #77716b; font: 600 0.78em/1 var(--v2-body, system-ui); letter-spacing: 0; }
/* Product page header logo is a link home; it keeps the logo's own box. */
body .m-header__left a { display: block; }

/* Home, laptop: "Same purposeful blend" sits under the heading it belongs to. */
@media (min-width: 761px) {
  body #xh-flavours .xh-flavour-head { display: grid; grid-template-columns: 1fr; justify-items: start; gap: 10px; text-align: left; }
  body #xh-flavours .xh-flavour-head p { max-width: none; margin: 0; text-align: left; }
  body #xh-flavours .xh-flavour-head p br { display: none; }
  /* The flavour seal hangs off the photo's top corner onto the panel, like a
     sticker on the frame, so it never covers the box. */
  body #xh-flavours .xh-flavour-art { overflow: visible !important; }
  body #xh-flavours .xh-flavour-art .xh-flavour-fruit { border-radius: inherit; }
  body #xh-flavours .xh-flavour-art .xh-oval { top: 18px !important; right: -46px !important; left: auto !important; bottom: auto !important; width: 104px !important; height: 104px !important; z-index: 3; }
}

/* The mineral cards showed a stand-in photo (with the words "image
   placeholder") when hovered or tapped. That layer is gone. */
body .xh-mineral-card :is(.xh-mineral-photo, .xh-mineral-photo-label) { display: none !important; }

/* Quantity buttons: a press shows, briefly, as a soft ring. */
body :is(.m-flavour__stepper button, .xb-line__qty button, .quantity__button) { transition: box-shadow .18s ease, translate .12s ease, background-size .3s; }
body :is(.m-flavour__stepper button, .xb-line__qty button, .quantity__button):active { box-shadow: 0 0 0 6px color-mix(in srgb, var(--flavour, #ed3024) 22%, transparent) !important; }

/* Story pages end on a red block that runs straight into the red footer;
   the two paddings together left a third of a screen of plain red. */
body main.xw > section:last-of-type:is(.xw-contact, .xw-finale, .xo-join) { padding-bottom: clamp(44px, 4.5vw, 64px); }
body main.xw + footer.v2-footer { padding-top: clamp(28px, 3vw, 44px); }
body main.xw + footer.v2-footer .v2-footer__top { padding-top: clamp(28px, 3vw, 40px); }
/* XLOG closing block: every line on the same centre axis. */
body .xo-join .xh-shell > * { margin-inline: auto; text-align: center; }
/* Why XALT: less air under "On every pack"; the closing row holds three. */
body .xw-numbers { padding-bottom: clamp(56px, 6vw, 88px); }
body .xw-finale__packs { grid-template-columns: repeat(3, minmax(0, 300px)); align-items: end; }
body .xw-finale__packs .xw-finale__box img { rotate: none; }
body .xw-chapter__art--pack img { width: min(100%, 460px); height: auto; object-fit: contain; }

/* Product page: the benefits photo keeps to its column at every width. */
@media (max-width: 1100px) {
  body .xp-benefits__media { width: 100% !important; margin-left: 0 !important; }
}

/* Why XALT closing, 12 October: one line, three packs, one button on phones. */
body .xw-finale__all { display: none; }
body .xw-founders span { margin-top: 14px; }
@media (max-width: 760px) {
  body main.xw section.xw-finale:not(#xs):not(#xt) { padding-top: 72px !important; padding-bottom: 40px !important; }
  body main.xw .xw-finale .xw-founders:not(#xs) { max-width: 26ch; margin: 0 auto 40px !important; font-size: 21px; }
  /* Shop cards: the per-delivery note sits on its own line, never half-wrapped. */
  body .shop-card__price strong > span { display: block; }
  body .xw .xw-finale .xw-statement { margin-top: 0; }
  body .xw-finale__packs { margin-top: 28px !important; align-items: end; }
  body .xw-finale__packs figcaption { display: none; }
  body .xw-finale__all { display: inline-flex; margin-top: 28px; }
  /* Chapter pictures stay inside the screen with air either side. */
  body .xw-chapter__art { width: min(74%, 300px) !important; margin-inline: auto !important; }
  body .xw-chapter__art--pack img { width: 100% !important; }
  body .xw-chapter__art .xw-chapter__sticker { top: -18px !important; right: -22px !important; scale: .72; transform-origin: top right; }
}

/* xalt-type.css */
/* One type scale for the whole site, on laptop and desktop widths.

   Headings had grown page by page into seventeen different sizes. Section
   headlines ran to 88px, larger than the page titles above them, and the page
   title itself was 45px on one page and 84px on the next. This maps every
   display heading onto three roles, so the same kind of heading is the same
   size wherever it appears. Phones keep their own tuned sizes (below 901px
   nothing here applies).

   A single heading was sized by up to nine competing rules across six
   stylesheets, several of them !important with ID selectors. Out-specifying
   them would only add a tenth. Instead the scale lives in a cascade layer:
   an !important declaration inside a layer outranks every unlayered
   !important one, whatever its specificity. So this file is the authority on
   heading size by design, and a later page rule cannot quietly undo it. */

@layer xalt-type {
@media (min-width: 901px) {
  /* 1. Page title: one per page, at the top. 58px at 1440 wide. */
  body :is(
    h1.xh-display,
    h1.xw-hero__title,
    h1.xo-hero__title,
    h1.v2-display,
    .shop-collection h1
  ) {
    font-size: clamp(42px, 4vw, 62px) !important;
    line-height: 1.04 !important;
  }

  /* 2. Section headline. 45px at 1440 wide. */
  body :is(
    h2.xh-display:not(.xh-reviews-title),
    h2.xw-statement,
    h2.xh-brand,
    h2.xb-enquiry__title,
    h2.product-h2,
    h2.xp-title,
    h2.v2-display--lg,
    .shop-collection__head h2,
    /* a closing statement is a headline, not a poster */
    .xh-finale .xh-display
  ) {
    font-size: clamp(32px, 3.1vw, 48px) !important;
    line-height: 1.06 !important;
  }

  /* The flavour name on the flavour card is a headline in its own right,
     but it sits inside a card, so it stays just under a section headline. */
  body .xh-flavour-copy h3 {
    font-size: clamp(30px, 2.6vw, 40px) !important;
  }

  /* 3. Sub-section headline. 32px at 1440 wide. */
  body :is(
    h2.v2-display--md,
    h2.xh-reviews-title,
    h2.xh-teaser-title,
    .xh-shop-comparison h2,
    h2.shop-collection__category-title,
    /* card and list titles that had grown past the headlines above them */
    .xw-day__step h3,
    .xh-when-card h3,
    .v2-testimonial-slot h3,
    .xo-card__copy h3,
    .xp-label h3,
    /* h3s inside a section (benefits, the story chapters, the FAQ) sit one
       step below the section headline, never level with it */
    h3.xh-benefits__title,
    .xw-chapter__copy h3,
    .xh-faq h3
  ) {
    font-size: clamp(26px, 2.2vw, 34px) !important;
    line-height: 1.08 !important;
  }
}
}

/* The floor: nothing a customer is meant to read is set below 12px, on any
   screen. Labels, tags, button text and fine print had drifted to anything
   from 7px to 11.5px, page by page; they are all 12px now. Stamps and seals
   (short words set inside a small shape) stop at 10px so they still fit their
   shape. Same layer as the heading scale, so no page rule can undo it. */
@layer xalt-type {
  body :is(
    /* chrome */
    .v2-preview-note, .v2-menu-toggle, .m-nav a, .v2-kicker, .v2-footer__top h2,
    /* buttons and filters */
    .xh-button > span, .xw-hero__cue, .xalt-shop-filter a, .shop-card__button > span,
    .xh-version-toggle > span, .xh-version-toggle > button, .xh-benefits__pause,
    /* home */
    .xh-media-tag, .xh-journey__n, .xh-journey__badge > span, .xh-review-card__meta, .xh-review-note,
    .xh-ugc figcaption small, .xh-tnote dt, .xh-tnote__word, .xh-range-teaser__tag, .xh-benefits__num,
    .xh-when-card > span, .xh-when-card > b, .xh-ingredient-visuals figcaption, .xh-ingredient-visuals figcaption span,
    .xh-disclosure__number, .xh-mineral-card dt, .xcmp__name, .xcmp__hint,
    /* shop */
    .shop-card__meta, .shop-card__price small,
    /* product */
    .m-kicker, .m-panel__caption, .m-size__save, .m-size__copy small, .m-builder__hint,
    .m-builder__head span, .m-builder__head b, .m-pay__flag, .m-freq legend, .m-freq label small,
    .m-journey__when, .m-journey__perk, .m-journey__rate,
    .benefit-txt .lbl, .benefit-txt .sub, .support-line, .support-line strong,
    .xp-kicker, .xp-number, .xp-benefits__media figcaption span,
    .xp-label caption, .xp-label__note, .xp-label__top span, .xp-label-wrap__note,
    /* why, creator, wholesale, xlog, stories */
    .xw-tag, .xw-note, .xw-pending, .xw-card__kicker, .xw-terms dt, .xw-mock__grid span,
    .xw-label__head span, .xw li > p > b, .xb-room__num, .xo-tag, .v2-testimonial-slot > strong,
    /* account */
    .xa__eyebrow, .xa__fine
  ) {
    font-size: 12px !important;
  }
  body :is(.xp-seal span, .xh-oval--benefits) {
    font-size: 10px !important;
  }
}

/* xalt-mobile.css */
/* XALT phone layouts. Loaded last on every page, so these rules decide how the
   site reads on a phone instead of shrinking the desktop layout. Everything is
   inside the phone breakpoint; desktop is untouched.
   Principles: one column that reads top to bottom, swipe rows instead of tall
   stacks, labels of at least 12px, tap targets of at least 44px, and a 20px
   side gutter. */
@media (max-width: 760px) {

  /* ---------- Site-wide ---------- */
  html { -webkit-text-size-adjust: 100%; }
  body .v2-preview-note { display: none; }
  body .v2-menu-toggle { min-width: 44px; min-height: 44px; }
  body .xh-text-link { display: inline-flex; align-items: center; min-height: 44px; padding-bottom: 0; }
  body .xh-button { min-height: 50px; }
  body .v2-footer .v2-shell { width: calc(100% - 40px); margin-inline: auto; }
  body .v2-footer .v2-footer__top { gap: 30px; }
  body .v2-footer ul a { display: inline-flex; min-height: 40px; align-items: center; }
  body .v2-footer .v2-newsletter__row input { min-height: 48px; font-size: 16px; }
  body .v2-footer .v2-newsletter__row button { min-height: 48px; }

  /* Small print that fell under 12px on phones. */
  body :is(.xh-oval, .xh-media-tag, .xh-review-card__meta, .xh-science-badge, .xh-mineral-photo-label,
    .xh-benefits__num, .xh-disclosure__number, .xh-range-teaser__tag, .xh-subscribe__terms, .xh-review-note,
    .xh-tnote__word, .xc-hint) { font-size: 12px !important; }
  body .xh-benefits__pause { min-height: 40px; padding-inline: 16px; font-size: 12px; }

  /* Swipe rows share one treatment. */
  body :is(.xh-range-teaser__grid, .xh-when__cards, .xh-reviews) {
    display: flex !important; flex-direction: row !important; gap: 12px !important;
    margin-inline: -20px; padding: 4px 20px 18px !important;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none;
  }
  body :is(.xh-range-teaser__grid, .xh-when__cards, .xh-reviews)::-webkit-scrollbar { display: none; }

  /* ---------- Homepage ---------- */
  /* Range teaser: swipe the three products instead of three full-height cards. */
  body #xh-flavours .xh-range-teaser__card { flex: 0 0 76%; scroll-snap-align: start; }
  body #xh-flavours .xh-range-teaser__media { aspect-ratio: 4 / 5; height: auto; }
  body #xh-flavours .xh-range-teaser__card h3 { font-size: 20px !important; }
  body #xh-flavours .xh-range-teaser__card p { font-size: 14px; }

  /* When XALT: a swipe row with the description always showing (no hover on touch). */
  body .xh-when__cards { height: auto !important; }
  body .xh-when-card { flex: 0 0 72% !important; min-height: 230px; height: auto !important; scroll-snap-align: start; transform: none !important; }
  body .xh-when-card p { width: auto; max-height: none; opacity: 1; transform: none; font-size: 15px; line-height: 1.45; }
  body .xh-when-card:is(:hover, :focus-visible) { flex: 0 0 72% !important; }

  /* The science: one column, the photo above the ingredient list. */
  body .xh-ingredients .xh-heading-row,
  body .xh-ingredients .xh-ingredient-story { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; }
  body .xh-ingredients .xh-science-title { gap: 18px; }
  body .xh-ingredient-visuals { position: relative; height: auto !important; min-height: 0 !important; }
  body .xh-ingredient-visuals > figure { position: relative; top: auto !important; width: 100%; height: auto !important; aspect-ratio: 4 / 3; margin: 0; border-radius: 22px; overflow: hidden; }
  body .xh-ingredient-visuals > figure[hidden] { display: none !important; }
  body .xh-ingredient-visuals > figure img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
  body .xh-ingredients__details { width: 100%; }
  body .xh-ingredients__details summary h3 { font-size: 20px !important; }
  body .xh-mineral-grid { position: static !important; }

  /* Subscribe: photo on top, then the offer. */
  body .xh-subscribe__grid { grid-template-columns: minmax(0, 1fr) !important; gap: 22px !important; }
  body .xh-subscribe__art { height: auto !important; min-height: 0 !important; }
  body .xh-subscribe__art img { width: 100%; height: auto !important; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 18px; }
  body .xh-subscribe__art .xh-handnote { right: 10px; bottom: -14px; top: auto; left: auto; }
  body .xh-subscribe .xh-button { width: 100%; justify-content: space-between; }

  /* Reviews: swipe instead of three stacked cards. */
  body .xh-review-card { flex: 0 0 84%; min-height: 0; scroll-snap-align: start; transform: none !important; }

  /* ---------- WHY XALT ---------- */
  body .xw-more__grid { display: flex !important; gap: 12px !important; margin: 0 -20px !important; padding: 4px 20px 18px !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none; }
  body .xw-more__grid::-webkit-scrollbar { display: none; }
  body .xw-more__grid > li { flex: 0 0 80%; scroll-snap-align: start; }
  body :is(.xw-tag, .xw-pending, .xw-note, .xw-card__kicker, .xb-room__num, .xo-tag) { font-size: 12px !important; }

  /* ---------- Shop ---------- */
  body.xalt-shop-page .shop-collection__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  body.xalt-shop-page .shop-card { border-radius: 18px; }
  body.xalt-shop-page .shop-card__media { aspect-ratio: 1; height: auto !important; min-height: 0 !important; padding: 0 !important; }
  body.xalt-shop-page .shop-card__media img { width: 100%; height: 100% !important; object-fit: contain; }
  body.xalt-shop-page .shop-card__primary { padding: 4% !important; transform: none !important; }
  body.xalt-shop-page .shop-card__body { gap: 6px; padding: 12px 12px 14px !important; }
  body.xalt-shop-page .shop-card__meta { font-size: 11px !important; line-height: 1.3; }
  body.xalt-shop-page .shop-card h3 { font-size: 16px !important; line-height: 1.2 !important; }
  body.xalt-shop-page .shop-card__price strong { font-size: 16px; }
  body.xalt-shop-page .shop-card__price small { font-size: 11.5px; line-height: 1.35; }
  body.xalt-shop-page .shop-card__button { min-height: 44px; margin-top: auto; padding: 8px 10px !important; gap: 6px; font-size: 11px !important; }
  body.xalt-shop-page .xalt-shop-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -20px; padding-inline: 20px; }
  body.xalt-shop-page .xalt-shop-filter :is(a, button) { flex: none; min-height: 44px; }

  /* ---------- Product page ---------- */
  /* Eight blurred glass layers are heavy on phone GPUs; keep the look, drop the blur. */
  /* Phones get the glass too, with a lighter blur that phone graphics
     chips handle easily. */
  body.mockup .xp-ing .benefit { backdrop-filter: blur(5px) !important; -webkit-backdrop-filter: blur(5px) !important; }
  body.mockup .xp-ing .product-sachet .breath { filter: drop-shadow(0 18px 24px rgba(14,11,8,.36)); }
  body.mockup .m-title__brand { line-height: 1.3; }
  body.mockup .m-title__pack { line-height: 1.12; }
  body.mockup .m-panel { min-height: 0; }
  body.mockup .xp-howto__steps { gap: 10px; }
  body.mockup .xp-howto__copy { font-size: 14px; }
  body.mockup .xp-certs { gap: 8px; }
  body.mockup .xp-label { padding: 18px 16px; }
  body.mockup .xp-comparison .xp-comparison__head .xp-lead { font-size: 16px; }
  /* Keep the review options pill clear of the floating add-to-cart bar. */
  body.mockup .xalt-review { bottom: 96px; }
}

/* ---------- Pictures always show on phones ----------
   The homepage opens its big pictures as they scroll in on a laptop. On a
   phone that entrance is skipped altogether: a picture must never depend on
   a scroll trigger to become visible. */
@media (max-width: 760px) {
  body [data-xl].xl-wait,
  body [data-xl].xl-wait img { opacity: 1 !important; scale: none !important; clip-path: none !important; transform: none !important; }
  /* Why XALT, Creator, B2B, XLOG: blocks may still rise into place, but
     none of them, and no picture inside them, ever starts invisible. */
  body .xw[data-xw-ready] :is([data-xw-reveal], [data-xw-sticker], [data-xw-curtain]):not(.is-in) { opacity: 1 !important; }
  /* Product page: the ingredients sachet is there from the start. */
  /* Reasons ("Good days start with hydration"): its own staged entrance
     never hides the photo, the list or the copy on a phone. */
  body .xh-benefits[data-benefits-ready=true]:not([data-benefits-in]) :is(.xh-benefits__band > *, .xh-benefits__title, .xh-benefits__lede, .xh-benefits__art, .xh-benefits__item, .xh-benefits__controls, .xh-oval--benefits) {
    opacity: 1 !important; translate: none !important; scale: none !important;
  }
  body .xh-benefits[data-benefits-ready=true]:not([data-benefits-in]) .xh-benefits__field { transform: none !important; }
  body .xh-benefits[data-benefits-ready=true]:not([data-benefits-in]) .xh-benefits__band::before,
  body .xh-benefits[data-benefits-ready=true]:not([data-benefits-in]) .xh-benefits__band::after { transform: translateX(-50%) !important; }
}

/* ---------- Headings never touch on phones ----------
   Display faces (Glofium, Bricolage) have tall capitals and deep
   descenders; below 1.12 line spacing, a two-line heading's lines can
   touch on a narrow screen. Every multi-line heading gets at least that,
   the Glofium brand face a little more, and lines are balanced so no
   heading ends on a single stranded word. */
@media (max-width: 760px) {
  /* :not(#xs) lifts these above the older page rules that pinned headings
     to 1 or 1.05, whatever their selectors. */
  body main :is(h1, h2, h3, .xh-display, .v2-display, .m-title, .product-h2, .display):not(#xs) {
    line-height: 1.12 !important;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }
  body main :is(h1, h2, h3).xh-brand:not(#xs),
  body main .xh-hero h1:not(#xs),
  body.preview-v2[data-v2-font="glofium"] main :is(h1, h2, .v2-display):not(#xs) { line-height: 1.16 !important; }
  body main :is(h1, h2, h3) .xh-brand { line-height: inherit; }
}

/* ---------- One type scale on phones ----------
   Three sizes, like the laptop scale, so no heading shouts over the one
   above it and none runs wider than a thumb-width line comfortably holds:
   page title 34 to 44px, section headline 28 to 36px, a heading inside a
   section 22 to 27px. */
@media (max-width: 760px) {
  body main :is(h1.xh-display, h1.xw-hero__title, h1.xo-hero__title, h1.v2-display, .shop-collection h1):not(#xs) {
    font-size: clamp(34px, 10.4vw, 44px) !important;
  }
  body main :is(h2.xh-display, h2.xw-statement, h2.xh-brand, h2.product-h2, h2.v2-display, .shop-collection__head h2, .xh-finale .xh-display):not(#xs) {
    font-size: clamp(28px, 9vw, 36px) !important;
  }
  body main #xh-flavours .xh-flavour-copy h3:not(#xs) { font-size: clamp(26px, 7.6vw, 30px) !important; }
  /* Product page: the section title joins the scale, and the benefit list
     reads as a list, not a stack of headlines. */
  body main h2.xp-title:not(#xs) { font-size: clamp(28px, 9vw, 36px) !important; }
  body main .xp-benefits__list summary h3:not(#xs) { font-size: 20px !important; line-height: 1.25 !important; }
  /* Buying comes first on the product page: the discount tab would sit on
     top of the floating Add to cart bar. */
  body.mockup .xpg-tab { display: none !important; }
  body main :is(.xh-flavour-copy h3, h3.xh-benefits__title, .xw-chapter__copy h3, .xw-day__step h3, .xo-card__copy h3, .xp-label h3, .v2-testimonial-slot h3, .xh-faq h3):not(#xs) {
    font-size: clamp(22px, 6.6vw, 27px) !important;
  }
}

/* ---------- Shorter pages on phones ----------
   Every page ran 7 to 15 screens on a phone, and most of that was air and
   stacking rather than words: 80 to 150px of padding around each section,
   a footer whose three link lists stacked into two screens' worth of
   scrolling, and lists of three cards piled on top of each other. The words
   themselves are already short, so nothing is cut from the copy: it is
   packed closer, and anything side-by-side on a laptop swipes on a phone. */
@media (max-width: 760px) {
  /* Section spacing: enough to separate, not a screen of blank. The heroes
     keep theirs. */
  body main :is(.xh-section, .xp-section):not(.xh-hero, .xw-hero, .xo-hero) {
    padding-top: 56px !important;
    /* Enough room that a section's own wavy lower edge, and the next
       section's wave reaching up (up to 58px on a phone), never cross the
       last line of content. */
    padding-bottom: 96px !important;
  }
  body main .xh-benefits:not(#xs) { padding-bottom: 124px !important; }

  /* Footer: the three link lists sit side by side under the brand. */
  body .v2-footer--clean .v2-footer__top {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 14px !important;
    row-gap: 28px !important;
    padding-top: 36px !important;
  }
  body .v2-footer--clean .v2-footer__brand { grid-column: 1 / -1 !important; }
  body .v2-footer--clean .v2-footer__top h2 { margin-bottom: 6px; font-size: 11px; letter-spacing: 0.1em; }
  body .v2-footer--clean .v2-footer__top ul a { font-size: 14px; line-height: 1.2; }

  /* Three-up lists that stacked into a screen or more now swipe. */
  body :is(.xw-tiers, .xw-briefs, .xb-steps) {
    display: flex !important; flex-direction: row !important; gap: 12px !important;
    margin-inline: -20px !important; padding: 4px 20px 18px !important;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none;
  }
  body :is(.xw-tiers, .xw-briefs, .xb-steps)::-webkit-scrollbar { display: none; }
  body :is(.xw-tiers, .xw-briefs, .xb-steps) > li { flex: 0 0 78% !important; scroll-snap-align: start; }

  /* Homepage. The four minerals swipe instead of a two-by-two block of
     tall cards; the three stats and the two delivery prices sit in a row. */
  body .xh-mineral-grid {
    display: flex !important; grid-template-columns: none !important; gap: 12px !important;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  body .xh-mineral-grid::-webkit-scrollbar { display: none; }
  body .xh-mineral-grid > * { flex: 0 0 72% !important; scroll-snap-align: start; }
  body .xh-benefits__stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; }
  body .xh-benefits__stats > div { flex-direction: column; gap: 4px !important; }
  body .xh-benefits__stats > div + div { padding-left: 10px !important; }
  body .xh-benefits__stats dd { font-size: 12px; }
  body .xh-deliveries { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  body .xh-deliveries > div { padding: 12px !important; }

  /* The partner portal mock is an illustration with invented figures; the
     copy beside it already says what the portal does. */
  body .xw-mock { display: none !important; }

  /* Folded panels (the nutrition label): the first part shows, the rest is
     one tap away. The fold and its button come from assets/xalt-scroll.js. */
  body .xs-fold:not(.is-open) {
    max-height: var(--xs-fold, 300px);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent);
    mask-image: linear-gradient(to bottom, #000 62%, transparent);
  }
  body .xs-fold-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; margin-top: 12px; padding: 0 18px;
    border: 1.5px solid currentColor; border-radius: 999px;
    background: transparent; color: inherit;
    font: 800 12.5px/1 var(--v2-body); letter-spacing: 0.04em; cursor: pointer;
  }
  body .xs-fold-toggle::after { content: "+"; font-size: 16px; line-height: 1; }
  body .xs-fold-toggle[aria-expanded="true"]::after { content: "\2212"; }
}
.xs-fold-toggle { display: none; }

@media (max-width: 380px) {
  body.xalt-shop-page .shop-collection__grid { gap: 10px !important; }
  body.xalt-shop-page .shop-card h3 { font-size: 15px !important; }
}

/* =====================================================================
   Phones, October: quieter, cleaner, and built for a thumb.

   What changed and why:
   - Type: headings came down a full step. A 41px title and 35px section
     headlines filled a phone screen two words at a time; the scale is now
     33 / 26 / 20, so a headline and the paragraph under it share a screen.
   - Swipe rows: every row of cards starts on its first card, snaps card by
     card, and shows the same sliver of the next one, with nothing drifting
     on its own.
   - Motion: one short fade for everything (the timings live in
     assets/xalt-scroll.js). No word-by-word headings, no growing pictures.
   - Nothing is cut: labels stay on one line, the header keeps its gutter,
     and floating controls keep out of the way of what is being read.
   ===================================================================== */
@media (max-width: 760px) {

  /* ---------- Type scale ---------- */
  body main :is(h1.xh-display, h1.xw-hero__title, h1.xo-hero__title, h1.v2-display, .shop-collection h1, h1.m-title .m-title__brand, h1.m-title .m-title__pack > span):not(#xs):not(#xp) {
    font-size: clamp(29px, 8.4vw, 34px) !important;
  }
  body main :is(h2.xh-display, h2.xw-statement, h2.xh-brand, h2.product-h2, h2.display, h2.v2-display, h2.xp-title, .shop-collection__head h2, .xh-shop-comparison > h2, .xh-finale .xh-display, .xp-closing p):not(#xs):not(#xp) {
    font-size: clamp(23px, 6.8vw, 27px) !important;
    line-height: 1.14 !important;
  }
  body main :is(.xh-flavour-copy h3, h3.xh-benefits__title, .xh-when-card h3, .xw-chapter__copy h3, .xw-day__step h3, .xo-card__copy h3, .xp-label h3, .v2-testimonial-slot h3, .xh-faq h3, .xh-teaser-title, .shop-collection__category-title, .xw-lane__title):not(#xs):not(#xp) {
    font-size: clamp(19px, 5.3vw, 21px) !important;
    line-height: 1.2 !important;
  }
  body main #xh-flavours .xh-flavour-copy h3:not(#xs):not(#xp) { font-size: 24px !important; }
  /* The brand display face (Glofium) is wider and heavier than the reading
     faces, so at the same size it shouts. It runs a step smaller. */
  body main :is(h1.xh-brand, h1.xw-hero__title, h1.xo-hero__title, .shop-collection h1, h1.m-title .m-title__brand):not(#xs):not(#xp),
  body.preview-v2[data-v2-font="glofium"] main h1.v2-display:not(#xs):not(#xp) { font-size: clamp(27px, 7.8vw, 31px) !important; }
  body main :is(h2.xh-brand, h2.xw-statement, h2.display, h2.product-h2, h2.xp-title, .shop-collection__head h2, .xh-shop-comparison > h2, .xh-finale .xh-brand, .xp-closing p, h1.xa__title):not(#xs):not(#xp),
  body.preview-v2[data-v2-font="glofium"] main h2.v2-display:not(#xs):not(#xp) { font-size: clamp(22px, 6.2vw, 25px) !important; }
  body main .xp-benefits__list summary h3:not(#xs):not(#xp) { font-size: 18px !important; }
  body main :is(.xp-howto h3, .xp-ingredients summary h3, .xp-label h3, .v2-testimonial-slot h3, .xw-lane__title):not(#xs):not(#xp) { font-size: 20px !important; }
  /* Big figures (500 mg, 15%, step numbers) read as figures, not posters. */
  body main :is(.xh-mineral-card dd strong, .xw-numbers dt, .xw-tier__rate, .xb-proof dt, .xw-day__words span):not(#xs) { font-size: 30px !important; }
  body main :is(.xw-brief, .xb-steps > li)::before { font-size: 26px !important; }
  body main .xh-warning__track span { font-size: 22px !important; }
  body main :is(.xw-numbers dt, .xb-proof dt, .xh-mineral-card dd strong) small { font-size: 12px !important; }
  /* Reading sizes: one lead size, one body size. */
  body main :is(.xh-lede, .xp-lead, .xw-hero__lede, .xh-hero__copy > p, .shop-collection__head p, .xh-flavour-head p) { font-size: 16px !important; line-height: 1.5 !important; }

  /* ---------- Gutters and the header ---------- */
  /* About, Community and Testimonials share the 20px gutter of every other page. */
  body.preview-v2 main .v2-shell { width: calc(100% - 40px) !important; margin-inline: auto !important; }
  body .v2-header__inner { padding-inline: 16px !important; gap: 8px !important; box-sizing: border-box; width: 100%; max-width: 100%; }
  body .v2-header__inner .v2-header-actions { gap: 2px !important; margin-left: auto; flex: none; }
  body .v2-header__inner .v2-menu-toggle { margin-left: 6px; padding-inline: 12px !important; }
  body.xalt-shop-page .xh-shop-comparison { padding-inline: 20px !important; }
  body.xalt-shop-page .xh-shop-comparison .xcmp { margin-inline: 0; }

  /* ---------- Swipe rows: one behaviour everywhere ---------- */
  body :is(.xh-range-teaser__grid, .xh-when__cards, .xh-reviews, .xh-mineral-grid, .xh-journey__steps, .xh-ugc, .xw-more__grid, .xw-tiers, .xw-briefs, .xb-steps, .xb-rooms__grid):not(#xs) {
    display: flex !important; flex-direction: row !important; gap: 12px !important;
    margin-inline: -20px !important; padding: 4px 20px 16px !important;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory !important; scroll-padding-inline: 20px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  body :is(.xh-journey__steps, .xh-ugc, .xh-mineral-grid)::-webkit-scrollbar { display: none; }
  /* Cards with words: the next card shows only its edge, never half a line. */
  body :is(.xh-when__cards, .xh-reviews, .xh-journey__steps, .xh-mineral-grid, .xw-more__grid, .xw-tiers, .xw-briefs, .xb-steps, .xb-rooms__grid):not(#xs) > * {
    flex: 0 0 calc(100% - 6px) !important; max-width: 360px; scroll-snap-align: start !important; scroll-snap-stop: always;
  }
  /* Cards led by a picture: a little more of the next one invites the swipe. */
  body :is(.xh-range-teaser__grid, .xh-ugc):not(#xs) > * {
    flex: 0 0 74% !important; max-width: 300px; scroll-snap-align: start !important;
  }
  body .xh-when-card:is(:hover, :focus-visible) { flex: 0 0 calc(100% - 6px) !important; }
  body .xh-ugc figure img { aspect-ratio: 4 / 5; height: auto !important; }
  body .xh-ugc figcaption { font-size: 14px !important; line-height: 1.35; overflow-wrap: anywhere; }
  body .xh-ugc figcaption small { font-size: 12px !important; }
  /* The arrows are for a mouse; a thumb swipes. */
  body :is(.xh-ugc-controls, .xh-flavour-controls) { display: none !important; }

  /* ---------- Pictures on phones ---------- */
  /* No drift inside frames: the cut already fits, so nothing needs scaling. */
  body .xh-benefits__art img,
  body .xh-ingredient-visuals > figure img { transform: none !important; scale: none !important; translate: none !important; }
  /* Product page: the benefit photo is shown whole. */
  body.mockup .xp-benefits__media { width: 100% !important; margin-left: 0 !important; aspect-ratio: 4 / 5 !important; max-height: none !important; }
  /* Story-page cards are portrait on a phone too, so their photos are whole. */
  body .xw-card__media { aspect-ratio: 4 / 5 !important; }
  /* Story-page heroes: the words sit on the lower half of a busy photo, so
     that half is darkened enough to read them on any picture. */
  body .xw-hero__media::after { background: linear-gradient(180deg, rgba(24,24,23,.28) 0%, rgba(24,24,23,.12) 26%, rgba(24,24,23,.72) 58%, rgba(24,24,23,.9) 100%) !important; }
  /* Why XALT: the sticker sits on the label's corner, not over its heading. */
  body .xw-label .xw-chapter__sticker { top: -46px !important; right: -6px !important; }
  /* Creator hero: keep the creator, not the empty studio wall, in frame. */
  body.xalt-creator-page .xw-hero__media img { object-position: 34% 50%; }

  /* The flavour seal sits on the floor of the photo, clear of the box. */
  body #xh-flavours .xh-flavour-art .xh-oval { width: 84px !important; height: 84px !important; left: 8px !important; bottom: 8px !important; top: auto !important; right: auto !important; font-size: 12px !important; line-height: 1.05; }
  body.mockup .xp-benefits__media .xp-seal { width: 84px !important; height: 84px !important; }
  body.mockup .xp-benefits__media .xp-seal strong { font-size: 18px !important; }

  /* ---------- Labels that broke onto two lines ---------- */
  body #xh-flavours .xh-tnote dt { white-space: nowrap; letter-spacing: 0.06em !important; }
  body #xh-flavours .xh-tnote__row { grid-template-columns: max-content 1fr !important; column-gap: 16px; }
  body.mockup .xp-ing .benefit .lbl { font-size: 12px !important; letter-spacing: 0.03em !important; line-height: 1.25; }
  body.mockup .m-journey__perk { line-height: 1.25; }

  /* ---------- Shop ---------- */
  /* The third product no longer sits alone in half a row. */
  body.xalt-shop-page .shop-collection__grid > .shop-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  body.xalt-shop-page .shop-collection__grid > .shop-card:last-child:nth-child(odd) .shop-card__media { aspect-ratio: 6 / 5; }

  /* ---------- Account ---------- */
  /* The three photos keep to their grid: none spills onto the heading below. */
  body .xa__gallery { grid-template-rows: 120px 120px !important; margin-bottom: 24px !important; }
  body .xa__shot { min-height: 0; margin: 0; overflow: hidden; border-radius: 14px; }
  body .xa__shot img { display: block; width: 100%; height: 100% !important; object-fit: cover; }

  /* ---------- Spacing, from the 11 October review ---------- */
  /* Sections sit closer: the gap was sized for a wavy edge most do not have. */
  body main :is(.xh-section, .xp-section):not(.xh-hero, .xw-hero, .xo-hero):not(#xs) { padding-bottom: 72px !important; }
  body main .xh-benefits:not(#xs) { padding-bottom: 104px !important; }
  body main .xh-journey:not(#xs) { padding-top: 28px !important; padding-bottom: 44px !important; }
  /* Shop All sits a short step above the Reasons band, not a screen away. */
  body main #xh-flavours:not(#xs) { padding-bottom: 32px !important; }
  /* The band's wave is drawn inside the section's top padding, so the two
     must match or the wave is clipped flat. */
  body main #xh-flavours:not(#xs) { padding-bottom: 12px !important; }
  body main .xh-benefits:not(#xs) { padding-top: 72px !important; }
  body .xh-benefits__band::before { top: -72px !important; }
  body main .xh-community:not(#xs) { padding-top: 40px !important; }
  body .xh-ingredients .xh-heading-row, body .xh-ingredients .xh-ingredient-story { gap: 14px !important; }
  body .xh-ingredients .xh-heading-row { margin-bottom: 14px !important; }
  body.mockup main .xp-ing:not(#xs) { padding-top: 40px !important; padding-bottom: 36px !important; }
  /* Shop: every block starts on the same 20px line. */
  body.xalt-shop-page .xh-shop-comparison { padding-inline: 6px !important; }
  body.xalt-shop-page .xh-community--shared .xh-shell { width: auto !important; margin-inline: 6px !important; }
  /* The swipe cue sits above the table, left, where it is read first. */
  body .xcmp__hint { margin: 4px 8px 10px; text-align: left; }
  /* Why XALT closing row: three across is too tight on a phone. */
  body .xw-finale__packs { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; }
  body .xw-finale__packs .xh-button { padding-inline: 10px !important; gap: 6px !important; }
  body .xw-finale__packs .xh-button > span:first-child { white-space: normal; text-align: center; }

  /* ---------- Floating controls stay out of the way ---------- */
  body .xs-top {
    right: 14px; width: 42px; height: 42px;
    border: 1px solid rgba(24, 24, 23, 0.16); background: rgba(255, 250, 245, 0.94);
    box-shadow: 0 6px 18px rgba(24, 24, 23, 0.14);
  }
  body .xs-top:active { translate: 0 1px; box-shadow: 0 3px 10px rgba(24, 24, 23, 0.14); }

  /* ---------- Arrivals: one quiet fade ---------- */
  :root { --xs-rise: 12px; }
  [data-xs="heading"].xs-arm { opacity: 0; translate: 0 var(--xs-rise); }
  [data-xs="media"].xs-arm { opacity: 0; scale: none; translate: 0 var(--xs-rise); }
  [data-xs="sticker"].xs-arm { opacity: 0; scale: 0.9; rotate: none; }
  [data-xs].xs-arm.xs-in,
  [data-xs="media"].xs-arm.xs-in,
  [data-xs="sticker"].xs-arm.xs-in,
  [data-xs]:is([data-xs="text"], [data-xs="action"], [data-xs="kicker"], [data-xs="card"]).xs-arm.xs-in {
    opacity: 1; translate: 0 0; scale: 1; rotate: none;
    transition: opacity .38s ease var(--xs-d, 0ms), translate .46s cubic-bezier(0.22, 1, 0.36, 1) var(--xs-d, 0ms), scale .38s ease var(--xs-d, 0ms);
  }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  [data-xs].xs-arm { opacity: 1 !important; translate: none !important; scale: none !important; }
}