/**
 * Baker Rifle MFG — frontend behavior + geometry.
 *
 * TOKENS ONLY. Every color, size and radius here resolves to a
 * var(--wp--preset--*) / var(--wp--custom--*) declared in theme.json. The only
 * literal values are geometry (percentages, transforms, timings) that have no
 * token equivalent, and the alpha-composited overlays noted inline.
 *
 * The Cerakote finish previewer sets --brm-finish / --brm-finish-hi on :root
 * (interactions.js), so anything that should re-tint with the picker reads those
 * vars — they default to the burnt-bronze accent tokens.
 *
 * @package baker-rifle
 */

:root {
	--brm-finish: var( --wp--preset--color--burnt );
	--brm-finish-hi: var( --wp--preset--color--burnt-hi );
	--brm-t: 0.18s ease;
}

/*
 * PARENT-THEME TOKEN SHIM.
 *
 * Greenshift's stylesheets reference fourteen palette tokens by name
 * (--wp--preset--color--primary, --inputbg, --lightborder, …) that this child's
 * palette does not define. An undefined custom property makes the whole
 * declaration invalid at computed-value time, so those rules do not fall back —
 * they drop. The visible symptom was the My Account "Log in" button rendering
 * with a transparent background, because Greenshift sets
 * `background: var(--wp--preset--color--primary)` on `.woocommerce button.button`.
 *
 * Mapping the names onto Baker's tokens makes every inherited rule resolve to
 * the dark palette instead of silently dying. Cheaper and far less brittle than
 * out-specifying the parent rule by rule.
 *
 * CAVEAT: if any of these slugs is ever ADDED to theme.json's palette, delete
 * the corresponding line here — this would otherwise shadow the real preset.
 */
:root {
	--wp--preset--color--primary: var( --wp--preset--color--burnt );
	--wp--preset--color--secondary: var( --wp--preset--color--cerablue );
	--wp--preset--color--accent: var( --wp--preset--color--burnt-hi );
	--wp--preset--color--button: var( --wp--preset--color--burnt );
	--wp--preset--color--textonbutton: var( --wp--preset--color--ember );
	--wp--preset--color--textonprimary: var( --wp--preset--color--ember );
	--wp--preset--color--contrastcolor: var( --wp--preset--color--bone );
	--wp--preset--color--black: var( --wp--preset--color--carbon );
	--wp--preset--color--lightbg: var( --wp--preset--color--graphite );
	--wp--preset--color--lightborder: var( --wp--preset--color--line );
	--wp--preset--color--lightgrey: var( --wp--preset--color--line );
	--wp--preset--color--inputbg: var( --wp--preset--color--carbon );
	--wp--preset--color--inputtext: var( --wp--preset--color--bone );
	--wp--preset--color--tagcolor: var( --wp--preset--color--ash );
}

/* ---------------------------------------------------------------- icons -- */

.brm-icon {
	vertical-align: -0.18em;
	flex: none;
}

.brm-icon.is-accent {
	color: var( --brm-finish );
}

.brm-icon.is-muted {
	color: var( --wp--preset--color--ash );
}

/* Stack bands flush — each band owns its own vertical padding. */
.wp-block-group > main.wp-block-group > * {
	margin-block-start: 0;
}

/* WooCommerce wraps the FSE template <main> in <div class="woocommerce">. That
   wrapper sits past the root reset, and the inner <main> default top margin
   collapses through it — pushing the breadcrumb below the header. */
.wp-site-blocks > .woocommerce,
.wp-site-blocks > .woocommerce > main {
	margin-block-start: 0;
}

/* --------------------------------------------------------------- header -- */

.brm-header {
	position: relative;
	z-index: 60;
}

.brm-topbar p {
	margin: 0;
	letter-spacing: 0.04em;
}

.brm-topbar strong {
	color: var( --wp--preset--color--bone );
	font-weight: 500;
}

.brm-topbar a {
	color: inherit;
}

.brm-topbar a:hover {
	color: var( --brm-finish-hi );
}

.brm-mainbar {
	position: sticky;
	top: 0;
	z-index: 60;
	/* Alpha over carbon (#101012) so the blur reads — no token equivalent. */
	background-color: rgba( 16, 16, 18, 0.88 );
	backdrop-filter: blur( 10px );
	-webkit-backdrop-filter: blur( 10px );
}

.brm-brand .wp-block-site-title a {
	color: var( --wp--preset--color--bone );
	text-decoration: none;
}

/* The wordmark's trailing word takes the accent, per the comp's BAKER|RIFLE
   split. Applied to the last word via a span the editor can't add, so we tint
   the whole title on hover instead — deliberate simplification. */
.brm-brand .wp-block-site-title a:hover {
	color: var( --brm-finish-hi );
}

.brm-nav .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.5rem;
	text-decoration: none;
}

.brm-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0.15rem;
	width: 0;
	height: 2px;
	background: var( --brm-finish );
	transition: width 0.22s ease;
}

.brm-nav .wp-block-navigation-item:hover .wp-block-navigation-item__content::after,
.brm-nav .current-menu-item .wp-block-navigation-item__content::after {
	width: 100%;
}

.brm-actions {
	gap: var( --wp--preset--spacing--40 );
}

