/**
 * WooCommerce shared styles (catalog, cart, forms)
 */

.woocommerce ul.products {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2em;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

@media (min-width: 576px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 992px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1200px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(4, 1fr);
	}

	/*
	 * Category archives keep 3 columns even at this breakpoint — the
	 * filter sidebar (.cncgc-shop-layout--has-filters, added in
	 * woocommerce/archive-product.php) already reserves 260px + 32px gap
	 * starting at the same 992px breakpoint, so 4 columns would cramp
	 * cards there specifically. Shop/tag/brand archives have no sidebar
	 * and keep the full 4-column grid. Same specificity as the rule
	 * above, so source order (this comes after) is what makes it win —
	 * .tax-product_cat is a body class WooCommerce adds on every
	 * category archive, confirmed live on shop.cncgc.ru.
	 */
	.tax-product_cat ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none;
}

/*
 * margin: 0 !important overrides WooCommerce's OWN bundled
 * woocommerce-layout.css, which ships `margin: 0 3.8% 2.992em 0` on this
 * exact selector — leftover gutter math from its classic float-based
 * product grid. Left unset, that margin-right eats visible space out of
 * the RIGHT side of every grid cell only (not the left), so a card looks
 * narrower than its own grid column instead of centered in it — spacing
 * between cards is this grid's own `gap` above, not a per-item margin.
 */
.woocommerce ul.products li.product {
	position: relative;
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
}

/*
 * Stock badges printed by the cncgc-stock-status plugin on
 * `woocommerce_before_shop_loop_item` (see content-product.php). Kept as
 * plugin-owned markup/class names so the badge (and its data) survives a
 * theme switch — this theme only supplies the positioning/visuals.
 */
.woocommerce ul.products li.product .out_of_production-badge,
.woocommerce ul.products li.product .out_of_stock-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 0 8px;
	background: var(--cncgc-charcoal);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	border-radius: var(--cncgc-radius);
}

.woocommerce ul.products li.product .out_of_stock-badge {
	background: #6a6a6a;
}

/*
 * "Распродажа" badge (WooCommerce's default sale flash — kept live on
 * purpose on the loop hook, see the comment next to
 * woocommerce_show_product_loop_sale_flash in inc/woocommerce.php) — red
 * is freed up from the out-of-stock badge above specifically so it means
 * one thing on this grid: an active discount, not availability. Top-right
 * (not top-left, where the stock/production badges above sit) so a
 * product that is simultaneously on sale and out of stock/production
 * shows both without them overlapping.
 */
.woocommerce ul.products li.product .onsale {
	position: absolute;
	top: 8px;
	right: 8px;
	left: auto;
	z-index: 1;
	margin: 0;
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 0 8px;
	background: var(--cncgc-red);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	border-radius: var(--cncgc-radius);
}

.cncgc-shop-header {
	padding: 8px 0 24px;
}

.cncgc-shop-header__title {
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin: 0;
}

/*
 * Two-column catalog layout: filter sidebar (WBW Product Filter widget,
 * placed in the 'shop-sidebar' area — see inc/setup.php) to the left of
 * the product grid/pagination/description. Category archives only
 * (is_product_category() in woocommerce/archive-product.php) — shop/tag/
 * brand archives never get the column. Only becomes a grid once a widget
 * is actually present (.cncgc-shop-layout--has-filters, set in the same
 * template) — otherwise .cncgc-shop-content simply takes the full
 * container width, same as before this feature existed. Filter widget
 * internals (checkboxes, swatches, price slider) are plugin-owned markup/
 * CSS, same approach already used for the stock-status badges (see
 * ul.products li.product .out_of_stock-badge above) — this theme only
 * positions the column, it doesn't restyle what's inside it.
 */
.cncgc-shop-filters {
	--woobewoo-pf-input-border-color: var(--cncgc-border-strong);

	margin-bottom: 24px;
}

