/*
 * Catalogue: shop, product category, product cards.
 *
 * Owned by the product-listing workstream.
 *
 * THE VISUAL IDEA
 *
 * The photography is the card. Everything else is set back: no card border, no card
 * background, no shadow, no badge shelf. Each product and each category sits on a square
 * media panel tinted with --surface, so a cut-out product photograph reads as an object on
 * a surface rather than as a picture in a box. Below it, three lines at most — name, price,
 * one action — and a lot of air between rows.
 *
 * That is also why /shop/ works: this store browses by CATEGORY, so the category tile is
 * the primary navigation control on the site and gets the same treatment as a product,
 * one size up.
 *
 * Every value is a token from theme.json — no hardcoded colours, no viewport breakpoints.
 * Layout responds through container queries on `catalog` (the <main>) and `card` (each
 * product tile), so a component reflows to the space it is given, not to the window.
 */

/* ---------------------------------------------------------------- the page */

/*
 * The catalogue is the query container. Everything below reflows against the width of the
 * archive itself, so dropping this markup into a narrower column keeps working.
 */
.nv-shop {
	container-type: inline-size;
	container-name: catalog;
}

.nv-shop .woocommerce-breadcrumb {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--sm);
}

/* The 44px floor for breadcrumb links lives in shell.css — it is the only stylesheet loaded
   on every page, and /cart/ has a breadcrumb but does not load this file. */
.nv-shop .woocommerce-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.nv-shop .woocommerce-breadcrumb a:hover {
	color: var(--wp--preset--color--brand);
	text-decoration: underline;
}

/*
 * The archive title. theme.json sizes h1 at `display`, which is right for a landing page
 * and shouts on a listing — the products are the headline here, not the word "Каталог".
 */
.nv-shop .wp-block-query-title {
	margin-block: var(--wp--preset--spacing--xs) 0;
	font-size: var(--wp--preset--font-size--xxl);
}

/*
 * The measure is capped on the PARAGRAPHS, not on the wrapper. WordPress's constrained
 * layout centres every direct child of the <main> with `margin-inline: auto !important`, so
 * a narrowed wrapper ends up floating in the middle of the page under a left-aligned title
 * — measured at 446px from the left edge on /product-category/dorozhnye-zerkala/ against a
 * content column starting at 136px. Capping the children keeps the text left-aligned
 * without fighting !important.
 */
.nv-shop .wp-block-term-description {
	margin-block: var(--wp--preset--spacing--xs) 0;
	color: var(--wp--preset--color--ink-soft);
}

.nv-shop .wp-block-term-description > * {
	max-inline-size: 70ch;
}

@container catalog (inline-size > 40rem) {
	.nv-shop .wp-block-query-title {
		font-size: var(--wp--preset--font-size--xxxl);
	}
}

/* ------------------------------------------------------------ category tiles */

/*
 * The tiles are `.nv-tile` cards — the object components.css owns and the home page's
 * catalogue band also uses. Before this pass they were WooCommerce's own `li.product-category`
 * markup styled here: a photograph, a big label and nothing else. On a store where /shop/ and
 * every branch category list CATEGORIES rather than products, that tile is the whole
 * navigation, and it carried no count, no description, no card and no hover state.
 * `nikolviva_render_product_subcategories()` now emits the card; this file only lays it out.
 *
 * `grid-auto-rows: 1fr` stays, and the reason is worth keeping: a CSS grid sizes each row
 * independently, so a row whose tallest label wraps to two lines is taller than a row whose
 * labels all fit on one. Measured on /shop/ before it: row 1 = 340px, row 2 = 363px — exactly
 * one line of `md` type. `1fr` makes every row as tall as the tallest, so the images sit on
 * one baseline down the whole page.
 */
.nv-shop .nv-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: var(--wp--preset--spacing--md) var(--wp--preset--spacing--sm);
	margin-block: var(--wp--preset--spacing--md) 0;
	padding: 0;
	list-style: none;
}

