/* iPhone / WebKit mobile layout overrides — loaded after bundle.css
 *
 * Short-landscape desktop rebuild (890×626 AND 678×466):
 * - Assets: -m only in portrait; landscape uses desktop artboards/video
 * - JS matchMedia: short landscape (max-height 700 + landscape) = isDesktop
 * - CSS below: same desktop short-land rules for both widths
 *
 * Do NOT set global box-sizing:border-box — bundle uses content-box on
 * .viewport-container (height + padding-top). Border-box shrinks the
 * content area by --headerHeight (e.g. 466→411 at 678x466) vs prod.
 */

/* Global reboot for iPhone overflow */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* Overflow clamp only — do NOT set height:auto globally.
 * That overrides img[height] (e.g. navbar .icon img height="20px")
 * and blows desktop header icons up to intrinsic size (~289px). */
img,
video,
canvas {
  max-width: 100%;
}

/* Full-bleed slide artboards: match prod (max-width:none + height:100%). */
.opening__content__title,
.opening__content__tag,
.leadIn__container__image,
.hkNo1__container__image,
.introduction__container__img,
.introduction__container__img__text {
  max-width: none;
}

.navbar .icon img {
  height: 20px;
  width: auto;
  max-width: none;
}

.navbar__btn-cta img {
  width: 24px;
  max-width: 24px;
  height: auto;
}

.navbar__btn-toggler img {
  width: 34px;
  max-width: 34px;
  height: auto;
}

