/* ==========================================================================
   Brrr — woocommerce.css  (loads after WooCommerce's own styles; variable-driven)
   ========================================================================== */

.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {
	background: var(--surface); color: var(--text); border: 1px solid var(--border);
	border-left: 4px solid var(--accent); border-radius: var(--radius-sm); padding: 1rem 1.2rem; list-style: none;
}
.woocommerce-error { border-left-color: var(--sale-text); }
/* Room for core's ::before icon, which sits absolutely at the left edge. */
.woocommerce-message, .woocommerce-info, .woocommerce-error { position: relative; padding-left: 3rem; }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { left: 1.1rem; top: 1rem; }
.woocommerce-message::before, .woocommerce-info::before { color: var(--accent-text); }
.woocommerce-error::before { color: var(--sale-text); }
/* WooCommerce focuses new notices for screen readers; the focus ring on a static box only looks like a second border. */
.woocommerce-message:focus, .woocommerce-info:focus, .woocommerce-error:focus, .woocommerce-notices-wrapper:focus { outline: none; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce .button {
	background: var(--surface); color: var(--text); border: 1px solid var(--border);
	border-radius: var(--radius-sm); min-height: 44px; padding: .7rem 1.2rem; font-weight: 600; transition: .15s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button:hover { border-color: var(--accent-text); color: var(--accent-text); background: var(--surface); }
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce #respond input#submit.alt, .woocommerce .single_add_to_cart_button {
	background: var(--accent); color: var(--accent-contrast); border-color: var(--accent);
}
/* Hover: invert accent buttons to an accent outline (matching the nav) instead of
   WooCommerce core's default mauve fill (#a46497) — core's rule leaked through
   because our previous hover set no background of its own. */
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover, .woocommerce #respond input#submit.alt:hover,
.woocommerce .single_add_to_cart_button:hover {
	background: transparent; color: var(--accent-text); border-color: var(--accent-text); filter: none;
}
/* Disabled (no variation chosen yet): core paints it purple; keep the accent, dimmed. */
.woocommerce a.button.alt.disabled, .woocommerce button.button.alt.disabled, .woocommerce button.button.alt:disabled,
.woocommerce a.button.alt.disabled:hover, .woocommerce button.button.alt.disabled:hover, .woocommerce button.button.alt:disabled:hover {
	background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); opacity: .5; cursor: not-allowed;
}
/* Store notice (WooCommerce > Customize): theme colours instead of core violet. */
.woocommerce-store-notice, p.demo_store { background: var(--accent); color: var(--accent-contrast); font-weight: 600; }
.woocommerce-store-notice a, p.demo_store a { color: inherit; text-decoration: underline; }

/* ---------------- Product loop grid ---------------- */
.woocommerce ul.products, .woocommerce-page ul.products {
	display: grid; gap: clamp(.8rem, 2vw, 1.6rem); margin: 0 0 2rem; padding: 0; list-style: none;
	grid-template-columns: repeat(2, 1fr);
}
/* WooCommerce core adds a table clearfix ::before/::after on ul.products —
   in a grid container those pseudo-elements become empty grid cells. */
