/* ==========================================================================
   Apex — responsive rules. Mobile-first overrides layered on top of the
   desktop-default component CSS. Breakpoints: 480 / 768 / 1024 / 1280 / 1536.
   ========================================================================== */

/* ---------- ≤1280px: 3-column product grid ---------- */
@media (max-width: 1280px) {
	ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ---------- ≤1024px: tablet — switch header to mobile nav pattern ---------- */
@media (max-width: 1024px) {
	ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: var(--space-4) !important; }
	.apex-card__quick-view { opacity: 1; transform: none; }
	.apex-quick-view { grid-template-columns: 1fr; }

	.apex-hero { min-height: 340px; }
	.apex-hero__slides { min-height: 340px; }
	.apex-hero__arrow { width: 40px; height: 40px; font-size: 1.4rem; }

	.apex-category-grid { grid-template-columns: repeat(2, 1fr); }
	.apex-why-grid { grid-template-columns: repeat(2, 1fr); }
	.apex-blog-grid { grid-template-columns: repeat(2, 1fr); }
	.apex-cta__inner { text-align: center; justify-content: center; }

	.woocommerce-account .col2-set { grid-template-columns: minmax(0, 1fr); }
	/* WooCommerce's own core CSS sizes .col-1/.col-2 to width:48% for the
	   two-up desktop layout; that survives the parent switching to a single
	   grid column and, combined with a grid item's default min-width:auto,
	   was overflowing the card by a few px on the narrowest phones instead
	   of the column simply taking the full row. */
	.woocommerce-account .col2-set .col-1,
	.woocommerce-account .col2-set .col-2 {
		width: 100%;
		min-width: 0;
	}
	.woocommerce-account.logged-in .woocommerce { grid-template-columns: minmax(0, 1fr); }

	/* Product page: buy-box drops below the gallery and stops being sticky */
	.apex-pdp__grid {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
	}
	.apex-pdp__gallery { grid-column: 1; grid-row: 1; }
	.apex-pdp__buybox {
		grid-column: 1;
		grid-row: 2;
		position: static;
		margin-top: var(--space-6);
	}
	.apex-pdp__below { grid-column: 1; grid-row: 3; }
	.apex-pair-with__grid { grid-template-columns: 1fr; }
	.apex-review-summary { flex-direction: column; align-items: stretch; }
	.apex-dashboard-cards { grid-template-columns: repeat(2, 1fr); }
	.apex-mobile-nav-toggle { display: flex; }

	.apex-header-main__inner {
		grid-template-columns: auto 1fr auto;
		grid-template-areas: "toggle logo actions";
	}
	.apex-header-search { display: none; }
	.apex-header-search-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; }

	.apex-header-action__label { display: none; }
	.apex-header-actions { gap: var(--space-3); }
	/* Cart's own "CART / £0.00" text block isn't covered by the label rule
	   above (different markup) — without hiding it too, the button was
	   wide enough to overflow off the right edge of the viewport. */
	.apex-cart-link__text { display: none; }
	.apex-cart-link { padding: 0.6em 0.75em; gap: 0; }
	.apex-cart-link .apex-badge { margin-left: 4px; }

	/* Desktop mega/flyout bar is replaced entirely by the off-canvas drawer */
	.apex-primary-nav { display: none; }

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

	.apex-footer__columns {
		/* minmax(0, 1fr), not plain 1fr: a bare 1fr track still won't shrink
		   below its content's min-content width, so the brand column (logo +
		   blurb + contact list) was overflowing past the actual column edge
		   on any phone narrower than ~380px instead of wrapping its text. */
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	.apex-footer__col--brand { grid-column: 1 / -1; }
}

