/**
 * CNC Guns Custom — design system & base layout
 * Mobile First. Breakpoints: 576 / 768 / 992 / 1200 / 1400
 */

:root {
	--cncgc-black: #111;
	--cncgc-charcoal: #2a2a2a;
	--cncgc-text: #1a1a1a;
	--cncgc-text-muted: #6b6b6b;
	--cncgc-border: #e6e6e6;
	--cncgc-border-strong: #d0d0d0;
	--cncgc-bg: #fff;
	--cncgc-bg-soft: #f5f5f5;
	--cncgc-bg-muted: #f0f0f0;
	--cncgc-red: #e31e24;
	--cncgc-success: #2e7d32;
	--cncgc-container: 1440px;
	--cncgc-header-h: 72px;
	--cncgc-radius: 2px;
	--cncgc-font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
	--cncgc-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
	--cncgc-transition: 0.2s ease;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/*
 * overflow-x: hidden lives here, on <body>, and NOT on .cncgc-site (#page,
 * the div this wraps) — moved here after position: sticky on
 * .cncgc-shop-filters silently stopped working. Root cause: overflow-x set
 * without an explicit overflow-y makes the UA compute overflow-y as auto
 * (CSS Overflow spec's "mismatched visible" rule), which turns .cncgc-site
 * into a scroll container. A sticky descendant then sticks relative to
 * THAT container instead of the real viewport — but .cncgc-site never
 * actually scrolls (it just grows taller than 100vh; the page itself
 * scrolls), so the sticky element just behaves like position: static.
 * <body> doesn't have this problem: overflow on the root/body element
 * propagates to the viewport itself rather than creating a nested scroll
 * container, so sticky descendants keep working normally.
 */
body {
	margin: 0;
	font-family: var(--cncgc-font);
	font-size: 16px;
	line-height: 1.55;
	color: var(--cncgc-text);
	background: var(--cncgc-bg);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/*
 * max-width: 100% alone is not a reliable ceiling: inside an auto-width
 * (shrink-to-fit) container — common in third-party plugin markup we don't
 * control — a percentage max-width resolves to "none", so a corrupted or
 * mis-processed source file (e.g. a broken AVIF thumbnail reporting a
 * bogus multi-hundred-thousand-pixel intrinsic size) renders at its full
 * broken size and can blow out the whole page layout. max-height/max-width
 * in viewport units are absolute, so they still cap the image regardless
 * of the ancestor's sizing context.
 */
img {
	max-width: min(100%, 100vw);
	max-height: 100vh;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--cncgc-transition), opacity var(--cncgc-transition);
}

a:hover {
	color: var(--cncgc-black);
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
	border: 0;
	background: none;
	padding: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	font-weight: 700;
	line-height: 1.2;
	color: var(--cncgc-black);
}

p {
	margin: 0 0 1em;
}

.cncgc-site {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	padding-top: var(--cncgc-header-h);
}

.cncgc-main {
	flex: 1;
}

/*
 * Side gutter: a flat 1em at every width (was 16px on mobile, escalating
 * to 24px at >=768px and 32px at >=1200px) — the wider steps were leaving
 * dead space on both sides site-wide, most noticeably on the product page
 * where the gallery/summary two-column layout was losing width to it. A
 * single 1em applies everywhere .cncgc-container is used (header, footer,
 * every content section, not just the product template), since it's the
 * one site-wide horizontal-gutter rule.
 */
.cncgc-container {
	width: 100%;
	max-width: var(--cncgc-container);
	margin-inline: auto;
	padding-inline: 1em;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.cncgc-skip-link:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	left: 16px;
	top: 16px;
	z-index: 100000;
	background: var(--cncgc-black);
	color: #fff;
	padding: 12px 16px;
}

/* Buttons */
.cncgc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 22px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border: 1px solid transparent;
	border-radius: var(--cncgc-radius);
	transition: background var(--cncgc-transition), color var(--cncgc-transition), border-color var(--cncgc-transition);
}

.cncgc-btn--primary {
	background: var(--cncgc-charcoal);
	color: #fff;
	border-color: var(--cncgc-charcoal);
}

.cncgc-btn--ghost {
	background: #fff;
	color: var(--cncgc-charcoal);
	border-color: var(--cncgc-border-strong);
}

