/*
 * WooCommerce-scope overrides, enqueued only on shop/cart/checkout/account
 * templates (see inc/assets.php). Phase 1 only resets Woo's default
 * clothing-store spacing/typography so it inherits Nexus Market's tokens;
 * the catalog grid, filter rail, and single-product buy box are built out
 * in Phase 3 and Phase 4.
 */

.woocommerce, .woocommerce-page {
	font-family: var(--nm-font-ui);
	color: var(--nm-color-ink-900);
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	font-family: var(--nm-font-ui);
	font-weight: 600;
	border-radius: var(--nm-radius-md);
	background: var(--nm-color-accent);
	color: var(--nm-color-on-accent);
	border: none;
	padding: 12px 20px;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background: var(--nm-color-accent-hover);
	color: var(--nm-color-on-accent);
}

.woocommerce-message, .woocommerce-info {
	border-top-color: var(--nm-color-accent);
}
.woocommerce-message::before, .woocommerce-info::before {
	color: var(--nm-color-accent);
}

/* =========================================================
   Baseline product grid — the full filterable shop archive
   (columns tied to Customizer, off-canvas filters) is a later
   phase; this keeps content-product.php's <li> items laid out
   correctly wherever WooCommerce's default <ul class="products">
   wrapper appears today (shop, category archives, related products).
   ========================================================= */
ul.products {
	display: grid;
	grid-template-columns: repeat(var(--nm-catalog-columns, 4), minmax(0, 1fr));
	gap: var(--nm-space-3);
	list-style: none;
	/* Side gutters: archive-product.php isn't overridden yet (Phase 3),
	   so WooCommerce's default template doesn't wrap this in .nm-container
	   — without these, the grid runs edge-to-edge on every viewport. */
	max-width: var(--nm-container);
	margin: 0 auto;
	padding-inline: var(--nm-space-4);
	padding-block: 0;
}
ul.products .nm-shop-loop-item { list-style: none; }

@media (max-width: 1024px) { ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
	ul.products {
		grid-template-columns: 1fr;
		padding-inline: var(--nm-space-3);
	}
}

.woocommerce-error {
	border-top-color: var(--nm-color-danger);
}

/* =========================================================
   Single product — two-column layout with sticky buy box.
   WooCommerce core markup (content-single-product.php, left
   untouched — see inc/single-product.php) already renders
   .woocommerce-product-gallery and .summary.entry-summary as
   siblings inside .product; this is purely a CSS layout, no
   template copy required.
   ========================================================= */

/*
 * WooCommerce's breadcrumb prints via its default single-product.php
 * wrapper (#primary/#main), which the theme deliberately leaves
 * unmodified (hooks only — see inc/single-product.php) — so it has no
 * side padding or centering of its own. Giving it the same container
 * treatment as everything else on the page instead of leaving it flush
 * against the viewport edge.
 */
.woocommerce-breadcrumb {
	max-width: var(--nm-container);
	margin-inline: auto;
	padding-inline: var(--nm-space-4);
	padding-block: var(--nm-space-3);
	font-size: 0.8125rem;
	color: var(--nm-color-ink-500);
}
.woocommerce-breadcrumb a { color: var(--nm-color-ink-700); }
.woocommerce-breadcrumb a:hover { color: var(--nm-color-accent); }

.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: var(--nm-space-6);
	align-items: start;
	max-width: var(--nm-container);
	margin-inline: auto;
	padding-block: var(--nm-space-6);
}

.single-product div.product .woocommerce-product-gallery {
	position: relative;
	border-radius: var(--nm-radius-lg);
	overflow: hidden;
	background: var(--nm-color-canvas-sunken);
}

.nm-single-product__gallery-wrap {
	position: relative;
}

.nm-single-product__top-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nm-space-4);
	padding-bottom: var(--nm-space-2);
	margin-bottom: var(--nm-space-3);
	border-bottom: 1px solid var(--nm-color-ink-200);
	font-size: 0.9375rem;
	font-weight: 600;
}
.nm-single-product__top-tab { color: var(--nm-color-ink-500); padding-bottom: var(--nm-space-2); }
.nm-single-product__top-tab:hover { color: var(--nm-color-ink-900); }
.nm-single-product__top-tab:first-child { color: var(--nm-color-ink-900); border-bottom: 2px solid var(--nm-color-accent); }

