/* Highest Vitality — touch target sizing.
   Linked after each page's inline <style>, same pattern as cart.css.

   The header cart icon (20px) and menu toggle (26px) render at a size
   that is fine with a mouse and small for a thumb — Apple's guidance is
   a 44pt minimum. Padding plus an equal negative margin grows the
   tappable box without changing the icon's visual size or nudging the
   header layout. */

@media (max-width: 900px) {
  .cart {
    padding: 12px;
    margin: -12px;
  }

  /* .nav-toggle sets an explicit 26px box and the site uses
     box-sizing:border-box, so padding alone would shrink the bars rather
     than grow the button. Size the box to 44px and let the 9px padding
     leave the three bars at their original 26px width. */
  .nav-toggle {
    width: 44px;
    height: 44px;
    padding: 9px;
    margin: -9px;
  }

  /* keep the pair from colliding once their boxes grow */
  .nav-actions { gap: 24px; }
}