/* Keep the original scroll scene in one viewport without a nested text scroller. */
#hero-stage .scene-chapters,
#hero-stage[data-hero-layout="stack"] .scene-chapters {
  max-height: none;
  overflow: visible;
}
#hero-stage .ingredient-explanation { max-width: none; min-height: 0; }

@media (max-height: 820px) {
  #hero-stage[data-hero-layout="columns"] .ingredient-feature {
    grid-template-columns: minmax(0, 1fr) 80px;
    min-height: 0;
    margin: 6px 0;
  }
  #hero-stage[data-hero-layout="columns"] .ingredient-story { padding-top: 10px; }
  #hero-stage[data-hero-layout="columns"] .ingredient-steps { margin-top: 8px; }
}

/* A single header row gives short phones room for both copy and bottles. */
@media (max-width: 480px) and (max-height: 740px) {
  .immersive-theme.in-experience .site-header { grid-template-rows: 46px; height: 66px; row-gap: 0; }
  .immersive-theme.in-experience .header-order { display: none; }
  .immersive-theme.in-experience .mobile-menu { top: 96px; }
}

@media (max-height: 740px) {
  #hero-stage[data-hero-layout="stack"] {
    --hero-model-min: 100px;
    --hero-stack-controls: 48px;
    --hero-stack-gap: 6px;
  }
  #hero-stage[data-hero-layout="stack"] .scene-chapter h1 { font-size: 32px; line-height: 1.04; margin-bottom: 8px; }
  #hero-stage[data-hero-layout="stack"] .scene-chapter h2 { font-size: 28px; line-height: 1.06; margin-bottom: 8px; }
  #hero-stage[data-hero-layout="stack"] .scene-eyebrow { font-size: 12px; line-height: 1.4; margin-bottom: 6px; }
  #hero-stage[data-hero-layout="stack"] .scene-chapter .scene-description,
  #hero-stage[data-hero-layout="stack"] .ingredient-explanation { font-size: 16px; line-height: 1.4; }
  #hero-stage[data-hero-layout="stack"] .scene-actions { margin-top: 8px; }
  #hero-stage[data-hero-layout="stack"] .scene-actions :is(.scene-cta, .scene-secondary),
  #hero-stage[data-hero-layout="stack"] .scene-formula .scene-text-button { font-size: 16px; min-height: 44px; padding-block: 8px; }
  #hero-stage[data-hero-layout="stack"] .ingredient-story { padding-top: 8px; }
  #hero-stage[data-hero-layout="stack"] .ingredient-feature { grid-template-columns: minmax(0, 1fr) 60px; min-height: 0; margin: 6px 0; }
  #hero-stage[data-hero-layout="stack"] .ingredient-feature h3 { font-size: 24px; }
  #hero-stage[data-hero-layout="stack"] .ingredient-benefit { font-size: 16px; line-height: 1.35; }
  #hero-stage[data-hero-layout="stack"] .ingredient-steps { margin-top: 4px; }
  #hero-stage[data-hero-layout="stack"] .scene-model-zone { --model-note-space: 0px; }
  #hero-stage[data-hero-layout="stack"] .scene-illustration-note { display: none; }
}

@media (max-width: 360px) and (max-height: 600px) {
  #hero-stage[data-hero-layout="stack"] .scene-formula h2 { font-size: 26px; margin-bottom: 6px; }
  #hero-stage[data-hero-layout="stack"] .ingredient-story { padding-top: 6px; }
  #hero-stage[data-hero-layout="stack"] .ingredient-story-top,
  #hero-stage[data-hero-layout="stack"] .ingredient-story-top [data-beat-amount] { font-size: 12px; line-height: 1.4; }
  #hero-stage[data-hero-layout="stack"] .ingredient-feature { grid-template-columns: minmax(0, 1fr) 48px; margin: 4px 0; }
  #hero-stage[data-hero-layout="stack"] .ingredient-feature h3 { font-size: 22px; margin-bottom: 4px; }
  #hero-stage[data-hero-layout="stack"] .ingredient-explanation { line-height: 1.35; }
  #hero-stage[data-hero-layout="stack"] .scene-purchase { margin-top: 4px; }
  #hero-stage[data-hero-layout="stack"] .scene-purchase .quick-add { min-height: 44px; font-size: 16px; padding-block: 8px; }
}

