/* =============================================================================
   RESPONSIVE — desktop-first overrides. Breakpoints: 1024 / 768 / 560
   ============================================================================= */

/* ---- Visibility utilities ---- */
@media (max-width: 1024px) { .hide-md { display: none !important; } }
@media (max-width: 768px)  { .hide-sm { display: none !important; } }

/* ---- Button loading state (quote AJAX) ---- */
.btn.is-loading { opacity: .65; pointer-events: none; }

/* ---- Laptop / small desktop ---- */
@media (max-width: 1180px) {
	.mega-panel__inner { grid-template-columns: repeat(3, 1fr); }
	.nav-menu { gap: var(--space-4); }
}

/* ---- Tablet ---- */
@media (max-width: 1024px) {
	.grid--4 { grid-template-columns: repeat(3, 1fr); }
	.mega-panel__inner { grid-template-columns: repeat(2, 1fr); padding: var(--space-5) var(--gutter); }
	.spec-block { grid-template-columns: 1fr; }
	.header-main__inner { grid-template-columns: auto auto; }

	/* Switch primary nav to off-canvas. */
	.primary-nav { display: none; }
	.nav-toggle { display: inline-flex; }
	.primary-nav.mobile-nav { display: block; }
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
	:root { --header-main: 64px; }

	h1 { font-size: clamp(2rem, 1.4rem + 3vw, 2.75rem); }
	h2 { font-size: var(--fs-700); }

	.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
	.grid--tiles, .grid--auto { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

	.topbar__contact { gap: var(--space-3); font-size: 11px; }
	.topbar__promo { display: none; }

	.footer-main { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
	.footer-bottom { flex-direction: column; text-align: center; gap: var(--space-2); }

	.hero__content { text-align: center; margin-inline: auto; }
	.hero__actions { justify-content: center; }

	.section__head { text-align: center; }

	.sample-strip { flex-direction: column; text-align: center; }
	.signup-form { flex-direction: column; }

	/* Collection quote rows become stacked cards */
	.quote-row { grid-template-columns: 56px 1fr; grid-template-areas: "img main" "img price" "qty action"; row-gap: var(--space-2); }
	.quote-row__img { grid-area: img; }
	.quote-row__main { grid-area: main; }
	.quote-row__price { grid-area: price; }
	.quote-row__qty { grid-area: qty; }
	.quote-row__action { grid-area: action; justify-self: end; }

	.spec-list { grid-template-columns: 1fr; }

	/* Sticky mobile call/quote bar */
	.sticky-bar {
		display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
		position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-header);
		background: var(--color-line);
		box-shadow: 0 -2px 12px rgba(26,26,26,.12);
	}
	.sticky-bar a { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3); background: #fff; font-weight: var(--fw-semi); font-family: var(--font-heading); }
	.sticky-bar a.is-primary { background: var(--color-brand); color: #fff; }
	.sticky-bar .icon { width: 18px; height: 18px; }
	body { padding-bottom: 56px; } /* room for sticky bar */
}

/* ---- Small mobile ---- */
@media (max-width: 560px) {
	.grid--tiles, .grid--auto { grid-template-columns: 1fr; }
	.cta-band { padding: var(--space-6) var(--space-5); }
}

/* ---- Mobile nav: expand submenus inline ---- */
@media (max-width: 1024px) {
	.mobile-nav .nav-menu { flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-4); }
	.mobile-nav .nav-menu > li { border-bottom: 1px solid var(--color-line); }
	.mobile-nav .menu-link { padding: var(--space-4) 0; justify-content: space-between; }
	.mobile-nav .menu-caret { display: none; }
	.mobile-nav .submenu-toggle { display: inline-flex; position: absolute; right: 0; top: var(--space-3); }
	.mobile-nav .sub-menu, .mobile-nav .mega-panel {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: 0; max-height: 0; overflow: hidden; padding: 0;
		transition: max-height var(--dur) var(--ease);
	}
	.mobile-nav li.is-expanded > .sub-menu, .mobile-nav li.is-expanded > .mega-panel { max-height: 1200px; padding-bottom: var(--space-3); }
	.mobile-nav .mega-panel__inner { grid-template-columns: 1fr; gap: var(--space-4); padding: 0 0 var(--space-3); }
	.mobile-nav li { position: relative; }
}

/* ---- Print ---- */
@media print {
	.site-header, .site-footer, .sticky-bar, .quote-drawer, .overlay { display: none !important; }
}