.nm-single-product__preview-overlay {
	position: absolute;
	inset: 0;
	margin: auto;
	width: fit-content;
	height: fit-content;
	z-index: 5; /* Above WC's own zoom/lightbox trigger button. */
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: var(--nm-radius-pill);
	background: rgba(24, 24, 27, 0.85);
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 600;
	opacity: 0;
	transform: scale(0.95);
	transition: opacity var(--nm-duration-fast) var(--nm-ease), transform var(--nm-duration-fast) var(--nm-ease);
}
.nm-single-product__gallery-wrap:hover .nm-single-product__preview-overlay,
.nm-single-product__preview-overlay:focus-visible {
	opacity: 1;
	transform: scale(1);
}
.nm-single-product__preview-overlay:hover { background: var(--nm-color-accent); }

/*
 * Disabling WooCommerce's default stylesheet (inc/woo.php) also removed
 * its own centering/sizing rules for the gallery — without these, images
 * render at native size, left-aligned, inside the flexslider wrapper.
 */
.woocommerce-product-gallery__wrapper { margin: 0; padding: 0; list-style: none; }
.woocommerce-product-gallery__image {
	display: block;
	text-align: center;
}
.woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
	object-fit: cover;
	aspect-ratio: 16 / 10;
}
.woocommerce-product-gallery__trigger { position: absolute; top: var(--nm-space-2); right: var(--nm-space-2); z-index: 4; }

/*
 * FlexSlider structural CSS (bundled with WooCommerce core, also removed
 * by disabling the default stylesheet). Theme support for
 * 'wc-product-gallery-slider' (inc/woo.php) makes WooCommerce enqueue the
 * flexslider script automatically on single product pages; that script
 * sets each slide's width/float/position inline via JS, but needs
 * .flex-viewport to actually clip to one slide at a time, and the
 * direction-nav arrows need real styling to be visible/usable at all —
 * without this block the gallery "works" (JS still swaps slides) but
 * looks like a single static image with no visible way to navigate it.
 */
.woocommerce-product-gallery .flex-viewport {
	position: relative;
	overflow: hidden;
}
.woocommerce-product-gallery ul.slides {
	margin: 0;
	padding: 0;
	list-style: none;
}
.woocommerce-product-gallery ul.slides > li {
	margin: 0;
}

.woocommerce-product-gallery .flex-direction-nav {
	margin: 0;
	padding: 0;
	list-style: none;
}
.woocommerce-product-gallery .flex-direction-nav li { display: contents; }
.woocommerce-product-gallery .flex-direction-nav a {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 36px;
	height: 36px;
	border-radius: var(--nm-radius-pill);
	background: rgba(255, 255, 255, 0.85);
	color: var(--nm-color-ink-900);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	transition: opacity var(--nm-duration-fast) var(--nm-ease), background-color var(--nm-duration-fast) var(--nm-ease);
	text-indent: -9999px; /* FlexSlider's own "Previous"/"Next" text stays for screen readers, hidden visually. */
	overflow: hidden;
}
.woocommerce-product-gallery .flex-direction-nav a::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 8px;
	height: 8px;
	border-inline-start: 2px solid currentColor;
	border-block-start: 2px solid currentColor;
	text-indent: 0;
}
.woocommerce-product-gallery .flex-direction-nav .flex-prev { left: var(--nm-space-2); }
.woocommerce-product-gallery .flex-direction-nav .flex-prev::before { transform: rotate(-45deg); }
.woocommerce-product-gallery .flex-direction-nav .flex-next { right: var(--nm-space-2); }
.woocommerce-product-gallery .flex-direction-nav .flex-next::before { transform: rotate(135deg); }