/* ---------- ≤768px: mobile ---------- */
@media (max-width: 768px) {
	/* Any text input under 16px triggers an automatic page-zoom on focus
	   in iOS Safari — feels like the site is broken/glitchy the moment a
	   field is tapped. Forcing 16px everywhere prevents that. */
	input[type="text"], input[type="email"], input[type="password"],
	input[type="search"], input[type="tel"], input[type="number"],
	input[type="url"], textarea, select {
		font-size: 16px !important;
	}

	.apex-utility-bar__hours { display: none; }
	.apex-utility-bar__inner { justify-content: space-between; }

	.apex-logo__img { height: 38px; }
	.apex-search-form { min-height: 46px; }
	.apex-search-form__submit { width: 48px; }

	.apex-trust-bar__inner { grid-template-columns: 1fr; gap: var(--space-3); }
	.apex-trust-bar__item { padding-block: var(--space-1); }

	.apex-footer__columns { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); text-align: left; }
	.apex-footer-bottom__inner { flex-direction: column; text-align: center; }

	.apex-category-grid { grid-template-columns: 1fr; }
	.apex-why-grid { grid-template-columns: 1fr; }
	.apex-blog-grid { grid-template-columns: 1fr; }
	.apex-section-heading { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
	.apex-section-heading--center { align-items: center; }

	ul.products { grid-template-columns: repeat(2, 1fr) !important; }

	/* The result-count text and the view-toggle+sort controls sit on one row
	   via flex-wrap, which only wraps whole items — on a category whose
	   result-count text happens to leave a little less room than others
	   (e.g. Air Conditioning, Wall Panel), the controls block itself is wider
	   than what's left and runs off the right edge instead of wrapping.
	   Stacking unconditionally on mobile removes that content-length
	   dependency entirely. */
	.apex-shop-toolbar { flex-direction: column; align-items: stretch; }
	/* Nested padding (.col-full > .apex-shop-layout > .apex-shop-main) leaves
	   this row only ~230px wide on a phone, which isn't quite enough for the
	   view-toggle buttons and a "Default sorting"-length option side by side
	   without clipping the select's own text. Wrapping gives the dropdown a
	   full-width row of its own instead of splitting the space. */
	.apex-shop-toolbar__right { flex-wrap: wrap; justify-content: space-between; width: 100%; row-gap: var(--space-2); }
	.apex-shop-toolbar .woocommerce-ordering { flex: 1 1 100%; min-width: 0; width: 100%; }
	.apex-shop-toolbar select.orderby { width: 100%; }
}

/* ---------- ≤1024px: shop filter sidebar becomes a slide-in drawer ---------- */
@media (max-width: 1024px) {
	.apex-shop-layout {
		display: block;
		padding-top: var(--space-4);
	}
	.apex-filter-mobile-toggle { display: inline-flex; margin-bottom: var(--space-6); }

	.apex-shop-sidebar {
		position: fixed;
		top: 0; left: 0;
		height: 100%;
		width: min(340px, 90vw);
		max-width: none;
		max-height: none;
		border-radius: 0;
		overflow-y: auto;
		transform: translateX(-100%);
		transition: transform .25s ease;
		/* Storefront's #masthead is position:relative;z-index:999 — since this
		   drawer lives inside #content (no stacking context of its own), it
		   must exceed 999 or the sticky header paints in front of it. */
		z-index: 1100;
		/* One shorthand, not a `padding-bottom` followed by a `padding`
		   shorthand that silently resets it — that ordering left only 32px of
		   clearance under a 74px-tall pinned action bar, so the bottom of the
		   filter list sat underneath the Clear / Show-results buttons.
		   The bottom value must stay comfortably above that bar's height. */
		padding: 0 var(--space-4) 110px;
	}
	.apex-shop-sidebar.is-open { transform: translateX(0); }
	.apex-filter-overlay {
		display: none;
		position: fixed; inset: 0;
		background: rgba(1,21,54,.5);
		z-index: 1090;
	}
	.apex-filter-overlay.is-open { display: block; }
	.apex-shop-sidebar__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: sticky;
		top: 0;
		background: var(--color-bg-alt);
		padding-block: var(--space-4);
		margin-bottom: var(--space-2);
		border-bottom: 1px solid var(--color-border);
	}
	.apex-shop-sidebar__close { background: var(--color-bg); border: 0; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }

	/* Pinned Clear / Show-results bar. Without it, applying filters on a
	   phone means scrolling back up past every group to find the close
	   button — the drawer's most common complaint. */
	.apex-shop-sidebar__actions {
		display: flex;
		gap: var(--space-3);
		position: fixed;
		bottom: 0;
		left: 0;
		width: min(340px, 90vw);
		padding: var(--space-4);
		background: var(--color-bg-alt);
		border-top: 1px solid var(--color-border);
		box-shadow: 0 -4px 16px rgba(1, 32, 79, .08);
		z-index: 1;
	}
	.apex-shop-sidebar__actions .apex-btn { flex: 1; }

	/* The header already carries a Clear all link on mobile. */
	.apex-shop-sidebar__title-row .apex-shop-sidebar__clear { display: none; }
}

/* ---------- ≤480px: small mobile ---------- */
@media (max-width: 480px) {
	.apex-header-actions { gap: var(--space-3); }
	.apex-utility-bar__phone span { display: none; }
	ul.products { grid-template-columns: 1fr !important; }
	.apex-hero { min-height: 220px; }
	.apex-hero__slides { min-height: 220px; }
	.apex-hero__arrow { display: none; }

	/* The 2-column dashboard summary grid (Orders/Addresses/Account/Shop)
	   never got a phone-width override, so the second column ran off the
	   right edge of narrow screens. */
	.apex-dashboard-cards { grid-template-columns: 1fr; }

	.apex-whatsapp-fab { width: 48px; height: 48px; right: 14px; bottom: 14px; }
	.apex-whatsapp-fab svg { width: 26px; height: 26px; }
}

/* ---------- ≥1280px: comfortable desktop spacing ---------- */
@media (min-width: 1280px) {
	.apex-nav-menu > .menu-item > a { padding-inline: var(--space-6); }
}