/* ============================================================
   RESPONSIVE — breakpoints
   Desktop-first refinements. Breakpoints: 1200 / 992 / 768 / 560 / 400
   ============================================================ */

@media (max-width: 1200px) {
  .mega-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
}

@media (max-width: 992px) {
  :root { --header-h: 72px; --header-h-shrunk: 60px; }

  /* Header → drawer */
  .main-nav { display: none; }
  .hamburger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--color-border-strong);
    background: #fff;
  }
  .site-header.transparent .hamburger { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); }
  .site-header.scrolled .hamburger { background: #fff; border-color: var(--color-border-strong); }
  .hamburger span { display:block; width: 20px; height: 2px; background: var(--navy-600); margin: 0 auto; border-radius: 2px;
    transition: transform var(--t-mid) var(--ease), opacity var(--t-fast) var(--ease); }
  .site-header.transparent .hamburger span { background: #fff; }
  .site-header.scrolled .hamburger span { background: var(--navy-600); }
  body.drawer-open .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.drawer-open .hamburger span:nth-child(2) { opacity: 0; }
  body.drawer-open .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .hero-inner { grid-template-columns: 1fr; gap: var(--sp-7); }
  .hero-visual { display: none; }
  .hero { min-height: auto; padding-block: calc(var(--header-h) + 3rem) 4rem; }
  .hero-copy { max-width: 640px; }
  .scroll-cue-wrap { display: none; }

  .pd-hero-inner { grid-template-columns: 1fr; }
  .pd-layout { grid-template-columns: 1fr; }
  .pd-sticky { position: static; flex-direction: row; flex-wrap: wrap; }
  .pd-toc { display: none; }
  .pd-inquiry { flex: 1; }

  .products-layout { grid-template-columns: 1fr; }
  .filter-sidebar { position: static; }
  .filter-box .filter-list { flex-direction: row; flex-wrap: wrap; }

  .contact-layout { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: var(--sp-6); }
  .split--media-first { direction: ltr; }

  .footer-top { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .footer-brand { grid-column: 1 / -1; }

  .grid-4 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .mini-stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  :root { --section-y: 3.2rem; }
  /* Keep header to logo + hamburger only — prevents the quote button
     from pushing the menu icon past the viewport edge on narrow phones */
  .header-actions .btn { display: none; }
  .header-inner { padding-inline: var(--gutter); }
  .grid-2, .grid-3, .grid-4, .grid-auto { grid-template-columns: 1fr; }
  .list-check { grid-template-columns: 1fr !important; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .cta-band { padding: 2.4rem 1.4rem; }
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; }
  .btn-row.center .btn { width: auto; }
  .products-toolbar { flex-direction: column; align-items: stretch; }
  .mega, .has-mega:hover .mega { display: none; }
}

@media (max-width: 560px) {
  .mini-stats { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(2.1rem, 9vw, 2.9rem); }
  .pd-hero-meta { gap: var(--sp-5); }
}

@media (max-width: 400px) {
  :root { --gutter: 1rem; }
  .btn { padding: 13px 22px; }
  .brand img { height: 38px; }
}

/* Mobile drawer */
.mobile-drawer {
  position: fixed; inset: 0 0 0 auto; width: min(360px, 88vw); z-index: var(--z-drawer);
  background: #fff; box-shadow: -20px 0 60px rgba(16,24,46,.2);
  transform: translateX(100%); transition: transform var(--t-slow) var(--ease-out);
  display: flex; flex-direction: column; padding: var(--sp-5); overflow-y: auto;
}
body.drawer-open .mobile-drawer { transform: translateX(0); }
.drawer-overlay {
  position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1); background: rgba(10,15,30,.5);
  opacity: 0; visibility: hidden; transition: opacity var(--t-mid) var(--ease), visibility var(--t-mid);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
body.drawer-open .drawer-overlay { opacity: 1; visibility: visible; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--color-border); margin-bottom: var(--sp-5); }
.drawer-head img { height: 40px; }
.drawer-close { width: 42px; height: 42px; border-radius: 11px; background: var(--navy-050); display: grid; place-items: center; color: var(--navy-600); }
.drawer-close svg { width: 22px; height: 22px; }
.drawer-nav { display: flex; flex-direction: column; gap: 2px; }
.drawer-nav > a, .drawer-acc-head {
  padding: 15px 12px; border-radius: var(--r-sm); font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: 1.05rem; color: var(--navy-600); display: flex; align-items: center; justify-content: space-between;
  width: 100%; text-align: left; transition: background var(--t-fast); }
.drawer-nav > a:hover, .drawer-acc-head:hover { background: var(--orange-050); color: var(--orange-600); }
.drawer-acc-head svg { width: 18px; height: 18px; transition: transform var(--t-mid) var(--ease); }
.drawer-acc.open .drawer-acc-head svg { transform: rotate(180deg); }
.drawer-acc-body { max-height: 0; overflow: hidden; transition: max-height var(--t-mid) var(--ease); padding-left: 12px; }
.drawer-acc.open .drawer-acc-body { max-height: 600px; }
.drawer-acc-body a { display: block; padding: 11px 12px; font-size: .95rem; color: var(--color-muted); border-left: 2px solid var(--color-border); }
.drawer-acc-body a:hover { color: var(--orange-600); border-left-color: var(--orange-500); }
.drawer-foot { margin-top: auto; padding-top: var(--sp-5); border-top: 1px solid var(--color-border); }
