/**
 * WooCommerce page-specific styles.
 * Only enqueued on shop, product, cart, checkout and account pages —
 * see inc/enqueue/styles.php.
 */
.myshop-shop-context .site-content {
	background-color: var(--color-surface);
}

.myshop-shop-context .price {
	color: var(--color-text);
}

.myshop-shop-context .price ins {
	color: var(--color-primary);
	text-decoration: none;
}

.myshop-shop-context .price del {
	color: var(--color-text-muted);
}

/*
 * WooCommerce's own shop-loop grid (WC 8+) sizes itself off a
 * --columns custom property tied to the loop_shop_columns filter
 * (inc/woocommerce/woocommerce-setup.php returns a flat 3) — fine at one
 * width, artificially narrow-looking at 1600px+ and cramped on small
 * tablets. auto-fit/minmax replaces that with a genuinely fluid column
 * count instead of a fixed number forced at every viewport; !important
 * is needed because WC's own rule carries an inline custom-property-based
 * value that would otherwise win.
 */
.woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)) !important;
	gap: clamp(1rem, 1.8vw, 1.75rem);
}

/*
 * li.product's own reset (float/clear/width/margin/min-width) now lives
 * entirely in components/cards.css, unscoped by page context — it already
 * covers this Shop-archive grid too, so it isn't repeated here. One
 * canonical definition, not one per page that renders the product loop.
 */

/*
 * Cart/checkout forms stay inside the "wide" variant, not the full
 * --layout-max-width — a checkout form stretched to ~1600px would leave
 * text inputs uncomfortably wide even though the page around it can use
 * that space. The .woocommerce root element is WC's own wrapper around
 * both the cart table and the checkout's two-column form.
 */
.woocommerce-checkout .woocommerce,
.woocommerce-cart .woocommerce {
	max-width: var(--layout-wide-max-width);
	margin-inline: auto;
}