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

/* --- Tablet (768px+) --- */
@media (min-width: 48em) {
	/* Bigger brand mark once there's room for it. Past 64px the logo no longer
	   fits the phone header, so --header-height grows with it here rather than
	   letting the image stretch the sticky bar to an arbitrary height — the
	   token stays the single source of truth for header height, and the 16px
	   of margin around the mark is deliberate. */
	:root {
		--header-height: 96px;
	}

	.site-branding img.custom-logo {
		height: 80px;
	}

	.footer-column-brand img.custom-logo {
		height: 160px;
	}

	.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);
	}

	/* Still two cards per row, but on a tablet-width screen each one is wide
	   enough for the full-size chip again (see components.css for why the
	   phone gets the smaller one). Whether the category/tag pair then shares
	   a line or wraps is left to the flex container — it resolves that per
	   card, from the actual term lengths. */
	.product-card-chip {
		font-size: 0.68rem;
		letter-spacing: 0.06em;
		padding: 5px 11px;
	}

	.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;
	}

	.signup-offer-block {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-2xl);
	}

	/* Row layout: the button no longer needs the column-mode align-self, and
	   shouldn't shrink under the copy beside it. */
	.signup-offer-button {
		align-self: auto;
		flex-shrink: 0;
	}
}

/* --- 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);
	}

	/* 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;
	}

	/* Desktop has room in the header row, so the switcher moves out of the
	   mobile drawer (which is itself hidden at this width) and into the
	   header actions. */
	.site-header-actions .currency-switcher {
		display: flex;
	}
}

/* --- 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). */
}