/*
 * The catalogue page — design handoff "Catalog page, option 7A".
 *
 * Loaded on /shop/ and every product category, after shell.css. It does NOT replace
 * catalog.css: that file still owns the product-page related rail (`.wc-block-product-template`)
 * and the old tile grid, neither of which this page renders any more. Grepped before writing —
 * no selector here collides with one there.
 *
 * ── THE PALETTE IS THE HANDOFF'S, NOT theme.json's ──────────────────────────────────────
 *
 * The same deviation the cart page carries, for the same reason and in the same shape: the
 * handoff is the approved design for this page and says colours are final, and it disagrees
 * with the token set in every hue. Declared once, as custom properties on `.nv-catalog`, so
 * moving the whole site onto this palette later is one edit rather than sixty. 7A shares its
 * scale with the approved 4D / 5B / 6A pages, so these values are the same ones cart.css uses.
 *
 * Radii, type sizes and spacing are the handoff's. The FONT is not: it asks for Fira Sans
 * Condensed and allows any pairing with full Cyrillic coverage, so this uses the site's own
 * Roboto Condensed rather than adding a webfont.
 */

.nv-catalog {
	--nv-c-blue: #1a72b8;
	--nv-c-blue-hover: #155f9b;
	--nv-c-blue-active: #124f81;
	--nv-c-blue-tint: #eef5fb;
	--nv-c-blue-tint-border: #cfe0ee;
	--nv-c-band: #0f4c73;
	--nv-c-on-blue: #c5dcea;
	--nv-c-crumb: #8fb6ce;
	--nv-c-green: #7ac143;
	--nv-c-green-stock: #4c9a2a;
	--nv-c-green-tint: #e8f2e2;
	--nv-c-green-ink: #31502a;
	--nv-c-ink: #16232c;
	--nv-c-body: #4a5761;
	--nv-c-muted: #6b7880;
	--nv-c-muted-2: #7b8891;
	--nv-c-faint: #8b979f;
	--nv-c-border: #e5e9ec;
	--nv-c-border-row: #eef1f3;
	--nv-c-border-control: #d6dde2;
	--nv-c-fill: #f7f9fa;
	--nv-c-fill-2: #f2f5f7;

	--nv-c-radius-shell: var(--wp--custom--radius--shell);
	--nv-c-radius-panel: var(--wp--custom--radius--card);
	--nv-c-radius-help: var(--wp--custom--radius--inner);
	--nv-c-radius-control: var(--wp--custom--radius--control);
	--nv-c-radius-pill: var(--wp--custom--radius--pill);

	--nv-c-condensed: var(--wp--preset--font-family--body, "Roboto Condensed", system-ui, sans-serif);
}

/* ------------------------------------------------------------------ the shell */

.nv-catalog.nv-shop {
	max-inline-size: var(--wp--style--global--wide-size, 1280px);
	margin-inline: auto;
	padding: 0 !important;
	overflow: hidden;
	background: #fff;
	border-radius: var(--nv-c-radius-shell);
	color: var(--nv-c-body);
	container-type: inline-size;
	container-name: catalog;
}

.nv-catalog.nv-shop::before {
	content: "";
	display: block;
	block-size: 6px;
	background: linear-gradient(90deg, var(--nv-c-blue) 0 62%, var(--nv-c-green) 62% 100%);
}

/* ------------------------------------------------------------------- the band */

.nv-catalog__band {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-end;
	justify-content: space-between;
	padding: 34px 40px 30px;
	background: var(--nv-c-band);
	color: #fff;
}

.nv-catalog__crumbs {
	margin-block-end: 12px;
	color: var(--nv-c-crumb);
	font-size: 13.5px;
}

.nv-catalog__crumbs a {
	color: var(--nv-c-crumb);
	text-decoration: none;
	border-block-end: 1px solid rgb(143 182 206 / 50%);
}

.nv-catalog__crumbs a:hover {
	color: #fff;
	border-block-end-color: #fff;
}

.nv-catalog__title {
	margin: 0 0 10px;
	color: #fff;
	font-family: var(--nv-c-condensed);
	font-size: 48px;
	font-weight: 700;
	line-height: 1;
}

.nv-catalog__lead {
	margin: 0;
	max-inline-size: 62ch;
	color: var(--nv-c-on-blue);
	font-size: 16px;
	line-height: 1.55;
}

