/* Catalog layer: badges, card details, category tiles, product tabs. Loaded on WooCommerce pages only. */

:root {
	--pcm-red: #b3141a;
	--pcm-dark: #111111;
	--pcm-gold: #f3d38a;
	--pcm-green: #2e7d32;
	--pcm-amber: #b26a00;
	--pcm-line: #e3e3e3;
}

/* ---------- Badges ---------- */

.astra-shop-thumbnail-wrap {
	position: relative;
}

.pcm-badges {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	max-width: calc(100% - 20px);
	pointer-events: none;
}

.pcm-badge {
	display: inline-block;
	padding: 3px 8px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	background: var(--pcm-dark);
}

.pcm-badge--sale {
	background: var(--pcm-red);
}

.pcm-badge--hit {
	background: var(--pcm-dark);
	color: var(--pcm-gold);
}

.pcm-badge--engraving {
	background: #fff;
	color: var(--pcm-dark);
	box-shadow: inset 0 0 0 1px var(--pcm-dark);
}

.woocommerce div.product .pcm-badges--single {
	top: 12px;
	left: 12px;
}

/* ---------- Catalog card ---------- */

.pcm-loop-collection {
	margin: 2px 0 4px;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #6b6b6b;
}

.pcm-stock {
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.4;
}

.pcm-stock::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 6px;
	border-radius: 50%;
	background: currentColor;
	vertical-align: baseline;
}

.pcm-stock--instock {
	color: var(--pcm-green);
}

.pcm-stock--backorder {
	color: var(--pcm-amber);
}

.pcm-stock--outofstock {
	color: var(--pcm-red);
}

/* ---------- Product page ---------- */

.single-product .stock {
	margin: 0 0 1em;
	font-weight: 500;
}

.single-product .stock.in-stock {
	color: var(--pcm-green);
}

.single-product .stock.out-of-stock {
	color: var(--pcm-red);
}

.single-product .stock.available-on-backorder {
	color: var(--pcm-amber);
}

/* Tabs: Описание / Характеристики / Комплектация */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
}

@media (max-width: 480px) {
	.woocommerce div.product .woocommerce-tabs ul.tabs li a {
		font-size: 14px;
	}
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: #6b6b6b;
	padding-bottom: 6px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--pcm-dark);
	box-shadow: inset 0 -2px 0 var(--pcm-dark);
}

/* The imported description opens with a large H2 heading: keep it proportionate. */
.woocommerce-Tabs-panel--description h2 {
	font-size: clamp(20px, 2.2vw, 28px);
	line-height: 1.25;
	letter-spacing: normal;
}

/* Tags only drive the badges; Astra sets display on .product_meta > span with higher specificity. */
.single-product .product_meta .tagged_as {
	display: none !important;
}

.pcm-package-list {
	margin: 0;
	padding-left: 1.2em;
}

.pcm-package-list li {
	margin-bottom: 0.4em;
}

/* ---------- Catalog page below the desktop breakpoint (same 1319px as astra_tablet_breakpoint) ---------- */

@media (max-width: 1319px) {
	/* Astra stacks the sidebar under the products; filters (button + drawer) and search should come first. */
	.ast-woo-shop-archive #content > .ast-container {
		flex-direction: column;
	}

	/* The category tiles above the products already cover the category list. */
	.ast-woo-shop-archive #secondary .widget:has(.wc-block-product-categories) {
		display: none;
	}
}

/* ---------- Category tiles (catalog page) ---------- */

.pcm-cat-tiles {
	margin: 0 0 2rem;
}

.pcm-cat-tiles__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pcm-cat-tiles__item {
	margin: 0;
	padding: 0;
}

.pcm-cat-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 96px;
	height: 100%;
	padding: 14px 10px;
	border: 1px solid var(--pcm-line);
	background: #fff;
	color: var(--pcm-dark);
	text-align: center;
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pcm-cat-tile:hover,
.pcm-cat-tile:focus {
	border-color: var(--pcm-dark);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	color: var(--pcm-dark);
}

.pcm-cat-tile__img img {
	display: block;
	max-width: 100%;
	height: auto;
}

.pcm-cat-tile__name {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.pcm-cat-tile__count {
	font-size: 12px;
	color: #6b6b6b;
}