/* Header fit.
   The bar holds three groups — brand, nav and actions. Left alone they overflow
   the viewport well before mobile, and the actions group wraps onto its own row,
   growing the header to two or three lines. Two steps prevent that: tighten the
   gap first, then collapse the nav into WordPress's overlay menu before the
   wrap point is reached.

   BREAKPOINT 1220px is shared with interactions.js (BRM_NAV_BREAKPOINT) so the
   mega-menu hover behavior turns off exactly when the nav becomes an overlay.
   Change one, change the other.

   Sizing, measured (7 nav items, after "Classes" was removed): brand 153 +
   nav 507 + actions 405 + two 20px gaps = ~1105px, plus 56px root padding =
   ~1161px of viewport minimum. Chrome evaluates media queries against the
   window INCLUDING the scrollbar (~15px), so 1220 leaves roughly 45px of
   genuine slack.

   /!\ ADDING, REMOVING OR RENAMING A NAV ITEM CHANGES THIS NUMBER, and it has
   already bitten twice: adding "Drops" grew the nav 73px and reintroduced a
   two-row header at 1211px, then removing "Classes" shrank it 84px and left
   this breakpoint 90px too conservative. Re-measure after any nav edit rather
   than trusting this comment. */
@media ( max-width: 1400px ) {
	.brm-mainbar {
		gap: var( --wp--preset--spacing--50 );
	}
}

@media ( max-width: 1220px ) {
	/* Core shows the full menu from 600px up; re-hide it and restore the
	   hamburger up to our own breakpoint. The `.brm-header` prefix clears core's
	   :not()-chained selectors on specificity. */
	.brm-header .wp-block-navigation__responsive-container-open:not( .always-shown ) {
		display: flex;
	}

	.brm-header .wp-block-navigation__responsive-container:not( .hidden-by-default ):not( .is-menu-open ) {
		display: none;
	}

	.brm-header .wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
	}

	/* The mega menu is a hover pop-out anchored under the bar — meaningless once
	   the nav is an overlay, and it would otherwise sit over the page. */
	.brm-mega {
		display: none;
	}
}

/* Hamburger + overlay close button inherit the bar's colors. */
.brm-header .wp-block-navigation__responsive-container-open,
.brm-header .wp-block-navigation__responsive-container-close {
	color: var( --wp--preset--color--bone );
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.brm-header .wp-block-navigation__responsive-container-open:hover,
.brm-header .wp-block-navigation__responsive-container-close:hover {
	color: var( --brm-finish-hi );
}

/* Overlay panel: the underline hover treatment is for the horizontal bar only. */
.brm-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	content: none;
}

/* The sticky bar's backdrop-filter makes it a CONTAINING BLOCK for its
   position:fixed descendants, which traps the overlay inside the header (it
   opened as a ~104px strip). Dropping the filter while the modal is open frees
   the overlay to cover the viewport; the blur is invisible then anyway because
   the panel is over the whole page. */
.has-modal-open .brm-mainbar,
body.has-modal-open .brm-mainbar {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* Pin the open overlay to the viewport explicitly rather than relying on core's
   inset, which does not survive re-hiding the container above core's own 600px
   breakpoint. */
.brm-header .wp-block-navigation__responsive-container.is-menu-open {
	position: fixed;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: var( --wp--preset--spacing--50 );
	padding: var( --wp--preset--spacing--70 ) var( --wp--custom--spacing--outer );
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* WordPress emits an inline `…-item__content.…-item__content { color: #111 }`
   for the overlay — near-black on the pitch panel. The doubled class is (0,3,0),
   so match it and add the scope to win. */
.brm-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var( --wp--preset--color--bone );
	font-size: var( --wp--preset--font-size--xl );
	font-family: var( --wp--preset--font-family--display );
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.brm-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	color: var( --brm-finish-hi );
}

.brm-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	width: 100%;
}

.brm-action {
	display: inline-flex;
	align-items: center;
	color: var( --wp--preset--color--bone );
	text-decoration: none;
	transition: color var( --brm-t );
}

.brm-action:hover {
	color: var( --brm-finish-hi );
}

.brm-cartchip {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.45em 0.8em;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--control );
	color: var( --wp--preset--color--bone );
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--sm );
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: border-color var( --brm-t ), color var( --brm-t );
}

.brm-cartchip:hover {
	border-color: var( --brm-finish );
	color: var( --brm-finish-hi );
}

/* Super Speedy Search, inline in the header.
   The plugin ships its own light-theme skin, so each override below is undoing
   a specific plugin rule — see the note on each. */

/* 1. The plugin wraps the whole form in `.sss-default`, which carries a navy
      1px border. On the carbon field that reads as a stray faint box around
      the input+button pair. The `.sss-default` qualifier is needed to beat the
      plugin's own two-class selector regardless of stylesheet order. */
.brm-sss-search .super-speedy-search-form.sss-default {
	border: 0;
	background: transparent;
	box-shadow: none;
}

/* 2. Input + button sit in a flex row with no gap. One pixel separates them
      without breaking the read as a single control. */
.brm-sss-search .ssswrapper {
	gap: 1px;
	align-items: stretch;
}

.brm-sss-search input.ssstext {
	width: 12rem;
	max-width: 40vw;
	padding: 0.5em 0.7em;
	background: var( --wp--preset--color--graphite );
	border: 1px solid var( --wp--preset--color--line );
	/* Square against the button, rounded on the outer edge. */
	border-radius: var( --wp--custom--radius--control ) 0 0 var( --wp--custom--radius--control );
	color: var( --wp--preset--color--bone );
}

.brm-sss-search input.ssstext:focus {
	outline: none;
	border-color: var( --brm-finish );
}

/* 3. The plugin sets the placeholder to black — illegible on graphite. */
.brm-sss-search input.ssstext::placeholder {
	color: var( --wp--preset--color--ash );
	opacity: 1;
}

/* 4. Submit button. The plugin styles it as
      `.super-speedy-search-form button[type="submit"]` — an attribute selector,
      so a plain `.brm-sss-search .sss_search_button` loses on specificity no
      matter the load order. Match its shape to win, and drop its fixed 34px
      height so the button stretches to the input instead of sitting short. */