@media (hover: hover) and (pointer: fine) {
	.cncgc-btn--primary:hover {
		background: var(--cncgc-black);
		color: #fff;
	}

	.cncgc-btn--ghost:hover {
		border-color: var(--cncgc-black);
		color: var(--cncgc-black);
	}
}

.cncgc-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.cncgc-icon svg {
	display: block;
}

/* Section helpers */
.cncgc-section-title {
	font-size: clamp(1.35rem, 2.5vw, 1.85rem);
	font-weight: 700;
	margin: 0 0 1.25rem;
}

.cncgc-section-lead {
	color: var(--cncgc-text-muted);
	margin: -0.75rem 0 1.5rem;
	font-size: 0.95rem;
}

.cncgc-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 1.25rem;
}

.cncgc-section-head .cncgc-section-title {
	margin: 0;
}

.cncgc-section-link {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--cncgc-text-muted);
	white-space: nowrap;
}

.cncgc-section-link:hover {
	color: var(--cncgc-black);
}

.cncgc-content {
	padding-block: 32px 64px;
}

/*
 * Breadcrumbs sit at the same distance under the header on every template.
 * Catalog, product, news and info pages print them straight into
 * .cncgc-container; page.php / single.php (account,
 * cart, checkout, plain pages) print them inside .cncgc-content, whose 32px
 * top padding pushed them 32px lower. The padding stays for templates
 * without breadcrumbs (404, search, index).
 */
.cncgc-content:has(> .cncgc-breadcrumb:first-child) {
	padding-top: 0;
}

.cncgc-entry__title {
	font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.cncgc-entry__meta {
	color: var(--cncgc-text-muted);
	font-size: 0.875rem;
}

.cncgc-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	padding: 16px 0 8px;
	font-size: 0.8125rem;
	color: var(--cncgc-text-muted);
}

.cncgc-breadcrumb a:hover {
	color: var(--cncgc-black);
}

.cncgc-breadcrumb__sep {
	opacity: 0.5;
}

/* Footer */
.cncgc-footer {
	background: var(--cncgc-bg-soft);
	border-top: 1px solid var(--cncgc-border);
	padding: 48px 0 40px;
	margin-top: auto;
}

.cncgc-footer__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

@media (min-width: 768px) {
	.cncgc-footer__inner {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1200px) {
	.cncgc-footer__inner {
		grid-template-columns: 1.4fr repeat(4, 1fr);
		gap: 24px;
	}
}

.cncgc-footer__mission,
.cncgc-footer__copy,
.cncgc-footer__made {
	font-size: 0.875rem;
	color: var(--cncgc-text-muted);
	margin: 0 0 0.5rem;
}

.cncgc-footer__legal {
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--cncgc-text-muted);
	margin: 0.75rem 0 0;
	max-width: 36em;
}

.cncgc-footer__legal a {
	color: inherit;
}

/* Реквизиты, лицензия и оговорка об оферте — полоса под колонками. */
.cncgc-footer__requisites {
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid var(--cncgc-border);
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--cncgc-text-muted);
}

.cncgc-footer__requisites p {
	margin: 0 0 0.35rem;
}

/* Cookie notice: компактная карточка в углу, показывает main.js */
.cncgc-cookie {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	z-index: 1100;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	max-width: 520px;
	padding: 16px 18px;
	background: var(--cncgc-bg);
	border: 1px solid var(--cncgc-border);
	border-radius: var(--cncgc-radius);
	box-shadow: var(--cncgc-shadow);
}

.cncgc-cookie[hidden] {
	display: none;
}

.cncgc-cookie__text {
	flex: 1 1 240px;
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--cncgc-text-muted);
}

.cncgc-cookie__text a {
	color: var(--cncgc-text);
	text-decoration: underline;
}

.cncgc-cookie__ok {
	min-height: 44px;
	padding: 0 18px;
}

/* Смартфоны в portrait: над нижней панелью (CNCGC_MOBILE_NAV_MEDIA). */
@media (max-width: 575.98px) and (orientation: portrait), (max-width: 499.98px) {
	.cncgc-cookie {
		bottom: calc(var(--cncgc-tabbar-h, 60px) + 8px + env(safe-area-inset-bottom, 0px));
	}
}