.woocommerce ul.products::before, .woocommerce ul.products::after,
.woocommerce-page ul.products::before, .woocommerce-page ul.products::after { display: none; content: none; }
@media (min-width: 720px) {
	.woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
	.woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
	.woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
}
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
	position: relative; width: auto !important; margin: 0 !important; float: none !important;
	background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow);
	border-radius: var(--radius); overflow: hidden; padding: 0; display: flex; flex-direction: column;
	transition: transform .15s ease, border-color .2s ease;
}
.woocommerce ul.products li.product:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.woocommerce ul.products li.product a img { margin: 0; border-radius: 0; aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1rem; font-weight: 600; padding: .8rem .9rem 0; font-family: var(--font-body);
}
.woocommerce ul.products li.product .price {
	display: block; padding: .3rem .9rem 0; color: var(--accent-text); font-weight: 700; margin: 0;
}
.woocommerce ul.products li.product .price del { color: var(--muted); font-weight: 400; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .star-rating { margin: .4rem .9rem 0; font-size: .8rem; }
/* margin-top:auto pins the button to the card bottom so buttons line up across a
   row regardless of title/price line-count (grid already stretches cards equal). */
.woocommerce ul.products li.product .button, .woocommerce ul.products li.product .added_to_cart {
	margin: auto .9rem 1rem; text-align: center; align-self: stretch;
}
/* Two-up cards on phones: keep "Select options" on one line. */
@media (max-width: 479px) {
	.woocommerce ul.products li.product .button { padding-inline: .5rem; font-size: .9rem; white-space: nowrap; }
}
.woocommerce ul.products li.product .brrr-loop-link { display: block; }

/* Card hover actions (wishlist / quick view) */
.brrr-card-actions { position: absolute; top: .6rem; right: .6rem; z-index: 3; display: flex; flex-direction: column; gap: .4rem; opacity: 0; transform: translateX(6px); transition: .2s ease; }
li.product:hover .brrr-card-actions, li.product:focus-within .brrr-card-actions { opacity: 1; transform: none; }
@media (hover: none) { .brrr-card-actions { opacity: 1; transform: none; } }
.brrr-wish, .brrr-quick {
	width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border);
	background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--text);
	display: inline-flex; align-items: center; justify-content: center; backdrop-filter: blur(4px);
}
.brrr-wish:hover, .brrr-quick:hover { border-color: var(--accent-text); color: var(--accent-text); }
.brrr-wish.is-active { color: var(--sale-text); border-color: var(--sale-text); }
.brrr-wish.is-active .brrr-icon { fill: var(--sale); }

/* ---------------- Single product ---------------- */
.single-product div.product { display: grid; column-gap: clamp(1.5rem, 4vw, 3rem); row-gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 860px) { .single-product div.product { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; } }
/* Tabs / related / up-sells span the full width below the gallery+summary row
   (otherwise grid auto-placement drops them into the columns side by side). */
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .related,
.single-product div.product > .upsells,
.single-product div.product > .brrr-strip-slot { grid-column: 1 / -1; }
.single-product div.product .woocommerce-product-gallery { margin: 0; float: none; width: auto !important; align-self: start; }
.single-product div.product .woocommerce-product-gallery__image img { border-radius: var(--radius); }
.single-product div.product .summary { margin: 0; float: none; width: auto !important; }
.single-product .product_title { margin-top: 0; }
/* Full-width, centred title row above the gallery + summary columns (relocated
   in inc/single-product.php). grid-column:1/-1 spans both tracks. */
.single-product div.product .brrr-single-title { grid-column: 1 / -1; margin: 0 0 .5rem; }
.single-product div.product .brrr-single-title .product_title { margin: 0; }
.single-product div.product p.price, .single-product div.product span.price { color: var(--accent-text); font-weight: 700; font-size: 1.6rem; }
.single-product div.product p.price del { color: var(--muted); font-weight: 400; font-size: 1.1rem; }
/* Stock pill sits to the LEFT of the price on one line (pill is rendered at
   prio 9, before the price at prio 10); both are inline-level so they wrap onto
   separate lines on narrow mobile. */
.single-product div.product .brrr-stock { display: inline-flex; vertical-align: middle; margin: 0 .75rem .6rem 0; }
/* column-gap: flex drops the whitespace between amount, dash and suffix. */
.single-product div.product p.price { display: inline-flex; align-items: baseline; flex-wrap: wrap; column-gap: .3em; vertical-align: middle; margin: 0 0 .6rem; }
.brrr-stock-pill { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; padding: .38rem .8rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); white-space: nowrap; }
.brrr-stock-pill .brrr-icon { flex: none; }
.brrr-stock--in { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.brrr-stock--out { color: var(--sale-text); border-color: color-mix(in srgb, var(--sale) 45%, var(--border)); }
/* Per-variation availability line from WooCommerce (core uses fixed olive/red). */
.woocommerce div.product .stock.in-stock, .woocommerce div.product .stock.available-on-backorder { color: var(--ok); }
.woocommerce div.product .stock.out-of-stock { color: var(--sale-text); }
.brrr-leadtime { display: inline-block; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: .5rem .8rem; font-size: .9rem; }

/* Detail line below the price: delivery estimate / preorder ETA (not the stock state). */
.brrr-avail { display: flex; flex-wrap: wrap; gap: .5rem; margin: .2rem 0 1rem; }
.brrr-avail-item { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; font-weight: 600; padding: .35rem .75rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); }
.brrr-avail-item .brrr-icon { flex: none; }
/* WooCommerce injects a per-variation "Available on backorder" line into
   .single_variation (between the price and the add-to-cart button) — it
   duplicates the stock pill + .brrr-avail note above, so hide it. Out-of-stock /
   low-stock variation availability is left visible. */