/* The plugin pins the button's wrapper to a fixed 35px via
   `.super-speedy-search-form .ssswrapper .sssbuttonwrapper` (0,3,0), which
   leaves the button short of the input. Release it and let flex stretch. */
.brm-sss-search .super-speedy-search-form .ssswrapper .sssbuttonwrapper {
	display: flex;
	height: auto;
	align-self: stretch;
}

.brm-sss-search .super-speedy-search-form button[type="submit"] {
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto;
	align-self: stretch;
	padding: 0 0.9em;
	background: var( --brm-finish );
	border: 0;
	border-radius: 0 var( --wp--custom--radius--control ) var( --wp--custom--radius--control ) 0;
	color: var( --wp--preset--color--ember );
	cursor: pointer;
	transition: background var( --brm-t );
}

.brm-sss-search .super-speedy-search-form button[type="submit"]:hover {
	background: var( --brm-finish-hi );
}

/* ------------------------------------------------------------ mega menu -- */

.brm-mega {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 50;
	opacity: 0;
	visibility: hidden;
	transform: translateY( -8px );
	transition: opacity var( --brm-t ), transform var( --brm-t ), visibility var( --brm-t );
	/* Shadow is an ambient scrim, not a themeable surface. */
	box-shadow: 0 24px 40px rgba( 0, 0, 0, 0.5 );
}

.brm-mega.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.brm-mega-inner {
	align-items: flex-start;
}

.brm-mega-link,
.brm-mega-more {
	margin: 0;
}

.brm-mega-link a {
	color: var( --wp--preset--color--ash );
	text-decoration: none;
	transition: color var( --brm-t );
}

.brm-mega-link a:hover {
	color: var( --wp--preset--color--bone );
}

.brm-mega-more a {
	text-decoration: none;
}

/* ----------------------------------------------------------------- hero -- */

.brm-hero {
	position: relative;
	overflow: hidden;
}

.brm-hero > * {
	position: relative;
	z-index: 5;
}

/* The hero group uses a CONSTRAINED layout (contentSize 1200px), and WordPress
   applies `max-width: <contentSize>; margin-inline: auto` to every direct child
   — including these absolutely positioned decorative layers. The result is a
   background capped at 1200px and centred inside a full-bleed band: invisible
   below 1200px, obviously boxed above it. Opt both layers out so they track the
   band rather than the content measure. */
.brm-hero > .brm-hero-bg,
.brm-hero > .brm-hero-grain {
	max-width: none;
	width: auto;
	margin-inline: 0;
}

.brm-hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	/* Radial field: raised graphite core falling off to pitch. This is the
	   no-image fallback — see .has-hero-image below. */
	background: radial-gradient( 120% 130% at 72% 18%, #16181c 0%, #0c0c0e 62% );
}

/* Full-bleed hero photograph.
   The image covers the whole band; a horizontal scrim sits ON TOP of it,
   heaviest on the left where the headline and CTAs live and clearing toward the
   right so the subject stays visible. Layer order in the shorthand is
   scrim-then-image, because the first background-image paints in front.
   Values are alpha composites of the carbon token — a solid token cannot
   express a gradient of transparency. */
.brm-hero.has-hero-image .brm-hero-bg {
	background-image:
		linear-gradient(
			90deg,
			rgba( 16, 16, 18, 0.94 ) 0%,
			rgba( 16, 16, 18, 0.82 ) 38%,
			rgba( 16, 16, 18, 0.45 ) 70%,
			rgba( 16, 16, 18, 0.3 ) 100%
		),
		var( --brm-hero-image );
	background-repeat: no-repeat, no-repeat;
	background-position: center, center;
	background-size: cover, cover;
}

/* On narrow screens the copy sits over the middle of the photo, so the scrim
   becomes vertical and heavier — legibility beats seeing the whole subject. */
@media ( max-width: 900px ) {
	.brm-hero.has-hero-image .brm-hero-bg {
		background-image:
			linear-gradient(
				180deg,
				rgba( 16, 16, 18, 0.88 ) 0%,
				rgba( 16, 16, 18, 0.8 ) 55%,
				rgba( 16, 16, 18, 0.92 ) 100%
			),
			var( --brm-hero-image );
	}
}

/* The receiver stays over the photograph (author's call). It already carries a
   deep drop shadow, so it separates from most backgrounds on its own; this adds
   a faint rim so it still reads against a light or busy image. */
.brm-hero.has-hero-image .brm-receiver {
	box-shadow:
		0 22px 50px rgba( 0, 0, 0, 0.65 ),
		0 0 0 1px rgba( 236, 232, 225, 0.14 ),
		inset 0 2px 0 rgba( 255, 255, 255, 0.14 ),
		inset 0 -8px 20px rgba( 0, 0, 0, 0.4 );
}

.brm-hero.has-hero-image .brm-hero-grid {
	min-height: 62vh;
}

.brm-hero-grain {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0.3;
	background-image: repeating-linear-gradient( 115deg, transparent 0 40px, rgba( 255, 255, 255, 0.03 ) 40px 41px );
	animation: brm-drift 22s linear infinite;
}

@keyframes brm-drift {
	to {
		background-position: 640px 0;
	}
}

.brm-hero-title,
.brm-hero-tagline,
.brm-hero-sub,
.brm-eyebrow {
	margin-block: 0.15em;
}

.brm-hero-sub {
	max-width: 48ch;
}

.brm-finishes {
	margin-top: var( --wp--preset--spacing--60 );
}

.brm-finishes-label {
	display: block;
	margin-bottom: var( --wp--preset--spacing--30 );
	color: var( --wp--preset--color--ash );
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--sm );
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.brm-finish-row {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--40 );
}

