/*
 * Mobile polish — loaded after every other stylesheet, small screens only.
 * Carries the previous site's header scale to the premium build and caps
 * oversized hero/photo sections so no image costs more than one screen
 * on the smallest iPhone (320×568). Desktop is untouched.
 */

/* Retired from the hubs: the oversized editorial story, repeated care/process
   and approach sections, plus the now-redundant jump bars and hero buttons.
   The templates no longer render them; these selectors keep the current
   generated preview aligned until the bilingual rebuild runs. */
.sr-feature,
.wh-symptom-feature,
.sr-care#how-care-works,
.wh-section#how-care-works,
.sr-approach,
.wh-stats,
.sr-note,
.sr-jump,
.wh-jump,
.wh-reassurance .wh-btn,
.hub-hero .sr-hero__actions,
.hub-hero .wh-hero__actions {
  display: none !important;
}

/* ── 0. No page ever scrolls sideways on a phone ──────────────────────── */
@media (max-width: 700px) {
  html, body { overflow-x: clip; }
  .chooser-goal-grid {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }
  .chooser-goal { flex: 0 0 78vw; scroll-snap-align: center; }
}

/* ── 1. Header: a logo you can actually read ──────────────────────────── */
@media (max-width: 700px) {
  .bb-nav {
    min-height: 68px;
    padding: 10px 12px 10px 20px;
  }
  .bb-nav__brand { font-size: 28px !important; }
  /* The open menu carries the same scale. */
  .mobile-menu__brand { font-size: 28px !important; }
}
@media (max-width: 360px) {
  .bb-nav__brand,
  .mobile-menu__brand { font-size: 24px !important; }
}

