/* =========================================================================
   PIUROPRINT shared commerce primitives
   =========================================================================
   This file is the ONLY shared presentation bridge between the child theme
   and native WooCommerce markup. Page composition stays in cart.css,
   checkout.css, my-account.css, order-received.css, catalog.css and
   single-product.css. PrintConstructor has its own printcart.css.
   ========================================================================= */

/* WooCommerce surfaces use the child-theme shell, never Astra presentation. */
body.pp-body:where(.woocommerce, .woocommerce-page, .single-product, .woocommerce-cart, .woocommerce-checkout, .woocommerce-account) {
	font-family: var(--pp-font);
	color: var(--pp-text);
	background: var(--pp-bg);
}

body.pp-body :where(.woocommerce, .woocommerce-page, .site-content) {
	font-family: var(--pp-font);
}

/* Astra CSS is disabled, while WooCommerce still renders Astra's PHP wrapper.
   Neutralise only the generated product/catalog shell here. Each page stylesheet
   owns its actual content width; this prevents a global 93%-wide #primary from
   being reset to margin:0 later and sticking to the left edge on mobile. */
body.pp-body:where(.single-product,.post-type-archive-product,.tax-product_cat) #primary.content-area.primary,
body.pp-body:where(.single-product,.post-type-archive-product,.tax-product_cat) #main.site-main {
	width: 100%;
	max-width: none;
	min-width: 0;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	background: transparent;
}

/* Native Woo action appearance is owned by buttons.css.
   This file keeps only non-button commerce primitives. */

/* Native password control. WooCommerce supplies the wrapper and button behavior. */
body.pp-body .woocommerce form .password-input {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
body.pp-body .woocommerce form .password-input input.input-text { padding-right: 44px; }
body.pp-body .woocommerce form .show-password-input {
	position: absolute;
	inset: 0 6px 0 auto;
	display: flex;
	width: 34px;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--pp-text-muted);
	cursor: pointer;
}
body.pp-body .woocommerce form .show-password-input::before {
	content: "";
	display: block;
	width: 19px;
	height: 19px;
	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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s4-6 10-6 10 6 10 6-4 6-10 6S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s4-6 10-6 10 6 10 6-4 6-10 6S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.pp-body .woocommerce form .show-password-input:hover,
body.pp-body .woocommerce form .show-password-input:focus-visible,
body.pp-body .woocommerce form .show-password-input.display-password {
	color: var(--pp-orange);
}

/* Programmatic Woo focus should not paint an arbitrary black browser outline. */
body.pp-body :where(.woocommerce-message, .woocommerce-info, .woocommerce-error)[tabindex="-1"]:focus {
	outline: 0;
}

/* Store notice is visually separate from transaction notices. */
body.pp-body .woocommerce-store-notice {
	margin: 0;
	padding: 10px 18px;
	border: 0;
	border-radius: 0;
	background: var(--pp-dark);
	color: #fff;
	font-size: var(--pp-fs-sm);
	text-align: center;
}

/* Payment-step trust badge must never cover totals/actions. */
body.pp-body:where(.woocommerce-cart, .woocommerce-checkout, .woocommerce-order-received) #cr_floatingtrustbadge {
	display: none;
}


/* -------------------------------------------------------------------------
   1. WOOCOMMERCE — нотиси
   Найчастіший «раптовий» блок: WC вставляє їх на будь-якій сторінці з
   кошиком/акаунтом/формою, незалежно від конкретного page-scoped stylesheet.
   ------------------------------------------------------------------------- */
body.pp-body :where(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews) {
	margin: 0 0 var(--pp-gap);
	padding: 14px 18px;
	border: 1px solid var(--pp-ui-line);
	border-left: 4px solid var(--pp-ui-muted);
	border-radius: var(--pp-control-radius);
	background: var(--pp-ui-soft);
	color: var(--pp-text);
	font-size: var(--pp-fs-md);
	line-height: 1.5;
	list-style: none;
}

