/* ===========================================================================
   STROM 31.07.2026 — карточка товара в листинге, «вариант С».
   Handle: strom-listing-card (deps: child-style). Грузится ТОЛЬКО на страницах
   листинга (магазин / таксономии товаров / поиск по товарам), поэтому селекторы
   внутри файла можно держать короткими: другого блока `.wd-products` на этих
   страницах нет (проверено: в HTML архива ровно один `.wd-products` с
   data-source="main_loop").

   ВАЖНО ПРО ПОРЯДОК ЗАГРУЗКИ. Замерено в браузере: наш <link> идёт 23-м из 79,
   а CSS-части темы — позже (woo-prod-loop-fw-button 59-м). То есть тема
   подключается ПОСЛЕ нас и «побить порядком» ничего нельзя: каждое правило ниже
   бьёт тему СПЕЦИФИЧНОСТЬЮ (в комментариях указан счёт «наш / темы»).
   При равном счёте выиграла бы тема — поэтому равного счёта в файле нет.

   Разметка, под которую написан файл (её печатает inc/strom-loop-card.php):
     dl.strom-specs > div.strom-specs__row > dt.strom-specs__k + dd.strom-specs__v
     span.strom-price > span.strom-price__main > (__now, __unit, del.__was)
                      + span.strom-price__pack
     span.strom-on-request > (__label, __note)
     a.button.button-more («Подробнее») — внутри div.wd-add-btn
   Файл терпим к тому, что «Подробнее» лежит СОСЕДОМ .wd-add-btn (как сейчас,
   до переноса кнопки в PHP): оба варианта отрабатывают.

   Два режима — РАЗНАЯ разметка темы:
     сетка  (.elements-grid): .product-wrapper > .content-product-imagin
            + .product-element-top + .product-element-bottom(h3, specs, наличие,
            .wrap-price > .price, .wd-add-btn, [артикул], .fade-in-block)
     строка (.elements-list):  .product-wrapper > .product-element-top
            + .product-list-content(h3, [артикул], наличие, .price БЕЗ .wrap-price,
            .wd-add-btn)
   Артикул PHP гасит опцией темы; на всякий случай он погашен и здесь — если
   опцию вернут, раскладка не поедет. В DOM наличие идёт ПОСЛЕ характеристик,
   визуальный порядок «название → наличие → характеристики» делаем flex-order /
   grid-area.
   =========================================================================== */

/* --- 1. Токены. Значения — из макета docs/card-variants.html ------------- */
.wd-products {
	--strom-green: #0e7e50;
	--strom-green-h: #0b6a43;
	--strom-ink: #232624;
	--strom-muted: #767676;
	--strom-sub: #5c5c5c;
	--strom-was: #9a9a9a;
	--strom-line: rgba(35, 38, 36, .13);
	/* разделители внутри блока характеристик — светлее рамки карточки:
	   их в карточке до четырёх, и на .13 сетка линий забивала сами значения */
	--strom-line-soft: rgba(35, 38, 36, .08);
	--strom-r: 5px;
	--strom-pad: 14px;
	--strom-gap: 8px;
	/* высота одной строки характеристик (вместе с её разделителем) */
	--strom-spec-row: 21px;
	/* сколько строк характеристик показываем в этом режиме/ширине */
	--strom-spec-rows: 3;
	/* кадр фото: 4/3 — компромисс между 1.5:1 (плитка, 154 товара),
	   1:1 (водоотвод, 61) и 1.33–1.38:1 (бордюры, настилы, 46) */
	--strom-frame: 4 / 3;
	/* резерв под вторую строку цены («поддон …») там, где её нет */
	--strom-price-h: 42px;
}

/* --- 2. Каркас карточки (общий для обоих режимов) ------------------------ */

/* Карточка = белая плашка на сером #f6f6f6 фоне контента + равная высота.
   height:100% нужен на ВСЕХ ширинах: тема даёт растяжку только классом
   wd-stretch-cont-lg и только в @media(min-width:1025px), а в режиме «в строку»
   этого класса нет вовсе.
   Наш счёт 0,3,0 против 0,1,0 (.wd-product) и 0,2,0 (мобильная компактизация). */
.wd-products .wd-product.product {
	--text-align: start;      /* тема ставит center */
	box-sizing: border-box;
	height: 100%;
	border: 1px solid var(--strom-line);
	border-radius: var(--strom-r);
	background-color: #fff;
	color: var(--strom-ink);
	transition: box-shadow .2s ease;
}

