/* ==========================================================================
   NSS — Mobile layout safety net
   --------------------------------------------------------------------------
   Every rule below lives inside a media query, so DESKTOP IS UNTOUCHED.
   Load this LAST (after the page's own <style> block) so it wins on mobile.

   Why this file exists:
   - product.html, bundle.html and cart.html had no @media rules at all, and
     all 109 catalog items render through the first two.
   - Elsewhere the only breakpoints (900px / 520px) covered .product-grid and
     nothing else, so .two-col, .three-col, .four-col and the footer .ft-top
     stayed multi-column on phones.
   - 34 grids are written as inline style="" attributes, which no external
     stylesheet can override without !important.
   ========================================================================== */


/* --- Universal guards: apply at every size ------------------------------- */

img, svg, video, iframe { max-width: 100%; height: auto; }

/* Long SKUs, URLs and part numbers were forcing horizontal scroll */
body { overflow-x: hidden; }


/* ==========================================================================
   TABLET  (<= 900px)
   ========================================================================== */
@media (max-width: 900px) {

  /* Layout grids: 4 and 3 columns collapse to 2 */
  .four-col  { grid-template-columns: repeat(2, 1fr) !important; }
  .three-col { grid-template-columns: repeat(2, 1fr) !important; }

  /* Footer: 2fr 1fr 1fr 1fr is unreadable below desktop */
  .ft-top { grid-template-columns: 1fr 1fr !important; gap: 2rem !important; }

  /* Two-column content blocks stack; 4rem gap is too much once stacked */
  .two-col { grid-template-columns: 1fr !important; gap: 2rem !important; }

  /* Nav: allow wrapping instead of squeezing */
  .nav-top { flex-wrap: wrap !important; height: auto !important;
             padding: 0.75rem 1rem !important; gap: 0.5rem !important; }
  .nav-links { flex-wrap: wrap !important; justify-content: flex-start !important;
               gap: 0.25rem 0.75rem !important; }
  .nav-utility-inner { flex-wrap: wrap !important; gap: 0.5rem !important;
                       padding: 0.5rem 1rem !important; }
  .nav-search { max-width: 100% !important; flex: 1 1 100% !important; order: 2; }

  /* Inline style="grid-template-columns:..." cannot be reached any other way */
  [style*="grid-template-columns"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* Section padding was tuned for 1280px */
  section, .section { padding-left: 1rem !important; padding-right: 1rem !important; }
}


/* ==========================================================================
   PHONE  (<= 640px)  — the size most people arrive on
   ========================================================================== */
@media (max-width: 640px) {

  /* Everything goes single column */
  .two-col, .three-col, .four-col, .ft-top,
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  .ft-top { gap: 1.5rem !important; text-align: left; }

  /* Cards and chips: stop 210px minimums from overflowing a 375px viewport */
  [style*="min-width:210px"], [style*="min-width: 210px"],
  [style*="min-width:260px"], [style*="min-width:280px"],
  [style*="min-width:200px"] { min-width: 0 !important; width: 100% !important; }

  /* Fixed pixel widths inside inline styles */
  [style*="width:520px"], [style*="width:560px"], [style*="width:600px"],
  [style*="width:620px"], [style*="width:640px"], [style*="width:680px"],
  [style*="width:820px"], [style*="width:860px"], [style*="width:900px"] {
    width: 100% !important; max-width: 100% !important;
  }

  /* Tables: scroll rather than blow out the page */
  table { display: block; width: 100%; overflow-x: auto;
          -webkit-overflow-scrolling: touch; }

  /* nowrap was pushing pill/badge rows off-screen */
  [style*="white-space:nowrap"], [style*="white-space: nowrap"] {
    white-space: normal !important;
  }

  /* Typography: desktop hero sizes overflow on phones */
  h1 { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; line-height: 1.2 !important; }
  h2 { font-size: clamp(1.3rem, 5.5vw, 1.7rem) !important; line-height: 1.25 !important; }
  h3 { font-size: clamp(1.05rem, 4.5vw, 1.3rem) !important; }

  /* Buttons: full width reads better and stops side-by-side overflow */
  .nav-cta { width: 100%; justify-content: stretch; }
  .nav-cta > * { flex: 1; text-align: center; }

  /* Generic container padding */
  section, .section, main, footer { padding-left: 1rem !important;
                                    padding-right: 1rem !important; }

  /* Tap targets: 44px is the accessibility floor */
  a.btn, button, .nav-cta a, input[type="submit"] { min-height: 44px; }
}


/* ==========================================================================
   PRODUCT / BUNDLE PAGES
   These two templates had ZERO media queries and serve all 109 items.
   ========================================================================== */
@media (max-width: 900px) {
  .product-hero, .product-layout, .prod-detail,
  .product-main, .pdp-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
  .product-gallery, .product-info { width: 100% !important; max-width: 100% !important; }
}

@media (max-width: 640px) {
  .prod-img, .product-gallery img { height: auto !important; max-height: 320px;
                                    object-fit: contain; }
  .spec-table, .specs { display: block; overflow-x: auto; }
  /* Price + Add to Cart should never sit side by side on a phone */
  .buy-row, .product-actions { flex-direction: column !important;
                               align-items: stretch !important; gap: 0.75rem !important; }
  shopify-store, shopify-cart { display: block; width: 100%; }
}


/* ==========================================================================
   CART
   ========================================================================== */
@media (max-width: 640px) {
  .cart-layout, .cart-grid { grid-template-columns: 1fr !important; }
  .cart-item { flex-wrap: wrap !important; }
}


/* ==========================================================================
   PRINT — quote pages and spec sheets get printed by customers
   ========================================================================== */
@media print {
  nav, .nav-top, .nav-utility, footer, .nav-cta { display: none !important; }
  body { overflow-x: visible; }
}