body.pp-body :where(.woocommerce-message) { border-left-color: var(--pp-orange); background: var(--pp-ui-orange-soft); }
body.pp-body :where(.woocommerce-error)   { border-left-color: #dc2626; background: #fef2f2; }

/* Кнопка всередині нотиса («Zobacz koszyk») не має злипатись з текстом. */
body.pp-body :where(.woocommerce-message, .woocommerce-info, .woocommerce-error) :where(.button) {
	margin-left: 12px;
}


/* -------------------------------------------------------------------------
   2. WOOCOMMERCE — таблиці
   .shop_table = кошик, замовлення, адреси, деталі замовлення.
   ------------------------------------------------------------------------- */
body.pp-body :where(.shop_table) {
	width: 100%;
	border: 1px solid var(--pp-ui-line);
	border-radius: var(--pp-card-radius);
	border-collapse: separate;
	border-spacing: 0;
	background: var(--pp-ui-surface);
	font-size: var(--pp-fs-md);
}

body.pp-body :where(.shop_table th, .shop_table td) {
	padding: 14px 16px;
	border-bottom: 1px solid var(--pp-ui-line);
	text-align: left;
	vertical-align: middle;
}

body.pp-body :where(.shop_table th) {
	color: var(--pp-ui-muted);
	font-size: var(--pp-fs-xs);
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
}

body.pp-body :where(.shop_table tr:last-child td) { border-bottom: 0; }


/* -------------------------------------------------------------------------
   3. WOOCOMMERCE — форми
   .form-row використовується в checkout, акаунті, адресах, логіні.
   ------------------------------------------------------------------------- */
body.pp-body :where(.form-row) {
	display: block;
	margin: 0 0 16px;
}

body.pp-body :where(.form-row label) {
	display: block;
	margin-bottom: 6px;
	color: var(--pp-text);
	font-size: var(--pp-fs-sm);
	font-weight: 700;
}

body.pp-body :where(.form-row .required) { border: 0; color: var(--pp-orange); text-decoration: none; }
body.pp-body :where(.form-row .optional) { color: var(--pp-ui-muted); font-weight: 500; }

/* Поля WC успадковують контрол-примітив з theme.css; тут лише розтяг на ширину. */
body.pp-body :where(.form-row input.input-text, .form-row textarea, .form-row select) {
	width: 100%;
	min-height: var(--pp-control-height);
	padding: 0 14px;
}

body.pp-body :where(.form-row textarea) { min-height: calc(var(--pp-control-height) * 2); padding: 12px 14px; }


/* -------------------------------------------------------------------------
   4. WOOCOMMERCE — кількість, ціна, пагінація
   ------------------------------------------------------------------------- */
body.pp-body :where(.quantity input.qty) {
	width: 72px;
	min-height: var(--pp-control-height);
	padding: 0 8px;
	text-align: center;
	font-weight: 800;
}

body.pp-body :where(.price) { color: var(--pp-text); font-weight: 800; }
body.pp-body :where(.price del) { color: var(--pp-ui-muted); font-weight: 500; opacity: 1; }
body.pp-body :where(.price ins) { background: transparent; text-decoration: none; }

body.pp-body :where(.woocommerce-pagination ul.page-numbers) {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

body.pp-body :where(.woocommerce-pagination .page-numbers li) { border: 0; }

body.pp-body :where(.woocommerce-pagination a.page-numbers, .woocommerce-pagination span.page-numbers) {
	display: inline-flex;
	min-width: 40px;
	min-height: 40px;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	border: 1px solid var(--pp-ui-line);
	border-radius: var(--pp-control-radius);
	background: var(--pp-ui-surface);
	color: var(--pp-text);
	font-size: var(--pp-fs-md);
	font-weight: 700;
	transition: border-color var(--pp-ui-transition), background var(--pp-ui-transition);
}

body.pp-body :where(.woocommerce-pagination .page-numbers.current) {
	border-color: var(--pp-orange);
	background: var(--pp-ui-orange-soft);
	color: var(--pp-orange);
}


/* -------------------------------------------------------------------------
   5. WOOCOMMERCE — кошик
   cart.css діє лише на самій сторінці кошика. Але той самий кошик виринає
   через шорткод [woocommerce_cart] на довільній сторінці, на order-pay і в
   листах-підтвердженнях. Тут — вигляд, який не залежить від того, де він.
   ------------------------------------------------------------------------- */
body.pp-body :where(.cart_item .product-remove a) {
	display: inline-flex;
	width: 28px;
	height: 28px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--pp-ui-soft);
	color: var(--pp-ui-muted);
	font-size: var(--pp-fs-xl);
	line-height: 1;
	text-decoration: none;
	transition: background var(--pp-ui-transition), color var(--pp-ui-transition);
}

body.pp-body :where(.cart_item .product-remove a:hover) { background: #fef2f2; color: #dc2626; }

body.pp-body :where(.cart_item .product-thumbnail img) {
	width: 64px;
	height: auto;
	border-radius: var(--pp-control-radius);
}

/* Підсумок кошика — картка, а не гола таблиця. */
body.pp-body :where(.cart_totals) {
	padding: 20px;
	border: 1px solid var(--pp-ui-line);
	border-radius: var(--pp-card-radius);
	background: var(--pp-ui-surface);
}

body.pp-body :where(.cart_totals table) {
	width: 100%;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--pp-fs-md);
}

body.pp-body :where(.cart_totals th, .cart_totals td) {
	padding: 10px 0;
	border: 0;
	text-align: left;
	vertical-align: top;
}

/* Значення — у правій колонці за РОЛЛЮ (друга клітинка), не за номером у DOM. */
body.pp-body :where(.cart_totals td + td, .cart_totals th + td) { text-align: right; font-weight: 800; }
body.pp-body :where(.cart_totals .order-total td) { font-size: var(--pp-fs-2xl); }

/* Купон і кнопки дій. */
body.pp-body :where(.coupon input.input-text) {
	min-height: var(--pp-control-height);
	padding: 0 14px;
}

body.pp-body :where(.actions .button, .coupon .button) { min-height: var(--pp-control-height); }


/* -------------------------------------------------------------------------
   6. WOOCOMMERCE — checkout
   Ті самі міркування: форма замовлення живе не лише на /checkout/.
   ------------------------------------------------------------------------- */
body.pp-body :where(#customer_details, #order_review) { min-width: 0; }

body.pp-body :where(#order_review_heading) {
	margin: 0 0 14px;
	color: var(--pp-text);
	font-size: var(--pp-fs-4xl);
	font-weight: 800;
}

body.pp-body :where(.woocommerce-checkout-review-order-table) {
	width: 100%;
	border: 1px solid var(--pp-ui-line);
	border-radius: var(--pp-card-radius);
	border-collapse: separate;
	border-spacing: 0;
	background: var(--pp-ui-surface);
	font-size: var(--pp-fs-md);
}

body.pp-body :where(.woocommerce-checkout-review-order-table th,
                    .woocommerce-checkout-review-order-table td) {
	padding: 12px 16px;
	border-bottom: 1px solid var(--pp-ui-line);
	text-align: left;
}

body.pp-body :where(.woocommerce-checkout-review-order-table tfoot tr:last-child th,
                    .woocommerce-checkout-review-order-table tfoot tr:last-child td) { border-bottom: 0; }

/* Способи оплати. */
body.pp-body :where(.wc_payment_methods) { margin: 0 0 18px; padding: 0; list-style: none; }

body.pp-body :where(.wc_payment_method) { margin: 0 0 8px; }

body.pp-body :where(.wc_payment_method > label) {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	border: 1px solid var(--pp-ui-line);
	border-radius: var(--pp-control-radius);
	background: var(--pp-ui-surface);
	color: var(--pp-text);
	font-size: var(--pp-fs-md);
	font-weight: 700;
	cursor: pointer;
	transition: border-color var(--pp-ui-transition), background var(--pp-ui-transition);
}

body.pp-body :where(.wc_payment_method input:checked + label) {
	border-color: var(--pp-orange);
	background: var(--pp-ui-orange-soft);
}

body.pp-body :where(.payment_box) {
	margin: 8px 0 0;
	padding: 12px 16px;
	border-radius: var(--pp-control-radius);
	background: var(--pp-ui-soft);
	color: var(--pp-ui-muted);
	font-size: var(--pp-fs-sm);
}

/* #place_order appearance/size is owned by buttons.css. */

body.pp-body :where(.woocommerce-terms-and-conditions-wrapper) {
	margin: 14px 0;
	color: var(--pp-ui-muted);
	font-size: var(--pp-fs-sm);
}


/* -------------------------------------------------------------------------
   7. SELECT2 — єдиний реальний перетин з чужим CSS
   Аудит показав: плагінні стилі здебільшого namespace'нуті (.cr-*, .acf-*),
   і в конфлікт з нами не входять. Виняток — select2: його вантажать І ACF,
   І WooCommerce (країна/область у checkout), тож висота контрола залежить
   від того, чий CSS приїхав останнім. Прив'язуємо до нашого токена.
   ------------------------------------------------------------------------- */
body.pp-body :where(.select2-container .select2-selection--single) {
	height: var(--pp-control-height);
	border: 1px solid var(--pp-ui-line);
	border-radius: var(--pp-control-radius);
	background: var(--pp-ui-surface);
}

body.pp-body :where(.select2-container .select2-selection--single .select2-selection__rendered) {
	padding-left: 14px;
	color: var(--pp-text);
	font-size: var(--pp-fs-md);
	line-height: var(--pp-control-height);
}

body.pp-body :where(.select2-container .select2-selection--single .select2-selection__arrow) {
	height: var(--pp-control-height);
}


/* -------------------------------------------------------------------------
   8. SVG SAFETY NOTE

   Спокуса була: на 404 інлайнові <svg> без width/height розтяглись до
   1339×1339, тож напрошувалось «обмежити всі svg по висоті, щоб іконка
   завжди лишалась іконкою».

   Спробували — і рівно це зламало чуже. Заміряно на 6 сторінках:
   `max-width:100%` схлопнув зірки трастбейджа CusRev (.badge__star-*) з
   13px до **0px** — вони покладаються на розмір батька. Тобто запобіжник
   від поломки сам став поломкою того ж класу.

   Висновок у базовий шар: правило, що діє на ЕЛЕМЕНТ (svg, img, table)
   замість КОМПОНЕНТА (.woocommerce-message, .nbd-xlabel), неминуче
   зачіпає чужу розмітку, якої ми не бачили. Пишемо тільки по класах.

   Гігантські іконки на 404 полагоджено в корені — templates/gallery/artist.php
   викликав get_header() до set_404(), тому 404.css не встигав підключитись.
   ------------------------------------------------------------------------- */