/* iPhone-first presentation layer. Keeps storefront data and handlers unchanged. */
:root { --ios-gutter: max(16px, env(safe-area-inset-left)); --ios-gutter-r: max(16px, env(safe-area-inset-right)); }
html { -webkit-text-size-adjust: 100%; }
body { min-width: 0; overflow-x: hidden; padding-bottom: env(safe-area-inset-bottom, 0px); }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, [role="button"], .btn, .card, .cat-tab { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (max-width: 820px) {
  .container { padding-left: var(--ios-gutter); padding-right: var(--ios-gutter-r); }
  input, select, textarea { font-size: 16px !important; min-height: 44px; }
  button, .btn, .slider-arrow, .cat-tab { min-height: 44px; }
  .filter-bar { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px; }
  .filter-bar input, .filter-bar select { width: 100%; }
  .cat-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .cat-tab { flex: 0 0 auto; scroll-snap-align: start; }
  .section > .container > [style*="grid-template-columns:1fr 360px"],
  .section > .container > [style*="grid-template-columns:1fr 320px"] { grid-template-columns: minmax(0, 1fr) !important; }
  aside[style*="sticky"] { position: static !important; }
  [style*="grid-template-columns:2fr 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }
  [class*="order"], [class*="summary"], [class*="address"], [class*="email"], [class*="tracking"] { overflow-wrap: anywhere; }
}
/* Catalogs stay two-up even on compact phones: product discovery should not
   force a one-card vertical feed on iPhone SE-sized viewports. */
@media (max-width: 430px) {
  #products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .65rem;
  }
  #products-grid .card .ph { aspect-ratio: 1 / 1; }
  #products-grid .card .body { padding: .7rem .75rem .8rem; }
  #products-grid .card .title { font-size: .92rem; }
  #products-grid .card .meta { font-size: .7rem; }
  #products-grid .card .price { font-size: .88rem; }
}
@media (max-width: 440px) {
  .site-header, header { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}