/* =========================================================================
   Vizitka Child — дизайн-токени + базові стилі вітрини
   Значення зчитані наживо з piuroprint.pl (computed styles). Див. SPEC.
   ========================================================================= */

:root {
	/* Canonical PIUROPRINT design system — one source of truth. */
	--pp-orange: #F97316;
	--pp-orange-hover: #EA580C;
	--pp-orange-light: #FFF7ED;
	--pp-dark: #111827;
	--pp-footer: #0F172A;
	--pp-footer-bottom: #020617;
	--pp-bg: #F8FAFC;
	--pp-white: #FFFFFF;
	/* Product-card surface is a site-wide contract, not a page-level color. */
	--pp-product-card-bg: #f4f5f7;
	--pp-product-card-media-bg: var(--pp-product-card-bg);
	--pp-img-bg: var(--pp-product-card-media-bg);
	--pp-container: 1800px;
	--pp-shell-inset: clamp(24px, 6vw, 64px);
	--pp-text: #111827;
	--pp-text-2: #4B5563;
	--pp-text-muted: #6B7280;
	--pp-text-light: #9CA3AF;
	--pp-border: #E5E7EB;
	--pp-border-strong: #BBBBBB;
	--pp-radius-sm: 10px;
	--pp-radius: 12px;
	--pp-radius-lg: 18px;
	--pp-radius-xl: 24px;
	--pp-shadow-card: 0 8px 24px rgba(0, 0, 0, .06);
	--pp-shadow-hover: 0 20px 40px rgba(0, 0, 0, .08);
	--pp-shadow-float: 0 16px 48px rgba(0, 0, 0, .14);
	--pp-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--pp-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
	--pp-header-h: 68px;
	--pp-gap: 24px;
	--pp-leading-body: 1.6;

	/* Typography scale — no parallel legacy scale. */
	--pp-fs-3xs: 10px;
	--pp-fs-2xs: 11px;
	--pp-fs-xs: 12px;
	--pp-fs-sm: 13px;
	--pp-fs-md: 14px;
	--pp-fs-lg: 15px;
	--pp-fs-xl: 16px;
	--pp-fs-2xl: 18px;
	--pp-fs-3xl: 20px;
	--pp-fs-4xl: 22px;
	--pp-fs-5xl: 26px;
	--pp-fs-6xl: 28px;
	--pp-fs-7xl: 32px;
	--pp-fs-8xl: 34px;
	--pp-fs-9xl: 40px;
	--pp-fs-10xl: 44px;
	--pp-fs-11xl: 56px;
	--pp-fs-12xl: 64px;

	/* Shared control/component scale for storefront, WooCommerce and PrintConstructor. */
	--pp-control-height: 48px;
	/* Button size contract. `--pp-button-height` stays as the md compatibility alias. */
	--pp-button-height-sm: 40px;
	--pp-button-height-md: 48px;
	--pp-button-height-lg: 56px;
	--pp-button-height: var(--pp-button-height-md);
	--pp-button-padding-sm: 16px;
	--pp-button-padding-md: 22px;
	--pp-button-padding-lg: 26px;
	--pp-button-radius-sm: 10px;
	--pp-button-radius: var(--pp-radius);
	--pp-button-font-size: var(--pp-fs-lg, 15px);
	--pp-control-radius: 10px;
	--pp-card-radius: 16px;
	--pp-ui-line: var(--pp-border);
	--pp-ui-muted: var(--pp-text-muted);
	--pp-ui-surface: var(--pp-white);
	--pp-ui-soft: var(--pp-bg);
	--pp-ui-orange-soft: var(--pp-orange-light);
	--pp-ui-focus: 0 0 0 3px rgba(249, 115, 22, .14);
	--pp-ui-shadow: 0 10px 30px rgba(15, 23, 42, .06);
	--pp-ui-transition: 180ms ease;
}

/* Cross-document View Transitions intentionally disabled.
   WooCommerce/Printcart use complex navigation and document lifecycle flows;
   page transitions are a progressive enhancement, not part of the shell contract. */

/* --- Reset-лайт + база --- */
/* The real child-theme shell uses `pp-body` in header.php/header-checkout.php.
   Keep the historical `vizitka-front` alias for compatibility, but `pp-body` is
   the canonical frontend typography owner. Without this, controls/components
   that do not set a local font fall back to Astra/Woo/plugin fonts. */
body.pp-body,
body.vizitka-front {
	font-family: var(--pp-font);
	font-size: var(--pp-fs-xl);
	line-height: var(--pp-leading-body);
	color: var(--pp-text);
	background: var(--pp-bg);
}

/* Reusable storefront primitives. Keep selectors low-specificity so a page
   component can opt into a different layout without fighting the system. */
body.pp-body :where(.pp-surface) {
	border: 1px solid var(--pp-ui-line);
	border-radius: var(--pp-card-radius);
	background: var(--pp-ui-surface);
	box-shadow: var(--pp-ui-shadow);
}

body.pp-body :where(.pp-button) {
	display: inline-flex;
	min-height: var(--pp-button-height);
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--pp-font);
	font-size: var(--pp-button-font-size);
	font-weight: 800;
	line-height: 1.1;
}

body.pp-body :where(
	.pp-control,
	input[type="text"], input[type="email"], input[type="tel"],
	input[type="number"], input[type="password"], input[type="url"],
	select, textarea
) {
	border: 1px solid var(--pp-ui-line);
	border-radius: var(--pp-control-radius);
	background: var(--pp-ui-surface);
	color: var(--pp-text);
	transition: border-color var(--pp-ui-transition), box-shadow var(--pp-ui-transition);
}

body.pp-body :where(
	.pp-control,
	input[type="text"], input[type="email"], input[type="tel"],
	input[type="number"], input[type="password"], input[type="url"],
	select, textarea
):focus {
	outline: 0;
	border-color: var(--pp-orange);
	box-shadow: var(--pp-ui-focus);
}

body.pp-body :where(.pp-choice) {
	border: 1px solid var(--pp-ui-line);
	border-radius: var(--pp-control-radius);
	background: var(--pp-ui-surface);
	transition: border-color var(--pp-ui-transition), background var(--pp-ui-transition), box-shadow var(--pp-ui-transition);
}

body.pp-body :where(.pp-choice:hover) { border-color: #fdba74; }
body.pp-body :where(.pp-choice.is-selected, .pp-choice[aria-pressed="true"]) {
	border-color: var(--pp-orange);
	background: var(--pp-ui-orange-soft);
	box-shadow: 0 0 0 1px rgba(249, 115, 22, .1);
}

body.pp-body :where(.pp-table) {
	width: 100%;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	background: transparent;
}

/* ==========================================================================
   BREADCRUMBS — one PIUROPRINT component for the whole site.
   The visual reference is the product-category breadcrumb: compact home icon,
   chevron separators, 13px typography and the same spacing everywhere.
   Dark heroes only switch the color tokens; structure/metrics stay identical.
   ========================================================================== */
body.pp-body :where(.pp-breadcrumb, .vz-breadcrumb, .woocommerce-breadcrumb, .pp-cat-breadcrumb) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px 10px;
	min-width: 0;
	margin: 0 0 18px;
	padding: 0;
	color: #7a8699;
	font-family: var(--pp-font);
	font-size: var(--pp-fs-sm, 13px);
	font-weight: 500;
	line-height: 1.45;
}

/* Yoast wraps the whole trail in one span. Make that wrapper use the same flex
   geometry as the fallback/WooCommerce trails instead of rendering as text. */
body.pp-body .vz-breadcrumb > span {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px 10px;
}

body.pp-body :where(.pp-breadcrumb, .vz-breadcrumb, .woocommerce-breadcrumb, .pp-cat-breadcrumb) a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: #667085;
	text-decoration: none;
	transition: color var(--pp-ui-transition);
}
body.pp-body :where(.pp-breadcrumb, .vz-breadcrumb, .woocommerce-breadcrumb, .pp-cat-breadcrumb) a:hover {
	color: var(--pp-orange);
}
body.pp-body :where(.pp-breadcrumb, .vz-breadcrumb, .woocommerce-breadcrumb, .pp-cat-breadcrumb) a > svg {
	flex: 0 0 15px;
	width: 15px;
	height: 15px;
}

