/* ===========================================================================
   STROM 10.08.2026 (Task 8) — подборки товаров на карточке товара.
   Handle: strom-product-carousels (deps: child-style). Грузится только на
   карточке товара (inc/strom-product-carousels.php).

   Скоуп — класс .strom-pc, который тот же PHP дописывает обоим виджетам
   wd_products шаблона 1055 («Недавно просмотренные», «С этим товаром смотрят»)
   через настройку _css_classes. По классу, а не по .elementor-element-8f9567e:
   ID виджетов тогда живут в одном месте — в PHP. И не по общему
   .wd-products-element: этим же классом на карточке рендерится виджет
   «Часто покупают вместе» (wd_single_product_fbt_products), который трогать не
   просили — на локали он пуст, но на проде может ожить.

   Образец карточки — «карточка товара в спецпредложениях» .sp-oc
   (template-parts/promo/cards.php + assets/css/promo.css:408-443). Там весь CSS
   под префиксом .sh-home, а home.css на карточке товара не подключается —
   поэтому здесь копия правил с локальными токенами и без var(--mono):
   @font-face Plex Mono лежит в home.css, тут моношрифт был бы системным.

   ПОРЯДОК ЗАГРУЗКИ: части CSS темы подключаются ПОЗЖЕ нашего файла (замер
   Task 1: наш <link> идёт раньше), поэтому тему бьём специфичностью, а не
   порядком. В комментариях указан счёт «наш / темы».
   =========================================================================== */

/* --- 0. Общий отступ карточки товара (единственное правило файла НЕ про карусели)

   Правка Романа (fix round 1): главный блок карточки (галерея + саммари) прилипал к
   хлебным крошкам — замерено 11px при 1440 и 10px при 375, тогда как остальные
   вертикальные ритмы страницы 25/40/50/90px. Добавляем 20px, итоговый зазор
   становится 31/30px — согласуется с соседними шагами и не спорит ни с одним из них.

   Почему правило живёт здесь, а не в laying.css: laying.css подключается ТОЛЬКО у
   товаров с непустой метой схем укладки, а отступ нужен всем карточкам; из наших
   стилей на каждой карточке товара есть только этот файл. Селектор точечный —
   контейнер c7c2108 существует лишь в шаблоне карточки 1055, `.single-product` сверху
   ремень безопасности. Сами крошки НЕ трогаем: их обёртка общая с другими страницами. */
.single-product .elementor-element-c7c2108 {
	margin-top: 20px;
}

/* --- 1. Токены (значения — из палитры .sh-home, продублированы локально) -- */
.strom-pc {
	--strom-pc-ink: #232624;
	--strom-pc-sub: #6f756f;
	--strom-pc-line: rgba(35, 38, 36, .13);
	--strom-pc-line-2: rgba(35, 38, 36, .07);
	--strom-pc-green: #0e7e50;
	--strom-pc-r: 6px;
	--strom-pc-frame: 16 / 10;   /* пропорции кадра фото, как у .sp-oc__vis */
	--strom-pc-ease: cubic-bezier(.22, .61, .36, 1);
}

/* --- 2. Карточка = плашка с рамкой, как .sp-oc ---------------------------- */

/*
 * Равная высота карточек в ряду (правка Романа, fix round 1).
 * Причина неравенства найдена замером: тема объявляет
 * `.wd-carousel-item{height:100%}` (css/parts/lib-swiper.min.css) — заданная
 * (не auto) высота по поперечной оси ОТМЕНЯЕТ растяжку флекс-строки, и каждый
 * слайд получался ровно по своему контенту (замерено: 336/375/386/365 при
 * товарах с разной по числу строк ценой). У самого трека `.wd-carousel-wrap`
 * с растяжкой всё в порядке — computed align-items = normal (= stretch), своего
 * правила ему не нужно; достаточно вернуть слайду auto, и stretch включается.
 * Дальше высоту раздаёт цепочка height:100% ниже (карточка → .product-wrapper),
 * а CTA-строку прижимает margin-top:auto — как у образца .sp-oc__go.
 * Счёт 0,2,0 против 0,1,0 у темы.
 */
.strom-pc .wd-carousel-item {
	height: auto;
}

/* Равная высота: слайды свайпера тянутся по высоте ряда, карточка занимает слайд
   целиком, тело — колонка, CTA прижат к низу (margin-top:auto).
   Счёт 0,3,0 против 0,2,0 (.wd-products .wd-product темы). */
