/* ========================================================================
 * Карточки товаров внутри статей блога.
 * Обёртка для shortcode [pc_products] и Gutenberg-блока pc-shop/products.
 *
 * Сами карточки рендерятся через wc_get_template_part('content','product') —
 * наследуют все стили из main.css (пилюли тегов, индикатор наличия, цена,
 * placeholder для безкартинных). Здесь — только обёртка и grid.
 * ======================================================================== */

.pc-blog-products {
	margin: 32px 0;
	padding: 0;
}

.pc-blog-products__title {
	margin: 0 0 18px;
	font-size: 22px;
	font-weight: 700;
	color: var(--pc-text);
	line-height: 1.25;
	letter-spacing: -0.2px;
}

/* Grid контейнер. WC по умолчанию рисует ul.products как flex/grid
 * со своими переменными — поэтому переопределяем явно, чтобы число
 * колонок соответствовало атрибуту блока. */
.pc-blog-products__grid.products {
	display: grid !important;
	gap: 18px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.pc-blog-products--cols-2 .pc-blog-products__grid.products {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.pc-blog-products--cols-3 .pc-blog-products__grid.products {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.pc-blog-products--cols-4 .pc-blog-products__grid.products {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* Сбрасываем WC `width: 22.05%` и прочее на li.product внутри блока —
 * иначе grid не работает корректно (li получает фиксированную ширину).
 * + Делаем карточку flex column, чтобы кнопка «В корзину»/«Подробнее»
 * приклеивалась к низу через margin-top: auto. Без этого карточки
 * с длинным названием/категорией/тегами растягиваются по контенту,
 * а кнопки оказываются на разной высоте (хотя сама li одинаковой
 * высоты — её даёт CSS Grid с align-items: stretch). */
.pc-blog-products__grid.products > li.product,
.pc-blog-products__grid.products > li.product.first,
.pc-blog-products__grid.products > li.product.last {
	width: auto !important;
	max-width: 100% !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	display: flex !important;
	flex-direction: column !important;
	height: 100%;
}

/* Стратегия выравнивания: цеплять margin-top: auto к ЦЕНЕ, а не к кнопке.
 * Тогда блок «цена + кнопка» вместе уползает к низу, независимо от того,
 * как именно WC/Astra обернули CTA (кнопка может быть в div, или вообще
 * после неё могут идти hidden elements / variation forms).
 *
 * Также дублируем margin-top: auto на саму кнопку — для карточек где
 * цены нет (Variable product без price range), сработает кнопка. */
.pc-blog-products__grid.products > li.product > .price,
.pc-blog-products__grid.products > li.product > .woocommerce-Price-amount,
.pc-blog-products__grid.products > li.product > a.button,
.pc-blog-products__grid.products > li.product > .button,
.pc-blog-products__grid.products > li.product > .pc-card__cta,
.pc-blog-products__grid.products > li.product .pc-card__cta-wrap {
	margin-top: auto !important;
}

/* Универсальная страховка: если структура другая — последний direct-child
 * приклеивается к низу как «филер». Безопасно потому что мы используем grid
 * который уже задаёт всем li одну высоту, а li мы перевели в flex column. */
.pc-blog-products__grid.products > li.product > *:last-child {
	margin-top: auto !important;
}

/* CTA-кнопка под блоком — собственные стили с высокой специфичностью.
 * Без !important Astra .entry-content a красит ссылку в свой цвет
 * + добавляет text-decoration: underline → наш .pc-btn--primary
 * превращается в полупрозрачную плашку с тонкой подчёркнутой линией.
 *
 * Селекторы продублированы с .entry-content для бронебойности
 * (Astra-правила имеют специфичность 0,2,1 — нам нужно ≥ 0,2,2). */
.pc-blog-products .pc-blog-products__cta-wrap,
.entry-content .pc-blog-products .pc-blog-products__cta-wrap {
	margin-top: 26px;
	text-align: center;
}

.pc-blog-products .pc-blog-products__cta,
.entry-content .pc-blog-products .pc-blog-products__cta {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 14px 36px !important;
	min-width: 220px !important;
	background: var(--pc-accent) !important;
	color: #fff !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	letter-spacing: 1px !important;
	line-height: 1.2 !important;
	border: none !important;
	border-radius: 10px !important;
	box-shadow: 0 6px 14px -6px rgba(255, 42, 42, 0.55) !important;
	transition: background .15s ease, transform .15s ease, box-shadow .15s ease !important;
}

.pc-blog-products .pc-blog-products__cta:hover,
.pc-blog-products .pc-blog-products__cta:focus,
.entry-content .pc-blog-products .pc-blog-products__cta:hover,
.entry-content .pc-blog-products .pc-blog-products__cta:focus {
	background: #e51c1c !important;
	color: #fff !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 10px 22px -8px rgba(255, 42, 42, 0.65) !important;
	text-decoration: none !important;
}

.pc-blog-products .pc-blog-products__cta:active,
.entry-content .pc-blog-products .pc-blog-products__cta:active {
	transform: translateY(0) !important;
}

/* Состояние «нет товаров» (видно только в редакторе через REST). */
.pc-blog-products--empty {
	padding: 14px 18px;
	background: rgba(255, 180, 60, 0.08);
	border-left: 3px solid var(--pc-accent-warm, #ffb43c);
	border-radius: 4px;
	color: var(--pc-text-muted);
	font-style: italic;
}

/* === Mobile (≤600px): всегда 1 колонка независимо от атрибута === */
@media (max-width: 600px) {
	.pc-blog-products {
		margin: 24px 0;
	}

	.pc-blog-products__title {
		font-size: 19px;
		margin-bottom: 14px;
	}

	.pc-blog-products--cols-2 .pc-blog-products__grid.products,
	.pc-blog-products--cols-3 .pc-blog-products__grid.products,
	.pc-blog-products--cols-4 .pc-blog-products__grid.products {
		grid-template-columns: 1fr !important;
		gap: 14px;
	}
}

/* === Tablet (601-900px): 4 колонки → 2, 3 → 2 === */
@media (min-width: 601px) and (max-width: 900px) {
	.pc-blog-products--cols-3 .pc-blog-products__grid.products,
	.pc-blog-products--cols-4 .pc-blog-products__grid.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* === Внутри single-статьи блог-контента (узкий контейнер 920px max-width)
 *     карточки 4 в ряд могут стать слишком зажатыми, поэтому 4 на узком
 *     контейнере опускаем до 3. Контейнер у нас #primary.pc-blog-single.
 *     === */
@media (min-width: 901px) and (max-width: 1100px) {
	.pc-blog-products--cols-4 .pc-blog-products__grid.products {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}