/* ==========================================================================
   Brrr — main.css  (mobile-first; every color/size comes from CSS variables
   set by inc/dynamic-css.php from the Customizer)
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

body.brrr-body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body, sans-serif);
	font-size: calc(1rem * var(--scale, 1));
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-text); }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading, sans-serif);
	font-weight: var(--heading-weight, 700);
	text-transform: var(--heading-transform, none);
	line-height: 1.15;
	margin: 0 0 .5em;
	letter-spacing: -0.01em;
}
h1 { font-size: clamp(calc(1.8rem * var(--scale)), calc(1.2rem + 3vw), calc(3rem * var(--scale))); }
h2 { font-size: clamp(calc(1.4rem * var(--scale)), calc(1rem + 2vw), calc(2.1rem * var(--scale))); }
h3 { font-size: clamp(calc(1.15rem * var(--scale)), calc(.9rem + 1vw), calc(1.5rem * var(--scale))); }
p { margin: 0 0 1rem; }

:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: 3px; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px,1px,1px,1px); white-space: nowrap; padding: 0; margin: -1px; border: 0;
}
.brrr-skip {
	position: absolute; left: -999px; top: 0; z-index: 1000;
	background: var(--accent); color: var(--accent-contrast); padding: .6rem 1rem; border-radius: 0 0 var(--radius-sm) 0;
}
.brrr-skip:focus { left: 0; }

/* ---------------- Layout ---------------- */
.brrr-container { width: 100%; max-width: var(--container, 1280px); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.brrr-content { display: block; min-height: 40vh; }
.brrr-page-head { padding-block: clamp(1.25rem, 4vw, 2.25rem) clamp(1rem, 3vw, 1.5rem); }
/* Breadcrumb-only bar (shop/category/product): compact, no tall title row. */
.brrr-page-head--bar { padding-block: .8rem .4rem; }
.brrr-page-title { margin: .25rem 0 0; }
.brrr-layout { display: grid; gap: clamp(1.5rem, 4vw, 3rem); padding-bottom: 3rem; }
@media (min-width: 900px) { .brrr-layout.has-sidebar { grid-template-columns: minmax(0,1fr) 300px; } }
.brrr-sidebar .widget { margin-bottom: 2rem; }

/* ---------------- Buttons ---------------- */
.brrr-btn, .brrr-btn--accent {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	min-height: 44px; padding: .7rem 1.3rem; border-radius: var(--radius-sm);
	border: 1px solid var(--border); background: var(--surface); color: var(--text);
	font-weight: 600; transition: transform .12s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.brrr-btn:hover { transform: translateY(-1px); color: var(--text); border-color: var(--accent-text); }
.brrr-btn--accent { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.brrr-btn--accent:hover { background: transparent; color: var(--accent-text); border-color: var(--accent-text); box-shadow: none; }
.brrr-btn--lg { min-height: 52px; padding: .9rem 1.8rem; font-size: 1.05rem; }

/* ---------------- Announcement bar ---------------- */
.brrr-announce {
	background: var(--accent); color: var(--accent-contrast);
	font-size: .85rem; font-weight: 600; text-align: center; padding: .5rem 0;
}
.brrr-announce a { text-decoration: underline; }

/* ---------------- Header ---------------- */
.brrr-header { background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom: 1px solid var(--border); z-index: 200; }
.brrr-header.is-sticky { position: sticky; top: 0; backdrop-filter: saturate(1.2) blur(10px); }
.brrr-header-inner { display: flex; align-items: center; gap: 1rem; min-height: 68px; }
.brrr-branding { display: flex; flex-direction: column; justify-content: center; margin-right: auto; }
/* Explicit height: an SVG logo without width/height in its own markup would
   otherwise compute to 0×0 under width:auto + max-height. */
.brrr-branding img, .brrr-branding .custom-logo { height: 46px; width: auto; }
.brrr-site-title { font-family: var(--font-heading); font-size: 1.35rem; margin: 0; line-height: 1; }
.brrr-site-desc { display: none; font-size: .72rem; color: var(--muted); }
.brrr-header.layout-logo-center .brrr-header-inner { justify-content: space-between; }
.brrr-header.layout-logo-center .brrr-branding { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; }

/* Desktop nav */
.brrr-nav { display: none; }
.brrr-header-actions { display: flex; align-items: center; gap: .35rem; }
.brrr-header-actions a, .brrr-theme-toggle, .brrr-burger {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: var(--radius-sm); color: var(--text);
	background: transparent; border: 0; position: relative;
}
.brrr-header-actions a:hover, .brrr-theme-toggle:hover, .brrr-burger:hover { background: var(--surface); color: var(--accent-text); }

/* Language switch: only the other language shows, as a text button like the icons */
.brrr-lang-menu { display: flex; margin: 0; padding: 0; list-style: none; }
.brrr-lang-menu .current-lang { display: none; }
.brrr-header-actions .brrr-lang-menu a { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-decoration: none; }

/* Cart / wish count bubbles */
.brrr-cart-count, .brrr-wish-count {
	position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 4px;
	background: var(--accent); color: var(--accent-contrast); border-radius: 999px;
	font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center;
}
.brrr-cart-count.is-empty, .brrr-wish-count.is-empty { display: none; }

/* Theme toggle icon swap */
.brrr-theme-toggle .brrr-toggle-moon { display: none; }
:root[data-theme="light"] .brrr-theme-toggle .brrr-toggle-sun { display: none; }
:root[data-theme="light"] .brrr-theme-toggle .brrr-toggle-moon { display: inline-flex; }

@media (min-width: 1000px) {
	.brrr-burger { display: none; }
	.brrr-nav { display: block; }
	.brrr-menu { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
	.brrr-menu li { position: relative; }
	.brrr-menu > li > a { display: block; padding: .6rem .85rem; border-radius: var(--radius-sm); font-weight: 600; }
	.brrr-menu > li > a:hover, .brrr-menu > li.current-menu-item > a { background: var(--surface); color: var(--accent-text); }
	/* Dropdown / mega */
	.brrr-menu ul.sub-menu {
		position: absolute; top: 100%; left: 0; min-width: 220px; margin: 0; padding: .4rem;
		list-style: none; background: var(--surface); border: 1px solid var(--border);
		border-radius: var(--radius); box-shadow: var(--card-shadow, 0 10px 30px rgba(0,0,0,.3));
		opacity: 0; visibility: hidden; transform: translateY(8px); transition: .18s ease; z-index: 210;
	}
	.brrr-menu li:hover > ul.sub-menu, .brrr-menu li:focus-within > ul.sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
	.brrr-menu ul.sub-menu a { display: block; padding: .5rem .7rem; border-radius: var(--radius-sm); color: var(--muted); }
	.brrr-menu ul.sub-menu a:hover { background: var(--bg); color: var(--accent-text); }
	.brrr-menu ul.sub-menu ul.sub-menu { top: -.4rem; left: 100%; }
	/* Item with many children -> mega columns */
	.brrr-menu > li.menu-item-has-children:hover > ul.sub-menu { display: block; }
	.brrr-site-desc { display: block; }
}

/* ---------------- Mobile off-canvas menu ---------------- */
.brrr-menu-overlay, .brrr-drawer-overlay, .brrr-modal-overlay {
	position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 300; opacity: 0; transition: opacity .25s ease;
}
.brrr-menu-overlay.is-open, .brrr-drawer-overlay.is-open, .brrr-modal.is-open .brrr-modal-overlay { opacity: 1; }
.brrr-mobile-menu, .brrr-drawer {
	position: fixed; top: 0; height: 100vh; height: 100dvh; width: min(88vw, 380px); background: var(--bg);
	z-index: 310; display: flex; flex-direction: column; transition: transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s ease;
}
.brrr-mobile-menu { left: 0; transform: translateX(-100%); }
.brrr-drawer { right: 0; transform: translateX(100%); }
/* Shadow only while open: a closed panel parked off-canvas would otherwise
   cast its shadow onto the page edge. */
.brrr-mobile-menu.is-open, .brrr-drawer.is-open { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.5); }
.brrr-mobile-head, .brrr-drawer-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); font-weight: 700; font-family: var(--font-heading);
}
.brrr-drawer-x { background: transparent; border: 0; color: var(--text); display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: .3rem; border-radius: var(--radius-sm); }
.brrr-drawer-x:hover { color: var(--accent-text); }
.brrr-mobile-list { list-style: none; margin: 0; padding: .5rem; overflow-y: auto; }
.brrr-mobile-list li { border-bottom: 1px solid var(--border); }
.brrr-mobile-list a { display: block; padding: .85rem .75rem; font-weight: 600; }
.brrr-mobile-list .sub-menu { list-style: none; margin: 0; padding-left: 1rem; }
.brrr-mobile-list .sub-menu a { color: var(--muted); font-weight: 500; padding: .6rem .75rem; }

/* ---------------- Cart drawer ---------------- */
.brrr-drawer-body { flex: 1; overflow-y: auto; padding: 1.1rem 1.25rem; }
.brrr-drawer-title { font-family: var(--font-heading); }

/* ---------------- Modal (quick view) ---------------- */
.brrr-modal { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.brrr-modal[hidden] { display: none; }
.brrr-modal-box {
	position: relative; z-index: 401; width: min(900px, 100%); max-height: 90vh; max-height: 90dvh; overflow: auto;
	background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem;
	transform: scale(.96); opacity: 0; transition: .2s ease;
}
.brrr-modal.is-open .brrr-modal-box { transform: scale(1); opacity: 1; }
.brrr-modal-box .brrr-drawer-x { position: absolute; top: .75rem; right: .75rem; z-index: 2; background: var(--surface); }

/* ---------------- Hero ---------------- */
.brrr-hero {
	padding: clamp(3rem, 10vw, 7rem) 0; text-align: center;
	background:
		radial-gradient(80% 120% at 50% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
		var(--bg);
	border-bottom: 1px solid var(--border);
}
.brrr-hero-title { font-size: clamp(2.2rem, 6vw, 4.5rem); margin-bottom: .3em; }
.brrr-hero-sub { color: var(--muted); font-size: clamp(1rem, 2.5vw, 1.3rem); max-width: 44ch; margin: 0 auto 1.6rem; }
/* Hero with a background image: cover + dark overlay for readable text. */
.brrr-hero.has-image { position: relative; background-size: cover; background-position: center; }
.brrr-hero.has-image::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 62%, transparent); }
.brrr-hero.has-image .brrr-container { position: relative; }
.brrr-hero.has-image .brrr-hero-sub { color: var(--text); }
/* Product search with suggestions (shop sidebar + home hero). */
.brrr-facet-search { position: relative; display: flex; }
.brrr-facet-search input[type="search"] { flex: 1; background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: .6rem 2.4rem .6rem .8rem; min-height: 42px; width: 100%; }
.brrr-facet-search button { position: absolute; right: 4px; top: 4px; bottom: 4px; width: 36px; border: 0; background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
.brrr-facet-search button:hover { color: var(--accent-text); }
.brrr-suggest-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--card-shadow); overflow: hidden; }
.brrr-suggest-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-bottom: 1px solid var(--border); }
.brrr-suggest-item:last-child { border-bottom: 0; }
.brrr-suggest-item:hover { background: var(--bg); }
.brrr-suggest-item img, .brrr-suggest-noimg { width: 40px; height: 40px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-2); flex: none; }
.brrr-suggest-name { flex: 1; font-size: .88rem; }
.brrr-suggest-price { font-size: .8rem; color: var(--accent-text); font-weight: 600; }
/* Focus ring inside the field: the sidebar scrolls on its own and would clip an outer outline. */
.brrr-facet-search input[type="search"]:focus, .brrr-facet-search input[type="search"]:focus-visible { outline: none; border-color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-text); }
/* The browser's clear button (×) is blue; draw it in the theme's muted text colour. */
.brrr-facet-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; cursor: pointer; background: var(--muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2l10 10M12 2L2 12' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2l10 10M12 2L2 12' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.brrr-facet-search input[type="search"]::-webkit-search-cancel-button:hover { background: var(--text); }
.brrr-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: .75rem; max-width: 640px; margin-inline: auto; }
.brrr-facet-search--hero { flex: 1 1 320px; text-align: left; }
.brrr-facet-search--hero input[type="search"] { min-height: 52px; font-size: 1.05rem; padding: .8rem 3.2rem .8rem 1.1rem; border-radius: var(--radius); }
.brrr-facet-search--hero button { width: 44px; right: 6px; }
@media (max-width: 520px) { .brrr-hero-actions > .brrr-btn { flex: 1 1 100%; } }
/* Page content below the built-in sections: centered prose. */
.brrr-home-prose { margin-inline: auto; }