.brm-finish-swatch {
	width: 34px;
	height: 34px;
	padding: 0;
	border: 2px solid var( --wp--preset--color--line );
	border-radius: 50%;
	cursor: pointer;
	transition: transform var( --brm-t ), border-color var( --brm-t );
}

.brm-finish-swatch:hover,
.brm-finish-swatch[aria-pressed="true"] {
	border-color: var( --wp--preset--color--bone );
	transform: scale( 1.1 );
}

.brm-finish-swatch:focus-visible {
	outline: 2px solid var( --wp--preset--color--bone );
	outline-offset: 2px;
}

/* Machined receiver stage — pure CSS stand-in for a product render. */
.brm-receiver-stage {
	position: relative;
	height: 330px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.brm-receiver {
	position: relative;
	width: 92%;
	height: 118px;
	border-radius: 14px;
	background: linear-gradient( 100deg, #26282c, var( --brm-finish ) 45%, var( --brm-finish-hi ) 55%, #26282c );
	background-size: 220% 100%;
	transition: background 0.6s ease;
	box-shadow:
		0 22px 50px rgba( 0, 0, 0, 0.55 ),
		inset 0 2px 0 rgba( 255, 255, 255, 0.14 ),
		inset 0 -8px 20px rgba( 0, 0, 0, 0.4 );
}

.brm-receiver-mag {
	position: absolute;
	left: 30%;
	bottom: -44px;
	width: 34px;
	height: 58px;
	border-radius: 4px 4px 7px 7px;
	background: linear-gradient( 180deg, #222, #0e0e10 );
	transform: skewX( -6deg );
}

.brm-receiver-engrave {
	position: absolute;
	inset: 0;
	border-radius: 14px;
	overflow: hidden;
	pointer-events: none;
}

.brm-receiver-engrave::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient( 58deg, transparent 0 18px, rgba( 236, 232, 225, 0.2 ) 18px 19px );
	clip-path: inset( 0 100% 0 0 );
	animation: brm-cut 9s ease-in-out infinite;
}

@keyframes brm-cut {
	0%, 12% {
		clip-path: inset( 0 100% 0 0 );
	}
	48%, 100% {
		clip-path: inset( 0 0 0 0 );
	}
}

.brm-receiver-serial {
	position: absolute;
	right: 14px;
	bottom: 10px;
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--xs );
	letter-spacing: 0.12em;
	color: rgba( 20, 15, 8, 0.7 );
}

/* ---------------------------------------------------------------- bands -- */

.brm-band {
	position: relative;
}

.brm-kicker {
	margin: 0;
}

.brm-sechead {
	align-items: flex-end;
}

.brm-trust p {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Machined image plate — placeholder until a real photo is dropped in. */
.brm-plate {
	position: relative;
	height: 340px;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--card );
	background: linear-gradient( 135deg, #26282c, #0e0e10 );
	overflow: hidden;
}

.brm-plate.is-short {
	height: 240px;
}

.brm-plate-stamp {
	position: absolute;
	left: 20px;
	bottom: 18px;
	color: var( --wp--preset--color--ash );
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--sm );
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Scroll reveal — opt-in via .brm-reveal, no-op without JS (see interactions). */
.brm-reveal.is-armed {
	opacity: 0;
	transform: translateY( 22px );
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.brm-reveal.is-armed.is-in {
	opacity: 1;
	transform: none;
}

/* -------------------------------------------------------- featured rail -- */

.brm-bench {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: var( --wp--preset--spacing--50 );
	margin: 0;
	padding: 0;
	list-style: none;
}

.brm-build,
.brm-pcard {
	display: flex;
	flex-direction: column;
	background: var( --wp--preset--color--graphite );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--card );
	overflow: hidden;
	transition: transform var( --brm-t ), border-color var( --brm-t ), box-shadow var( --brm-t );
}

.brm-build:hover,
.brm-pcard:hover {
	transform: translateY( -4px );
	border-color: var( --brm-finish );
	box-shadow: 0 14px 34px rgba( 0, 0, 0, 0.45 );
}

.brm-build-ph,
.brm-pcard-ph {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	background: linear-gradient( 135deg, #26282c, #0e0e10 );
	overflow: hidden;
}

.brm-build-ph img,
.brm-pcard-ph img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.brm-build:hover .brm-build-ph img,
.brm-pcard:hover .brm-pcard-ph img {
	transform: scale( 1.05 );
}

.brm-badge,
.brm-pcard-cat {
	position: absolute;
	top: 9px;
	left: 9px;
	padding: 3px 7px;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: 4px;
	background: rgba( 16, 16, 18, 0.85 );
	color: var( --wp--preset--color--ash );
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--xs );
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* When a card shows both a category chip and a Sale badge, the badge moves to
   the opposite corner so they never overlap. */
.brm-badge.is-sale {
	left: auto;
	right: 9px;
	color: var( --brm-finish-hi );
	border-color: var( --brm-finish-press, var( --wp--preset--color--burnt-press ) );
}

.brm-build-body,
.brm-pcard-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var( --wp--preset--spacing--30 );
	padding: var( --wp--preset--spacing--50 );
	text-align: left;
}

.brm-build-brand,
.brm-pcard-brand {
	color: var( --wp--preset--color--ash );
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--xs );
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.brm-build-title,
.brm-pcard-title {
	margin: 0;
	color: var( --wp--preset--color--bone );
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--lg );
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
}

.brm-build-title a {
	color: inherit;
	text-decoration: none;
}

.brm-build-title a:hover,
.brm-pcard-title:hover {
	color: var( --brm-finish-hi );
}

/* Workshop mark — "CERAKOTE · 1 OF 12" (redesign spec §06). */
.brm-build-mark {
	color: var( --brm-finish-hi );
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--sm );
	letter-spacing: 0.08em;
}

