/* =========================================================================
   Native WooCommerce product baseline
   =========================================================================
   Native gallery/tabs/order-method markup belongs to the product page now.
   Reusable PrintConstructor controls live separately in printcart.css.
   The PIUROPRINT product configurator below owns final page composition.
   ========================================================================= */

/* =========================================================================
   5. NATIVE WOO PRODUCT BASELINE
   ========================================================================= */

/* Заголовок товару */
.single-product .product .product_title {
	font-weight: 800;
	font-size: var(--pp-fs-7xl, 32px);
	line-height: 1.15;
	color: var(--pp-text);
	margin: 0 0 14px;
}

/* --- Розкладка: галерея ліворуч / картка-калькулятор праворуч ---
   Грідимо ЛИШЕ обгортку «верх товару» (vizitka_product_top_open у functions.php),
   а НЕ весь div.product. Інакше sticky-summary належить усьому div.product (разом
   із вкладками) → при скролі картка наїжджає на опис. Вкладки/related тепер —
   звичайні повноширинні блоки-сіблінги ПІСЛЯ обгортки. */
.single-product div.product {
	display: block;
}
.single-product .vz-product-top {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
	gap: 40px;
	align-items: start;
	margin-bottom: 8px;
}
.single-product .vz-product-top > *,
.single-product .summary.entry-summary > *,
.single-product .woocommerce-product-gallery {
	min-width: 0;
	max-width: 100%;
}
/* УВАГА: __wrapper НЕ затискати max-width — це стрічка flexslider, якій плагін
   ставить inline width:800% (сума слайдів). max-width:100% клампив її до ширини
   .flex-viewport → слайди переносились вертикально, а translate3d ховав активний
   (фото «зникало» при перемиканні). Кліп робить сам .flex-viewport (overflow). */

/* --- Галерея --- */
.single-product .woocommerce-product-gallery {
	background: var(--pp-img-bg);
	border-radius: var(--pp-radius-lg);
	padding: 24px;
	margin: 0;
	float: none;
	width: 100%;
}
.single-product .woocommerce-product-gallery__wrapper { margin: 0; }
.single-product .flex-control-thumbs {
	margin-top: 14px;
	display: flex;
	gap: 10px;
	padding: 0;
}
.single-product .flex-control-thumbs li {
	width: 72px;
	margin: 0;
}
.single-product .flex-control-thumbs img {
	border-radius: 8px;
	border: 2px solid transparent;
	transition: border-color .15s ease;
}
.single-product .flex-control-thumbs img.flex-active,
.single-product .flex-control-thumbs img:hover { border-color: var(--pp-orange); }

/* --- Summary = картка «Kalkulator kosztów» --- */
.single-product .summary.entry-summary {
	background: var(--pp-white);
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius-lg);
	padding: 26px 26px 28px;
	margin: 0;
	width: 100%;
	float: none;
	position: sticky;
	top: calc(var(--pp-header-h) + 16px);
	box-shadow: 0 8px 30px rgba(0,0,0,.05);
}
/* Заголовок-«шапка» картки калькулятора.
   Текст живе в розмітці (inc/single-product.php → vz_sp_render_summary_heading),
   а не в `content:` — інакше він не має власника й не перекладається. */
.single-product .summary.entry-summary .pp-sp-summary-heading {
	display: block;
	font-weight: 800;
	font-size: var(--pp-fs-2xl, 18px);
	color: var(--pp-text);
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--pp-border);
}

/* -------------------------------------------------------------------------
   PrintCart/NBO reusable appearance lives in printcart.css.
   This page stylesheet owns product-page composition only.
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   6. БЛОК «4 СПОСОБИ ЗАМОВЛЕННЯ» (Opcje przetwarzania zamówień)
   ------------------------------------------------------------------------- */
.vz-order-methods {
	margin: 0 0 36px;
}
.vz-order-methods__title {
	font-weight: 800;
	font-size: var(--pp-fs-3xl, 20px);
	color: var(--pp-text);
	margin: 0 0 18px;
}
.vz-order-methods__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
.vz-order-method {
	display: flex;
	flex-direction: column;
	background: var(--pp-white);
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius);
	padding: 22px 20px;
	transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.vz-order-method:hover {
	box-shadow: 0 8px 28px rgba(0,0,0,.08);
	border-color: var(--pp-orange);
	transform: translateY(-2px);
}
.vz-order-method__icon {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: rgba(249,115,22,.10);
	color: var(--pp-orange);
	margin-bottom: 14px;
}
.vz-order-method__icon svg { width: 24px; height: 24px; }
.vz-order-method__name {
	font-weight: 700;
	font-size: var(--pp-fs-xl, 16px);
	color: var(--pp-text);
	margin: 0 0 6px;
}
.vz-order-method__desc {
	font-size: var(--pp-fs-sm, 13px);
	line-height: 1.5;
	color: var(--pp-text-muted);
	margin: 0 0 18px;
	flex: 1 1 auto;
}
.vz-order-method__fee {
	color: var(--pp-text-2);
	font-weight: 600;
}
.vz-order-method .vz-btn { width: 100%; }

/* -------------------------------------------------------------------------
   7. ВКЛАДКИ (Charakterystyka / Opis / …)
   ------------------------------------------------------------------------- */
.woocommerce-tabs.wc-tabs-wrapper {
	margin-top: 48px;
}
/* Таб-бар = underline-таби: активний = синє підкреслення на спільній базовій лінії. */
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs,
.woocommerce-tabs ul.tabs.wc-tabs {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
	border: 0;
	border-bottom: 1px solid var(--pp-border);
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
}
.woocommerce-tabs ul.tabs.wc-tabs::before,
.woocommerce-tabs ul.tabs.wc-tabs::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
}
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 13px 20px;
	font-weight: 700;
	font-size: var(--pp-fs-md, 14px);
	line-height: 1.2;
	color: var(--pp-text-2);
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	margin-bottom: -1px;
	transition: color .15s ease, border-color .15s ease;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
.woocommerce-tabs ul.tabs li a:hover { color: var(--pp-text); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li.active a {
	color: var(--pp-orange);
	background: transparent;
	border-bottom-color: var(--pp-orange);
	box-shadow: none;
}
/* Перший таб — текст на лінію контейнера (в один край із заголовком секції, галереєю, рамкою картки). */
.woocommerce div.product .woocommerce-tabs ul.tabs li:first-child a,
.woocommerce-tabs ul.tabs li:first-child a { padding-left: 0; }

/* Панель вкладки = біла картка з рамкою.
   Специфічність .woocommerce div.product … — щоб паддінг не збивали Astra/WC (.entry-content padding:0). */
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel,
.woocommerce div.product .woocommerce-tabs .panel.wc-tab,
.woocommerce div.product .woocommerce-tabs .wc-tab,
.woocommerce-tabs .woocommerce-Tabs-panel,
.woocommerce-tabs .panel.wc-tab,
.woocommerce-tabs .wc-tab {
	background: var(--pp-white, #fff);
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius);
	padding: 28px 32px;
	margin: 0;
	font-size: var(--pp-fs-lg, 15px);
	line-height: 1.7;
	color: var(--pp-text-2);
}
.woocommerce-tabs .wc-tab > h2:first-child { margin-top: 0; }
.woocommerce-tabs .wc-tab h2 {
	font-size: var(--pp-fs-3xl, 20px);
	font-weight: 700;
	color: var(--pp-text);
	margin: 0 0 14px;
}
.woocommerce-tabs .wc-tab h3 {
	font-size: var(--pp-fs-xl, 16px);
	font-weight: 700;
	color: var(--pp-text);
	margin: 22px 0 10px;
}
.woocommerce-tabs .wc-tab ul { margin: 0 0 14px; padding-left: 20px; }
.woocommerce-tabs .wc-tab li { list-style: disc; margin: 0 0 6px; }
.woocommerce-tabs .wc-tab small { color: var(--pp-text-muted); }

/* Charakterystyka is owned by the final `.pp-sp-info-section .shop_attributes`
   contract below. Keeping only one implementation prevents cascade-dependent
   dotted leaders when Woo/plugin styles change order. */

/* Прайс-таблиця (вкладка Cena) — той самий смугастий безрамковий стиль, що й Charakterystyka. */
.woocommerce-tabs .wc-tab table:not(.shop_attributes) {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 14px;
	font-size: var(--pp-fs-md, 14px);
}
.woocommerce-tabs .wc-tab table:not(.shop_attributes) th,
.woocommerce-tabs .wc-tab table:not(.shop_attributes) td {
	padding: 12px 16px;
	text-align: left;
	border: 0;
}
.woocommerce-tabs .wc-tab table:not(.shop_attributes) thead th {
	background: var(--pp-bg);
	font-weight: 700;
	color: var(--pp-text);
}
.woocommerce-tabs .wc-tab table:not(.shop_attributes) tbody tr:nth-child(odd) td {
	background: var(--pp-bg);
}
.woocommerce-tabs .wc-tab table:not(.shop_attributes) td { color: var(--pp-text-2); }

/* Вкладка Opinie: порожній стан — простий текст (без notice-рамки), охайні заголовок і форма. */
.woocommerce-tabs .woocommerce-noreviews {
	border: 0;
	padding: 0;
	margin: 0 0 20px;
	background: transparent;
	color: var(--pp-text-muted);
}
.woocommerce-tabs .woocommerce-noreviews::before { display: none; }
.woocommerce-tabs .woocommerce-Reviews-title {
	font-size: var(--pp-fs-3xl, 20px);
	font-weight: 700;
	color: var(--pp-text);
	margin: 0 0 16px;
}
.woocommerce-tabs #review_form_wrapper .comment-reply-title {
	font-size: var(--pp-fs-xl, 16px);
	font-weight: 700;
	color: var(--pp-text);
}