/* ---------------- Home sections ---------------- */
.brrr-home-section { padding-block: clamp(2rem, 6vw, 4rem); }
/* On the shop landing the category overview is the first thing in the products
   column — drop its top padding so it sits right under the page header instead
   of leaving a tall dead gap. */
.brrr-shop-cats { padding-top: 0; }
.brrr-section-title { text-align: center; margin-bottom: 1.5rem; }
.brrr-section-more { text-align: center; margin-top: 1.5rem; }

/* Category grid: centered flex rows so the count drives the layout. --cols is
   set per-instance from the card count (brrr_balanced_columns) for balanced
   rows; an incomplete last row is centered rather than left as an orphan.
   --cc is the effective columns at the current breakpoint. */
.brrr-cat-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; --cc: 2; }
@media (min-width: 640px) { .brrr-cat-grid { --cc: min(var(--cols, 3), 3); } }
@media (min-width: 960px) { .brrr-cat-grid { --cc: var(--cols, 4); } }
.brrr-cat-card {
	/* No grow: cards keep their column width so short last rows stay centered
	   instead of stretching. 1px slack absorbs sub-pixel rounding. */
	flex: 0 1 calc((100% - (var(--cc) - 1) * 1rem) / var(--cc) - 1px);
	position: relative; display: flex; flex-direction: column; gap: .4rem; padding: 1rem;
	background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius);
	box-shadow: var(--card-shadow); text-align: center; transition: transform .15s ease, border-color .2s ease;
}
.brrr-cat-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.brrr-cat-media img { border-radius: var(--radius-sm); aspect-ratio: 1/1; object-fit: cover; width: 100%; }
.brrr-cat-name { font-weight: 700; font-family: var(--font-heading); }
.brrr-cat-count { color: var(--muted); font-size: .8rem; }

