/* -------------------------------------------------------------------------
   05-product-grid.css — Brutalist карточки товаров (.pc)
-------------------------------------------------------------------------- */

/* ── WooCommerce сетка .pg ──────────────────────────────────────────────── */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	gap: 0 !important;
	border-left: var(--b);
	border-bottom: var(--b);
	/* border-top: var(--b); */
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	display: none !important;
	content: none !important;
}

/* В секциях заголовок уже даёт border-bottom — убираем дублирующий border-top сетки */
.enclave-section .woocommerce ul.products,
.enclave-section .woocommerce-page ul.products {
	border-top: none !important;
}

/* ── Brutalist карточка .pc ─────────────────────────────────────────────── */
.woocommerce ul.products li.product.pc,
.woocommerce-page ul.products li.product.pc {
	border-top: var(--b) !important;
	border-right: var(--b) !important;
	/* border-bottom: var(--b) !important; */
	background: var(--w) !important;
	display: flex !important;
	flex-direction: column !important;
	position: relative !important;
	overflow: hidden !important;
	min-width: 0 !important;
	width: auto !important;
	max-width: none !important;
	float: none !important;
	clear: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
}

.woocommerce ul.products li.product.pc.pc--overhang,
.woocommerce-page ul.products li.product.pc.pc--overhang,
.wc-block-product-template__responsive > li.pc--overhang {
	border-bottom: var(--b) !important;
}

.pc-inner {
	display: flex;
	flex-direction: column;
	flex: 1;
	transition: transform 0.2s ease;
	cursor: pointer;
}
.pc:hover .pc-inner {
	transform: translateY(-46px);
}
.pc:hover .pc-actions {
	transform: translateY(0);
}

/* Изображение */
.pc-img-link {
	display: block;
	text-decoration: none;
}
.pc-img {
	background: white;
	height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	border-bottom: var(--b);
	flex-shrink: 0;
	overflow: hidden;
}
.pc-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Бейджи — стопка сверху слева */
.pc-tags {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.ptag {
	display: block;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background: var(--k);
	color: var(--w);
	padding: 4px 9px;
	font-family: var(--enclave-body-font);
	line-height: 1.4;
}
.ptag.y {
	background: var(--a);
	color: var(--k);
}

/* Тело карточки */
.pc-body {
	padding: 12px 16px 14px;
	flex: 1;
	display: flex;
	flex-direction: column;
	background: var(--w);
	justify-content: space-between;
}
.pc-br {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #aaa;
	margin-bottom: 3px;
}
.pc-nm-link {
	text-decoration: none;
	color: inherit;
}
.pc-nm {
	font-family: var(--enclave-heading-font);
	font-size: 18px;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--k);
	line-height: 1.05;
	height: 36px;
	overflow: hidden;
	margin-bottom: auto;
}
.pc-pr {
	font-family: var(--enclave-price-font) !important;
	font-size: 20px !important;
	font-weight: 400 !important;
	color: var(--k) !important;
	white-space: nowrap;
	margin-top: 10px;
}
.pc-pr .price,
.pc-pr .enclave-price-from-wrap,
.pc-pr .woocommerce-Price-amount,
.pc-pr bdi {
	font-family: var(--enclave-price-font) !important;
	font-size: 20px !important;
	font-weight: 400 !important;
	color: var(--k) !important;
}
.pc-pr .enclave-price-from-prefix {
	font-family: var(--enclave-body-font) !important;
	font-size: 11px !important;
	font-weight: 500;
	color: #aaa !important;
	margin-right: 2px;
}

