/**
 * Каталог (Shop) + спільна основа архіву категорії.
 * Токени беремо з piuroprint.css (--pp-*). Секції = повноширинні смуги з .pp-wrap
 * усередині (як front-page). Картки — рескін штатної Astra/WooCommerce розмітки
 * (li.product), НЕ нова система карток.
 *
 * @package vizitka-child
 */

/* --- Локальні токени (доповнення до --pp-*) --------------------------------- */
.pp-cat-hero,
.pp-cat-strip,
.pp-catalog,
.pp-templates-cta,
.pp-templates,
.pp-benefits,
.pp-quick-quote,
.pp-materials,
.pp-faq,
.pp-seo,
.pp-design-cta,
.pp-final-cta {
	--ppc-radius: var(--pp-radius, 12px);
	--ppc-radius-lg: var(--pp-radius-lg, 18px);
	--ppc-radius-xl: 24px;
	--ppc-shadow: 0 20px 40px rgba(0, 0, 0, .08);
	--ppc-orange: var(--pp-orange, #f97316);
	--ppc-border: var(--pp-border, #e5e7eb);
	--ppc-muted: var(--pp-text-muted, #6b7280);
	--ppc-text-2: var(--pp-text-2, #4b5563);
	--ppc-dark: var(--pp-dark, #111827);
	--ppc-bg: var(--pp-bg, #f8fafc);
	box-sizing: border-box;
}
.pp-cat-hero *,
.pp-cat-strip *,
.pp-catalog *,
.pp-templates-cta *,
.pp-templates *,
.pp-benefits *,
.pp-quick-quote *,
.pp-materials *,
.pp-faq *,
.pp-seo *,
.pp-design-cta *,
.pp-final-cta * {
	box-sizing: border-box;
}

/* Shared action buttons are owned by buttons.css. */

/* --- Загальні заголовки секцій ---------------------------------------------- */
.pp-section-label {
	margin: 0 0 6px;
	color: var(--ppc-orange);
	font-size: var(--pp-fs-xs, 12px);
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.pp-section-heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px;
	margin-bottom: 26px;
}
.pp-section-heading h2 { margin: 0; font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; color: var(--ppc-dark); }
.pp-section-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--ppc-orange);
	font-size: var(--pp-fs-md, 14px);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.pp-section-link svg { width: 18px; height: 18px; }

/* =========================================================================
   HERO (спільний каркас)
   ========================================================================= */
.pp-cat-hero { position: relative; overflow: hidden; }
.pp-cat-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	color: var(--ppc-orange);
	font-size: var(--pp-fs-xs, 12px);
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.pp-cat-hero__eyebrow span { width: 8px; height: 8px; background: var(--ppc-orange); border-radius: 50%; }
.pp-cat-hero__title {
	margin: 0;
	font-size: clamp(34px, 4vw, 60px);
	font-weight: 850;
	line-height: 1.05;
	letter-spacing: -.03em;
}
.pp-cat-hero__title em { color: var(--ppc-orange); font-style: normal; }
.pp-cat-hero__lead { max-width: 620px; margin: 18px 0; font-size: var(--pp-fs-xl, 16px); line-height: 1.65; }
.pp-cat-hero__points { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; font-size: var(--pp-fs-sm, 13px); }
.pp-cat-hero__points span { display: inline-flex; align-items: center; gap: 6px; }
.pp-cat-hero__points svg { width: 16px; height: 16px; color: var(--ppc-orange); }

/* HERO — Shop (темний) */
.pp-cat-hero--shop { color: #fff; background: linear-gradient(135deg, #0f172a, #111827 65%, #1c2336); }
.pp-cat-hero--shop::after {
	content: "";
	position: absolute;
	right: -190px;
	top: -250px;
	width: 560px;
	height: 560px;
	border-radius: 50%;
	background: rgba(249, 115, 22, .09);
}
.pp-cat-hero__grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr .8fr;
	align-items: center;
	gap: 50px;
	padding-block: 40px 56px;
}
.pp-cat-hero--shop .pp-cat-hero__title { color: #fff; text-transform: uppercase; }
.pp-cat-hero--shop .pp-cat-hero__lead { color: #94a3b8; }
.pp-cat-hero--shop .pp-cat-hero__points { color: #cbd5e1; }
.pp-cat-hero__search {
	display: flex;
	align-items: center;
	width: min(650px, 100%);
	height: 58px;
	padding: 5px;
	background: #fff;
	border-radius: 13px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
}
.pp-cat-hero__search > svg { width: 22px; height: 22px; margin-left: 14px; color: var(--ppc-muted); flex: 0 0 auto; }
.pp-cat-hero__search input { min-width: 0; width: 100%; height: 46px; padding: 0 12px; border: 0; outline: 0; font-size: var(--pp-fs-lg, 15px); background: transparent; color: var(--ppc-dark); }
.pp-cat-hero__search button { flex: 0 0 auto; }

/* HERO — Shop art (декоративне) */
.pp-cat-hero__art { position: relative; min-height: 380px; }
.pp-hero-stack { position: absolute; left: 49%; top: 50%; width: 230px; height: 145px; border-radius: 7px; box-shadow: 0 25px 45px rgba(0, 0, 0, .38); }
.pp-hero-stack--back { background: linear-gradient(135deg, #fff 0 55%, #f97316 55%); transform: translate(-63%, -66%) rotate(-12deg); }
.pp-hero-stack--front { display: flex; align-items: flex-end; padding: 24px; color: #fff; background: linear-gradient(135deg, #172d4c 0 55%, #f8c75e 55%); transform: translate(-40%, -35%) rotate(7deg); font-size: var(--pp-fs-3xl, 20px); font-weight: 800; line-height: .9; }
.pp-hero-roll { position: absolute; right: 2%; bottom: 13%; display: grid; place-items: center; width: 155px; height: 155px; color: #fff; background: conic-gradient(#f97316 0 25%, #fff 25% 50%, #111827 50% 75%, #f97316 75%); border: 16px solid #fff; border-radius: 50%; box-shadow: 0 22px 40px rgba(0, 0, 0, .35); font-weight: 800; }
.pp-hero-roll::after { content: ""; position: absolute; width: 48px; height: 48px; background: #111827; border-radius: 50%; }
.pp-hero-roll span { position: relative; z-index: 2; font-size: var(--pp-fs-2xs, 11px); }
.pp-hero-sticker { position: absolute; left: 13%; bottom: 18%; display: grid; place-items: center; width: 74px; height: 74px; color: #111827; background: #f8c75e; border: 7px solid #fff; border-radius: 50%; box-shadow: 0 15px 30px rgba(0, 0, 0, .3); font-weight: 800; }

/* =========================================================================
   Смуга популярних категорій (Shop)
   ========================================================================= */
.pp-cat-strip { padding: 54px 0; background: #fff; }
.pp-cat-strip__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.pp-cat-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	min-width: 0;
	padding: 14px;
	color: var(--ppc-dark);
	background: #fff;
	border: 1px solid var(--ppc-border);
	border-radius: 14px;
	text-decoration: none;
	transition: border-color .2s, box-shadow .2s, transform .2s;
}
.pp-cat-tile:hover { border-color: #fdba74; box-shadow: var(--ppc-shadow); transform: translateY(-2px); }
.pp-cat-tile__icon { display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; color: #fff; background: var(--cat, var(--ppc-orange)); border-radius: 13px; }
.pp-cat-tile__icon svg { width: 22px; height: 22px; }
.pp-cat-tile__icon img { width: 26px; height: 26px; object-fit: contain; filter: brightness(0) invert(1); }
.pp-cat-tile b { display: block; overflow: hidden; font-size: var(--pp-fs-md, 14px); text-overflow: ellipsis; white-space: nowrap; }
.pp-cat-tile small { display: block; margin-top: 2px; color: var(--ppc-muted); font-size: var(--pp-fs-2xs, 11px); }

/* =========================================================================
   Каталог: обгортка, layout, toolbar, chips
   ========================================================================= */
.pp-catalog { padding: 46px 0 64px; background: var(--ppc-bg); scroll-margin-top: 90px; }
/* Catalog loop uses the same canonical shell as the rest of PIUROPRINT.
   Do not cancel .pp-wrap here: toolbar + product grid must never span the viewport. */
.pp-catalog > .pp-catalog__inner {
	width: calc(100% - var(--pp-shell-inset));
	max-width: var(--pp-container);
	margin-inline: auto;
}
.pp-catalog__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.pp-catalog__head--category { justify-content: center; text-align: center; }
.pp-catalog__eyebrow { margin: 0 0 4px; color: var(--ppc-muted); font-size: var(--pp-fs-xs, 12px); font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.pp-catalog__title { margin: 0; font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; color: var(--ppc-dark); }
.pp-catalog__filter-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 15px;
	color: var(--ppc-dark);
	background: #fff;
	border: 1px solid var(--ppc-border);
	border-radius: 10px;
	font-weight: 700;
	cursor: pointer;
}
.pp-catalog__filter-toggle svg { width: 18px; height: 18px; }
.pp-catalog__filter-count { display: grid; place-items: center; min-width: 22px; height: 22px; color: #fff; background: var(--ppc-orange); border-radius: 99px; font-size: var(--pp-fs-2xs, 11px); }
.pp-catalog__filter-count:empty,
.pp-catalog__filter-count[data-pp-filter-count="0"] { display: none; }

/* Chips активних фільтрів */
.pp-catalog__active { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; padding: 11px 14px; background: #fff; border: 1px solid var(--ppc-border); border-radius: 11px; font-size: var(--pp-fs-sm, 13px); }
.pp-catalog__active-label { color: var(--ppc-muted); }
.pp-catalog__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	color: var(--ppc-orange);
	background: var(--pp-orange-light, #fff7ed);
	border-radius: 8px;
	font-size: var(--pp-fs-sm, 13px);
	font-weight: 600;
	text-decoration: none;
}
.pp-chip:hover { background: #ffe6cc; }
.pp-chip span { font-size: var(--pp-fs-lg, 15px); line-height: 1; }
.pp-catalog__clear { margin-left: auto; color: var(--ppc-muted); font-size: var(--pp-fs-sm, 13px); text-decoration: underline; }

/* Layout: aside + результати */
.pp-catalog__layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 26px; align-items: start; }
.pp-catalog__layout--full { grid-template-columns: minmax(0, 1fr); }
.pp-catalog__results { min-width: 0; }

/* Toolbar = штатні result count + ordering WooCommerce */
.pp-catalog__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--ppc-border);
}
.pp-catalog__toolbar .woocommerce-result-count { margin: 0; color: var(--ppc-muted); font-size: var(--pp-fs-md, 14px); }
.pp-catalog__toolbar .woocommerce-ordering { margin: 0; }
.pp-catalog__toolbar .woocommerce-ordering select,
.pp-catalog__toolbar select.orderby {
	height: 44px;
	padding: 0 34px 0 14px;
	color: var(--ppc-dark);
	background-color: #fff;
	border: 1px solid var(--ppc-border);
	border-radius: 10px;
	font-weight: 600;
	outline: 0;
	max-width: 100%;
}

/* =========================================================================
   Фільтр-шелл (aside)
   ========================================================================= */
.pp-filters { padding: 18px; background: #fff; border: 1px solid var(--ppc-border); border-radius: var(--ppc-radius-lg); }
.pp-filters__mobile-head { display: none; }
.pp-filter-group + .pp-filter-group { border-top: 1px solid var(--ppc-border); }
.pp-filter-group__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 15px 0;
	color: var(--ppc-dark);
	background: none;
	border: 0;
	font-size: var(--pp-fs-md, 14px);
	font-weight: 800;
	text-align: left;
	cursor: pointer;
}
.pp-filter-group__title svg { width: 18px; height: 18px; transition: transform .2s; }
.pp-filter-group.is-open .pp-filter-group__title svg { transform: rotate(180deg); }
.pp-filter-group__body { display: none; padding: 0 0 15px; }
.pp-filter-group.is-open .pp-filter-group__body { display: block; }
.pp-filter-list label {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr) auto;
	align-items: center;
	gap: 9px;
	min-height: 34px;
	color: var(--ppc-text-2);
	font-size: var(--pp-fs-md, 14px);
	cursor: pointer;
}
.pp-filter-list input { width: 16px; height: 16px; margin: 0; accent-color: var(--ppc-orange); }
.pp-filter-list small { display: grid; place-items: center; min-width: 24px; height: 22px; color: var(--ppc-muted); background: #f3f4f6; border-radius: 6px; font-size: var(--pp-fs-2xs, 11px); }
.pp-price-filter input[type="range"] { width: 100%; accent-color: var(--ppc-orange); }
.pp-price-filter__scale { display: flex; justify-content: space-between; margin-top: 8px; color: var(--ppc-muted); font-size: var(--pp-fs-sm, 13px); }
.pp-price-filter__scale strong { color: var(--ppc-dark); }
.pp-filters__apply { display: none; width: 100%; justify-content: center; margin-top: 14px; }
.pp-filters__backdrop { display: none; }

/* =========================================================================
   PRODUCT CARDS — final catalog component
   =========================================================================
   Astra still provides the PHP markup, but no Astra CSS is loaded. This block
   therefore owns the complete card geometry instead of relying on hidden parent
   theme defaults. The card body is one flex column: category → title → rating →
   default PrintConstructor values → price/mode → CTA.
   ========================================================================= */
.pp-catalog.pp-catalog ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: stretch;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pp-catalog.pp-catalog ul.products::before,
.pp-catalog.pp-catalog ul.products::after { content: none; display: none; }

.pp-catalog.pp-catalog ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	float: none;
	clear: none;
	overflow: hidden;
	text-align: left;
	background: var(--pp-product-card-bg);
	border: 1px solid var(--ppc-border);
	border-radius: var(--ppc-radius-lg);
	box-shadow: 0 1px 2px rgba(15,23,42,.03);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pp-catalog.pp-catalog ul.products li.product:hover {
	transform: translateY(-4px);
	border-color: #fed7aa;
	box-shadow: 0 18px 38px rgba(15,23,42,.09);
}

/* Media panel. */
.pp-catalog.pp-catalog ul.products li.product .astra-shop-thumbnail-wrap {
	position: relative;
	flex: 0 0 auto;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	background: var(--pp-product-card-media-bg);
	border-bottom: 1px solid #eef0f3;
}
.pp-catalog.pp-catalog ul.products li.product .astra-shop-thumbnail-wrap > a:first-child,
.pp-catalog.pp-catalog ul.products li.product .woocommerce-loop-product__link { display: block; min-width: 0; }
.pp-catalog.pp-catalog ul.products li.product .astra-shop-thumbnail-wrap img,
.pp-catalog.pp-catalog ul.products li.product img.attachment-woocommerce_thumbnail {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	margin: 0;
	padding: 16px;
	object-fit: contain;
	transition: transform .25s ease;
}
/* Keep all four image edges visible on hover as well. */

/* Overlay badge + wishlist. */
.pp-catalog.pp-catalog li.product .pp-card-overlay {
	position: absolute;
	z-index: 4;
	top: 11px;
	left: 11px;
	right: 11px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	pointer-events: none;
}
.pp-catalog.pp-catalog li.product .pp-card-badge {
	pointer-events: auto;
	padding: 5px 10px;
	color: #fff;
	background: var(--ppc-orange);
	border-radius: 999px;
	font-size: var(--pp-fs-3xs, 10px);
	font-weight: 800;
	line-height: 1.2;
	text-transform: uppercase;
}


/* Textual card body — this was previously provided by Astra CSS. */
.pp-catalog.pp-catalog ul.products li.product .astra-shop-summary-wrap {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	min-width: 0;
	padding: 0;
}
.pp-catalog.pp-catalog ul.products li.product .pp-card-category {
	order: 1;
	margin: 0;
	padding: 15px 14px 5px;
	color: var(--ppc-muted);
	font-size: var(--pp-fs-2xs, 11px);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: .075em;
	text-transform: uppercase;
}
.pp-catalog.pp-catalog ul.products li.product .ast-loop-product__link,
.pp-catalog.pp-catalog ul.products li.product .woocommerce-loop-product__title { order: 2; }
.pp-catalog.pp-catalog ul.products li.product .woocommerce-loop-product__title,
.pp-catalog.pp-catalog ul.products li.product .ast-woo-shop-product-title,
.pp-catalog.pp-catalog ul.products li.product .ast-woocommerce-shop-product-out-of-stock {
	min-height: 2.7em;
	margin: 0;
	padding: 0 14px;
	color: var(--ppc-dark);
	font-size: var(--pp-fs-lg, 15px);
	font-weight: 750;
	line-height: 1.35;
	text-decoration: none;
}
.pp-catalog.pp-catalog ul.products li.product .pp-card-rating {
	order: 3;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	min-height: 31px;
	padding: 8px 14px 0;
}
.pp-catalog.pp-catalog ul.products li.product .pp-card-rating .review-rating,
.pp-catalog.pp-catalog ul.products li.product .pp-card-rating .star-rating { margin: 0; float: none; }
.pp-catalog.pp-catalog ul.products li.product .star-rating { font-size: var(--pp-fs-sm, 13px); }
.pp-catalog.pp-catalog ul.products li.product .star-rating span::before { color: #f59e0b; }
.pp-catalog.pp-catalog ul.products li.product .vz-loop-review-count {
	margin: 0;
	color: var(--ppc-muted);
	font-size: var(--pp-fs-xs, 12px);
	line-height: 1.3;
}

/* PrintConstructor compact defaults participate in the same flex order. */
.pp-catalog.pp-catalog ul.products li.product .astra-shop-summary-wrap > .pc-default-values {
	order: 4;
	align-self: stretch;
	width: auto;
	min-width: 0;
	margin: 8px 14px 0;
	padding: 0;
	color: var(--ppc-muted);
	line-height: 1.5;
}
.pp-catalog.pp-catalog ul.products li.product .pc-default-values--compact .pc-default-values__item {
	font-size: var(--pp-fs-3xs, 10px);
	font-weight: 600;
}

/* Price row is anchored to the lower content area, so products with fewer
   default values still line up with richer PrintConstructor cards. */
.pp-catalog.pp-catalog ul.products li.product .pp-card-price-row {
	order: 5;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin: auto 0 0;
	padding: 13px 14px 0;
	border-top: 1px solid var(--ppc-border);
}
.pp-catalog.pp-catalog ul.products li.product .pp-card-price {
	display: flex;
	flex: 1 1 135px;
	flex-direction: column;
	min-width: 0;
}
.pp-catalog.pp-catalog ul.products li.product .pp-card-price-label {
	color: var(--ppc-muted);
	font-size: var(--pp-fs-2xs, 11px);
	line-height: 1.2;
}
.pp-catalog.pp-catalog ul.products li.product .price {
	display: block;
	min-width: 0;
	margin: 0;
	padding: 7px 0 10px;
	color: var(--ppc-dark);
	font-size: clamp(18px,1.35vw,23px);
	font-weight: 800;
	line-height: 1.18;
	overflow-wrap: anywhere;
	border: 0;
}
.pp-catalog.pp-catalog ul.products li.product .price del { color: var(--ppc-muted); font-size: var(--pp-fs-md, 14px); font-weight: 500; }
.pp-catalog.pp-catalog ul.products li.product .price ins { text-decoration: none; }
.pp-catalog.pp-catalog ul.products li.product .pp-card-mode-note {
	display: inline-flex;
	align-items: center;
	align-self: flex-end;
	flex: 0 0 auto;
	gap: 4px;
	margin: 0;
	padding: 0 0 11px;
	color: #047857;
	font-size: var(--pp-fs-3xs, 10px);
	font-weight: 800;
	line-height: 1.25;
	text-transform: uppercase;
	white-space: nowrap;
}
.pp-catalog.pp-catalog ul.products li.product .pp-card-mode-note svg { width: 12px; height: 12px; flex: 0 0 auto; }

/* One primary action per card. Appearance/interaction comes from buttons.css. */
.pp-catalog.pp-catalog ul.products li.product .astra-shop-summary-wrap > .button,
.pp-catalog.pp-catalog ul.products li.product .astra-shop-summary-wrap > .added_to_cart {
	order: 6;
	width: auto;
	margin: 0 14px 14px;
}
.pp-catalog.pp-catalog li.product .button svg { width: 16px; height: 16px; flex: 0 0 auto; }
.pp-catalog.pp-catalog li.product .onsale {
	position: absolute;
	z-index: 3;
	left: 12px;
	top: 12px;
	min-width: auto;
	min-height: auto;
	margin: 0;
	padding: 5px 10px;
	color: #fff;
	background: #10b981;
	border-radius: 999px;
	font-size: var(--pp-fs-2xs, 11px);
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
}

@media (max-width: 1280px) {
	.pp-catalog.pp-catalog ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 840px) {
	.pp-catalog.pp-catalog ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 520px) {
	.pp-catalog.pp-catalog ul.products { grid-template-columns: 1fr; gap: 14px; }
	.pp-catalog.pp-catalog ul.products li.product .astra-shop-thumbnail-wrap img,
	.pp-catalog.pp-catalog ul.products li.product img.attachment-woocommerce_thumbnail { aspect-ratio: 16 / 10; padding: 14px; }
	.pp-catalog.pp-catalog ul.products li.product .woocommerce-loop-product__title,
	.pp-catalog.pp-catalog ul.products li.product .ast-woo-shop-product-title { min-height: 0; font-size: var(--pp-fs-xl,16px); }
	.pp-catalog.pp-catalog ul.products li.product .pp-card-price-row { flex-wrap: nowrap; }
}

/* =========================================================================
   Пагінація (штатна WooCommerce)
   ========================================================================= */
.pp-catalog .woocommerce-pagination { margin-top: 32px; text-align: center; }
.pp-catalog .woocommerce-pagination ul.page-numbers { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; list-style: none; }
.pp-catalog .woocommerce-pagination ul.page-numbers li { margin: 0; border: 0; list-style: none; }
.pp-catalog .woocommerce-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 8px;
	color: var(--ppc-dark);
	background: #fff;
	border: 1px solid var(--ppc-border);
	border-radius: 9px;
	font-size: var(--pp-fs-md, 14px);
	text-decoration: none;
}
.pp-catalog .woocommerce-pagination .page-numbers.current { color: #fff; background: var(--ppc-orange); border-color: var(--ppc-orange); }
.pp-catalog .woocommerce-pagination .page-numbers:hover:not(.current) { border-color: #fdba74; }

/* =========================================================================
   Порожній стан
   ========================================================================= */
.pp-catalog__empty { padding: 60px 25px; text-align: center; background: #fff; border: 1px solid var(--ppc-border); border-radius: var(--ppc-radius-lg); }
.pp-catalog__empty-icon { display: grid; place-items: center; width: 66px; height: 66px; margin: 0 auto 18px; color: var(--ppc-orange); background: var(--pp-orange-light, #fff7ed); border-radius: 50%; }
.pp-catalog__empty-icon svg { width: 28px; height: 28px; }
.pp-catalog__empty h3 { margin: 0 0 6px; font-size: var(--pp-fs-3xl, 20px); }
.pp-catalog__empty p { margin: 0 0 18px; color: var(--ppc-muted); }

/* =========================================================================
   Templates CTA (Shop)
   ========================================================================= */
.pp-templates-cta { padding: 0 0 64px; background: var(--ppc-bg); }
.pp-templates-cta__card {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr) auto;
	align-items: center;
	gap: 36px;
	padding: 38px;
	color: #fff;
	background: linear-gradient(135deg, #111827, #1c2336);
	border-radius: var(--ppc-radius-xl);
}
.pp-templates-cta__card::after { content: ""; position: absolute; right: -110px; top: -170px; width: 370px; height: 370px; border-radius: 50%; background: rgba(249, 115, 22, .1); }
.pp-templates-cta__art { position: relative; min-height: 160px; }
.pp-tpl { position: absolute; display: grid; place-items: center; width: 110px; height: 145px; border: 6px solid #fff; border-radius: 8px; box-shadow: 0 17px 30px rgba(0, 0, 0, .3); font-weight: 800; }
.pp-tpl--one { left: 17px; top: 8px; color: #fff; background: #172d4c; transform: rotate(-9deg); }
.pp-tpl--two { left: 92px; top: -4px; color: #27624f; background: #d1fae5; transform: rotate(4deg); font-family: serif; }
.pp-tpl--three { left: 170px; top: 13px; color: #111827; background: linear-gradient(90deg, #f97316 0 30%, #fff 30%); transform: rotate(10deg); }
.pp-templates-cta__copy { position: relative; z-index: 2; }
.pp-templates-cta__copy h2 { margin: 0; font-size: clamp(22px, 2.2vw, 30px); }
.pp-templates-cta__copy .pp-section-label { color: #fb923c; }
.pp-templates-cta__copy p:not(.pp-section-label) { margin: 9px 0 0; color: #94a3b8; font-size: var(--pp-fs-lg, 15px); }
.pp-templates-cta .pp-btn-primary { position: relative; z-index: 2; }

/* =========================================================================
   SEO (Shop)
   ========================================================================= */
.pp-seo--shop { padding: 58px 0; background: #fff; }
.pp-seo__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); gap: 55px; }
.pp-seo__main h2 { margin: 0 0 18px; font-size: clamp(24px, 2.4vw, 30px); }
.pp-seo__main p { color: var(--ppc-text-2); font-size: var(--pp-fs-lg, 15px); line-height: 1.75; }
.pp-seo__more { display: inline-flex; align-items: center; gap: 6px; padding: 0; margin-top: 8px; color: var(--ppc-orange); background: none; border: 0; font-weight: 700; cursor: pointer; }
.pp-seo__more svg { width: 18px; height: 18px; transition: transform .2s; }
.pp-seo__more[aria-expanded="true"] svg { transform: rotate(180deg); }
.pp-seo__aside { padding: 26px; background: var(--ppc-bg); border: 1px solid var(--ppc-border); border-radius: var(--ppc-radius-lg); }
.pp-seo__aside > strong { font-size: var(--pp-fs-2xl, 18px); }
.pp-seo__aside ul { display: grid; gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
.pp-seo__aside li { display: flex; align-items: center; gap: 9px; color: var(--ppc-text-2); font-size: var(--pp-fs-md, 14px); }
.pp-seo__aside li svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--ppc-orange); }

/* =========================================================================
   Адаптив
   ========================================================================= */
@media (max-width: 1180px) {
	.pp-cat-hero__grid { grid-template-columns: 1fr 360px; }
	.pp-cat-strip__grid { grid-template-columns: repeat(3, 1fr); }
	/* ⚠ Лише варіант З aside. Без :not() це правило перебивало `--full` (архів
	   категорії, де фільтрів немає) і единий дочірній .pp-catalog__results падав
	   у колонку 230px — сітка лишалася 2-3-колонковою всередині 230px, а картка
	   стискалася до ~66-107px. Вікно поломки було 901-1180px. */
	.pp-catalog__layout:not(.pp-catalog__layout--full) { grid-template-columns: 230px minmax(0, 1fr); }
	.pp-templates-cta__card { grid-template-columns: 230px 1fr; }
	.pp-templates-cta .pp-btn-primary { grid-column: 2; justify-self: start; }
}

@media (max-width: 900px) {
	/* Фільтри → мобільний drawer */
	.pp-catalog__filter-toggle { display: inline-flex; }
	/* Той самий селектор, що і в блоці ≤1180 — інакше правило вище (з :not(),
	   специфічність 0,2,0) виграє й колонка 230px лишиться, хоча aside уже
	   поїхав у fixed-drawer, а результати стиснуться до 230px. */
	.pp-catalog__layout:not(.pp-catalog__layout--full) { grid-template-columns: minmax(0, 1fr); }
	.pp-filters {
		position: fixed;
		z-index: 1000;
		left: 0;
		top: 0;
		bottom: 0;
		width: min(340px, 88vw);
		overflow-y: auto;
		border: 0;
		border-radius: 0 18px 18px 0;
		box-shadow: 18px 0 45px rgba(0, 0, 0, .2);
		transform: translateX(-105%);
		transition: transform .25s;
	}
	.pp-filters.is-open { transform: translateX(0); }
	.pp-filters__mobile-head {
		position: sticky;
		z-index: 3;
		top: -18px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: -18px -18px 6px;
		padding: 18px;
		background: #fff;
		border-bottom: 1px solid var(--ppc-border);
	}
	.pp-filters__mobile-head strong { font-size: var(--pp-fs-xl, 16px); }
	.pp-filters__close { display: grid; place-items: center; width: 36px; height: 36px; background: #f3f4f6; border: 0; border-radius: 50%; cursor: pointer; }
	.pp-filters__close svg { width: 18px; height: 18px; }
	.pp-filters__apply { display: flex; }
	.pp-filters__backdrop { position: fixed; z-index: 990; inset: 0; background: rgba(15, 23, 42, .55); }
	.pp-filters__backdrop.is-open { display: block; }
}

@media (max-width: 760px) {
	.pp-cat-hero__grid { grid-template-columns: 1fr; padding-block: 26px 44px; }
	.pp-cat-hero--shop .pp-cat-hero__art { display: none; }
	.pp-cat-strip { padding: 44px 0; }
	.pp-section-heading { flex-direction: column; align-items: flex-start; gap: 10px; }
	.pp-cat-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.pp-catalog { padding: 40px 0 52px; }
	.pp-catalog__head { flex-direction: column; align-items: stretch; gap: 12px; }
	.pp-catalog__filter-toggle { justify-content: center; }
	.pp-catalog__toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
	.pp-catalog__toolbar .woocommerce-ordering select { width: 100%; }
	.pp-catalog__active { align-items: flex-start; }
	.pp-catalog__clear { margin-left: 0; }
	.pp-templates-cta__card { grid-template-columns: 1fr; padding: 28px 20px; text-align: center; }
	.pp-templates-cta .pp-btn-primary { grid-column: 1; width: 100%; justify-content: center; }
	.pp-tpl--one { left: calc(50% - 120px); }
	.pp-tpl--two { left: calc(50% - 55px); }
	.pp-tpl--three { left: calc(50% + 15px); }
	.pp-seo__grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 400px) {
	.pp-cat-hero__title { font-size: var(--pp-fs-7xl, 32px); }
}

/* Доступність: поважаємо prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.pp-cat-tile,
	.pp-catalog ul.products li.product,
	.pp-filters,
	.pp-filter-group__title svg,
	.pp-seo__more svg { transition: none !important; }
}