/* FAQ-акордеон (вкладка FAQ; контент = <details>/<summary>). */
.vz-tab-meta details {
	border: 1px solid var(--pp-border);
	border-radius: 10px;
	margin: 0 0 10px;
	background: var(--pp-white, #fff);
	overflow: hidden;
}
.vz-tab-meta details > summary {
	list-style: none;
	cursor: pointer;
	padding: 15px 18px;
	font-weight: 700;
	font-size: var(--pp-fs-lg, 15px);
	color: var(--pp-text);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}
.vz-tab-meta details > summary::-webkit-details-marker { display: none; }
.vz-tab-meta details > summary::after {
	content: "";
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--pp-text-muted);
	border-bottom: 2px solid var(--pp-text-muted);
	transform: rotate(45deg);
	transition: transform .2s ease;
	flex: none;
	margin-top: -3px;
}
.vz-tab-meta details[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.vz-tab-meta details > summary:hover { color: var(--pp-orange); }
.vz-tab-meta details > *:not(summary) {
	padding: 0 18px 16px;
	margin: 0;
	color: var(--pp-text-2);
	line-height: 1.65;
}

/* =========================================================================

@media (max-width: 1024px) {
	.single-product .vz-product-top { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.single-product .vz-product-top > *,
	.single-product .woocommerce-product-gallery,
	.single-product .summary.entry-summary { min-width: 0; max-width: 100%; }
	.single-product .woocommerce-product-gallery__image,
	.single-product .woocommerce-product-gallery__image img { max-width: 100%; }
	.single-product .woocommerce-product-gallery__wrapper { max-width: none; }
	.single-product .woocommerce-product-gallery__image .zoomImg { width: 100%; height: auto; }
	.single-product .summary.entry-summary { position: static; }
	.vz-order-methods__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.vz-order-methods__grid { grid-template-columns: 1fr; }
	.single-product .product .product_title { font-size: var(--pp-fs-5xl, 26px); }
	.woocommerce-tabs ul.tabs.wc-tabs { gap: 0; }
	.woocommerce-tabs ul.tabs li a { padding: 12px 14px; font-size: var(--pp-fs-md, 14px); }
}


/* PIUROPRINT product page — presentation over native WooCommerce + PrintCart. */
.pp-single-product {
	--sp-ink: #101828;
	--sp-muted: #667085;
	--sp-line: #e4e7ec;
	--sp-soft: #f5f7fa;
	--sp-orange: var(--pp-orange, #F97316);
	--sp-orange-dark: #e95500;
	--sp-orange-soft: #fff5eb;
	background: #f5f6f8;
}

/* The child header does not output Astra's .site-content > .ast-container.
   WooCommerce's Astra PHP wrapper starts directly at #primary, so the real
   centered shell is .ast-woocommerce-container. */
.pp-single-product #primary,
.pp-single-product .site-main {
	width: 100%;
	max-width: none;
	min-width: 0;
	margin: 0;
	padding: 0;
}
.pp-single-product .ast-woocommerce-container {
	width: calc(100% - var(--pp-shell-inset));
	max-width: var(--pp-container);
	min-width: 0;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
}

.pp-single-product #secondary { display: none; }

.pp-sp-page {
	color: var(--sp-ink);
	font-family: var(--pp-font);
	padding-top: 20px;
	padding-bottom: 52px;
}

.pp-sp-page *,
.pp-sp-page *::before,
.pp-sp-page *::after { box-sizing: border-box; }

.pp-sp-page svg { width: 22px; height: 22px; }

.pp-sp-eyebrow {
	display: block;
	margin-bottom: 7px;
	color: var(--sp-orange);
	font-size: var(--pp-fs-2xs, 11px);
	font-weight: 800;
	letter-spacing: .14em;
	line-height: 1.2;
	text-transform: uppercase;
}

.pp-sp-methods {
	border: 1px solid var(--sp-line);
	border-top: 4px solid var(--sp-orange);
	background: #fff;
	box-shadow: 0 12px 36px rgba(16, 24, 40, .06);
}

.pp-sp-section-heading {
	display: grid;
	gap: 28px;
}

.pp-sp-section-heading h2 {
	margin: 0;
	line-height: 1.08;
	letter-spacing: -.035em;
}

.pp-sp-section-heading p {
	margin: 0;
	color: var(--sp-muted);
	line-height: 1.65;
}

/* Опис вибору проєкту тепер WYSIWYG — між абзацами повертаємо повітря. */
.pp-sp-section-heading__intro p + p,
.pp-sp-cta p + p { margin-top: 0.5em; }

.pp-sp-methods__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pp-sp-method {
	position: relative;
	min-width: 0;
	flex-direction: column;
	border: 1px solid var(--sp-line);
	background: #fff;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.pp-sp-method:hover {
	transform: translateY(-2px);
	border-color: #ffc69f;
	box-shadow: 0 13px 30px rgba(16, 24, 40, .08);
}

.pp-sp-method.is-active {
	border-color: var(--sp-orange);
	background: linear-gradient(145deg, #fff 0%, var(--sp-orange-soft) 100%);
	box-shadow: 0 0 0 1px var(--sp-orange), 0 14px 30px rgba(255, 107, 18, .12);
}

.pp-sp-method__check {
	position: absolute;
	display: grid;
	place-items: center;
	border: 1px solid var(--sp-line);
	border-radius: 50%;
	background: #fff;
	color: transparent;
}
.pp-sp-method.is-active .pp-sp-method__check { border-color: var(--sp-orange); background: var(--sp-orange); color: #fff; }

.pp-sp-method__icon {
	display: grid;
	margin-bottom: 18px;
	place-items: center;
	color: var(--sp-orange);
}

.pp-sp-method h3 {
	line-height: 1.3;
}

.pp-sp-method > p {
	color: var(--sp-muted);
}

.pp-sp-method__footer {
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
}

.pp-sp-method__price { font-weight: 800; }
.pp-sp-method__price .woocommerce-Price-amount { white-space: nowrap; }

.pp-sp-method__button { margin-left: auto; }

/* Product hero: native gallery and live NBO configurator. */
.pp-sp-page div.product { margin: 0; }

.pp-sp-page .vz-product-top {
	display: grid;
	align-items: start;
	margin-bottom: 24px;
}

.pp-sp-page .woocommerce-product-gallery {
	width: 100%;
	margin: 0;
	border: 1px solid var(--sp-line);
	background: #fff;
	box-shadow: 0 12px 36px rgba(16, 24, 40, .05);
}

/* __wrapper — це рухома стрічка flexslider (inline width:800% + translate3d).
   Не клипаємо (overflow) і не даємо фон/max-width — інакше стрічка не розтягнеться
   і активний слайд ховається. Кліп та фон бере стабільний .flex-viewport нижче. */

.pp-sp-page .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, 72px);
	gap: 8px;
	margin-top: 12px;
	list-style: none;
	padding-left: 0;
}

.pp-sp-page .flex-control-thumbs li {
	width: 100% !important;
	margin: 0 !important;
}
.pp-sp-page .flex-control-thumbs img {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1;
	object-fit: contain;
	border: 2px solid var(--sp-line);
	border-radius: 9px;
}
.pp-sp-page .flex-control-thumbs img.flex-active { border-color: var(--sp-orange); box-shadow: 0 0 0 1px var(--sp-orange); }

.pp-sp-page .summary.entry-summary {
	position: relative;
	top: auto;
	width: 100%;
	margin: 0;
	border-top: 4px solid var(--sp-orange);
}

.pp-sp-page .summary .product_title {
	margin: 0 0 8px;
	color: var(--sp-ink);
	font-size: clamp(30px, 3vw, 46px);
	line-height: 1.02;
	letter-spacing: -.045em;
}

.pp-sp-page .summary .woocommerce-product-details__short-description {
	margin-bottom: 18px;
	color: var(--sp-muted);
	font-size: var(--pp-fs-md, 14px);
	line-height: 1.65;
}

.pp-sp-page .summary > .price {
	display: inline-flex;
	align-items: baseline;
	margin: 0 0 18px;
	color: var(--sp-orange);
	font-size: var(--pp-fs-6xl, 28px);
	font-weight: 850;
}

.pp-sp-page .summary .product_meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin-top: 18px;
	padding-top: 16px;
	color: var(--sp-muted);
}

.pp-sp-page .summary .product_meta a { color: var(--sp-ink); }

/* PrintCart placement inside the product configurator. Reusable control
   appearance belongs to printcart.css; only field placement lives here. */
.pp-sp-page .nbo-wrapper,
.pp-sp-page .nbd-option-wrapper { margin: 0; }

.pp-sp-page .nbd-option-field.pp-sp-native-artwork-field {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.pp-sp-page form.cart { margin-top: 16px; }
.pp-sp-page form.cart .quantity { width: 92px; margin-right: 8px !important; }
.pp-sp-page form.cart .qty { min-height: 52px; border-radius: 10px; }
/* Product purchase/designer action appearance is owned by buttons.css. */

/* Confidence strip. */
.pp-sp-badges {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	margin: 0 0 24px;
	overflow: hidden;
	border: 1px solid var(--sp-line);
	border-radius: 16px;
	background: var(--sp-line);
}

.pp-sp-badge {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 12px;
	padding: 17px;
	background: #fff;
}

.pp-sp-badge > span { display: grid; flex: 0 0 39px; height: 39px; place-items: center; background: var(--sp-orange-soft); color: var(--sp-orange); }
.pp-sp-badge > span svg { width: 19px; height: 19px; }
/* Іконка з пікера (Lucide) приходить зі stroke-width:2 — рівняємо під набір теми. */
.pp-sp-badge > span svg[stroke-width] { stroke-width: 1.8; }
.pp-sp-badge strong,
.pp-sp-badge small { display: block; }
.pp-sp-badge strong { margin-bottom: 2px; line-height: 1.3; }
.pp-sp-badge small { color: var(--sp-muted); line-height: 1.45; }

/* Full sections instead of a compressed Woo tab panel. */
.pp-sp-content-nav {
	position: sticky;
	top: 72px;
	z-index: 20;
	margin: 0 0 14px;
	padding: 7px;
	border: 1px solid var(--sp-line);
	border-radius: 13px;
	background: rgba(255,255,255,.98);
	box-shadow: 0 8px 24px rgba(16,24,40,.06);
	/* Раніше тут був backdrop-filter: blur(12px). Липкий елемент з blur змушував
	   композитор перераховувати розмиття всієї зони під навігацією на КОЖЕН кадр
	   скролу → ривок/залипання, коли під навігацією проходять секції-вкладки.
	   Фон і так майже непрозорий, тож blur прибрано без візуальної втрати. */
}

.pp-sp-content-nav__inner { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.pp-sp-content-nav__inner::-webkit-scrollbar { display: none; }
.pp-sp-content-nav a {
	flex: 0 0 auto;
	padding: 10px 13px;
	border-radius: 8px;
	color: #475467;
	font-weight: 750;
	text-decoration: none;
}
.pp-sp-content-nav a:hover,
.pp-sp-content-nav a.is-active { background: var(--sp-orange); color: #fff; }

.pp-sp-sections { display: grid; gap: 14px; }

.pp-sp-info-section {
	scroll-margin-top: 145px;
	padding: clamp(22px, 3vw, 38px);
	border: 1px solid var(--sp-line);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 8px 28px rgba(16,24,40,.045);
}

.pp-sp-info-section__header { margin-bottom: 20px; padding-bottom: 17px; border-bottom: 1px solid var(--sp-line); }
.pp-sp-info-section__header h2 { margin: 0; color: var(--sp-ink); line-height: 1.1; letter-spacing: -.03em; }
.pp-sp-info-section__body { color: #475467; }
.pp-sp-info-section__body > :first-child { margin-top: 0; }
.pp-sp-info-section__body > :last-child { margin-bottom: 0; }
.pp-sp-info-section__body h2,
.pp-sp-info-section__body h3,
.pp-sp-info-section__body h4 { color: var(--sp-ink); }
.pp-sp-info-section__body img { border-radius: 12px; }

.pp-sp-info-section table { width: 100%; border-collapse: collapse; }
.pp-sp-info-section th,
.pp-sp-info-section td { padding: 12px 14px; border: 1px solid var(--sp-line); text-align: left; }
.pp-sp-info-section th { width: 32%; background: var(--sp-soft); color: var(--sp-ink); }

/* «Charakterystyka» (additional_information) — стиль dot-leaders замість таблиці:
   назва · · · · · · · значення. */
.pp-sp-info-section .shop_attributes,
.pp-sp-info-section .shop_attributes tbody {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
}
.pp-sp-info-section .shop_attributes tr {
	display: flex;
	align-items: baseline;
	gap: 0;
	width: 100%;
	padding: 10px 2px;
	border: 0;
	border-bottom: 1px solid #eef1f5;
	background: transparent;
}
.pp-sp-info-section .shop_attributes tr:last-child { border-bottom: 0; }
/* WooCommerce striped cells are reset here; the section owns this table. */
.pp-sp-info-section .shop_attributes tr th,
.pp-sp-info-section .shop_attributes tr td { background: transparent; border: 0; }
.pp-sp-info-section .shop_attributes th {
	display: flex;
	min-width: 0;
	flex: 1 1 auto;
	align-items: baseline;
	padding: 0;
	background: none;
	color: var(--sp-muted);
	font-weight: 650;
	text-align: left;
}
/* One subtle dot-leader contract. A radial pattern stays light and even; unlike
   `border-bottom:2px dotted` it does not turn into a heavy black rule. */
.pp-sp-info-section .shop_attributes th::after {
	content: "";
	flex: 1 1 32px;
	height: 2px;
	min-width: 24px;
	margin: 0 12px 3px;
	background-image: radial-gradient(circle, #cbd5e1 1px, transparent 1.2px);
	background-repeat: repeat-x;
	background-position: left center;
	background-size: 6px 2px;
}
.pp-sp-info-section .shop_attributes td {
	flex: 0 1 auto;
	max-width: 58%;
	padding: 0;
	color: var(--sp-ink);
	font-weight: 700;
	text-align: right;
	overflow-wrap: anywhere;
}
.pp-sp-info-section .shop_attributes td p { margin: 0; color: inherit; }
@media (max-width: 560px) {
	.pp-sp-info-section .shop_attributes tr { display: grid; grid-template-columns: 1fr; gap: 3px; }
	.pp-sp-info-section .shop_attributes th::after { display: none; }
	.pp-sp-info-section .shop_attributes td { max-width: none; text-align: left; }
}

.pp-sp-info-section .woocommerce-Tabs-panel { display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.pp-sp-info-section .woocommerce-Tabs-panel > h2:first-child { display: none; }

.pp-sp-info-section--reviews #reviews { grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); gap: 28px; }
.pp-sp-info-section--reviews #review_form_wrapper { border-radius: 13px; }
.pp-sp-info-section--reviews textarea,
.pp-sp-info-section--reviews input { border-radius: 9px; }

.pp-sp-info-section details,
.pp-sp-info-section .vz-faq__item { margin-bottom: 8px; padding: 0 15px; border: 1px solid var(--sp-line); border-radius: 10px; background: #fff; }

.pp-sp-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	margin-top: 18px;
	padding: clamp(25px, 3.5vw, 44px);
	border-radius: 18px;
	background: linear-gradient(130deg, #101828 0%, #1c2638 72%, #4c250d 100%);
	color: #fff;
	overflow: hidden;
}

.pp-sp-cta h2 { margin: 0 0 7px; color: #fff; font-size: clamp(25px, 2.5vw, 38px); line-height: 1.08; letter-spacing: -.035em; }
.pp-sp-cta p { margin: 0; color: #cbd5e1; font-size: var(--pp-fs-sm, 13px); }
.pp-sp-cta__button { flex: 0 0 auto; gap: 18px; }

.pp-sp-mobile-order { display: none; }

.pp-sp-page .related.products { margin-top: 24px; padding: clamp(22px, 3vw, 34px); border: 1px solid var(--sp-line); border-radius: 18px; background: #fff; }
.pp-sp-page .related.products > h2 { margin: 0 0 20px; font-size: clamp(23px, 2vw, 31px); }
.pp-sp-related__swiper { overflow: hidden; padding: 2px; margin: -2px; }
.pp-sp-related__swiper .products.swiper-wrapper { display: flex; gap: 0; }
.pp-sp-related__track { display: flex; }
.pp-sp-related__card { height: auto; }
.pp-sp-related__swiper .products > li.product.swiper-slide {
	display: flex;
	width: calc((100% - 72px) / 4);
	height: auto;
	padding-bottom: 0;
}
.pp-sp-related__swiper .products > li.product.swiper-slide > * { width: 100%; }
.pp-sp-related__swiper .swiper-button-prev,
.pp-sp-related__swiper .swiper-button-next {
	width: 38px;
	height: 38px;
	border: 1px solid var(--sp-line);
	border-radius: 50%;
	background: #fff;
	color: var(--sp-ink);
	box-shadow: 0 4px 12px rgba(16, 24, 40, .12);
}
.pp-sp-related__swiper .swiper-button-prev::after,
.pp-sp-related__swiper .swiper-button-next::after { font-size: 15px; font-weight: 800; }
.pp-sp-related__swiper .swiper-button-disabled { opacity: 0; pointer-events: none; }

@media (max-width: 1180px) {
	.pp-sp-method { min-height: 215px; }
	.pp-sp-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 920px) {
	.pp-sp-section-heading { grid-template-columns: 1fr; gap: 9px; }
	.pp-sp-info-section--reviews #reviews { grid-template-columns: 1fr; }
}

@media (max-width: 1099px) {
	.pp-sp-related__swiper .products > li.product.swiper-slide { width: calc((100% - 36px) / 3); }
}

@media (max-width: 767px) {
	.pp-sp-related__swiper .products > li.product.swiper-slide { width: calc((100% - 14px) / 2); }
}

@media (max-width: 680px) {
	/* Keep normal section breathing room. The fixed order bar now hides before
	   the end of the product page, so a 92px fake spacer is no longer needed. */
	.pp-sp-page { padding-bottom: 24px; }
	.pp-sp-methods { margin-top: 10px; border-radius: 15px; }
	.pp-sp-section-heading h2 { font-size: var(--pp-fs-5xl, 26px); }
	.pp-sp-methods__grid { overflow-x: auto; scrollbar-width: none; }
	.pp-sp-methods__grid::-webkit-scrollbar { display: none; }
	.pp-sp-method { flex: 0 0 min(82vw, 292px); }
	.pp-sp-page .woocommerce-product-gallery,
	.pp-sp-page .summary.entry-summary { padding: 0 !important; border-radius: 15px; }
	.pp-sp-page .summary .product_title { font-size: var(--pp-fs-7xl, 32px); }
	.pp-sp-badges { overflow-x: auto; border-radius: 12px; scrollbar-width: none; }
	.pp-sp-content-nav { margin-inline: -1px; }
	.pp-sp-info-section { padding: 20px 15px; border-radius: 14px; }
	.pp-sp-info-section table { display: block; overflow-x: auto; }
	.pp-sp-cta { display: block; padding: 24px 18px; }
	.pp-sp-cta__button { width: 100%; justify-content: space-between; margin-top: 18px; }
	.pp-sp-mobile-order {
		position: fixed;
		z-index: 999;
		left: 8px;
		right: 8px;
		bottom: max(8px, env(safe-area-inset-bottom));
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 9px 9px 9px 15px;
		border: 1px solid rgba(255,255,255,.1);
		border-radius: 14px;
		background: rgba(16,24,40,.96);
		box-shadow: 0 15px 40px rgba(16,24,40,.3);
		color: #fff;
		transition: opacity .18s ease, transform .18s ease;
		/* blur(14px) прибрано — фіксована панель поверх контенту так само давала
		   ривок скролу на мобільному; фон .96 непрозорий, blur був зайвий. */
	}
	.pp-sp-mobile-order.is-near-page-end {
		opacity: 0;
		transform: translateY(calc(100% + 24px));
		pointer-events: none;
	}
	.pp-sp-mobile-order small,
	.pp-sp-mobile-order strong { display: block; }
	.pp-sp-mobile-order small { margin-bottom: 1px; color: #98a2b3; font-size: var(--pp-fs-3xs, 10px); text-transform: uppercase; }
	.pp-sp-mobile-order strong { font-size: var(--pp-fs-md, 14px); }
	.pp-sp-mobile-order button { flex: 0 0 auto; }
	.pp-sp-mobile-order button svg { width: 16px; height: 16px; }
	.pp-sp-related__swiper .swiper-button-prev,
	.pp-sp-related__swiper .swiper-button-next { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.pp-sp-page *,
	.pp-sp-page *::before,
	.pp-sp-page *::after { scroll-behavior: auto; transition: none; }
}

/* ========================================================================
   CONFIGURATOR COMPOSITION — live PrintConstructor nodes in the PIUROPRINT layout
   ======================================================================== */

/* Нотіси стоять першими в .pp-sp-page (woocommerce_before_single_product:10),
   одразу під хедером — без власного відступу вони до нього приклеюються. */
.pp-single-product .pp-sp-page > .woocommerce-notices-wrapper {
	margin: 20px 0 0;
	max-width: 1320px;
}
.pp-single-product .pp-sp-page > .woocommerce-notices-wrapper:empty { margin: 0; }
.pp-single-product .pp-sp-page > .woocommerce-notices-wrapper > :last-child { margin-bottom: 0; }

.pp-sp-breadcrumb { width: 100%; margin: 13px 0 10px; }

/* Compact project-path chooser. */
.pp-sp-methods {
	margin: 0 0 16px;
	padding: 20px 22px;
	border-top-width: 1px;
	border-radius: 16px;
}

.pp-sp-section-heading {
	grid-template-columns: minmax(0, 1fr) minmax(330px, .75fr);
	align-items: center;
	margin-bottom: 15px;
}
.pp-sp-section-heading p { text-align: right; }

.pp-sp-methods__grid { gap: 9px; }

.pp-sp-method {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr);
	grid-template-rows: auto auto 1fr;
	gap: 3px 10px;
	border-radius: 11px;
	cursor: pointer;
}

.pp-sp-method__icon {
	grid-row: 1 / 4;
	width: 42px;
	height: 42px;
	margin: 0;
	border: 1px solid #fed7aa;
	background: #fff;
}

.pp-sp-method__icon svg { width: 19px; height: 19px; }
.pp-sp-method h3 { grid-column: 2; margin: 1px 23px 0 0; }
.pp-sp-method > p { grid-column: 2; margin: 1px 0 3px; line-height: 1.4; }

.pp-sp-method__footer {
	grid-column: 2;
	display: flex;
	align-self: end;
	margin: 2px 0 0;
}

.pp-sp-method__price { color: var(--sp-orange-dark); }
.pp-sp-method__check { top: 10px; right: 10px; width: 20px; height: 20px; }
.pp-sp-method__check svg { width: 11px; height: 11px; }

/* Gallery gets the larger sticky preview-card role from the prototype. */
.pp-sp-page .vz-product-top {
	grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
	gap: 18px;
}

.pp-sp-page .woocommerce-product-gallery {
	--pp-gallery-h: clamp(390px, calc(100vh - 230px), 560px);
	--pp-gallery-h: clamp(390px, calc(100dvh - 230px), 560px);
	position: sticky !important;
	top: 86px;
	align-self: start;
	padding: 20px;
	border-radius: 16px;
}

/* Галерея працює РІДНИМ flexslider (animation:'slide' WooCommerce). Плагін сам
   будує стрічку (width:800%), рухає її translate3d і показує активний слайд у
   .flex-viewport. Тема НЕ підміняє display слайдів і не б'ється з рухом стрічки —
   лише задає стабільну висоту вікна перегляду й вписує фото. Раніше фото зникало
   при перемиканні, бо обмеження wrapper до max-width:100% ламає flexslider →
   слайди переносило вниз, а translate виносив активний за viewport. */
.pp-sp-page .flex-viewport {
	height: var(--pp-gallery-h);
	border-radius: 12px;
	overflow: hidden;
	background: radial-gradient(circle at 50% 45%, #fff 0, #f3f5f8 62%, #e8ecf2 100%);
}

/* Кожен слайд — рівно вікно перегляду заввишки (ширину задає сам flexslider). */
.pp-sp-page .woocommerce-product-gallery__image,
.pp-sp-page .woocommerce-product-gallery__image--placeholder {
	height: var(--pp-gallery-h);
}

.pp-sp-page .woocommerce-product-gallery__image img,
.pp-sp-page .woocommerce-product-gallery__image--placeholder img {
	box-sizing: border-box;
	width: 100% !important;
	height: var(--pp-gallery-h) !important;
	max-height: var(--pp-gallery-h) !important;
	max-width: 100% !important;
	padding: 10px;
	object-fit: contain;
	transition: transform .25s ease, border-radius .25s ease;
}

/* The gallery note and enhanced class are server-rendered before first paint.
   Flexslider may still reorder its own viewport/thumb nodes during initialization,
   so visual order is explicit and never depends on mutation timing. */
.pp-sp-page .woocommerce-product-gallery.pp-sp-gallery-enhanced {
	display: flex;
	flex-direction: column;
}

.pp-sp-page .pp-sp-gallery-enhanced .flex-viewport { order: 1; }
.pp-sp-page .pp-sp-gallery-enhanced .flex-control-thumbs { order: 2; }
.pp-sp-page .pp-sp-gallery-enhanced .pp-sp-gallery-note { order: 3; }

.pp-sp-gallery-note {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	border-radius: 10px;
	background: #f7f9fc;
}

.pp-sp-gallery-note > span { display: grid; flex: 0 0 32px; height: 32px; place-items: center; background: var(--sp-orange-soft); color: var(--sp-orange); }
.pp-sp-gallery-note svg { width: 17px; height: 17px; }
.pp-sp-gallery-note strong,
.pp-sp-gallery-note small { display: block; }
.pp-sp-gallery-note strong { color: var(--sp-ink); }
.pp-sp-gallery-note small { color: var(--sp-muted); line-height: 1.4; }


.pp-sp-gallery-note small { font-size: var(--sp-text-xs); }
.pp-sp-gallery-note strong { font-size: var(--sp-text-sm); }
.pp-sp-gallery-note > span { border-radius: 50%; }
.pp-sp-gallery-note { padding: 13px 15px; }

/* The right column is now a stack of logical cards, not one huge calculator. */
.pp-sp-page .summary.entry-summary {
	display: grid;
	gap: 12px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.pp-sp-page .summary.entry-summary::before { display: none; content: none; }

.pp-sp-product-head {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	padding: 20px 22px;
	border: 1px solid var(--sp-line);
	border-top: 4px solid var(--sp-orange);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 8px 25px rgba(15, 23, 42, .04);
}

.pp-sp-product-head .single-product-category {
	color: var(--sp-orange);
	font-weight: 850;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.pp-sp-page .pp-sp-product-head .product_title {
	grid-column: 1;
	margin: 0 0 8px;
	font-size: var(--pp-fs-8xl, 34px);
	min-width: 0;
	overflow-wrap: anywhere;
}

.pp-sp-page .pp-sp-product-head > .price {
	grid-column: 2;
	justify-self: end;
	align-self: center;
	min-width: 170px;
	margin: 0;
	padding: 12px 16px;
	border-radius: 10px;
	background: var(--sp-orange-soft);
	font-size: var(--pp-fs-3xl, 20px);
	text-align: right;
}

/* Ціна — головна цифра сторінки, тому тут вона більша за каталожну (16px).
   Розмір задається лише в цьому контексті; картки каталогу лишаються дрібними.
   Значення живі: JS дзеркалить unit_price/_qty з NBO (див. single-product.js). */
.pp-sp-page .pp-sp-product-head > .price .pc-default-price { align-items: flex-end; gap: 3px; }

/* Single-product owns the hero price typography. Listing/card price rules are
   scoped to .pp-product-card and therefore cannot shrink this component. */
body.pp-single-product div.product .pp-sp-product-head > p.price .pc-default-price .pc-default-price-main {
	font-size: var(--pp-fs-5xl, 26px);
	font-weight: 800;
	line-height: 1.1;
	color: var(--pp-dark);
}

body.pp-single-product div.product .pp-sp-product-head > p.price .pc-default-price .pc-default-unit {
	font-size: var(--pp-fs-lg, 15px);
	font-weight: 600;
	color: var(--sp-muted);
}

.pp-sp-page .pp-sp-product-head > .price .pc-default-price-run {
	font-size: var(--pp-fs-sm, 13px);
	font-weight: 600;
	color: var(--sp-muted);
}

/* Ледь помітний спалах на перерахунку: показує, що число щойно змінилось. */
.pp-sp-page .pp-sp-product-head > .price.is-recalculated { animation: pp-sp-price-pulse .45s ease-out; }

@keyframes pp-sp-price-pulse {
	0% { transform: scale(1); }
	40% { transform: scale(1.035); }
	100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.pp-sp-page .pp-sp-product-head > .price.is-recalculated { animation: none; }
}

.pp-sp-product-head .woocommerce-product-details__short-description {
	grid-column: 1 / -1;
	margin: 0 !important;
	color: var(--sp-muted);
	font-size: var(--pp-fs-2xs, 11px) !important;
	line-height: 1.55 !important;
}

.pp-sp-page form.cart.pp-sp-native-cart { display: block; margin: 0; }
/* Never paint PrintCart's raw option layout. It becomes visible only after the
   product script has placed the fields into the page's configuration cards. */
.pp-sp-page .summary form.cart .nbo-fields-wrapper { display: none; }
.pp-sp-page form.cart.pp-sp-native-cart:not(.pp-sp-cart--pending) .nbo-fields-wrapper { display: block; }
.pp-sp-page form.cart.pp-sp-cart--design-only {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	gap: 12px;
	align-items: stretch;
}
.pp-sp-page form.cart.pp-sp-cart--design-only .pp-sp-native-design-actions { grid-column: 1 / -1; }
.pp-sp-page form.cart.pp-sp-cart--design-only > .quantity {
	grid-column: 1;
	width: auto;
	margin: 0 !important;
}
.pp-sp-page form.cart.pp-sp-cart--design-only > .single_add_to_cart_button {
	grid-column: 2;
	float: none !important;
	width: 100%;
	margin: 0 !important;
}
.pp-sp-page form.cart.pp-sp-cart--design-only > .pp-sp-order-actions {
	grid-column: 1 / -1;
	width: 100%;
	margin-top: 0;
}
.pp-sp-page .nbo-wrapper { display: block; }
.pp-sp-page .nbd-option-wrapper > [ng-controller] { display: grid; gap: 12px; }
.pp-sp-page .nbo-fields-wrapper { display: block; padding: 0; }
.pp-sp-config-stack { display: grid; gap: 12px; }

.pp-sp-config-card {
	overflow: hidden;
	border: 1px solid var(--sp-line);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 8px 25px rgba(15, 23, 42, .04);
}
/* Advanced-dropdown (nbo-ad) — список опцій це absolute-елемент, який має
   вилазити за межі картки. При overflow:hidden він клипався і значення
   «ховалось за блоком нижче». Дозволяємо overflow лише таким карткам. */
.pp-sp-config-card:has(.nbd-field-ad-dropdown-wrap) { overflow: visible; }
.pp-sp-config-card .nbo-ad-pseudo-list { z-index: 120; }

.pp-sp-config-card__head {
	display: grid;
	grid-template-columns: 31px 31px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	padding: 15px 21px;
	border-bottom: 1px solid var(--sp-line);
}

.pp-sp-config-card__number,
.pp-sp-config-card__icon {
	display: grid;
	width: 31px;
	height: 31px;
	place-items: center;
}

.pp-sp-config-card__number { background: var(--sp-orange); color: #fff; font-size: var(--pp-fs-2xs, 11px); font-weight: 850; }
.pp-sp-config-card__icon { background: var(--sp-orange-soft); color: var(--sp-orange); }
.pp-sp-config-card__icon svg { width: 17px; height: 17px; }
.pp-sp-config-card__head h2 { margin: 0; color: var(--sp-ink); line-height: 1.2; }
.pp-sp-config-card__head p { margin: 2px 0 0; color: var(--sp-muted); line-height: 1.4; }
.pp-sp-config-card__status { min-width: 32px; padding: 5px 7px; border-radius: 7px; background: #f1f5f9; color: var(--sp-muted); font-weight: 800; text-align: center; }
.pp-sp-config-card__status.is-complete { background: #ecfdf5; color: #047857; }

.pp-sp-config-card__body {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	padding: 18px 21px 20px;
}

.pp-sp-config-card__body > .nbd-option-field {
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.pp-sp-config-card__body > .nbd-option-field:has(textarea),
.pp-sp-config-card__body > .nbd-option-field:has(input[type="file"]),
.pp-sp-config-card__body > .nbd-option-field[data-pp-sp-field-type="dimension"] { grid-column: 1 / -1; }

/* Modal option fields read as premium compact pickers. */
.pp-sp-config-card__body .pc-modal-trigger { gap: 9px; text-align: left; }

.pp-sp-config-card__body .pc-modal-trigger::before {
	content: "";
	display: block;
	flex: 0 0 34px;
	border: 1px solid #d8dee7;
	background: linear-gradient(135deg, #fff 0 48%, #e7ebf1 49% 55%, #fff 56%);
}

/* Тут був .pc-modal-field:nth-of-type(2) з «паперовою» текстурою — тобто вигляд прибитий до
   ПОРЯДКУ поля в наборі. Додав/прибрав опцію в адмінці — текстура переїжджала на чуже поле.
   Реальне прев'ю обраного варіанта і так підставляє single-product.js через .has-option-preview;
   для полів без картинки лишається нейтральний градієнт вище. */
/* X-label appearance is owned by printcart.css; sizing is tuned later via tokens. */

/* Project card and native upload/notes. */
.pp-sp-config-card--artwork .pp-sp-config-card__body { grid-template-columns: 1fr; }
.pp-sp-selected-project {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	padding: 10px 11px;
	border: 1px solid #dbe2ec;
	border-radius: 10px;
	background: #f8fafc;
}
.pp-sp-selected-project__icon { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #fed7aa; background: #fff; color: var(--sp-orange); }
.pp-sp-selected-project__icon svg { width: 18px; height: 18px; }
.pp-sp-selected-project small,
.pp-sp-selected-project strong { display: block; }
.pp-sp-selected-project small { margin-bottom: 2px; color: var(--sp-muted); }
.pp-sp-selected-project strong { color: var(--sp-ink); }
.pp-sp-selected-project button { padding: 5px 0; border: 0; background: transparent; color: var(--sp-orange); font-weight: 850; cursor: pointer; }

.pp-sp-config-card--artwork textarea { min-height: 82px; resize: vertical; }

/* The native delivery matrix stays in the DOM as PrintCart's pricing controller.
   This product page replaces only its presentation with the compact proxy below. */
.pp-sp-config-card--delivery .pp-sp-config-card__body { display: block; }
.pp-sp-config-card--delivery .nbd-option-field { display: none; }
.pp-sp-config-card--delivery.has-production-picker .nbo-delivery,
.pp-sp-config-card--delivery.has-production-picker .nbo-delivery-custom-quantity { display: none; }

.pp-sp-production-picker {
	display: grid;
	gap: 18px;
}

.pp-sp-production-picker__group {
	display: grid;
	gap: 9px;
}

.pp-sp-production-picker__group > h3 {
	margin: 0;
	color: var(--sp-ink);
	font-size: var(--sp-text-sm, 14px);
	font-weight: 850;
	letter-spacing: -.01em;
}

.pp-sp-quantity-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
	gap: 7px;
}

.pp-sp-quantity-option {
	display: flex;
	min-height: 48px;
	align-items: baseline;
	justify-content: center;
	gap: 4px;
	padding: 9px 8px;
	border: 1px solid #dbe2ec;
	border-radius: 10px;
	background: #fff;
	color: var(--sp-ink);
	cursor: pointer;
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
}

.pp-sp-quantity-option:hover:not(:disabled) {
	border-color: #fdba74;
	transform: translateY(-1px);
}

.pp-sp-quantity-option:disabled {
	opacity: .42;
	background: #f8fafc;
	cursor: not-allowed;
	transform: none;
}

.pp-sp-quantity-option:focus-visible,
.pp-sp-speed-option:focus-visible {
	outline: 3px solid rgba(249, 115, 22, .22);
	outline-offset: 2px;
}

.pp-sp-quantity-option.is-active {
	border-color: var(--sp-orange);
	background: var(--sp-orange-soft);
	box-shadow: 0 0 0 1px var(--sp-orange);
}

.pp-sp-quantity-option strong {
	font-size: var(--sp-text-base, 16px);
	font-weight: 900;
}

.pp-sp-quantity-option small {
	color: var(--sp-muted);
	font-size: var(--sp-text-xs, 12px);
}

.pp-sp-speed-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 9px;
}

.pp-sp-speed-option {
	position: relative;
	display: grid;
	min-height: 104px;
	grid-template-columns: 38px minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	padding: 15px 14px;
	border: 1px solid #dbe2ec;
	border-radius: 12px;
	background: #fff;
	color: var(--sp-ink);
	text-align: left;
	cursor: pointer;
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
}

.pp-sp-speed-option:hover {
	border-color: #fdba74;
	transform: translateY(-1px);
}

.pp-sp-speed-option.is-active {
	border-color: var(--sp-orange);
	background: linear-gradient(135deg, #fff 0%, var(--sp-orange-soft) 100%);
	box-shadow: 0 0 0 1px var(--sp-orange);
}

.pp-sp-speed-option:disabled {
	opacity: .42;
	cursor: not-allowed;
	transform: none;
}

.pp-sp-speed-option__icon {
	display: grid;
	width: 38px;
	height: 38px;
	place-items: center;
	border-radius: 10px;
	background: #f1f5f9;
	color: #475569;
}

.pp-sp-speed-option__icon svg {
	width: 20px;
	height: 20px;
}

.pp-sp-speed-option.is-active .pp-sp-speed-option__icon {
	background: var(--sp-orange);
	color: #fff;
}

.pp-sp-speed-option__copy {
	display: grid;
	gap: 5px;
	min-width: 0;
}

.pp-sp-speed-option__copy strong {
	font-size: var(--sp-text-sm, 14px);
	font-weight: 850;
	line-height: 1.25;
}

.pp-sp-speed-option__copy small {
	width: max-content;
	padding: 3px 7px;
	border-radius: 999px;
	background: #f1f5f9;
	color: #475569;
	font-size: var(--sp-text-xs, 12px);
	font-weight: 800;
}

.pp-sp-speed-option.is-active .pp-sp-speed-option__copy small {
	background: #fff;
	color: var(--sp-orange);
}

.pp-sp-speed-option__check {
	position: absolute;
	top: 8px;
	right: 8px;
	display: grid;
	width: 19px;
	height: 19px;
	place-items: center;
	border-radius: 50%;
	background: var(--sp-orange);
	color: #fff;
	font-size: 11px;
	font-weight: 900;
	opacity: 0;
	transform: scale(.75);
	transition: opacity .18s ease, transform .18s ease;
}

.pp-sp-speed-option.is-active .pp-sp-speed-option__check {
	opacity: 1;
	transform: scale(1);
}

.pp-sp-page .nbo-clear-option-wrap { height: 0; margin: 0; overflow: hidden; }

/* Order summary: tags + concise native breakdown + one dominant CTA. */
.pp-sp-page .nbo-summary-wrapper.pp-sp-summary-card {
	margin: 0;
	padding: 20px 22px;
	border: 1px solid var(--sp-line);
	border-top: 4px solid var(--sp-orange);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 8px 25px rgba(15, 23, 42, .04);
}

.pp-sp-summary-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 11px;
}
.pp-sp-summary-head span { display: block; margin-bottom: 4px; color: var(--sp-orange); font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.pp-sp-summary-head h2 { margin: 0; color: var(--sp-ink); line-height: 1.15; }

.pp-sp-summary-tags { display: flex; flex-wrap: wrap; gap: 5px; padding-bottom: 12px; border-bottom: 1px solid var(--sp-line); }
.pp-sp-summary-tags span { max-width: 145px; padding: 5px 7px; overflow: hidden; border-radius: 6px; background: #f1f5f9; color: #667085; text-overflow: ellipsis; white-space: nowrap; }

.pp-sp-summary-card .nbo-table-summary-wrap { margin: 10px 0 0; padding: 0; border: 0; background: transparent; }
.pp-sp-summary-card .nbo-summary-title,
.pp-sp-summary-card .nbo-summary-table tbody { display: none; }
.pp-sp-summary-card .nbo-summary-table { margin: 0; border: 0; }
.pp-sp-summary-card .nbo-summary-table td { padding: 5px 0; border: 0; color: var(--sp-muted); background: transparent; }
.pp-sp-summary-card .nbo-summary-table td:last-child { color: var(--sp-ink); font-weight: 800; text-align: right; }
.pp-sp-summary-card .nbo-summary-table tfoot tr.pp-sp-row-fee td,
.pp-sp-summary-card .nbo-summary-table tfoot tr.pp-sp-row-fee td * {
	line-height: 1.45;
	letter-spacing: 0;
	text-transform: none;
}
.pp-sp-summary-card .nbo-summary-table tfoot tr.pp-sp-row-fee td:first-child { width: 58%; padding-right: 8px; color: var(--sp-muted); font-weight: 500; }
.pp-sp-summary-card .nbo-summary-table tfoot tr.pp-sp-row-fee td:last-child { padding-left: 8px; color: var(--sp-ink); font-weight: 800; }

.pp-sp-summary-total {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-top: 9px;
	padding-top: 12px;
	border-top: 1px solid var(--sp-line);
}
.pp-sp-summary-total span { color: var(--sp-muted); font-weight: 800; text-transform: uppercase; }
.pp-sp-summary-total strong { color: var(--sp-ink); font-size: var(--pp-fs-6xl, 28px); line-height: 1; letter-spacing: -.04em; }

.pp-sp-order-actions { display: grid; margin-top: 13px; }
.pp-sp-order-actions .quantity { width: auto !important; margin: 0 !important; }
.pp-sp-order-actions .quantity .qty { width: 100% !important; margin: 0; border: 1px solid #d7dee8 !important; border-radius: 10px !important; background: #fff; }
.pp-sp-summary-card .pp-sp-pricing-card {
	margin-top: 16px;
	overflow: hidden;
	border: 1px solid var(--sp-line);
	border-radius: 12px;
	background: #fff;
}
.pp-sp-summary-card .pp-sp-pricing-card .nbo-table-pricing-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 46px;
	margin: 0;
	padding: 11px 14px;
	border: 0;
	background: #f8fafc;
	color: var(--sp-ink);
	font-size: var(--pp-fs-sm, 13px);
	line-height: 1.35;
}
.pp-sp-summary-card .pp-sp-pricing-card .nbo-table-pricing-title b { font-weight: 800; }
.pp-sp-summary-card .pp-sp-pricing-card .nbo-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin: 0;
	border-radius: 7px;
	color: var(--sp-muted);
}
.pp-sp-summary-card .pp-sp-pricing-card .nbo-toggle svg { width: 18px; height: 18px; }
.pp-sp-summary-card .pp-sp-pricing-card .nbo-table-pricing {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: var(--pp-fs-xs, 12px);
}
.pp-sp-summary-card .pp-sp-pricing-card .nbo-table-pricing th,
.pp-sp-summary-card .pp-sp-pricing-card .nbo-table-pricing td {
	padding: 9px 12px;
	border: 0;
	border-top: 1px solid var(--sp-line);
	line-height: 1.35;
	text-align: left;
	vertical-align: middle;
}
.pp-sp-summary-card .pp-sp-pricing-card .nbo-table-pricing td {
	background: #fff;
	color: var(--sp-ink);
}
.pp-sp-summary-card .pp-sp-pricing-card .nbo-table-pricing th {
	background: #fff7ed;
	color: #9a3412;
	font-weight: 800;
}
.pp-sp-summary-card .pp-sp-pricing-card .nbo-table-pricing th:last-child,
.pp-sp-summary-card .pp-sp-pricing-card .nbo-table-pricing td:last-child {
	width: 44%;
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.pp-sp-summary-card .pp-sp-pricing-card .nbo-table-pricing tr.nbo-bold td {
	background: var(--sp-orange-soft);
	color: var(--sp-orange-dark);
	font-weight: 850;
}
.pp-sp-summary-card .pp-sp-pricing-card .nbo-table-pricing tr.pp-sp-impossible-range {
	display: none;
}

.pp-sp-order-actions .single_add_to_cart_button {
	display: flex !important;
	width: 100% !important;
	align-items: center;
	margin: 0 !important;
}

.pp-sp-order-trust { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 9px 0 0; color: var(--sp-muted); text-align: center; }
.pp-sp-order-trust svg { width: 12px; height: 12px; color: var(--sp-orange); }

.pp-sp-page .summary .product_meta { margin: 0; padding: 8px 3px 0; border-top: 0; }

/* Modal visual language aligned with the configurator. */

@media (max-width: 1180px) {
	.pp-sp-page .vz-product-top { grid-template-columns: minmax(0, 34fr) minmax(0, 66fr); }
	.pp-sp-page .woocommerce-product-gallery { --pp-gallery-h: clamp(300px, 34vw, 420px); }
	.pp-sp-methods__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 920px) {
	.pp-sp-page .vz-product-top { grid-template-columns: 1fr; }
	.pp-sp-page .woocommerce-product-gallery { position: relative !important; top: auto; --pp-gallery-h: 430px; }
}

@media (max-width: 680px) {
	.pp-sp-breadcrumb { margin-top: 9px; padding-inline: 2px; }
	.pp-sp-methods { padding: 17px 14px; }
	.pp-sp-section-heading { grid-template-columns: 1fr; }
	.pp-sp-section-heading p { text-align: left; }
	.pp-sp-method { display: grid; }
	.pp-sp-page .woocommerce-product-gallery { --pp-gallery-h: 330px; }
	.pp-sp-page .pp-sp-product-head .product_title { font-size: var(--pp-fs-6xl, 28px); }
	.pp-sp-config-card__head { padding: 14px 15px; }
	.pp-sp-config-card__number { width: 29px; height: 29px; }
	.pp-sp-config-card__body { grid-template-columns: 1fr; padding: 15px; }
	.pp-sp-config-card__body > .nbd-option-field:has(textarea),
	.pp-sp-config-card__body > .nbd-option-field:has(input[type="file"]),
	.pp-sp-config-card__body > .nbd-option-field[data-pp-sp-field-type="dimension"] { grid-column: auto; }
	.pp-sp-summary-card .nbo-summary-table tfoot tr.pp-sp-row-discount { display: none; }
	.pp-sp-page .nbo-summary-wrapper.pp-sp-summary-card { padding: 17px 15px; }
	.pp-sp-summary-total strong { font-size: var(--pp-fs-5xl, 26px); }
}

/* ========================================================================
   TYPOGRAPHY, NATIVE CONTROLS & REVIEWS
   ======================================================================== */

.pp-sp-page {
	--sp-text-xs: var(--pp-fs-xs, 12px);
	--sp-text-sm: var(--pp-fs-md, 14px);
}

.pp-sp-product-head .single-product-category,
.pp-sp-summary-head span,
.pp-sp-page .summary .product_meta { font-size: var(--sp-text-xs) !important; }

.pp-sp-section-heading p,
.pp-sp-method > p,
.pp-sp-method__price,
.pp-sp-config-card__head p,
.pp-sp-config-card__status,
.pp-sp-selected-project small,
.pp-sp-order-trust { font-size: var(--sp-text-xs); }

.pp-sp-method h3,
.pp-sp-selected-project strong,
.pp-sp-selected-project button,
.pp-sp-summary-card .nbo-summary-table,
.pp-sp-summary-card .nbo-summary-table tfoot tr.pp-sp-row-fee td,
.pp-sp-summary-card .nbo-summary-table tfoot tr.pp-sp-row-fee td *,
.pp-sp-summary-total span { font-size: var(--sp-text-sm); }

.pp-sp-page .pp-sp-product-head .woocommerce-product-details__short-description {
	font-size: var(--sp-text-base);
	line-height: 1.65;
}

.pp-sp-section-heading h2 { font-size: var(--pp-fs-6xl, 28px); }
.pp-sp-config-card__head h2 { font-size: var(--pp-fs-2xl, 18px); }
.pp-sp-summary-head h2 { font-size: var(--pp-fs-4xl, 22px); }

.pp-sp-method {
	min-height: 132px;
	padding: 15px;
}

.pp-sp-method__icon,
.pp-sp-config-card__number,
.pp-sp-config-card__icon,
.pp-sp-selected-project__icon,
.pp-sp-info-section__icon {
	border-radius: 50%;
}

.pp-sp-config-card__head {
	min-height: 82px;
	padding-block: 17px;
}

/* Real selected image remains visible after an Angular option update. */
.pp-sp-config-card__body .pc-modal-trigger {
	min-height: 62px;
	padding: 9px 9px 9px 12px;
}

.pp-sp-config-card__body .pc-modal-trigger::before {
	width: 42px;
	height: 42px;
	flex-basis: 42px;
	border-radius: 9px;
}

.pp-sp-config-card__body .pc-modal-trigger.has-option-preview::before {
	background-color: var(--pp-sp-option-preview-color, #fff);
	background-image: var(--pp-sp-option-preview-image, none);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* PrintCart image/x-label choices are styled by printcart.css.
   This page only tunes component sizing for its configuration-card layout.
   The preview itself always comes from PrintCart option data (inline background);
   no nth-child, field-name or product-specific visual inference lives here. */
.pp-sp-config-card__body .nbd-field-xlabel-wrap {
	--pc-nbo-xlabel-min-width: 168px;
	--pc-nbo-xlabel-preview-size: 52px;
	--pc-nbo-xlabel-gap: 10px;
}

.pp-sp-summary-tags span { font-size: var(--sp-text-xs); }
.pp-sp-order-actions { grid-template-columns: 90px minmax(0, 1fr); gap: 10px; }
.pp-sp-order-actions .quantity .qty { min-height: 60px; font-size: var(--sp-text-base) !important; }

/* PrintConstructor initially renders the quote action loose in form.cart; JS
   then moves it into .pp-sp-order-actions. Keep first paint usable as well, so
   a delayed script can never expose the plugin's raw unstyled button. */
body.pp-body.pp-single-product .pp-sp-page form.cart > .nbdq-add-a-quote {
	display: block;
	width: 100%;
	margin: 10px 0 0;
	clear: both;
}
body.pp-body.pp-single-product .pp-sp-page form.cart > .nbdq-add-a-quote .nbdq-add-a-quote-button.button {
	width: 100%;
	margin: 0;
	float: none;
}

/* Order row with the secondary "request a quote" action: both buttons share the
   space left by the quantity field. */
.pp-sp-order-actions.has-quote { grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1fr); }
body.pp-body.pp-single-product .pp-sp-order-actions .nbdq-add-a-quote { display: flex; min-width: 0; margin: 0; }
body.pp-body.pp-single-product .pp-sp-order-actions .nbdq-add-a-quote-button.button {
	width: 100%;
	height: 100%;
	float: none;
	margin: 0;
}



/* Narrow screens: quantity + "Zamów" keep the first row, the quote drops below. */
@media (max-width: 680px) {
	.pp-sp-order-actions.has-quote { grid-template-columns: 72px minmax(0, 1fr); }
	.pp-sp-order-actions.has-quote .nbdq-add-a-quote { grid-column: 1 / -1; }
}

/* Every information block receives the same icon/title language as the demo. */
.pp-sp-info-section__header {
	display: flex;
	align-items: center;
	gap: 14px;
}

.pp-sp-info-section__icon {
	display: grid;
	width: 46px;
	height: 46px;
	flex: 0 0 46px;
	place-items: center;
	background: var(--sp-orange-soft);
	color: var(--sp-orange);
}
.pp-sp-info-section__icon svg { width: 22px; height: 22px; }
.pp-sp-info-section__title { min-width: 0; }
.pp-sp-info-section__header h2 { font-size: var(--pp-fs-6xl, 28px); }
.pp-sp-info-section__body { font-size: var(--sp-text-base); line-height: 1.7; }
.pp-sp-info-section--vz_wymagania .vz-tab-meta > h3:first-child { display: none; }

/* WooCommerce reviews keep their native data/form, with the demo's two-column composition. */
.pp-sp-info-section--reviews .pp-sp-info-section__body {
	display: grid;
	grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
	align-items: start;
	gap: 28px;
}

.pp-sp-review-summary {
	position: sticky;
	top: 150px;
	padding: 24px;
	border: 1px solid var(--sp-line);
	border-radius: 15px;
	background: var(--sp-soft);
}
.pp-sp-review-summary__score { display: flex; align-items: center; gap: 13px; margin: 8px 0 4px; }
.pp-sp-review-summary__score > strong { color: var(--sp-ink); font-size: var(--pp-fs-9xl, 40px); line-height: 1; letter-spacing: -.05em; }
.pp-sp-review-summary__score > span { display: flex; gap: 2px; color: #f5a623; }
.pp-sp-review-summary__score svg { width: 18px; height: 18px; fill: currentColor; stroke-width: 1.2; }
.pp-sp-review-summary > p { margin: 7px 0 18px; color: var(--sp-muted); font-size: var(--sp-text-sm); }
.pp-sp-review-bars { display: grid; gap: 8px; }
.pp-sp-review-bars > div { display: grid; grid-template-columns: 14px minmax(0, 1fr) 24px; align-items: center; gap: 8px; font-size: var(--sp-text-xs); }
.pp-sp-review-bars b { color: var(--sp-ink); }
.pp-sp-review-bars small { color: var(--sp-muted); text-align: right; }
.pp-sp-review-bars span { height: 7px; overflow: hidden; border-radius: 99px; background: #e5e9ef; }
.pp-sp-review-bars i { display: block; height: 100%; border-radius: inherit; background: #f5a623; }
.pp-sp-review-summary > button { width: 100%; margin-top: 20px; }

.pp-sp-info-section--reviews .woocommerce-Tabs-panel,
.pp-sp-info-section--reviews #reviews { min-width: 0; }
.pp-sp-info-section--reviews #reviews { display: block; }
.pp-sp-info-section--reviews #comments,
.pp-sp-info-section--reviews #review_form_wrapper { width: 100%; float: none; }
.pp-sp-info-section--reviews .woocommerce-Reviews-title { margin: 0 0 16px !important; font-size: var(--pp-fs-4xl, 22px) !important; }
.pp-sp-info-section--reviews ol.commentlist { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.pp-sp-info-section--reviews ol.commentlist > li { margin: 0; padding: 0; border: 0; }
.pp-sp-info-section--reviews ol.commentlist .comment_container {
	position: relative;
	min-height: 96px;
	padding: 20px 20px 20px 78px;
	border: 1px solid var(--sp-line);
	border-radius: 14px;
}
.pp-sp-info-section--reviews ol.commentlist img.avatar {
	top: 20px;
	left: 20px;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
}
.pp-sp-info-section--reviews ol.commentlist img.avatar { display: none; }
.pp-sp-review-avatar {
	position: absolute;
	top: 20px;
	left: 20px;
	display: grid;
	width: 42px;
	height: 42px;
	place-items: center;
	border-radius: 50%;
	background: var(--sp-orange);
	color: #fff;
	font-size: var(--sp-text-xs);
	font-weight: 850;
}
.pp-sp-review-avatar--dark { background: var(--sp-ink); }
.pp-sp-info-section--reviews ol.commentlist .review-rating {
	position: absolute;
	top: 20px;
	right: 20px;
}
.pp-sp-info-section--reviews ol.commentlist .comment-text { margin: 0; padding: 0; border: 0; }
.pp-sp-info-section--reviews ol.commentlist .meta { margin: 0 110px 9px 0; color: var(--sp-muted); font-size: var(--sp-text-xs); }
.pp-sp-info-section--reviews ol.commentlist .woocommerce-review__author { color: var(--sp-ink); font-size: var(--sp-text-sm); }
.pp-sp-info-section--reviews ol.commentlist .description { color: #475467; font-size: var(--sp-text-sm); line-height: 1.65; }
.pp-sp-info-section--reviews ol.commentlist .star-rating { color: #f5a623; font-size: var(--pp-fs-md, 14px); }
.pp-sp-info-section--reviews #review_form_wrapper { margin-top: 18px; padding: 22px; border: 1px solid var(--sp-line); background: var(--sp-soft); }
.pp-sp-info-section--reviews #review_form_wrapper .comment-reply-title { font-size: var(--pp-fs-2xl, 18px); font-weight: 800; }
.pp-sp-info-section--reviews #review_form_wrapper label,
.pp-sp-info-section--reviews #review_form_wrapper p { font-size: var(--sp-text-sm); }
.pp-sp-info-section--reviews #review_form_wrapper p.comment-form-comment,
.pp-sp-info-section--reviews #review_form_wrapper p.comment-form-author,
.pp-sp-info-section--reviews #review_form_wrapper p.comment-form-email {
	display: flex;
	flex-direction: column;
}
.pp-sp-info-section--reviews #review_form_wrapper label {
	display: block;
	margin-bottom: 6px;
	order: 0;
}
.pp-sp-info-section--reviews #review_form_wrapper textarea,
.pp-sp-info-section--reviews #review_form_wrapper input { font-size: var(--sp-text-sm); width: 100%; box-sizing: border-box; order: 1; }
.pp-sp-info-section--reviews #review_form_wrapper input { min-height: 46px; }
.pp-sp-info-section--reviews #review_form_wrapper textarea { min-height: 120px; }
.pp-sp-info-section--reviews .woocommerce-Reviews-title { display: none !important; }

.pp-sp-badge > span { border-radius: 50%; }
.pp-sp-badge strong { font-size: var(--sp-text-sm); }
.pp-sp-badge small,
.pp-sp-content-nav a { font-size: var(--sp-text-xs); }

@media (max-width: 920px) {
	.pp-sp-review-summary { position: static; }
	.pp-sp-info-section--reviews .pp-sp-info-section__body { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
	.pp-sp-config-card__head { grid-template-columns: 29px 29px minmax(0, 1fr) auto; gap: 8px; }
	.pp-sp-config-card__icon { display: grid; width: 29px; height: 29px; }
	.pp-sp-config-card__icon svg { width: 15px; height: 15px; }
	.pp-sp-config-card__head h2 { font-size: var(--pp-fs-xl, 16px); }
	.pp-sp-order-actions { grid-template-columns: 76px minmax(0, 1fr); }
	.pp-sp-info-section__header { align-items: flex-start; }
	.pp-sp-info-section__icon { width: 40px; height: 40px; flex-basis: 40px; }
	.pp-sp-info-section__header h2 { font-size: var(--pp-fs-4xl, 22px); }
	.pp-sp-info-section--reviews ol.commentlist .comment_container { padding: 18px 16px 18px 68px; }
	.pp-sp-info-section--reviews ol.commentlist img.avatar { top: 18px; left: 16px; width: 38px; height: 38px; }
	.pp-sp-review-avatar { top: 18px; left: 16px; width: 38px; height: 38px; }
	.pp-sp-info-section--reviews ol.commentlist .review-rating { position: static; margin-bottom: 7px; }
	.pp-sp-info-section--reviews ol.commentlist .meta { margin-right: 0; }
}

/* Keep Woo rating and PrintConstructor designer actions inside their logical cards. */
.pp-sp-product-head .woocommerce-product-rating {
	grid-column: 1;
	grid-row: 1;
	display: flex !important;
	align-items: center;
	gap: 10px;
	min-height: 24px;
	margin: 0 0 8px !important;
	font-size: var(--sp-text-sm);
}
.pp-sp-product-head .woocommerce-product-rating .star-rating {
	order: 1;
	float: none !important;
	margin: 0 !important;
	color: #f59e0b;
	font-size: var(--pp-fs-xl, 16px);
}
.pp-sp-product-head .woocommerce-product-rating .star-rating span::before { color: #f59e0b; }
.pp-sp-product-head .woocommerce-product-rating .woocommerce-review-link {
	order: 2;
	color: var(--sp-muted);
	font-size: var(--sp-text-xs);
	font-weight: 750;
	text-decoration: none;
}
.pp-sp-product-head .woocommerce-product-rating .woocommerce-review-link:hover { color: var(--sp-orange); }
/* Category faces the rating (row 1, right). Breadcrumb takes the category's old
   spot on row 2, left. Price keeps the right column below the category. */
.pp-sp-product-head .single-product-category {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	align-self: center;
	margin: 0;
	text-align: right;
}
.pp-sp-page .pp-sp-product-head .pp-sp-breadcrumb {
	grid-column: 1;
	grid-row: 2;
	width: auto;
	margin: 0 0 8px;
}
.pp-sp-page .pp-sp-product-head .product_title { grid-row: 3; }
.pp-sp-page .pp-sp-product-head > .price { grid-row: 2 / 4; }
.pp-sp-product-head .woocommerce-product-details__short-description { grid-row: 4; }

.pp-sp-native-design-actions {
	grid-column: 1 / -1;
	width: 100%;
	margin: 0;
	padding: 0;
}
.pp-sp-native-design-actions > p,
.pp-sp-native-design-actions .nbd-actions-wrap,
.pp-sp-native-design-actions .nbd-action-wrap { margin: 0; }
.pp-sp-native-design-actions #triggerDesign,
.pp-sp-native-design-actions #startDesign,
.pp-sp-native-design-actions #startUpload,
.pp-sp-native-design-actions #useTemplate {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	margin: 0;
	text-align: left;
}
.pp-sp-native-action-icon {
	box-sizing: border-box;
	display: flex;
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	align-self: center;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	line-height: 0;
	border-radius: 50%;
	background: rgba(255,255,255,.18);
}
.pp-sp-native-action-icon svg {
	box-sizing: border-box;
	display: block;
	width: 17px;
	height: 17px;
	margin: 0;
	padding: 0;
	transform: none;
}
.pp-sp-native-action-arrow { margin-left: auto; font-style: normal; font-size: var(--pp-fs-2xl, 18px); }
.pp-sp-native-design-actions .nbdesigner-img-loading { width: 18px; height: 18px; }
.pp-sp-native-design-actions > h4[style*="display: none"],
.pp-sp-native-design-actions > div[style*="display: none"] { margin: 0; }

/* Reviews follow the prototype: summary at left, compact cards in two columns. */
.pp-sp-info-section--reviews .pp-sp-info-section__header { display: none; }
.pp-sp-info-section--reviews .pp-sp-review-summary {
	padding: 0 28px 0 0;
	border: 0;
	border-right: 1px solid var(--sp-line);
	border-radius: 0;
	background: transparent;
}
.pp-sp-info-section--reviews ol.commentlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Базовий clearfix (::before/::after з content:" ";display:table) у grid-контейнері
   стає повноцінним grid-елементом і з'їдає першу клітинку → картки зсуваються
   на одну позицію («шахівниця»). Прибираємо псевдо тільки в цій сітці. */
.pp-sp-info-section--reviews ol.commentlist::before,
.pp-sp-info-section--reviews ol.commentlist::after { content: none; display: none; }
.pp-sp-info-section--reviews ol.commentlist .comment_container { height: 100%; background: var(--sp-soft); }

@media (max-width: 920px) {
	.pp-sp-info-section--reviews .pp-sp-review-summary {
		padding: 0 0 22px;
		border-right: 0;
		border-bottom: 1px solid var(--sp-line);
	}
	.pp-sp-info-section--reviews ol.commentlist { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
	.pp-sp-product-head .woocommerce-product-rating { margin-bottom: 11px !important; }
	.pp-sp-product-head .woocommerce-product-rating .star-rating { font-size: var(--pp-fs-md, 14px); }
}

/* ========================================================================
   GLOBAL SCALE, GRID & ACCESSIBLE PRICING STATES
   ======================================================================== */

/* The demo and the rest of the storefront use a compact 14px UI baseline. */
.pp-sp-page {
	--sp-text-base: var(--pp-fs-md, 14px);
	--sp-orange-dark: var(--pp-orange-hover, #ea580c);
	font-size: var(--sp-text-base);
}

/* A sale badge is presentation, never a grid item. Without this, products on
   sale auto-place the gallery in column two and push the configurator below. */
.pp-sp-page div.product,
.pp-sp-page .vz-product-top { width: 100%; max-width: none; }
.pp-sp-page .vz-product-top { position: relative; }
.pp-sp-page .vz-product-top > .ast-on-card-button,
.pp-sp-page .vz-product-top > .onsale {
	position: absolute;
	z-index: 8;
	top: 16px;
	left: 16px;
	right: auto;
	bottom: auto;
	width: auto;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 6px 10px;
	border: 0;
	border-radius: 7px;
	background: var(--sp-orange);
	color: #fff;
	font-size: var(--sp-text-xs);
	font-weight: 850;
	line-height: 1.2;
	text-transform: uppercase;
	box-shadow: 0 8px 18px rgba(249, 115, 22, .2);
}

/* WooCommerce renders a unicode magnifier when Astra's icon CSS is absent.
   The interaction layer replaces it with this local inline SVG. */
.pp-sp-page .woocommerce-product-gallery__trigger {
	position: absolute !important;
	z-index: 9;
	top: 16px !important;
	right: 16px !important;
	display: grid !important;
	width: 42px !important;
	height: 42px !important;
	min-width: 42px !important;
	min-height: 42px !important;
	place-items: center;
	padding: 0 !important;
	border: 1px solid var(--pp-ui-line, #e2e8f0) !important;
	border-radius: 10px !important;
	background: rgba(255, 255, 255, .94) !important;
	color: var(--sp-ink) !important;
	font-size: 0 !important;
	text-decoration: none !important;
	box-shadow: 0 8px 22px rgba(15, 23, 42, .1) !important;
	backdrop-filter: blur(8px);
}
.pp-sp-page .woocommerce-product-gallery__trigger:hover {
	border-color: #fdba74 !important;
	background: var(--sp-orange-soft) !important;
	color: var(--sp-orange-dark) !important;
}
/* Astra draws its own magnifier with border/background pseudo-elements
   (lens = ::before circle, handle = ::after rotated bar). font-size:0 only
   hides font glyphs, not these shapes, so kill them — our JS injects the
   real SVG icon as a child span instead. */
.pp-sp-page .woocommerce-product-gallery__trigger::before,
.pp-sp-page .woocommerce-product-gallery__trigger::after {
	content: none !important;
	display: none !important;
}
.pp-sp-zoom-icon,
.pp-sp-zoom-icon svg { display: block; width: 20px; height: 20px; }

/* Convert the native NBO tfoot into a predictable modern price breakdown. */
.pp-sp-summary-card .nbo-table-summary-wrap { overflow: visible; }
.pp-sp-summary-card .nbo-summary-table,
.pp-sp-summary-card .nbo-summary-table tfoot {
	display: block;
	width: 100%;
}
.pp-sp-summary-card .nbo-summary-table tfoot tr { display: none; }
.pp-sp-summary-card .nbo-summary-table tfoot tr.pp-sp-row-options,
.pp-sp-summary-card .nbo-summary-table tfoot tr.pp-sp-row-discount,
.pp-sp-summary-card .nbo-summary-table tfoot tr.pp-sp-row-fee {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 16px;
	min-height: 38px;
	border-bottom: 1px solid var(--sp-line);
}
.pp-sp-summary-card .nbo-summary-table tfoot tr.pp-sp-row-options,
.pp-sp-summary-card .nbo-summary-table tfoot tr.pp-sp-row-discount {
	padding: 9px 2px;
	background: transparent;
}
.pp-sp-summary-card .nbo-summary-table tfoot tr.pp-sp-row-fee {
	margin-top: 7px;
	padding: 12px 14px;
	border: 1px solid #fed7aa;
	border-radius: 10px;
	background: var(--sp-orange-soft);
}
.pp-sp-summary-card .nbo-summary-table tfoot tr > td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	background: transparent;
	line-height: 1.45;
}
.pp-sp-summary-card .nbo-summary-table tfoot tr > td:first-child {
	min-width: 0;
	color: var(--sp-muted);
	font-weight: 650;
}
.pp-sp-summary-card .nbo-summary-table tfoot tr > td:last-child {
	color: var(--sp-ink);
	font-weight: 850;
	text-align: right;
	white-space: nowrap;
}
.pp-sp-summary-card .nbo-summary-table tfoot tr.pp-sp-row-fee > td:first-child {
	width: auto;
	padding: 0;
	color: #9a3412;
	font-weight: 750;
}
.pp-sp-summary-card .nbo-summary-table tfoot tr.pp-sp-row-fee > td:last-child {
	padding: 0;
	color: var(--sp-orange-dark);
}


/* Main order CTA appearance/typography is owned by the shared large-button contract. */

@media (max-width: 680px) {
	.pp-sp-page .vz-product-top > .ast-on-card-button,
	.pp-sp-page .vz-product-top > .onsale { top: 10px; left: 10px; }
	.pp-sp-page .woocommerce-product-gallery__trigger { top: 10px !important; right: 10px !important; }
	.pp-sp-summary-card .nbo-summary-table tfoot tr.pp-sp-row-fee { align-items: start; grid-template-columns: 1fr; gap: 5px; }
	.pp-sp-summary-card .nbo-summary-table tfoot tr.pp-sp-row-fee > td:last-child { text-align: left; white-space: normal; }
}

/* ========================================================================
   MOBILE LAYOUT & ICON INDEPENDENCE
   ======================================================================== */

/* The product breadcrumb participates in the global breadcrumb system. */

/* Woo's review links remain accessible text, while the visible control is
   rendered locally so removing Astra cannot remove the stars again. */
.pp-sp-info-section--reviews #review_form p.stars {
	display: block;
	margin: 8px 0 18px;
}
.pp-sp-info-section--reviews #review_form p.stars > span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.pp-sp-info-section--reviews #review_form p.stars a {
	position: relative;
	display: block;
	width: 34px;
	height: 34px;
	overflow: hidden;
	border-radius: 7px;
	color: transparent;
	font-size: 0;
	line-height: 34px;
	text-align: center;
	text-decoration: none;
}
.pp-sp-info-section--reviews #review_form p.stars a::before {
	position: absolute;
	inset: 0;
	content: "\2605";
	color: #cbd5e1;
	font-size: var(--pp-fs-6xl, 28px);
	line-height: 34px;
	text-indent: 0;
	transition: color var(--pp-ui-transition), background var(--pp-ui-transition);
}
.pp-sp-info-section--reviews #review_form p.stars:hover a::before,
.pp-sp-info-section--reviews #review_form p.stars.selected a::before { color: #f59e0b; }
.pp-sp-info-section--reviews #review_form p.stars a:hover ~ a::before,
.pp-sp-info-section--reviews #review_form p.stars.selected a.active ~ a::before { color: #cbd5e1; }
.pp-sp-info-section--reviews #review_form p.stars a:focus-visible {
	outline: 0;
	box-shadow: var(--pp-ui-focus);
}

@media (max-width: 680px) {
	.pp-sp-page .pp-sp-breadcrumb { margin: 10px 2px 12px; }

	/* Product meta uses the DOM's natural reading order on phones. The desktop
	   two-column grid squeezed the breadcrumb/title beside the price and made
	   each block wrap into a narrow strip. */
	.pp-sp-product-head {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 12px;
		align-items: center;
		padding: 17px 15px;
	}
	.pp-sp-product-head .woocommerce-product-rating {
		grid-column: 1 / -1;
		grid-row: 1;
		width: 100%;
		min-width: 0;
		margin: 0 0 8px !important;
	}
	.pp-sp-product-head .woocommerce-product-rating .woocommerce-review-link:empty { display: none; }
	.pp-sp-product-head .single-product-category {
		grid-column: 1 / -1;
		grid-row: 2;
		align-self: start;
		justify-self: start;
		margin: 0 0 10px;
		text-align: left;
	}
	.pp-sp-page .pp-sp-product-head .pp-sp-breadcrumb {
		grid-column: 1 / -1;
		grid-row: 3;
		width: 100%;
		margin: 0 0 12px;
	}
	/* Назва й ціна — КОЖНА на власному рядку (природний порядок читання).
	   Раніше вони ділили один рядок: довге нерозривне слово-назва вилазило
	   з вузької колонки під бейдж ціни (текст переповнював комірку grid). */
	.pp-sp-page .pp-sp-product-head .product_title {
		grid-column: 1 / -1;
		grid-row: 4;
		align-self: center;
		width: auto;
		margin: 0;
	}
	.pp-sp-page .pp-sp-product-head > .price {
		grid-column: 1 / -1;
		grid-row: 5;
		display: inline-flex;
		justify-self: start;
		align-self: center;
		max-width: 100%;
		min-width: 0;
		margin: 12px 0 0;
		padding: 9px 12px;
		text-align: left;
	}
	.pp-sp-page .pp-sp-product-head > .price .pc-default-price { align-items: flex-start; }
	body.pp-single-product div.product .pp-sp-product-head > p.price .pc-default-price .pc-default-price-main {
		font-size: var(--pp-fs-4xl, 22px);
	}
	.pp-sp-product-head .woocommerce-product-details__short-description {
		grid-column: 1 / -1;
		grid-row: 6;
		width: 100%;
		min-width: 0;
		margin: 12px 0 0 !important;
	}

	/* Method cards form a wrapping two-column grid. Any additional method is
	   placed in the next available cell instead of becoming a carousel slide. */
	.pp-sp-methods { overflow: hidden; }
	.pp-sp-methods__grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 9px;
		margin-inline: 0;
		padding: 0;
		overflow: visible;
		scroll-snap-type: none;
	}
	.pp-sp-method {
		grid-template-columns: 34px minmax(0, 1fr);
		grid-template-rows: auto auto 1fr auto;
		gap: 7px 8px;
		width: 100%;
		min-width: 0;
		min-height: 190px;
		padding: 11px;
		flex-basis: auto;
		scroll-snap-align: none;
	}
	.pp-sp-method__icon {
		grid-column: 1;
		grid-row: 1;
		width: 34px;
		height: 34px;
	}
	.pp-sp-method h3 {
		grid-column: 1 / -1;
		grid-row: 2;
		margin-right: 0;
		hyphens: auto;
		overflow-wrap: normal;
		word-break: normal;
	}
	.pp-sp-method > p {
		grid-column: 1 / -1;
		grid-row: 3;
		margin: 0;
		overflow-wrap: anywhere;
	}
	.pp-sp-method__footer {
		grid-column: 1 / -1;
		grid-row: 4;
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		margin-top: 0;
	}
	.pp-sp-method__button {
		width: 100%;
		justify-content: space-between;
		text-align: left;
	}

	/* Benefits wrap inside the viewport instead of creating another carousel. */
	.pp-sp-badges {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		padding: 0;
		overflow: visible;
		border: 0;
		background: transparent;
	}
	.pp-sp-badge {
		width: auto;
		min-width: 0;
		flex: none;
		align-items: flex-start;
		gap: 9px;
		padding: 12px;
		border: 1px solid var(--sp-line);
		border-radius: 11px;
	}
	.pp-sp-badge > span { flex-basis: 34px; width: 34px; height: 34px; }
	.pp-sp-badge > div { min-width: 0; }
	.pp-sp-badge strong,
	.pp-sp-badge small { overflow-wrap: anywhere; }

	/* The floating tab rail starts below the actual 80px mobile header. */
	.pp-sp-content-nav { top: 80px; z-index: 40; }
	.pp-sp-info-section { scroll-margin-top: 148px; }

	.pp-sp-info-section--reviews #review_form_wrapper { padding: 18px 14px; }
	.pp-sp-info-section--reviews #review_form p.stars a { width: 32px; height: 32px; }
	.pp-sp-info-section--reviews #review_form p.stars a::before { font-size: var(--pp-fs-5xl, 26px); line-height: 32px; }
}

@media (max-width: 420px) {
	.pp-sp-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------------
   CusRev (Customer Reviews for WooCommerce) AJAX-список відгуків.
   Плагін рендерить власну розмітку і стилює її селекторами з двома id
   (#reviews.cr-reviews-ajax-reviews #comments.cr-reviews-ajax-comments …),
   що перебиває картки вище: сітка стає block, gap і padding зникають —
   картки «склеюються». Повторюємо вигляд картки з такою ж специфічністю.
   ------------------------------------------------------------------------ */
.pp-sp-info-section--reviews #reviews.cr-reviews-ajax-reviews #comments.cr-reviews-ajax-comments ol.cr-ajax-reviews-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 13px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pp-sp-info-section--reviews #reviews.cr-reviews-ajax-reviews #comments.cr-reviews-ajax-comments ol.cr-ajax-reviews-list > li {
	margin: 0;
	padding: 0;
	border: 0;
}
.pp-sp-info-section--reviews #reviews.cr-reviews-ajax-reviews #comments.cr-reviews-ajax-comments ol.cr-ajax-reviews-list .comment_container {
	position: relative;
	height: 100%;
	min-height: 96px;
	padding: 20px 20px 20px 78px;
	border: 1px solid var(--sp-line);
	border-radius: 14px;
	background: var(--sp-soft);
}
/* Внутрішній блок плагіна має власний відступ під аватар і лінію знизу —
   картка вже дає і те, і те. */
.pp-sp-info-section--reviews #reviews.cr-reviews-ajax-reviews #comments.cr-reviews-ajax-comments ol.cr-ajax-reviews-list .cr-comment-text {
	margin: 0;
	padding: 0;
	border: 0;
}
/* Аватар: у AJAX-розмітці свій (img.cr-avatar з ініціалами) + бейдж-галочка,
   тому власний .pp-sp-review-avatar тут зайвий — інакше вони накладаються. */
.pp-sp-info-section--reviews #reviews.cr-reviews-ajax-reviews #comments.cr-reviews-ajax-comments ol.cr-ajax-reviews-list .pp-sp-review-avatar { display: none; }
.pp-sp-info-section--reviews #reviews.cr-reviews-ajax-reviews #comments.cr-reviews-ajax-comments ol.cr-ajax-reviews-list img.cr-avatar {
	top: 20px;
	left: 20px;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	object-fit: cover;
}
.pp-sp-info-section--reviews #reviews.cr-reviews-ajax-reviews #comments.cr-reviews-ajax-comments ol.cr-ajax-reviews-list .cr-avatar-check {
	top: 45px;
	left: 45px;
}
/* Ім'я і бейдж «zweryfikowany» — в один рядок, дата — праворуч угорі. */
.pp-sp-info-section--reviews #reviews.cr-reviews-ajax-reviews #comments.cr-reviews-ajax-comments ol.cr-ajax-reviews-list .cr-comment-text .meta { margin: 0 0 9px; }
.pp-sp-info-section--reviews #reviews.cr-reviews-ajax-reviews #comments.cr-reviews-ajax-comments ol.cr-ajax-reviews-list .cr-meta-author-featured-date {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	column-gap: 12px;
}
.pp-sp-info-section--reviews #reviews.cr-reviews-ajax-reviews #comments.cr-reviews-ajax-comments ol.cr-ajax-reviews-list .cr-meta-author-title {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.pp-sp-info-section--reviews #reviews.cr-reviews-ajax-reviews #comments.cr-reviews-ajax-comments ol.cr-ajax-reviews-list .woocommerce-review__verified.verified {
	display: inline-flex;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(249, 115, 22, .12);
	font-size: var(--pp-fs-2xs, 11px);
	white-space: nowrap;
}
.pp-sp-info-section--reviews #reviews.cr-reviews-ajax-reviews #comments.cr-reviews-ajax-comments ol.cr-ajax-reviews-list .description { margin: 8px 0 0; }
.pp-sp-info-section--reviews #reviews.cr-reviews-ajax-reviews #comments.cr-reviews-ajax-comments ol.cr-ajax-reviews-list .cr-voting-cont { margin-top: 12px; }

@media (max-width: 920px) {
	.pp-sp-info-section--reviews #reviews.cr-reviews-ajax-reviews #comments.cr-reviews-ajax-comments ol.cr-ajax-reviews-list { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
	.pp-sp-info-section--reviews #reviews.cr-reviews-ajax-reviews #comments.cr-reviews-ajax-comments ol.cr-ajax-reviews-list .comment_container { padding: 18px 16px 18px 68px; }
}

/* ——— Q&A від CusRev (вкладка «Pytania i odpowiedzi») ———
   Плагін друкує ВЛАСНИЙ <h2> усередині блоку — поруч із заголовком секції теми
   виходив дубль; лишаємо заголовок теми. Кольори кнопок/іконок у плагіна свої
   (зелений #31856C) — приводимо до помаранчевого теми. */
.pp-sp-info-section--cr_qna .cr-qna-block > h2 { display: none; }
.pp-sp-info-section--cr_qna .cr-qna-block { margin-top: 0; }
/* CusRev Q&A action appearance is owned by buttons.css. */
.pp-sp-info-section--cr_qna .cr-qna-search svg,
.pp-sp-info-section--cr_qna .cr-qna-search-icon { color: var(--pp-orange); stroke: var(--pp-orange); }
.pp-sp-info-section--cr_qna input[type="text"],
.pp-sp-info-section--cr_qna input[type="search"] { border-radius: var(--pp-radius); }

/* Форма відгуку CusRev: власні зелені кнопки плагіна → помаранчеві теми. */
/* CusRev review-form action appearance is owned by buttons.css. */

/* CusRev empty state: the theme notice icon must have its own text gutter. */
.pp-sp-info-section--reviews #reviews.cr-reviews-ajax-reviews #comments.cr-reviews-ajax-comments > .woocommerce-noreviews {
	box-sizing: border-box;
	margin: 0;
	padding: 14px 18px 14px 56px;
	border-left-color: var(--sp-orange);
	background: var(--sp-soft);
	color: var(--sp-ink);
}
.pp-sp-info-section--reviews #reviews.cr-reviews-ajax-reviews #comments.cr-reviews-ajax-comments > .woocommerce-noreviews::before {
	top: 14px;
	left: 20px;
	background-color: var(--sp-orange);
}
.pp-sp-info-section--reviews #reviews.cr-reviews-ajax-reviews #comments.cr-reviews-ajax-comments > .woocommerce-Reviews-title {
	display: none !important;
}
.pp-sp-info-section--reviews #reviews.cr-reviews-ajax-reviews #comments.cr-reviews-ajax-comments .cr-ajax-reviews-add-review {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 18px;
	font-size: var(--sp-text-sm);
	line-height: 1.2;
}

/*
 * Product hero document order is intentionally mobile-first:
 * product identity -> gallery -> project method -> configurator.
 * Desktop keeps the established visual composition through explicit grid areas;
 * phones use this natural DOM order without CSS order/flex-direction tricks.
 */
@media (min-width: 921px) {
	.pp-sp-page .vz-product-top > .pp-sp-methods {
		grid-column: 1 / -1;
		grid-row: 1;
	}
	.pp-sp-page .vz-product-top > .pp-sp-product-head {
		grid-column: 2;
		grid-row: 2;
	}
	.pp-sp-page .vz-product-top > .woocommerce-product-gallery {
		grid-column: 1;
		grid-row: 2 / span 2;
	}
	.pp-sp-page .vz-product-top > .summary.entry-summary {
		grid-column: 2;
		grid-row: 3;
	}
	.pp-sp-page .vz-product-top > .ast-on-card-button,
	.pp-sp-page .vz-product-top > .onsale {
		grid-column: 1;
		grid-row: 2;
	}
}

@media (max-width: 920px) {
	.pp-sp-page .vz-product-top > .ast-on-card-button,
	.pp-sp-page .vz-product-top > .onsale {
		grid-column: 1;
		grid-row: 2;
	}
}

@media (max-width: 680px) {
	.pp-sp-page {
		padding-top: 12px;
	}
	.pp-sp-page .vz-product-top {
		gap: 12px;
	}
	.pp-sp-page .vz-product-top > .pp-sp-methods {
		margin: 0;
	}
	.pp-sp-speed-grid {
		grid-template-columns: 1fr;
	}
	.pp-sp-speed-option {
		min-height: 78px;
	}
	.pp-sp-quantity-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ========================================================================
   PRODUCT PAGE REGRESSION CONTRACT — 2026-08-18
   ========================================================================
   This final component layer only hardens layout against native WooCommerce /
   PrintConstructor / CusRev skins. Button palette/typography/states remain in
   buttons.css; business data and plugin callbacks remain untouched.
   ======================================================================== */

/* Order + quote row: normalize plugin wrappers and icon boxes. */
body.pp-body.pp-single-product .pp-sp-order-actions {
	align-items: stretch;
}
body.pp-body.pp-single-product .pp-sp-order-actions > .nbdq-add-a-quote {
	display: flex;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	float: none;
}
body.pp-body.pp-single-product .pp-sp-order-actions :is(
	button.single_add_to_cart_button,
	.nbdq-add-a-quote-button.button
) {
	min-width: 0;
	height: 100%;
	margin: 0;
	float: none;
	white-space: normal;
}


/* Reviews: native Woo and CusRev AJAX lists share one resilient card grid. */
body.pp-body.pp-single-product .pp-sp-info-section--reviews :is(
	ol.commentlist,
	ol.cr-ajax-reviews-list
) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 14px;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
body.pp-body.pp-single-product .pp-sp-info-section--reviews :is(
	ol.commentlist,
	ol.cr-ajax-reviews-list
)::before,
body.pp-body.pp-single-product .pp-sp-info-section--reviews :is(
	ol.commentlist,
	ol.cr-ajax-reviews-list
)::after {
	content: none;
	display: none;
}
body.pp-body.pp-single-product .pp-sp-info-section--reviews :is(
	ol.commentlist,
	ol.cr-ajax-reviews-list
) > li {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
body.pp-body.pp-single-product .pp-sp-info-section--reviews :is(
	ol.commentlist,
	ol.cr-ajax-reviews-list
) .comment_container {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	min-width: 0;
	margin: 0;
	float: none;
	border: 1px solid var(--sp-line);
	border-radius: 14px;
	background: var(--sp-soft);
	box-shadow: none;
}
body.pp-body.pp-single-product .pp-sp-info-section--reviews :is(.comment-text, .cr-comment-text) {
	min-width: 0;
	margin: 0;
	float: none;
}
body.pp-body.pp-single-product .pp-sp-info-section--reviews .description {
	min-width: 0;
	overflow-wrap: anywhere;
}
body.pp-body.pp-single-product .pp-sp-info-section--reviews #review_form_wrapper {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	float: none;
}
@media (max-width: 680px) {
	body.pp-body.pp-single-product .pp-sp-info-section--reviews :is(
		ol.commentlist,
		ol.cr-ajax-reviews-list
	) { grid-template-columns: 1fr; }
}


/* Integration-strength resets for Woo attribute stripes and CusRev's ID-heavy AJAX skin. */
body.pp-body.pp-single-product .pp-sp-info-section .shop_attributes tr th,
body.pp-body.pp-single-product .pp-sp-info-section .shop_attributes tr td {
	border: 0;
	background: transparent !important;
}

body.pp-body.pp-single-product .pp-sp-info-section--reviews
#reviews.cr-reviews-ajax-reviews
#comments.cr-reviews-ajax-comments
ol.cr-ajax-reviews-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 14px;
	width: 100%;
	margin: 0;
	padding: 0;
}
body.pp-body.pp-single-product .pp-sp-info-section--reviews
#reviews.cr-reviews-ajax-reviews
#comments.cr-reviews-ajax-comments
ol.cr-ajax-reviews-list > li {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
body.pp-body.pp-single-product .pp-sp-info-section--reviews
#reviews.cr-reviews-ajax-reviews
#comments.cr-reviews-ajax-comments
ol.cr-ajax-reviews-list .comment_container {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	min-width: 0;
	margin: 0;
	float: none;
	border: 1px solid var(--sp-line);
	border-radius: 14px;
	background: var(--sp-soft);
	box-shadow: none;
}
body.pp-body.pp-single-product .pp-sp-info-section--reviews
#reviews.cr-reviews-ajax-reviews
#comments.cr-reviews-ajax-comments
ol.cr-ajax-reviews-list .cr-comment-text {
	min-width: 0;
	margin: 0;
	float: none;
}
@media (max-width: 680px) {
	body.pp-body.pp-single-product .pp-sp-info-section--reviews
	#reviews.cr-reviews-ajax-reviews
	#comments.cr-reviews-ajax-comments
	ol.cr-ajax-reviews-list { grid-template-columns: 1fr; }
}