/*
Theme Name: Perfect Woo
Theme URI: https://example.com/perfect-woo
Author: Perfect Woo
Description: Lean block theme (FSE) for a near-perfect WooCommerce store. Presentation only —
             all site functionality (tracking, schema, CRO logic) lives in the pwc-core plugin
             so it survives a theme switch. Uses WooCommerce Cart/Checkout blocks. RTL-ready
             via logical properties.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.2
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: perfect-woo
Tags: full-site-editing, block-templates, e-commerce, rtl-language-support, accessibility-ready
*/

/*
 * Most styling lives in theme.json (global styles) per FSE conventions.
 * This file holds only the utilities and component CSS that theme.json cannot express:
 * skip link, screen-reader-text, sticky add-to-cart bar, reduced-motion guard.
 * All box-model rules use LOGICAL properties so the RTL stylesheet (style-rtl.css) stays minimal.
 */

/* Global guard against horizontal overflow. The announcement marquee, full-width hero and footer
   live outside the page container; clipping at the root prevents any of them creating a "massive"
   horizontal scroll. `clip` (not `hidden`) so it never starts a scroll container or breaks sticky. */
html, body {
	overflow-x: clip;
	max-inline-size: 100%;
}
*, *::before, *::after {
	box-sizing: border-box;
}
img, svg, video {
	max-inline-size: 100%;
}

/* WooCommerce Mini-Cart drawer width. Woo prints this custom property inline only on some pages,
   so wherever it's missing the slide-out panel collapses off-screen — the overlay opens but the
   cart doesn't. Define it globally as a guaranteed fallback (480px = the Mini-Cart block's default
   width); any value WooCommerce prints later still wins. */
:root {
	--drawer-width: 480px;
	--neg-drawer-width: calc(var(--drawer-width) * -1);
}

/* §3 a11y — visually hidden but available to assistive tech. */
.screen-reader-text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* §3 a11y — skip link becomes visible on focus. */
.skip-link {
	position: absolute;
	inset-block-start: -100px;
	inset-inline-start: 1rem;
	z-index: 100000;
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--background, #fff);
	color: var(--wp--preset--color--foreground, #111);
}
.skip-link:focus {
	inset-block-start: 1rem;
}

/* §3 a11y — always-visible focus indicator (≥3:1 contrast). */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent, #1b8a52);
	outline-offset: 2px;
}