/* ── 1b. "Explore …" drawer links become real buttons ─────────────────── */
@media (max-width: 700px) {
  .bb-nav__mega a.bb-nav__mega-explore,
  .bb-nav__links .bb-nav__mega a.bb-nav__mega-explore {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--edit-french-blue, #55779f);
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px;
    padding: 15px 22px;
    margin-top: 14px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 12px;
  }
  .bb-nav__mega-explore .arr { color: #fff; }

  /* Phone menu drawers use .mobile-menu__all for the same link.
     High specificity + !important: the incumbent panel rule wins otherwise,
     and its 14px/2px padding is exactly the off-center pill Andrew flagged. */
  .mobile-menu__panel .mobile-menu__sublist a.mobile-menu__all {
    display: block !important;
    height: 50px !important;
    line-height: 50px !important;
    padding: 0 !important;
    margin: 14px 0 2px !important;   /* 14 above; 2 + card's 12 = 14 below */
    background: var(--edit-french-blue, #55779f) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    letter-spacing: .08em !important;
    text-indent: .08em;              /* re-centers tracked uppercase optically */
    text-transform: uppercase !important;
    text-align: center !important;
  }
  .mobile-menu__panel .mobile-menu__sublist a.mobile-menu__all::after { display: none !important; }
  /* Drawer card: equal air top and bottom, rows vertically centered. */
  .mobile-menu__panel .mobile-menu__sublist { padding: 4px 16px 12px !important; }
  .mobile-menu__panel .mobile-menu__sublist a:not(.mobile-menu__all) {
    display: flex !important;
    align-items: center !important;
  }
}

/* ── 1f. Product pages: image first, like a product page should be ────── */
@media (max-width: 900px) {
  .pdp-splithero__info { order: 0 !important; }
  /* The stage was 4/5 of full width — 460pt of image before any words.
     Premium grammar: product visible AND the name on screen one, and the
     page reads as one continuous surface, not a card floating in a card. */
  .pdp { padding-left: 0 !important; padding-right: 0 !important; padding-top: 84px !important; }
  .pdp-splithero { gap: 0 !important; }
  .pdp-splithero__media {
    margin-top: 0 !important;
    aspect-ratio: auto !important;
    height: 48svh !important;
    min-height: 300px !important;
    max-height: 440px !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 0 !important;
    width: 100% !important;
  }
  .pdp-splithero__info { padding: 30px 24px 8px !important; }
}

/* ── 1c. PDP jump chips: clear the header instead of touching it ──────── */
@media (max-width: 700px) {
  .wl-jump { top: 92px !important; }
}

/* ── 1d. Redundant trust line under "Be among the first" ──────────────── */
.closing-cta__trust { display: none !important; }

/* ── 1e. Benefit pills: chip-sized, not button-sized ──────────────────── */
@media (max-width: 700px) {
  .sr-pills span, .sr-facts span {
    padding: 9px 14px;
    font-size: 13px;
  }
}

/* ── 2a. Legibility floor: nothing under 11px on a phone ──────────────── */
@media (max-width: 700px) {
  .chooser-path { font-size: 11px !important; letter-spacing: .12em !important; }
  .chooser-hero__visual-label { font-size: 11px !important; }
  .brand-foot__copy { font-size: 11px !important; line-height: 1.65 !important; }
  .mobile-menu__meta,
  .catcard__tag,
  .jpost__meta,
  .chooser-treatment__meta,
  .wh-label,
  .wh-picker__k,
  .wh-phase__age,
  .hub-card__format,
  .hub-hero__meta span,
  .pdp-pill,
  .prod-pill { font-size: 11px !important; }
}

/* ── 2b. Tap targets: 44px effective, invisibly where possible ────────── */
@media (max-width: 700px) {
  .language-switcher__link {
    min-height: 40px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .mobile-menu__sublist a.mobile-menu__all { min-height: 48px; }
  .cat-panel__explore,
  .bb-nav__mega-all {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* Footer and legal links: grow the touch area, not the text. */
  .brand-foot__col a,
  .brand-foot__lang,
  .legal-foot a,
  .legal-links a {
    display: inline-block;
    padding-top: 9px;
    padding-bottom: 9px;
  }
  /* Section jump chips on hubs and PDPs. */
  .sr-jump a,
  .wl-jump a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ── 2. Hub heroes: one screen of photo, never more ───────────────────── */
@media (max-width: 900px) {
  .hub-hero,
  .sr-page .hub-hero,
  .wlh-page .hub-hero,
  .el-page .hub-hero {
    min-height: 88vh !important;
    min-height: 88svh !important;
  }
}
@media (max-width: 700px) {
  /* The 172px desktop padding pushes hero content past the first screen. */
  .hub-hero { padding-top: 118px !important; padding-bottom: 42px !important; }
}

/* ── 3. Homepage category panels: fit the screen ──────────────────────── */
@media (max-width: 700px) {
  .cat-panel__bg { min-height: 0 !important; }
  .cat-panel__inner { min-height: min(470px, 78svh) !important; }
}

/* ── 4. Women's health photo sections ─────────────────────────────────── */
@media (max-width: 600px) {
  .wh-image-break { min-height: min(560px, 82svh) !important; }
  .wh-care-layout__image { min-height: 300px !important; height: auto !important; max-height: 62svh; }
  .wh-stats__media { min-height: min(300px, 55svh) !important; }
}

/* --------------------------------------------------------------------------
   Mobile correction layer — production audit, 320–700 CSS px

   This block intentionally sits last. The premium release contains several
   page-local mobile rules with higher specificity; keeping the corrections in
   one final, family-scoped layer makes the cascade deterministic without
   touching the desktop experience.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  html { scroll-padding-top: 78px; }
  body { max-width: 100%; }

  /* The previous 68px / 28px treatment made the header dominate a phone. */
  .bb-nav,
  .bb-nav.is-scrolled {
    top: calc(10px + env(safe-area-inset-top, 0px));
    width: calc(100% - 24px);
    min-height: 58px;
    margin: 0 12px;
    padding: 7px 8px 7px 18px;
  }
  .bb-nav__brand,
  .bb-nav.is-scrolled .bb-nav__brand { font-size: 21px !important; }
  .mobile-menu__brand { font-size: 24px !important; }

  /* Coach overlays repeatedly cover phone-width prices, media and primary
     actions. The coach remains available on larger canvases; conversion
     controls take priority over a persistent floating layer on phones. */
  .ec-nudge { display: none !important; }
  .ec-fab { display: none !important; }

  /* Horizontal controls should look intentionally swipeable, not clipped. */
  :is(.wh-jump, .sr-jump, .wl-jump, .rh-jump,
      .wh-picker__tabs, .sr-picker__tabs, .chooser-goal-grid,
      .wh-compare-wrap, .jband__list, .cbar) {
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  :is(.wh-jump, .sr-jump, .wl-jump, .rh-jump,
      .wh-picker__tabs, .sr-picker__tabs, .chooser-goal-grid,
      .wh-compare-wrap, .jband__list, .cbar)::-webkit-scrollbar { display: none; }
  :is(.wh-jump, .sr-jump, .wl-jump, .rh-jump) {
    padding-right: 42px !important;
    box-shadow:
      inset -24px 0 18px -25px rgba(46, 42, 36, .55),
      0 12px 28px rgba(40, 34, 26, .07) !important;
  }
  :is(.wh-jump, .sr-jump, .wl-jump, .rh-jump) a,
  :is(.wh-picker__tabs, .sr-picker__tabs, .chooser-goal-grid) > * {
    scroll-snap-align: start;
  }

  /* Keep every interactive target at or above the 44px mobile floor. */
  .hero-pill__cta,
  .catcard__btn,
  .btn-explore,
  .chooser-reset,
  .language-switcher__link,
  :is(.wh-jump, .sr-jump, .wl-jump, .rh-jump) a {
    min-height: 44px !important;
  }
  .chooser-reset {
    display: inline-flex;
    align-items: center;
    padding: 8px 0 !important;
  }

  /* Hub pages: an editorial hero, not a second full-screen splash page. */
  .hub-hero.hub-hero--media,
  .sr-page .hub-hero.hub-hero--media,
  .wlh-page .hub-hero.hub-hero--media,
  .el-page .hub-hero.hub-hero--media {
    box-sizing: border-box;
    width: 100%;
    height: auto !important;
    min-height: min(620px, calc(100svh - 72px)) !important;
    padding: calc(92px + env(safe-area-inset-top, 0px)) 20px 26px !important;
    align-items: flex-end !important;
  }
  .hub-hero--media .hub-hero__inner,
  .sr-page .hub-hero__inner {
    width: 100%;
    max-width: 620px !important;
    min-width: 0;
    margin: 0 !important;
  }
  .hub-hero--media .hub-hero__title,
  .sr-page .hub-hero__title,
  .wlh-page .hub-hero__title,
  .el-page .hub-hero__title {
    max-width: 100%;
    font-size: clamp(42px, 12vw, 49px) !important;
    line-height: .96 !important;
    overflow-wrap: anywhere;
  }
  .hub-hero--media .hub-hero__lede,
  .sr-page .hub-hero__lede {
    max-width: 35em !important;
    margin-top: 15px !important;
    font-size: 16px !important;
    line-height: 1.47 !important;
  }
  .hub-hero--media .hub-hero__meta {
    gap: 4px 7px !important;
    margin-top: 14px !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
    letter-spacing: .1em !important;
  }
  .wh-hero__eyebrow,
  .hub-hero--media .sr-eyebrow {
    margin-bottom: 10px !important;
    font-size: 10px !important;
  }
  .wh-hero__actions,
  .sr-hero__actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
    margin-top: 18px !important;
  }
  .wh-hero__actions .wh-btn,
  .sr-hero__actions .sr-btn {
    width: 100%;
    min-height: 48px !important;
    padding: 10px 9px !important;
    white-space: normal;
    text-align: center;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    letter-spacing: .09em !important;
  }

  /* Women's Health: the old width:100% made each tab 347px wide. */
  .wh-section--explorer .wh-picker__tabs,
  .wh-picker__tabs {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 34px 8px 0 !important;
    gap: 9px !important;
    overflow-x: auto !important;
  }
  .wh-section--explorer .wh-picker__tab,
  .wh-picker__tab {
    flex: 0 0 148px !important;
    width: 148px !important;
    min-width: 148px !important;
    min-height: 76px !important;
    padding: 13px 14px !important;
    border-radius: 16px !important;
  }
  .wh-picker__tab strong { font-size: 21px !important; }
  .wh-picker__tab span { display: block !important; font-size: 11px !important; }
  .wh-section--explorer .wh-picker__stage { min-height: 230px !important; }

  /* All two-treatment hub pickers use a deliberate next-card peek. */
  .sr-picker__tabs {
    display: flex !important;
    flex-direction: row !important;
    width: 100%;
    max-width: 100%;
    gap: 10px !important;
    padding: 0 38px 8px 0 !important;
    overflow-x: auto !important;
  }
  .sr-picker__tab {
    flex: 0 0 184px !important;
    width: 184px !important;
    min-width: 184px !important;
    padding: 18px !important;
    border-radius: 18px !important;
  }
  .sr-picker__tab strong { font-size: 24px !important; }
  .sr-picker__content { min-height: 0 !important; }
  .sr-product-stage,
  .wlh-page .sr-product-stage {
    min-height: 230px !important;
    height: 230px !important;
  }
  .sr-picker__copy,
  .wlh-page .sr-picker__copy { padding: 32px 22px !important; }

  /* PDPs: keep the whole product visible and surface the decision + CTA early. */
  .pdp {
    padding: 78px 12px 0 !important;
  }
  .pdp-splithero {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }
  .rh-gallery {
    width: 100%;
    height: clamp(205px, 30svh, 240px) !important;
    min-height: clamp(205px, 30svh, 240px) !important;
  }
  .pdp-splithero__media,
  .rh-gallery .pdp-splithero__media {
    width: 100% !important;
    height: clamp(205px, 30svh, 240px) !important;
    min-height: clamp(205px, 30svh, 240px) !important;
    max-height: 240px !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    border-radius: 18px !important;
    background-color: #58718f !important;
    background-size: auto 118% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    box-shadow: 0 14px 34px rgba(40, 34, 26, .12) !important;
  }
  .rh-gallery .pdp-splithero__media { background-color: #8197b4 !important; }
  .pdp-splithero__media::after { display: none !important; }
  .pdp-splithero__media .rh-form-product { object-fit: contain !important; }
  .rh-gallery__status { top: 13px !important; left: 14px !important; right: 14px !important; }
  .rh-gallery__next { right: 14px !important; width: 42px !important; height: 42px !important; }

  .pdp-splithero__info {
    display: flex !important;
    flex-direction: column;
    min-width: 0;
    padding: 20px 18px 22px !important;
    border-radius: 18px !important;
  }
  .pdp-splithero__info > .pdp-name { order: 1; }
  .pdp-splithero__info > .pdp-pills { order: 2; }
  .pdp-splithero__info > .pdp-price { order: 3; }
  .pdp-splithero__info > .pdp-offer { order: 4; }
  .pdp-splithero__info > .pdp-then { order: 5; }
  .pdp-splithero__info > .form-sel { order: 6; }
  .pdp-splithero__info > .pdp-cta { order: 7; }
  .pdp-splithero__info > .pdp-refundline { order: 8; }
  .pdp-splithero__info > .pdp-desc { order: 9; }
  .pdp-splithero__info > .pdp-select { order: 10; }
  .pdp-splithero__info > .pdp-ship { order: 11; }
  .pdp-splithero__info > .pdp-included { order: 12; }
  .pdp-splithero__info > .pdp-acc { order: 13; }
  .pdp-name {
    max-width: 100%;
    font-size: clamp(36px, 11.5vw, 46px) !important;
    line-height: .98 !important;
    overflow-wrap: anywhere;
  }
  .pdp-splithero__info .pdp-pills { margin-top: 10px !important; }
  .pdp-splithero__info .pdp-price { margin-top: 12px !important; }
  .pdp-splithero__info .pdp-offer { margin-top: 10px !important; }
  .pdp-splithero__info .pdp-then { margin-top: 7px !important; }
  .pdp-splithero__info .form-sel { margin-top: 13px !important; }
  .pdp-splithero__info .pdp-cta { margin-top: 14px !important; }
  .pdp-splithero__info .pdp-cta .btn {
    min-height: 50px !important;
    padding: 13px 18px !important;
  }
  .pdp-splithero__info .pdp-refundline {
    margin-top: 10px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
  .pdp-splithero__info .pdp-desc {
    margin-top: 18px !important;
    padding-top: 16px;
    border-top: 1px solid rgba(46, 42, 36, .12);
    font-size: 15px !important;
    line-height: 1.48 !important;
  }
  .rh-formthumbs { gap: 7px !important; }
  .rh-formthumb { width: 42px !important; height: 42px !important; }
  .rh-formname { margin: 6px 0 0 !important; font-size: 20px !important; }
  .form-cap { margin-top: 5px !important; font-size: 13px !important; line-height: 1.4 !important; }

  /* Start-your-visit page: show the beginning of the choice flow promptly. */
  .chooser-hero { padding: 78px 12px 12px !important; }
  .chooser-hero__inner {
    min-width: 0;
    overflow: hidden;
  }
  .chooser-hero__copy {
    min-width: 0;
    padding: 25px 20px 22px !important;
  }
  .chooser-kicker { margin-bottom: 11px !important; }
  .chooser-title {
    max-width: 100%;
    font-size: clamp(40px, 11.5vw, 47px) !important;
    line-height: .96 !important;
    overflow-wrap: anywhere;
  }
  .chooser-lede {
    margin-top: 15px !important;
    font-size: 15px !important;
    line-height: 1.48 !important;
  }
  .chooser-hero__cta { margin-top: 18px !important; }
  .chooser-hero__approval {
    margin-top: 10px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
  }
  .chooser-hero__visual {
    width: 100%;
    min-width: 0;
    min-height: 236px !important;
    padding: 16px 16px 14px !important;
    overflow: hidden;
  }
  .chooser-hero__visual::before { top: 8px !important; right: -8px !important; font-size: 132px !important; }
  .chooser-hero__products { min-height: 166px !important; }
  .chooser-hero__product--tirz { height: 133px !important; left: 10% !important; bottom: 9px !important; }
  .chooser-hero__product--nad { height: 119px !important; left: 39% !important; bottom: 21px !important; }
  .chooser-hero__product--ghk { height: 145px !important; right: 7% !important; bottom: 4px !important; }
  .chooser-path {
    min-width: 0;
    gap: 4px !important;
    padding-top: 10px !important;
    font-size: 9.5px !important;
    letter-spacing: .05em !important;
  }
  .chooser-goal-grid { padding-right: 56px !important; }

  /* Secondary/legal copy must wrap and remain readable in either language. */
  .hero-note,
  .closing-cta__trust { white-space: normal !important; }
  .closing-cta__trust { font-size: 10px !important; line-height: 1.45 !important; }
  .brand-foot__links { font-size: 10px !important; line-height: 1.45 !important; }
  .brand-foot__copy { font-size: 11px !important; }
}

/* Keep the existing homepage video, typewriter, and buttons unchanged; only
   prevent the animated phrase itself from clipping on narrow hardware. */
@media (max-width: 400px) {
  .hero-wrapper .type-hero.hero-hero {
    width: 100%;
    max-width: 100%;
    font-size: clamp(30px, 8.8vw, 35px) !important;
    white-space: nowrap;
  }

  /* Spanish phrases are longer than their English counterparts. Keep the
     typewriter on one line without clipping either edge of an iPhone mini. */
  html[lang="es-US"] .hero-wrapper .type-hero.hero-hero {
    font-size: clamp(23px, 6.5vw, 25px) !important;
    letter-spacing: -0.03em;
  }
}

@media (max-width: 340px) {
  .bb-nav__brand,
  .bb-nav.is-scrolled .bb-nav__brand { font-size: 19px !important; }
  .hub-hero.hub-hero--media,
  .sr-page .hub-hero.hub-hero--media,
  .wlh-page .hub-hero.hub-hero--media,
  .el-page .hub-hero.hub-hero--media { padding-inline: 16px !important; }
  .hub-hero--media .hub-hero__title,
  .sr-page .hub-hero__title { font-size: 40px !important; }
  .wh-hero__actions .wh-btn,
  .sr-hero__actions .sr-btn { font-size: 9.5px !important; }
  .pdp-splithero__info { padding-inline: 16px !important; }
  .pdp-splithero__info > .pdp-cta { order: 6; }
  .pdp-splithero__info > .form-sel { order: 7; }
  .pdp-splithero__info .pdp-cta { margin-top: 11px !important; }
  .rh-gallery,
  .pdp-splithero__media,
  .rh-gallery .pdp-splithero__media {
    height: 168px !important;
    min-height: 168px !important;
    max-height: 168px !important;
  }
  .pdp-splithero__media,
  .rh-gallery .pdp-splithero__media { background-size: auto 132% !important; }
  .chooser-hero__copy { padding: 22px 18px 19px !important; }
  .chooser-title { font-size: 36px !important; }
  .chooser-lede { font-size: 14px !important; }
  .chooser-hero__visual {
    min-height: 200px !important;
    padding-top: 10px !important;
  }
  .chooser-hero__products { min-height: 136px !important; }
  .chooser-hero__product--tirz { height: 112px !important; }
  .chooser-hero__product--nad { height: 100px !important; }
  .chooser-hero__product--ghk { height: 122px !important; }
}

/* Short phones need the account and conversion actions visible without a
   mystery scroll inside the open navigation drawer. */
@media (max-width: 700px) and (max-height: 620px) {
  .mobile-menu__panel {
    padding-top: 12px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .mobile-menu__head { padding-bottom: 8px !important; }
  .mobile-menu__nav { gap: 2px !important; }
  .mobile-menu__group > summary,
  .mobile-menu__nav > a {
    min-height: 54px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  .mobile-menu__group[open] .mobile-menu__links { padding-bottom: 4px !important; }
  .mobile-menu__links a { min-height: 44px !important; }
  .mobile-menu__foot {
    gap: 8px !important;
    padding-top: 8px !important;
  }
  .mobile-menu__foot .btn { min-height: 46px !important; }
}

/* --------------------------------------------------------------------------
   Mobile editorial-density pass

   The premium desktop pages intentionally carry generous photography and
   educational detail. On a phone the same composition turned each hub into a
   8,000–10,000px document. These rules keep every substantive section while
   changing secondary information into compact, clearly swipeable stories.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  /* Homepage: preserve the hero itself, then tighten the reading rhythm. */
  .manifesto.manifesto {
    padding: 14px 12px 8px !important;
  }
  .manifesto-frame {
    border-radius: 20px !important;
  }
  .manifesto-heading {
    padding: 28px 22px 8px !important;
  }
  .manifesto-title {
    font-size: clamp(40px, 12vw, 50px) !important;
    line-height: .96 !important;
  }
  .manifesto-copy {
    padding: 12px 22px 26px !important;
  }
  .manifesto-body {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
  .manifesto-frame .cbar {
    min-height: 52px;
    padding-right: 38px;
  }

  .cat-scroll {
    gap: 12px !important;
    padding: 12px 12px 34px !important;
  }
  .cat-panel {
    border-radius: 20px !important;
  }
  .cat-panel__inner,
  .cat-panel--flip .cat-panel__inner {
    min-height: 0 !important;
    padding: 58px 18px 22px !important;
  }
  .cat-panel__top {
    margin-bottom: 18px !important;
  }
  .cat-panel__title {
    font-size: clamp(40px, 11.5vw, 48px) !important;
    line-height: .96 !important;
  }
  .cat-panel__desc {
    margin-top: 12px !important;
    font-size: 14.5px !important;
    line-height: 1.48 !important;
  }
  .cat-panel__explore {
    margin-top: 14px !important;
  }
  .cat-panel__cards {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }
  .catcard {
    display: grid !important;
    grid-template-columns: 86px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 14px !important;
    row-gap: 8px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 164px !important;
    padding: 14px !important;
    border-radius: 18px !important;
    scroll-snap-align: none !important;
  }
  .catcard__stage {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: 86px !important;
    height: 126px !important;
  }
  .catcard__media {
    height: 116px !important;
  }
  .catcard__info {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    margin-top: 0 !important;
  }
  .catcard__name {
    font-size: 22px !important;
    margin: 0 !important;
  }
  .catcard__tag {
    margin: 6px 0 0 !important;
    font-size: 9.5px !important;
    line-height: 1.35 !important;
  }
  .catcard__cta {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 2px !important;
    min-width: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .catcard__cta .catcard__btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 10px 12px !important;
    font-size: 11px !important;
  }
  .catcard__cta .catcard__btn--ghost {
    min-height: 34px !important;
    padding-block: 7px !important;
    border: 0 !important;
  }

  .process {
    padding: 58px 20px !important;
  }
  .process__intro {
    margin-bottom: 34px !important;
  }
  .process__steps {
    gap: 22px !important;
  }
  .process__step {
    grid-template-columns: 46px 1fr !important;
    gap: 14px !important;
  }
  .process__num {
    width: 46px !important;
    height: 46px !important;
  }
  .process__step-title {
    margin-top: 0 !important;
    font-size: 21px !important;
  }
  .process__step-copy {
    font-size: 13.5px !important;
    line-height: 1.45 !important;
  }
  .process__cta {
    margin-top: 34px !important;
  }

  .jband {
    padding-top: 58px !important;
    padding-bottom: 58px !important;
  }
  .jband__head {
    margin-bottom: 26px !important;
  }
  .jband__title {
    font-size: clamp(38px, 11vw, 48px) !important;
  }
  .jband__list {
    gap: 12px !important;
    padding-right: 48px !important;
  }

  /* Shared hub introduction: one image, one idea, one row of outcomes. */
  .sr-feature,
  .wlh-page .sr-feature {
    margin: 18px 12px 0 !important;
    border-radius: 20px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    }
  .sr-feature__media,
  .wlh-page .sr-feature__media {
    width: 100% !important;
    min-width: 0 !important;
    height: 230px !important;
    min-height: 230px !important;
    background-position: center !important;
  }
  .sr-feature__copy,
  .wlh-page .sr-feature__copy {
    width: 100% !important;
    min-width: 0 !important;
    padding: 30px 22px 32px !important;
  }
  .sr-feature h2,
  .sr-section h2,
  .sr-reassure h2 {
    margin-bottom: 18px !important;
    font-size: clamp(36px, 10.5vw, 43px) !important;
    line-height: 1 !important;
  }
  .sr-feature p,
  .sr-intro,
  .sr-care__head p {
    font-size: 15.5px !important;
    line-height: 1.5 !important;
  }
  .sr-pills {
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin: 18px -22px 0 0 !important;
    padding: 0 34px 5px 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .sr-pills::-webkit-scrollbar { display: none; }
  .sr-pills span {
    flex: 0 0 auto;
    padding: 10px 14px !important;
    scroll-snap-align: start;
    font-size: 12px !important;
  }

  .sr-section {
    padding: 54px 20px !important;
  }
  .sr-intro {
    margin: -2px 0 28px !important;
  }

  /* Secondary explanation stays available without becoming two full screens. */
  .sr-duo {
    display: flex !important;
    gap: 12px !important;
    margin-right: -20px;
    padding-right: 42px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .sr-duo::-webkit-scrollbar { display: none; }
  .sr-duo article {
    flex: 0 0 min(82vw, 330px);
    width: min(82vw, 330px);
    padding: 25px 22px !important;
    border-radius: 20px !important;
    scroll-snap-align: start;
  }
  .sr-duo h3 {
    margin: 18px 0 10px !important;
    font-size: 30px !important;
  }
  .sr-duo p {
    font-size: 14.5px !important;
    line-height: 1.48 !important;
  }
  .sr-duo__image {
    height: 190px !important;
    margin: 22px -22px -25px !important;
  }

  /* Treatment is the focal point; product remains visible without a full-screen stage. */
  .sr-section--blue {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  .sr-picker__copy,
  .wlh-page .sr-picker__copy {
    padding: 27px 20px !important;
  }
  .sr-picker__copy h3 {
    font-size: 38px !important;
    line-height: 1 !important;
  }
  .sr-picker__copy p {
    font-size: 14.5px !important;
    line-height: 1.48 !important;
  }
  .sr-facts {
    flex-wrap: nowrap !important;
    gap: 7px !important;
    margin-top: 17px !important;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .sr-facts::-webkit-scrollbar { display: none; }
  .sr-facts span {
    flex: 0 0 auto;
    padding: 9px 12px !important;
    font-size: 11px !important;
  }
  .sr-product-stage,
  .wlh-page .sr-product-stage {
    height: 198px !important;
    min-height: 198px !important;
  }
  .sr-product {
    max-height: 176px !important;
  }
  .sr-product--tube {
    max-height: 184px !important;
  }

  /* Four care steps become one deliberate, swipeable row. */
  .sr-care {
    display: block !important;
  }
  .sr-care__head {
    position: static !important;
  }
  .sr-care__head::after {
    height: 220px !important;
    margin-top: 24px !important;
    border-radius: 20px !important;
  }
  .sr-care__grid {
    display: flex !important;
    gap: 10px !important;
    margin: 20px -20px 0 0;
    padding-right: 42px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .sr-care__grid::-webkit-scrollbar { display: none; }
  .sr-care__grid article {
    flex: 0 0 min(78vw, 300px);
    width: min(78vw, 300px);
    min-height: 220px !important;
    padding: 24px 22px !important;
    border-radius: 19px !important;
    scroll-snap-align: start;
  }
  .sr-care__grid b {
    font-size: 32px !important;
  }
  .sr-care__grid h3 {
    margin: 30px 0 9px !important;
    font-size: 24px !important;
  }
  .sr-care__grid p {
    font-size: 13.5px !important;
    line-height: 1.45 !important;
  }

  /* This banner repeats the treatment CTA immediately above and below it. */
  .sr-reassure {
    display: none !important;
  }
  .sr-faq {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
  .sr-faq summary {
    min-height: 54px;
    padding: 17px 36px 17px 0 !important;
    font-size: 16px !important;
  }
  .sr-faq details p {
    margin-bottom: 18px !important;
    font-size: 14.5px !important;
    line-height: 1.52 !important;
  }

  /* Women's Health: keep the lifecycle and care detail, but present each as
     a focused horizontal story rather than eight stacked cards. */
  .wh-symptom-feature__media {
    width: 100% !important;
    min-width: 0 !important;
    height: 250px !important;
    min-height: 250px !important;
  }
  .wh-symptom-feature {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 0 !important;
  }
  .wh-symptom-feature__copy {
    width: 100% !important;
    min-width: 0 !important;
    padding: 28px 20px 30px !important;
  }
  .wh-title {
    font-size: clamp(34px, 10vw, 40px) !important;
  }
  .wh-intro {
    margin-top: 13px !important;
    font-size: 15.5px !important;
    line-height: 1.5 !important;
  }
  .wh-symptoms {
    flex-wrap: nowrap !important;
    gap: 7px !important;
    margin: 18px -20px 0 0 !important;
    padding-right: 34px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .wh-symptoms::-webkit-scrollbar { display: none; }
  .wh-symptoms span {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .wh-timeline {
    display: flex !important;
    gap: 10px !important;
    margin: 25px -20px 0 0 !important;
    padding: 0 42px 4px 0 !important;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .wh-timeline::-webkit-scrollbar { display: none; }
  .wh-timeline::before,
  .wh-phase::before { display: none !important; }
  .wh-phase {
    flex: 0 0 min(79vw, 295px);
    width: min(79vw, 295px);
    min-height: 230px;
    padding: 22px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.56) !important;
    scroll-snap-align: start;
  }
  .wh-phase--focus {
    background: #fff !important;
  }

  .wh-section,
  .hub-sec--paper,
  .who-band {
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }
  .wh-section--explorer {
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }
  .wh-section--explorer .wh-picker__stage {
    height: 210px !important;
    min-height: 210px !important;
  }
  .wh-section--explorer .wh-picker__product,
  .wh-section--explorer .wh-picker__product--system {
    height: 200px !important;
    max-height: 200px !important;
  }
  .wh-picker__copy {
    padding: 27px 20px !important;
  }
  .wh-picker__content h3 {
    font-size: 36px !important;
  }
  .wh-picker__content p {
    font-size: 14.5px !important;
    line-height: 1.48 !important;
  }
  .wh-picker__facts {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .wh-picker__facts::-webkit-scrollbar { display: none; }
  .wh-picker__facts span { flex: 0 0 auto; }

  .wh-care-layout__image {
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
  }
  .wh-process {
    display: flex !important;
    gap: 10px !important;
    margin: 20px -20px 0 0 !important;
    padding-right: 42px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .wh-process::-webkit-scrollbar { display: none; }
  .wh-step {
    flex: 0 0 min(78vw, 295px);
    width: min(78vw, 295px);
    min-height: 220px;
    padding: 23px 21px !important;
    scroll-snap-align: start;
  }
  .wh-step h3 {
    margin-top: 28px !important;
    font-size: 24px !important;
  }
  .wh-step p {
    font-size: 13.5px !important;
    line-height: 1.46 !important;
  }
  .wh-reassurance {
    display: none !important;
  }
  .wh-stats {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  .wh-stats__card {
    padding: 28px 20px !important;
  }
  .wh-stats__media {
    height: 220px !important;
    min-height: 220px !important;
    aspect-ratio: auto !important;
  }
  .wh-stats-band {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }
  .wh-stats-band article,
  .wh-stats-band article:first-child {
    min-width: 0;
    padding: 16px 9px !important;
    border-top: 0 !important;
    border-left: 1px solid rgba(46,42,36,.12) !important;
  }
  .wh-stats-band article:first-child {
    border-left: 0 !important;
  }
  .wh-stats-band strong {
    font-size: clamp(30px, 9vw, 38px) !important;
  }
  .wh-stats-band span {
    font-size: 10.5px !important;
    line-height: 1.35 !important;
  }
  .wh-faq summary {
    min-height: 54px;
    padding-top: 17px !important;
    padding-bottom: 17px !important;
    font-size: 16px !important;
  }
}

/* Final homepage mobile composition. Kept last so it wins over the older
   compatibility block above while the source pipeline is being reconciled. */
@media (max-width: 700px) {
  .manifesto.manifesto { padding: 14px 12px 8px !important; }
  .manifesto-frame {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    border-radius: 22px !important;
  }
  .manifesto-inner { display: block !important; min-width: 0; }
  .manifesto-heading {
    display: block !important;
    min-height: 0 !important;
    padding: 28px 24px 12px !important;
  }
  .manifesto-title {
    max-width: none !important;
    margin: 0 !important;
    font-size: clamp(38px, 11vw, 46px) !important;
    line-height: .98 !important;
    text-align: left !important;
  }
  .manifesto-copy {
    display: block !important;
    min-height: 0 !important;
    padding: 0 24px 27px !important;
    border-left: 0 !important;
    background: transparent !important;
  }
  .manifesto-body {
    max-width: 35ch !important;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.52 !important;
    letter-spacing: -.006em !important;
  }
  .manifesto-frame .cbar {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-height: 50px !important;
    padding: 0 !important;
    overflow: hidden !important;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent) !important;
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent) !important;
  }
  .manifesto-frame .cbar__track {
    display: flex !important;
    width: max-content !important;
    min-width: 0 !important;
    animation: premium-ticker 30s linear infinite !important;
    animation-play-state: running !important;
    will-change: transform;
  }
  .manifesto-frame .cbar__item,
  .manifesto-frame .cbar__item[aria-hidden="true"] {
    display: inline-flex !important;
    min-height: 50px !important;
    padding: 0 18px !important;
    font-size: 11px !important;
  }
  .manifesto-frame .cbar__item b { font-size: 10px !important; }
  .manifesto-frame .cbar__sep,
  .manifesto-frame .cbar__item[aria-hidden="true"] + .cbar__sep {
    display: inline-flex !important;
    padding: 0 8px !important;
  }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .manifesto-frame .cbar {
    overflow-x: auto !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .manifesto-frame .cbar__track { animation: none !important; }
  .manifesto-frame .cbar__item[aria-hidden="true"],
  .manifesto-frame .cbar__item[aria-hidden="true"] + .cbar__sep { display: none !important; }
}

/* --------------------------------------------------------------------------
   Mobile PDP reading rhythm

   Keep the approved education and safety copy, but stop giving every lower-
   page item the visual weight of a desktop feature. Photography becomes a
   concise chapter opener; benefits and recommendations become legible rails;
   FAQs, related treatments and editorial links stay available without turning
   the page into an eight-thousand-pixel stack.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  /* Shared lower-page type and spacing. Hero selectors intentionally omitted. */
  .wl-template,
  .wl-faq,
  .sec,
  .jband {
    margin-top: 12px !important;
  }
  .wl-label,
  .rh-blbl,
  .sec__lbl,
  .jband__lbl {
    margin-bottom: 10px !important;
    font-size: 10px !important;
    letter-spacing: .18em !important;
  }
  .wl-heading,
  .rh-block .rh-h,
  .rh-faqcard .rh-h,
  .rh-sec .rh-h,
  .rh-close .rh-h,
  .sec__h,
  .jband__title {
    font-size: clamp(29px, 8.8vw, 35px) !important;
    line-height: 1.02 !important;
  }
  .wl-heading,
  .rh-block .rh-h,
  .rh-faqcard .rh-h,
  .rh-sec .rh-h,
  .rh-close .rh-h,
  .sec__h,
  .jband__title {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Pricing stays complete, but the three plans become one obvious swipe row. */
  .wl-pricing {
    display: block !important;
    margin: 8px 12px 0 !important;
    padding: 28px 20px 24px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: rgba(244, 240, 232, .78) !important;
  }
  .wl-pricing__copy {
    max-width: 34em;
    margin-top: 10px !important;
    font-size: 14px !important;
    line-height: 1.48 !important;
  }
  .wl-pricing__plans {
    display: flex !important;
    gap: 9px !important;
    margin: 19px -20px 0 !important;
    padding: 0 48px 7px 20px !important;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .wl-pricing__plans::-webkit-scrollbar { display: none; }
  .wl-price-option {
    flex: 0 0 min(72vw, 270px) !important;
    width: min(72vw, 270px) !important;
    min-height: 126px !important;
    padding: 18px !important;
    scroll-snap-align: start;
  }
  .wl-price-option strong { font-size: 28px !important; }
  .wl-pricing__note {
    flex: 0 0 100%;
    margin: 8px 20px 0 0 !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
  }

  /* Standard PDP chapters: one compact visual joined to one concise card. */
  .wl-template {
    border-radius: 18px !important;
    overflow: hidden;
  }
  .wl-block,
  .wl-block--reverse {
    gap: 0 !important;
    background: #f4f0e8;
  }
  .wl-block--reverse .wl-media { order: 1 !important; }
  .wl-block--reverse .wl-card { order: 2 !important; }
  .wl-media {
    width: 100% !important;
    height: 200px !important;
    min-height: 200px !important;
    border-radius: 0 !important;
  }
  .wl-card {
    padding: 26px 20px 28px !important;
    border-radius: 0 !important;
  }
  .wl-copy {
    margin-top: 12px !important;
    margin-bottom: 0 !important;
    padding-top: 12px;
    border-top: 1px solid rgba(46, 42, 36, .1);
    font-size: 14px !important;
    line-height: 1.46 !important;
  }
  .wl-heading + .wl-copy { border-top: 0; padding-top: 0; }

  /* Benefits read as four editorial cards instead of four stacked essays. */
  .wl-benefits,
  .rh-benlist {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 9px !important;
    margin: 19px -20px 0 0 !important;
    padding: 0 42px 7px 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .wl-benefits::-webkit-scrollbar,
  .rh-benlist::-webkit-scrollbar { display: none; }
  .wl-benefit,
  .rh-benitem {
    flex: 0 0 min(72vw, 265px) !important;
    width: min(72vw, 265px) !important;
    min-height: 178px !important;
    padding: 17px 16px !important;
    border-radius: 16px !important;
    scroll-snap-align: start;
  }
  .wl-benefit::before,
  .rh-benitem::before { margin-bottom: 11px !important; }
  .wl-benefit h3,
  .rh-benitem h3 {
    font-size: 20px !important;
    line-height: 1.08 !important;
  }
  .wl-benefit p,
  .rh-benitem p {
    margin-top: 7px !important;
    font-size: 13.5px !important;
    line-height: 1.43 !important;
  }

  /* Dosing remains an illustrated interaction, but no card needs 430px. */
  #how-to-take-it,
  .sec:has(.prod-grid),
  .pdp-close {
    padding: 28px 20px !important;
  }
  #how-to-take-it .sec__p,
  .pdp-close .sec__p {
    margin-top: 12px !important;
    font-size: 14px !important;
    line-height: 1.48 !important;
  }
  #how-to-take-it .howto { margin-top: 17px !important; }
  #how-to-take-it .cstep {
    flex-basis: min(78vw, 286px) !important;
    min-height: 360px !important;
  }
  #how-to-take-it .flip,
  #how-to-take-it .flip__face { min-height: 360px !important; }
  #how-to-take-it .flip__front .img {
    height: 212px !important;
    min-height: 212px !important;
  }
  #how-to-take-it .flip__front .cap {
    min-height: 128px !important;
    padding: 17px !important;
  }
  #how-to-take-it .cstep__title { font-size: 21px !important; }
  #how-to-take-it .cstep__text {
    font-size: 13.5px !important;
    line-height: 1.42 !important;
  }
  #how-to-take-it .cnav { margin-top: 13px !important; }

  /* Questions stay closed by default and scan like a polished index. */
  .wl-faq,
  .rh-faqcard {
    padding: 29px 20px 25px !important;
    border-radius: 18px !important;
  }
  .wl-faq__sub,
  .rh-faqcard .rh-faqsub {
    margin: 8px 0 17px !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
  }
  .wl-faq .acc-head,
  .rh-faqcard .acc-head {
    min-height: 52px;
    padding: 15px 0 !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
  }
  .wl-faq .acc-body p,
  .rh-faqcard .acc-body p {
    padding-bottom: 17px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .rh-faqcard .rh-offlabel {
    margin-top: 18px !important;
    padding-top: 16px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  /* Related treatments become a single-row shelf with the next card peeking. */
  .sec:has(.prod-grid) .prod-grid {
    display: flex !important;
    gap: 10px !important;
    margin: 19px -20px 0 !important;
    padding: 0 44px 7px 20px !important;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .sec:has(.prod-grid) .prod-grid::-webkit-scrollbar { display: none; }
  .sec:has(.prod-grid) .prod-card {
    flex: 0 0 min(79vw, 292px) !important;
    width: min(79vw, 292px) !important;
    min-height: 330px !important;
    border-radius: 18px !important;
    scroll-snap-align: start;
  }
  .sec:has(.prod-grid) .prod-card__body {
    max-width: 86% !important;
    padding: 20px !important;
  }
  .sec:has(.prod-grid) .prod-card__name { font-size: 26px !important; }
  .sec:has(.prod-grid) .prod-card__cta { gap: 7px !important; }
  .sec:has(.prod-grid) .prod-btn {
    min-height: 44px;
    padding: 11px 14px !important;
    font-size: 11px !important;
  }

  /* Editorial cards use the same compact shelf language. */
  .jband {
    padding: 29px 20px 25px !important;
  }
  .jband__head { margin-bottom: 18px !important; }
  .jband__list {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    margin-right: -20px;
    padding-right: 44px !important;
    overflow-x: auto !important;
  }
  .jpost,
  .jpost:first-child,
  .jpost:nth-child(2),
  .jpost:not(:first-child) {
    flex: 0 0 min(79vw, 292px) !important;
    width: min(79vw, 292px) !important;
    min-height: 310px !important;
    background-size: cover !important;
    scroll-snap-align: start;
  }
  .jpost:nth-child(2) .jpost__scrim {
    inset: 0 !important;
    height: auto !important;
    background: linear-gradient(180deg, rgba(20,26,34,.04) 20%, rgba(20,26,34,.78) 100%) !important;
  }
  .jpost:nth-child(2) .jpost__tag,
  .jpost:nth-child(2) .jpost__title,
  .jpost:nth-child(2) .jpost__arrow { color: #fff !important; }
  .jpost__title,
  .jpost:first-child .jpost__title,
  .jpost:nth-child(2) .jpost__title {
    left: 18px !important;
    right: 54px !important;
    bottom: 22px !important;
    font-size: 23px !important;
  }
  .jband__all {
    margin-top: 18px !important;
    min-height: 44px;
    align-items: center;
  }

  /* Women's-health PDPs use different markup but the same mobile grammar. */
  .rh-lower {
    padding: 14px 12px 24px !important;
    gap: 12px !important;
  }
  .rh-lower > .rh-block {
    gap: 0 !important;
    border-radius: 18px;
    overflow: hidden;
    background: #f4f0e8;
  }
  .rh-block--right .rh-media { order: 1 !important; }
  .rh-block--right .rh-card { order: 2 !important; }
  .rh-block .rh-media {
    width: 100% !important;
    height: 200px !important;
    min-height: 200px !important;
    border-radius: 0 !important;
  }
  .rh-block .rh-card {
    padding: 26px 20px 28px !important;
    border-radius: 0 !important;
  }
  .rh-block .rh-p {
    margin-top: 12px !important;
    margin-bottom: 0 !important;
    font-size: 14px !important;
    line-height: 1.46 !important;
  }
  #who-its-for.rh-block .rh-p + .rh-p {
    padding-top: 12px;
    border-top: 1px solid rgba(46, 42, 36, .1);
  }
  .rh-taglist {
    flex-wrap: nowrap !important;
    gap: 7px !important;
    margin: 18px -20px 0 0 !important;
    padding: 0 38px 6px 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .rh-taglist::-webkit-scrollbar { display: none; }
  .rh-taglist span {
    flex: 0 0 auto;
    min-height: 38px !important;
    padding: 8px 13px !important;
    font-size: 12px !important;
    scroll-snap-align: start;
  }
  .rh-sec { padding: 22px 0 7px !important; }
  .rh-pgrid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    margin: 19px -12px 0 0 !important;
    padding: 0 44px 7px 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .rh-pgrid::-webkit-scrollbar { display: none; }
  .rh-pcard {
    flex: 0 0 min(79vw, 292px) !important;
    width: min(79vw, 292px) !important;
    min-height: 310px !important;
    border-radius: 18px !important;
    scroll-snap-align: start;
  }
  .rh-pcard__vial { height: 105px !important; }
  .rh-pcard__body { padding: 20px !important; }
  .rh-pcard__body h3 { font-size: 26px !important; }
  .rh-pcard__cta { gap: 7px !important; }
  .rh-pbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 13px !important;
    font-size: 11px !important;
  }
  .rh-close {
    padding: 31px 20px !important;
    border-radius: 18px !important;
  }
  .rh-close .rh-p {
    margin-top: 12px !important;
    font-size: 14px !important;
    line-height: 1.48 !important;
  }
  .rh-close .rh-cta-btn {
    min-height: 48px;
    margin-top: 19px !important;
  }
  .pdp-disc {
    margin: 0 12px !important;
    padding: 20px 4px 84px !important;
  }
  .pdp-disc p {
    font-size: 11.5px !important;
    line-height: 1.5 !important;
  }
}