/* Same home glyph as /product-category/uncategorized/. Category markup already
   contains the SVG. Add the glyph to the FIRST crumb only.

   Important: Yoast wraps every crumb in its own <span>. Using
   `a:first-of-type` here would therefore match Home AND every later linked
   crumb (Blog, category, etc.), because each link is the first <a> in its own
   wrapper. Keep separate selectors for direct-link trails (Woo/fallback) and
   Yoast's nested wrapper so exactly one home glyph is rendered. */
body.pp-body :where(.pp-breadcrumb, .vz-breadcrumb, .woocommerce-breadcrumb):not(.pp-cat-breadcrumb) > a:first-child::before,
body.pp-body .vz-breadcrumb:not(.pp-cat-breadcrumb) > span > span:first-child > a::before {
	content: "";
	display: inline-block;
	flex: 0 0 15px;
	width: 15px;
	height: 15px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.pp-body :where(.pp-breadcrumb__sep, .pp-cat-breadcrumb__sep, .pp-tg-crumbs__sep) {
	color: #94a3b8;
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
}
body.pp-body :where(.pp-breadcrumb, .vz-breadcrumb, .woocommerce-breadcrumb, .pp-cat-breadcrumb) :where(.is-current, .breadcrumb_last, .pp-tg-crumbs__current, [aria-current="page"]) {
	color: var(--pp-text);
	font-weight: 700;
}

/* The reference category lives on a dark hero. Any breadcrumb inside a dark
   PIUROPRINT hero receives exactly those colors without a second component. */
body.pp-body :where(.pp-breadcrumb--dark, .pp-cat-hero .pp-breadcrumb, .pp-page-hero .pp-breadcrumb, .pp-raq-hero .pp-breadcrumb, .pp-op-hero .pp-breadcrumb, .pp-404-hero .pp-breadcrumb, .vz-search__hero .pp-breadcrumb) {
	color: #9aa5b5;
}
body.pp-body :where(.pp-breadcrumb--dark, .pp-cat-hero .pp-breadcrumb, .pp-page-hero .pp-breadcrumb, .pp-raq-hero .pp-breadcrumb, .pp-op-hero .pp-breadcrumb, .pp-404-hero .pp-breadcrumb, .vz-search__hero .pp-breadcrumb) a { color: #c3cbd6; }
body.pp-body :where(.pp-breadcrumb--dark, .pp-cat-hero .pp-breadcrumb, .pp-page-hero .pp-breadcrumb, .pp-raq-hero .pp-breadcrumb, .pp-op-hero .pp-breadcrumb, .pp-404-hero .pp-breadcrumb, .vz-search__hero .pp-breadcrumb) a:hover { color: #fff; }
body.pp-body :where(.pp-breadcrumb--dark, .pp-cat-hero .pp-breadcrumb, .pp-page-hero .pp-breadcrumb, .pp-raq-hero .pp-breadcrumb, .pp-op-hero .pp-breadcrumb, .pp-404-hero .pp-breadcrumb, .vz-search__hero .pp-breadcrumb) :where(.is-current, .breadcrumb_last, .pp-tg-crumbs__current, [aria-current="page"]) { color: #e2e8f0; }
body.pp-body :where(.pp-breadcrumb--dark, .pp-cat-hero .pp-breadcrumb, .pp-page-hero .pp-breadcrumb, .pp-raq-hero .pp-breadcrumb, .pp-op-hero .pp-breadcrumb, .pp-404-hero .pp-breadcrumb, .vz-search__hero .pp-breadcrumb) :where(.pp-breadcrumb__sep, .pp-cat-breadcrumb__sep, .pp-tg-crumbs__sep) { color: #64748b; }

.pp-commerce-breadcrumb {
	padding-top: 18px;
}
.pp-page-hero .pp-breadcrumb { margin-bottom: 16px; }

@media (max-width: 680px) {
	body.pp-body :where(.pp-breadcrumb, .vz-breadcrumb, .woocommerce-breadcrumb, .pp-cat-breadcrumb),
	body.pp-body .vz-breadcrumb > span {
		gap: 5px 7px;
		margin-bottom: 12px;
		font-size: var(--pp-fs-xs, 12px);
	}
	body.pp-body :where(.pp-breadcrumb__sep, .pp-cat-breadcrumb__sep, .pp-tg-crumbs__sep) { font-size: 16px; }
	.pp-commerce-breadcrumb { padding-top: 12px; }
}

.vz-container {
	width: calc(100% - var(--pp-shell-inset));
	max-width: var(--pp-container);
	margin-left: auto;
	margin-right: auto;
	padding-inline: 0;
}

.vz-section { padding-block: 56px; }
.vz-section__title {
	font-weight: 700;
	font-size: var(--pp-fs-6xl, 28px);
	line-height: 1.2;
	color: var(--pp-text);
	text-align: center;
	margin: 0 0 32px;
}

/* --- Action buttons ---------------------------------------------------------
   Appearance/states/legacy adapters live exclusively in assets/css/buttons.css.
   theme.css owns only design tokens; page CSS may own layout around a button.
   ------------------------------------------------------------------------- */

/* --- Сітки секцій --- */
.vz-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--pp-gap);
}

/* --- Картка товару --- */
.vz-product {
	background: var(--pp-white);
	border-radius: var(--pp-radius);
	overflow: hidden;
	text-align: center;
	border: 1px solid transparent;
	transition: box-shadow .15s ease, border-color .15s ease;
}
.vz-product:hover { box-shadow: 0 6px 24px rgba(0,0,0,.08); }
.vz-product__media {
	background: var(--pp-img-bg);
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
}
.vz-product__media img { max-width: 100%; height: auto; }
.vz-product__title { font-weight: 600; font-size: var(--pp-fs-xl, 16px); margin: 14px 12px 6px; }
.vz-product__price { font-size: var(--pp-fs-md, 14px); color: var(--pp-text-muted); margin: 0 12px 16px; }
.vz-product__price b { color: var(--pp-orange); font-weight: 700; }

/* --- Бейдж новинки --- */
.vz-badge-new {
	display: inline-block;
	background: var(--pp-orange);
	color: var(--pp-text);
	font-weight: 700;
	font-size: var(--pp-fs-sm, 13px);
	padding: 4px 12px;
	border-radius: 999px;
}

/* --- Зірки рейтингу --- */
.vz-stars { color: var(--pp-orange); letter-spacing: 2px; font-size: var(--pp-fs-xl, 16px); }

/* --- Hero-слайдер --- */
.vz-hero { position: relative; background: var(--pp-img-bg); }
.vz-hero__swiper { width: 100%; }
.vz-hero__slide {
	position: relative;
	min-height: 460px;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
}
.vz-hero__slide--placeholder {
	background: linear-gradient(120deg, var(--pp-orange-light) 0%, var(--pp-bg) 100%);
}
.vz-hero__inner { display: flex; justify-content: flex-end; }
.vz-hero__card {
	background: rgba(255,255,255,.95);
	border-radius: var(--pp-radius-lg);
	padding: 32px 36px;
	max-width: 420px;
	box-shadow: 0 10px 40px rgba(0,0,0,.10);
}
.vz-hero__eyebrow { color: var(--pp-orange); font-weight: 700; font-size: var(--pp-fs-sm, 13px); letter-spacing: .08em; text-transform: uppercase; }
.vz-hero__title { font-size: var(--pp-fs-8xl, 34px); font-weight: 800; margin: 8px 0 12px; line-height: 1.1; }
.vz-hero__subtitle { color: var(--pp-text-muted); font-size: var(--pp-fs-xl, 16px); margin: 0 0 22px; }
.vz-hero__hint { color: var(--pp-border-strong); font-size: var(--pp-fs-xs, 12px); margin: 14px 0 0; }
.vz-hero .swiper-button-prev, .vz-hero .swiper-button-next { color: var(--pp-text); }
.vz-hero .swiper-pagination-bullet-active { background: var(--pp-orange); }

/* --- Хедер (sticky) --- */
.vz-header {
	position: sticky;
	top: 0;
	z-index: 50;
	height: var(--pp-header-h);
	display: flex;
	align-items: center;
	background: #000;
	border-bottom: 1px solid #000;
	transition: box-shadow .15s ease;
}
.vz-header.is-scrolled { box-shadow: 0 2px 12px rgba(0,0,0,.35); }
.vz-icon { background: none; border: 0; cursor: pointer; font-size: var(--pp-fs-2xl, 18px); line-height: 1; text-decoration: none; color: #fff; }
.vz-burger { display: none; background: none; border: 0; font-size: var(--pp-fs-4xl, 22px); cursor: pointer; line-height: 1; color: #fff; padding: 0; }
.vz-header__inner { display: flex; align-items: center; gap: 28px; width: 100%; }
.vz-logo { font-size: var(--pp-fs-3xl, 20px); text-decoration: none; white-space: nowrap; color: #fff; }
.vz-logo:hover, .vz-logo:hover .is-piuro, .vz-logo:hover .is-print { color: #fff; }
.vz-logo .is-piuro, .vz-footer__logo .is-piuro { font-weight: 800; }
.vz-logo .is-print, .vz-footer__logo .is-print { font-weight: 300; }
.vz-header-phone { display: flex; align-items: center; gap: 6px; text-decoration: none; color: #fff; white-space: nowrap; font-weight: 600; font-size: var(--pp-fs-md, 14px); }
.vz-header-phone:hover { color: var(--pp-orange); }
.vz-header-phone__icon { font-size: var(--pp-fs-xl, 16px); line-height: 1; }
.vz-nav { display: flex; gap: 22px; margin-left: auto; }
.vz-nav a { color: #fff; text-decoration: none; font-weight: 600; font-size: var(--pp-fs-md, 14px); }
.vz-nav a:hover { color: var(--pp-orange); }
.vz-header__icons { display: flex; gap: 16px; align-items: center; }
.vz-account-link { display: flex; align-items: center; gap: 6px; text-decoration: none; color: #fff; white-space: nowrap; font-weight: 600; font-size: var(--pp-fs-md, 14px); }
.vz-account-link:hover { color: var(--pp-orange); }
.vz-account-link__icon { display: flex; color: #fff; }

/* --- Перемикач мови --- */
.vz-lang { position: relative; }
.vz-lang__toggle { display: inline-flex; align-items: center; gap: 4px; background: none; border: 1px solid rgba(255,255,255,.35); border-radius: 8px; padding: 6px 10px; font-weight: 700; font-size: var(--pp-fs-sm, 13px); color: #fff; cursor: pointer; line-height: 1; }
/* Синій акцент на чорному хедері зливається з фоном — на hover лишаємо білий текст, підсвічуємо тлом. */
.vz-lang__toggle:hover { border-color: var(--pp-orange); color: #fff; background: rgba(255,255,255,.12); }
.vz-lang__caret { font-size: var(--pp-fs-3xs, 10px); }
.vz-lang__menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 150px; list-style: none; margin: 0; padding: 6px; background: #fff; border: 1px solid var(--pp-border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.10); display: none; z-index: 60; }
.vz-lang.is-open .vz-lang__menu { display: block; }
.vz-lang__item a { display: flex; align-items: baseline; gap: 8px; padding: 8px 10px; border-radius: 6px; text-decoration: none; color: var(--pp-text); font-size: var(--pp-fs-md, 14px); font-weight: 600; }
.vz-lang__item a:hover { background: var(--pp-bg); color: var(--pp-orange); }
.vz-lang__item.is-active a { color: var(--pp-orange); }
/* Поточна (активна) мова на hover — синій на синьому був би непомітний, тож інвертуємо в заливку. */
.vz-lang__item.is-active a:hover { background: var(--pp-orange); color: #fff; }
.vz-lang__name { color: var(--pp-text-muted); font-weight: 400; font-size: var(--pp-fs-sm, 13px); }

/* --- Футер --- */
.vz-footer { background: var(--pp-footer); color: #cfd3da; padding-block: 56px 24px; }
.vz-footer a { color: #cfd3da; text-decoration: none; transition: color .15s ease; }
.vz-footer a:hover { color: #fff; }
.vz-footer__cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.3fr; gap: 40px; }
.vz-footer__col h4 { color: #fff; font-size: var(--pp-fs-sm, 13px); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 16px; }
.vz-footer__col h4.vz-footer__sub { margin-top: 26px; }
.vz-footer__bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 40px; padding-top: 18px; font-size: var(--pp-fs-sm, 13px); color: #8a8f99; text-align: center; }

/* Бренд-блок */
.vz-footer__logo { font-size: var(--pp-fs-3xl, 20px); display: inline-block; margin-bottom: 14px; color: #fff; }
.vz-footer__logo:hover, .vz-footer__logo:hover .is-piuro, .vz-footer__logo:hover .is-print { color: #fff; }
.vz-footer__tagline { font-size: var(--pp-fs-md, 14px); line-height: 1.6; color: #9aa0aa; margin: 0 0 18px; max-width: 280px; }

/* Соцмережі */
.vz-footer__social { display: flex; gap: 10px; }
.vz-social { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); color: #cfd3da; }
.vz-social:hover { background: var(--pp-orange); color: #fff; }
.vz-social--sm { width: 28px; height: 28px; }
.vz-footer__phone-icons { display: flex; gap: 8px; margin: -2px 0 8px; }

/* Контакти */
.vz-footer__contacts, .vz-footer__list { list-style: none; padding: 0; margin: 0; }
.vz-footer__contacts li { font-size: var(--pp-fs-md, 14px); line-height: 1.5; margin-bottom: 8px; color: #b9bdc6; }
.vz-footer__list li { margin-bottom: 10px; }
.vz-footer__list a { font-size: var(--pp-fs-md, 14px); }

/* Платіжні чипи */
.vz-pay { display: flex; flex-wrap: wrap; gap: 8px; }
.vz-pay__chip {
	display: inline-flex; align-items: center; justify-content: center;
	height: 30px; padding: 0 12px; border-radius: 6px;
	background: #fff; color: #252A33; font-size: var(--pp-fs-xs, 12px); font-weight: 700;
	letter-spacing: .01em; line-height: 1; white-space: nowrap;
}
.vz-footer__write { margin-top: 4px; color: #fff; border-color: rgba(255,255,255,.4); }
.vz-footer__write:hover { background: var(--pp-orange); border-color: var(--pp-orange); color: #fff; }

/* --- Заголовок секції з вирівнюванням ліворуч --- */
.vz-section__title--left { text-align: left; }
.vz-link { color: var(--pp-orange); font-weight: 600; text-decoration: none; }
.vz-link:hover { text-decoration: underline; }

/* --- Nowość (широкі картки) --- */
.vz-news__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--pp-gap); }
.vz-news__card {
	position: relative; display: flex; gap: 18px; align-items: center;
	background: var(--pp-white); border-radius: var(--pp-radius); overflow: hidden;
	text-decoration: none; color: var(--pp-text); padding: 18px; border: 1px solid var(--pp-border);
}
.vz-news__card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.08); }
.vz-news__badge { position: absolute; top: 14px; left: 14px; }
.vz-news__media { flex: 0 0 42%; background: var(--pp-img-bg); border-radius: 8px; aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; }
.vz-news__media img { max-width: 100%; height: auto; }
.vz-news__body { flex: 1 1 auto; min-width: 0; }
.vz-news__body .vz-product__price { min-width: 0; margin: 0; }
.vz-news__name { font-weight: 700; font-size: var(--pp-fs-2xl, 18px); margin-bottom: 6px; }

/* --- O nas --- */
.vz-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.vz-about__media { background: var(--pp-img-bg); border-radius: var(--pp-radius-lg); aspect-ratio: 4/3; overflow: hidden; }
.vz-about__media img { width: 100%; height: 100%; object-fit: cover; }
.vz-about__title { font-size: var(--pp-fs-6xl, 28px); font-weight: 700; margin: 0 0 16px; }
.vz-about__text { color: var(--pp-text-muted); line-height: 1.6; margin-bottom: 22px; }

/* --- Шаблони (карусель карток) --- */
.vz-template-card { display: block; text-decoration: none; color: var(--pp-text); background: var(--pp-white); border-radius: var(--pp-radius); overflow: hidden; border: 1px solid var(--pp-border); }
.vz-template-card__media { background: var(--pp-img-bg); aspect-ratio: 3/4; display: flex; align-items: center; justify-content: center; }
.vz-template-card__media img { max-width: 100%; height: auto; }
.vz-template-card__title { padding: 12px; font-weight: 600; font-size: var(--pp-fs-md, 14px); text-align: center; }

/* --- Переваги (4 колонки) --- */
.vz-perks { background: #fff; border-block: 1px solid var(--pp-border); }
.vz-perks__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--pp-gap); }
.vz-perks__item { display: flex; gap: 12px; align-items: center; justify-content: center; text-align: left; }
.vz-perks__icon { font-size: var(--pp-fs-5xl, 26px); }
.vz-perks__body { display: flex; flex-direction: column; gap: 2px; }
.vz-perks__title { font-weight: 600; font-size: var(--pp-fs-md, 14px); }
.vz-perks__text { font-weight: 400; font-size: var(--pp-fs-sm, 13px); color: var(--pp-text-muted); }

/* --- Лічильники (Counters) перед футером --- */
.vz-counters { background: var(--pp-footer); padding-block: 32px; }
.vz-counters__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 56px;
	text-align: center;
	color: #fff;
}
.vz-counters__item {
	flex: 1 1 calc(16.6667% - 46.67px);
	min-width: calc(16.6667% - 46.67px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.vz-counters__icon { width: 48px; height: 48px; color: var(--pp-orange); flex-shrink: 0; }
.vz-counters__num { font-size: var(--pp-fs-3xl, 20px); line-height: 28px; font-weight: 600; }
.vz-counters__label {
	margin: 0;
	font-size: var(--pp-fs-xs, 12px);
	line-height: 16px;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--pp-orange);
	white-space: nowrap;
}

/* --- Відгуки --- */
.vz-reviews__avg { text-align: center; color: var(--pp-text-muted); margin: -16px 0 28px; }
.vz-review { background: var(--pp-white); border: 1px solid var(--pp-border); border-radius: var(--pp-radius); padding: 22px; height: auto; }
.vz-review__head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.vz-review__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.vz-review__avatar--ph { display: flex; align-items: center; justify-content: center; background: var(--pp-orange); color: #fff; font-weight: 700; }
.vz-review__author { font-weight: 700; }
.vz-review__bio { color: var(--pp-text-muted); font-size: var(--pp-fs-sm, 13px); }
.vz-review__meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.vz-review__date { color: var(--pp-text-muted); font-size: var(--pp-fs-sm, 13px); }
.vz-review__text { color: var(--pp-text); font-size: var(--pp-fs-md, 14px); line-height: 1.5; }
.vz-review__reply { margin-top: 14px; background: var(--pp-bg); border-radius: 8px; padding: 12px 14px; font-size: var(--pp-fs-sm, 13px); color: var(--pp-text-2); }
.vz-review__reply strong { color: var(--pp-text); display: block; margin-bottom: 4px; }

/* --- Блог --- */
.vz-blog__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 28px; }
.vz-post { display: block; text-decoration: none; color: var(--pp-text); }
.vz-post__media { background: var(--pp-img-bg); border-radius: var(--pp-radius); aspect-ratio: 16/10; overflow: hidden; margin-bottom: 12px; }
.vz-post__media img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.vz-post__title { font-weight: 700; font-size: var(--pp-fs-xl, 16px); }
.vz-post__date { color: var(--pp-text-muted); font-size: var(--pp-fs-sm, 13px); margin-top: 4px; }

/* --- Promo --- */
.vz-promo__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.vz-promo__card { background: var(--pp-orange); border-radius: var(--pp-radius-lg); aspect-ratio: 16/10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; color: #fff; }
.vz-promo__play { width: 64px; height: 64px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: var(--pp-orange); font-size: var(--pp-fs-4xl, 22px); cursor: pointer; }
.vz-promo__handles { display: flex; gap: 18px; font-weight: 600; }
.vz-promo__title { font-size: var(--pp-fs-6xl, 28px); font-weight: 700; margin: 0 0 12px; }
.vz-promo__lead { color: var(--pp-text-muted); margin: 0 0 18px; }
.vz-promo__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.vz-promo__list li { position: relative; padding-left: 22px; font-size: var(--pp-fs-md, 14px); }
.vz-promo__list li::before { content: "▶"; position: absolute; left: 0; color: var(--pp-orange); font-size: var(--pp-fs-2xs, 11px); top: 3px; }

/* --- FAQ --- */
.vz-faq__wrap { max-width: 820px; }
.vz-faq__item { background: var(--pp-white); border: 1px solid var(--pp-border); border-radius: var(--pp-radius); margin-bottom: 12px; overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease; }
.vz-faq__item:hover { border-color: var(--pp-border-strong); box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.vz-faq__item.is-open { border-color: var(--pp-orange); box-shadow: 0 2px 14px rgba(249,115,22,.10); }
.vz-faq__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; background: none; border: 0; padding: 18px 20px; font-weight: 600; font-size: var(--pp-fs-xl, 16px); text-align: left; cursor: pointer; color: var(--pp-text); }
.vz-faq__sign { box-sizing: border-box; position: relative; width: 32px; height: 32px; flex: 0 0 32px; align-self: center; border-radius: 50%; border: 1.5px solid var(--pp-orange); background: #fff; transition: background .2s ease, border-color .2s ease; }
.vz-faq__sign::before, .vz-faq__sign::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--pp-orange); border-radius: 2px; transition: transform .2s ease, background .2s ease; }
.vz-faq__sign::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
.vz-faq__sign::after { width: 2px; height: 14px; transform: translate(-50%, -50%); }
.vz-faq__item.is-open .vz-faq__sign::after { transform: translate(-50%, -50%) scaleY(0); }
.vz-faq__q:hover .vz-faq__sign, .vz-faq__item.is-open .vz-faq__sign { background: var(--pp-orange); border-color: var(--pp-orange); }
.vz-faq__q:hover .vz-faq__sign::before, .vz-faq__q:hover .vz-faq__sign::after,
.vz-faq__item.is-open .vz-faq__sign::before, .vz-faq__item.is-open .vz-faq__sign::after { background: #fff; }
.vz-faq__a { max-height: 0; overflow: hidden; transition: max-height .25s ease; padding: 0 20px; color: var(--pp-text-muted); }
.vz-faq__item.is-open .vz-faq__a { max-height: 600px; padding-bottom: 18px; }
/* Окрема сторінка FAQ (page-faq.php) — макет: зліва якірний нав, справа панель */
.vz-page--faq .vz-faq__list--page { max-width: 820px; margin: 8px auto 40px; }
/* Пошук по FAQ (крос-категорійний фільтр) */
.vz-faq-search { position: relative; max-width: 640px; margin: 0 auto 44px; }
.vz-faq-search .vz-faq-search__input { box-sizing: border-box; width: 100%; height: 54px; padding: 0 48px; font-size: var(--pp-fs-lg, 15px); color: var(--pp-text); background: var(--pp-white); border: 1px solid var(--pp-border); border-radius: var(--pp-radius); transition: border-color .15s ease, box-shadow .15s ease; }
.vz-faq-search .vz-faq-search__input:focus { outline: 0; border-color: var(--pp-orange); box-shadow: 0 0 0 3px rgba(249,115,22,.14); }
.vz-faq-search__input::placeholder { color: var(--pp-border-strong); }
.vz-faq-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.vz-faq-search__icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--pp-text-muted); pointer-events: none; }
.vz-faq-search__clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; background: none; color: var(--pp-text-muted); font-size: var(--pp-fs-4xl, 22px); line-height: 1; cursor: pointer; border-radius: 50%; display: none; }
.vz-faq-search__clear:hover { background: var(--pp-bg); color: var(--pp-text); }
.vz-faq-search.is-filled .vz-faq-search__clear { display: block; }
.vz-faq-noresults { display: none; grid-column: 1 / -1; color: var(--pp-text-muted); font-size: var(--pp-fs-lg, 15px); padding: 20px 2px; margin: 0; }
.vz-faq-layout.is-searching .vz-faq-noresults.is-visible { display: block; }
/* У режимі пошуку показуємо всі панелі, ховаємо заголовки-нав */
.vz-faq-layout.is-searching .vz-faq-cat-panel { display: block; }
.vz-faq-layout.is-searching .vz-faq-cat-panel:not(.has-match) { display: none; }
.vz-faq-layout.is-searching .vz-faq__item.is-hidden { display: none; }
.vz-faq-layout.is-searching .vz-faq-mobile-select { display: none; }

.vz-faq-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: start; max-width: 1040px; margin: 8px auto 44px; }
.vz-faq-nav__title { font-size: var(--pp-fs-xs, 12px); letter-spacing: .08em; text-transform: uppercase; color: var(--pp-text-muted); margin: 0 0 12px; padding-left: 14px; }
.vz-faq-nav__list { list-style: none; margin: 0; padding: 0; }
.vz-faq-nav__item { display: block; padding: 11px 14px; font-size: var(--pp-fs-sm, 13px); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--pp-text-muted); text-decoration: none; border-bottom: 1px solid var(--pp-border); border-left: 3px solid transparent; border-radius: 0 8px 8px 0; transition: color .15s ease, background .15s ease, border-color .15s ease; }
.vz-faq-nav__item:hover { color: var(--pp-text); background: var(--pp-bg); }
.vz-faq-nav__item.is-active { color: var(--pp-orange); font-weight: 700; background: rgba(249,115,22,.09); border-left-color: var(--pp-orange); border-bottom-color: transparent; }
.vz-faq-cat-panel { display: none; }
.vz-faq-cat-panel.is-active { display: block; }
.vz-faq-cat-panel__title { font-size: var(--pp-fs-4xl, 22px); font-weight: 700; margin: 0 0 20px; color: var(--pp-text); }
.vz-faq-mobile-select { display: none; margin-bottom: 20px; }
.vz-faq-mobile-select__label { display: block; font-size: var(--pp-fs-xs, 12px); letter-spacing: .08em; text-transform: uppercase; color: var(--pp-text-muted); margin-bottom: 8px; }
.vz-faq-mobile-select select { box-sizing: border-box; width: 100%; height: 52px; line-height: 1.2; padding: 0 42px 0 16px; font-size: var(--pp-fs-lg, 15px); font-weight: 600; color: var(--pp-text); background-color: var(--pp-white); border: 1px solid var(--pp-border); border-radius: var(--pp-radius); appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23F97316' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
@media (max-width: 860px) {
	.vz-faq-layout { grid-template-columns: 1fr; gap: 0; }
	.vz-faq-nav { display: none; }
	.vz-faq-mobile-select { display: block; }
	.vz-faq-cat-panel__title { font-size: var(--pp-fs-2xl, 18px); }
}

/* --- Респонсив --- */
@media (max-width: 900px) {
	.vz-news__grid, .vz-about__grid, .vz-promo__grid { grid-template-columns: 1fr; gap: 28px; }
	.vz-perks__grid { grid-template-columns: repeat(2, 1fr); }
	.vz-counters__grid { gap: 32px; }
	.vz-counters__item { flex-basis: calc(33.3333% - 37.34px); min-width: calc(33.3333% - 37.34px); }
	.vz-promo__list { grid-template-columns: 1fr; }
	.vz-grid-3 { grid-template-columns: repeat(2, 1fr); }
	.vz-footer__cols { grid-template-columns: repeat(2, 1fr); }
	.vz-burger { display: inline-block; }
	/* Хедер на мобільному: nav іде в абсолют (поза потоком), лишаються logo+іконки.
	   Стискаємо проміжки й логотип, іконки тиснемо праворуч — інакше їх сума
	   перевищує ширину вʼюпорта й справа зʼявляється порожня смуга (гориз. скрол). */
	.vz-header__inner { gap: 12px; }
	.vz-header__icons { gap: 12px; margin-left: auto; }
	.vz-logo { font-size: var(--pp-fs-xl, 16px); }
	.vz-header-phone { display: none; }
	.vz-account-link__label { display: none; }
	.vz-lang__toggle { padding: 5px 7px; }
	.vz-nav {
		position: absolute;
		top: var(--pp-header-h);
		left: 0;
		right: 0;
		background: #000;
		border-bottom: 1px solid rgba(255,255,255,.15);
		flex-direction: column;
		gap: 0;
		padding: 8px 20px;
		margin-left: 0;
		display: none;
	}
	.vz-nav.is-open { display: flex; }
	.vz-nav a { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
	.vz-hero__card { max-width: 100%; }
	.vz-hero__inner { justify-content: center; }
}
@media (max-width: 560px) {
	.vz-grid-3 { grid-template-columns: 1fr; }
	.vz-footer__cols { grid-template-columns: 1fr; }
	.vz-counters__grid { gap: 16px; }
	.vz-counters__item { flex-basis: calc(50% - 8px); min-width: calc(50% - 8px); }
	.vz-counters__label { white-space: normal; }
	.vz-section__title { font-size: var(--pp-fs-4xl, 22px); }
	/* Малі телефони (<560px): хедер усе одно не вміщав logo+іконки і давав
	   горизонтальний скрол (порожня смуга/зсув контенту). Тиснемо ще: вужчі
	   поля контейнера, дрібніший логотип та компактніші іконки. */
	.vz-container { padding-inline: 0; }
	.vz-logo { font-size: var(--pp-fs-lg, 15px); }
	.vz-header__icons { gap: 8px; }
	.vz-icon { font-size: var(--pp-fs-xl, 16px); }
	.vz-lang__toggle { padding: 4px 6px; font-size: var(--pp-fs-xs, 12px); }
}
@media (max-width: 360px) {
	/* На найменших екранах ховаємо декоративну іконку пошуку (без обробника),
	   щоб logo+мова+кошик+бургер гарантовано вміщались без гориз. скролу. */
	.vz-icon--search { display: none; }
}

/* =========================================================================
   Блог: лістинг, картка, одиночна стаття (стиль донора)
   ========================================================================= */

/* --- Лістинг --- */
.vz-bloglist__head { margin-bottom: 36px; }
.vz-bloglist__sub { color: var(--pp-text-muted); font-size: var(--pp-fs-xl, 16px); margin: 8px 0 0; }
.vz-bloglist__grid { gap: 32px var(--pp-gap); }
.vz-bloglist__empty { color: var(--pp-text-muted); }

/* --- Картка статті --- */
.vz-post--card {
	background: var(--pp-white);
	border-radius: var(--pp-radius);
	overflow: hidden;
	border: 1px solid var(--pp-border);
	display: flex;
	flex-direction: column;
	transition: box-shadow .15s ease, transform .15s ease;
}
.vz-post--card:hover { box-shadow: 0 8px 28px rgba(0,0,0,.08); transform: translateY(-2px); }
.vz-post--card .vz-post__media {
	position: relative;
	display: block;
	margin-bottom: 0;
	aspect-ratio: 16/10;
	background: var(--pp-img-bg);
}
.vz-post__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--pp-orange);
	color: #fff;
	font-size: var(--pp-fs-xs, 12px);
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 999px;
	text-decoration: none;
}
.vz-post__badge--inline { position: static; display: inline-block; }
.vz-post__body { padding: 18px 18px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.vz-post--card .vz-post__title { font-weight: 700; font-size: var(--pp-fs-xl, 16px); line-height: 1.35; color: var(--pp-text); text-decoration: none; }
.vz-post--card .vz-post__title:hover { color: var(--pp-orange); }
.vz-post__excerpt { color: var(--pp-text-muted); font-size: var(--pp-fs-md, 14px); line-height: 1.55; margin: 4px 0 10px; }
.vz-post__body .vz-link { margin-top: auto; }

/* --- Пагінація --- */
.vz-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 44px; flex-wrap: wrap; }
.vz-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 12px;
	border: 1px solid var(--pp-border); border-radius: 10px;
	color: var(--pp-text); text-decoration: none; font-weight: 600;
}
.vz-pagination .page-numbers.current { background: var(--pp-orange); border-color: var(--pp-orange); color: #fff; }
.vz-pagination a.page-numbers:hover { border-color: var(--pp-orange); color: var(--pp-orange); }

/* --- Хлібні крихти: стилі задані вище в уніфікованому блоці (body.pp-body :where(.vz-breadcrumb, ...)) --- */

/* =========================================================================
   Сторінки: PRODUKTY, INFORMACJE, KONTAKTY
   ========================================================================= */

/* --- Базова сторінка --- */
/* Контент сторінок (informacje/kontakty/produkty) рендериться напряму в <main id="vz-main">,
   який сам не обмежений по ширині. Тому даємо .vz-page той самий донорський контейнер
   (1200px, центр, бокові поля), що й секції головної через .vz-container — інакше картки/
   текст розтягуються від краю до краю вікна. */
/* Astra's id-rule `.ast-separate-container #primary { margin:0; padding:4em 0 }`
   (id specificity) beats any class selector, so центрування й бокові поля
   доводиться форсувати через !important — інакше <main> притискається до лівого краю. */
main.vz-page {
	width: calc(100% - var(--pp-shell-inset));
	max-width: var(--pp-container);
	margin-left: auto;
	margin-right: auto;
	padding-inline: 0;
	padding-block: 56px 80px;
}
.vz-page-header {
	text-align: center;
	margin-bottom: 56px;
}
.vz-page-header h1 {
	font-size: var(--pp-fs-9xl, 40px);
	font-weight: 800;
	margin: 0 0 16px;
	color: var(--pp-text);
}
.vz-page-excerpt {
	color: var(--pp-text-muted);
	font-size: var(--pp-fs-2xl, 18px);
	margin: 0;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

/* --- Контент сторінки --- */
.vz-page-content {
	margin-bottom: 48px;
	line-height: 1.7;
}
.vz-page-content p {
	margin: 0 0 16px;
	font-size: var(--pp-fs-xl, 16px);
	color: var(--pp-text);
}
.vz-page-content h2 {
	font-size: var(--pp-fs-6xl, 28px);
	font-weight: 700;
	margin: 36px 0 18px;
	color: var(--pp-text);
}
.vz-page-content ul, .vz-page-content ol {
	margin: 0 0 16px 24px;
	color: var(--pp-text);
}
.vz-page-content li {
	margin-bottom: 8px;
	line-height: 1.6;
}
.vz-page-content a {
	color: var(--pp-orange);
	text-decoration: none;
}
.vz-page-content a:hover {
	text-decoration: underline;
}
/* Informacje: блок "Про нас" — заголовок/текст по центру, список — сам блок
   центрований по сторінці, але текст усередині вирівняний вліво. */
.vz-page--information .vz-page-content {
	text-align: center;
}
.vz-page--information .vz-page-content ul {
	list-style: none;
	text-align: left;
	max-width: 560px;
	margin: 0 auto 16px;
	padding-left: 0;
}
/* Висячий відступ: перенесений рядок вирівнюється під текстом, а не під ✔️. */
.vz-page--information .vz-page-content li {
	padding-left: 28px;
	text-indent: -28px;
}

/* --- PRODUKTY: сітка категорій --- */
.vz-categories-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--pp-gap);
	margin-bottom: 56px;
}
.vz-category-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-decoration: none;
	color: var(--pp-text);
	background: var(--pp-white);
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius-lg);
	overflow: hidden;
	transition: box-shadow .15s ease, transform .15s ease;
}
.vz-category-card:hover {
	box-shadow: 0 8px 32px rgba(0,0,0,.1);
	transform: translateY(-4px);
}
.vz-category-image {
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--pp-img-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.vz-category-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.vz-category-info {
	padding: 16px 18px 18px;
}
.vz-category-info h3 {
	margin: 0;
	font-weight: 700;
	font-size: var(--pp-fs-2xl, 18px);
	color: var(--pp-text);
}
.vz-category-count {
	margin: 6px 0 0;
	color: var(--pp-text-muted);
	font-size: var(--pp-fs-md, 14px);
}

/* --- INFORMACJE: картки переваг --- */
.vz-info-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--pp-gap);
	margin-bottom: 56px;
}
.vz-info-card {
	background: var(--pp-white);
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius-lg);
	padding: 32px 28px;
	text-align: center;
}
.vz-info-card-icon {
	margin-bottom: 18px;
	display: flex;
	justify-content: center;
	color: var(--pp-orange);
}
.vz-info-card h3 {
	margin: 0 0 12px;
	font-size: var(--pp-fs-3xl, 20px);
	font-weight: 700;
	color: var(--pp-text);
}
.vz-info-card p {
	margin: 0;
	color: var(--pp-text-muted);
	line-height: 1.6;
	font-size: var(--pp-fs-lg, 15px);
}

/* --- FAQ в INFORMACJE --- */
.vz-faq-section {
	margin: 56px 0;
}
.vz-faq-section h2 {
	font-size: var(--pp-fs-6xl, 28px);
	font-weight: 700;
	margin: 0 0 32px;
	text-align: center;
	color: var(--pp-text);
}
.vz-faq-accordion {
	max-width: 860px;
	margin: 0 auto 28px;
}
.vz-faq-item {
	background: var(--pp-white);
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius);
	margin-bottom: 12px;
	overflow: hidden;
}
.vz-faq-question {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	background: none;
	border: 0;
	padding: 18px 20px;
	font-weight: 600;
	font-size: var(--pp-fs-xl, 16px);
	text-align: left;
	cursor: pointer;
	color: var(--pp-text);
	transition: background .15s ease;
}
.vz-faq-question:hover {
	background: var(--pp-bg);
	color: var(--pp-text);
}
.vz-faq-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
	border-radius: 50%;
	border: 1.5px solid var(--pp-orange);
	background: #fff;
	font-size: var(--pp-fs-2xl, 18px);
	line-height: 1;
	color: var(--pp-orange);
	transition: transform .25s ease, background .2s ease, color .2s ease;
}
.vz-faq-item.is-open .vz-faq-toggle {
	transform: rotate(45deg);
}
.vz-faq-question:hover .vz-faq-toggle,
.vz-faq-item.is-open .vz-faq-toggle {
	background: var(--pp-orange);
	color: #fff;
}
.vz-faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height .25s ease;
	padding: 0 20px;
	color: var(--pp-text-muted);
}
.vz-faq-item.is-open .vz-faq-answer {
	max-height: 500px;
	padding-bottom: 18px;
}
.vz-faq-answer p {
	font-size: var(--pp-fs-lg, 15px);
	line-height: 1.6;
	margin: 0;
}
.vz-faq-link {
	text-align: center;
	margin-top: 28px;
}
.vz-faq-link a {
	color: var(--pp-orange);
	font-weight: 600;
	text-decoration: none;
}
.vz-faq-link a:hover {
	text-decoration: underline;
}

/* --- KONTAKTY: сітка контактів --- */
.vz-contact-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--pp-gap);
	margin-bottom: 56px;
}
.vz-contact-card {
	background: var(--pp-white);
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius-lg);
	padding: 28px 26px;
}
.vz-contact-card h3 {
	margin: 0 0 16px;
	font-size: var(--pp-fs-2xl, 18px);
	font-weight: 700;
	color: var(--pp-text);
}
.vz-contact-card p {
	margin: 0 0 12px;
	font-size: var(--pp-fs-lg, 15px);
	line-height: 1.6;
	color: var(--pp-text);
}
.vz-contact-card a {
	color: var(--pp-orange);
	text-decoration: none;
	font-weight: 600;
}
.vz-contact-card a:hover {
	text-decoration: underline;
}
.vz-contact-card small {
	color: var(--pp-text-muted);
	font-size: var(--pp-fs-sm, 13px);
	display: block;
	margin-bottom: 4px;
}
.vz-contact-card h4.vz-contact-card__sub {
	margin: 18px 0 10px;
	font-size: var(--pp-fs-sm, 13px);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--pp-text-muted);
}

/* --- Мап-секція --- */
.vz-map-section {
	margin: 56px 0;
	text-align: center;
}
.vz-map-section h2 {
	font-size: var(--pp-fs-6xl, 28px);
	font-weight: 700;
	margin: 0 0 24px;
	color: var(--pp-text);
}
.vz-map-placeholder {
	background: var(--pp-white);
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius-lg);
	margin-bottom: 16px;
	overflow: hidden;
}
.vz-map-placeholder svg {
	width: 100%;
	height: auto;
}
.vz-map-placeholder iframe {
	display: block;
	width: 100%;
	height: 450px;
	border: 0;
}

/* --- Секція «Зв'яжіться з нами» (Informacje) --- */
.vz-informacje-contact {
	margin: 56px 0;
	text-align: center;
}
.vz-informacje-contact h2 {
	font-size: var(--pp-fs-6xl, 28px);
	font-weight: 700;
	margin: 0 0 12px;
	color: var(--pp-text);
}
.vz-informacje-contact > p {
	max-width: 640px;
	margin: 0 auto 32px;
	color: var(--pp-text-muted);
	font-size: var(--pp-fs-xl, 16px);
	line-height: 1.6;
}
.vz-informacje-contact .vz-contact-grid {
	text-align: left;
}

/* --- Форма контактна --- */
.vz-form-section {
	margin: 56px 0;
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.vz-form-section h2 {
	font-size: var(--pp-fs-6xl, 28px);
	font-weight: 700;
	margin: 0 0 12px;
	color: var(--pp-text);
}
.vz-form-section > p {
	color: var(--pp-text-muted);
	margin: 0 0 28px;
}
.vz-contact-form {
	background: var(--pp-white);
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius-lg);
	padding: 32px;
	text-align: left;
}
.vz-form-group {
	margin-bottom: 18px;
}
.vz-form-group label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: var(--pp-fs-md, 14px);
	color: var(--pp-text);
}
.vz-form-group input,
.vz-form-group textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--pp-border);
	border-radius: 8px;
	font-family: inherit;
	font-size: var(--pp-fs-lg, 15px);
	color: var(--pp-text);
	transition: border-color .15s ease;
}
.vz-form-group input:focus,
.vz-form-group textarea:focus {
	outline: none;
	border-color: var(--pp-orange);
	box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12);
}
.vz-form-group textarea {
	resize: vertical;
}
.vz-form-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 24px;
}
.vz-form-checkbox input {
	width: auto;
	margin: 0;
	cursor: pointer;
}
.vz-form-checkbox label {
	margin: 0;
	font-weight: 400;
	cursor: pointer;
}