/* Ховер — лёгкая тень, рамку не темним: карточка не должна «дёргаться»
   контрастом на каждом проходе мыши (ховер-подъём темы мы и так сняли,
   иначе карточка выпрыгивала бы из ряда равных высот). */
.wd-products .wd-product.product:hover {
	box-shadow: 0 2px 10px rgba(35, 38, 36, .10);
}

/* Внутренняя обёртка: наш паддинг вместо --wd-prod-bg-sp (15px сетка / 30px
   список) и наш вертикальный ритм вместо --wd-prod-gap (12px / 18px).
   Наш счёт 0,3,0 против 0,2,0 (.wd-product .product-wrapper) и 0,1,0
   (:where(.product-wrapper,.product-element-bottom)). */
.wd-products .wd-product .product-wrapper {
	box-sizing: border-box;
	height: 100%;
	padding: var(--strom-pad);
	border-radius: 0;
	gap: var(--strom-gap);
}

/* .product-list-content нужен счёт 0,4,0: у темы
   `.wd-product.product-list-item .product-list-content{gap:var(--wd-prod-gap)}` = 0,3,0,
   и при равном счёте побеждала бы она (её файл грузится позже). Из-за этого
   мобильный список шёл с шагом 12px против 8px в сетке — карточки одной ширины
   получались разной высоты (385px против 370px на 390px). */
.wd-products .wd-product.product .product-element-bottom,
.wd-products .wd-product.product .product-list-content {
	gap: var(--strom-gap);
}

/* Мусор и каркасы ховера. :empty НЕ работает (внутри переводы строк), поэтому
   обычный display:none. .content-product-imagin — белая подложка ховер-подъёма,
   .fade-in-block — панель доп.контента, .wd-buttons — пустой контейнер
   quick-view/сравнения (на ≤1024px тема делает его visible → белая точка). */
.wd-products .wd-product .content-product-imagin,
.wd-products .wd-product .fade-in-block,
.wd-products .wd-product .wd-buttons,
.wd-products .wd-product .wd-product-detail.wd-product-sku,
.wd-products .wd-product [class*="short-description"],
.wd-products .wd-product [class*="wd-swatches"] {
	display: none;
}

/* Ховер-подъём карточки: с ним карточка выпрыгивает из ряда равных высот.
   Наш счёт 0,5,0 против 0,4,0 (.wd-hover-with-fade.hover-ready:hover .product-wrapper). */
.wd-products .wd-product.wd-hover-with-fade.hover-ready:hover .product-wrapper,
.wd-products .wd-product.wd-hover-with-fade.hover-ready.state-hover .product-wrapper {
	z-index: auto;
	transform: none;
}

/* --- 3. Кадр фото ------------------------------------------------------- */

/* Источники разного аспекта (1:1 … 2.17:1) — без фиксации кадра высоты поедут.
   contain + белая подложка: картинку не растягиваем и не режем.
   Подложка именно #fff, а не #fafafa: у большинства фото (плитка, грязезащита,
   металлобордюры) фон исходника белый, и на #fafafa по краям кадра проступала
   заметная серая полоса. */
.wd-products .wd-product .product-element-top {
	flex: 0 0 auto;
	border-radius: 3px;
	background-color: #fff;
}

.wd-products .wd-product .product-image-link {
	display: block;
	aspect-ratio: var(--strom-frame);
	overflow: hidden;
}

