/**
 * Mobile-first: everything else is single-column/base styling. These
 * breakpoints layer on tablet and desktop layout only.
 */

/* --- Tablet (768px+) --- */
@media (min-width: 48em) {
	.value-props-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.category-tile-grid {
		grid-template-columns: repeat(3, 1fr);
	}

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

	.footer-columns {
		/* auto-fit, not a fixed repeat(4, 1fr): the About column only renders
		   while its pages exist (see footer.php), and the remaining columns
		   should share the row instead of leaving an empty track. */
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	}

	.footer-column-brand {
		grid-column: auto;
	}

	.newsletter-block {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.newsletter-form {
		flex-wrap: nowrap;
	}

	.woocommerce-checkout .col2-set {
		grid-template-columns: 3fr 2fr;
	}
}

/* --- Desktop (64em / 1024px+) --- */
@media (min-width: 64em) {
	.mobile-nav-toggle,
	.mobile-nav,
	.filter-drawer-toggle,
	.filter-clear-link {
		display: none;
	}

	.category-nav {
		display: block;
	}

	.category-tile-grid {
		grid-template-columns: repeat(5, 1fr);
	}

	.hero {
		padding-block: var(--space-4xl);
	}

	.hero-inner {
		grid-template-columns: 1.1fr 1fr;
	}

	.hero-media {
		justify-self: end;
	}

	/* Two columns only when the filter sidebar actually has widgets —
	   otherwise the grid would reserve an empty track and squeeze the
	   product grid into it. 240px gives the price slider and attribute
	   lists comfortable room while the results area still fits four cards. */
	.shop-layout--has-filters {
		grid-template-columns: 240px minmax(0, 1fr);
		column-gap: var(--space-2xl);
	}

	/* Desktop: the filter drawer becomes a permanent inline sidebar instead
	   of an off-canvas panel — override both the [hidden] attribute and the
	   fixed/transform drawer positioning used on mobile. */
	.shop-filters[hidden] {
		display: block;
		visibility: visible;
	}

	.shop-filters-panel {
		position: static;
		width: auto;
		transform: none;
		box-shadow: none;
		background: transparent;
		padding: 0;
		border-radius: 0;
		/* The mobile drawer's overflow-y:auto must not carry over: a scroll
		   container in one axis forces the other axis to auto too, which is
		   what put a horizontal scrollbar under the filters. */
		overflow: visible;
	}

	.shop-filters-overlay {
		display: none;
	}

	.shop-filters-header {
		display: none;
	}

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

	.cart-collaterals {
		grid-template-columns: 1fr 1fr;
	}

	.sticky-add-to-cart {
		display: none;
	}
}

/* --- Wide desktop (80em / 1280px+): 4 cards per row everywhere --- */
@media (min-width: 80em) {
	ul.products {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Related products stay a single row of 4 (they're capped at 4). */
}