/* --- Социальні іконки --- */
.vz-socials-section {
	text-align: center;
	margin-top: 56px;
	padding-top: 56px;
	border-top: 1px solid var(--pp-border);
}
.vz-socials-section h2 {
	font-size: var(--pp-fs-6xl, 28px);
	font-weight: 700;
	margin: 0 0 24px;
	color: var(--pp-text);
}
.vz-socials-icons {
	display: flex;
	gap: 18px;
	justify-content: center;
	flex-wrap: wrap;
}
.vz-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--pp-bg);
	color: var(--pp-text);
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.vz-social-icon:hover {
	background: var(--pp-orange);
	color: #fff;
}
.vz-social-icon svg {
	width: 24px;
	height: 24px;
}
.vz-social-icon--sm {
	width: 36px;
	height: 36px;
}
.vz-social-icon--sm svg {
	width: 18px;
	height: 18px;
}

/* --- Іконка телефону + месенджери в картці «Telefon» --- */
.vz-contact-phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.vz-contact-phone__icon {
	display: inline-flex;
	color: var(--pp-orange);
}
.vz-contact-card__icons {
	display: flex;
	gap: 10px;
	margin-top: 12px;
}

/* --- CTA-секція --- */
.vz-cta-section {
	text-align: center;
	background: linear-gradient(135deg, var(--pp-bg) 0%, #fff 100%);
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius-lg);
	padding: 56px 32px;
	margin: 56px 0;
}
.vz-cta-section h2 {
	font-size: var(--pp-fs-6xl, 28px);
	font-weight: 700;
	margin: 0 0 12px;
	color: var(--pp-text);
}
.vz-cta-section p {
	color: var(--pp-text-muted);
	margin: 0 0 28px;
	font-size: var(--pp-fs-xl, 16px);
}
/* --- Blok CTA „Napisz do nas" na stronie kontaktów (otwiera modal ze stopki) --- */
.vz-contact-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
	background: linear-gradient(135deg, var(--pp-orange) 0%, var(--pp-orange-hover) 100%);
	border-radius: var(--pp-radius-lg);
	padding: 40px 44px;
	margin: 40px 0 56px;
	color: #fff;
}
.vz-contact-cta__text { flex: 1 1 320px; }
.vz-contact-cta__text h2 {
	font-size: var(--pp-fs-6xl, 28px);
	font-weight: 700;
	margin: 0 0 10px;
	color: #fff;
}
.vz-contact-cta__text p {
	margin: 0;
	color: rgba(255, 255, 255, 0.9);
	font-size: var(--pp-fs-xl, 16px);
	max-width: 560px;
}
.vz-contact-cta__btn { flex: 0 0 auto; }
/* .vz-button / .vz-button--primary are compatibility aliases owned by buttons.css. */

