/* ===========================================================================
   High Falls Media — responsive.css
   Breakpoints per Brand Kit: mobile-first, tablet 768, desktop 1024,
   large 1280 (max width), 4K/ultrawide scale-up begins at 3440x1440.
   The product grid holds 7 covers per row on desktop and steps down through
   6 / 5 / 4 / 3 / 2 to a single column on phones; these rules also handle the
   shell (nav, product split) and the 4K scale-up.
   =========================================================================== */

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .hf-card:hover, .hf-card:focus-within { transform: none; }
}

/* ── Tablet and below: product detail stacks ────────────────────────────── */
@media (max-width: 980px) {
  .hf-product { grid-template-columns: 1fr; }
  .hf-product__art { max-width: 360px; margin-inline: auto; }
}

/* ── Below 768: single-column feel, nav + masthead reflow ───────────────── */
@media (max-width: 767px) {
  :root { --gutter: clamp(1rem, 5vw, 1.5rem); }
  .hf-masthead { gap: 0.8rem 1rem; }
  .hf-nav {
    order: 3; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: 1.1rem; padding-bottom: 0.2rem;
  }
  .hf-utils { margin-left: auto; }
  .hf-vet { display: none; }            /* Veteran-Owned still shown in the top bar */
  .hf-controls { gap: 0.6rem; }
  .hf-controls__spacer { display: none; }
  .hf-search { order: -1; flex: 1 1 60%; }
  .hf-qv__inner { grid-template-columns: 1fr; }
  .hf-qv__art { max-width: 165px; }

  /* Footer: stack so it isn't crammed into three columns on phones.
     Brand runs full width on top, Shop + Info sit side by side below. */
  .hf-foot__cols { grid-template-columns: 1fr 1fr; gap: 1.6rem clamp(1.4rem, 6vw, 2.4rem); }
  .hf-foot__brand { grid-column: 1 / -1; }
  .hf-foot__brand p { max-width: 46ch; }
  .hf-foot__bar { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}

/* ── Product grid column step-down (base is 7 across, set in components.css) ─ */
@media (max-width: 1180px) { .hf-grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 1024px) { .hf-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 900px)  { .hf-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px)  { .hf-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px)  { .hf-grid { grid-template-columns: repeat(2, 1fr); } }

/* mobile phones — single column */
@media (max-width: 600px)  { .hf-grid { grid-template-columns: 1fr; } }

/* ── Large desktop: content width capped at --maxw (1280); grid stays 7-up ─ */
/* The shop page uses a wider working area so the 7-up grid has room to breathe
   on large monitors. Applied to the whole shop page, so the head, filters,
   grid, and footer all keep the same left/right edges. Viewports at/under the
   width simply fill the screen, so 7 columns are naturally tighter on smaller
   laptops. The full-bleed masthead is unaffected, as on every page. */
.hf-shop { --maxw: 1560px; }

/* ── 4K / ultrawide: scale type, container, and grid up from 3440x1440 ──── */
@media (min-width: 3440px) {
  :root { --maxw: 2560px; --radius: 8px; --card-radius: 11px; }
  .hf-shop { --maxw: 2560px; }
  html { font-size: 20px; }
  body { font-size: 1.12rem; }
  .hf-grid { grid-template-columns: repeat(7, 1fr); gap: 2.4rem; }
  .hf-rail__grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .hf-product { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); }
  .hf-product__art { max-width: 460px; }
  .hf-drawer__panel { width: min(560px, 100%); }
  .hf-topbar { padding-block: 0.8rem; }
  .hf-masthead { padding-block: 2.4rem; }
}