.brm-build-spec,
.brm-pcard-spec {
	color: var( --brm-finish-hi );
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--xs );
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.brm-build-stock,
.brm-pcard-stock {
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--sm );
}

.brm-build-stock.is-in,
.brm-pcard-stock.is-in {
	color: var( --wp--preset--color--instock );
}

.brm-build-stock.is-low,
.brm-build-stock.is-custom,
.brm-pcard-stock.is-low,
.brm-pcard-stock.is-custom {
	color: var( --brm-finish-hi );
}

.brm-build-stock.is-out,
.brm-pcard-stock.is-out {
	color: var( --wp--preset--color--outstock );
}

.brm-build-price,
.brm-pcard-price {
	margin-top: auto;
	color: var( --wp--preset--color--bone );
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--base );
}

.brm-build-price del,
.brm-pcard-price del {
	margin-right: 0.4em;
	color: var( --wp--preset--color--ash );
	font-size: var( --wp--preset--font-size--sm );
}

.brm-build-price ins,
.brm-pcard-price ins {
	text-decoration: none;
}

/* CTA — shared look for the rail's own link and Woo's loop button. */
.brm-build-add,
.brm-shop-query .brm-pcard-add a.button,
.brm-pdp-cta .brm-addtocart {
	display: block;
	width: 100%;
	padding: 0.65em 1em;
	border: 1px solid transparent;
	border-radius: var( --wp--custom--radius--control );
	background: var( --brm-finish );
	color: var( --wp--preset--color--ember );
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--ui );
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	/* Greenshift skins .woocommerce a.button with a hover scale + shadow. */
	box-shadow: none;
	transform: none;
	transition: background var( --brm-t );
}

.brm-build-add:hover,
.brm-shop-query .brm-pcard-add a.button:hover,
.brm-pdp-cta .brm-addtocart:hover {
	background: var( --brm-finish-hi );
	color: var( --wp--preset--color--ember );
	transform: none;
	box-shadow: none;
}

/* ---------------------------------------------------------------- drops -- */

.brm-drops-head {
	align-items: flex-end;
}

.brm-countdown {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --wp--preset--spacing--30 );
}

.brm-countdown-clock {
	display: flex;
	gap: var( --wp--preset--spacing--40 );
}

.brm-countdown-unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 62px;
	padding: var( --wp--preset--spacing--40 ) var( --wp--preset--spacing--30 );
	background: var( --wp--preset--color--graphite );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--control );
}

.brm-countdown-value {
	color: var( --brm-finish-hi );
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--xl );
	line-height: 1.1;
	/* Tabular figures stop the box jittering as digits change each second. */
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.brm-countdown-label {
	margin-top: 0.25em;
	color: var( --wp--preset--color--ash );
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--xs );
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.brm-countdown-when,
.brm-countdown-live {
	margin: 0;
	color: var( --wp--preset--color--ash );
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--sm );
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.brm-countdown-live {
	padding: var( --wp--preset--spacing--30 ) var( --wp--preset--spacing--50 );
	background: var( --brm-finish );
	border-radius: var( --wp--custom--radius--pill );
	color: var( --wp--preset--color--ember );
	font-weight: 700;
}

/* Drops page hero: the countdown is the subject, so it centres and scales up. */
.brm-drops-hero .brm-countdown {
	align-items: center;
	margin-top: var( --wp--preset--spacing--50 );
}

.brm-countdown.is-large {
	width: 100%;
	align-items: center;
	gap: var( --wp--preset--spacing--40 );
}

.brm-countdown.is-large .brm-countdown-clock {
	justify-content: center;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--40 );
}

.brm-countdown.is-large .brm-countdown-unit {
	min-width: 92px;
	padding: var( --wp--preset--spacing--50 ) var( --wp--preset--spacing--40 );
}

.brm-countdown.is-large .brm-countdown-value {
	font-size: var( --wp--preset--font-size--xxl );
}

.brm-drops-note {
	margin: 0;
	max-width: 60ch;
}

/* Drop badge reuses the card badge geometry with the accent colour. */
.brm-badge.is-drop {
	left: auto;
	right: 9px;
	border-color: var( --wp--preset--color--burnt-press );
	color: var( --brm-finish-hi );
}

/* Pre-drop CTA reads as a ghost button — it previews, it does not sell. */
.brm-build-add.is-ghost {
	background: transparent;
	border-color: var( --wp--preset--color--line );
	color: var( --wp--preset--color--bone );
}

.brm-build-add.is-ghost:hover {
	background: transparent;
	border-color: var( --brm-finish );
	color: var( --brm-finish-hi );
}

@media ( max-width: 600px ) {
	.brm-countdown-clock {
		gap: var( --wp--preset--spacing--30 );
	}

	.brm-countdown-unit {
		min-width: 54px;
	}
}

/* --------------------------------------------------------- category tiles -- */

.brm-cats {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 160px, 1fr ) );
	gap: var( --wp--preset--spacing--40 );
}

.brm-cat {
	position: relative;
	display: flex;
	align-items: flex-end;
	height: 130px;
	padding: var( --wp--preset--spacing--50 );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--card );
	overflow: hidden;
	text-decoration: none;
	transition: transform var( --brm-t ), border-color var( --brm-t );
}

.brm-cat:hover {
	transform: translateY( -3px );
	border-color: var( --brm-finish );
}

.brm-cat-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient( 135deg, #2a3a44, #0f1316 );
	transition: transform 0.3s ease;
}

.brm-cat-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.8;
}