/* --- Респонсив для сторінок --- */
@media (max-width: 900px) {
	.vz-categories-grid,
	.vz-info-cards,
	.vz-contact-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.vz-page-header h1 {
		font-size: var(--pp-fs-7xl, 32px);
	}
	.vz-page-excerpt {
		font-size: var(--pp-fs-xl, 16px);
	}
}

@media (max-width: 560px) {
	.vz-categories-grid,
	.vz-info-cards,
	.vz-contact-grid {
		grid-template-columns: 1fr;
	}
	.vz-page-header h1 {
		font-size: var(--pp-fs-5xl, 26px);
	}
	.vz-page-content h2 {
		font-size: var(--pp-fs-4xl, 22px);
	}
	.vz-contact-form {
		padding: 24px 18px;
	}
	.vz-cta-section {
		padding: 32px 18px;
	}
	.vz-contact-cta {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
		padding: 28px 22px;
	}
	.vz-contact-cta__btn {
		width: 100%;
	}
}

/* --- Одиночна стаття --- */
.vz-single__wrap { max-width: var(--pp-container); }
.vz-single__meta { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.vz-single__title { font-size: var(--pp-fs-8xl, 34px); line-height: 1.2; font-weight: 700; margin: 0 0 24px; color: var(--pp-text); }
/* The article rail belongs to .vz-container. Hero sizing is page-specific and
   lives in blog.css so changing an image can never shrink the whole article. */
.vz-single__hero { border-radius: var(--pp-radius-lg); overflow: hidden; margin-bottom: 28px; background: var(--pp-img-bg); }
.vz-single__hero img { width: 100%; height: auto; display: block; }
.vz-single__foot { margin-top: 36px; }
.vz-single__related { margin-top: 56px; border-top: 1px solid var(--pp-border); padding-top: 36px; }

/* --- Типографіка контенту --- */
.vz-prose { font-size: var(--pp-fs-xl, 16px); line-height: 1.7; color: var(--pp-text-2); }
.vz-prose p { margin: 0 0 18px; }
.vz-prose h2 { font-size: var(--pp-fs-5xl, 26px); font-weight: 700; color: var(--pp-text); margin: 36px 0 14px; }
.vz-prose h3 { font-size: var(--pp-fs-2xl, 18px); font-weight: 700; color: var(--pp-text); margin: 28px 0 10px; }
.vz-prose ul, .vz-prose ol { margin: 0 0 18px; padding-left: 22px; }
.vz-prose li { margin-bottom: 8px; }
.vz-prose a { color: var(--pp-orange); }
:where(.vz-prose) img { max-width: 100%; height: auto; border-radius: var(--pp-radius); }

@media (max-width: 560px) {
	.vz-single__title { font-size: var(--pp-fs-5xl, 26px); }
	.vz-prose { font-size: var(--pp-fs-xl, 16px); }
}

/* =========================================================================
   Футер-модалка «Напиши нам»
   ========================================================================= */
body.vz-modal-open { overflow: hidden; }

.vz-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.vz-modal[hidden] { display: none; }
.vz-modal__overlay { position: absolute; inset: 0; background: rgba(26,26,26,.55); }
.vz-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 440px;
	background: var(--pp-white);
	border-radius: var(--pp-radius-lg);
	padding: 28px;
	box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.vz-modal__close {
	position: absolute; top: 12px; right: 14px;
	background: none; border: 0; cursor: pointer;
	font-size: var(--pp-fs-6xl, 28px); line-height: 1; color: var(--pp-text-muted);
}
.vz-modal__close:hover { color: var(--pp-text); }
.vz-modal__title { margin: 0 0 18px; font-size: var(--pp-fs-3xl, 20px); color: var(--pp-text); }

/* Контейнер форми CF7 у модалці. */
.vz-write-form p { margin: 0 0 14px; }
.vz-write-form label { display: block; font-size: var(--pp-fs-sm, 13px); font-weight: 600; color: var(--pp-text-2); }
.vz-write-form input[type="text"],
.vz-write-form input[type="email"],
.vz-write-form input[type="tel"],
.vz-write-form input[type="url"],
.vz-write-form input[type="number"],
.vz-write-form select,
.vz-write-form textarea {
	width: 100%;
	box-sizing: border-box;
	margin-top: 6px;
	padding: 10px 12px;
	border: 1px solid var(--pp-border);
	border-radius: 10px;
	font-family: inherit;
	font-size: var(--pp-fs-md, 14px);
	color: var(--pp-text);
	background: #fff;
}
.vz-write-form input:focus,
.vz-write-form select:focus,
.vz-write-form textarea:focus { outline: none; border-color: var(--pp-orange); }
.vz-write-form textarea { resize: vertical; }
.vz-write-form input[type="submit"],
.vz-write-form .wpcf7-submit {
	width: 100%;
	margin-top: 4px;
}
.vz-write-form .wpcf7-spinner { margin: 8px auto 0; }
/* Повідомлення/валідація CF7. */
.vz-write-form .wpcf7-response-output { margin: 12px 0 0 !important; padding: 8px 12px; font-size: var(--pp-fs-sm, 13px); border-radius: 8px; }
.vz-write-form .wpcf7-not-valid-tip { color: #c0392b; font-size: var(--pp-fs-xs, 12px); }
.vz-write-form .wpcf7-form.sent .wpcf7-response-output { border-color: var(--pp-orange); color: var(--pp-orange-hover); }

/* Візуально прихований, але доступний для скрін-рідерів та SEO (H1 головної). */
.vz-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Інлайн-іконка з шорткода [vz_icon] (inc/icons.php): розмір успадковує текст
   (1em, перевизначається font-size на обгортці), колір — currentColor. */
.vz-icon { display: inline-flex; width: 1em; height: 1em; vertical-align: -0.125em; }
.vz-icon svg { width: 100%; height: 100%; }

/* =========================================================================
   Blog: konkretne powiązane szablony Printcart pod artykułem.
   Zwykła siatka kart — bez Swipera. Dzięki stałej liczbie kolumn pojedyncza
   karta nie rozciąga się do całych 920 px treści.
   ========================================================================= */
.pc-bt {
	margin: 48px 0 8px;
	padding-top: 32px;
	border-top: 1px solid var(--pp-border);
}
.pc-bt__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 20px;
}
.pc-bt__title {
	margin: 0;
	font-size: var(--pp-fs-5xl, 26px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--pp-dark);
}
.pc-bt__subtitle {
	margin: 5px 0 0 !important;
	font-size: var(--pp-fs-md, 14px);
	line-height: 1.4;
	color: var(--pp-text-muted);
}
.pc-bt__all {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 0;
	font-size: var(--pp-fs-md, 14px);
	font-weight: 700;
	line-height: 1;
	color: var(--pp-orange);
	text-decoration: none;
}
.pc-bt__all:hover { color: var(--pp-orange-hover); }

/* 920 px artykułu = cztery normalne karty. Nie używamy auto-fit/1fr,
   ponieważ przy 1–2 szablonach rozciągnęłoby je na całą szerokość. */
.pc-bt__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	align-items: stretch;
}
.pc-bt-card {
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--pp-border);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 5px 18px rgba(16, 36, 78, .045);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pc-bt-card:hover {
	transform: translateY(-3px);
	border-color: rgba(255, 106, 19, .26);
	box-shadow: 0 12px 26px rgba(16, 36, 78, .09);
}
.pc-bt-card__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 2;
	padding: 8px;
	background: #f4f6f9;
	overflow: hidden;
	text-decoration: none;
}
.pc-bt-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: center;
	border-radius: 7px;
}
.pc-bt-card__badge {
	position: absolute;
	left: 10px;
	bottom: 10px;
	max-width: calc(100% - 20px);
	padding: 4px 8px;
	border-radius: 999px;
	background: rgba(17, 24, 39, .82);
	color: #fff;
	font-size: var(--pp-fs-2xs, 11px);
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	backdrop-filter: blur(5px);
}
.pc-bt-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 12px 13px 13px;
}
.pc-bt-card__title {
	margin: 0;
	font-size: var(--pp-fs-lg, 15px);
	font-weight: 750;
	line-height: 1.28;
	color: var(--pp-dark);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.pc-bt-card__product {
	margin: 5px 0 0 !important;
	font-size: var(--pp-fs-sm, 13px);
	line-height: 1.35;
	color: var(--pp-text-muted);
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.pc-bt-card__action {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
	padding-top: 12px;
	font-size: var(--pp-fs-sm, 13px);
	font-weight: 800;
	line-height: 1;
	color: var(--pp-orange);
	text-decoration: none;
}
.pc-bt-card__action:hover { color: var(--pp-orange-hover); }

@media (max-width: 760px) {
	.pc-bt__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pc-bt__head { align-items: flex-start; }
}

@media (max-width: 480px) {
	.pc-bt { margin-top: 38px; padding-top: 26px; }
	.pc-bt__head { display: block; }
	.pc-bt__all { margin-top: 8px; }
	.pc-bt__grid { gap: 12px; }
	.pc-bt-card__body { padding: 10px 11px 12px; }
	.pc-bt-card__title { font-size: var(--pp-fs-md, 14px); }
}

@media (max-width: 350px) {
	.pc-bt__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.pc-bt-card { transition: none; }
	.pc-bt-card:hover { transform: none; }
}