.woocommerce-product-gallery:hover .flex-direction-nav a,
.woocommerce-product-gallery .flex-direction-nav a:focus-visible {
	opacity: 1;
}
.woocommerce-product-gallery .flex-direction-nav a:hover { background: #fff; }
.woocommerce-product-gallery .flex-direction-nav a.disabled { display: none; }

/* Thumbnail strip below the main slider — click swaps the active slide. */
.flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nm-space-2);
	margin: var(--nm-space-2) 0 0;
	padding: 0;
	list-style: none;
}
.flex-control-thumbs li { width: calc(25% - var(--nm-space-2) * 3 / 4); }
.flex-control-thumbs img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--nm-radius-sm);
	cursor: pointer;
	opacity: 0.7;
}
.flex-control-thumbs img.flex-active,
.flex-control-thumbs img:hover { opacity: 1; outline: 2px solid var(--nm-color-accent); }

.single-product div.product .summary.entry-summary {
	background: var(--nm-color-canvas-raised);
	border: 1px solid var(--nm-color-ink-200);
	border-radius: var(--nm-radius-lg);
	padding: var(--nm-space-4);
	box-shadow: var(--nm-shadow-sm);
	/* Non-sticky: scrolls with the rest of the page like a normal column. */
}

.single-product div.product .summary.entry-summary .product_title {
	font-size: 1.5rem;
	margin-bottom: var(--nm-space-2);
}

.nm-single-product__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: var(--nm-space-2);
}

.single-product div.product .price {
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--nm-color-ink-900);
}

.single-product div.product .cart {
	margin-block: var(--nm-space-3);
}

/*
 * Quantity stepper: WooCommerce ships a bare number input with no +/-
 * buttons; assets/js/quantity-stepper.js injects real ones and wraps the
 * group in this same .quantity element (adds .nm-qty-stepper once done).
 * Styled as a pill so the round buttons and centered input read as one
 * control rather than three separate ones.
 */
.single-product div.product .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--nm-color-ink-200);
	border-radius: var(--nm-radius-pill);
	overflow: hidden;
	margin-inline-end: var(--nm-space-2);
}
.single-product div.product .quantity input.qty {
	width: 48px;
	border: none;
	text-align: center;
	padding: 12px 0;
	font-size: 0.9375rem;
	-moz-appearance: textfield;
}
.single-product div.product .quantity input.qty::-webkit-inner-spin-button,
.single-product div.product .quantity input.qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.nm-qty-stepper__btn {
	width: 40px;
	height: 44px;
	flex: none;
	border: none;
	background: var(--nm-color-canvas-sunken);
	color: var(--nm-color-ink-700);
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
}
.nm-qty-stepper__btn:hover { background: var(--nm-color-ink-100); color: var(--nm-color-ink-900); }

/*
 * Wide, prominent Add to Cart button — WooCommerce's own class
 * (single_add_to_cart_button), not one of the theme's own .nm-btn
 * variants, so it needs its own rule.
 */
.single-product div.product .single_add_to_cart_button.button {
	display: block;
	width: 100%;
	padding: 16px;
	margin-top: var(--nm-space-3);
	border-radius: var(--nm-radius-pill);
	font-size: 1rem;
	font-weight: 700;
	text-align: center;
}

.nm-single-product__meta-rail {
	margin-top: var(--nm-space-4);
	padding-top: var(--nm-space-4);
	border-top: 1px solid var(--nm-color-ink-200);
}
.nm-single-product__meta-actions {
	display: flex;
	gap: var(--nm-space-2);
	margin-bottom: var(--nm-space-3);
}
.nm-single-product__meta-actions .nm-btn { flex: 1; }

.nm-single-product__meta-list { margin: 0; }
.nm-single-product__meta-row {
	display: flex;
	justify-content: space-between;
	gap: var(--nm-space-3);
	padding-block: 6px;
	font-size: 0.875rem;
	border-bottom: 1px dashed var(--nm-color-ink-200);
}
.nm-single-product__meta-row:last-child { border-bottom: none; }
.nm-single-product__meta-row dt { color: var(--nm-color-ink-500); }
.nm-single-product__meta-row dd { margin: 0; font-weight: 600; text-align: right; }

.nm-single-product__guarantee {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8125rem;
	color: var(--nm-color-ink-700);
	background: var(--nm-color-accent-soft);
	border-radius: var(--nm-radius-md);
	padding: 10px 12px;
	margin-top: var(--nm-space-3);
}
.nm-single-product__guarantee a { color: var(--nm-color-accent); font-weight: 600; }