.single-product .single_variation_wrap .available-on-backorder { display: none; }
.brrr-avail--pre { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.brrr-avail--ship { color: var(--text); }
.woocommerce div.product form.cart { margin: 1.2rem 0; }
.woocommerce div.product form.cart .quantity input.qty {
	background: var(--surface); border: 1px solid var(--border); color: var(--text);
	border-radius: var(--radius-sm); height: 48px; width: 72px; text-align: center;
}
.woocommerce div.product form.cart .single_add_to_cart_button { min-height: 48px; padding: 0 1.6rem; }

/* Variation swatches (compat with common swatch plugins + native selects) */
/* Stack label above the swatches so the swatches sit flush-left, aligned with
   the title/price/button (default table layout indents them by the label col). */
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .variations tbody,
.woocommerce div.product form.cart .variations tr,
.woocommerce div.product form.cart .variations th.label,
.woocommerce div.product form.cart .variations td.value { display: block; width: auto; }
.woocommerce div.product form.cart .variations { border: 0; margin-bottom: 1rem; }
.woocommerce div.product form.cart .variations th.label { padding: 0 0 .2rem; text-align: left; font-weight: 600; }
.woocommerce div.product form.cart .variations td, .woocommerce div.product form.cart .variations th { padding: .35rem 0; }
.woocommerce div.product form.cart .variations select {
	background: var(--surface); border: 1px solid var(--border); color: var(--text);
	border-radius: var(--radius-sm); min-height: 44px; padding: 0 .8rem;
}
ul.brrr-swatches, .variations ul { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.brrr-swatch, .swatch {
	min-width: 40px; height: 40px; border-radius: var(--radius-sm); border: 2px solid var(--border);
	display: inline-flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; padding: 0;
}
.brrr-swatch.is-selected, .swatch.selected { border-color: var(--accent-text); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }
.brrr-swatch img, .swatch img { width: 100%; height: 100%; object-fit: cover; }
/* Colour swatches inline with the add-to-cart button (JS moves the swatch box
   into .single_variation_wrap and hides the colour table row). Price/variation
   sits full-width on top; swatches left, quantity + button right. */
.woocommerce div.product form.cart .single_variation_wrap.brrr-var-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem; }
.brrr-var-inline .single_variation { order: 0; flex: 1 1 100%; margin: 0; }
.brrr-var-inline .brrr-swatches { order: 1; margin: 0; }
.brrr-var-inline .woocommerce-variation-add-to-cart { order: 2; margin: 0; display: flex; align-items: flex-end; gap: .5rem; }

/* Non-colour variation attributes (Product Type etc.) as selectable pill buttons. */
.brrr-attr-buttons { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: .15rem 0 0; padding: 0; }
.brrr-attr-btn { min-height: 40px; padding: .45rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-weight: 600; font-size: .9rem; cursor: pointer; transition: border-color .15s ease, color .15s ease, box-shadow .15s ease; }
.brrr-attr-btn:hover { border-color: var(--accent-text); }
.brrr-attr-btn.is-selected { border-color: var(--accent-text); color: var(--accent-text); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 1.2rem; display: flex; flex-wrap: wrap; gap: .3rem; border-bottom: 1px solid var(--border); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent; border: 0; border-radius: 0; margin: 0; padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: .7rem 1rem; display: block; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; }
/* Core paints the ACTIVE tab white (higher specificity via li.active) which is
   unreadable in dark mode — override it back to transparent/token colours. */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: transparent; border-color: transparent; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--text); background: transparent; border-bottom-color: var(--accent-text); }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }

/* Tab panels: token-driven so they read in dark AND light (no stray backgrounds,
   themed links, framed images). */
.woocommerce div.product .woocommerce-tabs .panel { color: var(--text); background: transparent; }
.woocommerce div.product .woocommerce-Tabs-panel > h2:first-child { margin-top: 0; }
/* Product copy imported from the old site uses h1 inside the description:
   keep it below the product title in the hierarchy. */
.woocommerce div.product .woocommerce-Tabs-panel h1 { font-size: clamp(calc(1.4rem * var(--scale)), calc(1rem + 2vw), calc(2.1rem * var(--scale))); }
.woocommerce div.product .woocommerce-Tabs-panel a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.woocommerce div.product .woocommerce-Tabs-panel img { border-radius: var(--radius-sm); }
/* Additional-information table: WooCommerce core draws it with black hairline
   borders (rgba(0,0,0,.1)) that vanish on dark — repaint with theme tokens. */
.woocommerce table.shop_attributes { border: 1px solid var(--border); border-radius: var(--radius-sm); border-collapse: separate; overflow: hidden; }
.woocommerce table.shop_attributes th, .woocommerce table.shop_attributes td { border: 0; border-top: 1px solid var(--border); padding: .6rem .85rem; line-height: 1.5; }
.woocommerce table.shop_attributes tr:first-child th, .woocommerce table.shop_attributes tr:first-child td { border-top: 0; }
.woocommerce table.shop_attributes th { color: var(--text); font-weight: 700; }
.woocommerce table.shop_attributes td { color: var(--muted); font-style: normal; }
.woocommerce table.shop_attributes tr:nth-child(even) th, .woocommerce table.shop_attributes tr:nth-child(even) td { background: color-mix(in srgb, var(--surface) 60%, transparent); }

/* Related / upsells */
.woocommerce .related > h2, .woocommerce .upsells > h2, .woocommerce .cross-sells > h2 { font-family: var(--font-heading); margin: 2.5rem 0 1.2rem; }

/* Star rating color */
.woocommerce .star-rating span::before, .woocommerce p.stars a::before { color: var(--accent-text); }

/* ---------------- Shop layout / sidebar ---------------- */
.brrr-shop-wrap { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); padding-bottom: 3rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .brrr-shop-wrap.has-sidebar { grid-template-columns: 280px minmax(0, 1fr); } }
.brrr-shop-sidebar .widget { margin-bottom: 1.8rem; }
.woocommerce .woocommerce-result-count { color: var(--muted); }
.woocommerce .woocommerce-ordering select {
	background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); min-height: 44px; padding: 0 .8rem;
}

/* ---------------- Cart & checkout ---------------- */
.woocommerce table.shop_table { border: 1px solid var(--border); border-radius: var(--radius); border-collapse: separate; overflow: hidden; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-top: 1px solid var(--border); }
.woocommerce table.cart img { width: 64px; border-radius: var(--radius-sm); }
.woocommerce .cart-collaterals .cart_totals, .woocommerce-checkout #order_review, .woocommerce form.checkout_coupon,
.woocommerce-checkout .woocommerce-checkout-review-order {
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem;
}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row textarea.input-text,
.woocommerce .select2-container--default .select2-selection,
.woocommerce .quantity input.qty, .woocommerce table.cart td.actions .coupon .input-text, .c4wp_user_input_captcha {
	background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); min-height: 46px; padding: .6rem .8rem;
}
.woocommerce #payment, .woocommerce-checkout #payment { background: transparent; }
.woocommerce .quantity input.qty { width: 4.5rem; text-align: center; padding-inline: .4rem; }
.woocommerce table.cart td.actions .coupon .input-text { width: 11rem; margin-right: .5rem; }
/* WP Captcha's math field (checkout, contact form): inline width stays, look follows the theme. */
.c4wp_user_input_captcha { min-width: 4rem; text-align: center; }