.nv-catalog__band-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* --------------------------------------------------------------- the buttons */

.nv-catalog__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 18px;
	border: 1px solid transparent;
	border-radius: var(--nv-c-radius-control);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.nv-catalog__btn--primary {
	background: var(--nv-c-blue);
	border-color: var(--nv-c-blue);
	color: #fff;
}

.nv-catalog__btn--primary:hover {
	background: var(--nv-c-blue-hover);
	border-color: var(--nv-c-blue-hover);
	color: #fff;
}

.nv-catalog__btn--primary:active {
	background: var(--nv-c-blue-active);
	border-color: var(--nv-c-blue-active);
}

.nv-catalog__btn--outline {
	border-color: rgb(255 255 255 / 35%);
	color: #fff;
}

.nv-catalog__btn--outline:hover {
	background: rgb(255 255 255 / 10%);
	border-color: #fff;
	color: #fff;
}

/* -------------------------------------------------------------------- layout */

.nv-catalog__body {
	display: grid;
	grid-template-columns: 288px 1fr;
	gap: 28px;
	align-items: start;
	padding: 28px 40px 44px;
}

.nv-catalog__sidebar {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.nv-catalog__panel {
	border: 1px solid var(--nv-c-border);
	border-radius: var(--nv-c-radius-panel);
}

.nv-catalog__panel-label {
	margin: 0;
	color: var(--nv-c-muted-2);
	font-size: 11.5px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ sections */

.nv-catalog__sections .nv-catalog__panel-label {
	padding: 16px 18px 10px;
}

.nv-catalog__sections ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nv-catalog__section {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	padding: 11px 18px;
	border-block-start: 1px solid var(--nv-c-border-row);
	color: var(--nv-c-body);
	font-size: 14.5px;
	line-height: 1.35;
	text-decoration: none;
}

.nv-catalog__section:hover {
	background: var(--nv-c-fill);
	color: var(--nv-c-blue);
}

.nv-catalog__section.is-current {
	background: var(--nv-c-blue-tint);
	box-shadow: inset 3px 0 0 var(--nv-c-blue);
	color: var(--nv-c-blue-hover);
	font-weight: 600;
}

.nv-catalog__count {
	flex: 0 0 auto;
	padding: 2px 9px;
	background: var(--nv-c-fill-2);
	border-radius: 999px;
	color: var(--nv-c-muted-2);
	font-size: 12.5px;
	font-weight: 400;
}

.nv-catalog__section.is-current .nv-catalog__count {
	background: var(--nv-c-blue);
	color: #fff;
}

/* ------------------------------------------------------------------- filters */

.nv-catalog__filters {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px;
}

.nv-catalog__filter-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.nv-catalog__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.nv-catalog__pill {
	padding: 8px 14px;
	background: #fff;
	border: 1px solid var(--nv-c-border-control);
	border-radius: 999px;
	color: var(--nv-c-body);
	font-size: 13.5px;
	line-height: 1.2;
	text-decoration: none;
}

.nv-catalog__pill:hover {
	border-color: var(--nv-c-blue);
	color: var(--nv-c-blue);
}

.nv-catalog__pill.is-on {
	background: var(--nv-c-blue);
	border-color: var(--nv-c-blue);
	color: #fff;
}

/*
 * The in-stock control is a LINK that reports itself as a checkbox: its state is a URL, like
 * every other filter here, so back/forward and a shared link keep working. A real
 * `<input type="checkbox">` would need a form and a script to do the same job.
 */
.nv-catalog__check {
	display: flex;
	gap: 10px;
	align-items: center;
	color: var(--nv-c-body);
	font-size: 14px;
	text-decoration: none;
}

.nv-catalog__box {
	inline-size: 17px;
	block-size: 17px;
	border: 1px solid var(--nv-c-border-control);
	border-radius: 4px;
	background: #fff;
}

.nv-catalog__check.is-on .nv-catalog__box {
	position: relative;
	background: var(--nv-c-blue);
	border-color: var(--nv-c-blue);
}

.nv-catalog__check.is-on .nv-catalog__box::after {
	content: "";
	position: absolute;
	inset-block-start: 2px;
	inset-inline-start: 5px;
	inline-size: 4px;
	block-size: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.nv-catalog__reset {
	display: block;
	padding: 11px;
	background: var(--nv-c-fill);
	border: 1px solid var(--nv-c-border-control);
	border-radius: var(--nv-c-radius-control);
	color: var(--nv-c-body);
	font-size: 14px;
	text-align: center;
	text-decoration: none;
}

.nv-catalog__reset:hover {
	border-color: var(--nv-c-blue);
	color: var(--nv-c-blue);
}

/* ---------------------------------------------------------------------- help */

.nv-catalog__help {
	padding: 18px;
	border: 1px solid var(--nv-c-border);
	border-block-start: 3px solid var(--nv-c-green);
	border-radius: var(--nv-c-radius-help);
}

.nv-catalog__help-title {
	margin: 0 0 8px;
	color: var(--nv-c-ink);
	font-family: var(--nv-c-condensed);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
}

.nv-catalog__help-text {
	margin: 0 0 10px;
	color: var(--nv-c-body);
	font-size: 14px;
	line-height: 1.6;
}

.nv-catalog__help-phone {
	margin: 0;
	font-family: var(--nv-c-condensed);
	font-size: 22px;
}

.nv-catalog__help-phone a {
	color: var(--nv-c-blue);
	text-decoration: none;
}

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

.nv-catalog__toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	justify-content: space-between;
	margin-block-end: 18px;
}

.nv-catalog__shown {
	margin: 0;
	color: var(--nv-c-muted);
	font-size: 14.5px;
}

/*
 * WRAPS. At 320px the label plus the three segments needed 350px, and `main.nv-shop`'s
 * `overflow: hidden` clipped the difference — «По цене», the last sort option, was off-screen
 * with nothing to scroll. Letting the row wrap puts the segments on their own line instead.
 */
.nv-catalog__sort {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.nv-catalog__sort-label {
	color: var(--nv-c-muted);
	font-size: 13.5px;
}

/*
 * `overflow: hidden` here was doing two jobs: clipping the children's corners to the pill, and —
 * unintentionally — cutting off any segment that did not fit. The first job is what `clip-path`
 * does without the second, so the group can never hide one of its own options again.
 */
.nv-catalog__segments {
	display: flex;
	clip-path: inset(0 round var(--nv-c-radius-pill));
	border: 1px solid var(--nv-c-border-control);
	border-radius: var(--nv-c-radius-pill);
}

.nv-catalog__segment {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 16px;
	background: #fff;
	color: var(--nv-c-body);
	font-size: 13.5px;
	line-height: 1.2;
	text-decoration: none;
}

.nv-catalog__segment:hover {
	color: var(--nv-c-blue);
}

.nv-catalog__segment.is-on {
	background: var(--nv-c-blue);
	color: #fff;
}

/* --------------------------------------------------------------------- chips */

.nv-catalog__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-end: 18px;
}

.nv-catalog__chip {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	padding: 8px 14px;
	background: var(--nv-c-blue-tint);
	border: 1px solid var(--nv-c-blue-tint-border);
	border-radius: 999px;
	color: var(--nv-c-blue-hover);
	font-size: 13.5px;
	text-decoration: none;
}

.nv-catalog__chip:hover {
	border-color: var(--nv-c-blue);
	color: var(--nv-c-blue);
}

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

.nv-catalog__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nv-catalog__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--nv-c-border);
	border-radius: var(--nv-c-radius-panel);
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.nv-catalog__card:hover {
	border-color: #c9d6de;
	box-shadow: 0 8px 22px rgb(15 44 63 / 7%);
}

.nv-catalog__media {
	position: relative;
	display: grid;
	place-items: center;
	padding: 12px;
	background: var(--nv-c-fill);
}

.nv-catalog__media img {
	display: block;
	inline-size: auto;
	max-inline-size: 100%;
	block-size: 190px;
	object-fit: contain;
}

.nv-catalog__badge {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-start: 12px;
	z-index: 1;
	padding: 5px 12px;
	background: var(--nv-c-fill-2);
	border-radius: 999px;
	color: var(--nv-c-muted);
	font-size: 12px;
	line-height: 1.2;
}

.nv-catalog__badge.is-stock {
	background: var(--nv-c-green-tint);
	color: var(--nv-c-green-ink);
}

.nv-catalog__card-body {
	flex: 1 1 auto;
	padding: 16px 18px 18px;
}

.nv-catalog__sku {
	margin: 0 0 4px;
	color: var(--nv-c-faint);
	font-size: 12px;
}

.nv-catalog__name {
	margin: 0 0 12px;
	font-family: var(--nv-c-condensed);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.2;
}

.nv-catalog__name a {
	color: var(--nv-c-ink);
	text-decoration: none;
}

.nv-catalog__name a:hover {
	color: var(--nv-c-blue);
}

.nv-catalog__specs {
	margin: 0 0 12px;
}

.nv-catalog__spec {
	display: flex;
	gap: 12px;
	align-items: baseline;
	justify-content: space-between;
	font-size: 13.5px;
	line-height: 1.9;
}

.nv-catalog__spec + .nv-catalog__spec {
	border-block-start: 1px solid var(--nv-c-border-row);
}

.nv-catalog__spec dt {
	color: var(--nv-c-muted);
}

.nv-catalog__spec dd {
	margin: 0;
	color: var(--nv-c-ink);
	text-align: end;
}

.nv-catalog__stock {
	display: flex;
	gap: 8px;
	align-items: center;
	margin: 0;
	color: var(--nv-c-faint);
	font-size: 13.5px;
}

.nv-catalog__stock::before {
	content: "";
	inline-size: 8px;
	block-size: 8px;
	border-radius: 999px;
	background: currentcolor;
}

.nv-catalog__stock.is-stock {
	color: var(--nv-c-green-stock);
}

.nv-catalog__card-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding: 0 18px 18px;
}

