/* D2C MOBILE HEADER HOTFIX v4 — loaded LAST on every page */

@media (max-width: 767px) {
  html {
    scroll-padding-top: 84px !important;
  }

  body .site-header,
  body .site-header.is-scrolled,
  body .site-header--always-light,
  body .site-header--always-light.is-scrolled,
  body .global-header,
  body .global-header.is-scrolled,
  body.page-strength-training .slide-header,
  body.page-strength-training .slide-header.is-scrolled {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 82px !important;
    min-height: 82px !important;
    max-height: 82px !important;
    background: #fbf7f1 !important;
    color: #30271f !important;
    box-shadow: 0 5px 18px rgba(48, 35, 25, .08) !important;
    backdrop-filter: none !important;
    z-index: 9000 !important;
    overflow: visible !important;
  }

  body .site-header::after,
  body .global-header::after,
  body.page-strength-training .slide-header::after {
    background: rgba(185, 121, 49, .18) !important;
  }

  body .global-header__inner,
  body .site-header__inner,
  body.page-strength-training .slide-header .site-header__inner {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) 40px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
    height: 82px !important;
    min-height: 82px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    gap: 8px !important;
  }

  body .global-header__brand,
  body .site-header .brand,
  body .site-header.is-scrolled .brand,
  body .site-header--always-light .brand,
  body .site-header--always-light.is-scrolled .brand,
  body.page-strength-training .slide-header .brand,
  body.page-strength-training .slide-header.is-scrolled .brand {
    position: static !important;
    display: flex !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    justify-self: start !important;
    width: 74px !important;
    min-width: 74px !important;
    max-width: 74px !important;
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: visible !important;
  }

  body .global-header__brand img,
  body .site-header .brand img,
  body.page-strength-training .slide-header .brand img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: left center !important;
    filter: none !important;
  }

  /* Desktop nav and phone are never allowed in the mobile header. */
  body .global-header__nav,
  body .desktop-nav,
  body .global-header__phone,
  body .site-header__phone,
  body.page-strength-training .slide-header .desktop-nav,
  body.page-strength-training .slide-header .site-header__phone {
    display: none !important;
  }

  /* Keep the primary CTA in the SAME header row. */
  body .global-header__cta,
  body .site-header__cta,
  body.page-strength-training .slide-header .site-header__cta {
    position: static !important;
    display: inline-flex !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: end !important;
    width: min(37vw, 132px) !important;
    min-width: 112px !important;
    max-width: 132px !important;
    min-height: 43px !important;
    height: 43px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border-radius: 2px !important;
    font-size: 8.6px !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
    letter-spacing: .055em !important;
    text-align: center !important;
    white-space: normal !important;
    transform: none !important;
    z-index: 2 !important;
  }

  /* Hamburger stays at far right, vertically centered. */
  body .global-header .menu-toggle,
  body .site-header .menu-toggle,
  body.page-strength-training .slide-header .menu-toggle {
    position: static !important;
    display: inline-flex !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: end !important;
    align-self: center !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(169, 104, 67, .42) !important;
    border-radius: 50% !important;
    background: #fffaf4 !important;
    color: #7d4e2d !important;
    box-shadow: none !important;
    transform: none !important;
    z-index: 3 !important;
  }

  body .global-header .menu-toggle svg,
  body .site-header .menu-toggle svg,
  body.page-strength-training .slide-header .menu-toggle svg {
    display: block !important;
    width: 21px !important;
    height: 21px !important;
    margin: 0 !important;
    stroke: currentColor !important;
  }

  /* Mobile drawer: always above the header and easy to use. */
  body .mobile-menu {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(90vw, 390px) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 20px 18px 22px !important;
    background: #fffaf4 !important;
    color: #30271f !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    z-index: 10001 !important;
  }

  body .mobile-menu__top {
    margin-bottom: 14px !important;
  }

  body .mobile-menu nav {
    overflow: visible !important;
  }

  body .mobile-menu nav a.mobile-sub-link {
    min-height: 42px !important;
    padding: 9px 5px 9px 12px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  body .mobile-menu .mobile-nav-heading {
    padding-top: 14px !important;
  }

  body .mobile-menu__cta {
    display: inline-flex !important;
    width: 100% !important;
    min-height: 46px !important;
    margin: 18px 0 0 !important;
  }

  body .menu-scrim {
    z-index: 10000 !important;
  }

  body.menu-open {
    overflow: hidden !important;
  }

  /* Keep page content from hiding behind fixed header. */
  body .slide-hero,
  body .home-hero--image-bg {
    scroll-margin-top: 82px !important;
  }
}

/* Very narrow phones: preserve logo + hamburger; slightly tighten CTA. */
@media (max-width: 360px) {
  body .global-header__inner,
  body .site-header__inner,
  body.page-strength-training .slide-header .site-header__inner {
    grid-template-columns: 70px minmax(0, 1fr) 38px !important;
    padding-inline: 10px !important;
    gap: 6px !important;
  }

  body .global-header__brand,
  body .site-header .brand,
  body.page-strength-training .slide-header .brand {
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    height: 64px !important;
  }

  body .global-header__cta,
  body .site-header__cta,
  body.page-strength-training .slide-header .site-header__cta {
    width: min(36vw, 118px) !important;
    min-width: 104px !important;
    max-width: 118px !important;
    padding-inline: 7px !important;
    font-size: 7.9px !important;
    letter-spacing: .035em !important;
  }

  body .global-header .menu-toggle,
  body .site-header .menu-toggle,
  body.page-strength-training .slide-header .menu-toggle {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
  }
}

/* 320px and under: CTA is hidden rather than allowing a broken header. */
@media (max-width: 320px) {
  body .global-header__inner,
  body .site-header__inner,
  body.page-strength-training .slide-header .site-header__inner {
    grid-template-columns: 72px 1fr 40px !important;
  }

  body .global-header__cta,
  body .site-header__cta,
  body.page-strength-training .slide-header .site-header__cta {
    display: none !important;
  }
}