.strom-pc .wd-products .wd-product {
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--strom-pc-line);
	border-radius: var(--strom-pc-r);
	background: #fff;
	text-align: start;
	transition: border-color .2s var(--strom-pc-ease), transform .2s var(--strom-pc-ease);
}

.strom-pc .wd-products .wd-product:hover {
	border-color: var(--strom-pc-green);
	transform: translateY(-2px);
}

/* Родной шаблон «small» — это ГОРИЗОНТАЛЬНАЯ мини-карточка: тема ставит
   .product-wrapper{flex-direction:row;gap:15px} и .product-element-top{flex:0 0 auto;
   max-width:50%} (css/parts/woo-prod-loop-small.min.css). Разворачиваем в колонку —
   счёт 0,4,0 против 0,3,0 темы. gap обязателен: иначе между кадром и телом остаётся
   лишние 15px по вертикали. */
.strom-pc .wd-products .wd-product .product-wrapper {
	display: flex;
	flex-direction: column;
	gap: 0;
	height: 100%;
	/* Опция «фон карточки» даёт .wd-product .product-wrapper{padding:var(--wd-prod-bg-sp)}
	   = 15px по кругу (woo-opt-products-bg + общая часть темы), из-за чего фото было
	   вписано в рамку с воздухом. У образца .sp-oc кадр идёт от кромки до кромки —
	   снимаем падинг тут и отдаём его только телу карточки. */
	padding: 0;
}

/* Кадр фото 16:10 на белом, картинка вписана целиком: у плитки трапеции и
   бордюров нестандартные пропорции, cover срезал бы угол (память проекта —
   project_strom_trade_image_sizes_crop_gotcha).
   width/max-width — снятие того же «горизонтального» правила темы: с max-width:50%
   кадр складывался в 113px (замерено). */
.strom-pc .wd-products .wd-product .product-element-top {
	position: relative;
	flex: 0 0 auto;
	width: 100%;
	max-width: none;
	aspect-ratio: var(--strom-pc-frame);
	background: #fff;
}

/*
 * Ссылка внутри кадра держит пропорцию САМА (правка Романа, fix round 1), а не
 * только через height:100%: процентная высота у ребёнка блока, размер которого
 * задан aspect-ratio, — конструкция хрупкая (в части браузеров она не
 * разрешается, и тогда высоту ссылки задаёт картинка, то есть кадр «дышит» от
 * товара к товару). С собственным aspect-ratio ссылка совпадает с кадром при
 * любом раскладе; height:100% оставлен первым — если он разрешился, результат
 * тот же, если нет, работает пропорция. Значение одно на оба правила — токен.
 */
.strom-pc .wd-products .wd-product .product-element-top > .product-image-link {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: var(--strom-pc-frame);
}

.strom-pc .wd-products .wd-product .product-element-top img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.strom-pc .wd-products .wd-product .product-element-bottom {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 13px 14px 15px;
}

/* --- 3. Название ---------------------------------------------------------- */

/* Ровно 3 строки со слотом min-height — как в листинге (assets/css/listing-card.css,
   п.4): товары отличаются хвостом названия («…, Color Mix Прайд, 60 мм»), на двух
   строках хвост срезается, а без слота ценовые строки соседних карточек стоят на
   разной высоте (замерено: 344 и 372px высоты карточек в одном ряду). */
.strom-pc .wd-products .wd-product .wd-entities-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	min-height: calc(3 * 1.35em);
	margin: 0;
	color: var(--strom-pc-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -.012em;
	overflow-wrap: anywhere;
}

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

/* --- 4. Цена (формат сайта — strom-price-format.php) ---------------------- */

.strom-pc .wd-products .wd-product .price {
	display: block;
	margin: 11px 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--strom-pc-line-2);
	color: var(--strom-pc-ink);
	font-size: 14px;
	line-height: 1.3;
}

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

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

.strom-pc .wd-products .wd-product .strom-price__now {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.15;
	white-space: nowrap;
}

.strom-pc .wd-products .wd-product .strom-price__unit,
.strom-pc .wd-products .wd-product .strom-price__pack {
	color: var(--strom-pc-sub);
	font-size: 12px;
	font-weight: 400;
}

.strom-pc .wd-products .wd-product .strom-price__was {
	color: var(--strom-pc-sub);
	font-size: 12px;
	text-decoration: line-through;
	white-space: nowrap;
}

/* Плашка «Цена по запросу» (strom-price-request.php) — чтобы не разъезжалась. */
.strom-pc .wd-products .wd-product .strom-on-request {
	display: block;
	color: var(--strom-pc-sub);
	font-size: 13px;
}

