/* Responsive overrides for the storefront.
   The kit styles inline, so these rules need !important to win. Grid tracks are
   matched on their declared value, which is why the selectors look unusual. */
@media (max-width: 1024px) {
  :root { --gutter-desktop: 28px; --section-y: 80px; --section-y-tight: 56px; }
  [style*="repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="1.4fr repeat("] { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
  [style*="220px 1fr"] { grid-template-columns: 1fr !important; gap: 28px !important; }
  [style*="1.15fr 1fr"], [style*="1.25fr 1fr"], [style*="1.6fr 1fr"], [style*="1.5fr 1fr"] { grid-template-columns: 1fr !important; gap: 36px !important; }
  aside[style*="position: sticky"], [style*="top: 96px"] { position: static !important; }
}
@media (max-width: 860px) {
  :root { --gutter-desktop: 20px; --section-y: 56px; --section-y-tight: 40px; --gap-grid: 16px; --text-display-2: 46px; --text-display-1: 40px; --text-h1: 32px; --text-h2: 27px; --text-h3: 22px; --text-h4: 19px; --text-lead: 16px; }
  header nav { gap: 16px !important; overflow-x: auto !important; scrollbar-width: none; }
  header nav::-webkit-scrollbar { display: none; }
  header nav a { font-size: 12px !important; white-space: nowrap !important; }
  [style*="repeat(3, 1fr)"]:not([data-trust]) { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="gap: 64px"] { gap: 32px !important; }
  [style*="76px 1fr"] { grid-template-columns: 1fr !important; }
  [style*="76px 1fr"] > [style*="flex-direction: column"] { flex-direction: row !important; overflow-x: auto !important; }
  [style*="76px 1fr"] > [style*="flex-direction: row"] > * { flex: 0 0 68px; }
}
/* Phones. Product and category tiles stay TWO across — one per row makes every
   photo the width of the screen, which reads as enormous and hides the range. */
@media (max-width: 620px) {
  :root { --gutter-desktop: 14px; --gap-grid: 10px; --section-y: 44px; --section-y-tight: 32px;
    --text-display-2: 34px; --text-display-1: 30px; --text-h1: 26px; --text-h2: 22px; --text-h3: 19px; --text-h4: 17px;
    --text-lead: 15px; --text-body: 14px; --text-sm: 12px; }
  [style*="repeat(4, 1fr)"], [style*="repeat(3, 1fr)"], [style*="repeat(2, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="repeat(5, 1fr)"] { grid-template-columns: repeat(4, 1fr) !important; }
  /* Two-panel layouts (product page, checkout, editorial) go single column. */
  [style*="1fr 1fr"]:not([style*="repeat"]) { grid-template-columns: 1fr !important; gap: 24px !important; }
  [style*="1.4fr repeat("] { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
  [style*="height: 520px"] { height: 340px !important; }
  /* Card copy: the tile is half a screen wide, so the label must shrink with it. */
  [style*="repeat(2, 1fr)"] h3, [style*="repeat(2, 1fr)"] [style*="font-size: 15px"] { font-size: 13px !important; line-height: 1.35 !important; }
  table { font-size: 12px; }
  /* Grid children default to min-width:auto, so a card whose min-content is wider
     than its track pushes the whole page sideways. Let them shrink. */
  [style*="repeat(2, 1fr)"] > *, [style*="repeat(3, 1fr)"] > *, [style*="repeat(4, 1fr)"] > * { min-width: 0 !important; }
  /* Two lg buttons do not fit one phone row. */
  [data-hero-cta] { flex-wrap: wrap !important; }
  [data-hero-cta] button { padding-left: 18px !important; padding-right: 18px !important; }
  /* Header: the nav takes its own row rather than being squeezed to zero width. */
  [data-header-row] { flex-wrap: wrap !important; gap: 12px !important; height: auto !important; padding-top: 10px !important; padding-bottom: 8px !important; }
  [data-header-row] > nav { flex: 1 0 100% !important; order: 3; min-width: 0 !important; }
  [data-footer-pay] { flex-wrap: wrap !important; gap: 12px !important; }
}
/* Small phones. The nav stays put — it already scrolls sideways from 860px down,
   and hiding it would leave no way to reach the catalogue. */
@media (max-width: 400px) {
  :root { --gutter-desktop: 12px; --gap-grid: 8px; --text-display-2: 30px; --text-h1: 23px; --text-h2: 20px; }
  [style*="height: 520px"] { height: 300px !important; }
  header nav { gap: 13px !important; }
  header nav a { font-size: 11.5px !important; }
}
/* Phones: the admin shell stacks.
   ROOT CAUSE of every sideways scroll here: flex and grid children default to
   min-width:auto, so any child whose min-content is wider than its track floors
   the track and drags the page wide. Rather than chase each inline width, unfloor
   everything in the shell, let its rows wrap, and let cards scroll their own
   overflow. The table min-width comes last so it survives the reset. */
@media (max-width: 860px) {
  [data-admin-shell] { flex-direction: column !important; }
  [data-admin-shell] > aside { width: 100% !important; min-height: 0 !important; position: static !important; }
  [data-admin-shell] * { min-width: 0 !important; }
  [data-admin-shell] [style*="display: flex"]:not([style*="flex-direction: column"]) { flex-wrap: wrap !important; }
  [data-admin-shell] section, [data-admin-shell] [style*="var(--radius-card)"] { overflow-x: auto !important; }
  [data-admin-shell] [style*="1fr 1fr"], [data-admin-shell] [style*="repeat(2, 1fr)"], [data-admin-shell] [style*="repeat(3, 1fr)"], [data-admin-shell] [style*="repeat(4, 1fr)"] { grid-template-columns: 1fr !important; }
  [data-admin-shell] > aside[style*="width: 232px"] { width: 100% !important; }
  [data-admin-shell] [style*="width: 260px"] { width: 100% !important; }
  [data-admin-shell] header { flex-wrap: wrap !important; height: auto !important; row-gap: 10px !important; }
  [data-admin-shell] table { min-width: 560px !important; }
}
/* Storefront grids: same min-width:auto floor, on the two-panel layouts. */
@media (max-width: 620px) {
  [style*="1fr 1fr"] > * { min-width: 0 !important; }
}
/* Three claims read better stacked than 2+1 on a phone. */
@media (max-width: 620px) {
  [data-trust] { grid-template-columns: 1fr !important; gap: 14px !important; }
}