.nm-single-product__share-wishlist {
	display: flex;
	gap: var(--nm-space-2);
	margin-top: var(--nm-space-3);
}

.nm-changelog-display { width: 100%; border-collapse: collapse; margin-top: var(--nm-space-3); }
.nm-changelog-display th,
.nm-changelog-display td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--nm-color-ink-200);
	font-size: 0.875rem;
}
.nm-changelog-display th { color: var(--nm-color-ink-500); font-weight: 600; }

@media (max-width: 900px) {
	.single-product div.product {
		grid-template-columns: 1fr;
	}
}

/*
 * WooCommerce's content-single-product.php renders the product tabs,
 * upsells, AND related products as extra direct children of the same
 * .product div that wraps the gallery + summary (all hooked onto
 * woocommerce_after_single_product_summary, still inside the div's
 * closing tag). Without this, the 2-column grid above would pull tabs/
 * upsells/related into its grid-template-columns: 1fr 380px track instead
 * of letting them run full width below — this is what actually makes
 * related products appear "in a row" rather than squeezed into one column.
 */
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .upsells.products,
.single-product div.product > .related.products {
	grid-column: 1 / -1;
}

.single-product div.product > .woocommerce-tabs {
	margin-top: var(--nm-space-3);
}

.single-product div.product > .upsells.products,
.single-product div.product > .related.products {
	margin-top: var(--nm-space-6);
	padding-top: var(--nm-space-6);
	border-top: 1px solid var(--nm-color-ink-200);
}

.single-product div.product > .upsells.products > h2,
.single-product div.product > .related.products > h2 {
	font-size: 1.375rem;
	margin-bottom: var(--nm-space-4);
}

/* The generic ul.products rule (above) adds page-level side gutters for
   the shop archive, where WooCommerce's default template isn't wrapped in
   .nm-container yet. Upsells/related nest inside .single-product div.product,
   which already has its own max-width + centering — cancel the duplicate
   gutter there so the row isn't narrower than the gallery/summary above it. */
.single-product div.product ul.products {
	max-width: none;
	margin: 0;
	padding-inline: 0;
}

/* =========================================================
   Shop archive: header, toolbar (result count / sort tabs /
   view toggle), sidebar filters, active filter chips, list
   view, empty state. See woocommerce/archive-product.php and
   inc/shop-filters.php.
   ========================================================= */

.nm-shop { padding-block: var(--nm-space-5) var(--nm-space-7); }

.nm-shop__header { margin-bottom: var(--nm-space-4); }

.nm-shop__search {
	display: flex;
	width: 100%;
	margin-bottom: var(--nm-space-4);
	border: 1px solid var(--nm-color-ink-200);
	border-radius: 0; /* Rectangular, not the pill shape used elsewhere. */
	overflow: hidden;
}
.nm-shop__search input {
	flex: 1;
	min-width: 0;
	border: none;
	padding: 14px 18px;
	font-size: 0.9375rem;
	background: var(--nm-color-canvas-raised);
}
.nm-shop__search input:focus { outline: none; }
.nm-shop__search .nm-btn {
	border-radius: 0;
	flex: none;
	padding-inline: var(--nm-space-5);
}
.nm-shop__title { margin-bottom: var(--nm-space-1); }
.nm-shop__description { color: var(--nm-color-ink-500); max-width: 60ch; }

.nm-shop__toolbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--nm-space-3);
	padding-block: var(--nm-space-3);
	border-block: 1px solid var(--nm-color-ink-200);
	margin-bottom: var(--nm-space-3);
}
.nm-shop__result-count { color: var(--nm-color-ink-500); font-size: 0.875rem; }
.nm-shop__filters-toggle { display: none; }