/*
 * WBW Product Filter (plugin) reskin. Everything under .cncgc-shop-filters
 * past the head bar below is the plugin's own rendered markup — real class
 * names confirmed by inspecting the live shop.cncgc.ru DOM once a filter
 * widget was actually placed (.wpfMainWrapper, .wpfFilterWrapper,
 * .wfpDescription, .wpfCheckboxHier, .wpfFilterTaxNameWrapper, .wpfCount —
 * note the plugin's own typo, "wfpDescription" not "wpfDescription").
 * Colors/checkbox accent are primarily governed by the plugin's own admin
 * screen (WBW Product Filter → per-filter "Filter Block Design"), which on
 * this site has "Используйте стили темы" (use theme styles) switched on —
 * confirmed live: with that setting on, the plugin's own generated
 * custom.woofilters.css sets .wpfFilterTaxNameWrapper to `color: inherit`
 * instead of a hardcoded color, explicitly deferring to the theme. What it
 * then inherits is still the plugin's own *static* frontend.woofilters.css
 * rule `.wpfFilterVerScroll, .wpfFilterContent span { color: rgb(100 128
 * 142) }` — a washed-out blue-gray, not something "use theme styles"
 * removes — so the theme is expected to supply the real color here, not
 * just leave it alone. Checked-checkbox #303030 already reads as
 * near-identical to --cncgc-charcoal, so that one's left untouched. What
 * this theme adds: the "Фильтры" / "Сбросить все" head bar (its own
 * markup, added in woocommerce/archive-product.php — "Сбросить все" is a
 * plain link to the category's clean URL, not a plugin API call), the
 * group-title weight/case treatment, spacing between facet groups (not
 * exposed as a plugin setting), the facet-name color/weight below, and the
 * checkbox border color via the plugin's own documented CSS variable
 * (--woobewoo-pf-input-border-color). The !important uses below (facet
 * spacing, facet-name color) exist only because the plugin's own rules
 * load after this stylesheet at equal or higher specificity and would
 * otherwise win a plain property tie — every other plugin-owned visual
 * (checkbox accent, count color) is left alone rather than fought.
 */
.cncgc-shop-filters__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
}

.cncgc-shop-filters__title {
	font-size: 1rem;
	font-weight: 700;
}

.cncgc-shop-filters__reset {
	font-size: 0.8rem;
	color: var(--cncgc-text-muted);
	text-decoration: underline;
	white-space: nowrap;
}

.cncgc-shop-filters__reset:hover {
	color: var(--cncgc-text);
}

.cncgc-shop-filters .wpfFilterWrapper {
	margin: 0 0 24px !important;
	padding: 0 !important;
}

.cncgc-shop-filters .wpfFilterWrapper:last-child {
	margin-bottom: 0 !important;
}

.cncgc-shop-filters .wfpDescription {
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.cncgc-shop-filters .wpfFilterTaxNameWrapper {
	color: var(--cncgc-text) !important;
	font-weight: 500;
}

.cncgc-shop-filters .wpfCount {
	color: var(--cncgc-text-muted) !important;
	font-weight: 400;
}

/*
 * padding-bottom here, not just spacing above .cncgc-shop-description —
 * that block only renders on page 1 (cncgc_archive_description_has_content()
 * checks paged === 0, matching WooCommerce's own
 * woocommerce_taxonomy_archive_description() behavior). On page 2+ the
 * pagination nav is the last thing in this column, and without this it
 * sat flush against the footer with no breathing room at all.
 */
.cncgc-shop-content {
	min-width: 0;
	padding-bottom: 48px;
}

@media (min-width: 992px) {
	.cncgc-shop-layout--has-filters {
		display: grid;
		grid-template-columns: 260px 1fr;
		align-items: start;
		gap: 32px;
	}

	/*
	 * Sticky only from this breakpoint up — this is where the layout is
	 * actually two columns (.cncgc-shop-layout--has-filters above); below
	 * it .cncgc-shop-filters stacks above the product grid in a single
	 * column, where a stuck sidebar would just permanently cover part of
	 * the screen while scrolling through products instead of helping.
	 * Plain sticky, no internal scroll — same idea as the sticky product
	 * image on the old theme's single-product page. top offset clears the
	 * site's own fixed header (--cncgc-header-h, see .cncgc-header in
	 * header.css) plus a bit of breathing room. If the filter list is
	 * taller than the viewport it simply runs off the bottom of the
	 * screen like any sticky element would — no max-height/overflow-y
	 * here on purpose.
	 */
	.cncgc-shop-filters {
		margin-bottom: 0;
		position: sticky;
		top: calc(var(--cncgc-header-h) + 35px);
	}
}

/*
 * Category/tag/attribute archive description, relocated below the product
 * grid + pagination (see the `woocommerce_archive_description` block at the
 * end of woocommerce/archive-product.php — brand archives are unaffected
 * and keep .cncgc-brand-header in the page header instead).
 */
.cncgc-shop-description {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--cncgc-border);
}

