/* ==========================================================================
   THE AM - Breakpoint adjustments. Mobile-first: main.css/components.css
   are the small-screen baseline; this file layers on enhancements as the
   viewport grows. Breakpoints per spec: 360 / 480 / 640 / 768 / 1024 / 1280 / 1440 / 1920.
   ========================================================================== */

/* ---- 360px baseline: no horizontal overflow, 44px min tap targets ---- */
.icon-btn, .stepper button, .btn { min-width: 44px; min-height: 44px; }

/* iOS-safe viewport height + safe-area padding for bottom-fixed bars. */
.vh-full { height: 100dvh; }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }

/* ---- >= 480px ---- */
@media (min-width: 480px) {
  .grid-2-xs { grid-template-columns: repeat(2, 1fr); }
}

/* ---- >= 640px ---- */
@media (min-width: 640px) {
  .grid-2-sm { grid-template-columns: repeat(2, 1fr); }
  .grid-3-sm { grid-template-columns: repeat(3, 1fr); }
}

/* ---- >= 768px (tablet) ---- */
@media (min-width: 768px) {
  body { font-size: 16px; }
  .grid-2-md { grid-template-columns: repeat(2, 1fr); }
  .grid-3-md { grid-template-columns: repeat(3, 1fr); }
  .grid-4-md { grid-template-columns: repeat(4, 1fr); }
  .hide-mobile { display: initial; }
  .hide-desktop { display: none; }
}
@media (max-width: 767.98px) {
  .hide-mobile { display: none; }
}

/* ---- >= 1024px (small desktop / nav breakpoint) ---- */
@media (min-width: 1024px) {
  .grid-4-lg { grid-template-columns: repeat(4, 1fr); }
  .grid-5-lg { grid-template-columns: repeat(5, 1fr); }
}

/* The shared .hide-mobile/.hide-desktop utility flips at 768px above, which
   is correct for most of its uses (filter sidebars, gallery thumbs, admin
   sidebar). The header's own full nav (logo + 6 text links + up to 5 action
   icons) genuinely needs the 1024px "nav breakpoint" this file already
   names - at 768-1023px there isn't room for all of it on one row, and the
   actions column silently overflowed past the viewport edge. Scoped to
   .site-header only, not a change to the shared utility class's default. */
@media (max-width: 1023.98px) {
  .site-header .hide-mobile { display: none; }
  .site-header .hide-desktop { display: inline-block; }
}
@media (min-width: 1024px) {
  .site-header .hide-mobile { display: initial; }
  .site-header .hide-desktop { display: none; }

  /* .hide-mobile's `display: initial` resolves to the CSS spec's initial
     value for display (inline), not "this element's natural display" - and
     since these <a> icon buttons are flex items of .site-header__actions,
     that inline specified value gets blockified to block, clobbering
     .icon-btn's `display: grid` centering (SVG lands at the top of the
     circle instead of centered). Re-assert grid with enough specificity to
     win, scoped to just these buttons so the generic .hide-mobile utility
     (filter sidebars, gallery thumbs, admin sidebar) is untouched. */
  .site-header .icon-btn.hide-mobile { display: grid; }

  /* True 3-column centering for the desktop header. The base .site-header__inner
     is flex + justify-content: space-between, which only balances the GAP between
     items - since the logo and the icon cluster are different widths, the nav
     itself never actually sits in the visual center of the bar, just wherever the
     leftover space happens to land it. A grid with symmetric outer columns fixes
     that without touching the mobile/tablet layout (still flex there, unaffected). */
  .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  .site-header__logo { justify-self: start; }
  .site-nav { justify-self: center; }
  .site-header__actions { justify-self: end; }
}

/* ---- >= 1280px ---- */
@media (min-width: 1280px) {
  .grid-6-xl { grid-template-columns: repeat(6, 1fr); }
}

/* ---- >= 1920px (cap gutters from stretching absurdly wide) ---- */
@media (min-width: 1920px) {
  :root { --container-max: 1600px; }
}

/* ---- Horizontal snap-scroll rails (New Arrivals, Bestsellers, etc.) ---- */
.rail {
  display: flex;
  gap: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar { display: none; }
.rail { scrollbar-width: none; }
.rail > * {
  flex: 0 0 auto;
  width: min(72vw, 320px);
  scroll-snap-align: start;
}
@media (min-width: 768px) {
  .rail { display: grid; grid-auto-flow: column; grid-auto-columns: 300px; overflow-x: auto; }
  /* Let the grid track (not the mobile flex-basis width above) size each
     card here - a fixed 300px track paired with a fixed 300px child, no
     conflict. Verified as a real bug otherwise: a 320px-wide flex child
     forced into a narrower minmax(240px, 1fr) track overflowed into the
     next column and made that neighboring card unclickable. */
  .rail > * { width: 300px; }
}
@media (min-width: 1280px) {
  .rail-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; }
}

/* ---- Never allow a wide element (table, code, diagram) to blow out the body ---- */
.scroll-x { overflow-x: auto; max-width: 100%; }

/* ==========================================================================
   Header / footer / drawer breakpoint adjustments
   ========================================================================== */

/* Mobile nav panel: full-width under 480px, capped past that. */
@media (max-width: 479.98px) {
  .mobile-nav__panel { inset: 0; }
}

.site-footer__grid { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr; }
  .site-footer__brand { grid-column: auto; }
}

/* Drawer: full-width sheet on small phones, fixed panel from 480px up. */
@media (max-width: 479.98px) {
  .drawer__panel { width: 100%; }
}

/* Search overlay input scales down comfortably on short/small viewports. */
@media (max-height: 560px) {
  .search-overlay__inner { padding-top: 80px; }
}