/* Approved froops mobile header and navigation. Desktop stays in the existing panel. */
#mega.fo-mega > .fo-mnav { display: none; }
@media (max-width: 960px) {
  body.compact > .header {
    display: grid; grid-template-columns: minmax(0,1fr) 96px minmax(0,1fr);
    gap: 0; align-items: center; height: 70px; padding: 7px 12px;
  }
  body.compact > .header > .logo { grid-column: 2; grid-row: 1; width: 96px; margin: 0; justify-self: center; }
  body.compact > .header > .logo img { display: block; width: 96px; max-height: 50px; object-fit: contain; }
  body.compact > .header > .main-nav { display: none; }
  body.compact > .header > .header-tools { grid-column: 1; grid-row: 1; justify-self: start; display: flex; gap: 0; margin: 0; }
  body.compact > .header > .header-tools > .icon-btn { display: flex; width: 36px; height: 44px; padding: 9px; flex: 0 0 36px; }
  body.compact > .header > .header-tools > .icon-btn svg { width: 18px; height: 18px; }
  body.compact > .header > .header-tools > .account-header-link,
  body.compact > .header > .header-tools > .search-form,
  body.compact > .header > .header-tools > .fo-languages { display: none; }
  body.compact > .header > .mobile-menu { display: flex; grid-column: 3; grid-row: 1; justify-self: end; width: 44px; height: 44px; padding: 12px; }
  body.compact > .header > .mobile-menu svg { width: 20px; height: 20px; }
  body.fo-mobile-menu-open { overflow: hidden; }
  #mega.fo-mega { position: fixed; inset: var(--fo-mnav-top, 102px) 0 auto; height: var(--fo-mnav-height, calc(100dvh - 102px)); max-height: none; width: 100%; margin: 0; padding: 0; background: #fff; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; box-shadow: none; z-index: 49; }
  #mega.fo-mega > .fo-nav-inner:not(.fo-mnav), #mega.fo-mega > .mega-close.icon-btn { display: none; }
  #mega.fo-mega > .fo-mnav { display: block; color: #172021; font: 400 16px/1.5 'Segoe UI',Arial,sans-serif; }
  #mega.fo-mega .fo-mnav [hidden] { display: none !important; }
  #mega.fo-mega .fo-mnav button, #mega.fo-mega .fo-mnav input { font-family: inherit; }
  #mega.fo-mega .fo-mnav button { cursor: pointer; background: transparent; color: inherit; border-radius: 0; }
  #mega.fo-mega .fo-mnav a { color: inherit; text-decoration: none; }
  #mega.fo-mega .fo-mnav-search { display: flex; align-items: center; margin: 20px 22px 10px; min-height: 50px; border: 1px solid #bec8c2; }
  #mega.fo-mega .fo-mnav-search > svg { flex: 0 0 17px; width: 17px; height: 17px; margin-left: 13px; fill: none; stroke: #646b6d; stroke-width: 1.5; }
  #mega.fo-mega .fo-mnav-search input { border: 0; box-shadow: none; background: transparent; width: 100%; min-width: 0; height: 48px; padding: 10px; color: #172021; font-size: 16px; }
  #mega.fo-mega .fo-mnav-search input::placeholder { color: #646b6d; font-size: 14px; opacity: 1; }
  #mega.fo-mega .fo-mnav-content { padding: 0 22px calc(22px + env(safe-area-inset-bottom,0px)); }
  #mega.fo-mega .fo-mnav-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; min-height: 79px; margin: 0; padding: 17px 0; border: 0; border-bottom: 1px solid #dfe3e4; text-align: left; }
  #mega.fo-mega .fo-mnav-row > span:first-child { min-width: 0; }
  #mega.fo-mega .fo-mnav-row strong { display: block; font: 650 19px/1.3 'Segoe UI',Arial,sans-serif; text-transform: uppercase; overflow-wrap: anywhere; }
  #mega.fo-mega .fo-mnav-row small { display: block; margin-top: 4px; color: #646b6d; font-size: 13px; line-height: 1.5; }
  #mega.fo-mega .fo-mnav-chevron { display: block; flex: 0 0 6px; width: 6px; height: 6px; margin-right: 5px; border-right: 1px solid #646b6d; border-top: 1px solid #646b6d; transform: rotate(45deg); }
  #mega.fo-mega .fo-mnav-shop strong { color: #14694f; }
  #mega.fo-mega .fo-mnav-shop .fo-mnav-chevron { transform: rotate(135deg); border-color: #14694f; }
  #mega.fo-mega .fo-mnav-shop[aria-expanded=true] .fo-mnav-chevron { transform: rotate(-45deg); }
  #mega.fo-mega .fo-mnav-sports { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0 16px; padding: 8px 0 10px; }
  #mega.fo-mega .fo-mnav-sports > button { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 0; border-bottom: 1px solid #dfe3e4; min-height: 46px; padding: 10px 0; text-align: left; font-size: 16px; font-weight: 650; }
  #mega.fo-mega .fo-mnav-utility { display: flex; flex-wrap: wrap; gap: 0 16px; margin-top: 22px; padding-top: 13px; border-top: 1px solid #dfe3e4; }
  #mega.fo-mega .fo-mnav-utility > a, #mega.fo-mega .fo-mnav-utility > button { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0; border: 0; font-size: 13px; color: #646b6d; }
  #mega.fo-mega .fo-mnav-utility svg, #mega.fo-mega .fo-mnav-language > svg { flex-shrink: 0; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
  #mega.fo-mega .fo-mnav-language { display: flex; align-items: flex-start; gap: 7px; margin-top: 4px; color: #646b6d; font-size: 13px; }
  #mega.fo-mega .fo-mnav-language > svg { margin-top: 14px; }
  #mega.fo-mega .fo-mnav-language .fo-languages { display: block; flex: 1; position: static; }
  #mega.fo-mega .fo-mnav-language summary { min-height: 44px; padding: 10px 0; justify-content: flex-start; border: 0; font-size: 13px; font-weight: 400; }
  #mega.fo-mega .fo-mnav-language .fo-languages nav { position: static; display: flex; flex-wrap: wrap; gap: 0 16px; width: auto; min-width: 0; padding: 0; border: 0; box-shadow: none; background: transparent; }
  #mega.fo-mega .fo-mnav-language .fo-languages nav a { padding: 10px 0; min-height: 44px; font-size: 13px; }
  #mega.fo-mega .fo-mnav-back, #mega.fo-mega .fo-mnav-explore { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 0; margin: 8px 0; border: 0; font-size: 14px; color: #14694f; text-align: left; }
  #mega.fo-mega .fo-mnav-path { color: #646b6d; font-size: 13px; margin: 14px 0; }
  #mega.fo-mega .fo-mnav h2 { margin: 18px 0 10px; font: 650 25px/1.3 'Segoe UI',Arial,sans-serif; text-transform: uppercase; overflow-wrap: anywhere; }
  #mega.fo-mega .fo-mnav-results .fo-mnav-row { min-height: 58px; }
  #mega.fo-mega .fo-mnav-results .fo-mnav-row strong { font-size: 16px; text-transform: none; }
  #mega.fo-mega .fo-mnav-empty { color: #646b6d; font-size: 15px; }
  #mega.fo-mega .fo-mnav :focus-visible { outline: 2px solid #14694f; outline-offset: 2px; }
  #mega.fo-mega .fo-mnav-search:focus-within { outline: 2px solid #14694f; outline-offset: 2px; }
  #mega.fo-mega .fo-mnav-search input:focus-visible { outline: 0; }
}
@media (max-width: 345px) {
  body.compact > .header { grid-template-columns: minmax(0,1fr) 80px minmax(0,1fr); padding-left: 8px; padding-right: 8px; }
  body.compact > .header > .logo, body.compact > .header > .logo img { width: 80px; }
  #mega.fo-mega .fo-mnav-content { padding-left: 18px; padding-right: 18px; }
  #mega.fo-mega .fo-mnav-search { margin-left: 18px; margin-right: 18px; }
}