@media (max-height: 500px) {
  #hero-stage[data-hero-layout="columns"] { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  #hero-stage[data-hero-layout="columns"] .scene-chapter :is(h1, h2) { margin-bottom: 6px; }
  #hero-stage[data-hero-layout="columns"] .scene-eyebrow { margin-bottom: 4px; }
  #hero-stage[data-hero-layout="columns"] .scene-actions { margin-top: 6px; }
  #hero-stage[data-hero-layout="columns"] .scene-chapter .scene-description,
  #hero-stage[data-hero-layout="columns"] .ingredient-explanation { font-size: 16px; line-height: 1.35; }
  #hero-stage[data-hero-layout="columns"] .ingredient-feature { grid-template-columns: minmax(0, 1fr) 48px; margin: 4px 0; }
  #hero-stage[data-hero-layout="columns"] .ingredient-story { padding-top: 4px; }
  #hero-stage[data-hero-layout="columns"] .ingredient-feature { margin-block: 2px; }
  #hero-stage[data-hero-layout="columns"] .ingredient-steps { margin-top: 2px; }
  #hero-stage[data-hero-layout="columns"] .ingredient-story-top,
  #hero-stage[data-hero-layout="columns"] .ingredient-story-top [data-beat-amount] { font-size: 12px; line-height: 1.4; }
  #hero-stage[data-hero-layout="columns"] .ingredient-benefit { font-size: 16px; line-height: 1.3; }
  #hero-stage[data-hero-layout="columns"] .scene-purchase .quick-add { min-height: 44px; font-size: 16px; padding-block: 8px; }
  #hero-stage[data-hero-layout="columns"] .scene-actions :is(.scene-cta, .scene-secondary) { font-size: 16px; min-height: 44px; padding-block: 8px; }
}

/* Older phones in landscape need the two columns even below 600px wide. */
@media (min-width: 480px) and (max-height: 360px),
       (min-width: 480px) and (max-width: 639px) and (max-height: 500px) {
  .immersive-theme.in-experience .site-header { height: 50px; padding-block: 3px; }
  .immersive-theme.in-experience .header-order { min-height: 44px; padding-block: 8px; font-size: 16px; }
  .immersive-theme.in-experience .mobile-menu { top: 80px; }
  #hero-stage[data-hero-layout="columns"] { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); }
  #hero-stage[data-hero-layout="columns"] .scene-intro .scene-eyebrow { display: none; }
  #hero-stage[data-hero-layout="columns"] .scene-intro h1 { font-size: 28px; }
  #hero-stage[data-hero-layout="columns"] .scene-formula h2 { font-size: 22px; margin-bottom: 4px; }
  #hero-stage[data-hero-layout="columns"] .scene-formula h2 br { display: none; }
  #hero-stage[data-hero-layout="columns"] .scene-formula h2 em { display: inline; }
  #hero-stage[data-hero-layout="columns"] .ingredient-explanation { font-size: 15px; }
  #hero-stage[data-hero-layout="columns"] .ingredient-feature h3 { font-size: 22px; }
  #hero-stage[data-hero-layout="columns"] .scene-formula .ingredient-steps { padding-right: 138px; gap: 5px; }
  #hero-stage[data-hero-layout="columns"] .scene-formula .scene-purchase { position: absolute; right: 0; bottom: 0; margin: 0; }
  #hero-stage[data-hero-layout="columns"] .scene-purchase .quick-add { padding-inline: 10px; }
}

@media (min-width: 761px) and (max-height: 360px) {
  .immersive-theme.in-experience .mobile-menu { top: 84px; }
}

@media (min-width: 480px) and (max-width: 599px) and (min-aspect-ratio: 13/10) {
  #hero-stage:not([data-hero-layout]) {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr);
    grid-template-rows: minmax(220px, 1fr) 44px;
    grid-template-areas: "copy models" "controls controls";
  }
}