/* Prefer small / dynamic viewport; JS may still set --vh in px */
:root {
  --vh: 100dvh;
  --vh-fallback: 100svh;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

/* Override harmful iPhone large-viewport choice (was 100lvh) */
.is-iphone {
  --vh: 100svh;
}

/* Keep bundle content-box height+padding; only add safe-area on iPhone. */
.viewport-container {
  width: 100%;
  max-width: 100%;
  height: var(--vh, 100svh);
}

.is-iphone .viewport-container {
  padding-top: calc(var(--headerHeight) + var(--sat));
}

/* 100vw → 100% (scrollbar / overflow). Safe on all breakpoints for these.
 * Do NOT put .hcp__txt__item here alone — parent .hcp__txt has no width, so
 * width:100% collapses items to 0. Give the parent width instead. */
.vital-disclaimer,
.introduction .frame-wrapper {
  width: 100%;
  max-width: 100%;
}

.hcp__txt {
  left: 0;
  right: 0;
  width: 100%;
}

.hcp__txt__item {
  width: 100%;
  max-width: 100%;
}

/* Mobile drawer only (<992 matches bundle desktop nav breakpoint).
 * NEVER apply fullscreen height to .navbar__menu on desktop — that
 * overrides bundle's horizontal bar (height:auto) and covers the page.
 *
 * Padding must match prod/bundle (7.5rem / 1.25rem) + safe-area.
 * Setting padding-*: env(sat) alone wiped bundle padding and jammed
 * menu links under the close/logo row. */
@media screen and (max-width: 991px) {
  .navbar__menu,
  .navbar__menu-overlay {
    width: 100%;
    max-width: 100%;
  }

  .navbar__menu {
    height: 100%;
    min-height: 100svh;
    min-height: 100dvh;
    padding-top: calc(7.5rem + var(--sat));
    padding-bottom: calc(7.5rem + var(--sab));
    padding-left: calc(1.25rem + var(--sal));
    padding-right: calc(1.25rem + var(--sar));
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }

  .vital-disclaimer {
    height: 100%;
    min-height: 100svh;
    min-height: 100dvh;
    padding-top: var(--sat);
    padding-bottom: var(--sab);
    padding-left: var(--sal);
    padding-right: var(--sar);
  }

  .navbar {
    padding-top: calc(0.875rem + var(--sat));
    padding-left: calc(0.875rem + var(--sal));
    padding-right: calc(0.875rem + var(--sar));
  }
}

/*
 * Portrait mobile nutrient cards — bundle uses left/width in vw, but
 * .container max-width:540px centers with side margins (e.g. 626×842).
 * vw is viewport-relative while left is container-relative → fan shifts.
 * Use % so cards center on the container (and thus the viewport).
 */
@media screen and (max-width: 818px) and (orientation: portrait) {
  .nutrientPart__card__wrapper-001 {
    left: 20%;
    width: 60%;
  }

  .nutrientPart__card__wrapper-002 {
    left: 15%;
    width: 70%;
  }

  .nutrientPart__card__wrapper-003 {
    left: 10%;
    width: 80%;
  }

  .nutrientPart__card__wrapper-004 {
    left: 5%;
    width: 90%;
  }

  .nutrientPart__card__wrapper-005 {
    left: 0;
    width: 100%;
    max-width: 100%;
  }

  /*
   * Expanded detail card — assets are portrait (654×1040); bundle width:90vw
   * overflows (~896px @626). Size/center in the area BELOW the top menu so the
   * card is not covered by the header (626×890 / 466×678).
   */
  .nutrientPart__detailCard__wrapper,
  .nutrientPart__detailCard__cell__wrapper {
    --nutrient-detail-max-h: calc(var(--vh) - var(--headerHeight) - 1rem);
    aspect-ratio: 654 / 1040;
    width: auto !important;
    max-width: min(96vw, 640px) !important;
    height: min(
      var(--nutrient-detail-max-h),
      calc(min(96vw, 640px) * 1040 / 654)
    ) !important;
    max-height: var(--nutrient-detail-max-h) !important;
    overflow: hidden;
    /* Center in the band below the header (bundle uses top:50% of full slide). */
    top: calc((var(--vh) + var(--headerHeight)) / 2) !important;
    left: 50%;
  }

  .nutrientPart__detailCard,
  .nutrientPart__detailCard__cell {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: contain;
  }
}

@media screen and (max-width: 818px) {
  /* Opening uses desktop landscape video (main_web_desktop) even ≤819 —
   * portrait mobile crop was too tight at short landscape (e.g. 678×466).
   * Keep under-header box; cover fills width+height without letterbox. */
  .opening__video {
    top: var(--headerHeight);
    right: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    height: calc(var(--vh, 100%) - var(--headerHeight));
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center center;
  }

  /* Portrait ≤818 only — short landscape uses desktop rtb block below. */
  @media screen and (orientation: portrait) {
    .rtbUpgrade-slide-content__img {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: var(--rtb-video-max-height, calc(var(--vh) * 0.4));
      object-fit: contain;
    }

    .rtbUpgrade-slide-content__text {
      width: auto;
      max-width: 100%;
      height: auto;
      object-fit: contain;
    }

    .rtbUpgrade-slide-content picture {
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: 100%;
    }
  }
}

/*
 * rtbUpgrade (2nd) — desktop layout for short landscape (890×626 AND 678×466).
 * Restored from stable 51fbaed.
 * Reference: prod/desktop ≥819 + stable aae7a58 intrinsic img ratio.
 * Beat ≤818 mobile tokens (bg-m, stacked text, hidden arrows, 1rem gap).
 */
@media screen and (max-width: 1024px) and (max-height: 700px) and (orientation: landscape) {
  :root {
    --rtb-upgrade-gap: 8vh;
    --rtb-nav-height: calc(var(--vh) * 0.1657);
    --rtb-video-max-height: calc(var(--vh) * 0.4);
    --rtb-slide-content-img-mv: -5rem;
    --rtbUpgrade_bg: url("../images/img_webp/rtbUpgrade/intro_bg.webp") 0 0
      no-repeat;
  }

  .rtbUpgrade-wrapper {
    background: var(--rtbUpgrade_bg);
    background-size: cover !important;
  }

  .rtbUpgrade-container {
    justify-content: center;
    align-items: center;
    gap: var(--rtb-upgrade-gap);
    padding-top: 0;
    padding-bottom: var(--rtb-nav-height);
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .rtbUpgrade-title {
    height: calc(var(--vh) * 0.2);
    max-height: none;
    max-width: none;
    width: auto;
    object-fit: contain;
    mix-blend-mode: lighten;
  }

  .rtbUpgrade-slide-wrapper {
    position: relative;
    flex: none;
    width: auto;
    max-width: 100%;
  }

  .rtbUpgrade-slide-wrapper__prev,
  .rtbUpgrade-slide-wrapper__next {
    display: block;
  }

  .rtbUpgrade-slide-content {
    position: relative;
    gap: var(--rtb-upgrade-gap);
  }

  /* Stable aae7a58: avoid bundle height:0.6vh + max-width clamp distortion */
  .rtbUpgrade-slide-content__img {
    width: auto;
    height: auto !important;
    max-width: 100%;
    max-height: var(--rtb-video-max-height);
    margin-top: var(--rtb-slide-content-img-mv);
    margin-bottom: calc(var(--rtb-slide-content-img-mv) * 1.5);
    object-fit: contain;
  }

  .rtbUpgrade-slide-content picture {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
  }

  .rtbUpgrade-slide-content__text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    max-width: none;
    height: calc(var(--vh) * 0.4);
    margin: 0;
    margin-bottom: 0;
    object-fit: contain;
    opacity: 0;
  }

  .is-current .rtbUpgrade-slide-content__text,
  .rtbUpgrade-slide.active .rtbUpgrade-slide-content__text {
    opacity: 1;
  }

  .rtbUpgrade-slide-content__disclaimer,
  .rtbUpgrade-slide-content__down {
    display: none !important;
  }

  .rtbUpgrade-nav .nav-dot {
    margin-left: 1rem;
  }

  .rtbUpgrade-nav .nav-dot img {
    height: var(--rtb-nav-height);
  }
}

/*
 * Portrait mobile (≤818) — match prod bundle stack:
 * intro_bg-m, in-flow text under image, bundle nav/gap/video tokens.
 * (Do not override --rtb-nav-height / title caps — those shrank vs prod.)
 */
@media screen and (max-width: 818px) and (orientation: portrait) {
  .rtbUpgrade-slide-content {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .rtbUpgrade-slide-content__text {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    max-width: 100%;
    height: auto !important;
    max-height: none;
    margin: 0 0 2vh !important;
    object-fit: contain;
    opacity: 1;
  }

  .rtbUpgrade-slide-wrapper__prev,
  .rtbUpgrade-slide-wrapper__next {
    display: none;
  }
}

/*
 * introduction (5th) @ short landscape — reference desktop / 890×626:
 * - 678×466: width 100% + top 10vh (bundle desktop 819–1024) — 155% was too big
 * - 890×626 (≥820): keep 155% upscale so glyphs match ~1440 desktop weight
 * - GSAP only tweens opacity on title — transform is safe here
 */
@media screen and (max-width: 1024px) and (max-height: 700px) and (orientation: landscape) {
  .introduction__container__img--title {
    top: 10vh !important;
    left: 0;
    right: auto;
    width: 100%;
    max-width: none;
    height: auto !important;
    max-height: none;
    transform: none;
    object-fit: contain;
    object-position: center top;
  }

  @media screen and (min-width: 820px) {
    .introduction__container__img--title {
      top: 8vh !important;
      left: 50%;
      width: 155%;
      transform: translateX(-50%);
    }
  }

  .introduction .center-content__prev,
  .introduction .center-content__next {
    display: block !important;
  }

  .introduction .intro-pagination {
    display: flex !important;
    /* Short landscape: nudge dots up from the fold */
    bottom: 2.5rem;
  }

  /* Slide artboards fill the short frame; text overlays stay contain
   * like desktop so headline glyphs aren't cover-cropped/shrunk. */
  .introduction__container__img--001 img,
  .introduction__container__img--002 img,
  .introduction__container__img--003 img {
    object-fit: cover;
    object-position: center center;
  }

  .introduction__container__img__text {
    object-fit: contain !important;
    object-position: center center;
    width: 100%;
    height: 100%;
  }
}

/* Desktop: restore horizontal nav bar if any leftover mobile rules linger */
@media screen and (min-width: 992px) {
  .navbar__menu {
    position: relative;
    height: auto;
    min-height: 0;
    max-height: none;
    width: 100%;
    max-width: none;
    overflow: initial;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    background-color: transparent;
  }

  .navbar__menu-overlay {
    display: none;
    width: auto;
    height: auto;
    min-height: 0;
  }
}

.global-progress-bar {
  right: max(10px, var(--sar));
  bottom: auto;
}

/*
 * Right dots menu — mid portrait (e.g. 626×890):
 * bundle ≤819 shrinks dots to 6px; enlarge a bit for wider frames.
 * Phones (<500) stay on 6px.
 */
@media screen and (min-width: 500px) and (max-width: 818px) and (orientation: portrait) {
  .global-progress-dot {
    width: 10px;
    height: 10px;
  }

  .global-progress-bar .nav {
    gap: 11px;
  }
}

/* topcta (non-phase2) — mid portrait tall (e.g. 626×890): bundle ≤818 is 47px */
@media screen and (min-width: 560px) and (max-width: 700px) and (min-height: 820px) and
  (orientation: portrait) {
  .topcta.non-phase2 {
    max-width: 58px;
  }
}

body.lock,
body.navbar-open {
  overflow: hidden !important;
  position: relative;
  height: 100%;
  touch-action: none;
}

/* HCP boy bleed (376–440px) */
@media (max-width: 440px) {
  .hcp__boy {
    width: 100% !important;
    max-width: 100%;
  }
}

/* Tin CTAs */
@media (max-width: 430px) {
  .tin__btns {
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
  }

  .tin__btns__btn {
    width: min(250px, 100%);
    min-height: 44px;
    height: auto;
  }
}

/* faq / milkProcess / tin / trackeasy: portrait ≤818 = mobile; short-land = desktop below */

/*
 * Mid portrait (466×678 / 626×890) — milkProcess fills exactly one viewport
 * height (header clearance + modest bottom pad inside the vh box). Rows flex
 * evenly so content fits the screen without overflowing or leaving a large gap.
 */
@media screen and (min-width: 430px) and (max-width: 700px) and (min-height: 650px) and
  (orientation: portrait) {
  /*
   * Do not add padding-bottom on this white slide — with height:var(--vh) and
   * border-box it reserves a white strip at the viewport bottom under
   * trackeasy / tin (prod keeps pb:0).
   */
  .normal-content-slide {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box;
  }

  .trackeasy {
    background-color: #083e14;
  }

  .tin {
    min-height: var(--vh);
  }

  .milkProcess {
    height: var(--vh);
    min-height: var(--vh);
    max-height: var(--vh);
    justify-content: flex-start;
    padding-top: calc(var(--headerHeight) + 0.35rem);
    padding-bottom: 1.25rem;
    box-sizing: border-box;
    overflow: hidden;
  }

  .milkProcess__container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    width: 100%;
    max-width: calc(100% - 4.375rem);
    margin: 0 auto;
  }

  .milkProcess__title {
    flex: 0 0 auto;
    max-height: 4.25rem;
    margin: 0 auto 0.75rem;
  }

  .milkProcess__title img {
    max-height: 4.25rem;
    max-width: 72%;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  /* Stack rows and share leftover height evenly */
  .milkProcess__grid {
    flex: 1 1 auto;
    display: flex !important;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 0.45rem;
    min-height: 0;
  }

  .milkProcess__cell {
    flex: 1 1 0;
    align-items: center;
    gap: 0.45rem;
    min-height: 0;
    max-height: 100%;
  }

  .milkProcess__cell + .milkProcess__cell {
    margin-top: 0 !important;
  }

  .milkProcess__cell > picture {
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 0.5rem);
    height: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
  }

  .milkProcess__desc {
    display: block;
    width: auto !important;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    margin-top: 0 !important;
    object-fit: contain;
    object-position: left center;
  }

  .milkProcess__video {
    flex: 0 0 auto;
    align-self: center;
    width: auto !important;
    max-width: 42%;
    height: auto !important;
    max-height: 100%;
    aspect-ratio: 16 / 11;
    transform: none !important;
    object-fit: cover;
    margin: 0 !important;
  }

  @media screen and (min-height: 820px) {
    .milkProcess {
      padding-bottom: 1.5rem;
    }

    .milkProcess__title {
      max-height: 5rem;
      margin-bottom: 0.9rem;
    }

    .milkProcess__title img {
      max-height: 5rem;
      max-width: 68%;
    }

    .milkProcess__grid {
      gap: 0.55rem;
    }
  }

  /*
   * trackeasy — no mid-portrait overrides. Prior vh-cap + margin left a white
   * strip under the section; use bundle/prod natural bg-driven height.
   */
}

/*
 * LeadIn (3rd) — desktop video + title for short landscape + mid portrait.
 * hkNo1 (4th) — leave bundle mobile layout (no desktop cover / bg override).
 */
@media screen and (max-width: 1024px) and (max-height: 700px) and (orientation: landscape),
  screen and (max-width: 700px) and (orientation: portrait) {
  .leadIn {
    --background: var(--Sky-blue)
      url("../images/img_webp/leadIn/leadIn-bg.webp") center center no-repeat;
    --backgroundSize: cover;
    --borderWidth: 40px;
    --imgTop: 0;
  }

  .leadIn__container::before {
    display: none;
  }

  .leadIn video,
  .leadIn__container__video {
    top: var(--imgTop);
    object-fit: cover !important;
  }

  .leadIn__container__image--title {
    margin-top: -1vh;
    height: calc(100% + 1vh);
    object-fit: contain !important;
  }

  /* Desktop title is 16:9 — too small in short landscape; match ~desktop weight */
  @media screen and (orientation: landscape) {
    .leadIn__container__image--title {
      width: 130%;
      max-width: none;
      left: 50%;
      transform: translateX(-50%);
      height: auto;
      max-height: none;
      margin-top: 0;
      top: var(--imgTop, 0);
    }
  }

  /* Portrait mid (466×678 / 626×890): 16:9 artboard letterboxes — upscale glyphs */
  @media screen and (orientation: portrait) {
    .leadIn__container__image--title {
      width: 165%;
      max-width: none;
      left: 50%;
      transform: translateX(-50%);
      height: auto;
      max-height: 55vh;
      margin-top: 0;
      top: calc(var(--imgTop, 0px) + 2vh);
    }
  }
}

/*
 * hkNo1 (4th) — mobile contain only mid portrait.
 * Short landscape (890×626 / 678×466) uses desktop art + cover (like ≥819).
 */
@media screen and (max-width: 700px) and (orientation: portrait) {
  .hkNo1 img,
  .hkNo1__container__image {
    object-fit: contain !important;
    object-position: center center;
  }

  .hkNo1__container__image--txt3 {
    margin-top: 0;
    height: 100%;
  }
}

/* Portrait mobile: pin bg to top (under navbar) so tin sits higher — beat bundle bottom. */
@media screen and (max-width: 640px) and (orientation: portrait) {
  .hkNo1 {
    --background: var(--Sky-blue) url("../images/img_webp/hkno1/bg-m.webp")
      center top no-repeat;
    --backgroundSize: 100% auto;
  }
}

@media screen and (min-width: 641px) and (max-width: 1024px) and (orientation: portrait) {
  .hkNo1 {
    --background: var(--Sky-blue) url("../images/img_webp/hkno1/bg-t.webp")
      center top no-repeat;
    --backgroundSize: 100% auto;
  }
}

/*
 * 626×842 / 626×890 mid-portrait: full-width bg-m (100% auto).
 * Beat prior auto 72% shrink; keep top pin under navbar (portrait ≤640).
 */
@media screen and (min-width: 600px) and (max-width: 640px) and (min-height: 800px) and
  (orientation: portrait) {
  .hkNo1 {
    --background: var(--Sky-blue) url("../images/img_webp/hkno1/bg-m.webp")
      center top no-repeat;
    --backgroundSize: 100% auto;
    background-size: 100% auto !important;
    background-position: center top !important;
  }
}

/*
 * Short landscape ≤818 (e.g. 678×466) — desktop hkNo1:
 * desktop bg.webp + cover (beat any leftover mobile tokens).
 */
@media screen and (max-width: 818px) and (max-height: 700px) and (orientation: landscape) {
  .hkNo1 {
    --background: var(--Sky-blue) url("../images/img_webp/hkno1/bg.webp")
      center center no-repeat;
    --backgroundSize: cover;
    --imgTop: 0;
  }

  .hkNo1 img,
  .hkNo1__container__image {
    object-fit: cover !important;
    object-position: center center;
  }
}

/*
 * Opening (1st section) dark-green strip under navbar @ 819–991px (e.g. 890x626):
 * bundle sets --headerHeight:60px from 819px up, but .navbar is height:55px until 992px.
 * Video/slide offsets use --headerHeight, so ~5px of --main-c (#083e14) peeks out.
 */
@media screen and (min-width: 819px) and (max-width: 991.98px),
  screen and (max-width: 991.98px) and (max-height: 700px) and (orientation: landscape) {
  :root {
    --headerHeight: 55px;
  }
}

/*
 * Desktop layout system — also for short landscape (890×626 and 678×466):
 * rtbUpgrade item images, nutrient fan, HCP boy.
 */
@media screen and (min-width: 819px),
  screen and (max-height: 700px) and (orientation: landscape) {
  .rtbUpgrade-slide-content__img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: var(--rtb-video-max-height, calc(var(--vh) * 0.4));
    object-fit: contain;
  }

  .rtbUpgrade-slide-content picture {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
  }

  /* nutrientPart desktop end state (GSAP):
   * left:50% + xPercent [-175,-112.5,-50,12.5,75], yPercent:-50
   * Middle card (-50) is viewport-centered; do NOT add translateX(-50%) —
   * that fights GSAP transforms and shifts the fan. Equal auto widths required.
   * At 678×466 bundle still applies ≤818 mobile stack + click-lightbox —
   * override those so short landscape matches 890×626 desktop. */
  .nutrientPart {
    align-items: center;
    justify-content: center;
    padding: var(--headerHeight) 1rem;
    flex-direction: column;
  }

  /* Desktop title: full-vh artboard (bundle ≥819). Beats mobile max-height:15vh. */
  .nutrientPart__title {
    display: block;
    margin: 0;
    max-height: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: var(--vh);
    object-fit: contain;
  }

  .nutrientPart__card__title {
    display: none !important;
  }

  .nutrientPart__container {
    height: auto;
    margin-top: 20vh;
  }

  .nutrientPart__container.container {
    margin-left: auto;
    margin-right: auto;
  }

  /* Desktop: no mobile click-lightbox / blur (detail stays display:none ≥819). */
  .nutrientPart__detailCard,
  .nutrientPart__detailCard__cell {
    display: none !important;
  }

  .nutrientPart__detailCard__wrapper,
  .nutrientPart__detailCard__wrapper.active {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .nutrientPart.active .nutrientPart__container,
  .active .nutrientPart__container {
    filter: none;
    pointer-events: auto;
  }

  .nutrientPart__card__wrapper,
  .nutrientPart__card__wrapper-001,
  .nutrientPart__card__wrapper-002,
  .nutrientPart__card__wrapper-003,
  .nutrientPart__card__wrapper-004,
  .nutrientPart__card__wrapper-005 {
    left: 50%;
    width: auto;
    max-width: none;
    /* Bundle transitions transform — that fights GSAP xPercent/yPercent
     * at the desktop fan end (left:50% + xPercent fan). Keep other transitions. */
    transition: z-index 0.3s, box-shadow 0.3s, margin-top 0.3s;
  }

  .nutrientPart__card__wrapper-001 { z-index: 5; }
  .nutrientPart__card__wrapper-002 { z-index: 4; }
  .nutrientPart__card__wrapper-003 { z-index: 3; }
  .nutrientPart__card__wrapper-004 { z-index: 2; }
  .nutrientPart__card__wrapper-005 { z-index: 1; }

  .nutrientPart__card__wrapper:hover {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5);
    margin-top: -1rem;
  }

  .nutrientPart__card__wrapper:hover .nutrientPart__card__cover {
    opacity: 0;
  }

  .next .nutrientPart__card__cover,
  .prev .nutrientPart__card__cover {
    filter: brightness(0.75);
  }

  .next .nutrientPart__card__cover { left: 15%; }
  .prev .nutrientPart__card__cover { left: -15%; }

  /* Do not set transform here — desktop TL ends at
   * top:50%; yPercent:-50; xPercent:[-175,-112.5,-50,12.5,75]
   * Middle card (-50) is viewport-centered. CSS transform overrides break the fan. */

  /* Restore bundle sizing: global img{height:auto} was overriding height:65vh */
  .nutrientPart__card__wrapper img {
    width: auto;
    height: 65vh;
    max-width: none;
  }

  /* Short landscape: keep fan readable without blowing card width */
  @media screen and (max-height: 700px) {
    .nutrientPart__card__wrapper img {
      height: 55vh;
    }
  }

  /*
   * Sections 9 / 12–13 @ short landscape (esp. 678×466):
   * bundle ≤818 still applies mobile organic/brain/milk/tin layout.
   * Mirror ≥819 desktop so they match 890×626.
   * (7 — farm stays mobile ≤818 like prod; desktop overrides ≥819 below.)
   */

  /* 9 — organic + zeroAdditive (inner-scroll) */
  .organic {
    align-items: flex-start;
    background: var(--main-c) url("../images/img_webp/organic/bg.webp") center center
      no-repeat;
    background-size: cover !important;
    padding-top: 0;
    padding-bottom: 0;
  }

  .organic__title {
    max-height: var(--sectionHeight);
    width: auto;
    object-fit: contain;
    object-position: center top;
  }

  .organic__point--002 {
    margin-top: 0;
    margin-bottom: 0;
  }

  /* 678 only — beat ≤818 mobile margins; do not shift drop down; leave 890 to bundle ≥819 */
  @media screen and (max-width: 818px) {
    .organic__milk-drop,
    .organic__point {
      position: absolute;
      top: 0;
      right: 0;
      bottom: auto;
      width: 100%;
      height: 100%;
      max-height: var(--sectionHeight);
      margin: 0;
      object-fit: contain;
      object-position: center center;
    }
  }

  .zeroAdditive {
    min-height: calc(var(--vh) - var(--headerHeight));
    background: url("../images/img_webp/zeroAdditive/bg.webp") center center no-repeat !important;
    background-size: auto !important;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
  }

  .zeroAdditive img {
    max-width: none;
  }

  .zeroAdditive__title {
    position: absolute;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: translateX(-50%);
  }

  .zeroAdditive__content {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    margin-top: 0;
    transform: translateX(-50%);
  }

  .zeroAdditive__content__points {
    top: 0;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .zeroAdditive__content img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* brainEyesDev (between 9–11) — desktop bg + absolute titles */
  .brainEyesDev {
    --bg: url("../images/img_webp/brainEyesDev/bg.webp") center center no-repeat;
    --bgs: auto 100%;
  }

  .brainEyesDev img {
    max-width: none;
  }

  .brainEyesDev__title,
  .brainEyesDev__subtitle {
    position: absolute;
    top: var(--headerHeight);
    left: 50%;
    height: 100%;
    margin-top: 0;
    transform: translateX(-50%);
  }

  /* 12 — milkProcess (beat every ≤818 mobile stack rule) */
  .milkProcess {
    --milkBg: url("../images/img_webp/milkProcess/bg.webp") no-repeat center center / cover;
    padding: 3.75rem 5rem;
  }

  .milkProcess__container {
    width: 60vh;
    max-width: 90vw;
    margin: 0 auto;
  }

  /* 678×466: 60vh (~280px) is too narrow for the desktop 2×2; widen toward 890 feel */
  @media screen and (max-width: 818px) {
    .milkProcess {
      padding: 2.5rem 3rem;
    }

    .milkProcess__container {
      width: min(72vw, 26rem);
      max-width: 90vw;
    }

    /* Clear navbar — give milkProcess headline a little top air */
    .milkProcess__title {
      margin-top: 1.75rem;
    }
  }

  .milkProcess__title {
    max-height: 5.125rem;
  }

  .milkProcess__title img {
    max-width: 25rem;
  }

  .milkProcess__grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1.6875rem 2.5rem;
  }

  .milkProcess__cell {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .milkProcess__cell + .milkProcess__cell {
    margin-top: 0 !important;
  }

  .milkProcess__video {
    max-width: none !important;
    width: 100%;
    margin: -1rem auto !important;
    transform: none !important;
  }

  .milkProcess__desc {
    width: auto !important;
    font-size: 0.875rem;
    margin-top: 0.75rem !important;
  }

  /* 13 — tin (bundle ≤818 still forces .swiper-slide max-width:50vw) */
  .tin__title {
    max-width: none;
    max-height: 2.1875rem;
    margin-top: 4.5rem;
    margin-bottom: 4.5rem;
  }

  .tin__content {
    margin-top: 4.5rem;
  }

  .tin__content p {
    font-size: var(--f-title4-size);
  }

  .tin__btns__item {
    max-width: calc(750px + 2rem);
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(250px, max-content));
    margin-bottom: 4.5rem;
  }

  .tin__btns__btn {
    width: 250px;
  }

  .tin .swiper {
    padding-bottom: 3.25rem;
  }

  .tin .swiper-slide {
    max-width: 300px;
  }

  /* trackeasy — restore desktop hand (≤818 uses 65% mobile hand) */
  .trackeasy__hand {
    right: 50%;
    width: 31.3%;
    bottom: 0;
  }

  /* faq */
  .faq {
    --faq-font-size: 0.75rem;
  }

  .faq td:first-child {
    width: 50px;
  }

  /*
   * 678 only — bundle ≤818 still swaps mobile type tokens + auto-fit
   * collapses tin CTAs to 2 cols; 890 keeps native ≥819 (3×250).
   */
  @media screen and (max-width: 818px) {
    :root {
      --f-body-large-size: 18px;
      --f-body-medium-size: 16px;
      --f-body-small-size: 14px;
      --f-body-xlarge-size: 22px;
      --f-body-xsmall-size: 12px;
      --f-title1-size: 34px;
      --f-title2-size: 30px;
      --f-title3-size: 26px;
      --f-title4-size: 24px;
      --f-title5-size: 20px;
    }

    .tin__content {
      height: calc(var(--f-body-small-size) * 2);
    }

    .tin__content p {
      font-size: 24px;
    }

    /* Only the active tin's CTA set is visible (4 product groups in DOM). */
    .tin__btns__item {
      display: none;
      grid-template-columns: repeat(3, max-content);
      justify-content: center;
      justify-items: center;
      gap: 0.75rem 1rem;
      max-width: min(782px, calc(100% - 1.5rem));
      margin-inline: auto;
    }

    .tin__btns__item.active {
      display: grid;
    }

    .tin__btns__btn {
      width: clamp(148px, 28vw, 250px);
      font-size: 16px;
    }

    .tin__btns__btn--small {
      font-size: 12px;
    }
  }
}

