/* =============================================================================
 * mobile.css — phone and tablet fixes for the customer site.
 *
 * Loaded after each page's own <style> so these rules win on equal
 * specificity. Desktop layout is unchanged above 900px (860px for the
 * product-card grid, which already collapses there).
 *
 * The menu button and panel are built by mobile.js. Until that script runs,
 * the original horizontal nav is what the page shows.
 * ===========================================================================*/

/* keyboard focus was outline:none on most controls — keep the brand glow,
   and add a ring that is visible when navigating by keyboard */
:focus-visible {
  outline: 2px solid #fcee0a;
  outline-offset: 2px;
}

@media (max-width: 900px) {
  html { scroll-padding-top: 60px; }
  /* ---- navigation: one MENU control, links in a full-height sheet ---- */
  nav.top.pmx-collapsed,
  body > nav.pmx-collapsed {
    position: sticky;
    top: 0;
    z-index: 40;
    justify-content: flex-start;
    gap: 0;
    min-height: 52px;
    padding: 4px 118px 4px 6px;          /* the cart pill owns the right edge */
    padding-right: calc(118px + env(safe-area-inset-right, 0px));
    overflow: visible;
    background: #060409;
  }
  body > nav.pmx-collapsed { background: #050505; }

  .pmx-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    min-width: 44px;
    padding: 0 12px 0 10px;
    border: 1px solid #3a2f4a;
    border-radius: 8px;
    background: #100b16;
    color: #f2f2f2;
    font: 700 13px/1 "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .pmx-menu-btn[aria-expanded="true"] { border-color: #fcee0a; color: #fcee0a; }
  .pmx-burger {
    width: 16px; height: 12px; position: relative; display: inline-block;
  }
  .pmx-burger::before,
  .pmx-burger::after,
  .pmx-burger span {
    content: "";
    position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 1px;
  }
  .pmx-burger::before { top: 0; }
  .pmx-burger::after { bottom: 0; }
  .pmx-burger span { top: 5px; }

  .pmx-menu-panel {
    position: fixed;
    z-index: 45;
    top: 52px;
    left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 6px 10px calc(16px + env(safe-area-inset-bottom, 0px));
    background: #060409;
    border-top: 1px solid #241d2e;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .pmx-menu-panel[hidden] { display: none !important; }
  .pmx-menu-panel a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 14px;
    border-bottom: 1px solid #1c1624;
    color: #f2f2f2;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-shadow: none;
    white-space: normal;
  }
  .pmx-menu-panel a.here { color: #fcee0a; }
  .pmx-menu-panel a.tab-j4 {
    margin-top: 8px;
    border-radius: 8px;
    min-height: 48px;
    justify-content: center;
  }
  body.pmx-menu-open { overflow: hidden; }

  /* a category sheet and the menu both want the screen — the sheet wins */
  body.sheet-open .pmx-menu-panel { display: none !important; }

  /* ---- tap targets and type that a thumb can actually hit ---- */
  .chip { min-height: 44px; padding: 10px 14px; }
  .fsheet-head button { min-width: 44px; min-height: 44px; }
  .search, .sort,
  .field input, .field select, .field textarea,
  .apply input, .apply select, .apply textarea,
  .pick, .vsel, .soundbtn, .rtab, .cadbtn, .copybtn {
    font-size: 16px;          /* under 16px, iOS zooms the page on focus */
    min-height: 44px;
  }
  .field textarea { min-height: 130px; }
  .apply label, .field label { font-size: 12px; letter-spacing: .12em; }
  .gadd { min-height: 44px; font-size: 11px; padding: 10px 8px; }
  .btn { min-height: 44px; }
  .cta { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .crumb a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; }
  .thumbs button { min-width: 64px; min-height: 48px; }

  /* search and sort share a row in the page CSS and a 16px sort label
     ("SORT: CURATED") was clipping under the native arrow. Stack them. */
  .toolbar { flex-wrap: wrap; }
  .toolbar .search,
  .toolbar .sort { flex: 1 1 100%; max-width: none; min-width: 0; }

  /* department chips scroll; a fade on the trailing edge shows there is more */
  .chips {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent);
  }

  /* product grids and gun galleries were stretching the page to their
     thumbnail strip's min-content width */
  .card { grid-template-columns: minmax(0, 1fr); }
  .gallery, .info, .thumbs, .gmain, .wrap, .browse, .grid { min-width: 0; max-width: 100%; }
  .thumbs { overflow-x: auto; }
  .gmain img, .gallery img { max-width: 100%; }

  /* the floating cart used to cover the right-hand card's price and
     add-to-cart. It now sits in the header (see cart.js). Leave room so the
     last row can still scroll clear of the back-to-top pill. */
  .browse { padding-bottom: 88px; }

  /* small print that failed contrast on the near-black ground */
  .gsku, .flavor, .legal, .ib-legal, .ib-note, .foot, footer.foot, .note, .statnote {
    color: #b7b2c2;
  }
  .gsku { font-size: 10px; }
  .ib-legal, .legal { font-size: 11px; }

  /* hero wordmark tracking overflows a 375px line */
  .tagline { letter-spacing: .18em; font-size: 12px; padding: 0 16px; text-align: center; }
  .gate-card { max-width: calc(100vw - 28px); }
  .gbtn { letter-spacing: .06em; font-size: 13px; min-height: 48px; }

  /* bench rifle pickers were truncated ("PMT-15 16\" EN") side by side */
  .pickers { grid-template-columns: 1fr; }
  .pickers .vs { text-align: center; }
  .cmp-row { gap: 4px; }
  .ck { font-size: 11px; letter-spacing: .04em; }
}

@media (max-width: 900px) and (max-height: 700px) {
  /* the scroll chevron sat on the call-to-action on short phones */
  .scroll-hint { display: none; }
}

/* ops console is a desktop tool; keep the login card on screen and let the
   inventory table scroll inside its tray instead of widening the page */
@media (max-width: 900px) {
  .lockbox { width: min(360px, calc(100vw - 28px)); box-sizing: border-box; padding: 28px 18px; }
  .tblwrap { max-width: 100%; overflow-x: auto; }
  table.inv { width: max-content; min-width: 100%; }
  .controls { max-width: 100%; }
  .controls input[type="search"] { min-width: 0; flex: 1 1 140px; font-size: 16px; min-height: 44px; }
  .abtn { min-height: 44px; }
  .woocommerce input.input-text,
  .woocommerce select,
  .woocommerce textarea { font-size: 16px; min-height: 44px; }
}