.nm-shop__sort {
	display: flex;
	gap: 4px;
	margin-inline-start: auto;
	flex-wrap: wrap;
}
.nm-shop__sort-tab {
	padding: 8px 14px;
	border-radius: var(--nm-radius-pill);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--nm-color-ink-700);
}
.nm-shop__sort-tab:hover { background: var(--nm-color-ink-100); }
.nm-shop__sort-tab.is-active { background: var(--nm-color-ink-900); color: #fff; }

.nm-shop__view-toggle { display: flex; gap: 4px; border: 1px solid var(--nm-color-ink-200); border-radius: var(--nm-radius-md); padding: 3px; }
.nm-shop__view-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: var(--nm-radius-sm);
	color: var(--nm-color-ink-500);
}
.nm-shop__view-btn.is-active { background: var(--nm-color-ink-100); color: var(--nm-color-ink-900); }

.nm-active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--nm-space-2);
	margin-bottom: var(--nm-space-4);
}
.nm-active-filters__chip { display: inline-flex; align-items: center; gap: 6px; }
.nm-active-filters__clear-all { font-size: 0.8125rem; color: var(--nm-color-ink-500); text-decoration: underline; }

.nm-shop__layout {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: var(--nm-space-5);
	align-items: start;
}

.nm-shop-filters {
	position: sticky;
	top: var(--nm-space-4);
	border: 1px solid var(--nm-color-ink-200);
	border-radius: var(--nm-radius-lg);
	background: var(--nm-color-canvas-raised);
	padding: var(--nm-space-3);
	max-height: calc(100vh - var(--nm-space-6));
	overflow-y: auto;
}
.nm-shop-filters__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--nm-space-2); }
.nm-shop-filters__head h2 { font-size: 1rem; margin: 0; }
.nm-shop-filters__close { display: none; background: none; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--nm-color-ink-500); }

.nm-shop-filters__group { padding-block: var(--nm-space-3); border-top: 1px solid var(--nm-color-ink-200); }
.nm-shop-filters__group:first-of-type { border-top: none; padding-top: 0; }
.nm-shop-filters__group h3 { font-size: 0.875rem; margin: 0 0 var(--nm-space-2); }

.nm-shop-filters__categories,
.nm-shop-filters__subcategories,
.nm-shop-filters__list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.875rem;
}
.nm-shop-filters__categories > li { margin-bottom: 2px; }
.nm-shop-filters__categories a,
.nm-shop-filters__subcategories a {
	display: flex;
	justify-content: space-between;
	gap: var(--nm-space-2);
	padding: 6px 8px;
	border-radius: var(--nm-radius-sm);
	color: var(--nm-color-ink-700);
}
.nm-shop-filters__categories a:hover,
.nm-shop-filters__subcategories a:hover { background: var(--nm-color-ink-100); }
.nm-shop-filters__categories a.is-current,
.nm-shop-filters__subcategories a.is-current { background: var(--nm-color-accent-soft); color: var(--nm-color-accent); font-weight: 600; }
.nm-shop-filters__subcategories { padding-inline-start: var(--nm-space-3); }
.nm-shop-filters__count { color: var(--nm-color-ink-500); font-variant-numeric: tabular-nums; }
.nm-shop-filters__categories a.is-current .nm-shop-filters__count { color: inherit; }

.nm-shop-filters__list li { margin-bottom: 6px; }
.nm-shop-filters__list label,
.nm-shop-filters__toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	color: var(--nm-color-ink-700);
}

.nm-shop-filters__price-range { display: flex; align-items: center; gap: 8px; }
.nm-shop-filters__price-range input {
	width: 0;
	flex: 1;
	padding: 8px 10px;
	border: 1px solid var(--nm-color-ink-200);
	border-radius: var(--nm-radius-sm);
	font-size: 0.875rem;
}

.nm-shop-filters__actions { padding-top: var(--nm-space-3); display: flex; flex-direction: column; gap: 8px; }
.nm-shop-filters__clear { text-align: center; font-size: 0.8125rem; color: var(--nm-color-ink-500); text-decoration: underline; }

.nm-shop__filters-backdrop { display: none; }

.nm-shop__empty { text-align: center; padding-block: var(--nm-space-7); }
.nm-shop__empty h2 { margin-bottom: var(--nm-space-2); }
.nm-shop__empty p { color: var(--nm-color-ink-500); margin-bottom: var(--nm-space-4); }
.nm-shop__empty-categories { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--nm-space-2); }