/* §2 CRO — sticky mobile add-to-cart bar. Hidden on desktop. */
.pwc-sticky-atc {
	position: fixed;
	inset-block-end: 0;
	inset-inline: 0;
	display: none;
	gap: 0.75rem;
	align-items: center;
	padding: 0.75rem 1rem;
	padding-block-end: calc(0.75rem + env(safe-area-inset-bottom));
	background: var(--wp--preset--color--background, #fff);
	box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
	z-index: 50;
}
@media (max-width: 600px) {
	.pwc-sticky-atc { display: flex; }
}
.pwc-sticky-atc .button { margin-inline-start: auto; }

/* §2 CRO — free-shipping progress bar (markup rendered by pwc-core). */
.pwc-free-ship__track {
	block-size: 8px;
	border-radius: 4px;
	background: var(--wp--preset--color--muted, #e6e6e6);
	overflow: hidden;
}
.pwc-free-ship__fill {
	display: block;
	block-size: 100%;
	background: var(--wp--preset--color--accent, #1b8a52);
	transition: inline-size 200ms ease;
}

/* ===========================================================================
   Design Options — consume the CSS variables emitted by inc/design-options.php.
   Every rule falls back to a sane default so the theme looks right before any
   option is saved. Targets BOTH classic Woo markup and the block product grid.
   =========================================================================== */

/* Product card */
.woocommerce ul.products li.product,
.wp-block-woocommerce-product-template > li,
.wc-block-grid__product {
	border-radius: var(--pwc-card-radius, 8px);
	border: var(--pwc-card-border-width, 0) solid var(--pwc-card-border-color, #e6e8eb);
	box-shadow: var(--pwc-card-shadow, 0 1px 3px rgba(0, 0, 0, 0.1));
	padding: var(--pwc-card-padding, 12px);
	overflow: hidden;
}
.woocommerce ul.products li.product img,
.wp-block-woocommerce-product-template img,
.wc-block-grid__product-image img {
	aspect-ratio: var(--pwc-card-img-ratio, 1 / 1);
	object-fit: var(--pwc-card-img-fit, cover);
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--pwc-card-radius, 8px);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wp-block-woocommerce-product-template .wp-block-post-title,
.wc-block-grid__product-title {
	font-size: var(--pwc-card-title-size, 1rem);
	text-align: var(--pwc-card-title-align, start);
}
.woocommerce ul.products li.product .price,
.wp-block-woocommerce-product-template .wp-block-woocommerce-product-price {
	text-align: var(--pwc-card-title-align, start);
}
.woocommerce ul.products li.product .button,
.wp-block-woocommerce-product-template .wp-block-button__link,
.wc-block-grid__product .wp-block-button__link {
	inline-size: var(--pwc-card-btn-width, auto);
	border-radius: var(--pwc-radius, 6px);
}

/* Cart */
.pwc-free-ship__fill {
	background: var(--pwc-cart-accent, var(--wp--preset--color--accent, #1b8a52));
}
.woocommerce-cart .cart_totals,
.wp-block-woocommerce-cart-order-summary-block {
	border-radius: var(--pwc-cart-radius, 8px);
}

/* Checkout */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.wc-block-components-text-input input,
.wc-block-components-select select {
	border-radius: var(--pwc-field-radius, 6px);
}
.woocommerce-checkout #payment .button,
.wc-block-components-checkout-place-order-button {
	background: var(--pwc-checkout-accent, #1b8a52);
}
.wc-block-components-sidebar {
	position: var(--pwc-summary-position, sticky);
	inset-block-start: 1rem;
}

/* Thank-you page */
.woocommerce-order .woocommerce-thankyou-order-received,
.wc-block-order-confirmation-status {
	background: var(--pwc-ty-banner-bg, #1a7f3c);
	color: #fff;
	padding: 1rem 1.25rem;
	border-radius: var(--pwc-radius, 6px);
	text-align: var(--pwc-ty-align, center);
}

/* Home / sections */
.home main > .wp-block-group,
.home main > .wp-block-cover {
	margin-block-end: var(--pwc-section-gap, 48px);
}
.wp-block-cover .wp-block-cover__background {
	opacity: calc(var(--pwc-hero-overlay, 30) / 100);
}

/* Black sliding announcement bar above the header (live-site marquee). Full-bleed, infinite. */
.pwc-announce {
	background: #000;
	color: #fff;
	overflow: hidden;
	border-block-end: 1px solid rgba(255, 255, 255, 0.06);
}
.pwc-announce__track {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	will-change: transform;
	animation: pwc-marquee 32s linear infinite;
}
.pwc-announce:hover .pwc-announce__track {
	animation-play-state: paused;
}
.pwc-announce__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding-block: 0.7rem;
	padding-inline: 1.75rem;
	font-size: 13px;
	border-inline-start: 1px solid rgba(255, 255, 255, 0.12);
}
@keyframes pwc-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* Header — clean white bar (matches live storefront). */
.site-header {
	background: #fff;
	border-block-end: 1px solid var(--wp--preset--color--muted, #eaeaea);
	padding-block: 0.85rem;
}
.site-header__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	gap: 1.5rem;
	/* Full-width header content with gutters (header bar already spans the viewport). */
	inline-size: 100%;
	max-inline-size: 100%;
	padding-inline: clamp(1rem, 4vw, 2rem);
	margin-inline: 0;
}
/* Logo sizing */
.pwc-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.pwc-logo img {
	block-size: 42px;
	inline-size: auto;
	max-inline-size: none;
	display: block;
}
/* Primary navigation — horizontal, green hover, sits centred between logo and tools */
.site-header .wp-block-navigation {
	flex: 1 1 auto;
	min-inline-size: 0;
	flex-wrap: wrap;
	justify-content: center;
	font-size: 15px;
	font-weight: 500;
}
.site-header .wp-block-navigation a { color: var(--wp--preset--color--foreground, #141410); }
.site-header .wp-block-navigation a:hover,
.site-header .wp-block-navigation .current-menu-item > a {
	color: var(--wp--preset--color--accent, #1b8a52);
}
/* Dropdown submenu */
.site-header .wp-block-navigation .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--muted, #eaeaea);
	border-radius: 10px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
	padding: 6px;
}

/* Header tools (search + account + cart) */
.site-header__tools {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-shrink: 0;
}
/* Cart — green icon button, opens the drawer on click. */
.site-header__tools .wc-block-mini-cart__button {
	color: var(--wp--preset--color--accent, #1b8a52);
	cursor: pointer;
}
.site-header__tools .wc-block-mini-cart__button svg {
	fill: var(--wp--preset--color--accent, #1b8a52);
	inline-size: 28px;
	block-size: 28px;
}
.site-header__tools .wc-block-mini-cart__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 18px;
	block-size: 18px;
	padding: 0 4px;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--accent, #1b8a52);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}
/* Account + search icon links (custom — replacing the WooCommerce customer-account block, which
   rendered invisibly once its block CSS loaded). The search magnifier is a checkbox toggle that
   drops the full search field below the header on phones (no JS); on desktop the field shows inline
   and the magnifier is hidden. */
/* Search magnifier toggle (mobile only) — the checkbox is a state-holder, never shown. */
#pwc-search-toggle,
.site-header__tools .pwc-search-toggle { display: none !important; }
/* Account icon — a plain inline-SVG link. Size and colour are hard-set on the SVG itself, so it
   renders regardless of cache, block CSS, or stylesheet load order (the WooCommerce customer-account
   block kept rendering its icon invisibly via em-sizing + inherited currentColor). */
.site-header__tools .pwc-account {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}
.site-header__tools .pwc-account svg { display: block; }
.site-header__tools .pwc-search-link {
	display: none; /* magnifier shown on phones only */
	align-items: center;
	color: var(--wp--preset--color--accent, #1b8a52);
	cursor: pointer;
	flex-shrink: 0;
}
.site-header__tools .pwc-search-link svg {
	display: block;
	inline-size: 26px;
	block-size: 26px;
}
/* Header product search — clean rounded pill. */
.pwc-product-search {
	max-inline-size: 260px;
	inline-size: 100%;
	margin: 0;
}
.pwc-product-search .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--muted, #eaeaea);
	border-radius: 999px;
	background: #f4f5f6;
	padding: 0;
	overflow: hidden;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.pwc-product-search .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--accent, #1b8a52);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(27, 138, 82, .12);
}
.pwc-product-search .wp-block-search__input {
	border: 0;
	background: transparent;
	min-block-size: 40px;
	padding: 0.4rem 0.25rem 0.4rem 1rem;
	font-size: 0.9rem;
	color: var(--wp--preset--color--foreground, #141410);
}
.pwc-product-search .wp-block-search__input::placeholder { color: #8a8a8a; }
.pwc-product-search .wp-block-search__input:focus { outline: none; box-shadow: none; }
.pwc-product-search .wp-block-search__button {
	background: transparent;
	border: 0;
	margin: 0;
	padding-inline: 0.45rem 0.7rem;
	color: var(--wp--preset--color--accent, #1b8a52);
	cursor: pointer;
}
.pwc-product-search .wp-block-search__button svg.search-icon {
	inline-size: 20px;
	block-size: 20px;
	fill: var(--wp--preset--color--accent, #1b8a52);
}
@media (max-width: 900px) {
	/* Size the nav to its content (the hamburger). `flex: 0` collapsed it to 0 width and hid the icon. */
	.site-header .wp-block-navigation { flex: 0 0 auto; }
	.pwc-product-search { max-inline-size: 200px; }
}
/* Mobile menu: the Navigation block (with a classic-menu location) emits the desktop inline-menu
   rule but not the mobile-overlay rules, so its hamburger stays hidden on phones. Restore it —
   show the hamburger and collapse the inline menu up to 781px; clicking it opens the overlay. */
@media (max-width: 781px) {
	.site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
		padding: 0.25rem;
		color: var(--wp--preset--color--foreground, #141410);
	}
	/* Make sure the hamburger glyph itself is sized and coloured (not white-on-white / 0×0). */
	.site-header .wp-block-navigation__responsive-container-open svg {
		inline-size: 28px;
		block-size: 28px;
		fill: currentColor;
	}
	.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
	/* Group the hamburger with the cart/account on the right (logo stays left). */
	.site-header .wp-block-navigation { margin-inline-start: auto; }

	/* Side gutters on every block (FSE) page — the constrained content otherwise touches the
	   screen edges on phones. The custom PHP templates (Home/Contact/Repair) add their own. */
	main.wp-block-group { padding-inline: 1rem; }

	/* Open mobile menu: full viewport width, items aligned left (default is a centred column). */
	.site-header .wp-block-navigation__responsive-container.is-menu-open {
		inline-size: 100%;
		max-inline-size: 100%;
	}
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		inline-size: 100%;
		align-items: flex-start;
	}
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		inline-size: 100%;
		align-items: flex-start;
		justify-content: flex-start;
	}
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		inline-size: 100%;
		text-align: start;
		justify-content: flex-start;
	}
}
@media (max-width: 600px) {
	/* Keep the header on one tidy row on phones: tighter gap, smaller logo. Hide the inline search
	   field and show the magnifier; tapping it drops the full field below the header. */
	.site-header { padding-block: 0.6rem; }
	.site-header__row { gap: 0.6rem; padding-inline: 1rem; }
	.pwc-logo img { block-size: 32px; }
	.site-header__tools { gap: 0.6rem; }
	.site-header__tools .pwc-product-search { display: none; }
	.site-header__tools .pwc-search-link { display: inline-flex; }
	.site-header__tools .pwc-search-toggle:checked ~ .pwc-product-search {
		display: block;
		position: absolute;
		inset-inline: 0;
		inset-block-start: 100%;
		max-inline-size: none;
		margin: 0;
		padding: 0.6rem 1rem;
		background: #fff;
		border-block-end: 1px solid var(--wp--preset--color--muted, #eaeaea);
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
		z-index: 60;
	}
}

/* Search results page (templates/search.html → classic product search results). */
.pwc-search {
	padding-block: 2rem;
}
.pwc-search > .wp-block-query-title {
	margin-block-end: 1rem;
}
.pwc-search > .pwc-product-search {
	max-inline-size: 480px;
	margin-block-end: 2rem;
}
/* Results grid — each result is an image card (product or post). */
.pwc-search__grid {
	gap: 1.25rem;
}
.pwc-search__grid > li {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	background: #fff;
	border: 1px solid var(--wp--preset--color--muted, #eaeaea);
	border-radius: 12px;
	padding: 12px;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pwc-search__grid > li:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, .08);
	border-color: var(--wp--preset--color--accent, #1b8a52);
}
.pwc-search__grid .pwc-result__img img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background: var(--wp--preset--color--background, #f9f9f8);
	border-radius: 8px;
}
.pwc-search__grid .wp-block-post-title { font-size: 0.95rem; line-height: 1.4; margin: 0; }
.pwc-search__grid .wp-block-post-title a { color: var(--wp--preset--color--foreground, #141410); text-decoration: none; }
.pwc-search__grid .wp-block-post-title a:hover { color: var(--wp--preset--color--accent, #1b8a52); }
.pwc-search__grid .wc-block-components-product-price,
.pwc-search__grid .price { color: var(--wp--preset--color--foreground, #141410); font-weight: 700; margin-block-start: auto; }
@media (max-width: 781px) {
	.pwc-search__grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ===========================================================================
   Cart page (classic [woocommerce_cart]) — compact, on-brand. Default classic
   cart renders oversized thumbnails/padding; this tightens it and gives a modern
   two-column (items + sticky totals) layout. Uses theme preset colour vars.
   =========================================================================== */
.woocommerce-cart .woocommerce {
	max-inline-size: 1120px;
	margin-inline: auto;
}
@media (min-width: 900px) {
	.woocommerce-cart .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: 2rem;
		align-items: start;
	}
	.woocommerce-cart .woocommerce-notices-wrapper { grid-column: 1 / -1; grid-row: 1; }
	.woocommerce-cart .woocommerce-cart-form { grid-column: 1; grid-row: 2; }
	.woocommerce-cart .cart-collaterals {
		grid-column: 2;
		grid-row: 2;
		position: sticky;
		inset-block-start: 1rem;
	}
}
/* Undo the classic float so the grid controls layout. */
.woocommerce-cart .cart-collaterals,
.woocommerce-cart .cart-collaterals .cart_totals {
	inline-size: 100%;
	float: none;
}

/* Items table — compact card. */
.woocommerce-cart table.cart {
	border: 1px solid var(--wp--preset--color--muted, #eaeaea);
	border-radius: 12px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	margin: 0;
}
.woocommerce-cart table.cart th,
.woocommerce-cart table.cart td {
	padding: 0.8rem 0.9rem;
	vertical-align: middle;
	font-size: 0.9rem;
	border-top: 1px solid var(--wp--preset--color--muted, #eaeaea);
}
.woocommerce-cart table.cart thead th {
	background: var(--wp--preset--color--background, #f9f9f8);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6b6b6b;
	border-top: 0;
}
.woocommerce-cart table.cart .product-thumbnail img {
	inline-size: 64px;
	block-size: 64px;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--wp--preset--color--muted, #eaeaea);
	border-radius: 8px;
	padding: 4px;
}
.woocommerce-cart .product-name a {
	color: var(--wp--preset--color--foreground, #141410);
	font-weight: 600;
	text-decoration: none;
}
.woocommerce-cart .product-name a:hover { color: var(--wp--preset--color--accent, #1b8a52); }
.woocommerce-cart td.product-remove a.remove {
	color: var(--wp--preset--color--danger, #c4123f) !important;
	border: 1px solid var(--wp--preset--color--muted, #eaeaea);
	font-weight: 700;
	line-height: 1.4;
}
.woocommerce-cart td.product-remove a.remove:hover {
	background: var(--wp--preset--color--danger, #c4123f) !important;
	color: #fff !important;
}
.woocommerce-cart .quantity input.qty {
	inline-size: 56px;
	padding: 0.4rem;
	border: 1px solid var(--wp--preset--color--muted, #eaeaea);
	border-radius: 6px;
	text-align: center;
}

/* Single-product add-to-cart quantity — the classic template (legacy-template.css) gives the qty
   input oversized padding; tighten it to a compact field that matches the rest of the UI. */
.woocommerce div.product form.cart .quantity .qty,
body.single-product .quantity input.qty {
	inline-size: 64px;
	min-block-size: 0;
	padding: 0.5rem 0.4rem;
	border: 1px solid var(--wp--preset--color--muted, #eaeaea);
	border-radius: 6px;
	text-align: center;
}

/* Coupon + update row. */
.woocommerce-cart table.cart td.actions { padding: 0.9rem; }
.woocommerce-cart table.cart td.actions .coupon { display: flex; gap: 0.5rem; }
.woocommerce-cart table.cart td.actions .input-text,
.woocommerce-cart table.cart td.actions input[name="coupon_code"] {
	inline-size: auto;
	max-inline-size: 220px;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--wp--preset--color--muted, #eaeaea);
	border-radius: 6px;
}
.woocommerce-cart table.cart td.actions .button {
	border-radius: 6px;
	padding: 0.55rem 1rem;
}

/* Totals box. */
.woocommerce-cart .cart_totals {
	border: 1px solid var(--wp--preset--color--muted, #eaeaea);
	border-radius: 12px;
	background: #fff;
	padding: 1.25rem;
}
.woocommerce-cart .cart_totals h2 {
	font-size: 1.15rem;
	margin-block: 0 1rem;
}
.woocommerce-cart .cart_totals table { margin: 0; font-size: 0.9rem; border: 0; }
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
	padding: 0.55rem 0;
	border-top: 1px solid var(--wp--preset--color--muted, #eaeaea);
}
.woocommerce-cart .cart_totals tr:first-child th,
.woocommerce-cart .cart_totals tr:first-child td { border-top: 0; }
.woocommerce-cart .cart_totals .order-total .amount {
	color: var(--wp--preset--color--accent, #1b8a52);
	font-size: 1.2rem;
	font-weight: 800;
}
.woocommerce-cart .wc-proceed-to-checkout { padding: 1rem 0 0; }
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
	display: block;
	inline-size: 100%;
	box-sizing: border-box;
	text-align: center;
	background: var(--wp--preset--color--accent, #1b8a52);
	color: #fff;
	font-weight: 700;
	border-radius: 8px;
	padding: 0.85rem 1rem;
	font-size: 1rem;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover { background: #156d41; }

/* Mobile: keep the responsive stacked table readable. */
@media (max-width: 600px) {
	.woocommerce-cart table.cart .product-thumbnail img { inline-size: 48px; block-size: 48px; }
	.woocommerce-cart table.cart td { font-size: 0.85rem; }
}

/* ===========================================================================
   Checkout page (classic [woocommerce_checkout]) — compact, on-brand. Two-column
   layout: customer details (left) + sticky order summary/payment (right).
   =========================================================================== */
.woocommerce-checkout .woocommerce {
	max-inline-size: 1120px;
	margin-inline: auto;
}
@media (min-width: 900px) {
	.woocommerce-checkout form.checkout.woocommerce-checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 400px;
		gap: 2rem;
		align-items: start;
	}
	.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
	.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; margin-block-start: 0; }
	.woocommerce-checkout #order_review { grid-column: 2; grid-row: 2; position: sticky; inset-block-start: 1rem; }
}
/* Stack billing & shipping within the left column (no cramped side-by-side). */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
	inline-size: 100%;
	float: none;
	padding: 0;
}
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout #order_review_heading {
	font-size: 1.15rem;
	margin-block: 0 1rem;
}

/* Form fields — compact, rounded, full-width. */
.woocommerce-checkout .form-row {
	margin: 0 0 1rem;
	padding: 0;
}
.woocommerce-checkout .form-row label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	margin-block-end: 0.3rem;
}
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.woocommerce-checkout .select2-selection {
	inline-size: 100%;
	box-sizing: border-box;
	padding: 0.65rem 0.8rem;
	border: 1px solid var(--wp--preset--color--muted, #eaeaea);
	border-radius: 8px;
	font-size: 0.95rem;
	background: #fff;
}
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
	border-color: var(--wp--preset--color--accent, #1b8a52);
	outline: none;
}

/* Order summary + payment card. */
.woocommerce-checkout #order_review {
	border: 1px solid var(--wp--preset--color--muted, #eaeaea);
	border-radius: 12px;
	background: #fff;
	padding: 1.25rem;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table {
	font-size: 0.9rem;
	border: 0;
	margin: 0 0 1rem;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td {
	padding: 0.5rem 0;
	border-top: 1px solid var(--wp--preset--color--muted, #eaeaea);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item:first-child th,
.woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item:first-child td { border-top: 0; }
.woocommerce-checkout .order-total .amount {
	color: var(--wp--preset--color--accent, #1b8a52);
	font-size: 1.2rem;
	font-weight: 800;
}

/* Payment methods. */
.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
}
.woocommerce-checkout #payment ul.payment_methods {
	border: 1px solid var(--wp--preset--color--muted, #eaeaea);
	border-radius: 8px;
	padding: 0.75rem 1rem;
	margin: 0 0 1rem;
	list-style: none;
	background: var(--wp--preset--color--background, #f9f9f8);
}
.woocommerce-checkout #payment ul.payment_methods li { margin: 0.35rem 0; }
.woocommerce-checkout #payment div.payment_box {
	background: #fff;
	border-radius: 8px;
	font-size: 0.85rem;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }

/* Place order button — full-width green. */
.woocommerce-checkout #payment .place-order { padding: 0; }
.woocommerce-checkout #place_order {
	inline-size: 100%;
	box-sizing: border-box;
	background: var(--wp--preset--color--accent, #1b8a52);
	color: #fff;
	font-weight: 700;
	font-size: 1.05rem;
	border: 0;
	border-radius: 8px;
	padding: 0.9rem 1rem;
	cursor: pointer;
}
.woocommerce-checkout #place_order:hover { background: #156d41; }

/* ===========================================================================
   Shop / product archive — filter sidebar, sorting, grid, pagination.
   =========================================================================== */
/* Match the home 1280px container. The FSE constrained layout caps direct children at the theme
   content size (720px), which makes these pages look narrow — widen them here. */
main.pwc-shop,
main.pwc-search {
	max-inline-size: 1280px;
	margin-inline: auto;
}
main.pwc-shop > *,
main.pwc-search > * {
	max-inline-size: none;
}
/* Hide the "Shop" page title on the shop archive only (category/tag pages keep their heading). */
.post-type-archive-product main.pwc-shop > .wp-block-query-title { display: none; }

.pwc-shop .pwc-shop__cols { gap: 2.5rem; align-items: start; }
.pwc-shop__filters-title { margin-block: 0 1rem; }

/* --- Filter sidebar (classic Layered Nav widgets) --- */
.pwc-filters__group {
	border: 1px solid var(--wp--preset--color--muted, #eaeaea);
	border-radius: 10px;
	padding: 1rem 1.1rem;
	margin-block-end: 1rem;
}
.pwc-filters__group .widgettitle,
.pwc-filters__group h3 {
	font-family: "Barlow Condensed", "Outfit", sans-serif;
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 0.75rem;
}
.pwc-filters .woocommerce-widget-layered-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	max-block-size: 220px;
	overflow-y: auto;
}
.pwc-filters .woocommerce-widget-layered-nav-list__item { padding: 0; }
.pwc-filters .woocommerce-widget-layered-nav-list__item a {
	text-decoration: none;
	color: var(--wp--preset--color--foreground, #141410);
	font-size: 0.9rem;
}
.pwc-filters .woocommerce-widget-layered-nav-list__item:hover a { color: var(--wp--preset--color--accent, #1b8a52); }
.pwc-filters .woocommerce-widget-layered-nav-list__item.chosen a {
	color: var(--wp--preset--color--accent, #1b8a52);
	font-weight: 600;
}
.pwc-filters .woocommerce-widget-layered-nav-list__item.chosen a::before {
	content: "✕ ";
	font-weight: 700;
}
.pwc-filters .woocommerce-widget-layered-nav-list .count {
	color: #8a8a8a;
	font-size: 0.78rem;
	float: inline-end;
}
/* Price filter — styled green jQuery-UI slider (when it initialises) + a clean min/max input row
   and Filter button (the always-functional fallback when the slider script doesn't run). */
.pwc-filters .price_slider_wrapper { margin-block-start: 0.25rem; }
/* The slider track */
.pwc-filters .ui-slider {
	position: relative;
	block-size: 6px;
	background: var(--wp--preset--color--muted, #eaeaea);
	border: 0;
	border-radius: 6px;
	margin: 1rem 9px 1.5rem;
}
.pwc-filters .ui-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	display: block;
	block-size: 100%;
	background: var(--wp--preset--color--accent, #1b8a52);
	border-radius: 6px;
}
.pwc-filters .ui-slider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	inset-block-start: 50%;
	inline-size: 18px;
	block-size: 18px;
	margin-block-start: -9px;
	margin-inline-start: -9px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--wp--preset--color--accent, #1b8a52);
	box-shadow: 0 1px 5px rgba(0, 0, 0, .25);
	cursor: grab;
	outline: none;
}
.pwc-filters .ui-slider .ui-slider-handle:active { cursor: grabbing; }

/* Min / max inputs laid out as a neat row (Woo prints them stacked with <br>s). */
.pwc-filters .price_slider_amount { font-size: 0.85rem; display: flow-root; }
.pwc-filters .price_slider_amount br { display: none; }
.pwc-filters .price_slider_amount input[type="text"] {
	inline-size: calc(50% - 0.3rem);
	max-inline-size: none;
	padding: 0.55rem 0.5rem;
	border: 1px solid var(--wp--preset--color--muted, #eaeaea);
	border-radius: 7px;
	font-size: 0.85rem;
	text-align: center;
	background: #fff;
}
.pwc-filters .price_slider_amount input[type="text"]:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent, #1b8a52);
}
.pwc-filters .price_slider_amount #min_price { margin-inline-end: 0.5rem; }
.pwc-filters .price_slider_amount .button {
	display: block;
	float: none;
	inline-size: 100%;
	margin-block-start: 0.75rem;
	background: var(--wp--preset--color--accent, #1b8a52);
	color: #fff;
	border: 0;
	border-radius: 7px;
	padding: 0.6rem 1rem;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
}
.pwc-filters .price_slider_amount .button:hover { background: #156d41; }
.pwc-filters .price_label { display: block; color: #555; margin-block: 0.6rem 0; }
.pwc-filters .price_slider_amount .clear { clear: both; }
/* Active filters */
.pwc-filters__active .woocommerce-widget-layered-nav-list,
.pwc-filters__active ul { gap: 0.4rem; }
.pwc-filters__active a { color: var(--wp--preset--color--danger, #c4123f); }

/* --- Toolbar: result count + sorting dropdown --- */
.pwc-shop__toolbar {
	align-items: center;
	gap: 1rem;
	margin-block-end: 1.5rem;
	padding-block-end: 1rem;
	border-block-end: 1px solid var(--wp--preset--color--muted, #eaeaea);
}
.pwc-shop__toolbar .woocommerce-result-count,
.pwc-shop__toolbar .wc-block-product-results-count { margin: 0; color: #6b6b6b; font-size: 0.9rem; }
.pwc-shop__toolbar .woocommerce-ordering,
.pwc-shop__toolbar .wp-block-woocommerce-catalog-sorting { margin: 0; }
.pwc-shop__toolbar select,
.woocommerce-ordering select.orderby {
	padding: 0.55rem 2.2rem 0.55rem 0.9rem;
	border: 1px solid var(--wp--preset--color--muted, #eaeaea);
	border-radius: 8px;
	background: #fff;
	font-size: 0.9rem;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23141410' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.7rem center;
}

/* --- Product grid cards --- */
.pwc-shop__grid .wp-block-woocommerce-product-template {
	gap: 1.25rem;
}
.pwc-shop__grid .wc-block-product {
	border: 1px solid var(--wp--preset--color--muted, #eaeaea);
	border-radius: 12px;
	padding: 14px;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pwc-shop__grid .wc-block-product:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, .08);
	border-color: var(--wp--preset--color--accent, #1b8a52);
}
.pwc-shop__grid .wc-block-product img {
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background: var(--wp--preset--color--background, #f9f9f8);
	border-radius: 8px;
}
.pwc-shop__grid .wp-block-post-title { font-size: 0.95rem; line-height: 1.4; }
.pwc-shop__grid .wp-block-post-title a { color: var(--wp--preset--color--foreground, #141410); text-decoration: none; }
.pwc-shop__grid .wp-block-post-title a:hover { color: var(--wp--preset--color--accent, #1b8a52); }
.pwc-shop__grid .wc-block-components-product-price { font-weight: 700; color: var(--wp--preset--color--foreground, #141410); }
.pwc-shop__grid .wp-block-button__link,
.pwc-shop__grid .wc-block-components-product-button .wc-block-components-button {
	background: var(--wp--preset--color--accent, #1b8a52);
	color: #fff;
	border-radius: 7px;
	font-size: 0.85rem;
}

/* --- Pagination --- */
.pwc-shop__pagination { gap: 0.4rem; margin-block-start: 2.5rem; flex-wrap: wrap; }
.pwc-shop__pagination .page-numbers,
.pwc-shop__pagination .wp-block-query-pagination-previous,
.pwc-shop__pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 40px;
	block-size: 40px;
	padding-inline: 0.5rem;
	border: 1px solid var(--wp--preset--color--muted, #eaeaea);
	border-radius: 8px;
	background: #fff;
	color: var(--wp--preset--color--foreground, #141410);
	text-decoration: none;
	font-size: 0.9rem;
}
.pwc-shop__pagination .page-numbers:hover,
.pwc-shop__pagination .wp-block-query-pagination-previous:hover,
.pwc-shop__pagination .wp-block-query-pagination-next:hover {
	border-color: var(--wp--preset--color--accent, #1b8a52);
	color: var(--wp--preset--color--accent, #1b8a52);
}
.pwc-shop__pagination .page-numbers.current {
	background: var(--wp--preset--color--accent, #1b8a52);
	border-color: var(--wp--preset--color--accent, #1b8a52);
	color: #fff;
	font-weight: 700;
}

/* Mobile: filters stack above the grid, and the product grid drops to 2 → 1 columns
   (the block's fixed columnCount:3 otherwise stays 3-up and cramped on phones). */
@media (max-width: 781px) {
	.pwc-shop .pwc-shop__cols { display: block; }
	.pwc-shop__sidebar, .pwc-shop__main { inline-size: 100% !important; flex-basis: auto !important; }
	.pwc-shop__sidebar { margin-block-end: 2rem; }
	.pwc-shop__grid .wp-block-woocommerce-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 480px) {
	.pwc-shop__grid .wp-block-woocommerce-product-template { grid-template-columns: 1fr !important; }
}

/* Repair page styles live in assets/css/repair.css (loaded only on the page-repair.php template). */

/* Sale badge — one consistent style across the shop grid, home cards and single product page
   (Woo's default is white-on-white in the grid and black on the product page). */
.onsale,
.wc-block-components-product-sale-badge,
.wc-block-grid__product-onsale,
.woocommerce span.onsale {
	background: var(--wp--preset--color--accent, #1b8a52) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 4px 12px !important;
	min-block-size: 0 !important;
	min-inline-size: 0 !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

/* Sale pricing — show the original price struck through next to the lower sale price, everywhere
   (shop grid, home/top-picks cards, single product, cart). The regular price is muted + lined out;
   the sale price stays bold so the drop is obvious. */
.price del,
.pwc-card__price del,
.pwc-hero__pricetag del,
.wc-block-components-product-price__regular {
	opacity: 1;
	font-weight: 400 !important;
	font-size: 0.85em;
	text-decoration: line-through;
	color: #888 !important;
	margin-inline-end: 0.4rem;
}
.price del .woocommerce-Price-amount,
.price del .amount,
.price del bdi,
.pwc-card__price del .amount,
.pwc-card__price del bdi,
.wc-block-components-product-price__regular .amount {
	color: #888 !important;
}
.price ins,
.pwc-card__price ins,
.wc-block-components-product-price__value.is-discounted {
	text-decoration: none;
	font-weight: 700;
}
.price ins .amount,
.price ins bdi,
.pwc-card__price ins .amount,
.pwc-card__price ins bdi {
	color: var(--wp--preset--color--accent, #1b8a52) !important;
}

/* Content pages (About, Contact, …) — full-width featured-image banner, then readable content. */
.pwc-page-hero { margin-block: 0 2.5rem; }
.pwc-page-hero img {
	inline-size: 100%;
	block-size: clamp(220px, 32vw, 420px);
	object-fit: cover;
	display: block;
}
.pwc-page { padding-block-end: 3rem; }
.pwc-page > .wp-block-post-title { margin-block: 0 1.25rem; }

/* ===========================================================================
   Blog — posts index (home.html) + single post (single.html). Mirrors the shop /
   search card styling and consumes the theme colour presets so the blog reads as
   part of the same store, not a default WordPress page.
   =========================================================================== */
/* Widen the constrained main to match shop/search (theme content size is 720px). */
main.pwc-blog {
	max-inline-size: 1280px;
	margin-inline: auto;
	padding-block: 2.5rem;
}
main.pwc-blog > * { max-inline-size: none; }

.pwc-blog__head { margin-block-end: 2rem; text-align: center; }
.pwc-blog__head h1 { margin-block: 0 0.5rem; }
.pwc-blog__sub { color: var(--wp--preset--color--body, #545453); margin: 0; }

/* Post grid cards (post-template renders a <ul> of <li> items). */
.pwc-blog__grid { gap: 1.5rem; }
.pwc-blog__grid > li {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	background: #fff;
	border: 1px solid var(--wp--preset--color--muted, #eaeaea);
	border-radius: 12px;
	padding: 12px;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pwc-blog__grid > li:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, .08);
	border-color: var(--wp--preset--color--accent, #1b8a52);
}
.pwc-post__img img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 16 / 9;
	object-fit: contain;
	border-radius: 8px;
	background: var(--wp--preset--color--background, #f9f9f8);
}
.pwc-post__body { gap: 0.5rem; padding-inline: 0.25rem; }
.pwc-post__meta,
.pwc-post__meta a {
	color: var(--wp--preset--color--accent, #1b8a52);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
}
.pwc-post__body .wp-block-post-title { margin: 0; line-height: 1.3; }
.pwc-post__body .wp-block-post-title a { color: var(--wp--preset--color--foreground, #141410); text-decoration: none; }
.pwc-post__body .wp-block-post-title a:hover { color: var(--wp--preset--color--accent, #1b8a52); }
.pwc-post__body .wp-block-post-excerpt { color: var(--wp--preset--color--body, #545453); font-size: 0.92rem; margin: 0; }
.pwc-post__body .wp-block-post-excerpt__more-text a { color: var(--wp--preset--color--accent, #1b8a52); font-weight: 600; text-decoration: none; }
.pwc-post__foot { margin-block-start: auto; }
.pwc-post__foot .wp-block-post-date { color: #8a8a8a; font-size: 0.8rem; }

/* Pagination — same pill look as the shop pager. */
.pwc-blog__pagination { gap: 0.4rem; margin-block-start: 2.5rem; flex-wrap: wrap; }
.pwc-blog__pagination .page-numbers,
.pwc-blog__pagination .wp-block-query-pagination-previous,
.pwc-blog__pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 40px;
	block-size: 40px;
	padding-inline: 0.5rem;
	border: 1px solid var(--wp--preset--color--muted, #eaeaea);
	border-radius: 8px;
	background: #fff;
	color: var(--wp--preset--color--foreground, #141410);
	text-decoration: none;
	font-size: 0.9rem;
}
.pwc-blog__pagination .page-numbers:hover,
.pwc-blog__pagination .wp-block-query-pagination-previous:hover,
.pwc-blog__pagination .wp-block-query-pagination-next:hover {
	border-color: var(--wp--preset--color--accent, #1b8a52);
	color: var(--wp--preset--color--accent, #1b8a52);
}
.pwc-blog__pagination .page-numbers.current {
	background: var(--wp--preset--color--accent, #1b8a52);
	border-color: var(--wp--preset--color--accent, #1b8a52);
	color: #fff;
	font-weight: 700;
}
@media (max-width: 781px) { .pwc-blog__grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 480px) { .pwc-blog__grid { grid-template-columns: 1fr !important; } }

/* --- Single post --- */
/* Same centred 1280px container as the homepage (theme content size is only 720px). */
.pwc-single {
	max-inline-size: 1280px;
	margin-inline: auto;
	padding-block: 2.5rem 3rem;
}
main.pwc-single > * { max-inline-size: none; }
.pwc-single-hero img {
	inline-size: 100%;
	block-size: clamp(220px, 34vw, 460px);
	object-fit: contain !important;
	background: var(--wp--preset--color--background, #f9f9f8);
	border-radius: 14px;
}
.pwc-single__cats,
.pwc-single__cats a {
	color: var(--wp--preset--color--accent, #1b8a52);
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
}
.pwc-single > .wp-block-post-title { margin-block: 0.75rem; }
.pwc-single__meta {
	gap: 1rem;
	align-items: center;
	color: var(--wp--preset--color--body, #545453);
	font-size: 0.9rem;
	padding-block-end: 1.25rem;
	margin-block-end: 1.5rem;
	border-block-end: 1px solid var(--wp--preset--color--muted, #eaeaea);
}
.pwc-single__meta .wp-block-post-author__name { font-weight: 600; color: var(--wp--preset--color--foreground, #141410); }
.pwc-single .wp-block-post-content { line-height: 1.75; }
.pwc-single .wp-block-post-content a { text-decoration: underline; }
.pwc-single__tags { gap: 0.5rem; margin-block-start: 2rem; }
.pwc-single__tags a {
	display: inline-block;
	padding: 0.3rem 0.7rem;
	background: var(--wp--preset--color--background, #f9f9f8);
	border: 1px solid var(--wp--preset--color--muted, #eaeaea);
	border-radius: 999px;
	font-size: 0.8rem;
	color: var(--wp--preset--color--body, #545453);
	text-decoration: none;
}
.pwc-single__tags a:hover { border-color: var(--wp--preset--color--accent, #1b8a52); color: var(--wp--preset--color--accent, #1b8a52); }
.pwc-single__nav {
	gap: 1rem;
	margin-block-start: 2.5rem;
	padding-block-start: 1.5rem;
	border-block-start: 1px solid var(--wp--preset--color--muted, #eaeaea);
}
.pwc-single__nav a { color: var(--wp--preset--color--foreground, #141410); text-decoration: none; font-weight: 600; }
.pwc-single__nav a:hover { color: var(--wp--preset--color--accent, #1b8a52); }

/* Comments */
.pwc-single .wp-block-comments { margin-block-start: 3rem; }
.pwc-comment {
	border: 1px solid var(--wp--preset--color--muted, #eaeaea);
	border-radius: 12px;
	padding: 1rem 1.1rem;
	margin-block-end: 1rem;
	gap: 0.5rem;
}
.pwc-comment__head { gap: 0.6rem; align-items: center; }
.pwc-comment__head .wp-block-comment-author-name,
.pwc-comment__head .wp-block-comment-author-name a { color: var(--wp--preset--color--foreground, #141410); font-weight: 600; text-decoration: none; }
.pwc-comment__head .wp-block-comment-date { color: #8a8a8a; }
.pwc-single .wp-block-post-comments-form { margin-block-start: 1.5rem; }

/* Storefront footer styles live in assets/css/footer.css (enqueued site-wide by inc/home.php). */

/* ===========================================================================
   Header (PHP, [pwc_header]) — desktop menu (wp_nav_menu), search pill, account
   icon, and the mobile hamburger → slide-in drawer. The Mini-Cart stays a block.
   =========================================================================== */
/* Desktop primary menu */
.pwc-nav { flex: 1 1 auto; min-inline-size: 0; display: flex; justify-content: center; }
.pwc-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.25rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	font-weight: 500;
}
.pwc-menu li { position: relative; }
.pwc-menu a {
	display: block;
	padding: 0.4rem 0.2rem;
	color: var(--wp--preset--color--foreground, #141410);
	text-decoration: none;
}
.pwc-menu a:hover,
.pwc-menu .current-menu-item > a,
.pwc-menu .current-menu-parent > a { color: var(--wp--preset--color--accent, #1b8a52); }
/* Desktop dropdown submenu */
.pwc-menu .sub-menu {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	min-inline-size: 200px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--wp--preset--color--muted, #eaeaea);
	border-radius: 10px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
	z-index: 50;
}
.pwc-menu li:hover > .sub-menu,
.pwc-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.pwc-menu .sub-menu a { white-space: nowrap; padding: 0.5rem 0.75rem; border-radius: 6px; }
.pwc-menu .sub-menu a:hover { background: var(--wp--preset--color--background, #f9f9f8); }

/* Search pill (a real <form> now) */
.pwc-product-search {
	display: flex;
	align-items: center;
	max-inline-size: 240px;
	border: 1px solid var(--wp--preset--color--muted, #eaeaea);
	border-radius: 999px;
	background: #f4f5f6;
	overflow: hidden;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.pwc-product-search:focus-within {
	border-color: var(--wp--preset--color--accent, #1b8a52);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(27, 138, 82, .12);
}
.pwc-product-search input[type="search"] {
	flex: 1;
	min-inline-size: 0;
	border: 0;
	background: transparent;
	padding: 0.5rem 0.25rem 0.5rem 1rem;
	font-size: 0.9rem;
	color: var(--wp--preset--color--foreground, #141410);
	outline: none;
}
.pwc-product-search button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	padding: 0 0.7rem 0 0.45rem;
	cursor: pointer;
	color: var(--wp--preset--color--accent, #1b8a52);
}

/* Account icon link */
.site-header__tools .pwc-account { display: inline-flex; align-items: center; flex-shrink: 0; }
.site-header__tools .pwc-account svg { display: block; }

/* Hamburger (mobile only) + its hidden state checkbox */
.pwc-nav-toggle {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	opacity: 0;
	pointer-events: none;
}
.pwc-nav-open {
	display: none; /* shown ≤900px */
	align-items: center;
	flex-shrink: 0;
	cursor: pointer;
	color: var(--wp--preset--color--foreground, #141410);
}
.pwc-nav-open svg { display: block; }

/* Backdrop behind the open mobile drawer (only active on mobile, below). */
.pwc-nav-backdrop { display: none; }

/* Mobile: the SAME single menu becomes a left slide-in drawer (no duplicate copy). */
@media (max-width: 900px) {
	.pwc-nav-open { display: inline-flex; }
	.site-header__tools .pwc-product-search { display: none; }

	.pwc-nav {
		position: fixed;
		inset-block: 0;
		inset-inline-start: 0;
		z-index: 100000;
		display: block;
		inline-size: min(320px, 85vw);
		padding: 4.5rem 1.25rem 1.5rem;
		background: #fff;
		box-shadow: 4px 0 30px rgba(0, 0, 0, 0.15);
		transform: translateX(-100%);
		transition: transform .25s ease;
		overflow-y: auto;
	}
	#pwc-nav-toggle:checked ~ .site-header__row .pwc-nav { transform: translateX(0); }

	.pwc-nav-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 99999;
		background: rgba(0, 0, 0, 0.5);
		opacity: 0;
		visibility: hidden;
		transition: opacity .25s ease;
	}
	#pwc-nav-toggle:checked ~ .pwc-nav-backdrop { opacity: 1; visibility: visible; }

	/* Stack the items full-width, left-aligned. */
	.pwc-menu {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
	}
	.pwc-menu > li { border-block-end: 1px solid var(--wp--preset--color--muted, #eaeaea); }
	.pwc-menu a { padding: 0.85rem 0.25rem; font-size: 1rem; }
	/* Submenus: static + indented (no hover dropdown on touch). */
	.pwc-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: 0;
		box-shadow: none;
		min-inline-size: 0;
		padding: 0 0 0 0.75rem;
	}
	.pwc-menu .sub-menu a { white-space: normal; font-weight: 400; }
}

/* §1/§3 — honor reduced-motion: kill non-essential transitions/animations. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ───────────────────────────────────────────────────────────────────────────
   Design tweaks (appended): sale badge + single-product variation options.
   Placed last so they win over the earlier rules by source order.
   ─────────────────────────────────────────────────────────────────────────── */

/* Sale badge — solid black and larger/more prominent (was green). */
.onsale,
.wc-block-components-product-sale-badge,
.wc-block-grid__product-onsale,
.woocommerce span.onsale {
	background: #141410 !important;
	color: #fff !important;
	font-size: 15px !important;
	padding: 6px 15px !important;
	line-height: 1.35 !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .2) !important;
}
@media (max-width: 600px) {
	.onsale,
	.wc-block-components-product-sale-badge,
	.wc-block-grid__product-onsale,
	.woocommerce span.onsale {
		font-size: 16px !important;
		padding: 7px 16px !important;
	}
}

/* Single-product variation options (RAM, storage, colour, …) — the default
   WooCommerce dropdowns are too small, especially on mobile. Make them full
   width, comfortable to tap, and stack the label above each dropdown on phones. */
.woocommerce div.product form.cart table.variations {
	inline-size: 100%;
	border-collapse: collapse;
	/* Anchor + reserve the footer strip that the "Clear" link is positioned into (see the
	   .reset_variations rule below). The padding supplies most of the gap under the table now, so
	   the margin drops from 1.25rem to keep the overall spacing roughly as it was. */
	position: relative;
	padding-block-end: 1.35rem;
	margin-block-end: .5rem;
}
.woocommerce div.product form.cart table.variations th.label,
.woocommerce div.product form.cart table.variations td.label {
	font-size: 1rem;
	font-weight: 700;
	color: #141410;
	padding-block: .5rem;
	padding-inline-end: 1rem;
	vertical-align: middle;
}
/* Give the dropdown cell the SAME vertical padding as its label cell.
   woocommerce-blocktheme.css (loaded because this is a block theme) sets
   `table.variations tr td { padding-bottom: var(--wp--style--block-gap) }` — 24px here. The label
   rule above is specific enough to override it, but the value cell was not, so every dropdown had
   a 24px dead gap under it. That mismatch also defeated `vertical-align: middle`: it centres a
   cell's content within that cell's OWN content box, so a 0/24px cell and an 8/8px cell centre
   their contents ~12px apart — which is why the label never lined up with its dropdown. Equal
   padding fixes the gap and the alignment together. Desktop-only bug: the mobile block below
   already re-set this padding. */
.woocommerce div.product form.cart table.variations td.value {
	padding-block: .5rem;
	line-height: 1.4;
	vertical-align: middle;
}
.woocommerce div.product form.cart table.variations td.value select {
	/* Core styles the select `display: inline-block`, so it sits on the text baseline and the
	   cell's `line-height: 2em` strut reserves further dead space beneath it — a block box has no
	   baseline to sit on. `margin: 0` drops core's `margin-right: 1em`, which fights a 100%-wide
	   select. */
	display: block;
	inline-size: 100%;
	margin: 0;
	min-block-size: 48px;
	padding: .7rem 2.25rem .7rem .9rem;
	font-size: 1rem;
	line-height: 1.3;
	color: #141410;
	border: 1px solid var(--wp--preset--color--muted, #eaeaea);
	border-radius: 8px;
	background-color: #fff;
	cursor: pointer;
}
/* WooCommerce renders the "Clear" link INSIDE the last row's value cell, and its JS hides it with
   `visibility` alone (toggleResetLink: `.css( 'visibility', 'hidden' )` — it never sets `display`).
   So while invisible it still occupied a line, inflating that one cell; because `vertical-align:
   middle` centres content against the CELL, that row's label drifted off its dropdown. Lift the
   link out of flow so it can't affect any row's height, and drop it into the fixed strip reserved
   at the foot of the table above — the slot exists whether or not the link is showing, so
   revealing it shifts nothing. Don't use `display: none` here: the JS reveals the link via
   jQuery's `.hide().fadeIn()`, which would fight a display rule. */
.woocommerce div.product form.cart .reset_variations {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	display: inline-block;
	margin: 0;
	font-size: .9rem;
	line-height: 1.5;
}
@media (max-width: 600px) {
	.woocommerce div.product form.cart table.variations,
	.woocommerce div.product form.cart table.variations tbody,
	.woocommerce div.product form.cart table.variations tr,
	.woocommerce div.product form.cart table.variations th,
	.woocommerce div.product form.cart table.variations td {
		display: block;
		inline-size: 100%;
		text-align: start;
	}
	.woocommerce div.product form.cart table.variations th.label,
	.woocommerce div.product form.cart table.variations td.label {
		padding: 0 0 .35rem;
		font-size: 1.1rem;
	}
	.woocommerce div.product form.cart table.variations td.value {
		padding: 0 0 1rem;
	}
	.woocommerce div.product form.cart table.variations td.value select {
		min-block-size: 54px;
		font-size: 1.1rem;
	}
}

/*
 * Blog index + single post: widen the content container to match the Home page (1280px). The
 * block templates use the constrained layout, which defaults to theme.json's 720px content /
 * 1200px wide. Overriding the two global layout size variables on the blog <main> cascades to the
 * constrained query / post-content inside, so posts share the Home page's container width.
 */
.blog main.wp-block-group,
.single-post main.wp-block-group {
	--wp--style--global--content-size: 1280px;
	--wp--style--global--wide-size: 1280px;
}