.cncgc-footer__heading {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 1rem;
}

.cncgc-footer__list {
	display: grid;
	gap: 8px;
}

.cncgc-footer__list li {
	font-size: 0.9rem;
	color: var(--cncgc-text-muted);
	line-height: 1.45;
}

.cncgc-footer__list a {
	font-size: inherit;
	color: inherit;
}

.cncgc-footer__list a:hover {
	color: var(--cncgc-black);
}

/* Footer: «Компания» and «Поддержка» menus are hidden on phones (< 768px) */
.cncgc-footer__col--company,
.cncgc-footer__col--support {
	display: none;
}

@media (min-width: 768px) {
	.cncgc-footer__col--company,
	.cncgc-footer__col--support {
		display: block;
	}
}

/*
 * Footer on phones in portrait (same query as CNCGC_MOBILE_NAV_MEDIA):
 * booklets live in the bottom-bar menu, contacts are larger.
 */
@media (max-width: 575.98px) and (orientation: portrait), (max-width: 499.98px) {
	.cncgc-footer__col--booklets {
		display: none;
	}

	/* Contacts first, brand (logo, tagline, ©) last. */
	.cncgc-footer__contacts {
		order: -1;
	}

	.cncgc-footer__brand {
		order: 1;
	}

	.cncgc-footer__contacts .cncgc-footer__list {
		gap: 12px;
	}

	.cncgc-footer__contacts .cncgc-footer__list li {
		font-size: 1.0625rem;
		color: var(--cncgc-text);
	}

	.cncgc-footer__contacts .cncgc-footer__list .cncgc-footer__phone {
		font-size: 1.375rem;
		font-weight: 700;
		line-height: 1.2;
	}

	.cncgc-footer__contacts .cncgc-footer__list .cncgc-footer__phone a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

/* Footer: booklets (inc/footer.php) */
.cncgc-footer__booklets a {
	display: inline-flex;
	align-items: flex-start;
	gap: 8px;
}

.cncgc-footer__booklet-icon {
	flex: 0 0 auto;
	margin-top: 1px;
}

/* Footer: social icons — menu «Футер: Соцсети» (inc/footer.php) */
.cncgc-footer__social {
	margin-top: 20px;
}

.cncgc-social {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cncgc-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--cncgc-text);
	background: #fff;
	border: 1px solid var(--cncgc-border);
	border-radius: var(--cncgc-radius);
	transition: color var(--cncgc-transition), border-color var(--cncgc-transition);
}

.cncgc-social__link:focus-visible {
	outline: 2px solid var(--cncgc-black);
	outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
	.cncgc-social__link:hover {
		color: var(--cncgc-black);
		border-color: var(--cncgc-black);
	}
}

/* Footer: third-party banner, from 992px only (CNCGC_FOOTER_BANNER_MIN_WIDTH, footer-banner.js) */
.cncgc-footer-banner {
	display: none;
}

@media (min-width: 992px) {
	.cncgc-footer-banner:not([hidden]) {
		display: flex;
		justify-content: center;
		margin-bottom: 40px;
	}

	.cncgc-footer-banner img,
	.cncgc-footer-banner iframe {
		max-width: 100%;
		height: auto;
	}
}

.cncgc-logo img {
	height: 36px;
	width: auto;
}

@media (min-width: 992px) {
	.cncgc-logo img {
		height: 40px;
	}
}

.cncgc-404 {
	text-align: center;
	padding-block: 80px;
}

.cncgc-404 .cncgc-btn {
	margin: 8px;
}

.cncgc-search-list {
	display: grid;
	gap: 12px;
}

.cncgc-search-list a {
	display: flex;
	gap: 16px;
	align-items: center;
	padding: 12px;
	border: 1px solid var(--cncgc-border);
}

.cncgc-search-list img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	background: var(--cncgc-bg-soft);
}

.cncgc-search-list small {
	display: block;
	color: var(--cncgc-text-muted);
	margin-top: 4px;
}