.brrr-featured-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(.8rem, 2vw, 1.5rem); }
@media (min-width: 720px) { .brrr-featured-grid { grid-template-columns: repeat(4, 1fr); } }
.brrr-fcard { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--card-shadow); overflow: hidden; transition: transform .15s ease, border-color .2s ease; }
.brrr-fcard:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.brrr-fcard-media { position: relative; display: block; }
.brrr-fcard-media img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.brrr-fcard-media .brrr-badges { position: absolute; top: .6rem; left: .6rem; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.brrr-fcard-body { padding: .8rem .9rem 1rem; }
.brrr-fcard-title { font-weight: 600; display: block; margin-bottom: .3rem; }
.brrr-fcard-price { color: var(--accent-text); font-weight: 700; }
.brrr-fcard-price del { color: var(--muted); font-weight: 400; }
.brrr-fcard-price ins { text-decoration: none; }
/* Tax suffix ("incl. VAT"): legal info, not part of the price. Here rather than in
   woocommerce.css because prices also appear on the home page and in page content. */
.woocommerce-price-suffix { color: var(--muted); font-weight: 500; font-size: .7em; }

/* ---------------- Feature teaser (3D print quotes) ---------------- */
.brrr-feature { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 860px) { .brrr-feature { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.brrr-feature-text h2 { margin: 0 0 .75rem; }
.brrr-feature-text p { color: var(--muted); font-size: 1.05rem; max-width: 46ch; margin-bottom: 1.5rem; }
/* The screenshot sits in a plain browser window, so it reads as the tool itself. */
.brrr-feature-media { margin: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--card-shadow); }
.brrr-window-bar { display: flex; gap: .4rem; padding: .6rem .8rem; border-bottom: 1px solid var(--border); }
.brrr-window-bar i { width: .65rem; height: .65rem; border-radius: 50%; background: var(--border); }
.brrr-window-bar i:first-child { background: var(--accent); }
.brrr-feature-media img, .brrr-prose .brrr-feature-media img { display: block; width: 100%; height: auto; margin: 0; border-radius: 0; }
.brrr-prose .brrr-feature { margin-block: clamp(2.5rem, 6vw, 4rem); }
.brrr-prose .brrr-feature-text h2 { margin-top: 0; }
.brrr-prose .brrr-feature .brrr-btn { text-decoration: none; color: var(--accent-contrast); }

/* ---------------- Partners & Friends (home) ---------------- */
.brrr-partners-track { position: relative; }
.brrr-partners-list {
	/* Inner padding so the card shadows are not clipped by the scroll box. */
	--gutter: clamp(1rem, 4vw, 2rem); /* same as .brrr-container: never wider than the page */
	list-style: none; margin: -1rem calc(-1 * var(--gutter)) 0; padding: 1rem var(--gutter) 2.5rem; scroll-padding-inline: var(--gutter); display: flex; gap: 1rem;
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	scrollbar-width: none; /* no scrollbar: arrows on desktop, swipe on touch */
	justify-content: safe center; /* few partners sit centred, many scroll */
}
.brrr-partners-list::-webkit-scrollbar { display: none; }
.brrr-partner { flex: 0 0 clamp(170px, 42vw, 220px); scroll-snap-align: start; }
.brrr-partner a { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .75rem; border-radius: var(--radius); background: var(--card-bg); box-shadow: var(--card-shadow); text-align: center; color: var(--text); height: 100%; }
/* Logos come with their own (often white) backgrounds: one light plate for all, in both modes. */
.brrr-partner-logo { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 9; min-height: 0; overflow: hidden; padding: .75rem; margin-bottom: .35rem; background: #fff; border-radius: var(--radius-sm); } /* min-height 0: a square logo must not stretch the plate */
.brrr-partner-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.brrr-partner-initial { font-family: var(--font-heading); font-size: 2.4rem; color: #17140f; }
.brrr-partner-name { font-weight: 700; }
.brrr-partner-host { color: var(--accent-text); font-size: .85rem; }
.brrr-partner a:hover .brrr-partner-name { color: var(--accent-text); }
.brrr-slider-btn {
	position: absolute; top: 40%; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border);
	background: var(--surface); color: var(--text); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--card-shadow);
}
.brrr-slider-btn:hover { color: var(--accent-text); border-color: var(--accent-text); }
.brrr-slider-btn[hidden] { display: none; }
.brrr-slider-prev { left: -.5rem; } .brrr-slider-prev svg { transform: rotate(90deg); }
.brrr-slider-next { right: -.5rem; } .brrr-slider-next svg { transform: rotate(-90deg); }
@media (hover: none) { .brrr-slider-btn { display: none; } }
.brrr-slider-pause { position: absolute; left: 50%; bottom: .1rem; transform: translateX(-50%); width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: var(--muted); background: transparent; border: 1px solid var(--border); border-radius: 50%; cursor: pointer; }
.brrr-slider-pause .brrr-icon--play, .brrr-slider-pause[aria-pressed="true"] .brrr-icon--pause { display: none; }
.brrr-slider-pause[aria-pressed="true"] .brrr-icon--play { display: block; }
.brrr-slider-pause:hover, .brrr-slider-pause[aria-pressed="true"] { color: var(--accent-text); border-color: var(--accent-text); }

/* ---------------- Bitcoin ticker (inc/btc-ticker.php) ---------------- */
/* Same height as the bars above it; scrolls right to left like a TV ticker, stops on hover/focus/pause. */
.brrr-ticker { position: relative; display: flex; align-items: center; min-height: 2.25rem; background: var(--ticker-bg); color: #ededed; font-size: .85rem; line-height: 1.4; overflow: hidden; }
.brrr-ticker[hidden] { display: none; }
.brrr-ticker-viewport { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent); }
.brrr-ticker-track { display: flex; width: max-content; animation: brrr-ticker var(--ticker-dur, 90s) linear infinite; }
.brrr-ticker-list { display: flex; list-style: none; margin: 0; padding: 0; }
.brrr-ticker-item { white-space: nowrap; padding: .45rem 1.75rem; }
.brrr-ticker-l { color: #a3a09a; }
.brrr-ticker-v { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.brrr-ticker:hover .brrr-ticker-track, .brrr-ticker:focus-within .brrr-ticker-track, .brrr-ticker.is-paused .brrr-ticker-track { animation-play-state: paused; }
.brrr-ticker-pause { flex: none; width: 26px; height: 26px; margin: 0 .6rem 0 .2rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: #a3a09a; background: transparent; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; cursor: pointer; }
.brrr-ticker-pause:hover, .brrr-ticker-pause[aria-pressed="true"] { color: #ff931c; border-color: #ff931c; }
.brrr-ticker-pause .brrr-icon--play, .brrr-ticker-pause[aria-pressed="true"] .brrr-icon--pause { display: none; }
.brrr-ticker-pause[aria-pressed="true"] .brrr-icon--play { display: block; }
@keyframes brrr-ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.brrr-ticker-track { animation: none; }
	.brrr-ticker-viewport { overflow-x: auto; scrollbar-width: none; }
	.brrr-ticker-list[aria-hidden], .brrr-ticker-pause { display: none; }
}

/* ---------------- Cut-out product photos (inc/product-cutout.php) ---------------- */
/* Transparent main images sit on a per-mode background; square slots show the whole product. */
img.brrr-cutout { background: var(--cutout-bg); }
.brrr-cat-media img.brrr-cutout, .woocommerce-mini-cart-item img.brrr-cutout, .brrr-drawer-cart img.brrr-cutout { object-fit: contain; }
.woocommerce-product-gallery__image:has(img.brrr-cutout) .zoomImg, .brrr-suggest-item img, .pswp__img:not(.pswp__img--placeholder) { background: var(--cutout-bg); }

/* ---------------- What our customers say (home) ---------------- */
/* Same slider and card as the partners; wider cards and a tall plate for the post screenshots. */
.brrr-testimonial { flex: 0 0 clamp(240px, 72vw, 300px); scroll-snap-align: start; }
.brrr-testimonial a { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .75rem; border-radius: var(--radius); background: var(--card-bg); box-shadow: var(--card-shadow); text-align: center; color: var(--text); height: 100%; }
.brrr-testimonial-shot { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: .35rem; background: #fff; border-radius: var(--radius-sm); }
.brrr-testimonial-shot img { display: block; width: 100%; height: auto; }
.brrr-testimonial-shot:not(.is-short)::after { content: ""; position: absolute; inset: auto 0 0; height: 22%; background: linear-gradient(rgba(255, 255, 255, 0), #fff); pointer-events: none; }
.brrr-testimonial-shot.is-short { display: flex; align-items: center; }
.brrr-testimonial a:hover .brrr-partner-name { color: var(--accent-text); }
.brrr-testimonial-date { color: var(--muted); font-size: .8rem; }

/* ---------------- Post cards ---------------- */
.brrr-post-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 3vw, 2rem); }
@media (min-width: 640px) { .brrr-post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .brrr-post-grid { grid-template-columns: repeat(3, 1fr); } }
.brrr-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--card-shadow); overflow: hidden; }
.brrr-post-media img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.brrr-post-body { padding: 1rem 1.1rem 1.3rem; }
.brrr-meta { color: var(--muted); font-size: .8rem; }
.brrr-post-title { font-size: 1.15rem; margin: .4rem 0 .5rem; }
.brrr-post-excerpt { color: var(--muted); font-size: .92rem; }
.brrr-readmore { color: var(--accent-text); font-weight: 600; font-size: .9rem; }

/* ---------------- Prose (content) ---------------- */
.brrr-prose { max-width: 75ch; }
.brrr-prose img { border-radius: var(--radius); margin: 1.5rem 0; }
.brrr-prose h2, .brrr-prose h3 { margin-top: 1.8rem; }
.brrr-prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.brrr-prose blockquote { border-left: 3px solid var(--accent); margin: 1.5rem 0; padding: .5rem 0 .5rem 1.2rem; color: var(--muted); }
.brrr-prose code { background: var(--surface); padding: .15em .4em; border-radius: 4px; font-size: .9em; }
/* Command blocks (tutorials): wrap on phones so nothing (e.g. a key fingerprint
   to compare) is hidden; copying still gives the original single line. */
.brrr-prose pre { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .9rem 1rem; font-size: .88rem; line-height: 1.5; margin: 0 0 1.25rem; }
.brrr-prose pre code { background: none; padding: 0; border-radius: 0; font-size: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.brrr-prose table { width: 100%; border-collapse: collapse; }
.brrr-prose th, .brrr-prose td { border: 1px solid var(--border); padding: .6rem .8rem; text-align: left; }

.brrr-single { max-width: 820px; margin-inline: auto; padding-block: 2rem 3rem; }
.brrr-single-title { margin: .4rem 0; }
.brrr-single-thumb img { border-radius: var(--radius); width: 100%; margin: 1.5rem 0; }
.brrr-tags a { display: inline-block; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: .2rem .7rem; font-size: .8rem; margin: .2rem .2rem 0 0; }

/* ---------------- Breadcrumb ---------------- */
.brrr-breadcrumb { color: var(--muted); font-size: .82rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.brrr-breadcrumb a:hover { color: var(--accent-text); }
.brrr-breadcrumb .sep { opacity: .5; }

/* ---------------- Search form ---------------- */
.brrr-searchform { display: flex; gap: .5rem; max-width: 460px; }
.brrr-search-input {
	flex: 1; background: var(--surface); border: 1px solid var(--border); color: var(--text);
	border-radius: var(--radius-sm); padding: .7rem 1rem; min-height: 44px;
}
.brrr-search-submit { min-width: 44px; min-height: 44px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--accent); color: var(--accent-contrast); display: inline-flex; align-items: center; justify-content: center; }

/* ---------------- Footer ---------------- */
.brrr-footer { background: var(--surface); border-top: 1px solid var(--border); margin-top: 3rem; padding: clamp(2rem, 6vw, 4rem) 0 2rem; }
.brrr-footer-widgets { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 2.5rem; }
@media (min-width: 640px) { .brrr-footer-widgets.cols-2, .brrr-footer-widgets.cols-3, .brrr-footer-widgets.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .brrr-footer-widgets.cols-3 { grid-template-columns: repeat(3, 1fr); } .brrr-footer-widgets.cols-4 { grid-template-columns: repeat(4, 1fr); } }
.brrr-footer .widget-title { font-size: 1rem; font-family: var(--font-heading); margin-bottom: .8rem; }
/* Footer legal / fine-print text widgets: render as centred, muted fine print
   to match the bottom bar instead of full-width, mixed-alignment body copy
   (Gutenberg's has-text-align-left/-center on the paragraphs made the row look
   inconsistent). Overrides the alignment classes via higher specificity. */
.brrr-footer-widgets .widget_text p,
.brrr-footer-widgets .widget_block p { text-align: center; color: var(--muted); font-size: .85rem; line-height: 1.7; margin: 0 auto .35rem; max-width: 75ch; }
.brrr-footer-widgets .widget_text a,
.brrr-footer-widgets .widget_block a { color: var(--muted); }
.brrr-footer-widgets .widget_text a:hover,
.brrr-footer-widgets .widget_block a:hover { color: var(--accent-text); }

/* Contact form in the footer: a real form, not fine print */
.brrr-footer-widgets .brrr-footer-contact-title { text-align: center; margin: 0 0 1rem; font-size: 1.25rem; color: var(--text); }
.brrr-footer-widgets .wpcf7 { max-width: 34rem; margin: 0 auto 2.5rem; text-align: left; }
.brrr-footer-widgets .wpcf7 p { text-align: left; color: var(--text); font-size: 1rem; line-height: 1.5; max-width: none; margin: 0 0 1rem; }
.brrr-footer-widgets .wpcf7 a { color: var(--accent-text); }
.brrr-footer-widgets .wpcf7 label { display: block; }
.brrr-footer-widgets .wpcf7 input[type="text"],
.brrr-footer-widgets .wpcf7 input[type="email"],
.brrr-footer-widgets .wpcf7 textarea { width: 100%; margin-top: .35rem; }
.brrr-footer-widgets .wpcf7 input[type="text"],
.brrr-footer-widgets .wpcf7 input[type="email"],
.brrr-footer-widgets .wpcf7 input[type="number"],
.brrr-footer-widgets .wpcf7 .c4wp_user_input_captcha,
.brrr-footer-widgets .wpcf7 textarea {
	background: var(--bg); border: 1px solid var(--border); color: var(--text);
	border-radius: var(--radius-sm); min-height: 44px; padding: .6rem .8rem; font: inherit;
}
.brrr-footer-widgets .wpcf7 input:focus, .brrr-footer-widgets .wpcf7 textarea:focus { border-color: var(--accent-text); outline: none; }
.brrr-footer-widgets .wpcf7 textarea { min-height: 7rem; }
.brrr-footer-widgets .wpcf7 input[type="submit"] {
	min-height: 44px; padding: .7rem 1.6rem; border-radius: var(--radius-sm); font: inherit; font-weight: 600;
	background: var(--accent); color: var(--accent-contrast); border: 1px solid var(--accent); cursor: pointer;
}
.brrr-footer-widgets .wpcf7 input[type="submit"]:hover { background: transparent; color: var(--accent-text); border-color: var(--accent-text); }
.brrr-footer-widgets .wpcf7 input[type="submit"]:disabled { opacity: .5; cursor: not-allowed; }
.brrr-footer-widgets .wpcf7 .wpcf7-acceptance { font-size: .85rem; color: var(--muted); }
.brrr-footer-widgets .wpcf7 .wpcf7-response-output { margin: 1rem 0 0; }
/* Footer bottom bar: everything stacked and centered. */
.brrr-footer-bottom { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; padding-top: 1.5rem; border-top: 1px solid var(--border); color: var(--muted); font-size: .85rem; text-align: center; }
.brrr-footer-text { max-width: 60ch; }
.brrr-footer-text p { margin: 0; }
.brrr-footer-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.25rem; list-style: none; margin: 0; padding: 0; }
.brrr-footer-menu a:hover { color: var(--accent-text); }
.brrr-socials { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem; }
/* Legacy footer social-icon widget (HTML widget with .social-icon links). */
.social-icons-container { display: flex; justify-content: center; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.social-icons-container .social-icon { display: inline-flex; }
.social-icons-container .social-icon img { display: inline-block; transition: transform .15s ease, opacity .15s ease; }
.social-icons-container .social-icon:hover img { transform: translateY(-2px); opacity: .85; }
.brrr-social { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; transition: color .15s ease, border-color .15s ease, transform .15s ease; }
.brrr-social .brrr-icon { width: 20px; height: 20px; }
.brrr-social:hover { color: var(--accent-text); border-color: var(--accent-text); transform: translateY(-2px); }
.brrr-social:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

/* ---------------- Back to top ---------------- */
.brrr-top {
	position: fixed; right: 1rem; bottom: 1rem; z-index: 150; width: 46px; height: 46px;
	border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text);
	display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--card-shadow);
	opacity: 0; transform: translateY(10px); transition: .25s ease; pointer-events: none;
}
.brrr-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.brrr-top:hover { border-color: var(--accent-text); color: var(--accent-text); }

/* ---------------- Badges ---------------- */
.brrr-badges { position: absolute; top: .6rem; left: .6rem; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.brrr-badge { font-size: .68rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.brrr-badge--sale { background: var(--accent); color: var(--accent-contrast); }
.brrr-badge--new { background: var(--accent-2); color: #fff; }
.brrr-badge--out { background: var(--text); color: var(--bg); }
/* Out of stock: dimmed picture, readable at a glance in the grid. */
.woocommerce ul.products li.product.outofstock a img, .brrr-fcard.is-outofstock .brrr-fcard-media img { opacity: .55; filter: grayscale(.6); }
.brrr-badge--preorder { background: var(--surface); color: var(--text); border: 1px solid var(--border); }

/* ---------------- Reveal animation ---------------- */
[data-brrr-reveal] > *, .brrr-post-card[data-brrr-reveal] { opacity: 1; }
.brrr-reveal-on [data-brrr-reveal] > *,
.brrr-reveal-on .brrr-post-card[data-brrr-reveal] { opacity: 0; transform: translateY(16px); }
.brrr-reveal-on [data-brrr-reveal].is-in > *,
.brrr-reveal-on .brrr-post-card.is-in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
@media (prefers-reduced-motion: reduce) { .brrr-reveal-on [data-brrr-reveal] > *, .brrr-reveal-on .brrr-post-card { opacity: 1 !important; transform: none !important; } }

/* ---------------- 404 ---------------- */
.brrr-404 { text-align: center; padding-block: clamp(3rem, 10vw, 6rem); } /* block only: keep the container's side gutter */
.brrr-404 .brrr-searchform { margin: 1.5rem auto; }
.brrr-404-code { font-family: var(--font-heading); font-size: clamp(4rem, 20vw, 9rem); color: var(--accent-text); line-height: 1; margin: 0; }

/* ---------------- Pagination ---------------- */
.pagination, .woocommerce-pagination { margin: 2.5rem 0; display: flex; justify-content: center; }
.pagination .nav-links, .woocommerce-pagination ul { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; margin: 0; }
.pagination a, .pagination span, .woocommerce-pagination a, .woocommerce-pagination span {
	display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 .6rem;
	border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
}
.pagination .current, .woocommerce-pagination .current { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
/* WooCommerce core styles its pagination with higher specificity (boxed list, mauve current page). */
.woocommerce nav.woocommerce-pagination ul, .woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { min-width: 42px; height: 42px; padding: 0 .6rem; line-height: 42px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.woocommerce nav.woocommerce-pagination ul li a:hover { color: var(--accent-text); border-color: var(--accent-text); background: var(--surface); }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }

/* ---------------- Content page building blocks ----------------
   Used by page content (Gutenberg blocks with these class names), e.g. the
   3D design and About pages. Wide blocks break out of the reading column. */
.brrr-single:has(.alignwide) .brrr-prose { max-width: none; }
.brrr-single:has(.alignwide) .brrr-prose > :is(p, h2, h3, ul:not(.brrr-strike, .alignwide), blockquote) { max-width: 68ch; }
/* Classic themes wrap group content in an inner container; let our layout
   groups lay out their blocks directly. */
:is(.brrr-r2p, .brrr-work, .brrr-work-row, .brrr-quote-box) > .wp-block-group__inner-container { display: contents; }
.brrr-prose > .alignwide {
	--gutter: clamp(1rem, 4vw, 2rem);
	width: min(1180px, 100vw - 2 * var(--gutter)); max-width: none;
	margin-inline: calc(50% - min(590px, 50vw - var(--gutter)));
}
.brrr-prose h2 { margin-top: clamp(2.5rem, 6vw, 4rem); }
.brrr-prose .brrr-lead { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); line-height: 1.5; color: var(--text); }
.brrr-prose .brrr-aside { color: var(--muted); font-size: .9rem; }
.brrr-prose figure { margin: 0; }
.brrr-prose .wp-block-image img { margin: 0; }
.brrr-prose .wp-element-caption { color: var(--muted); font-size: .85rem; margin-top: .5rem; }

/* Rendering -> print: the printed photo lies over the rendering like a print
   on its drawing. The one bold move on the 3D design page. */
.brrr-r2p { display: grid; grid-template-columns: 2fr .8fr; align-items: start; margin-block: 2rem 1rem; }
.brrr-r2p .brrr-r2p-render img { width: 100%; border-radius: var(--radius); }
.brrr-r2p .brrr-r2p-print { margin: 12% 0 0 -26%; position: relative; z-index: 1; }
.brrr-r2p .brrr-r2p-print img { width: 100%; border-radius: var(--radius-sm); border: 6px solid var(--bg); box-shadow: 0 18px 50px rgba(0,0,0,var(--shadow-alpha, .28)); transform: rotate(2deg); }
.brrr-r2p .wp-element-caption { font-family: var(--font-heading); font-size: 1rem; color: var(--text); }
.brrr-r2p .brrr-r2p-print .wp-element-caption { padding-left: .5rem; }
@media (max-width: 640px) {
	.brrr-r2p { grid-template-columns: 1fr; }
	.brrr-r2p .brrr-r2p-print { width: 62%; margin: -14% 0 0 auto; }
}

/* A real sequence, so it is numbered. */
.brrr-prose ol.brrr-steps { list-style: none; counter-reset: brrr-step; padding: 0; display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .brrr-prose ol.brrr-steps { grid-template-columns: repeat(4, 1fr); max-width: none; } }
.brrr-prose ol.brrr-steps li { counter-increment: brrr-step; padding-top: .8rem; border-top: 2px solid var(--accent); color: var(--muted); }
.brrr-prose ol.brrr-steps li::before { content: counter(brrr-step); display: block; font-family: var(--font-heading); font-size: 2.2rem; line-height: 1; color: var(--accent-text); margin-bottom: .5rem; }
.brrr-prose ol.brrr-steps strong { display: block; color: var(--text); margin-bottom: .25rem; }

.brrr-prose .brrr-kinds { gap: 2rem; }
.brrr-prose .brrr-kinds img { aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); }
.brrr-prose .brrr-kinds h3 { margin-top: 1rem; }

/* Name/value rows: materials, facts. */
.brrr-prose ul.brrr-spec { list-style: none; padding: 0; border-top: 1px solid var(--border); }
.brrr-prose ul.brrr-spec li { display: grid; grid-template-columns: minmax(7rem, 12rem) 1fr; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--border); color: var(--muted); }
.brrr-prose ul.brrr-spec strong { color: var(--text); }
@media (max-width: 480px) { .brrr-prose ul.brrr-spec li { grid-template-columns: 1fr; gap: .15rem; } }

/* Work index: project name left, a scrollable strip of images right. */
.brrr-work { margin-top: 1.5rem; border-top: 1px solid var(--border); }
.brrr-work-row { display: grid; gap: .5rem 2rem; padding-block: 1.5rem; border-bottom: 1px solid var(--border); }
@media (min-width: 900px) {
	.brrr-work-row { grid-template-columns: 14rem minmax(0, 1fr); grid-template-rows: auto 1fr; }
	.brrr-work-row h3, .brrr-work-row .brrr-work-meta { grid-column: 1; }
	.brrr-work-row .brrr-work-strip { grid-column: 2; grid-row: 1 / span 2; }
}
.brrr-work-row h3 { margin: 0; font-size: 1.25rem; }
.brrr-prose .brrr-work-row .brrr-work-meta { margin: 0; color: var(--muted); font-size: .9rem; }
.brrr-prose .wp-block-gallery.has-nested-images.brrr-work-strip {
	display: flex; flex-wrap: nowrap; gap: .75rem; overflow-x: auto; scroll-snap-type: x proximity;
	margin: 0; padding-bottom: .5rem; scrollbar-width: thin;
}
.brrr-prose .wp-block-gallery.has-nested-images.brrr-work-strip figure.wp-block-image:not(#individual-image) {
	flex: 0 0 auto; width: auto !important; margin: 0; scroll-snap-align: start; /* core sets 50% etc. by image count with :nth-last-child selectors */
}
.brrr-prose .wp-block-gallery.has-nested-images.brrr-work-strip figure.wp-block-image img { height: clamp(150px, 22vw, 230px); width: auto; max-width: none; border-radius: var(--radius-sm); }
.brrr-work-strip a:focus-visible img { outline: 2px solid var(--accent-text); outline-offset: 2px; }

.brrr-quote-box { margin-top: clamp(2.5rem, 6vw, 4rem); padding: clamp(1.25rem, 4vw, 2.25rem); background: var(--surface); border-radius: var(--radius); scroll-margin-top: 90px; }
.brrr-quote-box > h2 { margin-top: 0; }
.brrr-prose .brrr-quote-box .wpcf7 input[type="text"], .brrr-prose .brrr-quote-box .wpcf7 input[type="email"], .brrr-prose .brrr-quote-box .wpcf7 textarea, .brrr-prose .brrr-quote-box .c4wp_user_input_captcha {
	width: 100%; margin-top: .35rem; background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); min-height: 44px; padding: .6rem .8rem; font: inherit;
}
.brrr-prose .brrr-quote-box .c4wp_user_input_captcha { width: 4.5rem; text-align: center; }
.brrr-prose .brrr-quote-box .wpcf7 label { display: block; }
.brrr-prose .brrr-quote-box .wpcf7 input[type="submit"] { min-height: 44px; padding: .7rem 1.6rem; border-radius: var(--radius-sm); font: inherit; font-weight: 600; background: var(--accent); color: var(--accent-contrast); border: 1px solid var(--accent); cursor: pointer; }
.brrr-prose .brrr-quote-box .wpcf7 input[type="submit"]:disabled { opacity: .5; cursor: not-allowed; }

/* Videos: local thumbnail + play mark; a click swaps in the player (main.js). */
.brrr-video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1.75rem 1.25rem; margin-block: 1.25rem 1.5rem; }
:is(.brrr-video-grid) > .wp-block-group__inner-container { display: contents; }
.brrr-prose .brrr-video a { position: relative; display: block; border-radius: var(--radius); overflow: hidden; }
.brrr-prose .brrr-video img, .brrr-video-frame { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 0; border-radius: var(--radius); }
.brrr-prose .brrr-video a::after {
	content: ""; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
	background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%230f0f0f'/%3E%3C/svg%3E") 55% 50% / 28px no-repeat;
	box-shadow: 0 6px 24px rgba(0,0,0,.35); transition: transform .15s ease;
}
.brrr-prose .brrr-video a:hover::after, .brrr-prose .brrr-video a:focus-visible::after { transform: scale(1.08); }
.brrr-prose .brrr-video .wp-element-caption { color: var(--text); font-size: .95rem; font-weight: 600; margin-top: .6rem; }
.brrr-video-len { color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Written guides next to the videos. */
.brrr-prose ul.brrr-guides { list-style: none; padding: 0; border-top: 1px solid var(--border); }
.brrr-prose ul.brrr-guides li { padding: .7rem 0; border-bottom: 1px solid var(--border); }
.brrr-prose ul.brrr-guides a { font-weight: 600; }
.brrr-guide-note { display: block; color: var(--muted); font-size: .88rem; }

/* Two ways to get files (Downloads). */
.brrr-prose .brrr-ways { gap: 2rem; margin-block: 1.5rem 1rem; }
.brrr-prose .brrr-ways > .wp-block-column { padding-top: 1rem; border-top: 2px solid var(--accent); }
.brrr-prose .brrr-ways h3 { margin-top: 0; }

/* Filehub catalog ([brrr_filehub]). */
.brrr-prose ul.brrr-file-grid { list-style: none; padding: 0; margin-block: 1.25rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 1.5rem 1.25rem; }
.brrr-prose .brrr-file a { display: block; color: var(--text); text-decoration: none; }
.brrr-prose .brrr-file img, .brrr-file-noimg { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); margin: 0; background: var(--surface); }
.brrr-prose .brrr-file h3 { font-size: 1.05rem; margin: .7rem 0 .3rem; }
.brrr-prose .brrr-file a:hover h3 { color: var(--accent-text); }
.brrr-prose .brrr-file-text { color: var(--muted); font-size: .9rem; margin: 0 0 .4rem; }
.brrr-prose .brrr-file-price { color: var(--accent-text); font-weight: 700; font-size: .95rem; margin: 0; }

/* A page with its own form (quote box) does not need the footer contact form as well. */
body:has(.brrr-quote-box) .brrr-footer-widgets .widget:has(.brrr-footer-contact-title) { display: none; }

/* About: what this shop does not have, set large. The one bold move there. */
.brrr-prose ul.brrr-strike { list-style: none; padding: 0; margin: 1rem 0 2rem; }
.brrr-prose ul.brrr-strike li { font-family: var(--font-heading); font-size: clamp(1.5rem, 1rem + 2.4vw, 2.7rem); line-height: 1.2; color: var(--muted); }

.brrr-prose blockquote.brrr-manifesto { border-left: 0; padding: 0; margin: clamp(2.5rem, 6vw, 4rem) 0; color: var(--text); }
.brrr-prose blockquote.brrr-manifesto p { font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); line-height: 1.5; }
.brrr-prose blockquote.brrr-manifesto cite { color: var(--muted); font-style: normal; font-size: .9rem; }

/* ---------------- Button block ----------------
   Core/WooCommerce button blocks in page content: theme accent instead of the
   core dark grey, and not underlined like prose links. Buttons with their own
   colours (has-background / has-text-color) keep them. */
.wp-block-button .wp-block-button__link,
.woocommerce div.product .woocommerce-Tabs-panel .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .7rem 1.3rem;
	border: 1px solid var(--accent); border-radius: var(--radius-sm); font-weight: 600; text-decoration: none;
	transition: background .2s ease, color .2s ease;
}
.wp-block-button .wp-block-button__link:not(.has-background) { background: var(--accent); }
.wp-block-button .wp-block-button__link:not(.has-text-color),
.woocommerce div.product .woocommerce-Tabs-panel .wp-block-button__link:not(.has-text-color) { color: var(--accent-contrast); }
.wp-block-button .wp-block-button__link:not(.has-background):hover { background: transparent; color: var(--accent-text); border-color: var(--accent-text); }
.wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: var(--accent-text); border-color: var(--accent-text); }

/* ---------------- Legacy content ----------------
   Pages written for the old dark-only theme carry inline colours: #212121 /
   #333 / #2a2a2a panels, #212121 headings and #c4c4c4 or white text. Map them
   to theme tokens so they read in both modes (!important beats the inline
   style attribute). Buttons keep their own colours (e.g. the BTCPay donate
   button on its dark green). */
.brrr-content [style*="background-color:#212121"],
.brrr-content [style*="background-color:#333333"],
.brrr-content [style*="background-color:#2a2a2a"] { background-color: var(--surface) !important; color: var(--text) !important; }
.brrr-content [style*="color:#212121"],
.brrr-content [style*="color:#c4c4c4"],
.brrr-content [style*="color: #c4c4c4"],
.brrr-content [style*="color:#ffffff"]:not(button *),
.brrr-content [style*="color:#fff"]:not(button *) { color: var(--text) !important; }

/* Utilities */
[hidden] { display: none !important; }
.brrr-none { text-align: center; padding: 3rem 0; }
body.brrr-locked { overflow: hidden; }