/* ═══════════════════════════════════════════════════════════════════════════
   mobile.css — the small-screen corrections, in one place.

   Loaded LAST so it wins without !important. Everything here is a measured fix, not a
   preference. Desktop is never touched: every rule sits inside a max-width query.

   One deliberate exception to the house rem standard: tap targets are given in px. A tap
   target is a physical-finger constraint (~9mm), not a typographic one, and the site's root
   font is fluid — clamp(13px, 0.3vw + 11.7px, 20px) — so at 390px the root is 13px and
   "2.75rem" computes to 36px, not 44px. Using rem here would quietly under-size the very
   thing being fixed.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width:60rem){
  /* header: hit areas to 44px WITHOUT moving anything. Padding plus a matching negative margin
     grows the touch box while leaving the visual box where it is. */
  .nav-ico,.menu-btn{padding:14px;margin:-14px;box-sizing:content-box}
  .nav-home{padding:16px 6px;margin:-16px -6px;display:inline-block}
  .nav-right{gap:.35rem}
  .nav-bag .nav-count{top:9px;right:7px}

  /* primary CTAs: 44px tall, label never under 11px */
  .cta,.cta-ghost{min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:.8rem}
  /* the smallest labels lift with the root: eyebrows, card roles, thead, announce */
  :root{--fs-label:.8rem}
  .announce{font-size:.72rem;letter-spacing:.14em}
  .pdp-sizes,.foot-head,.foot-tag,.foot-bottom{font-size:.72rem}
  /* underlined text links: a 44px tap box without moving the text */
  .hero-soft,.origins-link,.link-soft,.foot-legal a{display:inline-block;padding:12px 0;margin:-12px 0}
  .foot-col a{min-height:44px;display:flex;align-items:center;padding:0}
  .finder label{min-height:44px}
  .card-tier{min-height:44px;display:inline-flex;align-items:center}

  /* accordion headers */
  .faq-item summary,.fq-sec > summary,.fq-q > summary{min-height:44px}

  /* the smallest text on the site: lift the floor without disturbing the scale */
  .nav-count{font-size:.62rem}
  .cart-head,.cart-hint,.cart-foot{font-size:.72rem}
}

/* phones: the header icons spread evenly, each with a 48px tap box that touches its
   neighbour's and never overlaps it. The desktop nav links hide; the drawer carries them. */
@media (max-width:39.99rem){
  .nav-links{display:none}
  .nav{justify-content:space-between}
  .nav .nav-ico{padding:11px;margin:-11px}
  .nav .nav-ico svg{width:26px;height:26px}
  .nav .nav-ico::after{width:48px;height:48px}
  .nav .nav-bag .nav-count{top:5px;right:2px;font-size:.68rem}
  .nav-wordmark{height:.85rem}
}

/* no-zoom floor: iOS zooms any input under 16px */
@media (max-width:40rem){
  .nl-fields input,.nl-tel i,.search-field input{font-size:16px}
}

/* tablets: two cards across (site.css); phones: each card is a compact row (image · accent rule · info), not a tower */
@media (max-width:40rem){
  .cards-5,.cards-3,.cards-6{grid-template-columns:minmax(0,1fr)}
  .card{flex-direction:row}
  .card-ph{flex:0 0 38%;min-width:0}
  .card-rule{width:0.125rem;height:auto}
  .card-badge{top:.5rem;left:.5rem}
  .match .card-ph{flex-basis:40%}
  /* red trust bar: one scroll-snap row, each fact ~70% wide */
  .trustbar{padding:0}
  .trustbar ul{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:0 var(--pad-x)}
  .trustbar ul::-webkit-scrollbar{display:none}
  .trustbar li{flex:0 0 70%;scroll-snap-align:start;border-bottom:0!important}
  .trustbar li:nth-child(4){border-left:0.0625rem solid var(--on-brand-line)}
  .page-tools{justify-content:flex-start}
}
@media (max-width:53.75rem){
  .foot-trust{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;gap:.9rem 1.4rem}
}