.brm-cat:hover .brm-cat-bg {
	transform: scale( 1.06 );
}

.brm-cat::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient( transparent, rgba( 8, 8, 9, 0.78 ) );
}

.brm-cat-label {
	position: relative;
	z-index: 2;
	color: var( --wp--preset--color--bone );
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--xl );
	font-weight: 600;
	text-transform: uppercase;
	text-shadow: 0 2px 8px rgba( 0, 0, 0, 0.6 );
}

.brm-cat-count {
	position: absolute;
	top: var( --wp--preset--spacing--40 );
	right: var( --wp--preset--spacing--40 );
	z-index: 2;
	color: var( --wp--preset--color--ash );
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--xs );
}

/* -------------------------------------------------------------- services -- */

.brm-svcs {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: var( --wp--preset--spacing--50 );
}

.brm-svc {
	display: block;
	padding: var( --wp--preset--spacing--60 );
	background: var( --wp--preset--color--graphite );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--card );
	text-decoration: none;
	transition: transform var( --brm-t ), border-color var( --brm-t );
}

.brm-svc:hover {
	transform: translateY( -3px );
	border-color: var( --brm-finish );
}

.brm-svc-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-bottom: var( --wp--preset--spacing--50 );
	border: 1px solid var( --wp--preset--color--burnt-press );
	border-radius: 9px;
	background: rgba( 194, 98, 45, 0.12 );
	color: var( --brm-finish-hi );
}

.brm-svc-title {
	margin: 0 0 var( --wp--preset--spacing--30 );
	color: var( --wp--preset--color--bone );
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--xl );
	text-transform: uppercase;
}

.brm-svc-copy {
	margin: 0;
	color: var( --wp--preset--color--ash );
	font-size: var( --wp--preset--font-size--ui );
}

.brm-svc-more {
	display: inline-block;
	margin-top: var( --wp--preset--spacing--40 );
	color: var( --brm-finish-hi );
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--sm );
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------- process -- */

.brm-steps {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: var( --wp--preset--spacing--50 );
	margin: 0;
	padding: 0;
	/* Numbers are drawn by the counter below, so the native marker is dropped. */
	list-style: none;
	counter-reset: brm-step;
}

.brm-step {
	position: relative;
	counter-increment: brm-step;
	padding: var( --wp--preset--spacing--60 );
	padding-top: var( --wp--preset--spacing--70 );
	background: var( --wp--preset--color--graphite );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--card );
}

.brm-step::before {
	content: counter( brm-step, decimal-leading-zero );
	position: absolute;
	top: var( --wp--preset--spacing--40 );
	left: var( --wp--preset--spacing--60 );
	color: var( --brm-finish );
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--sm );
	letter-spacing: 0.18em;
}

.brm-step-title {
	margin: 0 0 var( --wp--preset--spacing--30 );
	color: var( --wp--preset--color--bone );
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--xl );
	text-transform: uppercase;
}

.brm-step-copy {
	margin: 0;
	color: var( --wp--preset--color--ash );
	font-size: var( --wp--preset--font-size--ui );
}

/* ----------------------------------------------------------- gallery page -- */

/*
 * The Gallery page is IMAGE-DRIVEN: its content is whatever core/gallery,
 * core/image or core/video blocks the shop puts on the page. Nothing is derived
 * from the catalog. These rules give core's own gallery markup the theme's tile
 * treatment so uploaded photography matches the rest of the site without the
 * editor having to style anything.
 */

/* An empty post-content region would otherwise leave a padded blank band
   between the head and the empty-state. :empty only matches when WordPress
   renders nothing at all, which is exactly the unconfigured case. */
.brm-gallery-content .wp-block-post-content:empty {
	display: none;
}

/* Core sizes gallery items with flex-basis; widen the gutter to match the
   theme's grids without fighting its layout maths. */
.brm-gallery-content .wp-block-gallery.has-nested-images {
	gap: var( --wp--preset--spacing--40 );
}

.brm-gallery-content .wp-block-gallery.has-nested-images figure.wp-block-image,
.brm-gallery-content > .wp-block-post-content > figure.wp-block-image {
	position: relative;
	overflow: hidden;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--card );
	background: linear-gradient( 135deg, #26282c, #0e0e10 );
	transition: border-color var( --brm-t ), transform var( --brm-t );
}

.brm-gallery-content .wp-block-gallery.has-nested-images figure.wp-block-image:hover,
.brm-gallery-content > .wp-block-post-content > figure.wp-block-image:hover {
	border-color: var( --brm-finish );
	transform: translateY( -3px );
}

.brm-gallery-content figure.wp-block-image img {
	transition: transform 0.35s ease;
}

.brm-gallery-content figure.wp-block-image:hover img {
	transform: scale( 1.05 );
}

/* Captions: core renders them absolutely inside cropped gallery items already,
   so this is a colour + scrim pass rather than a layout one. Core hardcodes
   `color:#fff` via `.wp-block-gallery.has-nested-images figure.wp-block-image
   figcaption` (0,3,2), so the gallery-nested selector below has to carry the
   same class depth to land the bone token. */
.brm-gallery-content .wp-block-gallery.has-nested-images figure.wp-block-image figcaption,
.brm-gallery-content figure.wp-block-image figcaption {
	background: linear-gradient( transparent, rgba( 8, 8, 9, 0.85 ) );
	color: var( --wp--preset--color--bone );
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--xs );
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: var( --wp--preset--spacing--50 ) var( --wp--preset--spacing--40 ) var( --wp--preset--spacing--40 );
}

.brm-gallery-content .wp-block-video {
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--card );
	overflow: hidden;
}

/* Any prose the shop adds between galleries. */
.brm-gallery-content .wp-block-post-content > p {
	max-width: 70ch;
	color: var( --wp--preset--color--bone );
}