/* ---------------- Mini cart in drawer ---------------- */
.brrr-drawer-cart ul.woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; }
.brrr-drawer-cart .woocommerce-mini-cart-item { display: flex; gap: .8rem; align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--border); }
.brrr-drawer-cart .woocommerce-mini-cart-item img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); order: -1; margin: 0; }
.brrr-drawer-cart a.remove { color: var(--sale) !important; }
.brrr-drawer-cart .woocommerce-mini-cart__total { display: flex; justify-content: space-between; padding: 1rem 0; font-size: 1.05rem; border-top: 1px solid var(--border); margin-top: .5rem; }
.brrr-drawer-cart .woocommerce-mini-cart__buttons { display: flex; flex-direction: column; gap: .5rem; }
.brrr-drawer-cart .woocommerce-mini-cart__buttons .button { width: 100%; text-align: center; }
.brrr-drawer-cart .woocommerce-mini-cart__buttons .checkout { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.brrr-drawer-cart p.woocommerce-mini-cart__empty-message { color: var(--muted); text-align: center; padding: 2rem 0; }

/* ---------------- Free shipping bar ---------------- */
.brrr-ship-bar { margin-bottom: 1.2rem; }
.brrr-ship-msg { font-size: .88rem; margin: 0 0 .5rem; }
.brrr-ship-track { height: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.brrr-ship-track span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .4s ease; }

/* ---------------- Quick view ---------------- */
.brrr-qv { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 680px) { .brrr-qv { grid-template-columns: 1fr 1fr; } }
.brrr-qv-media { position: relative; }
.brrr-qv-img { border-radius: var(--radius); width: 100%; }
.brrr-qv-title { margin-top: 0; }
.brrr-qv-price { color: var(--accent-text); font-weight: 700; font-size: 1.4rem; margin-bottom: .8rem; }
.brrr-qv-desc { color: var(--muted); margin-bottom: 1.2rem; }
.brrr-qv-more { display: inline-block; margin: 1rem 0 0 1rem; color: var(--accent-text); font-weight: 600; }

/* ---------------- Shipment tracking (order view) ---------------- */
.brrr-tracking { margin: 2rem 0; }
.brrr-tracking-list { list-style: none; margin: 0; padding: 0; }
.brrr-tracking-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; padding: .8rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); margin-bottom: .5rem; }
.brrr-tracking-carrier { font-weight: 700; }
.brrr-tracking-num { color: var(--muted); font-family: ui-monospace, monospace; }
.brrr-tracking-btn { margin-left: auto; min-height: 38px; padding: .4rem 1rem; }

/* ---------------- Sticky add-to-cart (mobile) ---------------- */
.brrr-sticky-atc {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 180; transform: translateY(110%);
	background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px);
	border-top: 1px solid var(--border); padding: .6rem clamp(1rem, 4vw, 2rem);
	display: flex; align-items: center; gap: 1rem; transition: transform .25s ease;
}
.brrr-sticky-atc.is-visible { transform: translateY(0); }
.brrr-sticky-atc .brrr-satc-title { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brrr-sticky-atc .brrr-satc-price { color: var(--accent-text); font-weight: 700; }
.brrr-sticky-atc .brrr-btn { white-space: nowrap; }
@media (min-width: 860px) { .brrr-sticky-atc { display: none; } }
/* Keep back-to-top clickable above the sticky ATC bar. */
body:has(.brrr-sticky-atc.is-visible) .brrr-top { bottom: calc(1rem + 72px); }

/* ==========================================================================
   Faceted shop sidebar
   ========================================================================== */
.brrr-facets { display: flex; flex-direction: column; gap: 1.25rem; }
.brrr-facet { border: 0; margin: 0; }
.brrr-facet-title { font-size: .95rem; font-family: var(--font-heading); font-weight: 600; margin: 0 0 .6rem; cursor: default; }
details.brrr-facet > summary.brrr-facet-title { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
details.brrr-facet > summary::-webkit-details-marker { display: none; }
details.brrr-facet > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s ease; }
details.brrr-facet[open] > summary::after { transform: rotate(-135deg); }

/* Sidebar search */

/* Category tree */
.brrr-cat-list { list-style: none; margin: 0; padding: 0; }
.brrr-cat-list a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .4rem .5rem; border-radius: var(--radius-sm); color: var(--muted); }
.brrr-cat-list a:hover { background: var(--surface); color: var(--text); }
.brrr-cat-list .is-current > a { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); font-weight: 600; }
.brrr-cat-parent a { color: var(--muted); font-size: .85rem; }
.brrr-cat-n { color: var(--muted); font-size: .75rem; background: var(--surface); border-radius: 999px; padding: 0 .45rem; min-width: 22px; text-align: center; }
.brrr-cat-children { list-style: none; margin: .2rem 0 .2rem .6rem; padding-left: .6rem; border-left: 1px solid var(--border); }