/*
 * The wrapper is a `wp-block-group`, so WordPress's flow layout emits
 * `> * + * { margin-block-start: var(--wp--style--block-gap) }` for it — 30px on every tile
 * except the first. Inside a grid that is not rhythm between stacked blocks: it pushed nine of
 * the ten tiles 30px down inside their own grid area and made them 30px shorter than the row,
 * so the first card stood taller than its neighbours and the images lost their shared
 * baseline. Measured: row height 398px, tile 1 at 398px, tiles 2-4 at 368px. `gap` is what
 * spaces these.
 */
.nv-shop .nv-tiles > * {
	margin-block: 0;
}

/* An archive with no subcategories renders the block empty; do not leave a gap for it. */
.nv-shop .nv-tiles:not(:has(li)) {
	display: none;
}

@container catalog (inline-size > 40rem) {
	.nv-shop .nv-tiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--md);
	}
}

@container catalog (inline-size > 64rem) {
	.nv-shop .nv-tiles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------------ toolbar */

/*
 * Result count and sorting. Deliberately not a control bar: muted text on one side, a
 * single quiet select on the other, one hairline to separate it from the grid.
 */
.nv-shop .nv-shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xxs) var(--wp--preset--spacing--sm);
	align-items: center;
	justify-content: space-between;
	margin-block-start: var(--wp--preset--spacing--md);
	padding-block-end: var(--wp--preset--spacing--xs);
	border-block-end: 1px solid var(--wp--preset--color--border);
}

/*
 * On a category-browsing archive WooCommerce emits the count and the sorting form empty,
 * because there is no product loop to describe. Do not draw a bar around nothing.
 */
.nv-shop .nv-shop-toolbar:not(:has(.woocommerce-result-count, .woocommerce-ordering)) {
	display: none;
}

.nv-shop .woocommerce-result-count {
	margin: 0;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--sm);
}

.nv-shop .woocommerce-ordering {
	margin: 0;
}

.nv-shop .woocommerce-ordering select {
	min-block-size: 44px;
	padding: 0.4em 0.75em;
	color: var(--wp--preset--color--ink-soft);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	font: inherit;
	font-size: var(--wp--preset--font-size--sm);
	cursor: pointer;
	transition: border-color var(--wp--custom--transition--base);
}

.nv-shop .woocommerce-ordering select:hover {
	border-color: var(--wp--preset--color--brand);
}

.nv-shop .woocommerce-ordering select:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

/* --------------------------------------------------------------- product grid */

/*
 * `ul.wc-block-product-template` beats WooCommerce's own `.columns-4` grid, which is a
 * two-class selector. Column counts are NOT written into the markup the way the old theme
 * did it — the class list still says columns-4 and this decides otherwise.
 *
 * One column on a phone is deliberate: a ~350px photograph is the point of the card, and
 * two 165px thumbnails are not.
 */
.nv-shop ul.wc-block-product-template {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

@container catalog (inline-size > 30rem) {
	.nv-shop ul.wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container catalog (inline-size > 48rem) {
	.nv-shop ul.wc-block-product-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--md);
	}
}

