/*
 Theme Name:   PPSBG Child
 Description:  Child theme of Twenty Twenty-Five for the new PPSBG WooCommerce site. Adds classic WooCommerce/taxonomy PHP templates (component_type, use_case, single-product) on top of the parent block theme, without modifying twentytwentyfive directly.
 Template:     twentytwentyfive
 Version:      1.0.0
 Text Domain:  ppsbg-child
*/

/*
 * Site-wide accent color for the single-product page (price, button,
 * active tab). Originally the theme's own near-black "Contrast" color,
 * reused because the site had no distinct brand accent in use anywhere
 * yet (docs/ppsbg-visual-polish-instructions.md §5). That's no longer
 * true — task-full-site-design-and-build.md STEP 4, 2026-07-14 — the
 * established navy+green identity (header/footer/product-tree Steps 1-3)
 * now applies here too. Every usage of this variable is confined to
 * `.single-product`-scoped selectors in this file (verified by grep before
 * changing it), so repointing it at the established green is safe and
 * doesn't leak outside this page.
 */
:root {
	--ppsbg-accent: var(--ppsbg-tree-green, #6dd47e);
}
html:has(body.single-product),
body.single-product {
	overflow-x: hidden;
	max-width: 100%;
	background: var(--ppsbg-tree-navy-deep, #0a1622);
}
.single-product .woocommerce-breadcrumb,
.single-product .summary.entry-summary > .product_title {
	overflow-wrap: break-word;
	word-break: break-word;
}
.single-product .woocommerce-breadcrumb {
	color: var(--ppsbg-tree-text-dim, #6d8aa0);
}
.single-product .woocommerce-breadcrumb a {
	color: var(--ppsbg-tree-text-muted, #a8c0d4);
}
.single-product .woocommerce-breadcrumb a:hover { color: var(--ppsbg-tree-text, #eef4f8); }

/* ==========================================================================
   1. Page container — cap width, two-column layout for the top section.
   ========================================================================== */
.single-product #primary.content-area {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
}
.single-product div.product {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	align-items: flex-start;
}
.single-product div.product > .images.woocommerce-product-gallery {
	flex: 1 1 320px;
	max-width: 360px;
	min-width: 0;
}
.single-product div.product > .summary.entry-summary {
	flex: 3 1 520px;
	min-width: 0;
}
@media (max-width: 768px) {
	.single-product div.product > .images.woocommerce-product-gallery,
	.single-product div.product > .summary.entry-summary {
		flex-basis: 100%;
		max-width: 100%;
	}
}

/* ==========================================================================
   2. Image gallery — "card" styling + thumbnail rail.
   ========================================================================== */
.single-product div.images.woocommerce-product-gallery {
	background: var(--ppsbg-tree-navy, #0d1c2c);
	border: 1px solid var(--ppsbg-tree-border, rgba(255, 255, 255, 0.08));
	border-radius: 6px;
	box-shadow: none;
	padding: 10px;
	box-sizing: border-box;
}
/*
 * !important is deliberate here: WooCommerce's gallery JS (flexslider)
 * sets inline `width` (in px, or % on the wrapper) directly on the image
 * and its containing slide element at init time, computed from the
 * container's rendered size at that moment. Plain `max-width: 100%`
 * without !important loses to that inline style (inline always wins over
 * an external stylesheet unless !important is used), so the image renders
 * at a size that was correct once but doesn't stay in sync with the
 * container across browser zoom/resize afterwards. Forcing width:100% by
 * !important ties it to the parent's current computed width on every
 * repaint, independent of flexslider's one-time inline calculation.
 */
.single-product div.images.woocommerce-product-gallery img {
	max-width: 100% !important;
	width: 100% !important;
	height: auto !important;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs {
	margin: 16px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs li {
	max-width: 64px;
	list-style: none;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs li img {
	max-width: 100%;
	height: auto;
	display: block;
	border: 2px solid transparent;
	border-radius: 4px;
	opacity: 0.6;
	cursor: pointer;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.single-product .woocommerce-product-gallery .flex-control-thumbs li img:hover {
	opacity: 1;
	border-color: var(--ppsbg-accent);
}

/* ==========================================================================
   3. Info column — title, taxonomy chips, price, excerpt, add-to-cart, meta.
   ========================================================================== */
.single-product .summary.entry-summary > .product_title {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 0.5em;
	color: var(--ppsbg-tree-text, #eef4f8);
}
@media (max-width: 768px) {
	.single-product .summary.entry-summary > .product_title {
		font-size: 1.5rem;
	}
}

/* 3.2 Taxonomy terms — small muted chips, not a plain text line. */
.ppsbg-product-taxonomy-terms {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 0.75em;
	margin: 0 0 1.25em;
	font-size: 0.85em;
}
.ppsbg-product-taxonomy-terms .ppsbg-term-group {
	margin-right: 0;
	background: rgba(255, 255, 255, 0.06);
	color: var(--ppsbg-tree-text-muted, #a8c0d4);
	padding: 0.3em 0.85em;
	border-radius: 999px;
}
.ppsbg-product-taxonomy-terms .ppsbg-term-group strong {
	font-weight: 600;
	color: var(--ppsbg-tree-text, #eef4f8);
}

/* 3.3 Price — the most important visual element on the page. */
.single-product .summary.entry-summary > p.price {
	margin: 0 0 1.25em;
	padding: 0.75em 0;
	border-top: 1px solid var(--ppsbg-tree-border, rgba(255, 255, 255, 0.08));
	border-bottom: 1px solid var(--ppsbg-tree-border, rgba(255, 255, 255, 0.08));
	font-size: 2.25rem;
	font-weight: 700;
	color: var(--ppsbg-accent);
}
.single-product .summary.entry-summary > p.price .woocommerce-Price-amount.woo-bg--currency {
	font-size: 1rem;
	font-weight: 400;
	color: var(--ppsbg-tree-text-muted, #a8c0d4);
	margin-left: 0.35em;
}
@media (max-width: 768px) {
	.single-product .summary.entry-summary > p.price {
		font-size: 1.65rem;
	}
}
.single-product .summary.entry-summary > p.price .ppsbg-per-unit-suffix {
	font-size: 1rem;
	font-weight: 400;
	color: var(--ppsbg-tree-text-muted, #a8c0d4);
	margin-right: 0.35em;
}

/* 3.3.1 Variable-product variation price (selected-option price shown after
   choosing e.g. length/size) — WooCommerce ships this unstyled (near-black
   text), invisible against this theme's dark background. First surfaced
   2026-07-18 with the first variable products (aluminium profiles). */
.single-product .woocommerce-variation-price {
	margin: 0 0 1em;
	padding: 0.6em 0;
	border-top: 1px solid var(--ppsbg-tree-border, rgba(255, 255, 255, 0.08));
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--ppsbg-accent);
}
.single-product .woocommerce-variation-price .woocommerce-Price-amount.woo-bg--currency {
	font-size: 0.85rem;
	font-weight: 400;
	color: var(--ppsbg-tree-text-dim, #6d8aa0);
	margin-left: 0.35em;
}
.single-product .woocommerce-variation-availability,
.single-product .woocommerce-variation-description {
	color: var(--ppsbg-tree-text-muted, #a8c0d4);
	font-size: 0.9rem;
}
.single-product .woocommerce-variation-availability p.stock {
	color: var(--ppsbg-tree-text-muted, #a8c0d4);
}

/* 3.3.2 Variable-product option selector (e.g. "Дължина" dropdown) — same
   gap as the variation-price block: WooCommerce ships this with default
   browser/light-theme styling (dark text with no explicit background),
   unreadable against this theme's dark page background. */
.single-product table.variations,
.single-product table.variations tbody,
.single-product table.variations tr {
	display: block;
	width: 100%;
}
.single-product table.variations tr {
	display: block;
	margin-bottom: 1em;
}
.single-product table.variations th.label {
	display: block;
	padding: 0 0 8px;
}
.single-product table.variations th.label label {
	color: var(--ppsbg-tree-text, #eef4f8);
	font-weight: 600;
	font-size: 0.95rem;
	white-space: nowrap;
}
.single-product table.variations td.value {
	display: block;
	padding: 0;
}
.single-product table.variations a.reset_variations {
	display: inline-block;
	margin-top: 6px;
}
.single-product table.variations select {
	width: 100%;
	max-width: 320px;
	background: var(--ppsbg-tree-navy, #0d1c2c);
	border: 1px solid var(--ppsbg-tree-border, rgba(255, 255, 255, 0.08));
	color: var(--ppsbg-tree-text, #eef4f8);
	border-radius: 6px;
	padding: 12px 10px;
	font-size: 1rem;
}
.single-product table.variations select:focus {
	outline: none;
	border-color: var(--ppsbg-accent);
}
.single-product table.variations select option {
	background: var(--ppsbg-tree-navy, #0d1c2c);
	color: var(--ppsbg-tree-text, #eef4f8);
}
.single-product a.reset_variations {
	color: var(--ppsbg-tree-text-dim, #6d8aa0);
	font-size: 0.85rem;
}

/* 3.4 Short description. */
.single-product .summary.entry-summary .woocommerce-product-details__short-description {
	max-width: 60ch;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ppsbg-tree-text-muted, #a8c0d4);
	margin-bottom: 1.5em;
}

/* 3.5 Quantity + add-to-cart button — must be the visually dominant CTA. */
.single-product .summary.entry-summary form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 1.5em;
}
.single-product .summary.entry-summary form.cart .quantity {
	margin: 0;
}
.single-product .summary.entry-summary .quantity input.qty {
	background: var(--ppsbg-tree-navy, #0d1c2c);
	border: 1px solid var(--ppsbg-tree-border, rgba(255, 255, 255, 0.08));
	color: var(--ppsbg-tree-text, #eef4f8);
	border-radius: 6px;
	padding: 14px 10px;
}
.single-product .summary.entry-summary .single_add_to_cart_button {
	background: var(--ppsbg-accent);
	color: #052a12;
	border: none;
	border-radius: 6px;
	padding: 16px 36px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.15s ease;
}
.single-product .summary.entry-summary .single_add_to_cart_button:hover,
.single-product .summary.entry-summary .single_add_to_cart_button:focus {
	opacity: 0.9;
	background: var(--ppsbg-accent);
	color: #052a12;
}
@media (max-width: 768px) {
	.single-product .summary.entry-summary form.cart {
		flex-direction: column;
		align-items: stretch;
	}
	.single-product .summary.entry-summary .single_add_to_cart_button {
		width: 100%;
	}
}

/* 3.6 Meta info (SKU, category, brand) — small, muted, one item per line. */
.single-product .summary.entry-summary .product_meta {
	font-size: 0.8em;
	color: var(--ppsbg-tree-text-dim, #6d8aa0);
	border-top: 1px solid var(--ppsbg-tree-border, rgba(255, 255, 255, 0.08));
	padding-top: 0.75em;
}
.single-product .summary.entry-summary .product_meta a {
	color: var(--ppsbg-tree-text-muted, #a8c0d4);
}
.single-product .summary.entry-summary .product_meta > span {
	display: block;
	margin-bottom: 0.3em;
}
/* We don't use product_cat (only component_type/use_case), so the
   default "Категория: Uncategorized" line is noise, not information.
   WooCommerce's brand integration unfortunately reuses the exact same
   "posted_in" class for the "Марка" line (confirmed in the live HTML —
   both spans are class="posted_in", only distinguishable by which
   taxonomy their link points to), so a plain class selector would hide
   both. Matching on the category rewrite base in the link href instead
   targets only the actual category line. */
.single-product .summary.entry-summary .product_meta > .posted_in:has(a[href*="/product-category/"]) {
	display: none;
}

/* ==========================================================================
   4. Tab section — "Информация" (specs, moved from the summary column),
      "Описание", "Отзиви".
   ========================================================================== */
.single-product .woocommerce-tabs {
	margin-top: 3em;
	clear: both;
}
.single-product .woocommerce-tabs ul.tabs li {
	background: transparent;
}
.single-product .woocommerce-tabs ul.tabs li a {
	padding: 12px 20px;
	font-size: 1rem;
	color: var(--ppsbg-tree-text-muted, #a8c0d4);
}
.single-product .woocommerce-tabs ul.tabs li.active a {
	color: var(--ppsbg-tree-text, #eef4f8);
}
.single-product .woocommerce-tabs ul.tabs li.active {
	border-bottom-color: var(--ppsbg-accent);
}
/*
 * CLS fix (task-fix-cls-regression-product-page, 2026-07-27): WooCommerce's
 * tabs template renders all 3 panels (Описание/Тех. информация/Отзиви) in
 * the raw server HTML with no inline style and no default-hide CSS
 * anywhere in this theme — confirmed by reading the live response body,
 * not guessed. `assets/js/frontend/single-product.js` only hides the
 * non-active ones AFTER it runs on DOMContentLoaded, so every page load
 * briefly paints all 3 panels stacked (padding + spec table + description
 * text = real height) before JS collapses it to 1 — a measured CLS 0.353
 * on this exact page (PerformanceObserver, not estimated). Root cause is
 * structural (missing default CSS state), so the fix is too: hide every
 * panel by default and show only the description one — WooCommerce's own
 * always-first, always-initially-active tab — so the correct final layout
 * paints immediately regardless of script/network timing. WooCommerce's
 * own tabs.js still adds/removes the emphasizing classes on click; it
 * uses direct inline `style.display` when switching tabs, which overrides
 * this default without conflict.
 */
.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
	display: none;
	padding: 20px 4px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ppsbg-tree-text-muted, #a8c0d4);
}
.single-product .woocommerce-tabs .woocommerce-Tabs-panel--description {
	display: block;
}
/* WooCommerce's own description.php template renders a plain <h2>
   ("Описание") that otherwise inherits the theme's default heading
   scale (2rem+) — far too dominant for what is meant to be secondary,
   tab-panel content sitting below the price/CTA. */
.single-product .woocommerce-tabs .woocommerce-Tabs-panel h2,
.single-product .woocommerce-tabs .woocommerce-Tabs-panel h3 {
	font-size: 1.15rem;
	margin: 0 0 0.6em;
	color: var(--ppsbg-tree-text, #eef4f8);
}

.ppsbg-product-specs-wrapper {
	margin: 0;
}
.ppsbg-product-specs {
	border-collapse: collapse;
	width: 100%;
	max-width: 640px;
	font-size: 15px;
	color: var(--ppsbg-tree-text-muted, #a8c0d4);
}
.ppsbg-product-specs th,
.ppsbg-product-specs td {
	border: 1px solid var(--ppsbg-tree-border, rgba(255, 255, 255, 0.08));
	padding: 11px 12px;
	text-align: left;
	line-height: 1.45;
}
.ppsbg-product-specs th {
	font-weight: 600;
	width: 40%;
	color: var(--ppsbg-tree-text, #eef4f8);
}
.ppsbg-product-specs tbody tr:nth-child(even) th,
.ppsbg-product-specs tbody tr:nth-child(even) td {
	background: rgba(255, 255, 255, 0.03);
}

.ppsbg-compatible-components,
.ppsbg-use-case-section {
	margin-top: 2em;
}
/*
 * task-step6-audit-findings.md 6.1, 2026-07-15: this heading
 * (taxonomy-use_case.php's per-component_type section title, e.g. "МРРТ
 * контролери") had no explicit color anywhere — it was silently inheriting
 * the parent theme's default dark heading color, unreadable once Step 3
 * made the archive background dark. Same invisible-text-on-dark bug class
 * already hit for nav text and WooCommerce's account/cart icons.
 */
.ppsbg-use-case-section__title {
	color: var(--ppsbg-tree-text, #eef4f8);
}
.ppsbg-compatible-components h2 {
	color: var(--ppsbg-tree-text, #eef4f8);
	font-size: 1.4rem;
	margin-bottom: 0.75em;
}
/*
 * Reuses the exact dark product-card treatment from the archive pages
 * (Step 3, .ppsbg-product-tree-page ul.products li.product) — same
 * content-product.php template, same cards, just a different container
 * on this page. Duplicated rather than adding a compound selector to the
 * Step 3 rules: keeps this page's changes self-contained and doesn't risk
 * the already-approved/live Step 3 CSS.
 */
.single-product .ppsbg-compatible-components ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.single-product .ppsbg-compatible-components ul.products li.product {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	background: #101f30;
	border: 1px solid var(--ppsbg-tree-border, rgba(255, 255, 255, 0.08));
	border-radius: 14px;
	overflow: hidden;
	padding: 0;
	font-family: var(--ppsbg-tree-font);
}
.single-product .ppsbg-compatible-components ul.products li.product a.woocommerce-loop-product__link {
	display: block;
	text-decoration: none;
}
.single-product .ppsbg-compatible-components ul.products li.product img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}
.single-product .ppsbg-compatible-components ul.products li.product .woocommerce-loop-product__title {
	font-size: 0.98rem;
	color: var(--ppsbg-tree-text, #eef4f8);
	font-weight: 700;
	line-height: 1.35;
	margin: 6px 0 0;
	padding: 0 16px;
}
.single-product .ppsbg-compatible-components ul.products li.product .price {
	display: block;
	padding: 8px 16px 16px;
	color: var(--ppsbg-tree-text-muted, #a8c0d4);
	font-size: 0.92rem;
}
.single-product .ppsbg-compatible-components ul.products li.product .price ins {
	color: var(--ppsbg-tree-text, #eef4f8);
	text-decoration: none;
}
.single-product .ppsbg-compatible-components ul.products li.product .price del {
	color: var(--ppsbg-tree-text-dim, #6d8aa0);
	opacity: 0.7;
}
.single-product .ppsbg-compatible-components ul.products li.product .ppsbg-price-on-request {
	margin: 0 16px 16px;
}
.single-product .ppsbg-compatible-components ul.products li.product .ppsbg-price-on-request-label {
	color: var(--ppsbg-tree-text-muted, #a8c0d4);
}
.single-product .ppsbg-compatible-components ul.products li.product a.button {
	display: block;
	margin: 0 16px 16px;
	text-align: center;
	background: var(--ppsbg-tree-green-solid, #5caa33);
	color: #052a12;
	font-weight: 700;
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 0.85rem;
	text-decoration: none;
}
.single-product .ppsbg-compatible-components ul.products li.product a.button:hover {
	opacity: 0.9;
}
.single-product .ppsbg-compatible-components .ppsbg-compat-badge {
	margin: 0 16px 12px;
	color: #8fc4f5;
	background: rgba(74, 144, 217, 0.14);
	border-color: rgba(74, 144, 217, 0.35);
}
@media (max-width: 600px) {
	.single-product .ppsbg-compatible-components ul.products {
		grid-template-columns: 1fr;
	}
}

/* "Заяви монтаж" CTA (water-heating бранш) — вторичен/outline стил, за да
   не се конкурира с основния add-to-cart бутон. */
.single-product .summary.entry-summary .ppsbg-montaj-cta {
	margin: 0 0 1.25em;
}
.single-product .summary.entry-summary .ppsbg-montaj-cta a {
	display: inline-block;
	padding: 11px 24px;
	border: 1.5px solid var(--ppsbg-accent);
	border-radius: 6px;
	color: var(--ppsbg-accent);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}
.single-product .summary.entry-summary .ppsbg-montaj-cta a:hover,
.single-product .summary.entry-summary .ppsbg-montaj-cta a:focus {
	background: var(--ppsbg-accent);
	color: #052a12;
}

/* ==========================================================================
   5. Product Tree — drill-down sidebar, FAQ, compat badge, price-on-request.
   (task-product-tree-implementation.md, 2026-07-13)

   New dark navy+green elements only — deliberately NOT re-theming the
   existing light product-grid-card/single-product CSS above, which is
   mature and out of this task's scope (see class-ppsbg-product-tree.php's
   header comment for the full reasoning). System font stack (not the
   mockup's Noto Sans) applied explicitly on every new element here, same
   established reasoning as the rest of the project.
   ========================================================================== */
:root {
	--ppsbg-tree-navy: #0d1c2c;
	--ppsbg-tree-navy-deep: #0a1622;
	--ppsbg-tree-green: #6dd47e;
	--ppsbg-tree-green-solid: #5caa33;
	--ppsbg-tree-blue: #4a90d9;
	--ppsbg-tree-text: #eef4f8;
	--ppsbg-tree-text-muted: #a8c0d4;
	--ppsbg-tree-text-dim: #6d8aa0;
	--ppsbg-tree-border: rgba(255, 255, 255, 0.08);
	--ppsbg-tree-font: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

.ppsbg-product-tree-page {
	display: flex;
	align-items: flex-start;
	gap: 0;
	max-width: 1400px;
	margin: 0 auto;
}
.ppsbg-product-tree-page .ppsbg-tree-main {
	flex: 1;
	min-width: 0;
	padding: 0 24px 40px 32px;
}
/*
 * The section headings this task's sidebar scrolls to
 * (.ppsbg-use-case-section__title) predate this task and weren't
 * previously scoped by any font-family rule, so they were silently
 * inheriting the parent theme's global Manrope — confirmed via
 * getComputedStyle after deploy, same class of bug the Homepage Hero
 * session already hit once. Fixed at the .ppsbg-tree-main root (same
 * technique as #ppsbgHome there) so it also covers anything else in this
 * content area lacking its own font-family, not just this one heading.
 */
.ppsbg-product-tree-page .ppsbg-tree-main,
.ppsbg-product-tree-page .ppsbg-tree-main * {
	font-family: var(--ppsbg-tree-font);
}

/* -- sidebar (desktop) -- */
.ppsbg-tree-sidebar {
	width: 260px;
	flex-shrink: 0;
	position: sticky;
	top: 0;
	align-self: flex-start;
	max-height: 100vh;
	overflow-y: auto;
	background: var(--ppsbg-tree-navy);
	border-right: 1px solid var(--ppsbg-tree-border);
	padding: 28px 10px 40px 20px;
	font-family: var(--ppsbg-tree-font);
	box-sizing: border-box;
}
.ppsbg-tree-sidebar * {
	font-family: inherit;
	box-sizing: border-box;
}

.ppsbg-tree-branch-label {
	font-size: 13px;
	font-weight: 800;
	color: var(--ppsbg-tree-text);
	padding: 0 10px 12px;
}
.ppsbg-tree-branch-label--muted {
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--ppsbg-tree-text-dim);
}
.ppsbg-tree-back {
	display: block;
	color: var(--ppsbg-tree-text-muted);
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	padding: 6px 10px 14px;
}
.ppsbg-tree-back:hover { color: var(--ppsbg-tree-text); }

.ppsbg-tree-list { display: flex; flex-direction: column; gap: 1px; }
.ppsbg-tree-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 11px 10px;
	border-radius: 8px;
	border-left: 3px solid transparent;
	color: var(--ppsbg-tree-text-muted);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
}
.ppsbg-tree-item:hover {
	background: rgba(255, 255, 255, 0.04);
	color: var(--ppsbg-tree-text);
}
.ppsbg-tree-item.is-active {
	background: rgba(109, 212, 126, 0.1);
	border-left-color: var(--ppsbg-tree-green);
	color: var(--ppsbg-tree-text);
	font-weight: 700;
}
.ppsbg-tree-count {
	font-size: 11.5px;
	color: var(--ppsbg-tree-text-dim);
	background: rgba(255, 255, 255, 0.05);
	padding: 2px 8px;
	border-radius: 10px;
	flex-shrink: 0;
}
.ppsbg-tree-item.is-active .ppsbg-tree-count { color: #8fe0a0; }
.ppsbg-tree-empty {
	color: var(--ppsbg-tree-text-dim);
	font-size: 13px;
	padding: 0 10px;
}

/* -- mobile bar + drawer -- */
.ppsbg-tree-mobilebar { display: none; }

@media (max-width: 900px) {
	.ppsbg-tree-sidebar { display: none; }
	.ppsbg-product-tree-page { display: block; }
	.ppsbg-product-tree-page .ppsbg-tree-main { padding: 0 16px 32px; }

	.ppsbg-tree-mobilebar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 12px 16px;
		margin: 0 -16px 20px;
		background: var(--ppsbg-tree-navy);
		border-bottom: 1px solid var(--ppsbg-tree-border);
		font-family: var(--ppsbg-tree-font);
	}
	.ppsbg-tree-mobilebar-label {
		color: var(--ppsbg-tree-text-muted);
		font-size: 14px;
		font-weight: 600;
	}
	.ppsbg-tree-drawer-open {
		display: flex;
		align-items: center;
		gap: 8px;
		background: rgba(109, 212, 126, 0.12);
		border: 1px solid rgba(109, 212, 126, 0.3);
		color: #8fe0a0;
		font-weight: 700;
		font-size: 13px;
		padding: 9px 16px;
		border-radius: 20px;
		cursor: pointer;
		font-family: inherit;
	}
}

.ppsbg-tree-drawer-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	z-index: 100000;
}
.ppsbg-tree-drawer-backdrop.is-open { display: block; }
.ppsbg-tree-drawer {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 82%;
	max-width: 320px;
	background: var(--ppsbg-tree-navy);
	transform: translateX(-100%);
	transition: transform 0.28s ease;
	overflow-y: auto;
	font-family: var(--ppsbg-tree-font);
	box-sizing: border-box;
}
.ppsbg-tree-drawer * { font-family: inherit; box-sizing: border-box; }
.ppsbg-tree-drawer-backdrop.is-open .ppsbg-tree-drawer { transform: translateX(0); }
.ppsbg-tree-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 16px 12px 20px;
	color: var(--ppsbg-tree-text);
	font-weight: 700;
	font-size: 15px;
	border-bottom: 1px solid var(--ppsbg-tree-border);
	margin-bottom: 10px;
}
.ppsbg-tree-drawer-close {
	background: none;
	border: none;
	color: var(--ppsbg-tree-text-muted);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	padding: 0 6px;
}
.ppsbg-tree-drawer .ppsbg-tree-list,
.ppsbg-tree-drawer .ppsbg-tree-branch-label,
.ppsbg-tree-drawer .ppsbg-tree-back,
.ppsbg-tree-drawer .ppsbg-tree-empty {
	padding-left: 20px;
	padding-right: 10px;
}

/* -- compatible-components badge (product cards + single product) -- */
.ppsbg-compat-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 8px;
	font-family: var(--ppsbg-tree-font);
	font-size: 11.5px;
	font-weight: 600;
	color: #2f6fb0;
	background: rgba(74, 144, 217, 0.1);
	border: 1px solid rgba(74, 144, 217, 0.3);
	padding: 4px 10px;
	border-radius: 14px;
}
.single-product .summary.entry-summary .ppsbg-compat-badge {
	margin: -0.5em 0 1.25em;
}

/* -- price on request -- */
.ppsbg-price-on-request {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	font-family: var(--ppsbg-tree-font);
}
.ppsbg-price-on-request-label {
	font-weight: 700;
	color: #555;
}
.single-product .summary.entry-summary > p.price .ppsbg-price-on-request-label {
	color: var(--ppsbg-accent);
}
.ppsbg-price-on-request-cta {
	font-size: 0.85em;
	font-weight: 600;
	color: #fff;
	background: var(--ppsbg-tree-green-solid);
	padding: 5px 14px;
	border-radius: 14px;
	text-decoration: none;
}
.ppsbg-price-on-request-cta:hover { opacity: 0.88; }
.ppsbg-price-on-request-note {
	font-family: var(--ppsbg-tree-font);
	background: #f7f7f7;
	border-radius: 8px;
	padding: 14px 16px;
	margin: 0 0 1.25em;
	font-size: 0.85rem;
	color: #555;
	max-width: 60ch;
}
.ppsbg-price-on-request-note strong {
	display: block;
	color: #333;
	margin-bottom: 4px;
	font-size: 0.9rem;
}
.ppsbg-price-on-request-note p { margin: 0; line-height: 1.55; }


/* -- FAQ (GEO/AI-search, real-question format) -- */
.ppsbg-tree-faq {
	margin-top: 3em;
	max-width: 780px;
	font-family: var(--ppsbg-tree-font);
}
.ppsbg-tree-faq * { font-family: inherit; }
.ppsbg-tree-faq h2 {
	font-size: 1.25rem;
	font-weight: 800;
	margin: 0 0 18px;
}
.ppsbg-tree-faq-list { display: flex; flex-direction: column; gap: 12px; }
.ppsbg-tree-faq-item {
	background: #fafafa;
	border: 1px solid #ececec;
	border-radius: 10px;
	padding: 16px 20px;
}
.ppsbg-tree-faq-item h3 {
	font-size: 0.98rem;
	font-weight: 700;
	margin: 0 0 8px;
	color: #222;
}
.ppsbg-tree-faq-item p {
	font-size: 0.9rem;
	line-height: 1.6;
	color: #555;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Dark product-card theme (task-full-site-design-and-build.md, STEP 3,
   2026-07-14) — supersedes this file's own earlier note above ("deliberately
   NOT re-theming the existing light product-grid-card... out of this task's
   scope") from the original Product Tree task; this new task explicitly asks
   for it. Reuses the CSS from the earlier dark shop-redesign attempt
   (commit 7d50f21) almost verbatim — that specific card CSS, including its
   documented fix for WooCommerce's `ul.products li.product{float:left;
   width:22.05%}` cascade fight, was never faulted when the whole
   header+shop branch got reverted (479c2cc); the revert was about the
   sidebar restructuring and the "vertical stacking" concerns raised at the
   time, not this card CSS specifically. NOT reused: the component_type
   sidebar restructuring or the `.ppsbg-card-category-label` hook from that
   same commit — this task's own "extra scope" says the Shop page's
   structure is already finished, don't re-touch it; only the card
   *visuals* are this step's job, on top of the existing (use_case-based)
   sidebar/page structure, unchanged.

   Extends past just the card boxes to the page background/heading/
   breadcrumb/FAQ too — leaving those light while sidebar+cards go dark
   would just recreate the exact light/dark seam Step 1 fixed for the
   header, on the very next page a visitor lands on after clicking a nav
   link. Scoped to `.ppsbg-product-tree-page` only, so this doesn't affect
   single-product (Step 4) or anywhere else `content-product.php` renders.
   -------------------------------------------------------------------------- */
/*
 * Background also set on the flex container itself, not just .ppsbg-tree-main:
 * the sidebar is shorter than the product grid (sticky, height-bound by its
 * own content), so the container is as tall as the taller child (main) and
 * the shorter sidebar leaves a gap below it. Pre-existing (this flex
 * structure predates Step 3) but only became visible now that the content
 * on both sides is dark — before, the gap silently blended into the
 * page's previously-light background.
 */
.ppsbg-product-tree-page,
.ppsbg-product-tree-page .ppsbg-tree-main {
	background: var(--ppsbg-tree-navy-deep);
}
.ppsbg-archive-header .page-title,
.ppsbg-archive-header .term-description {
	color: var(--ppsbg-tree-text);
}
.ppsbg-product-tree-page .woocommerce-breadcrumb {
	color: var(--ppsbg-tree-text-dim);
	padding-top: 20px;
}
.ppsbg-product-tree-page .woocommerce-breadcrumb a {
	color: var(--ppsbg-tree-text-muted);
}
.ppsbg-product-tree-page .woocommerce-breadcrumb a:hover { color: var(--ppsbg-tree-text); }

.ppsbg-product-tree-page ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ppsbg-product-tree-page ul.products li.product {
	/*
	 * WooCommerce's own woocommerce-layout.css ships
	 * `.woocommerce ul.products li.product{float:left;width:22.05%;margin:...}`
	 * — same specificity class as this rule, so a plain override isn't
	 * reliably guaranteed to win on source order alone (same class of
	 * cascade fight as the header nav-text bug). With `display:grid` on
	 * the parent, `float` is ignored, but the leftover `width:22.05%`
	 * (calibrated for a full-width shop with no sidebar) still shrinks
	 * each card to a sliver inside its grid cell — confirmed via the
	 * earlier (pre-revert) live test, not guessed. !important resets.
	 */
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	background: #101f30;
	border: 1px solid var(--ppsbg-tree-border);
	border-radius: 14px;
	overflow: hidden;
	padding: 0;
	font-family: var(--ppsbg-tree-font);
}
.ppsbg-product-tree-page ul.products li.product a.woocommerce-loop-product__link {
	display: block;
	text-decoration: none;
}
.ppsbg-product-tree-page ul.products li.product img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}
.ppsbg-product-tree-page ul.products li.product .woocommerce-loop-product__title {
	font-size: 0.98rem;
	color: var(--ppsbg-tree-text);
	font-weight: 700;
	line-height: 1.35;
	margin: 6px 0 0;
	padding: 0 16px;
}
.ppsbg-product-tree-page ul.products li.product .price {
	display: block;
	padding: 8px 16px 16px;
	color: var(--ppsbg-tree-text-muted);
	font-size: 0.92rem;
}
.ppsbg-product-tree-page ul.products li.product .price ins {
	color: var(--ppsbg-tree-text);
	text-decoration: none;
}
.ppsbg-product-tree-page ul.products li.product .price del {
	color: var(--ppsbg-tree-text-dim);
	opacity: 0.7;
}
.ppsbg-product-tree-page ul.products li.product .ppsbg-price-on-request {
	margin: 0 16px 16px;
}
.ppsbg-product-tree-page ul.products li.product .ppsbg-price-on-request-label {
	color: var(--ppsbg-tree-text-muted);
}
.ppsbg-product-tree-page ul.products li.product a.button {
	display: block;
	margin: 0 16px 16px;
	text-align: center;
	background: var(--ppsbg-tree-green-solid);
	color: #052a12;
	font-weight: 700;
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 0.85rem;
	text-decoration: none;
}
.ppsbg-product-tree-page ul.products li.product a.button:hover {
	opacity: 0.9;
}
.ppsbg-product-tree-page .ppsbg-compat-badge {
	margin: 0 16px 12px;
	color: #8fc4f5;
	background: rgba(74, 144, 217, 0.14);
	border-color: rgba(74, 144, 217, 0.35);
}

.ppsbg-product-tree-page .woocommerce-pagination a,
.ppsbg-product-tree-page .woocommerce-pagination span.current {
	color: var(--ppsbg-tree-text-muted);
}
.ppsbg-product-tree-page .woocommerce-pagination a:hover { color: var(--ppsbg-tree-text); }

.ppsbg-product-tree-page .ppsbg-tree-faq-item {
	background: #101f30;
	border-color: var(--ppsbg-tree-border);
}
.ppsbg-product-tree-page .ppsbg-tree-faq-item h3 { color: var(--ppsbg-tree-text); }
.ppsbg-product-tree-page .ppsbg-tree-faq-item p { color: var(--ppsbg-tree-text-muted); }

/*
 * Found on real mobile render while verifying this step (not pre-existing —
 * this grid is new in this step): auto-fill with a 220px minmax doesn't
 * collapse to one column on narrow phones, same class of overflow already
 * fixed for the footer's link columns in Step 2. Forcing a single column
 * below 600px, same breakpoint used everywhere else in this theme.
 */
@media (max-width: 600px) {
	.ppsbg-product-tree-page ul.products {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   6. Checkout — dark navy+green theme for the WooCommerce Blocks checkout
   (task-checkout-implementation.md, 2026-07-13).

   WC Blocks checkout is React-rendered from Store API data (confirmed via
   the existing dual-currency fix's own doc comment, and independently by
   this task's own DOM inspection) — targets the real, stable Blocks CSS
   classes (.wc-block-checkout*, .wc-block-components-*), not a classic
   template. System font stack (not the mockup's Noto Sans), same
   established reasoning as every other page this project. Covers the
   visually dominant elements (page background, headings, inputs, payment
   options, order summary card, CTA button) — not an exhaustive re-skin of
   every WC Blocks sub-state, consistent with the Product Tree task's same
   scope decision (new/converted areas get the treatment, not a forced
   full-catalog reskin project).
   ========================================================================== */
:root {
	--ppsbg-co-navy: #0a1622;
	--ppsbg-co-navy-panel: #101f30;
	--ppsbg-co-navy-topbar: #0d1c2c;
	--ppsbg-co-green: #6dd47e;
	--ppsbg-co-green-solid: #3ea85a;
	--ppsbg-co-text: #eef4f8;
	--ppsbg-co-text-muted: #a8c0d4;
	--ppsbg-co-text-dim: #6d8aa0;
	--ppsbg-co-border: rgba(255,255,255,.1);
	--ppsbg-co-font: -apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}

body.woocommerce-checkout #primary.content-area,
body.woocommerce-checkout .wp-block-woocommerce-checkout {
	background-color: var(--ppsbg-co-navy);
	background-image:
		linear-gradient(rgba(94, 230, 184, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(94, 230, 184, 0.03) 1px, transparent 1px);
	background-size: 52px 52px;
	font-family: var(--ppsbg-co-font);
}
body.woocommerce-checkout #primary.content-area {
	padding: 28px 24px 60px;
	max-width: 1240px;
	margin: 0 auto;
	box-sizing: border-box;
}
body.woocommerce-checkout #primary.content-area,
body.woocommerce-checkout #primary.content-area * {
	font-family: inherit;
}

body.woocommerce-checkout h1.page-title,
body.woocommerce-checkout .wc-block-components-title,
body.woocommerce-checkout .wc-block-checkout__form h2,
body.woocommerce-checkout .wc-block-checkout__form legend {
	color: var(--ppsbg-co-text) !important;
	font-weight: 800;
}
/* Energy Twin extension (task, 2026-07-27): gradient treatment on the page
   title only. h1.page-title doesn't actually render in WC Blocks'
   distraction-free checkout (confirmed via live DOM query, zero h1
   elements present at all), so this is a harmless no-op today, kept for
   when/if a real page title returns to this template — matches the scope
   the pre-existing rule above already had. The order-summary sidebar
   title (".wc-block-components-checkout-order-summary__title-text") was
   also tried as the gradient headline, since it's the real visual
   "headline" on this page — reverted after a real-render screenshot
   showed it painting as a solid filled block instead of clipped gradient
   text (WooCommerce's own loading-shimmer style on that exact element
   wins the background-clip cascade). Left in its established plain color
   per this task's "add-only, don't rewrite, and don't ship broken" scope. */
body.woocommerce-checkout h1.page-title {
	font-family: var(--ppsbg-twin-font, inherit);
	background: linear-gradient(100deg, var(--ppsbg-twin-mint, #7cf0c0), var(--ppsbg-twin-mid, #45e0a0) 55%, var(--ppsbg-twin-dark, #16a34a)) !important;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
}

body.woocommerce-checkout .wc-block-components-text-input input,
body.woocommerce-checkout .wc-block-components-text-input textarea,
body.woocommerce-checkout .wc-block-components-combobox input,
body.woocommerce-checkout select {
	background: var(--ppsbg-co-navy-panel) !important;
	border-color: var(--ppsbg-co-border) !important;
	color: var(--ppsbg-co-text) !important;
	border-radius: 10px !important;
}
body.woocommerce-checkout .wc-block-components-text-input label {
	color: var(--ppsbg-co-text-muted) !important;
}
/*
 * task-step6-audit-findings.md 6.1, 2026-07-15: two more label variants
 * WC Blocks renders on this page that the rule above doesn't match —
 * confirmed via computed-style inspection on the live DOM (getComputedStyle
 * color was rgb(17,17,17) on both, not guessed): the country/region
 * searchable-select label uses a *different* internal class prefix
 * ("wc-blocks-components-select__label", not "wc-block-components-...");
 * the checkbox labels ("Use same address for billing", "Запомни данни за
 * бъдещи поръчки") render as plain unclassed <label> elements inside
 * .wc-block-components-checkbox, so they need their own selector too.
 */
body.woocommerce-checkout .wc-blocks-components-select__label,
body.woocommerce-checkout .wc-block-components-checkbox label {
	color: var(--ppsbg-co-text-muted) !important;
}
/*
 * Same pass, same bug, four more instances found by scanning every leaf
 * label/legend/span/p on the page for near-black computed color rather
 * than stopping at the two named examples — the guest-checkout notice, the
 * address-summary-card secondary text and its "edit" link, and the
 * "+ apartment, suite, etc." toggle.
 */
body.woocommerce-checkout .wc-block-checkout__guest-checkout-notice,
body.woocommerce-checkout .wc-block-components-address-card__address-section--secondary,
body.woocommerce-checkout .wc-block-components-address-form__address_2-toggle {
	color: var(--ppsbg-co-text-muted) !important;
}
body.woocommerce-checkout .wc-block-components-address-card__edit {
	color: #8fc4f5 !important;
}

body.woocommerce-checkout .wc-block-checkout__payment-method,
body.woocommerce-checkout .wc-block-checkout__shipping-option,
body.woocommerce-checkout .wc-block-components-radio-control__option {
	background: var(--ppsbg-co-navy-panel);
	border-color: var(--ppsbg-co-border) !important;
	border-radius: 10px;
	color: var(--ppsbg-co-text);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body.woocommerce-checkout .wc-block-checkout__payment-method:hover,
body.woocommerce-checkout .wc-block-checkout__shipping-option:hover,
body.woocommerce-checkout .wc-block-components-radio-control__option:hover {
	border-color: var(--ppsbg-twin-glow-border, rgba(94,230,184,.35)) !important;
	box-shadow: 0 0 20px var(--ppsbg-twin-glow-shadow, rgba(69,224,160,.25));
}
body.woocommerce-checkout .wc-block-components-radio-control__option-checked {
	border-color: rgba(109,212,126,.4) !important;
}
body.woocommerce-checkout .wc-block-components-radio-control-accordion-content,
body.woocommerce-checkout .wc-block-checkout__payment-method label,
body.woocommerce-checkout .wc-block-checkout__shipping-option label {
	color: var(--ppsbg-co-text);
}

body.woocommerce-checkout .wc-block-components-checkout-order-summary,
body.woocommerce-checkout .wc-block-components-sidebar {
	background: var(--ppsbg-co-navy-panel);
	border: 1px solid var(--ppsbg-co-border);
	border-radius: 16px;
	color: var(--ppsbg-co-text);
}
body.woocommerce-checkout .wc-block-components-totals-item__label,
body.woocommerce-checkout .wc-block-components-totals-item__description {
	color: var(--ppsbg-co-text-muted);
}
body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: #8fe0a0 !important;
	font-weight: 800;
}

body.woocommerce-checkout .wc-block-components-checkout-place-order-button {
	background: linear-gradient(135deg, var(--ppsbg-co-green), var(--ppsbg-co-green-solid)) !important;
	color: #052a12 !important;
	border: none !important;
	font-weight: 800 !important;
	border-radius: 12px !important;
	box-shadow: 0 0 24px rgba(109,212,126,.25);
}

body.woocommerce-checkout .wc-block-checkout__terms {
	color: var(--ppsbg-co-text-muted);
}
body.woocommerce-checkout .wc-block-checkout__terms a {
	color: #8fc4f5;
}

/*
 * order-received (thank-you) page — Energy Twin extension (task, 2026-07-28).
 * Real bug found live (not visible via getComputedStyle scan alone — this
 * one needed an actual completed test order to reach): this page renders a
 * completely different set of WooCommerce Blocks
 * (.wc-block-order-confirmation-*, not the .wc-block-checkout__* form
 * blocks styled above) that had ZERO color rules — near-black text on the
 * dark navy background, functionally unreadable, including the guest
 * email-verification gate's plain white input. The underlying data (order
 * totals, EUR/BGN dual pricing, the fixed-rate line) was always correct;
 * this was purely a missing-selector visibility bug, confirmed via a real
 * placed test order (COD, #1931 — trashed after verification).
 */
body.woocommerce-order-received .wc-block-order-confirmation-status h1 {
	font-family: var(--ppsbg-twin-font, inherit);
	background: linear-gradient(100deg, var(--ppsbg-twin-mint, #7cf0c0), var(--ppsbg-twin-mid, #45e0a0) 55%, var(--ppsbg-twin-dark, #16a34a));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
body.woocommerce-order-received .wc-block-order-confirmation-status p,
body.woocommerce-order-received .wc-block-order-confirmation-status-description p {
	color: var(--ppsbg-co-text-muted);
}
body.woocommerce-order-received .wc-block-order-confirmation-status-description a.button {
	display: inline-block;
	background: linear-gradient(135deg, var(--ppsbg-co-green), var(--ppsbg-co-green-solid));
	color: #052a12 !important;
	font-weight: 700;
	border-radius: 10px;
	padding: 8px 16px;
	text-decoration: none;
}
body.woocommerce-order-received .wc-block-order-confirmation-summary-list-item {
	color: var(--ppsbg-co-text-muted);
}
body.woocommerce-order-received .wc-block-order-confirmation-summary-list-item__key {
	color: var(--ppsbg-co-text);
	font-weight: 700;
}
body.woocommerce-order-received .wc-block-order-confirmation-summary-list-item__value {
	color: var(--ppsbg-co-text-muted);
}
body.woocommerce-order-received .wc-block-order-confirmation-totals-wrapper h2,
body.woocommerce-order-received .wc-block-order-confirmation-shipping-wrapper h2,
body.woocommerce-order-received .wc-block-order-confirmation-billing-wrapper h2 {
	color: var(--ppsbg-co-text);
	font-weight: 800;
}
body.woocommerce-order-received .wc-block-order-confirmation-totals__table {
	width: 100%;
	border-collapse: collapse;
	background: var(--ppsbg-co-navy-panel);
	border: 1px solid var(--ppsbg-co-border);
	border-radius: 12px;
	overflow: hidden;
	color: var(--ppsbg-co-text-muted);
}
body.woocommerce-order-received .wc-block-order-confirmation-totals__table th,
body.woocommerce-order-received .wc-block-order-confirmation-totals__table td {
	border-bottom: 1px solid var(--ppsbg-co-border);
	padding: 10px 14px;
}
body.woocommerce-order-received .wc-block-order-confirmation-totals__table thead th {
	color: var(--ppsbg-co-text);
	font-weight: 700;
}
body.woocommerce-order-received .wc-block-order-confirmation-totals__table tfoot th,
body.woocommerce-order-received .wc-block-order-confirmation-totals__table tfoot td {
	color: var(--ppsbg-co-text);
}
body.woocommerce-order-received .wc-block-order-confirmation-totals__table a {
	color: #8fc4f5;
}
body.woocommerce-order-received .wc-block-order-confirmation-shipping-address address,
body.woocommerce-order-received .wc-block-order-confirmation-billing-address address {
	color: var(--ppsbg-co-text-muted);
	font-style: normal;
	line-height: 1.6;
}
/* Guest email-verification gate — plain unstyled WP form (classic markup,
   not a Blocks component), same input/button treatment as the checkout
   form fields above. */
body.woocommerce-order-received .woocommerce-verify-email label {
	color: var(--ppsbg-co-text-muted);
}
body.woocommerce-order-received .woocommerce-verify-email input.input-text {
	background: var(--ppsbg-co-navy-panel);
	border: 1px solid var(--ppsbg-co-border);
	color: var(--ppsbg-co-text);
	border-radius: 10px;
	padding: 10px 14px;
}
body.woocommerce-order-received .woocommerce-verify-email .button {
	background: linear-gradient(135deg, var(--ppsbg-co-green), var(--ppsbg-co-green-solid));
	color: #052a12;
	font-weight: 800;
	border: none;
	border-radius: 10px;
	padding: 10px 18px;
	cursor: pointer;
}

/*
 * Checkout's own header bar (task-step6-audit-findings.md 6.4, 2026-07-15).
 * Confirmed via reports/2026-07-15-step6-3-6-4-diagnosis.md: this is
 * WooCommerce's own bundled "distraction-free checkout" template part
 * (page-checkout.html -> checkout-header, both plugin-bundled, not theme
 * markup) — a plain <header class="wp-block-group"> with just a
 * site-title block and a woocommerce/cart-link block, no logo icon or
 * nav. Confirmed decision: CSS-only recolor, keep it minimal (no template
 * override, no logo/nav added back) — the distraction-free behavior is
 * deliberate for conversion, only the color mismatch is the bug. Scoped to
 * body.woocommerce-checkout — checkout is the only page with a bare
 * <header> in this position, so this can't leak onto the real site header
 * elsewhere. --ppsbg-co-navy-topbar existed already (defined in this same
 * :root block above) but was never actually wired to anything — this is
 * what it was for.
 */
body.woocommerce-checkout header.wp-block-group {
	background: var(--ppsbg-co-navy-topbar);
}
body.woocommerce-checkout header.wp-block-group .wp-block-site-title a {
	color: var(--ppsbg-co-text) !important;
}
body.woocommerce-checkout header.wp-block-group .wc-block-cart-link {
	color: var(--ppsbg-co-text) !important;
}
body.woocommerce-checkout header.wp-block-group .wc-block-cart-link:hover {
	color: var(--ppsbg-co-green) !important;
}

/* -- compatible-components warning banner -- */
.ppsbg-checkout-compat-warning {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	background: rgba(217,119,40,.1);
	border: 1px solid rgba(217,119,40,.35);
	border-radius: 12px;
	padding: 16px 20px;
	margin: 0 0 20px;
	font-family: var(--ppsbg-co-font);
}
.ppsbg-checkout-compat-warning * {
	font-family: inherit;
	box-sizing: border-box;
}
.ppsbg-ccw-icon {
	color: #e0a458;
	font-size: 18px;
	flex-shrink: 0;
	line-height: 1.4;
}
.ppsbg-ccw-body p {
	color: #e8c9a0;
	font-size: 13.5px;
	line-height: 1.55;
	margin: 0 0 8px;
}
.ppsbg-ccw-body p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   7. Plain content pages — dark navy+green theme (task-step6-audit-findings.md
      implementation, 2026-07-15).

   За нас, Декларация за поверителност, Доставка/връщане/гаранция, Общи
   условия, Ремонт на инвертори и батерии — confirmed via the 6.3 diagnosis
   (reports/2026-07-15-step6-3-6-4-diagnosis.md) to all share
   body.page-template-default (plain WordPress Page post type, default
   twentytwentyfive block template, no per-page markup differences) — one
   shared rule for all five instead of five separate page fixes.
   Zapitvane is NOT covered here — it has its own local palette, fixed
   separately as a local variable override in page-zapitvane.php itself.
   ========================================================================== */
body.page-template-default {
	background-color: var(--ppsbg-tree-navy-deep, #0a1622);
	background-image:
		linear-gradient(rgba(94, 230, 184, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(94, 230, 184, 0.03) 1px, transparent 1px);
	background-size: 52px 52px;
}
body.page-template-default .wp-block-post-title {
	font-family: var(--ppsbg-twin-font, inherit);
	background: linear-gradient(100deg, var(--ppsbg-twin-mint, #7cf0c0), var(--ppsbg-twin-mid, #45e0a0) 55%, var(--ppsbg-twin-dark, #16a34a));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
body.page-template-default .entry-content {
	color: var(--ppsbg-tree-text-muted, #a8c0d4);
}
body.page-template-default .entry-content h1,
body.page-template-default .entry-content h2,
body.page-template-default .entry-content h3,
body.page-template-default .entry-content h4,
body.page-template-default .entry-content h5,
body.page-template-default .entry-content h6,
body.page-template-default .entry-content strong,
body.page-template-default .entry-content b {
	color: var(--ppsbg-tree-text, #eef4f8);
}
body.page-template-default .entry-content a {
	color: #8fc4f5;
}
body.page-template-default .entry-content a:hover {
	color: var(--ppsbg-tree-green, #6dd47e);
}
body.page-template-default .entry-content hr {
	border-color: var(--ppsbg-tree-border, rgba(255, 255, 255, 0.08));
}

/* ==========================================================================
   8. Mini-cart drawer — dark navy+green theme (task, 2026-07-15). Sitewide,
   not page-class-scoped: it renders via the header's woocommerce/mini-cart
   block (parts/header.html), reachable from any page. Only became visible
   to style at all after the header.php render-order fix (2026-07-15) made
   the drawer functional for the first time — see reports/2026-07-15-add-
   to-cart-root-cause-fix.md.

   `!important` is required on the content background specifically: WC's
   own markup sets it via an Interactivity-API-bound INLINE style
   (`data-wp-style--background-color`, resolving to `style="background-
   color: rgb(255,255,255)"` at render time and re-applied reactively on
   state changes) — inline styles beat any plain selector regardless of
   specificity, only `!important` in a stylesheet outranks them. Same root
   cause category as the mobile-nav-overlay fix above (a hardcoded/bound
   light-theme color winning over a plain override), just inline instead
   of a class this time.
   ========================================================================== */
.wc-block-components-drawer__screen-overlay {
	background: rgba(10, 22, 34, 0.7) !important;
}
.wc-block-components-drawer__content,
.wp-block-woocommerce-mini-cart-contents {
	background: var(--ppsbg-tree-navy-deep, #0a1622) !important;
	color: var(--ppsbg-tree-text-muted, #a8c0d4) !important;
}
.wc-block-mini-cart__title {
	color: var(--ppsbg-tree-text, #eef4f8);
}
.wc-block-components-drawer__close svg {
	fill: var(--ppsbg-tree-text, #eef4f8);
}
.wc-block-cart-items__header,
.wc-block-cart-items__header-product,
.wc-block-cart-items__header-total {
	color: var(--ppsbg-tree-text-dim, #6d8aa0);
	border-color: var(--ppsbg-tree-border, rgba(255, 255, 255, 0.08));
}
.wc-block-cart-items__row {
	border-color: var(--ppsbg-tree-border, rgba(255, 255, 255, 0.08)) !important;
}
.wc-block-components-product-name {
	color: var(--ppsbg-tree-text, #eef4f8);
}
.wc-block-components-product-metadata,
.wc-block-components-product-metadata__description {
	color: var(--ppsbg-tree-text-dim, #6d8aa0);
}
.wc-block-components-product-price,
.wc-block-formatted-money-amount,
.wc-block-components-formatted-money-amount {
	color: var(--ppsbg-tree-text, #eef4f8);
}
.wc-block-components-product-price__regular {
	color: var(--ppsbg-tree-text-dim, #6d8aa0);
}
.wc-block-components-quantity-selector {
	border-color: var(--ppsbg-tree-border, rgba(255, 255, 255, 0.08)) !important;
}
.wc-block-components-quantity-selector__input {
	background: var(--ppsbg-tree-navy, #0d1c2c) !important;
	color: var(--ppsbg-tree-text, #eef4f8) !important;
}
.wc-block-components-quantity-selector__button {
	color: var(--ppsbg-tree-text-muted, #a8c0d4) !important;
}
.wc-block-cart-item__remove-link {
	color: #e8927f !important;
}
.wc-block-mini-cart__footer {
	border-color: var(--ppsbg-tree-border, rgba(255, 255, 255, 0.08)) !important;
	background: var(--ppsbg-tree-navy-deep, #0a1622) !important;
	color: var(--ppsbg-tree-text-muted, #a8c0d4) !important;
}
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
	color: var(--ppsbg-tree-text, #eef4f8);
}
.wc-block-mini-cart__footer-subtotal .wc-block-formatted-money-amount {
	color: var(--ppsbg-tree-green, #6dd47e) !important;
}
.wc-block-mini-cart__footer-actions .wc-block-components-button {
	border-radius: 8px !important;
	font-weight: 700 !important;
}
.wc-block-mini-cart__footer-cart.is-style-outline {
	border-color: var(--ppsbg-tree-border, rgba(255, 255, 255, 0.08)) !important;
	color: var(--ppsbg-tree-text, #eef4f8) !important;
	background: transparent !important;
}
.wc-block-mini-cart__footer-checkout {
	background: var(--ppsbg-tree-green, #6dd47e) !important;
	color: #052a12 !important;
	border: none !important;
}
.wc-block-mini-cart__empty-cart-wrapper {
	color: var(--ppsbg-tree-text-muted, #a8c0d4);
}
.wc-block-mini-cart__shopping-button {
	background: var(--ppsbg-tree-green, #6dd47e) !important;
	color: #052a12 !important;
	border: none !important;
}

/*
 * CLS fix, part 2 (task-fix-cls-regression-product-page, 2026-07-27):
 * .woocommerce-tabs and .ppsbg-compatible-components still reported a real,
 * reproducible layout-shift (Lighthouse CLS 0.353, confirmed with
 * throttling OFF too — not a throttling artifact) even after fixing the
 * tabs default-visibility bug above. Root-caused via CDP: a
 * PerformanceObserver with node-identity tracking showed the SAME DOM node
 * (not a replacement), already `isConnected` and `display:block` at
 * measurement time, whose recorded rect jumps from (0,0,0,0) straight to
 * its final position — with zero corresponding DOM mutation anywhere in
 * the document (verified with an unfiltered subtree MutationObserver) and
 * no correlation to any network request (reproduced identically with all
 * wp-json/AJAX and all font requests blocked). Both elements sit well
 * below the fold (top >= 865px). This matches Chromium deferring layout
 * of below-the-fold content until it becomes relevant — a real perf
 * optimization, not a content bug — which still counts toward the CLS
 * score once that deferred layout finally resolves. `content-visibility:
 * auto` + `contain-intrinsic-size` is the standard, purpose-built fix for
 * this exact pattern: it reserves a placeholder box for layout purposes
 * immediately, so resolving the real (deferred) layout later doesn't move
 * anything around it. Sizes are rough (description-panel-only height for
 * tabs; a modest multi-row grid estimate for compatible-components) —
 * only used before the real layout is known, replaced by the actual
 * rendered size once content-visibility promotes the element.
 */
.single-product .woocommerce-tabs {
	content-visibility: auto;
	contain-intrinsic-size: auto 260px;
}
.single-product .ppsbg-compatible-components {
	content-visibility: auto;
	/*
	 * Measured real height for a typical product (8 compatible items,
	 * 4-column desktop grid): ~1025px. The original 520px guess was less
	 * than half that, so promoting from placeholder to real size still
	 * grew the page by ~500px — showing up as a large shift attributed to
	 * the #primary ancestor instead (confirmed via Lighthouse's
	 * layout-shifts audit, re-measured after the first content-visibility
	 * pass). A closer estimate keeps the promotion delta small regardless
	 * of the exact item count for a given product.
	 */
	contain-intrinsic-size: auto 950px;
}

/* ==========================================================================
   Energy Twin design extension — category archives + single product
   (task-energy-twin-category-product, 2026-07-27)

   Scope decisions:
   - ADDITIVE tokens only (--ppsbg-twin-*). The existing --ppsbg-tree- and
     --ppsbg-accent variables stay untouched — 800+ lines above depend on
     them across header/footer/sidebar/compatible-components/mini-cart, and
     repointing them would be a sitewide change far outside this task.
   - Visual continuity, not a literal re-skin: HUD-grid background + glow
     hover on cards + gradient CTA/price, same as HOME's actual language,
     but the existing card/grid/layout structure (.ppsbg-product-tree-page,
     WooCommerce's own markup) is kept as-is.
   - Onest/JetBrains Mono applied ONLY to short label-like elements (H1,
     eyebrow, price, CTA button) — exactly how the HOME hero itself scoped
     it (never on .ppsbg-twin-sub/.ppsbg-bento-card p body copy). Card
     titles/descriptions/body text stay on the system font stack. This
     mirrors the established pattern and keeps font-swap reflow limited to
     a handful of short elements per page, not every card title in a grid —
     the concrete CLS mitigation for this step's CWV requirement.
   - HUD-grid is a pure CSS background pattern (no image request, no JS) —
     zero added CWV cost by construction, same reasoning as the homepage's
     own HUD-grid layer.
   ========================================================================== */
:root {
	--ppsbg-twin-mint: #7cf0c0;
	--ppsbg-twin-mid: #45e0a0;
	--ppsbg-twin-dark: #16a34a;
	--ppsbg-twin-glow-border: rgba(94, 230, 184, 0.35);
	--ppsbg-twin-glow-shadow: rgba(69, 224, 160, 0.25);
	--ppsbg-twin-font: 'Onest', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--ppsbg-twin-mono: 'JetBrains Mono', monospace;
}

.ppsbg-twin-hud-bg {
	background-image:
		linear-gradient(rgba(94, 230, 184, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(94, 230, 184, 0.03) 1px, transparent 1px);
	background-size: 52px 52px;
}

/* Archive pages (catalog_ref + component_type + use_case share .ppsbg-product-tree-page),
   plus Search results and 404 (task, 2026-07-28 — reports/2026-07-27-
   energy-twin-coverage-audit.md's last two 🔴 items). */
body.tax-catalog_ref,
body.tax-component_type,
body.tax-use_case,
body.search-results,
body.error404 {
	background-color: var(--ppsbg-tree-navy-deep, #0a1622);
	background-image:
		linear-gradient(rgba(94, 230, 184, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(94, 230, 184, 0.03) 1px, transparent 1px);
	background-size: 52px 52px;
}
.ppsbg-archive-header .page-title.woocommerce-products-header__title {
	font-family: var(--ppsbg-twin-font);
	font-size: clamp(1.6rem, 3.4vw, 2.3rem);
	font-weight: 800;
	background: linear-gradient(100deg, var(--ppsbg-twin-mint), var(--ppsbg-twin-mid) 55%, var(--ppsbg-twin-dark));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Product cards — glow hover, gradient CTA, mono price. Extends (not
   replaces) the card rules defined earlier in this file. */
.ppsbg-product-tree-page ul.products li.product {
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.ppsbg-product-tree-page ul.products li.product:hover {
	border-color: var(--ppsbg-twin-glow-border);
	box-shadow: 0 0 28px var(--ppsbg-twin-glow-shadow);
	transform: translateY(-3px);
}
.ppsbg-product-tree-page ul.products li.product img {
	transition: transform 0.35s ease;
}
.ppsbg-product-tree-page ul.products li.product:hover img {
	transform: scale(1.04);
}
.ppsbg-product-tree-page ul.products li.product .price {
	font-family: var(--ppsbg-twin-mono);
	color: var(--ppsbg-twin-mint);
}
.ppsbg-product-tree-page ul.products li.product .price del {
	font-family: var(--ppsbg-twin-mono);
}
.ppsbg-product-tree-page ul.products li.product a.button {
	background: linear-gradient(120deg, var(--ppsbg-twin-mid), var(--ppsbg-twin-dark));
	font-family: var(--ppsbg-twin-mono);
}
.ppsbg-product-tree-page ul.products li.product a.button:hover {
	opacity: 1;
	filter: brightness(1.08);
}

/* Search results + 404 (task, 2026-07-28) — colors/hover only, no layout
   properties (the My Account/Cart task's display:grid override broke
   WooCommerce's own native product grid; not repeating that here). */
.ppsbg-search-section-title {
	font-family: var(--ppsbg-twin-font);
	color: var(--ppsbg-tree-text, #eef4f8);
	font-size: 1.1rem;
	font-weight: 800;
	margin: 28px 0 14px;
}
.ppsbg-search-pages {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.ppsbg-search-page-card {
	display: block;
	background: var(--ppsbg-tree-navy, #0d1c2c);
	border: 1px solid var(--ppsbg-tree-border, rgba(255,255,255,.08));
	border-radius: 12px;
	padding: 16px 20px;
	text-decoration: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.ppsbg-search-page-card:hover {
	border-color: var(--ppsbg-twin-glow-border);
	box-shadow: 0 0 28px var(--ppsbg-twin-glow-shadow);
	transform: translateY(-2px);
}
.ppsbg-search-page-card h3 {
	color: var(--ppsbg-tree-text, #eef4f8);
	font-size: 1rem;
	margin: 0 0 6px;
}
.ppsbg-search-page-card p {
	color: var(--ppsbg-tree-text-muted, #a8c0d4);
	font-size: 0.9rem;
	margin: 0;
}
.ppsbg-search-empty {
	padding: 20px 0;
	color: var(--ppsbg-tree-text-muted, #a8c0d4);
}
.ppsbg-search-empty-links {
	display: flex;
	gap: 20px;
	margin-top: 14px;
	flex-wrap: wrap;
}
.ppsbg-search-empty-links a {
	color: var(--ppsbg-twin-mint, #7cf0c0);
	font-weight: 700;
	text-decoration: none;
}
.ppsbg-search-empty-links a:hover {
	color: var(--ppsbg-twin-mid, #45e0a0);
}
body.search-results .pagination,
body.error404 .pagination {
	margin: 32px 0;
}

/* 404 page — dedicated, useful content instead of a bare "not found"
   (task, 2026-07-28), styled like the plain-content-page pattern above. */
.ppsbg-404-page {
	max-width: 720px;
	margin: 0 auto;
	padding: 60px 20px 80px;
	text-align: center;
	font-family: var(--ppsbg-tree-font);
}
.ppsbg-404-page .ppsbg-404-code {
	font-family: var(--ppsbg-twin-mono);
	font-size: 0.9rem;
	letter-spacing: 0.16em;
	color: var(--ppsbg-tree-text-dim, #6d8aa0);
	text-transform: uppercase;
	margin-bottom: 12px;
}
.ppsbg-404-page h1 {
	font-family: var(--ppsbg-twin-font);
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	font-weight: 800;
	margin: 0 0 16px;
	background: linear-gradient(100deg, var(--ppsbg-twin-mint), var(--ppsbg-twin-mid) 55%, var(--ppsbg-twin-dark));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.ppsbg-404-page p.ppsbg-404-lede {
	color: var(--ppsbg-tree-text-muted, #a8c0d4);
	font-size: 1rem;
	line-height: 1.6;
	margin: 0 0 36px;
}
.ppsbg-404-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}
.ppsbg-404-links a {
	background: var(--ppsbg-tree-navy, #0d1c2c);
	border: 1px solid var(--ppsbg-tree-border, rgba(255,255,255,.08));
	border-radius: 12px;
	padding: 14px 22px;
	color: var(--ppsbg-tree-text, #eef4f8);
	text-decoration: none;
	font-weight: 600;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.ppsbg-404-links a:hover {
	border-color: var(--ppsbg-twin-glow-border);
	box-shadow: 0 0 28px var(--ppsbg-twin-glow-shadow);
	transform: translateY(-2px);
}
.ppsbg-404-links a.ppsbg-404-primary {
	background: linear-gradient(120deg, var(--ppsbg-twin-mid), var(--ppsbg-twin-dark));
	color: #052a12;
	border: none;
}

/* Single product — HUD-grid page background, gradient price/CTA to match
   HOME's .ppsbg-twin-offer treatment, keeping the rest of the mature
   layout (Section 1-8 above) untouched. */
body.single-product {
	background-image:
		linear-gradient(rgba(94, 230, 184, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(94, 230, 184, 0.03) 1px, transparent 1px);
	background-size: 52px 52px;
}
.single-product .summary.entry-summary > .product_title {
	font-family: var(--ppsbg-twin-font);
}
.single-product .summary.entry-summary > p.price,
.single-product .woocommerce-variation-price {
	color: var(--ppsbg-twin-mint);
	font-family: var(--ppsbg-twin-mono);
}
.single-product .summary.entry-summary .single_add_to_cart_button {
	background: linear-gradient(120deg, var(--ppsbg-twin-mid), var(--ppsbg-twin-dark));
	box-shadow: 0 0 30px var(--ppsbg-twin-glow-shadow);
	font-family: var(--ppsbg-twin-mono);
	font-weight: 700;
	transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.single-product .summary.entry-summary .single_add_to_cart_button:hover,
.single-product .summary.entry-summary .single_add_to_cart_button:focus {
	background: linear-gradient(120deg, var(--ppsbg-twin-mid), var(--ppsbg-twin-dark));
	filter: brightness(1.08);
	box-shadow: 0 0 38px var(--ppsbg-twin-glow-shadow);
}
.single-product div.product > .images.woocommerce-product-gallery {
	border-radius: 16px;
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}
.single-product div.product > .images.woocommerce-product-gallery:hover {
	box-shadow: 0 0 34px var(--ppsbg-twin-glow-shadow);
}

/* ==========================================================================
   Energy Twin — My Account + Cart (task-myaccount-cart-energy-twin,
   2026-07-28)

   Page titles ("My account"/"Cart"/"Checkout") and the Cart page's empty-
   state copy ("Your cart is currently empty!"/"New in store"/"You may be
   interested in…") were literal English DB content (stored page title /
   editable block text respectively, not core-translatable strings) —
   fixed directly in the database, not here. This section is purely visual:
   HUD-grid + gradient title matching the archive/product/Решения pattern,
   plus dark styling for the two components that stayed default-light
   (the classic login/register form, and the WC Cart block's empty-state
   icon/heading which ship with zero theme hooks by default).
   ========================================================================== */
body.woocommerce-account,
body.woocommerce-cart {
	background-color: var(--ppsbg-tree-navy-deep, #0a1622);
	background-image:
		linear-gradient(rgba(94, 230, 184, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(94, 230, 184, 0.03) 1px, transparent 1px);
	background-size: 52px 52px;
}
body.woocommerce-account .entry-content > h1.entry-title,
body.woocommerce-account h1.page-title,
body.woocommerce-cart .entry-content > h1.entry-title,
body.woocommerce-cart h1.page-title,
body.woocommerce-cart .wp-block-post-title {
	font-family: var(--ppsbg-twin-font);
	font-weight: 800;
	background: linear-gradient(100deg, var(--ppsbg-twin-mint), var(--ppsbg-twin-mid) 55%, var(--ppsbg-twin-dark));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
body.woocommerce-account #primary.content-area,
body.woocommerce-cart #primary.content-area {
	max-width: 900px;
	margin: 0 auto;
	padding: 40px 24px 80px;
}

/* --- My Account: classic login/register form (zero theme hooks by
   default — confirmed via live HTML, plain WooCommerce markup) --- */
.woocommerce-form-login,
.woocommerce-form-register {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 18px;
	padding: 28px;
}
.woocommerce-form-login .woocommerce-form-row label,
.woocommerce-form-register .woocommerce-form-row label {
	color: var(--ppsbg-tree-text, #eef4f8);
	font-weight: 600;
	margin-bottom: 6px;
	display: block;
}
.woocommerce-form-login .woocommerce-Input,
.woocommerce-form-register .woocommerce-Input {
	background: var(--ppsbg-tree-navy, #0d1c2c) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	color: var(--ppsbg-tree-text, #eef4f8) !important;
	border-radius: 8px;
	padding: 12px 14px;
	width: 100%;
}
.woocommerce-form-login .woocommerce-Input:focus,
.woocommerce-form-register .woocommerce-Input:focus {
	outline: none;
	border-color: var(--ppsbg-twin-mint) !important;
	box-shadow: 0 0 0 3px var(--ppsbg-twin-glow-shadow);
}
.woocommerce-form-login .woocommerce-form__label-for-checkbox,
.woocommerce-form-register .woocommerce-form__label-for-checkbox {
	color: var(--ppsbg-tree-text-muted, #a8c0d4);
}
.woocommerce-form-login .woocommerce-button.woocommerce-form-login__submit,
.woocommerce-form-register .woocommerce-form-register__submit {
	background: linear-gradient(120deg, var(--ppsbg-twin-mid), var(--ppsbg-twin-dark));
	color: #05120c;
	font-weight: 700;
	border: none;
	border-radius: 8px;
	padding: 12px 22px;
	cursor: pointer;
	transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.woocommerce-form-login .woocommerce-button.woocommerce-form-login__submit:hover,
.woocommerce-form-register .woocommerce-form-register__submit:hover {
	filter: brightness(1.08);
	box-shadow: 0 0 26px var(--ppsbg-twin-glow-shadow);
}
.woocommerce-LostPassword a,
.woocommerce-form-login a {
	color: var(--ppsbg-twin-mint);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: var(--ppsbg-tree-text-muted, #a8c0d4);
	text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	border-color: var(--ppsbg-twin-glow-border);
	color: var(--ppsbg-twin-mint);
}
.woocommerce-account .woocommerce-MyAccount-content {
	color: var(--ppsbg-tree-text-muted, #a8c0d4);
}

/* --- Cart: empty-state icon + cross-sell/"new in store" product grid ---
   `.with-empty-cart-icon` inserts WooCommerce's own default icon via
   ::before with a hardcoded light-mode color that has no dark-mode
   variant — recoloring via filter rather than fighting the shorthand. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	filter: invert(1) brightness(1.3) sepia(1) saturate(4) hue-rotate(100deg);
	opacity: 0.85;
}
body.woocommerce-cart .wp-block-heading,
body.woocommerce-cart .wc-block-cart__empty-cart__title {
	color: var(--ppsbg-tree-text, #eef4f8);
	font-family: var(--ppsbg-twin-font);
}
body.woocommerce-cart .wp-block-separator.is-style-dots {
	color: rgba(94, 230, 184, 0.4);
}
/* CLS fix, same root cause/fix as the single-product page's tabs/
   compatible-components (67eb0ec): a real Lighthouse run on this page
   measured CLS 0.229, traced to the footer moving — not because of
   anything footer-side, but because the "Нови продукти" grid above it
   resolves its real height late (Chromium deferring layout for content
   that starts below the fold), pushing everything after it down once it
   resolves. content-visibility:auto reserves a placeholder box for it
   immediately so that later resolution doesn't move the footer. */
body.woocommerce-cart .wc-block-grid.wp-block-woocommerce-product-new {
	content-visibility: auto;
	contain-intrinsic-size: auto 610px;
}
/* The empty-cart "Нови продукти" section renders via the OLDER
   `wp:woocommerce/product-new` block, whose real markup is
   `.wc-block-grid__product*` — confirmed by fetching the live page, not
   assumed (an earlier pass targeted `wp-block-post-title`/`ul.products`,
   which don't exist in this block's actual output, so those rules never
   matched anything). The `wp:woocommerce/product-collection` rules are
   kept for the separate cross-sell block shown on a non-empty cart. */
/* Layout (columns/widths) deliberately left untouched — WooCommerce's own
   `.wc-block-grid__products.has-N-columns` already sizes this correctly;
   an earlier attempt to re-grid it with `display:grid` fought that native
   sizing and broke it into ~90px slivers, confirmed via a real screenshot
   before this fix. Colors/spacing/hover only from here down. */
body.woocommerce-cart .wc-block-grid__product,
body.woocommerce-cart .wp-block-woocommerce-product-collection ul.products li.product {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	overflow: hidden;
	padding: 0 0 14px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
body.woocommerce-cart .wc-block-grid__product:hover,
body.woocommerce-cart .wp-block-woocommerce-product-collection ul.products li.product:hover {
	border-color: var(--ppsbg-twin-glow-border);
	box-shadow: 0 0 22px var(--ppsbg-twin-glow-shadow);
	transform: translateY(-2px);
}
body.woocommerce-cart .wc-block-grid__product-link {
	text-decoration: none;
}
body.woocommerce-cart .wc-block-grid__product-title,
body.woocommerce-cart .wp-block-woocommerce-product-collection .wp-block-post-title a {
	color: var(--ppsbg-tree-text, #eef4f8);
	text-decoration: none;
	font-weight: 700;
	padding: 0 12px;
	display: block;
}
body.woocommerce-cart .wc-block-grid__product-price,
body.woocommerce-cart .wc-block-components-product-price {
	color: var(--ppsbg-twin-mint);
	font-family: var(--ppsbg-twin-mono);
	padding: 6px 12px 0;
}
body.woocommerce-cart .wc-block-grid__product-price .ppsbg-price-on-request-label {
	color: var(--ppsbg-tree-text-dim, #6d8aa0);
}
body.woocommerce-cart .wp-block-woocommerce-product-button a {
	background: linear-gradient(120deg, var(--ppsbg-twin-mid), var(--ppsbg-twin-dark));
	color: #05120c;
	font-weight: 700;
	border-radius: 8px;
}

@media (max-width: 640px) {
	body.woocommerce-account #primary.content-area,
	body.woocommerce-cart #primary.content-area {
		padding: 24px 16px 60px;
	}
	.woocommerce-form-login,
	.woocommerce-form-register {
		padding: 20px;
	}
	/* Mobile stacks the 4 cross-sell products into a single column instead
	   of desktop's 4-across row — real measured height ~1966px (not the
	   ~520px desktop estimate above), confirmed via a real mobile-viewport
	   render, not guessed. Without this override the placeholder is wildly
	   too small on mobile and the residual CLS this was meant to fix would
	   still show up specifically there. */
	body.woocommerce-cart .wc-block-grid.wp-block-woocommerce-product-new {
		contain-intrinsic-size: auto 1970px;
	}
}

/* ==========================================================================
   Blog — Energy Twin (blog infrastructure task, 2026-07-29)

   Same extension approach as the 2026-07-27 archive block above: ADDITIVE
   --ppsbg-twin-* / --ppsbg-tree-* token usage only, HUD-grid background,
   gradient H1, glow-hover cards inheriting the product-archive card
   language (.ppsbg-search-page-card / li.product hover pattern).
   ========================================================================== */
body.blog,
body.single-post {
	background-color: var(--ppsbg-tree-navy-deep, #0a1622);
	background-image:
		linear-gradient(rgba(94, 230, 184, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(94, 230, 184, 0.03) 1px, transparent 1px);
	background-size: 52px 52px;
}

.ppsbg-blog-archive,
.ppsbg-blog-single {
	max-width: 1180px;
	margin: 0 auto;
	padding: 48px 24px 80px;
}
.ppsbg-blog-single { max-width: 860px; }

.ppsbg-blog-eyebrow {
	font-family: var(--ppsbg-twin-mono);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ppsbg-twin-mint);
	margin: 0 0 10px;
}
.ppsbg-blog-title {
	font-family: var(--ppsbg-twin-font);
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	font-weight: 800;
	line-height: 1.08;
	background: linear-gradient(100deg, var(--ppsbg-twin-mint), var(--ppsbg-twin-mid) 55%, var(--ppsbg-twin-dark));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin: 0 0 12px;
}
.ppsbg-blog-sub {
	color: var(--ppsbg-tree-text-dim, #9fb8ca);
	max-width: 620px;
	line-height: 1.6;
	margin: 0 0 36px;
}

.ppsbg-blog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 20px;
}

.ppsbg-blog-card {
	background: var(--ppsbg-tree-navy, #0d1c2c);
	border: 1px solid var(--ppsbg-tree-border, rgba(255, 255, 255, 0.08));
	border-radius: 14px;
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.ppsbg-blog-card:hover {
	border-color: var(--ppsbg-twin-glow-border);
	box-shadow: 0 0 28px var(--ppsbg-twin-glow-shadow);
	transform: translateY(-3px);
}
.ppsbg-blog-card-link { display: block; text-decoration: none; }
.ppsbg-blog-card-thumb { aspect-ratio: 16 / 9; overflow: hidden; }
.ppsbg-blog-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}
.ppsbg-blog-card:hover .ppsbg-blog-card-thumb img { transform: scale(1.04); }
.ppsbg-blog-card-body { padding: 18px 20px 20px; }
.ppsbg-blog-card-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--ppsbg-twin-mono);
	font-size: 12px;
	color: var(--ppsbg-tree-text-dim, #9fb8ca);
	margin-bottom: 10px;
}
.ppsbg-blog-chip {
	display: inline-block;
	padding: 3px 10px;
	border: 1px solid var(--ppsbg-twin-glow-border);
	border-radius: 999px;
	color: var(--ppsbg-twin-mint);
	font-size: 11px;
	text-decoration: none;
	white-space: nowrap;
}
a.ppsbg-blog-chip:hover { background: rgba(69, 224, 160, 0.12); }
.ppsbg-blog-card-title {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--ppsbg-tree-text, #eef4f8);
	margin: 0 0 8px;
}
.ppsbg-blog-card-excerpt {
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--ppsbg-tree-text-dim, #9fb8ca);
	margin: 0;
}
.ppsbg-blog-empty { color: var(--ppsbg-tree-text-dim, #9fb8ca); }

/* Single post */
.ppsbg-blog-single-header { margin-bottom: 22px; }
.ppsbg-blog-single-hero {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--ppsbg-tree-border, rgba(255, 255, 255, 0.08));
	margin-bottom: 26px;
}
.ppsbg-blog-single-hero img { width: 100%; height: auto; display: block; }
.ppsbg-blog-content {
	color: var(--ppsbg-tree-text, #eef4f8);
	line-height: 1.7;
	font-size: 1.02rem;
}
.ppsbg-blog-content h2,
.ppsbg-blog-content h3 {
	font-family: var(--ppsbg-twin-font);
	color: var(--ppsbg-tree-text, #eef4f8);
	line-height: 1.25;
	margin: 1.6em 0 0.6em;
}
.ppsbg-blog-content a { color: var(--ppsbg-twin-mint); }
.ppsbg-blog-content ul,
.ppsbg-blog-content ol { padding-left: 1.3em; }
.ppsbg-blog-content img { max-width: 100%; height: auto; border-radius: 10px; }

.ppsbg-blog-related { margin-top: 44px; }
.ppsbg-blog-related-title,
.ppsbg-use-case-articles .ppsbg-use-case-section__title {
	font-family: var(--ppsbg-twin-font);
	font-weight: 800;
	color: var(--ppsbg-tree-text, #eef4f8);
}
.ppsbg-blog-related-more { margin-top: 14px; }
.ppsbg-blog-related-more a {
	font-family: var(--ppsbg-twin-mono);
	font-size: 0.9rem;
	color: var(--ppsbg-twin-mint);
	text-decoration: none;
}
.ppsbg-blog-related-more a:hover { text-decoration: underline; }

/* Tool embeds ([ppsbg_kalkulator]/[ppsbg_savetnik]) — height reserved
   up front so the lazy iframe can never shift layout (CLS-safe by
   construction; see class-ppsbg-blog-embeds.php). */
.ppsbg-tool-embed {
	margin: 32px 0;
	border: 1px solid var(--ppsbg-tree-border, rgba(255, 255, 255, 0.08));
	border-radius: 14px;
	overflow: hidden;
	background: var(--ppsbg-tree-navy, #0d1c2c);
}
.ppsbg-tool-embed-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--ppsbg-tree-border, rgba(255, 255, 255, 0.08));
}
.ppsbg-tool-embed-title {
	font-family: var(--ppsbg-twin-mono);
	font-size: 13px;
	color: var(--ppsbg-twin-mint);
}
.ppsbg-tool-embed-open {
	font-size: 12px;
	color: var(--ppsbg-tree-text-dim, #9fb8ca);
	text-decoration: none;
	white-space: nowrap;
}
.ppsbg-tool-embed-open:hover { color: var(--ppsbg-twin-mint); }
.ppsbg-embed-frame {
	height: 750px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ppsbg-embed-frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.ppsbg-embed-wait {
	font-family: var(--ppsbg-twin-mono);
	font-size: 13px;
	color: var(--ppsbg-tree-text-dim, #9fb8ca);
}

/* Pagination on the archive */
.ppsbg-blog-archive .pagination,
.ppsbg-blog-archive .nav-links {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-top: 36px;
	font-family: var(--ppsbg-twin-mono);
}
.ppsbg-blog-archive .nav-links a,
.ppsbg-blog-archive .nav-links span {
	color: var(--ppsbg-tree-text-dim, #9fb8ca);
	text-decoration: none;
	padding: 6px 12px;
	border: 1px solid var(--ppsbg-tree-border, rgba(255, 255, 255, 0.08));
	border-radius: 8px;
}
.ppsbg-blog-archive .nav-links a:hover { color: var(--ppsbg-twin-mint); border-color: var(--ppsbg-twin-glow-border); }
.ppsbg-blog-archive .nav-links .current { color: var(--ppsbg-twin-mint); border-color: var(--ppsbg-twin-glow-border); }

@media (max-width: 640px) {
	.ppsbg-blog-archive,
	.ppsbg-blog-single { padding: 32px 16px 60px; }
	.ppsbg-embed-frame { height: 640px; }
}