.nv-catalog__price {
	margin: 0;
	color: var(--nv-c-ink);
	font-family: var(--nv-c-condensed);
	font-size: 26px;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.nv-catalog__price del {
	color: var(--nv-c-faint);
	font-size: 16px;
}

.nv-catalog__price ins {
	text-decoration: none;
}

/* The pre-order trigger is the theme's own button, given this page's geometry. */
.nv-catalog__card-foot .nv-preorder__trigger {
	padding: 11px 18px;
	background: #fff;
	border: 1px solid var(--nv-c-blue);
	border-radius: var(--nv-c-radius-control);
	color: var(--nv-c-blue);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	min-block-size: 0;
}

.nv-catalog__card-foot .nv-preorder__trigger:hover {
	background: var(--nv-c-blue-tint);
}

/* WooCommerce swaps in a "view cart" link after an AJAX add; it is a footnote, not a button. */
.nv-catalog__card-foot .added_to_cart {
	flex: 1 1 100%;
	color: var(--nv-c-blue);
	font-size: 13px;
	text-align: end;
}

/* -------------------------------------------------------------------- empty */

.nv-catalog__none {
	padding: 40px;
	border: 1px solid var(--nv-c-border);
	border-radius: var(--nv-c-radius-panel);
	text-align: center;
}

.nv-catalog__none-title {
	margin: 0 0 8px;
	color: var(--nv-c-ink);
	font-family: var(--nv-c-condensed);
	font-size: 24px;
	font-weight: 700;
}

.nv-catalog__none-text {
	margin: 0;
	color: var(--nv-c-muted);
	font-size: 15px;
}

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

.nv-catalog__pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	justify-content: space-between;
	margin-block-start: 26px;
}