/* List view: image left, description centre, price/rating/cart right —
   three real columns (not just the grid card flipped sideways), built on
   the __info / __side wrapper groups inside .nm-product-card__body. Same
   card markup as grid view; see nm_render_product_card() in
   inc/template-tags.php. */
ul.products.nm-products--list {
	display: flex;
	flex-direction: column;
	gap: var(--nm-space-3);
}
.nm-products--list .nm-product-card {
	display: flex;
	flex-direction: row;
	min-height: 200px;
}
.nm-products--list .nm-product-card__cover {
	flex: none;
	width: 40%;
	max-width: 460px;
	max-height: 200px; /* Caps the height directly — aspect-ratio alone was making it taller than min-height on the row. */
	aspect-ratio: 4 / 3;
}
.nm-products--list .nm-product-card__body {
	flex: 1;
	flex-direction: row;
	align-items: center;
	gap: var(--nm-space-4);
	padding: var(--nm-space-3) var(--nm-space-4);
}
.nm-products--list .nm-product-card__info {
	flex: 1;
	min-width: 0;
	justify-content: center; /* base display:flex/column already set in main.css */
}
.nm-products--list .nm-product-card__pitch {
	-webkit-line-clamp: 2;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.nm-products--list .nm-product-card__side {
	flex: 0 0 200px;
	align-items: flex-end;
	text-align: right;
	padding-inline-start: var(--nm-space-4);
	border-inline-start: 1px solid var(--nm-color-ink-200);
	align-self: stretch;
	justify-content: center;
	position: relative; /* Anchors the top-right icon row below. */
}

.nm-products--list .nm-product-card__side-icons {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	width: 100%;
}

.nm-products--list .nm-product-card__updated {
	display: block;
	font-size: 0.75rem;
	color: var(--nm-color-ink-500);
	margin: 0;
}

/* Grid view puts price + actions side by side (see main.css
   .nm-product-card__price-row); list view's column is too narrow for
   that plus buttons on one line, so stack them instead. */
.nm-products--list .nm-product-card__price-row {
	flex-direction: column;
	align-items: flex-end;
	gap: var(--nm-space-2);
	width: 100%;
}
.nm-products--list .nm-product-card__price { font-size: 1.125rem; }
.nm-products--list .nm-product-card__actions {
	width: 100%;
	justify-content: flex-end;
}
.nm-products--list .nm-product-card__cart-btn {
	width: 46px;
	height: 46px;
}
/* .nm-product-card__preview-btn's color, background, border, and hover
   state are all defined once in assets/css/main.css and apply here too —
   nothing list-view-specific left to override. */

@media (max-width: 900px) {
	.nm-products--list .nm-product-card { flex-direction: column; }
	.nm-products--list .nm-product-card__cover { width: 100%; aspect-ratio: 16 / 10; }
	.nm-products--list .nm-product-card__body { flex-direction: column; align-items: stretch; }
	.nm-products--list .nm-product-card__side {
		flex: none;
		align-items: flex-start;
		text-align: left;
		padding-inline-start: 0;
		padding-top: var(--nm-space-3);
		border-inline-start: none;
		border-top: 1px solid var(--nm-color-ink-200);
	}
	.nm-products--list .nm-product-card__price-row { align-items: flex-start; }
}

@media (max-width: 900px) {
	.nm-shop__layout { grid-template-columns: 1fr; }
	.nm-shop__filters-toggle { display: inline-flex; }

	.nm-shop-filters {
		position: fixed;
		inset-block: 0;
		inset-inline-start: 0;
		width: min(320px, 85vw);
		max-height: none;
		border-radius: 0;
		z-index: 100;
		transform: translateX(-100%);
		transition: transform var(--nm-duration-base) var(--nm-ease);
	}
	.nm-shop-filters.is-open { transform: translateX(0); }
	.nm-shop-filters__close { display: block; }

	.nm-shop__filters-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.4);
		z-index: 90;
		opacity: 0;
		pointer-events: none;
		transition: opacity var(--nm-duration-base) var(--nm-ease);
	}
	.nm-shop__filters-backdrop.is-visible { opacity: 1; pointer-events: auto; }
}

body.nm-no-scroll { overflow: hidden; }