.cncgc-shop-description .term-description {
	color: var(--cncgc-text-muted);
	line-height: 1.6;
}

/*
 * Brand archive header (taxonomy-product_brand, rendered via archive-product.php
 * through the woocommerce_archive_description hooks in inc/woocommerce.php):
 * logo stacked above the description on mobile, to its left from tablet up.
 */
.cncgc-brand-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	margin-bottom: 8px;
}

.cncgc-brand-header__logo {
	flex: 0 0 auto;
	max-width: 180px;
}

.cncgc-brand-header__logo img {
	display: block;
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

.cncgc-brand-header__body {
	flex: 1 1 auto;
	min-width: 0;
}

.cncgc-brand-header__body:empty {
	display: none;
}

.cncgc-brand-header__body .term-description {
	margin: 0;
	color: var(--cncgc-text-muted);
	font-size: 0.95rem;
	line-height: 1.6;
}

.cncgc-brand-header__body .term-description:empty {
	display: none;
}

@media (min-width: 768px) {
	.cncgc-brand-header {
		flex-direction: row;
		align-items: center;
		gap: 32px;
	}

	.cncgc-brand-header__logo {
		max-width: 220px;
	}
}

/*
 * All-brands overview page (template-parts/page/brands-list.php, slug
 * /all-brands/) — main column of the information-page layout, next to the
 * section sidebar (info-page.css), hence fewer columns than full width:
 * 3 up to 1199px (main column ~570px at 992px), 4 from 1200px, 5 from 1400px.
 */
.cncgc-all-brands__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

@media (min-width: 576px) {
	.cncgc-all-brands__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1200px) {
	.cncgc-all-brands__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 1400px) {
	.cncgc-all-brands__grid {
		grid-template-columns: repeat(5, 1fr);
	}
}

.cncgc-all-brands__card {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 120px;
	padding: 20px;
	background: var(--cncgc-bg-soft);
	border: 1px solid var(--cncgc-border);
	border-radius: var(--cncgc-radius);
	transition: border-color var(--cncgc-transition);
}

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

.cncgc-all-brands__logo {
	max-width: 100%;
	max-height: 72px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.cncgc-all-brands__name {
	font-weight: 700;
	text-align: center;
	color: var(--cncgc-text);
}

.cncgc-all-brands__empty {
	margin: 0;
	color: var(--cncgc-text-muted);
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	margin-bottom: 20px;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 22px;
	background: var(--cncgc-charcoal) !important;
	color: #fff !important;
	border-radius: var(--cncgc-radius) !important;
	font-weight: 700;
	letter-spacing: 0.03em;
	border: 0 !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--cncgc-black) !important;
}

.woocommerce a.added_to_cart {
	display: inline-block;
	margin-top: 8px;
	font-size: 0.85rem;
}

.woocommerce .price {
	color: var(--cncgc-black);
	font-weight: 700;
}

/*
 * Price in the catalog/category/brand grid specifically — barely visible
 * at the general .price rule's weight/size against the rest of the card.
 * Matches WooCommerce core's own selector shape for this exact element
 * (`:where(body:not(.woocommerce-uses-block-theme))` — its block-theme
 * compat guard, contributes zero specificity by design) so this rule's
 * specificity comes only from the visible classes/tags and reliably beats
 * both the generic .price rule above and WC's own bundled price CSS,
 * without needing !important. Single-product-page pricing (outside
 * ul.products li.product) is untouched. `.cncgc-hscroll` in the :where():
 * «Рекомендуемые товары» on the front page carries `.woocommerce` on its
 * div.cncgc-hscroll, not on <body> (template-parts/home/featured-products.php).
 */
.woocommerce:where(body:not(.woocommerce-uses-block-theme), .cncgc-hscroll) ul.products li.product .price {
	color: #000;
	font-size: 18px;
	font-weight: 600;
}

/*
 * The old/regular price on a sale item — WooCommerce always wraps it in
 * <del> (the current/sale price is the sibling <ins>) — needs its own
 * smaller, muted style here so it doesn't compete with the new sale price
 * for attention right next to it. Same :where() specificity trick as the
 * .price rule above, scoped the same way (grid/list cards only).
 */
.woocommerce:where(body:not(.woocommerce-uses-block-theme), .cncgc-hscroll) ul.products li.product .price del {
	color: #767d83;
	font-size: 0.8em;
}

/*
 * The new/sale price itself — WooCommerce's sibling <ins> to the <del>
 * above. text-decoration: none cancels the browser's own default
 * underline on <ins> (not something this theme's CSS ever set — it's the
 * UA stylesheet), which otherwise reads as a link/edit-marker here, not a
 * price. Same :where() specificity trick, same scope as .price/.price del.
 */
.woocommerce:where(body:not(.woocommerce-uses-block-theme), .cncgc-hscroll) ul.products li.product .price ins {
	color: #ce0019;
	font-weight: bold;
	text-decoration: none;
}

.woocommerce span.onsale {
	background: var(--cncgc-red);
	border-radius: 0;
	min-height: 28px;
	line-height: 28px;
	padding: 0 10px;
}

/*
 * WooCommerce notices (added to cart, item removed / «Отменить?», errors,
 * info) in the theme's style, site-wide: soft background, 1px border,
 * coloured left rule and a status dot like the order statuses in «Мои
 * заказы» — instead of WooCommerce's purple/blue top border and icon font.
 * Same selectors as the plugin's woocommerce.css, loaded after it.
 */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	--cncgc-notice: var(--cncgc-charcoal);

	margin: 0 0 24px;
	padding: 14px 16px 14px 40px;
	border: 1px solid var(--cncgc-border);
	border-left: 3px solid var(--cncgc-notice);
	border-radius: var(--cncgc-radius);
	background: var(--cncgc-bg-soft);
	color: var(--cncgc-text);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.woocommerce-message {
	--cncgc-notice: var(--cncgc-success);
}

.woocommerce-error {
	--cncgc-notice: var(--cncgc-red);
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	content: "";
	top: 21px;
	left: 18px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cncgc-notice);
	font-family: inherit;
}

