/* Mobile optimization — overrides React-serialized inline styles at narrow widths.
   Selectors match the rendered form ("padding: 0px 56px 44px") by pairing a
   property probe with a value probe, so spacing/unit variations can't slip past. */
@media (max-width: 1000px) {
  html, body { overflow-x: hidden !important; }

  /* header: stack the nav under the wordmark, drop the sticky */
  header { height: auto !important; min-height: 0 !important; position: static !important;
           flex-wrap: wrap !important; padding: 12px 18px !important; gap: 10px !important; }
  header nav { order: 3 !important; width: 100% !important; flex-wrap: wrap !important;
               margin-left: 0 !important; gap: 2px !important; }
  header nav a { font-size: 12px !important; padding: 7px 9px !important; }
  header a[style*="height: 44px"] { height: 38px !important; padding: 0 16px !important; font-size: 14px !important; }

  /* section gutters: any padding built on the 56/64/48/40px rhythm */
  [style*="padding"][style*="56px"], [style*="padding"][style*="64px"],
  [style*="padding"][style*="48px"], [style*="padding"][style*="40px"] {
    padding-left: 20px !important; padding-right: 20px !important;
  }

  /* collapse every multi-column grid */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="gap: 56px"], [style*="gap:56px"], [style*="gap: 48px"] { gap: 28px !important; }
  /* color swatches stay multi-up on phones */
  .swatch-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important; gap: 14px !important; }

  /* type scale */
  h1 { font-size: 34px !important; line-height: 1.08 !important; }
  h2 { font-size: 24px !important; line-height: 1.15 !important; }
  h3 { font-size: 17px !important; }

  /* full-bleed banners get shorter */
  section[style*="min-height: 320px"] { min-height: 240px !important; }
  section[style*="min-height: 420px"], section[style*="min-height: 520px"],
  section[style*="min-height: 560px"], section[style*="min-height: 620px"] { min-height: 380px !important; }

  /* tap targets */
  a[style*="height: 48px"] { min-height: 48px !important; }
}

@media (max-width: 480px) {
  h1 { font-size: 29px !important; }
  [style*="padding"][style*="56px"], [style*="padding"][style*="64px"] {
    padding-left: 16px !important; padding-right: 16px !important;
  }
}