/* R87: shared mobile controls. The ID scopes overrides to the two public
   headers and wins over historical category rules without changing desktop. */
@media (max-width: 780px) {
  #cone-app-header :is(.langBtn, .themeToggle, .iconCircle--pro,
    .topbar__mobileQuickToggle, .categoryHeader__iconBtn) {
    box-sizing: border-box;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    flex-basis: 44px !important;
    flex-shrink: 0 !important;
    border-radius: 14px !important;
    touch-action: manipulation;
  }
  #cone-app-header :is(.brand--headerPro, .categoryHeader__brand) {
    min-height: 44px !important;
    display: flex;
    align-items: center;
  }
  #cone-app-header .topbar__authBtn--login {
    min-height: 44px !important;
    height: 44px !important;
  }
  #cone-app-header :is(.headerSearch__input, .categoryHeader__searchInput) {
    font-size: 16px !important;
  }
}

@media (max-width: 480px) {
  #cone-app-header :is(.topbar__right--pro, .categoryHeader__controls--icons) {
    gap: 3px !important;
    max-width: 100% !important;
  }
  body[data-mobile-header-expanded="open"] #cone-app-header .topbar__inner--pro {
    grid-template-areas: "brand brand" "actions actions" "mobilecat mobilecat" "search search" "center center" !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  body[data-mobile-header-expanded="open"] #cone-app-header .categoryHeader__inner {
    grid-template-areas: "brand brand" "controls controls" "search search" "nav nav" !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  body[data-mobile-header-expanded="open"] #cone-app-header :is(
    .topbar__right--pro, .categoryHeader__controls--icons
  ) {
    width: 100% !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    position: static !important;
  }
  body[data-mobile-header-expanded="open"] #cone-app-header :is(
    .topbar__inner--pro, .categoryHeader__inner
  ) { position: relative; }
  body[data-mobile-header-expanded="open"] #cone-app-header [data-mobile-header-toggle] {
    position: absolute !important;
    top: calc(7px + env(safe-area-inset-top, 0px)) !important;
    inset-inline-end: max(8px, env(safe-area-inset-right, 0px)) !important;
  }
  body[data-mobile-header-expanded="open"] #cone-app-header :is(
    .topbar__brandZone, .categoryHeader__brand
  ) { padding-inline-end: 56px !important; }
}

/* R88: visible header utilities and one authoritative mobile message entry. */
@media (max-width: 780px) {
  body[data-mobile-nav="visible"] #cone-app-header .iconCircle--chat,
  body[data-category="home"] #cone-app-header .iconCircle--chat {
    display: none !important;
  }
  #cone-app-header :is(.headerUtilityStack--language, .headerUtilityStack--theme,
    .categoryHeader__langMenu, .mobileHeaderSecondary) { display: flex !important; }
  #cone-app-header .categoryHeader__iconBtn--theme { display: inline-flex !important; }
  .homeV2DiscoveryDeck {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .homeV2MobileDiscovery { width: 100% !important; }
  .homeV2MobileSearch { display: block !important; width: 100% !important; }
  .homeV2MobileSearch .homeV2MobileSearch__field {
    display: block !important; position: relative !important; width: 100% !important;
  }
  #home-mobile-search {
    box-sizing: border-box !important; display: block !important;
    width: 100% !important; height: 54px !important; min-width: 0 !important;
    padding: 0 60px 0 16px !important; font-size: 16px !important;
    border: 1px solid rgba(172, 187, 207, .24) !important;
    border-radius: 16px !important; background: rgba(255, 255, 255, .045) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
  }
  .homeV2MobileSearch .homeV2MobileSearch__field > button {
    position: absolute !important; top: 5px !important; inset-inline-end: 5px !important;
    display: grid !important; place-items: center !important;
    width: 44px !important; height: 44px !important; min-height: 44px !important;
    padding: 0 !important; border: 0 !important; border-radius: 12px !important;
    color: #dce5f3 !important; background: transparent !important;
    box-shadow: none !important;
    cursor: pointer; touch-action: manipulation;
  }
  .homeV2MobileSearch .homeV2MobileSearch__field > button > svg {
    position: static !important; transform: none !important; width: 22px !important; height: 22px !important;
  }
  [data-theme="light"] #home-mobile-search { background: #fff !important; border-color: #c3cbd6 !important; }
  [data-theme="light"] .homeV2MobileSearch .homeV2MobileSearch__field > button { color: #53647b !important; }
}

/* R90: keep mobile overlays above their siblings and outside the nav scrollport.
   The ID specificity is intentional: category styles load after this sheet. */