/*
 * Farm (7th) — desktop layout ≥819 AND short landscape (890×626 / 678×466).
 * Portrait ≤818 keeps bundle mobile: height:auto video, -m card art.
 */
@media screen and (min-width: 819px),
  screen and (max-height: 700px) and (orientation: landscape) {
  /* Pin under navbar (bundle short-desktop center+headerHeight left a gap). */
  .farmSuperiority {
    padding-top: 0;
  }

  .farmSuperiority-container {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .farmSuperiority-video {
    top: var(--headerHeight);
    left: 50%;
    width: 100%;
    height: calc(100% - var(--headerHeight));
    object-fit: cover;
    object-position: center top;
    filter: contrast(1.025);
    transform: translateX(-50%);
  }

  .farmSuperiority-item {
    align-items: flex-start;
    justify-content: flex-start;
    background-size: auto 100% !important;
    background-position: center top;
    padding-top: 0;
  }

  .farmSuperiority-item-title {
    position: relative;
    left: 50%;
    width: auto;
    height: 100%;
    transform: translateX(-50%);
  }

  .farmSuperiority-item img {
    height: 100%;
    object-position: center top;
  }

  #card0 {
    background-image: url("../images/img_webp/farmSuperiority/demo-farm-superiority-bg-000.webp");
  }
  #card1 {
    background-image: url("../images/img_webp/farmSuperiority/demo-farm-superiority-bg-001.webp");
  }
  #card2 {
    background-image: url("../images/img_webp/farmSuperiority/demo-farm-superiority-bg-002.webp");
  }
  #card3 {
    background-image: url("../images/img_webp/farmSuperiority/demo-farm-superiority-bg-003.webp");
  }
  #card4 {
    background-image: url("../images/img_webp/farmSuperiority/demo-farm-superiority-bg-004.webp");
  }
  #card5 {
    background-image: url("../images/img_webp/farmSuperiority/demo-farm-superiority-bg-005.webp");
  }
}