.nv-catalog__pages {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.nv-catalog__page {
	padding: 10px 16px;
	border: 1px solid var(--nv-c-border-control);
	border-radius: var(--nv-c-radius-control);
	color: var(--nv-c-body);
	font-size: 14px;
	line-height: 1.2;
	text-decoration: none;
}

.nv-catalog__page:hover {
	border-color: var(--nv-c-blue);
	color: var(--nv-c-blue);
}

.nv-catalog__page.is-on {
	background: var(--nv-c-blue);
	border-color: var(--nv-c-blue);
	color: #fff;
}

.nv-catalog__per-page {
	margin: 0;
	color: var(--nv-c-muted);
	font-size: 13.5px;
}

.nv-catalog__per {
	margin-inline-start: 6px;
	color: var(--nv-c-body);
	text-decoration: none;
}

.nv-catalog__per.is-on {
	color: var(--nv-c-blue);
	font-weight: 700;
}

/* ----------------------------------------------------------------- SEO block */

.nv-catalog__seo {
	margin-block-start: 26px;
	padding: 26px 28px;
	border: 1px solid var(--nv-c-border);
	border-radius: var(--nv-c-radius-panel);
}

.nv-catalog__seo h2 {
	margin: 0 0 12px;
	color: var(--nv-c-ink);
	font-family: var(--nv-c-condensed);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.15;
}

.nv-catalog__seo-text p {
	max-inline-size: 88ch;
	margin: 0 0 10px;
	color: var(--nv-c-body);
	font-size: 15px;
	line-height: 1.65;
}

/* --------------------------------------------------------------- interaction */

.nv-catalog a:hover {
	color: var(--nv-c-green);
}

.nv-catalog :is(a, button, input):focus-visible {
	outline: 2px solid var(--nv-c-blue);
	outline-offset: 2px;
}

.nv-catalog__band :is(a, button):focus-visible {
	outline-color: #fff;
}

/* While a filter is being fetched, the grid says so rather than looking merely slow. */
.nv-catalog__main[aria-busy="true"] {
	opacity: 0.55;
	transition: opacity 120ms ease;
}

/* ---------------------------------------------------------------- responsive */

@container catalog (inline-size < 73rem) {
	.nv-catalog__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * Below ~1024 the sidebar stops being a column. The handoff asks for a slide-over «Фільтри»
 * panel; what is built is the same content moved ABOVE the grid, with the section list as a
 * horizontally scrolling pill row — the part of the requirement that carries the value (both
 * are reachable without hunting) without a focus-trapped overlay this page does not otherwise
 * need. Called out in board/backend/task48.md as a deliberate simplification, not an omission.
 */
@container catalog (inline-size < 64rem) {
	.nv-catalog__band {
		padding: 28px 24px 24px;
	}

	.nv-catalog__title {
		font-size: 36px;
	}

	.nv-catalog__body {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		padding: 20px 24px 32px;
	}

	.nv-catalog__sections {
		border: 0;
	}

	.nv-catalog__sections .nv-catalog__panel-label {
		padding: 0 0 10px;
	}

	.nv-catalog__sections ul {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		padding-block-end: 4px;
	}

	.nv-catalog__section {
		border: 1px solid var(--nv-c-border-control);
		border-radius: 999px;
		padding: 9px 14px;
		white-space: nowrap;
	}

	.nv-catalog__section.is-current {
		border-color: var(--nv-c-blue);
		box-shadow: none;
	}
}

@container catalog (inline-size < 45rem) {
	.nv-catalog__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.nv-catalog__card-foot {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.nv-catalog__card-foot .nv-catalog__btn,
	.nv-catalog__card-foot .nv-preorder__trigger {
		inline-size: 100%;
	}

	.nv-catalog__toolbar,
	.nv-catalog__pagination {
		align-items: flex-start;
		flex-direction: column;
	}
}

/*
 * ---------------------------------------------------------------- touch floor
 *
 * Mobile handoff rule 2: 48px minimum for anything tappable. Measured before this block, on the
 * catalogue: filter pills 34.2, card buttons 40.8, pagination links 38.8, section links 40.9,
 * the filter checkboxes' labels 23.1. The pills and the pagination are the two controls a phone
 * visitor uses most on this page, and both were the smallest.
 *
 * A MEDIA QUERY, not the `@container` this file otherwise uses: how big a tap target must be is
 * a property of the device holding the page, not of the column the control happens to sit in.
 * 1024 so tablets are covered too.
 */
@media (max-width: 1024px) {
	.nv-catalog__pill,
	.nv-catalog__btn,
	.nv-catalog__page,
	.nv-catalog__section,
	.nv-catalog__check,
	.nv-catalog__segment {
		display: inline-flex;
		align-items: center;
		min-block-size: var(--wp--custom--touch--target);
	}

	/* These two are rows across their container, so the label starts at the leading edge; the
	   pills and buttons are self-sized, so their label centres. */
	.nv-catalog__pill,
	.nv-catalog__btn,
	.nv-catalog__page,
	.nv-catalog__segment {
		justify-content: center;
	}

	.nv-catalog__section,
	.nv-catalog__check {
		justify-content: flex-start;
	}
}