/* --------------------------------------------------------------- gallery -- */

.brm-gallery-strip.wp-block-gallery figure.wp-block-image img {
	border-radius: var( --wp--custom--radius--card );
	border: 1px solid var( --wp--preset--color--line );
	transition: transform 0.3s ease;
}

.brm-gallery-strip.wp-block-gallery figure.wp-block-image:hover img {
	transform: scale( 1.03 );
}

/* ---------------------------------------------------------------- causes -- */

.brm-partners {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--40 );
	margin-top: var( --wp--preset--spacing--50 );
}

.brm-ptag {
	padding: 0.5em 1em;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--pill );
	color: var( --wp--preset--color--bone );
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--sm );
	text-decoration: none;
	transition: border-color var( --brm-t ), color var( --brm-t );
}

.brm-ptag:hover {
	border-color: var( --brm-finish );
	color: var( --brm-finish-hi );
}

/* ------------------------------------------------------------- CTA band -- */

.brm-cta {
	background-image: linear-gradient( 100deg, var( --brm-finish ), var( --wp--preset--color--burnt-press ) );
}

/* --------------------------------------------------------------- footer -- */

.brm-footer a {
	color: var( --wp--preset--color--ash );
	text-decoration: none;
}

.brm-footer a:hover {
	color: var( --wp--preset--color--bone );
}

.brm-footer p {
	margin-block: 0.35em;
}

.brm-legal p {
	margin: 0;
	letter-spacing: 0.04em;
}

/* ----------------------------------------------------------- breadcrumb -- */

.brm-breadcrumb nav.woocommerce-breadcrumb {
	color: var( --wp--preset--color--bone );
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--sm );
	letter-spacing: 0.04em;
	/* Greenshift ships `.archive .woocommerce-breadcrumb { text-align:center }`
	   at equal specificity and later in the cascade — the extra element
	   qualifier here is what beats it. */
	text-align: left;
	margin: 0;
}

.brm-breadcrumb nav.woocommerce-breadcrumb a {
	color: var( --wp--preset--color--ash );
	text-decoration: none;
}

.brm-breadcrumb nav.woocommerce-breadcrumb a:hover {
	color: var( --wp--preset--color--bone );
}

/* Woo's classic breadcrumb emits an en-dash delimiter; the comp wants "/". */
.brm-breadcrumb .delimiter {
	font-size: 0;
}

.brm-breadcrumb .delimiter::after {
	content: " / ";
	font-size: var( --wp--preset--font-size--sm );
	color: var( --wp--preset--color--line );
}

/* ---------------------------------------------------------- shop archive -- */

.brm-catalog-title {
	margin: 0;
}

.brm-toolbar {
	padding-bottom: var( --wp--preset--spacing--40 );
	border-bottom: 1px solid var( --wp--preset--color--line );
}

.brm-result-count p,
.brm-result-count .woocommerce-result-count {
	margin: 0;
}

.brm-sort select,
.brm-sort .orderby {
	background: var( --wp--preset--color--graphite );
	color: var( --wp--preset--color--bone );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--control );
	padding: 0.5em 0.8em;
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--sm );
}

.brm-sort form {
	margin: 0;
}

.sidebar {
	align-self: start;
}

.sidebar .widget,
.sidebar .ssf-widget {
	margin-bottom: var( --wp--preset--spacing--50 );
	padding: var( --wp--preset--spacing--50 );
	background: var( --wp--preset--color--graphite );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--card );
}

.sidebar .widget-title,
.sidebar .widgettitle {
	margin: 0 0 var( --wp--preset--spacing--40 );
	color: var( --brm-finish );
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--sm );
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.brm-filter-toggle {
	display: none;
	padding: 0.6em 1.2em;
	background: transparent;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--control );
	color: var( --wp--preset--color--bone );
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--sm );
	cursor: pointer;
}

/* WooCommerce floats `ul.products li.product`, which makes cards shrink-wrap and
   misalign inside a block column — force an explicit grid and reset the float. */
.brm-shop-query ul.products {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: var( --wp--preset--spacing--50 );
	margin: 0;
	padding: 0;
	list-style: none;
}

.brm-shop-query ul.products::before,
.brm-shop-query ul.products::after {
	content: none;
}

.brm-shop-query ul.products li.product {
	float: none;
	width: 100%;
	margin: 0;
	clear: none;
}

.brm-no-products {
	grid-column: 1 / -1;
	padding: var( --wp--preset--spacing--60 ) 0;
}

.brm-shop-query .woocommerce-pagination {
	margin-top: var( --wp--preset--spacing--60 );
}

.brm-shop-query .woocommerce-pagination ul.page-numbers {
	display: flex;
	gap: var( --wp--preset--spacing--30 );
	justify-content: center;
	border: 0;
	list-style: none;
	padding: 0;
}

.brm-shop-query .woocommerce-pagination li {
	border: 0;
}

.brm-shop-query .woocommerce-pagination .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: 8px;
	color: var( --wp--preset--color--bone );
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--ui );
	text-decoration: none;
}

.brm-shop-query .woocommerce-pagination .page-numbers.current,
.brm-shop-query .woocommerce-pagination a.page-numbers:hover {
	background: var( --brm-finish );
	border-color: var( --brm-finish );
	color: var( --wp--preset--color--ember );
}

/* -------------------------------------------------------------------- PDP -- */

.brm-gallery-main {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 380px;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--card );
	background: linear-gradient( 135deg, #26282c, #0e0e10 );
	overflow: hidden;
}