/* Кегль плашки — как у цены (17px), иначе карточка получала заголовочный кегль темы: в
   подборке «Похожие товары» у щелевого лотка «Цена по запросу» занимала три строки и ломала
   ряд (найдено на приёмке 17.08.2026). Причину («зависит от решётки…») в подборке не печатаем:
   она есть в самой карточке товара, а здесь только удлиняет плашку. */
.strom-pc .wd-products .wd-product .strom-on-request__label {
	display: block;
	color: var(--strom-pc-ink);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.15;
}

.strom-pc .wd-products .wd-product .strom-on-request__note {
	display: none;
}

/* --- 5. CTA-строка «В карточку товара →» (образец .sp-oc__go) ------------- */

.strom-pc .wd-products .wd-product .strom-pc-go {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 12px;
	color: var(--strom-pc-green);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .09em;
	line-height: 1.2;
	text-transform: uppercase;
}

.strom-pc .wd-products .wd-product .strom-pc-go span {
	transition: transform .2s var(--strom-pc-ease);
}

.strom-pc .wd-products .wd-product:hover .strom-pc-go span {
	transform: translateX(3px);
}

/* --- 6. Заголовок + круглые стрелки в его строке -------------------------- */

/*
 * Позицию together задают настройки виджета (PHP): тема кладёт блок стрелок
 * абсолютом над каруселью справа —
 *   top: calc(0% - var(--wd-arrow-offset-v) - var(--wd-arrow-height))
 * от .wd-carousel-container (position:relative). Значение --wd-arrow-offset-v
 * подобрано ЗАМЕРОМ в puppeteer: вертикальный центр стрелок = центр строки
 * h4.wd-el-title. Внешний вид — эталон .sh-offer-nav главной (круг, бордер
 * 1.5px, зелёная заливка на ховере), выражен переменными темы, поэтому её
 * собственные правила не переопределяем.
 */
.strom-pc .wd-nav-arrows {
	--wd-arrow-size: 44px;
	--wd-arrow-icon-size: 15px;
	--wd-arrow-gap: 10px;
	--wd-arrow-offset-h: 0px;
	--wd-arrow-offset-v: 0px;
	--wd-arrow-radius: 50%;
	--wd-arrow-color: #232624;
	--wd-arrow-bg: #fff;
	--wd-arrow-brd: 1.5px solid;
	--wd-arrow-brd-color: rgba(35, 38, 36, .16);
	--wd-arrow-color-hover: #fff;
	--wd-arrow-bg-hover: var(--strom-pc-green);
	--wd-arrow-brd-color-hover: var(--strom-pc-green);
	--wd-arrow-color-dis: rgba(35, 38, 36, .3);
	--wd-arrow-bg-dis: #fff;
	--wd-arrow-brd-color-dis: rgba(35, 38, 36, .1);
}

/* Заголовок не подлезает под стрелки. Счёт 0,2,0 против 0,1,0 у темы. */
.strom-pc .wd-el-title {
	padding-inline-end: 110px;
}

/* На мобайле стрелки подборки НЕ прячутся (в отличие от блока схем — там wd-hide-sm),
   поэтому вместо снятия отступа уменьшаем сами круги: пара 36px + зазор 8px = 80px,
   заголовок «Недавно просмотренные» тогда встаёт в одну строку и на 375. */
@media (max-width: 768.98px) {
	.strom-pc .wd-nav-arrows {
		--wd-arrow-size: 36px;
		--wd-arrow-icon-size: 13px;
		--wd-arrow-gap: 8px;
	}

	.strom-pc .wd-el-title {
		padding-inline-end: 88px;
	}
}

/* --- 7. Адаптив: 2,5 карточки до 768.98 и 1,5 до 480.98 ------------------- */

/*
 * Перекрываем инлайновые переменные виджета (--wd-col-sm:1 стоит прямо в
 * style=""), поэтому у sm !important — иначе инлайн выигрывает у любого
 * селектора. Корзину xs добавляет фильтр woodmart_get_carousel_breakpoints
 * (см. PHP), её значение инлайном не печатается — тут !important не нужен.
 * Дробные значения свайпер понимает: 2,5 и 1,5 карточки = «следующая
 * подглядывает», подсказка что список листается.
 */
.strom-pc .wd-carousel {
	--wd-col-sm: 2.5 !important;
	--wd-col-xs: 1.5;
}