/* =====================================================================
   Skydd.com — responsive layer (shared across all demo pages)
   Linked AFTER each page's inline <style> so it wins at equal specificity.
   Three breakpoints: ≤1040 (small laptop/tablet), ≤880 (stack), ≤560 (phone)
   ===================================================================== */

/* ---------- Small laptop / large tablet ---------- */
@media (max-width: 1040px){
  .wrap{padding-left:20px;padding-right:20px}

  /* 4-up product/category grids → 3-up */
  .grid,
  .car-grid,
  .cats-grid{grid-template-columns:repeat(3,1fr)}

  /* 6-up editorial bento → 2-up */
  .mag-grid{grid-template-columns:repeat(2,1fr)}

  /* tighten oversized hero */
  h1.hero-title{font-size:48px}

  .nav a{padding:10px 8px}
}

/* ---------- Stack two-column layouts; reflow header ---------- */
@media (max-width: 880px){
  /* --- header: logo + actions on row 1, scrollable nav on row 2 --- */
  .header{position:static}
  .header .wrap{flex-wrap:wrap;height:auto;padding-top:12px;padding-bottom:12px;gap:12px 16px}
  .logo{order:0}
  .header-actions{order:1;margin-left:auto;gap:4px}
  .nav{order:2;flex:1 0 100%;flex-wrap:nowrap;overflow-x:auto;gap:4px;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .nav::-webkit-scrollbar{height:0}
  .acct-toggle{display:none}
  .cart-mini .col{display:none}

  /* --- category subnav: horizontal scroll --- */
  .subnav .wrap{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .subnav .wrap::-webkit-scrollbar{height:0}
  .subnav a,.subnav .more{white-space:nowrap;flex-shrink:0}

  /* --- collapse every two-column layout to a single column --- */
  .grid-layout,
  .article-wrap,
  .blk,
  .service,
  .feat .wrap,
  .featured-card,
  .masthead .wrap,
  .pcard-pair,
  .hero .wrap{grid-template-columns:1fr}
  .card.wide{grid-column:1 / -1;grid-template-columns:1fr;gap:24px}

  /* --- multi-up grids step down --- */
  .cats,
  .tg,
  .rel-grid,
  .pcard-trio,
  .mag-grid{grid-template-columns:repeat(2,1fr)}

  /* --- hero: drop fixed height, add breathing room --- */
  .hero{height:auto;min-height:0}
  .hero .wrap{height:auto;padding-top:56px;padding-bottom:56px}

  /* --- montagehandskar trust strip 4→2 --- */
  .trust .wrap{grid-template-columns:repeat(2,1fr);row-gap:22px}
  .trust .col + .col::before{display:none}

  /* --- footer 4→2 cols; trust band stacks --- */
  footer .grid-foot{grid-template-columns:repeat(2,1fr);gap:32px}
  .trust-band{grid-template-columns:1fr;gap:16px;text-align:center;justify-items:center}

  h1.hero-title{font-size:42px}
}

/* ---------- Phones ---------- */
@media (max-width: 560px){
  .wrap{padding-left:16px;padding-right:16px}

  /* topbar: keep phone/hours, drop the trust badges on the right */
  .topbar .right{display:none}
  .topbar .left{gap:14px;font-size:12px}

  /* product / category grids → 2-up */
  .grid,
  .car-grid,
  .cats-grid,
  .blk-grid,
  .cats{grid-template-columns:repeat(2,1fr)}

  /* editorial, testimonials, paired cards → single column */
  .tg,
  .rel-grid,
  .pcard-trio,
  .mag-grid,
  .pcard-pair,
  .feat-list{grid-template-columns:1fr}
  .pcard-inline{grid-template-columns:1fr}

  footer .grid-foot{grid-template-columns:1fr;gap:28px}
  .trust .wrap{grid-template-columns:1fr 1fr;row-gap:16px}

  /* type scale-down */
  h1.hero-title{font-size:33px}
  .hero p{font-size:15px}
  .hero .wrap{padding-top:44px;padding-bottom:44px}
  .blk-head h2,
  .cta h2,
  .testimonials h2,
  .intro h2,
  .carousel h2{font-size:24px}

  /* hero CTAs go full-width side by side */
  .hero-actions{flex-wrap:wrap}
  .hero-actions > a{flex:1 1 auto;justify-content:center}
}