@container catalog (inline-size > 72rem) {
	.nv-shop ul.wc-block-product-template {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------- product card */

/*
 * No border, no background, no shadow. The card is a column of parts separated by space;
 * the media panel is the only filled surface.
 */
.wc-block-product-template li.product {
	container-type: inline-size;
	container-name: card;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xxs);
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
	border: 0;
}

/*
 * WooCommerce spaces card parts with margins; this card uses a flex gap instead.
 *
 * `flex: 0 0 auto` is load-bearing, not tidiness. The grid stretches every card to the
 * tallest in its row, which makes the card's height DEFINITE, and flex then shrinks the
 * media panel — the one item whose height comes from an aspect-ratio rather than from
 * content — while the button absorbed what it gave up. Measured on
 * /product-category/dosmotrovye-zerkala/: the image collapsed 362px → 153px and the
 * pre-order button ballooned 45px → 254px. Every part here is intrinsically sized, so
 * none of them may flex.
 */
.wc-block-product-template li.product > * {
	flex: 0 0 auto;
	margin-block: 0;
}

/*
 * The plate carries the same brand wash as the category tile's — 5% of `brand` over white.
 * The two grids are the same catalogue seen at two depths, and a neutral grey plate under the
 * families and a neutral grey plate under the products made both read as "grey squares with a
 * caption". This is enough tone to lift a white mirror photographed on white off the page, and
 * far too little to compete with it. `color-mix` against the token, so changing `brand` in
 * theme.json changes both.
 */
.wc-block-product-template li.product .wc-block-components-product-image {
	margin-block-end: var(--wp--preset--spacing--xs);
	overflow: hidden;
	background: color-mix(in srgb, var(--wp--preset--color--brand) 5%, var(--wp--preset--color--base));
	border-radius: var(--wp--custom--radius--lg);
	transition: background var(--wp--custom--transition--base);
}

.wc-block-product-template li.product .wc-block-components-product-image > a {
	position: relative;
	display: block;
	aspect-ratio: 1;
}

.wc-block-product-template li.product .wc-block-components-product-image img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

.wc-block-product-template li.product:hover .wc-block-components-product-image,
.wc-block-product-template li.product:focus-within .wc-block-components-product-image {
	background: color-mix(in srgb, var(--wp--preset--color--brand) 11%, var(--wp--preset--color--base));
}

/* The sale badge is the ONE badge on the card, and only when there is a sale. */
.wc-block-product-template li.product .wc-block-components-product-image__inner-container {
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--xxs);
	inset-inline-end: var(--wp--preset--spacing--xxs);
}

.wc-block-components-product-sale-badge {
	display: inline-block;
	padding: var(--wp--preset--spacing--xxxs) var(--wp--preset--spacing--xxs);
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--full);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	line-height: 1.2;
}

/* Name: regular weight, ink, no underline. It is a link, not a heading to be shouted. */
.wc-block-product-template li.product .wp-block-post-title {
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0;
	overflow-wrap: anywhere;
}

/*
 * The name is the second way into the product (the photograph above it is the first), and on
 * a one-line name it was a 21px-tall target — measured across the eight cards on
 * /product-category/dosmotrovye-zerkala/ at 390px, where seven of the eight were 21px.
 * `flex` with a block-size floor gives the short names the 44px target without stretching the
 * ones that already wrap to two lines.
 */
.wc-block-product-template li.product .wp-block-post-title a {
	display: flex;
	align-items: center;
	min-block-size: 44px;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: color var(--wp--custom--transition--base);
}

.wc-block-product-template li.product .wp-block-post-title a:hover {
	color: var(--wp--preset--color--brand);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.wc-block-product-template li.product a:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
	border-radius: var(--wp--custom--radius--md);
}

/*
 * Price: the loudest thing on the card after the photograph, and now the brand colour rather
 * than black. On a catalogue page the price is the fact a buyer scans for, and black at 700
 * weight made it the same voice as the product name directly above it — two bold dark lines,
 * neither leading. Colour separates them without making either bigger.
 */
.wc-block-product-template li.product .wc-block-components-product-price {
	color: var(--wp--preset--color--brand-dark);
	font-weight: 700;
	line-height: 1.2;
}

.wc-block-product-template li.product .wc-block-components-product-price del {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
}

.wc-block-product-template li.product .wc-block-components-product-price ins {
	text-decoration: none;
}

