/* =====================================================================
   APD 181.0.0 — final iPhone discovery header shell
   Target: search pill first, category chips second, no APD logo/menu.
   ===================================================================== */
@media (max-width: 767px) {
  html body.apd181-mobile-home-shell {
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    background: #fff !important;
  }

  /* Hard reset the legacy mobile header state. */
  html body.apd181-mobile-home-shell #apd5-header.is-discovery-context,
  html body.apd181-mobile-home-shell #apd5-header.is-discovery-context.is-compact,
  html body.apd181-mobile-home-shell #apd5-header.is-discovery-context.is-search-expanded {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 7200 !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-bottom: 1px solid #ebebeb !important;
    background: rgba(255,255,255,.985) !important;
    box-shadow: 0 1px 0 rgba(0,0,0,.035) !important;
    transform: none !important;
    opacity: 1 !important;
    backdrop-filter: saturate(180%) blur(18px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(18px) !important;
  }

  /* Search row MUST be the first visible line. */
  html body.apd181-mobile-home-shell #apd5-header.is-discovery-context > .apd5-header-search-row,
  html body.apd181-mobile-home-shell #apd5-header.is-discovery-context.is-compact > .apd5-header-search-row,
  html body.apd181-mobile-home-shell #apd5-header.is-discovery-context.is-search-expanded > .apd5-header-search-row {
    order: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 22px 10px !important;
    display: block !important;
    position: relative !important;
    inset: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: transparent !important;
    pointer-events: auto !important;
  }

  html body.apd181-mobile-home-shell #apd5-header.is-discovery-context > .apd5-header-row,
  html body.apd181-mobile-home-shell #apd5-header.is-discovery-context.is-compact > .apd5-header-row,
  html body.apd181-mobile-home-shell #apd5-header.is-discovery-context.is-search-expanded > .apd5-header-row {
    order: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 0 12px !important;
    display: block !important;
    position: relative !important;
    inset: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: transparent !important;
  }

  /* Remove the legacy APD logo and hamburger row shown in the bad screenshot. */
  html body.apd181-mobile-home-shell #apd5-header.is-discovery-context .apd5-logo,
  html body.apd181-mobile-home-shell #apd5-header.is-discovery-context .apd5-header-actions,
  html body.apd181-mobile-home-shell #apd5-header.is-discovery-context .apd25-account-cluster,
  html body.apd181-mobile-home-shell #apd5-header.is-discovery-context .apd5-account-button {
    display: none !important;
  }

  /* Only the Airbnb-like mobile trigger remains in the search bar. */
  html body.apd181-mobile-home-shell #apd5-header.is-discovery-context #apd5-search {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    position: relative !important;
    inset: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html body.apd181-mobile-home-shell #apd5-header.is-discovery-context #apd5-search > .apd5-search-field,
  html body.apd181-mobile-home-shell #apd5-header.is-discovery-context #apd5-search > .apd5-search-separator,
  html body.apd181-mobile-home-shell #apd5-header.is-discovery-context #apd5-search > .apd5-search-submit,
  html body.apd181-mobile-home-shell #apd5-header.is-discovery-context #apd5-search > .apd5-search-panel {
    display: none !important;
  }

  html body.apd181-mobile-home-shell #apd5-header.is-discovery-context .apd10-mobile-search-trigger {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 58px !important;
    height: 58px !important;
    margin: 0 !important;
    padding: 0 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    position: relative !important;
    inset: auto !important;
    border: 1px solid #dddddd !important;
    border-radius: 999px !important;
    color: #222 !important;
    background: #fff !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.10) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    overflow: hidden !important;
  }

  html body.apd181-mobile-home-shell #apd5-header.is-discovery-context .apd10-mobile-search-trigger .apd5-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    display: block !important;
    color: #222 !important;
    stroke: currentColor !important;
    stroke-width: 2.2 !important;
  }

  html body.apd181-mobile-home-shell #apd5-header.is-discovery-context .apd10-mobile-search-trigger strong {
    display: block !important;
    margin: 0 !important;
    color: #222 !important;
    font-size: 17px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    letter-spacing: -.2px !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Category rail below the search pill. */
  html body.apd181-mobile-home-shell #apd5-header.is-discovery-context .apd5-main-nav,
  html body.apd181-mobile-home-shell.apd15-scroll-down #apd5-header.is-discovery-context .apd5-main-nav {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 50px !important;
    max-height: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 2px 22px 3px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    position: relative !important;
    inset: auto !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity !important;
    scroll-padding-inline: 22px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    background: transparent !important;
  }

  html body.apd181-mobile-home-shell #apd5-header.is-discovery-context .apd5-main-nav::-webkit-scrollbar {
    display: none !important;
  }

  html body.apd181-mobile-home-shell #apd5-header.is-discovery-context .apd5-main-nav > a {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    min-height: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    position: relative !important;
    inset: auto !important;
    border: 1px solid #dddddd !important;
    border-radius: 999px !important;
    color: #222 !important;
    background: linear-gradient(180deg,#fff 0%,#fbfbfb 100%) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.14), 0 1px 2px rgba(0,0,0,.08) !important;
    text-decoration: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    scroll-snap-align: start !important;
  }

  html body.apd181-mobile-home-shell #apd5-header.is-discovery-context .apd5-main-nav > a::after {
    display: none !important;
  }

  html body.apd181-mobile-home-shell #apd5-header.is-discovery-context .apd5-main-nav > a > span {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.apd181-mobile-home-shell #apd5-header.is-discovery-context .apd5-main-nav .apd15-nav-svg,
  html body.apd181-mobile-home-shell #apd5-header.is-discovery-context .apd5-main-nav svg,
  html body.apd181-mobile-home-shell #apd5-header.is-discovery-context .apd5-main-nav img {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    display: block !important;
  }

  html body.apd181-mobile-home-shell #apd5-header.is-discovery-context .apd5-main-nav > a strong {
    display: block !important;
    color: #222 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    letter-spacing: -.15px !important;
    white-space: nowrap !important;
  }

  html body.apd181-mobile-home-shell #apd5-header.is-discovery-context .apd5-main-nav > a.is-active,
  html body.apd181-mobile-home-shell #apd5-header.is-discovery-context .apd5-main-nav > a[aria-current="page"] {
    border-color: #d0d0d0 !important;
    background: linear-gradient(180deg,#f7f7f7 0%,#fff 88%) !important;
    box-shadow: inset 0 5px 10px rgba(0,0,0,.17), inset 0 -1px 0 rgba(255,255,255,.96), 0 1px 2px rgba(0,0,0,.08) !important;
    transform: translateY(1px) !important;
  }

  html body.apd181-mobile-home-shell #apd5-header.is-discovery-context .apd5-main-nav > a.is-active strong,
  html body.apd181-mobile-home-shell #apd5-header.is-discovery-context .apd5-main-nav > a[aria-current="page"] strong {
    font-weight: 600 !important;
  }

  /* Legacy scroll classes are not allowed to collapse the top controls. */
  html body.apd181-mobile-home-shell.apd15-scroll-down #apd5-header.is-discovery-context,
  html body.apd181-mobile-home-shell.apd15-scroll-down #apd5-header.is-discovery-context > .apd5-header-row,
  html body.apd181-mobile-home-shell.apd15-scroll-down #apd5-header.is-discovery-context > .apd5-header-search-row,
  html body.apd181-mobile-home-shell.apd15-scroll-down #apd5-header.is-discovery-context .apd10-mobile-search-trigger {
    max-height: none !important;
    min-height: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  html body.apd181-mobile-home-shell.apd15-scroll-down #apd5-header.is-discovery-context .apd10-mobile-search-trigger {
    min-height: 58px !important;
    height: 58px !important;
  }

  /* Main catalogue starts immediately below the fixed discovery shell. */
  html body.apd181-mobile-home-shell .apd5-main,
  html body.apd181-mobile-home-shell .apd5-main.apd5-catalog-main {
    padding-top: 18px !important;
  }

  /* Bottom nav: visible at top/upward scroll, hidden while scrolling down. */
  html body.apd181-mobile-home-shell .apd10-mobile-nav {
    transition: transform .24s ease, opacity .18s ease !important;
    will-change: transform, opacity !important;
  }

  html body.apd181-mobile-home-shell.apd181-bottom-nav-hidden:not(.apd5-search-open):not(.apd5-modal-open):not(.apd15-favorites-open) .apd10-mobile-nav {
    transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px))) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}