/* Active chips */
.brrr-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.brrr-chip { display: inline-flex; align-items: center; gap: .35rem; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: .45rem .75rem; font-size: .8rem; min-height: 36px; }
.brrr-chip:hover { border-color: var(--sale-text); color: var(--sale-text); }
.brrr-chip span { font-weight: 700; }
.brrr-chip-clear { font-size: .8rem; color: var(--accent-text); align-self: center; text-decoration: underline; }

/* Price slider */
.brrr-price-slider { position: relative; height: 34px; margin: .3rem 0 .6rem; }
.brrr-price-slider input[type="range"] { position: absolute; top: 0; left: 0; width: 100%; height: 34px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.brrr-price-slider input[type="range"]::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.brrr-price-slider input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); cursor: pointer; }
.brrr-price-slider input[type="range"]::-webkit-slider-runnable-track { background: none; }
.brrr-price-track { position: absolute; top: 15px; left: 2px; right: 2px; height: 4px; background: var(--border); border-radius: 2px; }
.brrr-price-track span { position: absolute; height: 100%; background: var(--accent); border-radius: 2px; }
.brrr-price-inputs { display: flex; align-items: center; gap: .4rem; }
.brrr-price-inputs input { width: 100%; background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: .4rem .5rem; min-height: 38px; }
.brrr-price-apply { margin-top: .6rem; width: 100%; }

/* Toggles */
.brrr-toggles { display: flex; flex-direction: column; gap: .4rem; }
.brrr-toggle, .brrr-check { display: flex; align-items: center; gap: .5rem; color: var(--muted); padding: .3rem .1rem; }
.brrr-toggle:hover, .brrr-check:hover { color: var(--text); }
.brrr-toggle-box, .brrr-check-box { width: 18px; height: 18px; border: 2px solid var(--border); border-radius: 5px; flex: none; position: relative; transition: .15s ease; }
.brrr-toggle.is-on .brrr-toggle-box, .brrr-check.is-on .brrr-check-box { background: var(--accent); border-color: var(--accent-text); }
.brrr-toggle.is-on .brrr-toggle-box::after, .brrr-check.is-on .brrr-check-box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 4px; height: 9px; border: solid var(--accent-contrast); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.brrr-toggle.is-on, .brrr-check.is-on { color: var(--text); }

/* Checkbox facet lists */
.brrr-check-list { list-style: none; margin: 0; padding: 0; }
.brrr-check-list.is-clamped { max-height: 210px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.brrr-check-label { flex: 1; }
.brrr-show-more { margin-top: .4rem; background: none; border: 0; color: var(--accent-text); font-weight: 600; font-size: .85rem; padding: .2rem 0; }

/* "Show more filters": less-used facets, folded away */
.brrr-more-facets { margin: 0; }
.brrr-more-facets-toggle { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; list-style: none; color: var(--accent-text); font-weight: 600; font-size: .9rem; padding: .2rem 0; }
.brrr-more-facets-toggle::-webkit-details-marker { display: none; }
.brrr-more-facets-toggle::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; }
.brrr-more-facets[open] > .brrr-more-facets-toggle::after { transform: rotate(-135deg) translateY(-2px); }
.brrr-more-facets .brrr-more-open, .brrr-more-facets[open] .brrr-more-closed { display: none; }
.brrr-more-facets[open] .brrr-more-open { display: inline; }
.brrr-more-facets-body { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1rem; }
@media (prefers-reduced-motion: reduce) { .brrr-more-facets-toggle::after { transition: none; } }