/*
 * Product card — shared tile for every product grid/list in the theme:
 * WooCommerce catalog/category/brand/related/upsell loops (rendered via
 * woocommerce/content-product.php) and the homepage featured-products
 * slider (template-parts/home/featured-products.php), which reuses the
 * same cncgc-product-card__* class names. Deliberately lives here in
 * main.css — always enqueued (see inc/enqueue.php) — rather than in
 * woocommerce.css (WooCommerce pages only) or home.css (front page only),
 * so it applies on every page that lists products, not just some of them.
 * Previously it only existed in home.css, so catalog/category/brand
 * archives had no protection here at all: an uploaded product image with
 * a non-square aspect ratio rendered at its own intrinsic size and
 * stretched that card's row taller than its neighbours in the grid.
 */

/*
 * The whole card is one link (.cncgc-product-card__link, wrapping media +
 * body — see woocommerce/content-product.php and
 * template-parts/home/featured-products.php) rather than two separate ones
 * for the photo and the title: neither part has any other interactive
 * element in it, so there's no nesting reason to keep them apart, and one
 * big link is a larger, simpler click/tap target. .cncgc-product-card
 * itself (the actual <li>/<article> — wc_product_class() puts this class
 * straight on the <li>) stays a plain wrapper; it's still what
 * out-of-stock/out-of-production status classes and the plugin's stock
 * badge attach to (see the grayscale rule and woocommerce.css's
 * `position: relative` on li.product for the badge below).
 *
 * The grid (display/gap) and align-content: start therefore live on
 * .cncgc-product-card__link, not on .cncgc-product-card — because
 * .cncgc-product-card is the grid ITEM that gets stretched tall by its
 * outer container's align-items: stretch (ul.products, or the flex/grid
 * cross-sells and featured-slider tracks) to match the tallest card in its
 * row, e.g. a neighbour whose title wraps to more lines. `height: 100%` on
 * the link fills that stretched height; with the grid default
 * align-content ('normal'/stretch) instead of 'start', the outer stretch's
 * leftover space would get distributed across the link's own two
 * auto-sized tracks — inflating the media row even though the image
 * itself stays pinned to a 1:1 square via aspect-ratio, which visibly
 * pushes the title/body down for any shorter-titled card sharing a row
 * with a longer one. 'start' keeps both tracks at their natural size and
 * puts the leftover as plain empty space after the card's own content
 * instead.
 */
.cncgc-product-card__link {
	display: grid;
	gap: 12px;
	align-content: start;
	height: 100%;
}

/*
 * Card-wide hover shadow — matches the old live theme (cncgc.ru, its own
 * cncgc-theme-v3.0/style.css, `ul.products li.product:hover`), captured
 * verbatim from https://cncgc.ru/brand/dot-50/ via CSSOM: same box-shadow
 * value and the same 0.5s ease-in-out transition, minus that rule's own
 * background-color/border-radius/overflow — deliberately left out per that
 * request, this is the shadow only. No shadow at rest — only on :hover
 * below. Lives on .cncgc-product-card (the actual <li>/<article>, not the
 * __link) so it doesn't depend on the card's own internal grid/link
 * markup — see the block above.
 */
.cncgc-product-card {
	transition: box-shadow 0.5s ease-in-out;
}

@media (hover: hover) and (pointer: fine) {
	.cncgc-product-card:hover {
		box-shadow: rgba(0, 0, 0, 0.16) 2px 4px 16px;
	}
}

/*
 * aspect-ratio + overflow: hidden pin the media box to a fixed square
 * regardless of the source image's own dimensions; object-fit: cover then
 * crops the image to fill it. This is the guard against a non-square
 * upload breaking the grid — without it a portrait/landscape photo's own
 * ratio decides the box size instead of the grid.
 */
.cncgc-product-card__media {
	display: block;
	background: #fff;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.cncgc-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cncgc-product-card__body {
	padding: 0 1em;
}

/*
 * Grayscale the photo for products that aren't currently buyable — WC's
 * own "outofstock" class (added to the <li> via wc_product_class()/
 * post_class(), see woocommerce/content-product.php) and the
 * cncgc-stock-status plugin's "out_of_production" class (same mechanism,
 * confirmed live: get_stock_status() is emitted verbatim as a class —
 * see inc/woocommerce.php's own 'out_of_production' === get_stock_status()
 * checks). Both classes land on .cncgc-product-card itself, since that's
 * the <li> — no extra markup needed here.
 */
