/* ==========================================================================
   Fernwrap — responsive layer
   Type changes on a single boundary between 768 and 1024 (style spec §2.2).
   Product grid: 2-up mobile, 3-up >=1024. Nav: drawer <1024, horizontal >=1024.
   ========================================================================== */

/* ---------- < 768px: announce bar truncates to the short line (§1.1) ---- */
@media (max-width:768px){
  .announce__long{display:none}
  .announce__short{display:inline}
}

/* ---------- >= 640px (sm) ---------- */
@media (min-width:640px){
  .prod-grid{gap:var(--s5)}
  .line{grid-template-columns:120px 1fr}
  .line__media{width:120px;height:120px}
  .news__form{flex-wrap:nowrap}
  .news__input{flex:1 1 auto}
  .faq{gap:var(--s6) var(--s8)}
}

/* ---------- >= 768px (md) — desktop gutters, 32px section padding ------- */
@media (min-width:768px){
  .wrap{padding-inline:0}
  .section__inner,.cta-band__inner{padding-inline:var(--s8)}
  .split{gap:var(--s8)}
  .cta-band{padding-block:var(--s8)}
  .trust{gap:var(--s6)}
  .footer{padding-block:var(--s8)}
}

/* ---------- >= 1024px (lg) — full desktop per spec ---------- */
@media (min-width:1024px){
  /* nav goes horizontal; drawer retires */
  .nav__links{display:flex}
  .nav__utils{display:flex}
  .nav__toggle,.drawer{display:none}

  /* hero becomes two side-by-side 6:5 cards with a 6px seam (§1.3) */
  .hero__grid{grid-template-columns:repeat(2,1fr);gap:6px}

  /* categories 3-up */
  .cat-grid{grid-template-columns:repeat(3,1fr);gap:var(--s8)}

  /* product grid 3-up, 40px gutters, asymmetric card radius */
  .prod-grid{grid-template-columns:repeat(3,1fr);gap:40px var(--s8)}
  .prod{border-radius:var(--r-card-asym)}
  .prod__media{border-radius:var(--r-card-asym) var(--r-card-asym) 12px 12px}

  /* split sections 2-up */
  .split{grid-template-columns:repeat(2,1fr);gap:var(--s11)}
  .trust{grid-template-columns:repeat(2,1fr);gap:var(--s8) var(--s11)}
  .values{grid-template-columns:repeat(3,1fr);gap:var(--s8)}
  .matband__grid{grid-template-columns:repeat(4,1fr)}
  .faq{grid-template-columns:repeat(3,1fr)}
  .contact{grid-template-columns:1fr 1fr;gap:var(--s11)}
  .cart{grid-template-columns:1fr 380px;gap:var(--s9);align-items:start}
  .pdp{grid-template-columns:1fr 1fr;gap:var(--s9);align-items:start}
  .page-hero__media{aspect-ratio:4/3}
  .cat__copy{padding:var(--s6) 50px}
  .cta-band{padding-block:var(--s8)}

  /* dark CTA band is a constant ~120px desktop (§4.8) */
  .cta-band__inner{grid-template-columns:1fr auto;align-items:center;gap:var(--s6)}
  .cta-band__copy{display:grid;gap:var(--s2);grid-column:1}
  .cta-band .btn{grid-column:2}

  /* footer becomes horizontal columns, accordions retire (§4.7) */
  .footer__cols{grid-template-columns:repeat(3,1fr);gap:var(--s8)}
  .footer__col{border-bottom:0}
  .footer__head{pointer-events:none;padding-top:0}
  .footer__head::after{display:none}
  .footer__links{display:grid !important;gap:var(--s3);padding-bottom:0}
  .footer__links a{font-size:14px;line-height:20px}
  .footer{padding-bottom:var(--s8)}
}

/* ---------- >= 1280px (xl) — full desktop, 40px gutters ---------- */
@media (min-width:1280px){
  .section__inner,.cta-band__inner{padding-inline:var(--s10)}
  .filters-bar{flex-direction:row;align-items:center;justify-content:space-between}
}

/* ---------- 320px shift: crops tighten (§5) ---------- */
@media (max-width:359px){
  .wrap{padding-inline:var(--s6)}
  .hero__card{aspect-ratio:1.45/1}
  .split__media img,.centred__media img,.value__media img{aspect-ratio:1.48/1}
  .hero__copy{padding:var(--s5)}
  .prod-grid{gap:var(--s4) var(--s2)}
  .line{grid-template-columns:80px 1fr}
  .line__media{width:80px;height:80px}
  .btn--lg,.news__btn{padding-inline:var(--s7)}
}

/* ---------- reduced motion (§6) ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .marquee__track{animation:none;transform:none}
}

/* ---------- print (§9 item 9) ---------- */
@media print{
  .nav,.drawer,.announce,.marquee,.cta-band,.footer__social,.news{display:none}
  body{background:#fff}
  .shell{max-width:none}
}