/* Mobile sizing: DESIGN-RULES.md rules 1 (tap targets) and 2 (text size).
   Applies under 860 px wide (the bottom-nav breakpoint) only. Width alone decides: the pointer is not tested, so a
   touch laptop wider than 860 px keeps the desktop sizing, and headless test browsers, which always report a coarse
   pointer, render desktop widths unchanged. Linked LAST in index.html, so it overrides by selector; the other stylesheets are
   unchanged. Every choice is listed, with before and after sizes, in docs/MOBILE-SIZING-AUDIT.md. Measured by
   scripts/measure-mobile.js. Prefix: no new class names are added. */
@media (max-width: 859px) {

  /* ---------- Rule 1: tap targets ---------- */

  /* Other buttons, summaries and form fields are at least 44 px tall: visible growth. The list is wrapped in :where(),
     which gives it zero specificity, so every class rule (.btn, .btn-primary, .chip, ...) still wins over it. Excluded
     here because they have their own sizing: icon buttons and save toggles (invisible hit areas below), inline text
     buttons (hit areas below), the view toggles (min-width below) and the map markers. */
  :where(button:not(.save-toggle):not(.icon-btn):not(.location-chip):not(.review-filter-btn):not(.link-btn):not(.rating-link):not(.directions-toggle):not(#storeRatingSummary):not(#directionsToggle):not(.view-btn):not(.leaflet-marker-icon),
  summary,
  [role=button]:not(.leaflet-marker-icon),
  select,
  textarea,
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden])) { min-height: 44px; }

  .btn { min-height: 44px; }
  /* Primary buttons are visibly 48 px tall. Placed after .btn, the rule it has to beat at the same specificity. */
  .btn-primary { min-height: 48px; }
  .map-locate-btn { min-width: 44px; }
  .row-menu-btn { min-width: 44px; }
  .view-btn { min-width: 46px; min-height: 44px; }

  /* Visible size stays as it is; only the invisible hit area grows to 44 x 44. A ::after expansion is credited by
     scripts/measure-mobile.js, which tests the hit at points inside the 44 px box. The offsets allow for a 1 px border
     (the expansion is measured from the padding box). */
  .icon-btn { position: relative; }
  .icon-btn::after { content: ""; position: absolute; inset: -5px; }
  .save-toggle:not(.btn)::after { content: ""; position: absolute; inset: -7px; }
  .brand { position: relative; }
  .brand::after { content: ""; position: absolute; inset: -7px -4px; }
  .location-chip { position: relative; }
  .location-chip::after { content: ""; position: absolute; inset: -9px 0; }
  .back-link { min-height: 44px; }
  .sidebar-cat-row { min-height: 44px; }
  .side-link-row { position: relative; }
  .side-link-row::after { content: ""; position: absolute; inset: -4px 0; }
  .pp-row-main a { position: relative; }
  .pp-row-main a::after { content: ""; position: absolute; inset: -13px 0; }
  .review-filter-btn { position: relative; }
  .review-filter-btn::after { content: ""; position: absolute; inset: -13px -14px; }
  .link-btn, .rating-link, .directions-toggle, #storeRatingSummary, #directionsToggle { position: relative; }
  #storeRatingSummary::after, .rating-link::after, .link-btn::after { content: ""; position: absolute; inset: -13px 0; }
  #directionsToggle::after { content: ""; position: absolute; inset: -9px 0; }

  /* The list and grid toggles: a visible 46 px width (two px over 44, so a test point 21.5 px from the centre stays inside
     its own button; the buttons touch and the edge is a pixel away). The toggle is overflow: hidden, so a hit area would be clipped,
     and the result row may wrap on a phone when it is full (a layout allowance, see docs/MOBILE-SIZING-AUDIT.md). */
  .result-row { flex-wrap: wrap; }
  /* Header icons: 8 px apart before, so a 44 px hit area on each one just touched its neighbour. 10 px keeps a margin. */
  .header-actions { gap: 10px; }
  .sort-chip { min-width: 44px; }

  /* Map: zoom buttons, cluster and pin markers, and the attribution link. Leaflet panes (z-index 400) would paint over the
     bottom tab bar; a stacking context keeps them inside the map. */
  .map-view-wrap { isolation: isolate; }
  .leaflet-touch .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; }
  .leaflet-marker-icon.marker-cluster::after { content: ""; position: absolute; inset: -2px; }
  .leaflet-marker-icon.map-pin-wrap::after { content: ""; position: absolute; inset: -7px; }
  .leaflet-control-attribution a { position: relative; }
  .leaflet-control-attribution a::after { content: ""; position: absolute; inset: -15px 0; }

  /* ---------- Rule 2: text size (audit rows in docs/MOBILE-SIZING-AUDIT.md) ---------- */

  /* cards-chips.css */
  .chip { font-size: 14px; }
  .toggle-btn { font-size: 14px; }
  .list-map-toggle button { font-size: 14px; }
  .clear-filter { font-size: 14px; }
  .link-pill { font-size: 14px; }
  .type-chip { font-size: 14px; }

  /* detail-pages.css */
  .back-link { font-size: 14px; }
  .market-hero-desc { font-size: 14px; }
  .side-link-row { font-size: 14px; }
  .sidebar-cat-row { font-size: 14px; }
  .rating-row { font-size: 14px; }
  .variant-row-main { font-size: 14px; }
  .variant-chevron { font-size: 12px; }
  .btn { font-size: 14px; }
  .btn-small { font-size: 14px; }

  /* discover-browse.css */
  .ui-label { font-size: 12px; }
  .category-badge { font-size: 12px; }
  .category-tile-label { font-size: 14px; }
  .selected-chip { font-size: 14px; }
  .refine-toggle { font-size: 14px; }
  .match-toggle { font-size: 14px; }
  .match-btn { font-size: 14px; }
  .refine-parent { font-size: 14px; }
  .refine-chip { font-size: 14px; }
  .refine-count { font-size: 12px; }
  .flyout-edge { font-size: 12px; }
  .flyout-title { font-size: 14px; }
  .flyout-item { font-size: 14px; }

  /* gamification.css */
  .badge-tile-name { font-size: 14px; }
  .badge-chip { font-size: 12px; }

  /* header-nav.css */
  .account-tag { font-size: 14px; }
  .mode-btn { font-size: 14px; }
  .mode-btn { font-size: 14px; }
  .search-suggestion-main { font-size: 14px; }
  .search-suggestion-sub { font-size: 12px; }
  .search-suggestion-catpill { font-size: 12px; }
  .search-history-clear { font-size: 14px; }
  .search-history-remove { font-size: 14px; }
  .search-suggestion-more { font-size: 14px; }
  .location-chip { font-size: 14px; }
  .mention-links { font-size: 14px; }

  /* map-view.css */
  .map-popup strong { font-size: 14px; }
  .map-popup a { font-size: 14px; }
  .rv-end { font-size: 14px; }
  .rv-tile .rv-title { font-size: 14px; }
  .view-grid3 .rv-tile .rv-title { font-size: 14px; }
  .card-desc { font-size: 14px; }
  .tag { font-size: 12px; }
  .status-pill { font-size: 14px; }
  .link-row { font-size: 14px; }

  /* modals-popups.css */
  .empty-state p { font-size: 14px; }
  .nav-item { font-size: 14px; }
  .notif-panel-footer { font-size: 14px; }
  .product-context-chip { font-size: 14px; }
  .product-context-chip button { font-size: 14px; }
  .message-product-context { font-size: 14px; }
  .modal-sub { font-size: 14px; }
  .modal-close { font-size: 14px; }
  .location-back { font-size: 14px; }
  .tier-head { font-size: 14px; }
  .band-head { font-size: 14px; }
  .show-more { font-size: 14px; }
  .sticky-all { font-size: 14px; }
  .sticky-chip, .sticky-open { font-size: 14px; }

  /* product-page.css */
  .pp-note { font-size: 14px; }
  .pp-maysell-name { font-size: 14px; }
  .pp-maysell-note { font-size: 14px; }
  .pp-menu-btn { font-size: 14px; }
  .pp-menu-item { font-size: 14px; }
  .pp-view-btn { font-size: 14px; }

  /* suggest-forms.css */
  .edit-chip { font-size: 14px; }
  .kind-options legend { font-size: 14px; }
  .correction-lines { font-size: 14px; }
  .suggest-field { font-size: 14px; }
  .list-sort { font-size: 14px; }
  .row-menu-dropdown button, .row-menu-dropdown a { font-size: 14px; }
  .suggest-check { font-size: 14px; }
  .review-card { font-size: 14px; }
  .review-card summary { font-size: 14px; }
  .review-controls { font-size: 14px; }
  .review-filter-btn { font-size: 14px; }
  .review-json { font-size: 12px; }
  .mall-ribbon { font-size: 12px; }

  /* variant-menus.css */
  .variant-tag { font-size: 12px; }
  .variant-menu-quick { font-size: 14px; }
  .view-grid3 .rv-tile .rv-sub { font-size: 12px; }
  .view-grid3 .rv-tile .rv-end { font-size: 14px; }

  /* found by measure-mobile.js (no font-size declaration of its own, or a Leaflet default) */
  .weaker-heading { font-size: 14px; }
  .marker-cluster div { font-size: 14px; }
  .listing-row-body .card-meta.price { font-size: 14px; }
  #storeRatingSummary { font-size: 14px; }

  /* ---------- Fields: 16 px on phones (QA BUG-014) ----------
     Android Chrome does not zoom on a smaller field, but iOS Safari does, and 14 px text is harder to read while typing.
     Id and class rules set 14 px on #searchInput, the Discover selects, the Help and Privacy request boxes and others, so
     this uses !important: one rule for every text field, select and textarea instead of one override per field. */
  select,
  textarea,
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=file]):not([type=button]):not([type=submit]) { font-size: 16px !important; }
}