.brm-gallery-main img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.brm-gallery-serial {
	position: absolute;
	right: 14px;
	bottom: 12px;
	color: var( --wp--preset--color--ash );
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--xs );
	letter-spacing: 0.12em;
}

.brm-gallery-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--40 );
	margin-top: var( --wp--preset--spacing--40 );
}

.brm-gallery-thumb {
	display: block;
	width: 74px;
	height: 60px;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: 7px;
	overflow: hidden;
	transition: border-color var( --brm-t ), transform var( --brm-t );
}

.brm-gallery-thumb:hover,
.brm-gallery-thumb.is-active {
	border-color: var( --brm-finish );
	transform: translateY( -2px );
}

.brm-gallery-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.brm-pdp-brand {
	margin: 0 0 0.5em;
	color: var( --brm-finish );
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--sm );
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.brm-pdp-title {
	margin: 0 0 0.3em;
	color: var( --wp--preset--color--bone );
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--xxl );
	text-transform: uppercase;
}

.brm-pdp-spec {
	margin: 0 0 1em;
	color: var( --wp--preset--color--ash );
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--sm );
	letter-spacing: 0.06em;
}

.brm-pdp-price {
	color: var( --wp--preset--color--bone );
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--xl );
}

.brm-pdp-price del {
	margin-right: 0.4em;
	color: var( --wp--preset--color--ash );
	font-size: var( --wp--preset--font-size--lg );
}

.brm-pdp-price ins {
	text-decoration: none;
}

.brm-pdp-stock {
	margin: 0.4em 0 1.2em;
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--ui );
}

.brm-pdp-stock.is-in {
	color: var( --wp--preset--color--instock );
}

.brm-pdp-stock.is-custom {
	color: var( --brm-finish-hi );
}

.brm-pdp-stock.is-out {
	color: var( --wp--preset--color--outstock );
}

.brm-pdp-short {
	max-width: 48ch;
	margin-bottom: var( --wp--preset--spacing--50 );
	color: var( --wp--preset--color--bone );
	opacity: 0.85;
}

.brm-opt-label {
	display: block;
	margin: var( --wp--preset--spacing--50 ) 0 var( --wp--preset--spacing--30 );
	color: var( --wp--preset--color--ash );
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--sm );
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.brm-note p {
	margin: 0;
}

.brm-pdp-cta {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--40 );
	margin: var( --wp--preset--spacing--50 ) 0;
}

.brm-pdp-cta .brm-addtocart {
	flex: 1 1 200px;
	width: auto;
}

.brm-customize {
	display: inline-block;
	padding: 0.65em 1.2em;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--control );
	color: var( --wp--preset--color--bone );
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--ui );
	font-weight: 700;
	text-decoration: none;
	transition: border-color var( --brm-t ), color var( --brm-t );
}

.brm-customize:hover {
	border-color: var( --brm-finish );
	color: var( --brm-finish-hi );
}

/* Spec tabs. Without JS the headings and panels stack and read as sections —
   interactions.js turns them into a tablist. */
.brm-spec {
	margin-top: var( --wp--preset--spacing--60 );
	padding-top: var( --wp--preset--spacing--40 );
	border-top: 1px solid var( --wp--preset--color--line );
}

.brm-spec-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--30 );
	margin-bottom: var( --wp--preset--spacing--50 );
}

.brm-spec-tabs p,
.brm-spec-tabs button {
	margin: 0;
	padding: 0.5em 1.1em;
	background: transparent;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--control );
	color: var( --wp--preset--color--bone );
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--sm );
	cursor: pointer;
}

.brm-spec-tabs button[aria-selected="true"] {
	background: var( --brm-finish );
	border-color: var( --brm-finish );
	color: var( --wp--preset--color--ember );
}

.brm-spec-panel {
	color: var( --wp--preset--color--bone );
	opacity: 0.9;
	max-width: 62ch;
}

.brm-spec-panel table {
	width: 100%;
	max-width: 520px;
	border-collapse: collapse;
	font-size: var( --wp--preset--font-size--ui );
}

.brm-spec-panel table th,
.brm-spec-panel table td {
	padding: 0.6em 0.8em;
	border: 0;
	border-bottom: 1px solid var( --wp--preset--color--line );
	text-align: left;
}

.brm-spec-panel table th {
	width: 42%;
	color: var( --wp--preset--color--ash );
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--sm );
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.brm-spec-panel table p {
	margin: 0;
}

.brm-spec-empty {
	color: var( --wp--preset--color--ash );
}

/* ------------------------------------------------------------- responsive -- */

@media ( max-width: 900px ) {
	.brm-shop-query ul.products {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.brm-receiver-stage {
		height: 200px;
	}

	.brm-topbar {
		justify-content: center;
		text-align: center;
	}
}

@media ( max-width: 781px ) {
	.brm-filter-toggle {
		display: inline-block;
	}

	/* Collapsed by default on small screens; the toggle re-shows it in flow. */
	.brm-shop .sidebar {
		display: none;
	}

	.brm-shop .sidebar.is-open {
		display: block;
	}

	.brm-cartchip-label {
		display: none;
	}
}

@media ( max-width: 480px ) {
	.brm-shop-query ul.products {
		grid-template-columns: minmax( 0, 1fr );
	}

	.brm-cats {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.brm-hero-grain,
	.brm-receiver-engrave::before {
		animation: none;
	}

	.brm-receiver-engrave::before {
		clip-path: inset( 0 0 0 0 );
	}

	.brm-reveal.is-armed {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.brm-build,
	.brm-pcard,
	.brm-cat,
	.brm-svc {
		transition: border-color var( --brm-t );
	}

	.brm-build:hover,
	.brm-pcard:hover,
	.brm-cat:hover,
	.brm-svc:hover {
		transform: none;
	}
}