/*
 * HCP title — mid portrait (e.g. 626×842 / 626×890):
 * bundle ~219px is small; 55vw (~336) still oversized — keep near prod (~40vw).
 * Phones (<500) stay on bundle rem.
 */
@media screen and (min-width: 500px) and (max-width: 818px) and (orientation: portrait) {
  .hcp__title img {
    width: min(40vw, 15.5rem);
    max-width: 90%;
    height: auto;
    max-height: none;
  }
}

/*
 * HCP boy + txt items — mid portrait (466×678 / 626×890):
 * Bundle mobile pins boy top:1rem (image hangs below). Bottom-align instead so
 * the tall -m art crops at the section top while the feet sit on the section
 * bottom. Also shrink txt item art — bundle 4.5vh/12vh reads large on these
 * taller mid frames.
 */
@media screen and (min-width: 430px) and (max-width: 818px) and (min-height: 650px) and
  (orientation: portrait) {
  .hcp {
    overflow: hidden;
  }

  .hcp__boy {
    top: auto !important;
    bottom: 0 !important;
    left: 50%;
    width: 100% !important;
    max-width: none;
    height: auto !important;
    max-height: none !important;
    transform: translateX(-50%);
  }

  .hcp__txt__item__title {
    max-height: min(3.4vh, 2rem);
    max-width: min(68vw, 16rem);
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .hcp__txt__item__data__img {
    max-height: min(9vh, 5.25rem);
    max-width: min(78vw, 22rem);
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .hcp__txt__item__data__number img {
    height: 2.25rem;
    width: auto;
  }

  /* Narrower mid portrait only (e.g. 466×678) — smaller than 626×890 */
  @media screen and (max-width: 520px) {
    .hcp__txt__item__title {
      max-height: min(2.6vh, 1.5rem);
      max-width: min(62vw, 14rem);
    }

    .hcp__txt__item__data__img {
      max-height: min(6.75vh, 3.75rem);
      max-width: min(72vw, 18rem);
    }

    .hcp__txt__item__data__number img {
      height: 1.75rem;
    }
  }
}

/*
 * HCP (11th) — desktop layout ≥819 AND short landscape (890×626 / 678×466).
 * Bundle ≤818 mobile uses top:1rem + width:100% (not full height) — override.
 */
@media screen and (min-width: 819px),
  screen and (max-height: 700px) and (orientation: landscape) {
  /* boy = height:100% + width:auto (ultra-wide, centered via translateX(-50%))
   * Global img{max-width:100%} must be lifted or width clamps and layout breaks. */
  .hcp__boy {
    top: auto !important;
    bottom: 0 !important;
    left: 50%;
    width: auto !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none;
    transform: translateX(-50%);
  }

  .hcp__title {
    position: relative;
    z-index: 3;
    top: 0;
    width: 100%;
    opacity: 1;
    visibility: visible;
  }

  .hcp__title img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    max-height: none !important;
    margin: 0 auto;
    object-fit: contain;
  }

  /* Desktop short-height uses 0.32; base desktop 0.26. Prefer short-height. */
  .hcp__txt {
    top: calc(var(--vh) * 0.32);
  }

  .hcp__txt__item {
    gap: 0;
  }

  .hcp__txt__item__title {
    max-height: 5.75vh;
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }

  .hcp__txt__item__data__img {
    max-width: 100%;
    max-height: 13.24vh;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .hcp__txt__item__data__number {
    margin-right: 1rem;
  }

  .hcp__txt__item__data__number img {
    height: 2.9rem;
    width: auto;
  }
}