/* Наш счёт 0,4,1 против 0,3,1 у темы (…:is(.product-image-link,.hover-img) :is(picture,img){width:100%}). */
.wd-products .wd-product.product .product-image-link :is(img, picture) {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* Бейдж скидки темы («-6%») лежит внутри ссылки на фото — оставляем как есть,
   только гарантируем, что он поверх кадра. */
.wd-products .wd-product .product-labels {
	z-index: 2;
}

/* --- 4. Название: ровно 3 строки ---------------------------------------- */

/* 3, а не 2: в подразделах товары отличаются хвостом названия
   («…, Color Mix Прайд, 60 мм»), на двух строках хвост срезается.
   Слот фиксируем min-height, а не max-height (в style.css:36-38 лежало мёртвое
   правило с max-height !important — на него не опираемся).
   Наш счёт 0,3,0 против 0,2,0 (.wd-product .wd-entities-title{font-size:inherit}
   и .wd-product :is(.wd-entities-title,…){line-height:inherit;margin-block:-.2em}). */
.wd-products .wd-product .wd-entities-title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(3 * 1.35em);
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.wd-products .wd-product .wd-entities-title a {
	color: inherit;
}

/* --- 5. Характеристики (dl.strom-specs) --------------------------------- */

.wd-products .wd-product .strom-specs {
	box-sizing: border-box;
	display: grid;
	gap: 0;
	width: 100%;
	max-width: 100%;
	min-height: calc(var(--strom-spec-rows) * var(--strom-spec-row));
	margin: 0;
	padding: 0;
}

/* min-width:0 обязателен: строка — grid-элемент, у него min-width:auto =
   min-content, а внутри nowrap-текст → строка не сжимается и вылезает
   за карточку (замерено: 245px против 225px внутренней ширины). */
.wd-products .wd-product .strom-specs__row {
	box-sizing: border-box;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	min-width: 0;
	min-height: var(--strom-spec-row);
	overflow: hidden;
	padding-top: 3px;
	border-top: 1px solid var(--strom-line-soft);
	font-size: 12px;
	line-height: 1.3;
}

/* Значения бывают длинные («нержавеющая сталь AISI430», «120 шт. - 60 п.м.»):
   строку держим в одну линию и режем многоточием — иначе перенос ломает
   и слот характеристик, и равные высоты.
   Сжимается ПОДПИСЬ (flex:1 1 auto), значение не сжимается (flex-shrink:0),
   но ограничено max-width:100% — то есть режется только если само по себе
   шире строки. Значение важнее подписи. */
.wd-products .wd-product .strom-specs__k {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	color: var(--strom-muted);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.wd-products .wd-product .strom-specs__v {
	flex: 0 0 auto;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
	margin: 0;                /* сброс dd { margin-inline-start: 40px } */
	color: var(--strom-ink);
	font-weight: 600;
	text-align: end;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Сколько строк видно — по режиму. Значение в nth-child нельзя взять из
   переменной, поэтому режимы расписаны явно. База — 3 строки. */
.wd-products .wd-product .strom-specs__row:nth-child(n+4) {
	display: none;
}

/* --- 6. Наличие --------------------------------------------------------- */

/* Галочку («\f107» шрифтом woodmart-font) тема печатает сама через ::before —
   свою не добавляем, чтобы не задвоить.
   У товаров без цены строку наличия не печатает PHP; CSS-подстраховка ниже.
   Наш счёт 0,3,1 против 0,2,0 / 0,1,1 (p.stock). */
.wd-products .wd-product p.wd-product-stock {
	margin: 0;
	color: var(--strom-green);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
}

.wd-products .wd-product p.wd-product-stock.out-of-stock {
	color: #b50808;
}

.wd-products .wd-product p.wd-product-stock:before {
	color: currentColor;
}

/* Подстраховка на случай, если PHP всё-таки напечатает наличие у товара
   без цены (решение владельца §10.2 — не печатать). */
.wd-products .wd-product .product-wrapper:has(.strom-on-request) p.wd-product-stock {
	display: none;
}

/* --- 7. Цена ------------------------------------------------------------ */

/* Внутри .price НЕТ класса .amount (иначе правило .hide-larger-price …
   :has(.amount ~ .amount) срезало бы вторую сумму) — числа форматирует PHP.
   min-height резервирует строку «поддон …» и у товаров, где её нет, иначе
   строки цен в ряду разъедутся.
   Наш счёт 0,3,0 против 0,2,0 (.wd-product :is(…,.price){margin-block:-.2em})
   и 0,1,0 (.wd-product .price{display:block}). */
.wd-products .wd-product .price {
	display: block;
	min-height: var(--strom-price-h);
	margin: 0;
	color: var(--strom-ink);
	font-size: 14px;
	line-height: 1.3;
}

.wd-products .wd-product .strom-price {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.wd-products .wd-product .strom-price__main {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
}

.wd-products .wd-product .strom-price__now {
	color: var(--strom-ink);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.15;
	white-space: nowrap;
}

.wd-products .wd-product .strom-price__unit {
	color: var(--strom-sub);
	font-size: 13px;
	font-weight: 400;
	white-space: nowrap;
}

/* Старая цена — мелко, зачёркнуто, рядом с новой. Своего бейджа «−N%»
   не добавляем: Woodmart печатает свой поверх фото. */
.wd-products .wd-product .strom-price__was {
	color: var(--strom-was);
	font-size: 13px;
	font-weight: 400;
	text-decoration: line-through;
	white-space: nowrap;
}

.wd-products .wd-product .strom-price__pack {
	color: var(--strom-sub);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.3;
}

/* «Цена по запросу». Кегль ниже primary-цены (20px) сознательно: на 20px
   строка не влезает в карточку 4-й колонки (227px внутренней ширины) и
   переносится на две строки. 17px/600 держит вес цены и влезает.
   Наш счёт 0,3,0 / 0,3,1 против 0,2,0 у style.css:226-269 — тот файл не правим. */
.wd-products .wd-product .price .strom-on-request {
	display: flex;
	flex-direction: column;
	gap: 2px;
	color: var(--strom-ink);
	line-height: 1.2;
}

.wd-products .wd-product .price .strom-on-request__label {
	color: var(--strom-ink);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.15;
}

/* Пояснение («зависит от решётки, длины секций…») — только на карточке товара.
   В листинге это 3 строки текста: ломает и компактность, и совпадение высот. */
.wd-products .wd-product .price .strom-on-request__note {
	display: none;
}

/* --- 8. Кнопка «Подробнее» ---------------------------------------------- */

/* У темы в сетке .wd-add-btn{font-size:0} — задаём кегль явно и на контейнере,
   и на кнопке. В списке .wd-add-btn — flex с gap (0,3,0), поэтому берём 0,4,0. */
.wd-products .wd-product.product .wd-add-btn {
	display: block;
	gap: 0;
	font-size: 13px;
}

/* Работает и когда кнопка внутри .wd-add-btn, и когда она соседом.
   Наш счёт 0,4,0 / 0,3,0 против 0,3,0 (.wd-product.wd-hover-fw-button .wd-add-btn>a,
   .wd-product.product-list-item .wd-add-btn>a) и 0,1,0 (style.css .button-more). */
.wd-products .wd-product .wd-add-btn > .button-more,
.wd-products .wd-product .product-element-bottom > .button-more,
.wd-products .wd-product .product-list-content > .button-more {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 40px;
	padding: 8px 14px;
	border: 0;
	border-radius: var(--strom-r);
	background-color: var(--strom-green);
	box-shadow: none;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	text-transform: none;    /* тема даёт uppercase → «ПОДРОБНЕЕ» */
}

.wd-products .wd-product .wd-add-btn > .button-more:hover,
.wd-products .wd-product .product-element-bottom > .button-more:hover,
.wd-products .wd-product .product-list-content > .button-more:hover {
	background-color: var(--strom-green-h);
	box-shadow: none;
	color: #fff;
}

.wd-products .wd-product .wd-add-btn > .button-more:active,
.wd-products .wd-product .product-element-bottom > .button-more:active,
.wd-products .wd-product .product-list-content > .button-more:active {
	bottom: 0;
	box-shadow: none;
}

/* Осиротевший <span class="screen-reader-text"> внутри .wd-add-btn */
.wd-products .wd-product .wd-add-btn > .screen-reader-text {
	display: none;
}

/* --- 9. Режим СЕТКИ ----------------------------------------------------- */

/* .wrap-price у темы — flex-строка со space-between: двухстрочная цена там
   разъезжается по горизонтали. Плюс прижимаем цену+кнопку к низу карточки
   (тема даёт margin-top:auto только в stretch-режиме, т.е. >1024px).
   Наш счёт 0,4,0 против 0,3,0 (.wd-product.wd-hover-fw-button .wrap-price)
   и 0,3,0 (…>*:not(:is(…)){margin-block:0}). */
.wd-products .wd-product .product-element-bottom > .wrap-price {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	margin-top: auto;
	margin-bottom: 0;
}

.wd-products .wd-product .product-element-bottom > .wrap-price > .price {
	width: 100%;
}

/* Порядок в сетке: название → наличие → характеристики → цена → кнопка.
   В DOM наличие идёт ПОСЛЕ характеристик (наш хук печатает их на
   woocommerce_shop_loop_item_title, а наличие тема выводит прямым вызовом
   ниже), поэтому меняем порядок flex-ом, как в макете.
   Всё непредвиденное (свотчи, таймеры) получает order:5 и встаёт между
   характеристиками и ценой, ничего не ломая. */
.wd-products .wd-product .product-element-bottom > * {
	order: 5;
}

.wd-products .wd-product .product-element-bottom > .wd-entities-title {
	order: 1;
}

.wd-products .wd-product .product-element-bottom > p.wd-product-stock {
	order: 2;
}

.wd-products .wd-product .product-element-bottom > .strom-specs {
	order: 3;
}

.wd-products .wd-product .product-element-bottom > .wrap-price {
	order: 8;
}

.wd-products .wd-product .product-element-bottom > .wd-add-btn,
.wd-products .wd-product .product-element-bottom > .button-more {
	order: 9;
}

/* Число строк характеристик = числу колонок сетки.
   grid-columns-4 → 4 колонки на >1024px, 3 на ≤1024px, 2 на ≤768.98px;
   grid-columns-3 → 3 / 3 / 2 (подтверждено инлайн-переменными обёртки). */
@media (min-width: 1025px) {
	.wd-products.elements-grid.grid-columns-4 .wd-product {
		--strom-spec-rows: 2;
	}

	.wd-products.elements-grid.grid-columns-4 .strom-specs__row:nth-child(n+3) {
		display: none;
	}
}

/* --- 10. Режим «в строку» ≥769px — «строка сравнения» ------------------- */

@media (min-width: 769px) {
	/* Отбивка между строками: у темы --wd-gap:30px, а разделительная линия
	   погашена правилом .wd-products-with-bg… Нам линия не нужна — каждая
	   строка и так белая плашка с рамкой; хватает 12px зазора (как в макете).
	   Наш счёт 0,3,0 против 0,2,0. */
	.wd-products.wd-grid-g.elements-list {
		--wd-gap: 12px;
	}

	.wd-products .wd-product.product-list-item {
		--strom-spec-rows: 2;      /* 4 характеристики в две колонки = 2 ряда */
		--strom-pad: 14px 18px;
	}

	/* Зазор фото↔контент у темы — отдельная жёсткая декларация gap:15px
	   в .product-wrapper, через --wd-prod-gap его не изменить.
	   align-items:stretch (у темы center) нужен, чтобы контент занял всю
	   высоту строки и кнопка реально села на низ.
	   Наш счёт 0,4,0 против 0,3,0. */
	.wd-products .wd-product.product-list-item .product-wrapper {
		flex-direction: row;
		align-items: stretch;
		gap: 18px;
	}

	.wd-products .wd-product.product-list-item .product-element-top {
		flex: 0 0 132px;          /* у темы 300px */
		align-self: center;
	}

	/* Контент строки — grid: слева название/наличие/характеристики,
	   справа колонка «цена + кнопка».
	   Наш счёт 0,4,0 против 0,3,0 (…product-list-content{display:flex}). */
	.wd-products .wd-product.product-list-item .product-list-content {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 200px;
		grid-template-rows: auto auto 1fr;
		align-content: start;
		column-gap: 24px;
		row-gap: 6px;
		flex: 1 1 auto;
	}

	/* Всё неожиданное (свотчи, excerpt, таймеры) уходит в левую колонку
	   и не ломает раскладку. */
	.wd-products .wd-product.product-list-item .product-list-content > * {
		grid-column: 1;
	}

	.wd-products .wd-product.product-list-item .product-list-content > .wd-entities-title {
		grid-area: 1 / 1 / 2 / 2;
	}

	.wd-products .wd-product.product-list-item .product-list-content > p.wd-product-stock {
		grid-area: 2 / 1 / 3 / 2;
	}

	/* Две колонки характеристик, но не на всю ширину строки: иначе подпись и
	   значение расползаются по 340px и пара перестаёт читаться как пара. */
	.wd-products .wd-product.product-list-item .product-list-content > .strom-specs {
		grid-area: 3 / 1 / 4 / 2;
		align-self: start;
		grid-template-columns: repeat(2, minmax(0, 280px));
		justify-content: start;
		column-gap: 24px;
	}

	.wd-products .wd-product.product-list-item .product-list-content > .price {
		grid-area: 1 / 2 / 3 / 3;
		align-self: start;
	}

	/* Кнопка: и когда она внутри .wd-add-btn, и когда соседом — одна и та же
	   область, прижата к низу строки. */
	.wd-products .wd-product.product-list-item .product-list-content > .wd-add-btn,
	.wd-products .wd-product.product-list-item .product-list-content > .button-more {
		grid-area: 3 / 2 / 4 / 3;
		align-self: end;
		justify-self: stretch;
	}

	/* Сброс теминых 130% / 140% (0,4,0 у темы → берём 0,5,0).
	   Слот под 2 строки названия: строки «сравнения» получаются одной высоты
	   и таблица не рябит (замерено: без слота 127px и 148px в одном листинге). */
	.wd-products .wd-product.product-list-item .product-list-content .wd-entities-title {
		-webkit-line-clamp: 2;
		line-clamp: 2;
		min-height: calc(2 * 1.35em);
		font-size: 15px;
	}

	.wd-products .wd-product.product-list-item .product-list-content .price {
		font-size: 14px;
	}

	/* 4 характеристики: 2 ряда × 2 колонки */
	.wd-products .wd-product.product-list-item .strom-specs__row:nth-child(n+3) {
		display: flex;
	}

	.wd-products .wd-product.product-list-item .strom-specs__row:nth-child(n+5) {
		display: none;
	}
}

/* --- 11. ≤768.98px: «в строку» выглядит как вариант С (2 колонки) ------- */

@media (max-width: 768.98px) {
	/* Инлайн --wd-col-sm:1 у обёртки списка перебить нельзя (custom property
	   из style-атрибута), поэтому задаём саму сетку напрямую.
	   Наш счёт 0,3,0 против 0,1,0 (.wd-grid-g). */
	.wd-products.wd-grid-g.elements-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.wd-products .wd-product.product {
		--strom-pad: 10px;
		--strom-gap: 8px;
		--strom-spec-rows: 2;      /* 2 колонки → 2 строки характеристик */
	}

	.wd-products .wd-product .strom-specs__row:nth-child(n+3) {
		display: none;
	}

	/* В списке ≤768.98px тема сама возвращает стопку (её row-правила заперты
	   в min-width:769px), но --text-align откатывается к center — дожимаем. */
	.wd-products .wd-product.product-list-item {
		--text-align: start;
		text-align: start;
	}

	/* Порядок как в сетке: название → наличие → характеристики → цена → кнопка
	   (в DOM наличие идёт после характеристик). */
	.wd-products .wd-product.product-list-item .product-list-content > * {
		order: 5;
	}

	.wd-products .wd-product.product-list-item .product-list-content > .wd-entities-title {
		order: 1;
	}

	.wd-products .wd-product.product-list-item .product-list-content > p.wd-product-stock {
		order: 2;
	}

	.wd-products .wd-product.product-list-item .product-list-content > .strom-specs {
		order: 3;
	}

	.wd-products .wd-product.product-list-item .product-list-content > .price {
		order: 8;
		margin-top: auto;
	}

	.wd-products .wd-product.product-list-item .product-list-content > .wd-add-btn,
	.wd-products .wd-product.product-list-item .product-list-content > .button-more {
		order: 9;
	}

	.wd-products .wd-product.product-list-item .wd-add-btn,
	.wd-products .wd-product.product-list-item .product-list-content > .button-more {
		width: 100%;
	}

	/* Палец: кнопка не ниже 44px */
	.wd-products .wd-product .wd-add-btn > .button-more,
	.wd-products .wd-product .product-element-bottom > .button-more,
	.wd-products .wd-product .product-list-content > .button-more {
		min-height: 44px;
	}
}

/* --- 12. ≤576px: компактизация ----------------------------------------- */

/* Тема душит кегль карточки правилом, привязанным к ИНЛАЙН-атрибуту обёртки
   (:is([style*="col-sm:2"]) .wd-product{font-size:90%}). У списка инлайн
   остаётся --wd-col-sm:1, поэтому при наших 2 колонках правило не включается —
   компактизируем сами и одинаково для обоих режимов (решение владельца:
   на мобиле «в строку» = вариант С). */
@media (max-width: 576px) {
	.wd-products .wd-product.product {
		--strom-spec-row: 20px;
		--strom-price-h: 40px;
	}

	.wd-products .wd-product .wd-entities-title,
	.wd-products .wd-product.product-list-item .product-list-content .wd-entities-title {
		font-size: 13px;
	}

	.wd-products .wd-product .strom-specs__row {
		font-size: 11.5px;
	}

	.wd-products .wd-product .strom-price__now {
		font-size: 17px;
	}

	.wd-products .wd-product .strom-price__unit,
	.wd-products .wd-product .strom-price__was {
		font-size: 12px;
	}

	.wd-products .wd-product .strom-price__pack {
		font-size: 11.5px;
	}

	.wd-products .wd-product .price .strom-on-request__label {
		font-size: 15px;
	}

	.wd-products .wd-product p.wd-product-stock {
		font-size: 12px;
	}
}