/* Действия (выезжают снизу на hover) */
.pc-actions {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	transform: translateY(100%);
	transition: transform 0.2s ease;
	z-index: 3;
}
.pc-btn-cart {
	flex: 1;
	background: var(--k);
	color: var(--w);
	border: none;
	border-top: var(--b);
	border-radius: 0;
	font-family: var(--enclave-heading-font);
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 13px;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
.pc-btn-size {
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #aaa;
}
.pc-btn-sep {
	color: #555;
	font-weight: 400;
}
.pc-btn-label {
	color: var(--w);
}
.pc-btn-cart:hover {
	background: #333;
	color: var(--w);
}
.pc-btn-wish {
	flex: 0 0 50px;
	padding: 0;
	background: var(--w);
	border: none;
	border-top: var(--b);
	border-radius: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.1s;
	font-size: 16px;
	color: var(--k);
	box-sizing: border-box;
}
.pc-btn-wish:hover,
.pc-btn-wish.liked {
	background: var(--a);
}
.pc-btn-wish.liked .ti-heart-filled {
	color: var(--k);
}

/* ── Скрыть WC-кнопку «добавить в корзину» вне .pc ─────────────────────── */
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button {
	display: none !important;
}

/* ── Fluid / fixed сетки для .enclave-wc-loop ───────────────────────────── */
.enclave-wc-loop.enclave-wc-loop--fluid ul.products {
	grid-template-columns: repeat(
		auto-fill,
		minmax(min(100%, var(--enclave-card-min, 200px)), 1fr)
	) !important;
}

.enclave-wc-loop.enclave-wc-loop--cols-2 ul.products {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.enclave-wc-loop.enclave-wc-loop--cols-3 ul.products {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.enclave-wc-loop.enclave-wc-loop--cols-4 ul.products {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}


/* ── Цена «от …» ────────────────────────────────────────────────────────── */
.enclave-price-from-wrap .enclave-price-from-prefix {
	margin-right: 0.2em;
}

.price.enclave-price-from-wrap {
	margin-bottom: 0 !important;
}

/* ── Пропорции изображений ──────────────────────────────────────────────── */
.enclave-wc-loop--img-1-1 .pc-img img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.enclave-wc-loop--img-2-3 .pc-img img {
	aspect-ratio: 2 / 3;
	object-fit: cover;
}
.enclave-wc-loop--img-3-2 .pc-img img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Editor: перебиваем float/clear от WooCommerce smallscreen.css в узком iframe */
.editor-styles-wrapper .woocommerce ul.products[class*='columns-'] li.product,
.editor-styles-wrapper .woocommerce-page ul.products[class*='columns-'] li.product {
	float: none;
	clear: none;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* ── Адаптив ────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 1024px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 768px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	.pc-img { height: 225px; }
	.pc-nm { font-size: 14px; height: 28px; }
	.pc-pr { font-size: 16px; }
	.pc-body { padding: 9px 10px 10px; }
	.pc-btn-cart { font-size: 12px; padding: 10px 6px; letter-spacing: 0.08em; }
}

/* Editor: принудительные колонки, чтобы iframe не ломал сетку товаров */
.enclave-wc-loop--cols-2 ul.products {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.enclave-wc-loop--cols-3 ul.products {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.enclave-wc-loop--cols-4 ul.products {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.enclave-wc-loop--fluid ul.products {
	grid-template-columns: repeat(
		auto-fill,
		minmax(min(100%, var(--enclave-card-min, 200px)), 1fr)
	) !important;
}

/* ── Product Collection blocks (страница распродажи) ──────────────────── */

/* 5 колонок */
.wc-block-product-template__responsive.columns-5 {
	grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
	padding: 0 !important;
	margin: 0 !important;
	border-left: var(--b) !important;
	border-bottom: var(--b) !important;
	border-top: 0 !important;
}

/* Внутренняя обёртка li → brutalist карточка */
.wc-block-product-template__responsive > li {
	margin: 0 !important;
	border-right: var(--b) !important;
	border-top: var(--b) !important;
	overflow: hidden !important;
	background: var(--w) !important;
	display: flex !important;
	flex-direction: column !important;
}

.wc-block-product-template__responsive > li .wc-block-product {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	margin: 0 !important;
}

.wc-block-product-template__responsive .wc-block-components-product-image {
	height: 300px !important;
	background: var(--g) !important;
	border-bottom: var(--b) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.wc-block-product-template__responsive .wc-block-components-product-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

/* =========================================================================
   МОБИЛЬНАЯ СЕТКА КАРТОЧЕК (≤767px) — как в прототипе enclave_frontend2.html
   Схлопываем ВСЕ варианты сеток в 2 колонки (3 колонки на ≥430px),
   показываем кнопки «Купить»/избранное всегда (на тач нет hover),
   подгоняем размеры карточки под прототип.
   Размещено в конце файла, чтобы перебить .enclave-wc-loop--cols-N / --fluid
   с !important и блоки распродажи .columns-5.
   ========================================================================= */
@media (max-width: 767px) {
	/* Все товарные сетки → 2 колонки */
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.enclave-wc-loop.enclave-wc-loop--cols-2 ul.products,
	.enclave-wc-loop.enclave-wc-loop--cols-3 ul.products,
	.enclave-wc-loop.enclave-wc-loop--cols-4 ul.products,
	.enclave-wc-loop.enclave-wc-loop--cols-5 ul.products,
	.enclave-wc-loop.enclave-wc-loop--fluid ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	/* Блоки «Распродажа» / Product Collection (Gutenberg) → 2 колонки */
	.wc-block-product-template__responsive,
	.wc-block-product-template__responsive.columns-5,
	.wc-block-product-template__responsive.columns-4,
	.wc-block-product-template__responsive.columns-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	.wc-block-product-template__responsive .wc-block-components-product-image {
		height: 225px !important;
	}

	/* Размеры карточки как в прототипе */
	.pc-img {
		height: 225px;
	}
	.pc-nm {
		font-size: 14px;
		height: 28px;
	}
	.pc-pr {
		font-size: 16px !important;
	}
	.pc-pr .price,
	.pc-pr .enclave-price-from-wrap,
	.pc-pr .woocommerce-Price-amount,
	.pc-pr bdi {
		font-size: 16px !important;
	}
	.pc-body {
		padding: 9px 10px 10px;
	}
	.pc-btn-cart {
		font-size: 12px;
		padding: 10px 6px;
		letter-spacing: 0.08em;
	}
	.pc-btn-wish {
		flex: 0 0 38px;
	}

	/* На тач-устройствах hover нет — действия всегда видны и в потоке */
	.pc-actions {
		position: static;
		transform: none;
	}
	.pc:hover .pc-inner,
	.pc:hover .pc-actions {
		transform: none;
	}
}

/* SM 360px — чуть выше картинка */
@media (min-width: 360px) and (max-width: 767px) {
	.pc-img {
		height: 240px;
	}
	.wc-block-product-template__responsive .wc-block-components-product-image {
		height: 240px !important;
	}
}

/* MD 390px — iPhone 14/15 */
@media (min-width: 390px) and (max-width: 767px) {
	.pc-img {
		height: 255px;
	}
	.wc-block-product-template__responsive .wc-block-components-product-image {
		height: 255px !important;
	}
}

/* XL ≥480px — только крупные планшеты/landscape: 3 колонки.
   Все смартфоны в portrait (≤430px: iPhone Pro Max, Plus, Galaxy Ultra) → 2 колонки. */
@media (min-width: 480px) and (max-width: 767px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.enclave-wc-loop.enclave-wc-loop--cols-2 ul.products,
	.enclave-wc-loop.enclave-wc-loop--cols-3 ul.products,
	.enclave-wc-loop.enclave-wc-loop--cols-4 ul.products,
	.enclave-wc-loop.enclave-wc-loop--cols-5 ul.products,
	.enclave-wc-loop.enclave-wc-loop--fluid ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
	.wc-block-product-template__responsive,
	.wc-block-product-template__responsive.columns-5,
	.wc-block-product-template__responsive.columns-4,
	.wc-block-product-template__responsive.columns-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}