.cncgc-product-card.outofstock .cncgc-product-card__media img,
.cncgc-product-card.out_of_production .cncgc-product-card__media img {
	filter: grayscale(100%);
}

/*
 * -webkit-line-clamp reserves exactly four lines for the title no matter
 * how long the product name is, so the title block — and the price/link
 * stacked under it — line up across every card in a row instead of
 * shorter names ending the card early. Longer names are ellipsis-cut
 * here; the full name is still on the linked product page.
 *
 * padding/margin/font-size below are !important on purpose, not sloppy:
 * WooCommerce's OWN bundled plugin stylesheet
 * (wp-content/plugins/woocommerce/assets/css/woocommerce.css, not this
 * theme) ships
 * `.woocommerce ul.products li.product .woocommerce-loop-product__title`
 * — 4 classes + 2 tags, MORE specific than this plain single-class
 * selector regardless of stylesheet load order — confirmed live on
 * shop.cncgc.ru: it was silently winning margin (our 6px bottom margin
 * never actually rendered) and, worse, adding its own 0.5em top/bottom
 * padding *inside* this border-box element. That padding eats into the
 * `min-height` budget above, so the reserved height stops matching N real
 * text lines — a title whose text alone needs close to N lines then grows
 * the box past `min-height` to fit, instead of the box staying a fixed
 * N-line height across every card in the row (the whole point of this
 * rule). Zeroing WC's padding/margin here removes that budget mismatch;
 * pinning font-size guards the `em`-based min-height calc against WC's
 * own `font-size: 1em` on the same selector.
 */
.cncgc-product-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(1.3em * 4);
	font-size: 1rem !important;
	font-weight: 400;
	line-height: 1.3;
	margin: 0 0 6px !important;
	padding: 0 !important;
}

/*
 * Unified pagination — one style for every paginator in the theme
 * (project rule, CLAUDE.md «Пейджинатор: единый стиль на всём сайте»;
 * reference: the catalog paginator, /category/upgrade_kits/). The theme
 * has three: WooCommerce's catalog pagination (woocommerce_pagination(),
 * core paginate_links() with type=>'list', wrapped in
 * <nav class="woocommerce-pagination"><ul class="page-numbers">), the
 * news listing in page-all-news.php (same paginate_links() args, wrapped in
 * <nav class="cncgc-pagination"><ul class="page-numbers">) and the search
 * results in search.php (identical paginate_links() call and wrapper).
 * All three emit the SAME markup (<nav><ul class="page-numbers"><li>...),
 * so one rule set targeting .page-numbers covers every one of them
 * without duplicating anything per-container — add any future
 * paginator's container selector to the flex-row rule below rather than
 * writing new box styles for it.
 *
 * !important below is deliberate, not sloppy: WooCommerce's OWN plugin
 * stylesheet (wp-content/plugins/woocommerce/assets/css/woocommerce.css,
 * not this theme, not something an admin configures) ships several
 * competing rules at higher specificity than this file's plain
 * selectors — confirmed live via DevTools on shop.cncgc.ru:
 *   - `.woocommerce nav.woocommerce-pagination ul li a, ...ul li span`
 *     (0,2,2) and a `:hover`/`.current` variant (0,3,4), beating the
 *     item rule below (a.page-numbers/span.page-numbers, (0,2,0)).
 *   - `.woocommerce nav.woocommerce-pagination ul` (0,2,2) — sets its
 *     own display/margin/border on the <ul> itself — beating this
 *     container rule at (0,2,1). This is the one that kept showing a
 *     lavender border/box around the whole row even after
 *     `border: none` with no !important.
 * There is no settings screen to defer to here (unlike the WBW
 * filter's "Используйте стили темы"), so overriding WC core's own
 * bundled CSS is the theme's job, same as the hook-level overrides
 * already used throughout inc/woocommerce.php.
 */
.woocommerce-pagination ul.page-numbers,
.cncgc-pagination ul.page-numbers {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 32px 0 0 !important;
	padding: 0;
	list-style: none;
	border: none !important;
}