/*
 * THE CARD'S ACTIONS — and this block was BROKEN, which is what the mismatched buttons were.
 *
 * `.wc-block-product-template li.product .wp-block-button__link,` stood here as a dangling
 * selector: a comma, then a comment, then `.nv-shop .wp-block-query-pagination {`. CSS skips
 * comments, so the two joined into ONE rule and every card button was silently being styled by
 * the PAGINATION declarations — `gap`, a `margin-block-start: lg` it should never have, and
 * `font-size: sm`. Nothing sized the button itself, so it fell through to the global
 * `.wp-block-button__link.wp-element-button` in components.css: 48px tall, `base` type, page-CTA
 * geometry inside a 14rem card — beside the compare link, which is a tertiary text link at
 * `sm`. Hence "one huge, one small".
 *
 * Both actions are now written as a pair: same full width, same centring, the button compact
 * (44px — the pointer-target floor, not the 48px a page-level CTA gets) and the compare link
 * quiet underneath it. The pre-order trigger keeps the accent green it has site-wide.
 *
 * `margin-block-start: auto` on the button wrapper pushes the pair to the bottom of the card,
 * so a two-line name and a four-line name still line their buttons up across a row.
 */
.wc-block-product-template li.product .wp-block-woocommerce-product-button {
	display: block;
	margin-block-start: auto;
}

.wc-block-product-template li.product .wp-block-button__link,
.wc-block-product-template li.product .nv-preorder__trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	min-block-size: 44px;
	padding-block: var(--wp--preset--spacing--xxs);
	padding-inline: var(--wp--preset--spacing--xs);
	border-radius: var(--wp--custom--radius--md);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
}

/*
 * YITH's compare link. It ships as `.button.wp-element-button` — a second full button on a card
 * that already has one — and components.css already demotes `.compare` to a text link. All that
 * is left to do here is give it the card's width and centre it under the button, so the two
 * read as one stack rather than two unrelated controls.
 */
.wc-block-product-template li.product .yith-wccp-compare {
	display: flex;
	justify-content: center;
	margin-block-start: var(--wp--preset--spacing--xxxs);
}

.wc-block-product-template li.product .compare {
	justify-content: center;
	min-block-size: 36px;
	font-size: var(--wp--preset--font-size--xs);
}

/* --------------------------------------------------------------- pagination */

.nv-shop .wp-block-query-pagination {
	gap: var(--wp--preset--spacing--xxs);
	margin-block-start: var(--wp--preset--spacing--lg);
	font-size: var(--wp--preset--font-size--sm);
}

.nv-shop .wp-block-query-pagination a,
.nv-shop .wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 44px;
	min-block-size: 44px;
	color: var(--wp--preset--color--ink-soft);
	border-radius: var(--wp--custom--radius--md);
	text-decoration: none;
}

.nv-shop .wp-block-query-pagination .page-numbers.current {
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--brand);
	font-weight: 700;
}

.nv-shop .wp-block-query-pagination a:hover {
	color: var(--wp--preset--color--brand);
	background: var(--wp--preset--color--surface);
}

/* ------------------------------------------------------------------- Q&A */

/* Measure capped on the children — see the note on the term description above. */
.nv-category-qa {
	margin-block-start: var(--wp--preset--spacing--xl);
	padding-block-start: var(--wp--preset--spacing--md);
	border-block-start: 1px solid var(--wp--preset--color--border);
}

.nv-category-qa > * {
	max-inline-size: 70ch;
}

.nv-category-qa :is(h2, h3, h4) {
	margin-block-start: var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--lg);
}

.nv-category-qa :is(h2, h3, h4):first-child {
	margin-block-start: 0;
}

/* --------------------------------------------------------------- motion off */

@media (prefers-reduced-motion: reduce) {
	.nv-tile__link,
	.nv-tile__media,
	.nv-tile__title::after,
	.nv-shop .woocommerce-ordering select,
	.wc-block-product-template li.product .wc-block-components-product-image,
	.wc-block-product-template li.product .wp-block-post-title a {
		transition: none;
	}
}

/* Button rules removed: components.css owns the primary/tertiary treatment for card actions. */