.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button),
.woocommerce-error a:not(.button) {
	font-weight: 600;
	color: var(--cncgc-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button,
.woocommerce .woocommerce-error .button {
	min-height: 36px;
	margin: -6px 0 -6px 16px;
	padding: 0 14px;
	font-size: 12px;
	text-transform: uppercase;
}

.woocommerce table.shop_table {
	border-collapse: collapse;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-color: var(--cncgc-border);
	padding: 14px 12px;
}

@media (max-width: 767.98px) {
	.woocommerce table.shop_table_responsive tr {
		display: block;
		margin-bottom: 16px;
		border: 1px solid var(--cncgc-border);
		padding: 8px;
	}

	.woocommerce table.shop_table_responsive td {
		display: flex;
		justify-content: space-between;
		text-align: right !important;
	}
}

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
	float: none;
	width: 100%;
}

@media (min-width: 992px) {
	.woocommerce-checkout .col2-set {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}

	.woocommerce-checkout .col2-set .col-1,
	.woocommerce-checkout .col2-set .col-2 {
		width: auto;
	}
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	border: 1px solid var(--cncgc-border);
	border-radius: var(--cncgc-radius);
	padding: 12px 14px;
	min-height: 48px;
}

.woocommerce .quantity .qty {
	min-height: 44px;
	width: 72px;
	border: 1px solid var(--cncgc-border);
	text-align: center;
}

/*
 * Cross-sells carousel (cncgc_cross_sells_carousel() in inc/woocommerce.php):
 * "С этим товаром покупают" on the product page and "Вас также может
 * заинтересовать…" on the cart — same product-card markup as the catalog
 * grid, but horizontally scrollable instead of wrapping into rows
 * (mouse-wheel or touch/trackpad horizontal scroll). Lives here, not in
 * product.css, because product.css only loads on single product pages.
 */
.cncgc-cross-sells {
	margin-bottom: 40px;
}

.cncgc-cross-sells h2 {
	font-size: clamp(1.35rem, 2.5vw, 1.85rem);
	margin: 0 0 20px;
}

/*
 * `ul.products.cncgc-cross-sells__list`, not just `.cncgc-cross-sells__list`:
 * `.woocommerce ul.products` (top of this file, `display: grid`) carries one
 * more type selector (`ul`) than a plain 2-class selector here, making it
 * *more* specific — confirmed live, `display: grid` was winning outright.
 * Matching its selector shape (class + `ul` type) ties the specificity;
 * this rule comes later in the same file, so the tie resolves in its favor.
 * Same reasoning for the `li.product` rule below, against
 * `.woocommerce ul.products li.product`.
 */
ul.products.cncgc-cross-sells__list {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	gap: 20px;
	padding-bottom: 8px;
}

ul.products.cncgc-cross-sells__list li.product {
	scroll-snap-align: start;
	flex: 0 0 240px;
}

/* stylelint-disable-next-line media-feature-range-notation -- theme breakpoints keep `min-width` notation (CLAUDE.md). */
@media (min-width: 576px) {
	ul.products.cncgc-cross-sells__list li.product {
		flex-basis: 260px;
	}
}

/*
 * Product grid on phones in portrait (same query as CNCGC_MOBILE_NAV_MEDIA):
 * two cards per row instead of one — shop, category, tag and brand
 * archives, plus every other ul.products grid. The cross-sells carousel
 * keeps its own horizontal flex row (:not() below). Card internals are
 * tightened so a ~160px-wide column still fits the title and price;
 * font-size of the title is !important because the base rule in main.css
 * is (see the comment there — WooCommerce's own bundled CSS).
 */
/* 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 ul.products:not(.cncgc-cross-sells__list) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 12px;
	}

	.woocommerce ul.products li.product .cncgc-product-card__link {
		gap: 8px;
	}

	.woocommerce ul.products li.product .cncgc-product-card__body {
		padding: 0 4px;
	}

	.woocommerce ul.products li.product .cncgc-product-card__title {
		font-size: 0.875rem !important;
	}

	.woocommerce:where(body:not(.woocommerce-uses-block-theme), .cncgc-hscroll) ul.products li.product .price {
		font-size: 16px;
	}

	.woocommerce ul.products li.product .out_of_production-badge,
	.woocommerce ul.products li.product .out_of_stock-badge,
	.woocommerce ul.products li.product .onsale {
		top: 6px;
		min-height: 20px;
		padding: 0 6px;
		font-size: 0.625rem;
	}

	.woocommerce ul.products li.product .out_of_production-badge,
	.woocommerce ul.products li.product .out_of_stock-badge {
		left: 6px;
	}

	.woocommerce ul.products li.product .onsale {
		right: 6px;
	}
}