/*
 * WooCommerce core's own woocommerce.css puts a border-right, float and
 * overflow on each catalog <li> — confirmed by hand against a live
 * shop.cncgc.ru test: left in place the border draws a stray extra line
 * next to this rule's own box border. Every paginator's <li> is reset to
 * the same neutral wrapper so the only visible box is the item itself.
 */
.woocommerce-pagination ul.page-numbers li,
.cncgc-pagination ul.page-numbers li {
	display: block !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	overflow: visible !important;
	list-style: none;
}

/*
 * Box look/colors below match the pagination on the old theme's live site
 * (cncgc.ru/category/upgrade_kits/): light-gray idle box, solid black
 * current page, rounded corners, bold digits, 1px #999 border (confirmed
 * against a live shop.cncgc.ru test — a fully borderless box read as
 * "wrong" next to that reference) and idle text on --cncgc-text for
 * legibility — a deliberately rounder, lighter-idle-state look than the
 * rest of this theme's UI (buttons etc. use --cncgc-radius: 2px), kept as
 * literal values here rather than reused theme tokens for the background/
 * border/radius so this component stays a faithful match to that
 * reference instead of drifting toward the theme's own palette. min-width
 * bumped to 44px (reference measured ~41px) to keep the touch-target
 * minimum this project requires elsewhere.
 *
 * Selector is `a.page-numbers, span.page-numbers`, NOT bare
 * `.page-numbers` — WordPress core puts that same class on the
 * <ul class="page-numbers"> wrapper too, not just the links/spans inside
 * it. An unscoped `.page-numbers` matches the <ul> as well, and its
 * `!important` on display/border/background then wins over the
 * container's own (non-!important) `display: flex` above, turning the
 * whole row into one bordered box around everything instead of one per
 * page number — this is exactly what happened once already.
 *
 * EVERY visual property here is !important on purpose: the reference is
 * what the catalog actually renders, and there WooCommerce's
 * `.woocommerce nav.woocommerce-pagination ul li a` (0,2,2) used to win
 * any non-!important property — e.g. font-weight rendered 400 in the
 * catalog but 700 on the news page (no WC CSS there), so the two looked
 * different. Locking every property makes the result identical in any
 * page context. Digits are regular weight (400) = the catalog reference.
 */