@media (max-width: 780px) {
  .homeV2.homeV2--realisticV5 .homeV2CategoryDeck:has(.homeV2AllCategories[open]) {
    z-index: 9600 !important;
  }
  .homeV2.homeV2--realisticV5 .homeV2CategoryDeckHeader:has(.homeV2AllCategories[open]) {
    z-index: 2 !important;
  }
  .homeV2.homeV2--realisticV5 .homeV2CategoryDeck:has(.homeV2AllCategories[open]) .homeV2CategoryRailShell {
    visibility: hidden !important;
    pointer-events: none !important;
  }
  html.categoryMegaMenuOpen #cone-app-header :is(.categoryHeader__nav, .categoryHeader__inner, .megaRoot, .topbar__inner) {
    overflow: visible !important;
    transform: none !important;
    contain: none !important;
    clip-path: none !important;
  }
  html.categoryMegaMenuOpen #cone-app-header .categoryHeader__nav {
    z-index: 11003 !important;
  }
  body[data-category="vehicles"] .vehicle-filters-panel .vehicle-pill-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
  body[data-category="vehicles"] .vehicle-filters-panel .vehicle-pill-grid .vehicle-pill-toggle {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 48px !important;
    max-height: none !important;
    flex: initial !important;
    padding: 9px 8px !important;
    border-radius: 12px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    touch-action: manipulation;
  }
  body[data-category="vehicles"] .vehicle-filters-panel .vehicle-pill-toggle > span {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
    text-align: center !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere;
    text-overflow: clip !important;
  }
}
@media (max-width: 480px) {
  #cone-app-header :is(.topbar__inner--pro, .categoryHeader__inner) {
    padding-inline: 6px !important;
    column-gap: 4px !important;
    grid-template-columns: minmax(48px, 1fr) auto !important;
  }
  #cone-app-header :is(.brand--headerPro, .categoryHeader__brand) { font-size: 21px !important; }
  /* Focus/detail pages retain their header chat when there is no bottom dock.
     A second row keeps every control accessible without clipping the brand. */
  body[data-mobile-nav="hidden"]:not([data-category="home"]) #cone-app-header:has(.iconCircle--chat) .topbar__inner--pro {
    grid-template-areas: "brand brand" "actions actions" "mobilecat mobilecat" "search search" "center center" !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  body[data-mobile-nav="hidden"]:not([data-category="home"]) #cone-app-header:has(.iconCircle--chat) .categoryHeader__inner {
    grid-template-areas: "brand brand" "controls controls" "search search" "nav nav" !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  body[data-mobile-nav="hidden"]:not([data-category="home"]) #cone-app-header:has(.iconCircle--chat) :is(.topbar__right--pro, .categoryHeader__controls--icons) {
    width: 100% !important; justify-content: flex-end !important; flex-wrap: wrap !important;
  }
}
@media (max-width: 359px) {
  #cone-app-header :is(.topbar__right--pro, .categoryHeader__controls--icons) { gap: 2px !important; }
}

/* The same vector symbols render consistently on iOS, Android and desktop. */
#home-categories .homeV2CategoryIcon {
  display: grid !important; place-items: center !important;
  color: #ead9ae !important;
  background: linear-gradient(145deg, rgba(232, 204, 138, .10), rgba(232, 204, 138, .025)) !important;
  border: 1px solid rgba(232, 204, 138, .17) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045) !important;
}
#home-categories .homeCategoryGlyph { display: block; width: 34px !important; height: 34px !important; }
[data-theme="light"] #home-categories .homeV2CategoryIcon {
  color: #756038 !important; background: #f6f1e7 !important; border-color: #dfd3bb !important;
}
.coneMobileBottomNav .coneMobileBottomNav__chatIcon {
  display: block !important; position: relative; width: 24px; height: 24px; flex-shrink: 0;
}
.coneMobileBottomNav__chatIcon > svg { display: block; width: 24px; height: 24px; }
.coneMobileBottomNav .coneMobileBottomNav__chatIcon > .notifyBubble {
  position: absolute !important; top: -7px !important; right: -11px !important;
  display: grid !important; place-items: center; min-width: 19px; height: 19px;
  box-sizing: border-box; padding: 0 4px; border-radius: 999px;
  background: #ee447c; color: #fff; border: 2px solid #132338;
  font-size: 10px !important; font-weight: 800; line-height: 15px !important;
  white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .22);
}
.coneMobileBottomNav .coneMobileBottomNav__chatIcon > .notifyBubble.is-hidden { display: none !important; }