/* =========================================================
   responsive.css — loaded last so these rules win
   ========================================================= */

@media (max-width: 1024px) {

	.masthead__inner { gap: 24px; }

	.nav {
		position: absolute;
		top: 100%; left: 0; right: 0;
		display: none;
		padding: 16px var(--gutter) 24px;
		background: var(--paper);
		border-bottom: 1px solid var(--line);
	}

	.nav.is-open { display: block; }

	.nav__list { flex-direction: column; gap: 4px; }
	.nav__list a { padding: 12px 0; font-size: 15px; }

	.nav-toggle { display: block; }

	.masthead { position: relative; }

	.grid,
	.cats,
	.services__inner,
	.reviews,
	.trends { grid-template-columns: repeat(2, 1fr); }

	.brands__list { grid-template-columns: repeat(4, 1fr); }
	.brand-tiles { grid-template-columns: repeat(3, 1fr); }
	.about-stats__inner { grid-template-columns: repeat(2, 1fr); }
	.about-values { grid-template-columns: 1fr; }
	.contact { grid-template-columns: 1fr; gap: 40px; }

	.woocommerce-checkout form.checkout { grid-template-columns: 1fr; gap: 32px; }
	.woocommerce-checkout #order_review,
	.woocommerce-checkout #order_review_heading { position: static; }

	.shop { grid-template-columns: 1fr; }

	.shop__filter-toggle { display: flex; }

	.filters {
		position: fixed;
		inset: 0 20% 0 0;
		z-index: 100;
		overflow-y: auto;
		background: var(--paper);
		padding: 20px var(--gutter) 40px;
		transform: translateX(-100%);
		transition: transform .25s ease;
		box-shadow: 20px 0 40px rgba(16, 16, 19, .15);
	}

	.filters.is-open { transform: translateX(0); }

	.filters__head { display: flex; }
	.filters__close { display: block; }

	.product { grid-template-columns: 1fr; gap: 36px; }
	.product__stage { aspect-ratio: 4 / 3; }

	.hero { height: 560px; }
	.hero__arrow { width: 40px; height: 40px; }

	.promo__inner,
	.signup__inner,
	.footer__inner { grid-template-columns: 1fr; }

	.footer__inner { gap: 32px; }
}

@media (max-width: 640px) {

	:root { --gutter: 18px; }

	.cart-drawer { width: 100vw; }

	.tool:not(.tool--cart) { display: none; }

	.grid { gap: 26px 16px; }

	.cats,
	.services__inner,
	.trends { grid-template-columns: 1fr; }

	.brands__list { grid-template-columns: repeat(3, 1fr); gap: 10px; }
	.brand-tiles { grid-template-columns: repeat(2, 1fr); }
	.contact__map { aspect-ratio: 4 / 3; }
	.about-stats__inner { grid-template-columns: repeat(2, 1fr); gap: 16px; }

	.woocommerce-checkout .form-row-first,
	.woocommerce-checkout .form-row-last { width: 100%; float: none; }
	.woocommerce-order-received ul.woocommerce-order-overview { grid-template-columns: repeat(2, 1fr); }
	.brands__name { font-size: 13px; }

	.filters { inset: 0; }

	.shop__toolbar { flex-direction: column; align-items: flex-start; gap: 12px; }
	.shop__sort select { width: 100%; }

	.product__actions { flex-wrap: wrap; }
	.product__add { flex: 1 1 100%; }
	.product__thumbs { grid-template-columns: repeat(4, 1fr); gap: 8px; }

	.ranked__num { width: 28px; height: 28px; font-size: 12px; }

	.section__head { flex-direction: column; align-items: flex-start; gap: 12px; }

	.reviews { padding-block: 64px; }
	.reviews__track { min-height: 300px; }
	.review__who { text-align: center; }

	.hero { height: 480px; }
	.hero__copy { padding-block: 32px; }
	.hero__arrow--prev { left: 10px; }
	.hero__arrow--next { right: 10px; }

	.signup__form { flex-direction: column; }

	.footer__inner { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}