a.page-numbers,
span.page-numbers {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	min-width: 44px !important;
	height: 44px !important;
	padding: 0 6px !important;
	margin: 0 !important;
	border: 1px solid #999 !important;
	border-radius: 4px !important;
	background: #f8f9fa !important;
	color: var(--cncgc-text) !important;
	font-family: inherit !important;
	font-weight: 400 !important;
	font-size: 0.9rem !important;
	line-height: 1 !important;
	letter-spacing: normal !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

@media (hover: hover) and (pointer: fine) {
	a.page-numbers:hover {
		background: #eef0f2 !important;
		border-color: #777 !important;
		color: var(--cncgc-text) !important;
	}
}

.page-numbers.current {
	background: var(--cncgc-black) !important;
	border-color: var(--cncgc-black) !important;
	color: #fff !important;
}

/*
 * Compact variant for phones in portrait (same query as
 * CNCGC_MOBILE_NAV_MEDIA). inc/pagination.php prints it right after the
 * full list (more than 5 pages only): at most 5 page/«…» slots plus the
 * arrows — [1] [2] [...] [7] [8] [→] — so the row never wraps. Exactly
 * one of the two lists is visible. Same buttons as above; on the narrowest
 * phones (360px) the 7-button row shrinks each button slightly below
 * 44px wide (height stays 44px) instead of wrapping.
 */
.woocommerce-pagination ul.page-numbers.cncgc-page-numbers--compact,
.cncgc-pagination ul.page-numbers.cncgc-page-numbers--compact {
	display: none !important;
}

/* stylelint-disable-next-line media-feature-range-notation -- theme breakpoints keep `min-width` notation (CLAUDE.md). */
@media (max-width: 575.98px) and (orientation: portrait), (max-width: 499.98px) {
	.woocommerce-pagination ul.page-numbers.cncgc-page-numbers--full,
	.cncgc-pagination ul.page-numbers.cncgc-page-numbers--full {
		display: none !important;
	}

	.woocommerce-pagination ul.page-numbers.cncgc-page-numbers--compact,
	.cncgc-pagination ul.page-numbers.cncgc-page-numbers--compact {
		display: flex !important;
		flex-wrap: nowrap;
		gap: 6px;
	}

	.cncgc-page-numbers--compact li {
		flex: 0 1 44px;
		min-width: 0;
	}

	.cncgc-page-numbers--compact a.page-numbers,
	.cncgc-page-numbers--compact span.page-numbers {
		width: 100% !important;
		min-width: 0 !important;
	}
}

/*
 * Horizontal scroll rows — one mechanism for the whole theme (reference:
 * «С этим товаром покупают», cncgc_cross_sells_carousel() in
 * inc/woocommerce.php, which documents the lemanapro.ru spec). Markup:
 * .cncgc-hscroll > button.cncgc-hscroll__arrow--prev[hidden] + the track
 * (.cncgc-hscroll__track) + button.cncgc-hscroll__arrow--next[hidden].
 * The track scrolls natively (swipe/trackpad/wheel/keyboard) with its
 * scrollbar hidden; assets/js/product-carousel.js shows/hides the arrows.
 * Used by: cross-sells (product/cart/«Мои заказы»), «Рекомендуемые товары»,
 * «Ещё в каталоге» on the homepage. Visual style reuses the same
 * circular-button + rotated-border-chevron pattern already established for
 * the product gallery's own prev/next arrows
 * (`.cncgc-product__gallery .flex-direction-nav a` in product.css) instead of
 * introducing a new icon, for visual consistency.
 *
 * Desktop-only (matches this theme's `min-width: 992px` breakpoint) and
 * pointer-device-only (`hover: hover` + `pointer: fine`, this project's own
 * adaptive-design rule for hover-affordance controls): on touch devices the
 * list already scrolls natively by swipe, so the arrows would only add
 * clutter on a screen that's already tight on width. JS
 * (assets/js/product-carousel.js) still needs the base `[hidden]` state
 * below at every width — it unconditionally reads/writes the `hidden`
 * attribute regardless of viewport, this rule just decides whether an
 * un-hidden button is ever actually painted.
 */
.cncgc-hscroll {
	position: relative;
}

.cncgc-hscroll__arrow {
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: var(--cncgc-bg);
	border: 1px solid var(--cncgc-border-strong);
	border-radius: 50%;
	box-shadow: var(--cncgc-shadow);
	cursor: pointer;
	z-index: 2;
}

.cncgc-hscroll__arrow::before {
	content: '';
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--cncgc-black);
	border-bottom: 2px solid var(--cncgc-black);
}

.cncgc-hscroll__arrow--prev {
	left: 8px;
}

.cncgc-hscroll__arrow--prev::before {
	margin: 0 0 0 3px;
	transform: rotate(135deg);
}

.cncgc-hscroll__arrow--next {
	right: 8px;
}

.cncgc-hscroll__arrow--next::before {
	margin: 0 3px 0 0;
	transform: rotate(-45deg);
}

/* stylelint-disable-next-line media-feature-range-notation -- theme breakpoints keep `min-width` notation (CLAUDE.md). */
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
	.cncgc-hscroll__arrow:not([hidden]) {
		display: flex;
	}
}

.cncgc-hscroll__track {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.cncgc-hscroll__track::-webkit-scrollbar {
	display: none;
}

/*
 * «Рекомендуемые товары» — shared by the homepage
 * (template-parts/home/featured-products.php) and the cart page (page.php),
 * so it lives here rather than in home.css, which only loads on the front page.
 * The row and cards are the cross-sells carousel's («Cross-sells carousel»
 * in woocommerce.css).
 */
.cncgc-featured {
	padding: 56px 0;
}

/* ==========================================================================
   Video inside product / page / news text: [fvplayer id="N"] (inc/video.php)
   ========================================================================== */

.cncgc-video-embed {
	max-width: 100%;
	margin: 1.5rem 0;
}

.cncgc-video-embed__video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	background: var(--cncgc-black);
	border-radius: var(--cncgc-radius);
}

.cncgc-video-embed__caption {
	margin-top: 0.5rem;
	color: var(--cncgc-text-muted);
	font-size: 0.875rem;
}