/* Swatches (sidebar + single product) */
.brrr-swatch-grid, ul.brrr-swatches { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: .2rem 0 0; padding: 0; }
.brrr-swatch { display: inline-flex; padding: 3px; border: 2px solid var(--border); border-radius: 50%; background: none; cursor: pointer; }
.brrr-swatch:hover { border-color: var(--muted); }
.brrr-swatch.is-selected { border-color: var(--accent-text); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }
.brrr-swatch-dot { width: 26px; height: 26px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 22%, transparent); }

/* Rating facet */
.brrr-rating-list { list-style: none; margin: 0; padding: 0; }
.brrr-rating { display: flex; align-items: center; gap: .4rem; color: var(--muted); padding: .3rem .1rem; }
.brrr-rating:hover, .brrr-rating.is-on { color: var(--text); }
.brrr-stars { color: var(--accent-text); letter-spacing: 1px; }

/* Sidebar layout: desktop sticky, mobile drawer */
.brrr-sidebar-head, .brrr-filter-toggle { display: none; }
@media (min-width: 900px) {
	.brrr-shop-sidebar { position: sticky; top: 84px; align-self: start; max-height: calc(100dvh - 100px); overflow-y: auto; padding-right: .4rem; }
}
@media (max-width: 899px) {
	.brrr-filter-toggle { display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start; background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: .6rem 1rem; min-height: 44px; font-weight: 600; margin-bottom: 1rem; }
	.brrr-shop-sidebar { position: fixed; top: 0; left: 0; height: 100vh; height: 100dvh; width: min(90vw, 360px); z-index: 310; background: var(--bg); transform: translateX(-100%); transition: transform .28s cubic-bezier(.4,0,.2,1); overflow-y: auto; padding: 0 1.1rem 2rem; }
	.brrr-shop-sidebar.is-open { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.5); }
	.brrr-sidebar-head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: var(--bg); padding: 1rem 0; margin-bottom: .5rem; border-bottom: 1px solid var(--border); font-family: var(--font-heading); font-weight: 700; z-index: 2; }
	.brrr-filter-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 300; opacity: 0; transition: opacity .25s ease; }
	.brrr-filter-overlay.is-open { opacity: 1; }
}
.brrr-extra-widgets .widget { margin-top: 1rem; }

/* ---------------- In-stock notification ---------------- */
.brrr-notify { margin: .25rem 0 1.1rem; padding: .9rem 1rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); max-width: 480px; }
.brrr-notify-lead { margin: 0 0 .6rem; font-size: .9rem; font-weight: 600; color: var(--text); }
.brrr-notify-row { display: flex; gap: .5rem; }
.brrr-notify-row input[type="email"] { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); }
.brrr-notify-row .brrr-btn { flex: none; min-height: 44px; }
.brrr-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.brrr-notify-note { margin: .55rem 0 0; font-size: .78rem; color: var(--muted); }
.brrr-notify-msg { margin: .55rem 0 0; font-size: .85rem; font-weight: 600; color: var(--sale-text, var(--sale)); }
.brrr-notify-msg:empty { display: none; }
.brrr-notify-msg.is-ok { color: var(--ok); }

/* ---------------- Load more ---------------- */
.brrr-loadmore { text-align: center; margin: 1.75rem 0 .5rem; }
.brrr-loadmore .brrr-btn { min-width: 220px; min-height: 44px; }
.brrr-pag-off { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* keep crawlable, hide visually */

/* ---------------- Injected strip (recently viewed) ---------------- */
.brrr-strip-slot .brrr-home-section { margin-top: 2.5rem; }

/* ---------------- "Works with" on the product page (inc/single-product.php) ---------------- */
.brrr-works-with { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .9rem 0 1.1rem; font-size: .9rem; }
.brrr-works-label { color: var(--muted); margin-right: .15rem; }
.brrr-works-chip { border: 1px solid var(--border); border-radius: 999px; padding: .2rem .75rem; color: var(--text); text-decoration: none; background: var(--surface); }
.brrr-works-chip:hover, .brrr-works-chip:focus-visible { border-color: var(--accent-text); color: var(--accent-text); }