/*
Theme Name: BrandVault
Description: Digital asset management for Scottish Rite, NMJ. Standalone theme — no parent, no page builder.
Author: M. Blaisdell
Version: 3.0.0
Requires at least: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: brandvault
*/

/* =========================================
   DESIGN SYSTEM — CLASS CONTRACT
   =========================================
   Two tiers. Pick based on what you're doing:

   bv-*        Brand components — multi-property, Elementor-specific
               e.g. bv-btn, bv-card, bv-badge, bv-type, bv-shell

   bare class  Utilities & layout — single-purpose, no prefix needed
               e.g. section, wrap, grid, pad-m, bg-accent,
                    text-muted, serif, row, stack-md

   Modifiers always use .is-* on components:
               e.g. .bv-btn.is-primary, .bv-card.is-soft, .bv-type.is-lead

   Typography  One system only → .bv-type with size/weight/color modifiers
   Colors      → .bg-* for backgrounds, .text-* for text
   Layout      → .section .wrap .grid .pad-* .cols-* .split-* .hero-split
   ========================================= */

/* =========================================
   1. DESIGN TOKENS
   ========================================= */

:root {
	/* ----- RADII / TRANSITIONS ----- */
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-pill: 999px;

	/* ----- TRACKING -----
	   Measured off the reference: -0.05em holds from 46px up to 110px,
	   easing to -0.02em in the 24-32px range and to 0 at body size. This
	   ratio is the dominant signal of the whole look. */
	--track-display: -0.05em;
	--track-heading: -0.03em;
	--track-title: -0.02em;

	/* The scale above runs negative because it describes large type. Uppercase
	   micro-labels need the opposite: at 11px, caps set solid are a wall.
	   .08em matches the hand-written value on their siblings in plate.css
	   (.bv-plate__status, .bv-plate__format). This token was used in three
	   places and defined in none, so every one of those labels was silently
	   falling back to letter-spacing: normal. */
	--track-label: 0.08em;

	--transition-fast: 150ms ease-out;
	--transition-med: 220ms ease-out;

	--color-focus-ring: rgba(180, 83, 9, 0.4);

	/* ----- FONTS ----- */
	--font-sans:
		"Geist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		sans-serif;
	/* Capital L, and a serif tail. Was `"lora", …, sans-serif`: when Lora was
	   missing — which was everywhere but a machine with it installed — a
	   variable named serif fell back to a SANS face, so headings silently
	   changed category rather than degrading within it. */
	--font-serif: "Lora", Georgia, "Times New Roman", Times, serif;
	--font-mono:
		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
		"Courier New", monospace;

	/* ===========================
     BRANDVAULT COLOR SCALE
     =========================== */

	/* NEUTRALS (zinc) */
	--bv-slate-50: #fafafa;
	--bv-slate-500: #71717a;
	--bv-slate-700: #3f3f46;

	/* COPPER ACCENT (rooted in #b45309) */ /* primary accent */
	--bv-copper-700: #92400e;
	--bv-copper-900: #451a03;

	/* Page backdrop — the deep navy behind the app shell. All that
	   survives of the retired blue accent ramp; the other nine steps were
	   referenced nowhere and were removed on 2026-07-27. */
	--color-backdrop: #122841;

	/* SUPPORT – SUCCESS / WARNING / DANGER */

	/* ===========================
     SEMANTIC COLORS
     ===========================
     Source of truth is theme.json's palette, not this file. Each role
     below aliases the preset WordPress generates from it, so the Site
     Editor, the block editor, and the front end can never disagree —
     change a value in theme.json and it lands everywhere.

     The --bv-* ramps above are the reference scale those presets were
     drawn from, kept because several color-mix() calls sample specific
     steps directly. They are documentation now, not the source. */

	/* Shell vs inner app. Navy is structural now: the dark grounds are
	   vault rather than near-black, and the page field is a cool grey so
	   white specimen plates read as objects sitting on it. */
	--color-shell-bg: var(--wp--preset--color--vault); /* body background */
	--color-bg: var(--wp--preset--color--field); /* page/app background */
	--color-bg-alt: var(
		--wp--preset--color--bg-alt
	); /* light alternate surface */
	--color-surface: var(--wp--preset--color--surface); /* card backgrounds */

	--color-border-subtle: var(--wp--preset--color--rule);
	--color-border-strong: var(--wp--preset--color--border-strong);

	/* Text */
	--color-text: var(--wp--preset--color--ink);
	--color-text-muted: var(--wp--preset--color--text-muted);
	--color-text-soft: var(--wp--preset--color--text-soft);

	/* The lightest text — white on the dark grounds (shell/vault). Was a bare
	   #fff hardcoded in dozens of rules because no token expressed it. Kept a
	   literal, not an alias of --color-surface: surface is a background role and
	   could be re-tinted; inverse text must stay pure white on dark. */
	--color-text-inverse: #ffffff;

	/* Accent / Brand — Copper */
	--color-accent: var(--wp--preset--color--accent);
	--color-accent-soft: var(--wp--preset--color--accent-soft);
	--color-accent-strong: var(--wp--preset--color--accent-strong);

	/* Accent border helpers (replaces scattered rgba values) */
	--color-accent-border: rgba(180, 83, 9, 0.22);
	--color-accent-border-soft: rgba(180, 83, 9, 0.12);

	/* Status */
	--color-danger: var(--wp--preset--color--danger);
	--color-success: var(--wp--preset--color--success);
	--color-warning: var(--wp--preset--color--warning);

	/* ===========================
     PLATE ROLES
     ===========================
     Navy is the heritage colour — the retired child stylesheet had
     --color-accent: var(--bv-blue-600) before someone swapped it to
     copper. These restore navy as the structural colour and leave
     copper as the accent it should have stayed.

     --color-specimen is white on purpose and must remain neutral: a
     brand library cannot tint the ground around artwork without
     misreporting the artwork's colour. */
	--color-ink: var(--wp--preset--color--ink);
	--color-field: var(--wp--preset--color--field);
	--color-rule: var(--wp--preset--color--rule);
	--color-specimen: var(--wp--preset--color--surface);
	--color-brass: var(--wp--preset--color--accent);

	/* ----- BORDERS ----- */
	--border-subtle: 1px solid var(--color-border-subtle);
	--border-strong: 1px solid var(--color-border-strong);

	/* =========================================
     TYPOGRAPHY SCALE (RESPONSIVE / FLUID)
     - Preserves your existing class API
     ========================================= */

	/* Tune these to control scaling behavior */
	--bv-type-min: 320; /* smallest viewport you care about */
	--bv-type-max: 1200; /* scaling stops here */

	/* Normalized fluid factor 0..1 */
	--bv-fluid: clamp(
		0,
		(100vw - (var(--bv-type-min) * 1px)) /
			((var(--bv-type-max) - var(--bv-type-min)) * 1px),
		1
	);

	/* Base sizes */
	--font-size-xs: clamp(11px, 11px + 1px * var(--bv-fluid), 12px); /* 11 */
	--font-size-sm: clamp(
		14px,
		14px + 1px * var(--bv-fluid),
		15px
	); /* 11 × 1.25 = 13.75 → 14 */
	--font-size-md: clamp(
		17px,
		17px + 2px * var(--bv-fluid),
		19px
	); /* 14 × 1.25 = 17.5  → 17 */
	--font-size-lg: clamp(
		22px,
		22px + 2px * var(--bv-fluid),
		24px
	); /* 17 × 1.25 = 21.25 → 22 */
	--font-size-xl: clamp(
		27px,
		27px + 3px * var(--bv-fluid),
		30px
	); /* 22 × 1.25 = 27.5  → 27 */
	--font-size-2xl: clamp(
		28px,
		28px + 10px * var(--bv-fluid),
		38px
	); /* mobile floor lowered 34→28 to prevent overflow */
	--font-size-3xl: clamp(
		32px,
		32px + 16px * var(--bv-fluid),
		48px
	); /* mobile floor lowered 42→32 to prevent overflow */

	/* Display sizes for hero / massive headings */
	/* Mobile floors lowered so hero headings fit a ~343px content column;
	   desktop maxes (≥1200px) are unchanged. */
	--font-size-display-sm: clamp(26px, 26px + 20px * var(--bv-fluid), 46px);
	--font-size-display-md: clamp(30px, 30px + 28px * var(--bv-fluid), 58px);
	--font-size-display-lg: clamp(34px, 34px + 34px * var(--bv-fluid), 68px);
	--font-size-display-xl: clamp(38px, 38px + 46px * var(--bv-fluid), 84px);

	/* Line heights (slightly friendlier on small screens) */
	--line-tight: 1.05;
	--line-normal: 1.35;
	--line-relaxed: 1.6;

	/* ----- SPACING SCALE (4px base) ----- */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;

	/* ----- SHADOWS — flat SaaS style ----- */
	--shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-soft: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);
	--shadow-strong:
		0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);

	/* ----- WIDTHS ----- */
	--width-narrow: 760px;
	--width-page: 1120px;
	--width-max: 1600px;

	/* =========================================
	   LAYOUT RHYTHM VARIABLES
	   (overridden by .pad-*, .gap-*, .wrap, .grid modifiers)
	   ========================================= */

	/* Space scale used by gap-* and section-gap-* modifiers */

	/* Button component padding */

	/* Elementor global color alias */
	--bv-primary: var(--color-accent);
	--bv-ink: var(--bv-copper-700); /* logo carousel ink color */
}

hr {
	border: none;
	height: 1px;
	background-color: var(--color-border-subtle);
	width: 100%;
	margin-block: var(--space-6);
}

/* =========================================
   COLOR UTILITIES — use .bg-* and .text-* bare classes (see section 5b)
   ========================================= */

/* =========================================
   2. GLOBAL BASE STYLES & RESET
   ========================================= */

html {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 100%;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%; /* Prevent font-size inflation on orientation change */
	text-size-adjust: 100%;
	background: var(--color-backdrop);
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	font-family: var(--font-sans);
	font-size: var(--font-size-md);
	line-height: var(--line-normal);
	color: var(--color-text);
	/* max-width:1920px !important; */
	margin: auto;
}

/* Improve wrapping for headings/longform */
h1,
h2,
h3,
h4,
h5,
h6 {
	/* Lora's variable range starts at 400 — 300 was a weight it does not have,
	   and the tight tracking below it was tuned for Geist, a geometric sans.
	   A serif at display size needs far less negative tracking, and none of
	   this mattered while Lora was never actually being downloaded. */
	letter-spacing: -0.01em;
	font-weight: 400;
	text-wrap: balance;
}
.bv-type.is-longform {
	text-wrap: pretty;
}

/* Utility-style class */
.bv-border-subtle {
	border: var(--border-subtle);
}

/* Shell to contain the app on dark background */
.bv-shell {
	border-radius: 16px;
	max-width: 1600px;
	/* optional: additional styles if needed */
}

/* Optional inner panel */
.bv-shell__inner {
	max-width: var(--width-max);
	margin: 0 auto;
	background: linear-gradient(to bottom, var(--color-surface), #f7f8fb);
	box-shadow: 0 18px 45px rgba(0, 0, 0, 0.4);
	border-radius: 24px;
	/* padding-inline: var(--space-4); */
	/* padding-block: var(--space-4); */
	overflow: clip; /* clip (not hidden) — does not trap position:fixed children */
}

/* Default headings */
h1,
h2,
h3,
h4,
h5,
h6 {
	/* font-family: var(--font-sans); */
	/* font-weight: 600; */
	line-height: var(--line-tight);
	margin: 0 0 var(--space-3);
	overflow-wrap: break-word; /* long unbroken words never force horizontal scroll */
}

/* =========================================
   TOC / KICKER — small all-caps label for any heading tag
   ========================================= */

/* Use .bv-toc-kicker — works on any H tag via Elementor CSS Classes */
.bv-toc-kicker {
	font-size: var(--font-size-xs) !important;
	line-height: var(--line-normal) !important;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 800;
	color: var(--color-text-soft);
	margin: 0 0 var(--space-3) !important;
}

/* Optional: stronger version (for section headers like DESCRIPTION) */
.bv-toc-kicker.is-strong {
	color: var(--color-text-muted);
}

/* Optional: if you want it to “read” like a section divider */
.bv-toc-kicker.is-divider {
	padding-top: var(--space-6);
	border-top: var(--border-subtle);
}

/* Serif utility for editorial blocks */
.u-serif,
.serif {
	font-family: var(--font-serif);
}

/* Base link styling */
a {
	color: var(--color-accent);
	text-decoration: none;
	position: relative;
	transition: color var(--transition-fast);
}

a:hover {
	color: var(--color-accent-strong);
}

a:focus-visible {
	outline: 2px solid var(--color-focus-ring);
	outline-offset: 2px;
}

/* Underline-on-hover helper */
.u-link-underline,
.link-underline {
	text-decoration: none;
}
.u-link-underline::after,
.link-underline::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 0;
	height: 1px;
	background: currentColor;
	transition: width var(--transition-med);
}
.u-link-underline:hover::after,
.link-underline:hover::after {
	width: 100%;
}

/* =========================================
   3. TYPOGRAPHY — .bv-type + modifiers
      Size:   .is-xs .is-sm .is-md .is-lg .is-xl .is-2xl .is-3xl
              .is-display-sm .is-display-md .is-display-lg .is-display-xl
      Weight: .is-light .is-regular .is-medium .is-semibold .is-bold
      Family: .is-sans .is-serif .is-mono
      Color:  .is-muted .is-soft .is-accent
      Role:   .is-body .is-lead .is-longform .is-caption .is-heading
   ========================================= */

.bv-type {
	font-family: var(--font-sans);
	font-size: var(--font-size-md);
	line-height: var(--line-normal);
	font-weight: 400;
	color: var(--color-text);
}

/* FONT FAMILY */
.bv-type.is-sans {
	font-family: var(--font-sans);
}
.bv-type.is-serif {
	font-family: var(--font-serif);
}
.bv-type.is-mono {
	font-family: var(--font-mono);
	overflow-wrap: anywhere; /* hex codes / IDs wrap instead of overflowing on mobile */
}

/* SIZE SCALE */
.bv-type.is-xs {
	font-size: var(--font-size-xs);
}
.bv-type.is-sm {
	font-size: var(--font-size-sm);
}
.bv-type.is-md {
	font-size: var(--font-size-md);
}
.bv-type.is-lg {
	font-size: var(--font-size-lg);
}
.bv-type.is-xl {
	font-size: var(--font-size-xl);
}
.bv-type.is-2xl {
	font-size: var(--font-size-2xl);
}
.bv-type.is-3xl {
	font-size: 3.5rem;
	font-weight: 900 !important;
}

.bv-type.is-display-sm {
	font-size: var(--font-size-display-sm);
	letter-spacing: var(--track-display);
}
.bv-type.is-display-md {
	font-size: var(--font-size-display-md);
	letter-spacing: var(--track-display);
}
.bv-type.is-display-lg {
	font-size: var(--font-size-display-lg);
	letter-spacing: var(--track-display);
}
.bv-type.is-display-xl {
	font-size: var(--font-size-display-xl);
	letter-spacing: var(--track-display);
}

/* WEIGHT */
.bv-type.is-light {
	font-weight: 200;
}
.bv-type.is-regular {
	font-weight: 400;
}
.bv-type.is-medium {
	font-weight: 500;
}
.bv-type.is-semibold {
	font-weight: 600;
}
.bv-type.is-bold {
	font-weight: 700;
}

/* LINE HEIGHT */
.bv-type.is-tight {
	line-height: var(--line-tight);
}
.bv-type.is-normal {
	line-height: var(--line-normal);
}
.bv-type.is-relaxed {
	line-height: var(--line-relaxed);
}

/* PURPOSE-BASED TYPOGRAPHY */
.bv-type.is-body {
	font-size: var(--font-size-md);
	line-height: var(--line-normal);
}

.bv-type.is-longform {
	font-size: var(--font-size-md);
	line-height: var(--line-relaxed);
	max-width: var(--width-narrow);
}

.bv-type.is-lead {
	font-size: var(--font-size-lg);
	line-height: var(--line-relaxed);
}

.bv-type.is-caption {
	font-size: var(--font-size-xs);
	color: var(--color-text-soft);
	line-height: var(--line-normal);
}

.bv-type.is-heading {
	font-weight: 600;
	line-height: var(--line-tight);
}

.bv-type.is-display {
	font-weight: 600;
	line-height: var(--line-tight);
}

/* COLOR UTILITIES ON TYPE */
.bv-type.is-muted {
	color: var(--color-text-muted);
}
.bv-type.is-soft {
	color: var(--color-text-soft);
}
.bv-type.is-accent {
	color: var(--color-accent);
}
.bv-type.is-surface {
	color: var(--color-surface);
}

/* ALIGN / TRANSFORM */
.bv-type.is-uppercase {
	text-transform: uppercase;
	/* letter-spacing: 0.1em; */
}
.bv-type.is-center {
	text-align: center;
}
.bv-type.is-right {
	text-align: right;
}
.bv-type.is-left {
	text-align: left;
}

/* Heading sizes → use .bv-type with size modifiers:
   display-xl → .bv-type.is-display-xl
   display-lg → .bv-type.is-display-lg
   3xl        → .bv-type.is-3xl
   2xl        → .bv-type.is-2xl  (add .is-serif for serif variant)
   xl         → .bv-type.is-xl
   lg         → .bv-type.is-lg                                    */

/* Body text helpers */
.u-text-md,
.text-md {
	font-size: var(--font-size-md);
	line-height: var(--line-normal);
}

.u-text-sm,
.text-sm {
	font-size: var(--font-size-sm);
	line-height: var(--line-normal);
}

.u-text-xs,
.text-xs {
	font-size: var(--font-size-xs);
	line-height: var(--line-normal);
}

/* Text colors */
.u-text-muted,
.text-muted {
	color: var(--color-text-muted);
}
.u-text-soft,
.text-soft {
	color: var(--color-text-soft);
}
.u-text-accent,
.text-accent {
	color: var(--color-accent);
}

/* Uppercase small label text (kickers) */
.u-label,
.label {
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-text-soft);
}

/* =========================================
   4. LAYOUT PRIMITIVES
      .l-page / .bv-content / .bv-brand / .l-two-col
      Flex: .l-row (.row) / .l-col (.col) / .l-row-between (.row-between)
   ========================================= */

/* Page wrapper */
.l-page {
	margin-inline: auto;
	padding-block: var(--space-10);
	max-width: var(--width-max);
}

/* Content wrapper for main text */
.bv-content {
	max-width: var(--width-narrow);
	width: 100%;
	margin-inline: auto;
}

/* Brand-wide wrapper */
.bv-brand {
	width: 100%;
	margin-inline: auto;
	padding-block: var(--space-10);
	padding: var(--space-16);
}

/* Two-column layout (content left, meta right) */
.l-two-col {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
	gap: var(--space-8);
}

@media (max-width: 960px) {
	.l-two-col {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}
}

/* Flex utilities — default gap is space-2; override with .gap-* modifier */
.l-row,
.row {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.l-row-between,
.row-between {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-2);
}

.l-row-center,
.row-center {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-2);
}

.l-col,
.col {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Horizontal pill row */
.u-pill-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.bv-count-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.25rem 0.6rem;
	border-radius: var(--radius-pill);
	font-size: var(--font-size-xs);
	font-weight: 600;
	text-transform: capitalize;
	letter-spacing: 0.02em;
	background: color-mix(
		in srgb,
		var(--bv-color, var(--color-accent)) 12%,
		#ffffff
	);
	color: var(--bv-color, var(--color-accent-strong));

	border: 1px solid
		color-mix(in srgb, var(--bv-color, var(--color-accent)) 30%, transparent);
}

/* -----------------------------------------------------------------
   5. STRUCTURAL LAYOUT
      .section + .pad-* → vertical rhythm bands
      .wrap             → constrain width + gutters
      .flow             → vertical spacing between siblings
      .grid + .cols-*   → responsive columns
      .split-* .hero-split → asymmetric layouts
   -----------------------------------------------------------------*/

/* Section: vertical band with configurable padding via vars.
   Mobile collapses padding; desktop expands via clamp.
   Use .pad-xs through .pad-hero to override --ds-section-y. */
.section {
	padding-block: clamp(0.5rem, 2vw, 1.5rem);
	max-width: 100%;
	margin-inline: auto;
}

/* FIX: .flow class — referenced in the t-shirt size docs but was missing.
   Lobotomised-owl pattern: adds vertical rhythm between direct children
   using --ds-flow-gap.  Use .gap-* modifiers to change the gap size. */
.flow > * + * {
	margin-block-start: var(--space-4);
}

/* Wrap: centres content, sets max-width, and adds responsive
   side spacing via --ds-gutter. On mobile, gutter shrinks
   to keep content from kissing the screen edge. */

.wrap {
	--_gutter: clamp(1rem, 5vw, 2rem);
	width: min(72rem, calc(100% - (var(--_gutter) * 2)));
	margin-inline: auto;
	/* no padding-inline */
}
/* Full width: edge-to-edge. Usually pair with a .wrap inside
   for readable line lengths on mobile. */
.full {
	width: 100%;
}

/* Content-half / content-third: left-anchored content blocks.
   Unlike .wrap (which centres), these pin to the left edge of their
   parent and limit width — ideal for hero copy, CTAs, and intro
   paragraphs where you want text on one side and space (or a
   background image) on the other.

   Usage in Elementor:
     Section          → section pad-hero e-reset
     Inner column     → content-half            (text + buttons go here)
     Sibling column   → (leave empty or place an image widget)
*/
.content-half {
	width: 100%; /* full-width on mobile */
	max-width: 50%; /* cap at half the parent on desktop */
	margin-inline-start: 0; /* pin to left — no auto centering */
}
.content-third {
	width: 100%;
	max-width: 33.333%;
	margin-inline-start: 0;
}

.content-3-4,
.content-3\/4 {
	width: 100%;
	max-width: 66.666%;
	margin-inline-start: 0;
}

/* On small screens, let content-half/third go full-width */
@media (max-width: 47.999rem) {
	.content-half,
	.content-third,
	.content-3-4,
	.content-3\/4 {
		max-width: 100%;
	}
}

/* Grid: responsive column layout.  By default collapses to 1
   column on mobile and uses the global grid gap.  Use the
   modifiers below to set the number of columns. */
.grid {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
}

.grid-focus {
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	gap: var(--space-6);
}

/* Column presets: set number of columns at breakpoints.
   .cols-1 is available at all widths to explicitly force single-column. */
.cols-1 {
	grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
	.cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
@media (min-width: 64rem) {
	.cols-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* Asymmetric splits for common layouts */
@media (min-width: 64rem) {
	.split-60-40 {
		grid-template-columns: 3fr 2fr;
	}
	.split-70-30 {
		grid-template-columns: 7fr 3fr;
	}

	.split-80-20 {
		grid-template-columns: 8fr 2fr;
	}

	.split-80-20-reverse {
		grid-template-columns: 1fr 4fr;
	}
	.split-60-40-reverse {
		grid-template-columns: 2fr 3fr;
	}
	.split-70-30-reverse {
		grid-template-columns: 3fr 7fr;
	}
}

/* Hero split: two-column grid for hero sections where copy sits on
   the left and a visual (image, video, illustration) fills the right.
   Collapses to a single column (copy first) on mobile.

   Usage in Elementor:
     Section CSS Classes:  section pad-hero e-reset
     Inner row CSS Class:  grid hero-split
     Column 1 CSS Classes: (text, heading, buttons)
     Column 2 CSS Classes: (image widget)

   Swap column order on mobile by adding 'hero-split-reverse'. */
.hero-split {
	grid-template-columns: 1fr; /* mobile: stacked */
	align-items: center;
}
@media (min-width: 48rem) {
	.hero-split {
		grid-template-columns: 1fr 1fr;
	}
	.hero-split.split-60-40 {
		grid-template-columns: 3fr 2fr;
	}
	.hero-split.split-70-30 {
		grid-template-columns: 7fr 3fr;
	}
}

/* Reverse column order on mobile (image above copy) */
.hero-split-reverse > *:first-child {
	order: 1;
}
@media (max-width: 47.999rem) {
	.hero-split-reverse > *:first-child {
		order: 2;
	}
	.hero-split-reverse > *:last-child {
		order: 1;
	}
}

/* -----------------------------------------------------------------
   5b. T-SHIRT SIZE MODIFIERS
       Pad: .pad-0 .pad-xxs .pad-xs .pad-s .pad-m .pad-l .pad-xl .pad-hero
       Gap: .gap-xs .gap-s .gap-m .gap-l .gap-xl
       Grid gap: .grid-gap-s/m/l/xl
       Max: .max-720 .max-960 .max-1140 .max-1280 .max-1440
   -----------------------------------------------------------------*/

/* Section padding sizes */
.pad-0 {
	padding-block-start: 0 !important;
	padding-block-end: 0 !important;
}

.pad-xxs {
	--ds-section-y: clamp(0.5rem, 1.5vw, 0.75rem);
}
.pad-xs {
	--ds-section-y: clamp(1rem, 2.4vw, 1.5rem);
}
.pad-s {
	--ds-section-y: clamp(1.5rem, 3vw, 2rem);
}
.pad-m {
	--ds-section-y: clamp(2rem, 4vw, 3rem);
}
.pad-l {
	--ds-section-y: clamp(2.5rem, 5vw, 4rem);
}
.pad-xl {
	--ds-section-y: clamp(4rem, 8vw, 6rem);
}
.pad-hero {
	--ds-section-y: clamp(8rem, 12vw, 12rem);
}

/* Logical-property overrides — safe for RTL/vertical writing modes. */
.pad-top-0 {
	padding-block-start: 0 !important;
}
.pad-bot-0 {
	padding-block-end: 0 !important;
}

/* Section gap utilities: explicit spacing between sections.
   Apply directly to the section that needs top separation. */
.section-gap-s {
	margin-block-start: var(--space-4);
}
.section-gap-m {
	margin-block-start: var(--space-8);
}
.section-gap-l {
	margin-block-start: var(--space-12);
}
.section-gap-xl {
	margin-block-start: var(--space-16);
}

/* Gap utilities — set gap directly AND update flow/grid variables.
   Works on any flex or grid container, including Elementor sections.
   Use on the section/row/grid element in Elementor's CSS Classes field. */
.gap-xs {
	gap: var(--space-2) !important;
	--ds-flow-gap: var(--space-2);
	--ds-grid-gap: var(--space-2);
}
.gap-s {
	gap: var(--space-3) !important;
	--ds-flow-gap: var(--space-3);
	--ds-grid-gap: var(--space-3);
}
.gap-m {
	gap: var(--space-4) !important;
	--ds-flow-gap: var(--space-4);
	--ds-grid-gap: var(--space-4);
}
.gap-l {
	gap: var(--space-8) !important;
	--ds-flow-gap: var(--space-8);
	--ds-grid-gap: var(--space-8);
}
.gap-xl {
	gap: var(--space-12) !important;
	--ds-flow-gap: var(--space-12);
	--ds-grid-gap: var(--space-12);
}

/* Grid/row-gap aliases — same values, different names for clarity */
.grid-gap-s,
.row-gap-s {
	gap: var(--space-4) !important;
	--ds-grid-gap: var(--space-4);
}
.grid-gap-m,
.row-gap-m {
	gap: var(--space-6) !important;
	--ds-grid-gap: var(--space-6);
}
.grid-gap-l,
.row-gap-l {
	gap: var(--space-8) !important;
	--ds-grid-gap: var(--space-8);
}
.grid-gap-xl,
.row-gap-xl {
	gap: var(--space-12) !important;
	--ds-grid-gap: var(--space-12);
}
/* Wrap width presets */
.max-720 {
	--ds-wrap-max: 720px;
}
.max-960 {
	--ds-wrap-max: 960px;
}
.max-1140 {
	--ds-wrap-max: 1140px;
}
.max-1280 {
	--ds-wrap-max: 1280px;
}
.max-1440 {
	--ds-wrap-max: 1440px;
}

/* Inset block: responsive left/right framing on full-width sections */
.inset-block {
	width: calc(100% - (clamp(1rem, 5vw, 2rem) * 2));
	margin-inline: auto;
}

.inset-block-sm {
	width: calc(100% - (1rem * 2));
	margin-inline: auto;
}

/* Radius utilities: consistent rounded corners for containers/widgets. */
.radius-s {
	border-radius: var(--radius-sm);
	overflow: hidden;
}
.radius-m {
	border-radius: var(--radius-md);
	overflow: hidden;
}
.radius-l {
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.radius-full {
	border-radius: var(--radius-pill);
	overflow: hidden;
}

/* -----------------------------------------------------------------
   5c. COLOUR UTILITIES
       Backgrounds: .bg-base .bg-white .bg-surface .bg-surface-alt
                    .bg-accent .bg-accent-alt .bg-dark .bg-success .bg-warning
       Text:        .text-muted .text-soft .text-accent
                    .text-md .text-sm .text-xs
   -----------------------------------------------------------------*/

/* Background colours — !important overrides Elementor inline styles on sections */
.bg-base {
	background-color: var(--color-bg) !important;
}
.bg-white {
	background-color: var(--color-surface) !important;
}
.bg-surface {
	background-color: var(--color-surface) !important;
}
.bg-surface-alt {
	background-color: var(--color-bg-alt) !important;
}
.bg-accent {
	background-color: var(--color-accent) !important;
	color: var(--color-text-inverse);
}
.bg-accent-alt {
	background-color: var(--color-accent-strong) !important;
	color: var(--color-text-inverse);
}
.bg-success {
	background-color: var(--color-success) !important;
	color: var(--color-text-inverse);
}
.bg-warning {
	background-color: var(--color-warning) !important;
}
.bg-secondary {
	background-color: var(--bv-slate-700) !important;
	color: var(--color-text-inverse);
}
.bg-tertiary {
	background-color: var(--bv-slate-500) !important;
	color: var(--color-text-inverse);
}
.bg-dark {
	background-color: var(--color-shell-bg) !important;
	color: var(--bv-slate-50);
}

.bg-outline {
	border: 1.5px solid var(--color-border-subtle);
	padding: 0.625rem 1rem;
}

/* Vertical spacing (Stacks) */
.u-stack-xs > * + *,
.stack-xs > * + * {
	margin-top: var(--space-1);
}
.u-stack-sm > * + *,
.stack-sm > * + * {
	margin-top: var(--space-2);
}
.u-stack-md > * + *,
.stack-md > * + * {
	margin-top: var(--space-3);
}
.u-stack-lg > * + *,
.stack-lg > * + * {
	margin-top: var(--space-4);
}
.u-stack-xl > * + *,
.stack-xl > * + * {
	margin-top: var(--space-6);
}

/* Section padding → use .section with .pad-* modifiers:
   pad-xxs / pad-xs / pad-s / pad-m / pad-l / pad-xl / pad-hero */

/* Generic block */
.bv-block {
	overflow: hidden;
}

/* Max-width helper */
.u-max-page,
.max-page {
	max-width: var(--width-page);
	margin-inline: auto;
}

/* =========================================
   6. CARDS — .bv-card
      Modifiers: .is-soft .is-muted
      Children:  .bv-card__header .bv-card__title .bv-card__subtitle
   ========================================= */

.bv-card {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	border: var(--border-subtle);
	padding: var(--space-5);
	box-shadow: none;
	transition:
		box-shadow var(--transition-med),
		transform var(--transition-med),
		border-color var(--transition-med),
		background-color var(--transition-med);
}

.bv-card.is-soft {
	background: var(--color-bg-alt);
}

.bv-card.is-muted {
	background: var(--color-accent-soft);
	border-color: var(--color-accent-border-soft);
}

.bv-card:hover {
	box-shadow: var(--shadow-soft);
	border-color: var(--color-border-strong);
}

/* Internal card header */
.bv-card__header {
	padding-bottom: var(--space-3);
	margin-bottom: var(--space-3);
	border-bottom: var(--border-subtle);
}

.bv-card__title {
	font-size: var(--font-size-lg);
	font-weight: 600;
}

.bv-card__subtitle {
	font-size: var(--font-size-sm);
	color: var(--color-text-soft);
}

/* =========================================
   7. META PANEL — .bv-meta-panel / .bv-meta-row
   ========================================= */

.bv-meta-panel {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	border: var(--border-subtle);
	padding: var(--space-4);
}

.bv-meta-panel__title {
	font-size: var(--font-size-sm);
	font-weight: 600;
	margin-bottom: var(--space-3);
	color: var(--color-text-muted);
}

.bv-meta-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-2);
	padding-block: var(--space-2);
	border-bottom: var(--border-subtle);
}

.bv-meta-row:last-child {
	border-bottom: none;
}

.bv-meta-row__label {
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-text-soft);
	margin-right: var(--space-3);
	flex-shrink: 0;
}

.bv-meta-row__value {
	font-size: var(--font-size-sm);
	color: var(--color-text);
	text-align: right;
	max-width: 60%;
	word-wrap: break-word;
}

.bv-meta-row__value a:hover {
	font-weight: 500;
	color: var(--color-text-muted);
}

@media (max-width: 600px) {
	.bv-meta-row {
		flex-direction: column;
		align-items: flex-start;
	}
	.bv-meta-row__value {
		max-width: 100%;
		text-align: left;
	}
}

/* =========================================
   8. BADGES — .bv-badge
      Modifiers: .is-accent
      Children:  .bv-badge__dot
   ========================================= */

.bv-badge {
	padding: 2px 10px !important;
	border-radius: var(--radius-pill);
	font-size: 0.65rem;
	font-family: var(--font-sans);
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	text-transform: capitalize;
	line-height: 1rem;
	gap: 6px;
	background: var(--color-accent-soft);
	color: var(--color-accent-strong);
	border: 1px solid var(--color-accent-border-soft);
	width: fit-content !important;
	align-self: flex-end !important;
	transition:
		background-color var(--transition-fast),
		color var(--transition-fast),
		border-color var(--transition-fast);
}

.bv-badge a {
	color: var(--color-accent-strong);
}

.bv-badge a:hover {
	color: var(--color-text-inverse);
}

.bv-badge:hover {
	color: var(--color-text-inverse);
	background: var(--color-accent);
	border-color: var(--color-accent);
}

.bv-badge p {
	line-height: 1rem;
}

.bv-badge.is-accent {
	background: var(--color-accent-soft);
	color: var(--color-accent-strong);
	border-color: var(--color-accent-border);
}

/* Small dot inside badge (optional) */
.bv-badge__dot {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: currentColor;
}

.asset-type-chip a {
	display: flex;
	align-items: center; /* vertical centering */
	gap: 0.5rem; /* space between icon and label */
	text-decoration: none;
}
.asset-type-chip .asset-icon {
	flex: 0 0 auto; /* icon doesn't shrink */
	line-height: 0; /* kill the inline-img baseline gap */
}
.asset-type-chip .asset-icon img {
	display: block;
	width: 24px; /* set a real size — Pods icons come in raw */
	height: auto;
}
.asset-type-chip p {
	margin: 0; /* default <p> margins fight the centering */
}

/* =========================================
   9. BUTTONS — .bv-btn (Elementor widget wrapper)
      Variants: .is-primary .is-secondary .is-ghost .is-text
   ========================================= */

/* Base — class `bv-btn` on the widget wrapper */
.bv-btn .bv-btn__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 18px;
	border-radius: var(--radius-xs);
	font-family: var(--font-sans);
	text-decoration: none;
	cursor: pointer;
	color: var(--color-accent-strong);
	background: transparent;
	border: none;
	transition:
		background-color var(--transition-fast),
		color var(--transition-fast),
		transform var(--transition-fast);
	font-size: var(--font-size-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.bv-btn__link {
	background-color: transparent;
	border-radius: 0;
	fill: inherit;
	font-size: 15px;
	line-height: 1;
	padding: 12px 24px;
	text-align: center;
	transition: all 0.3s;
}

.bv-btn .bv-btn__link:focus-visible {
	outline: 2px solid var(--color-focus-ring);
	outline-offset: 2px;
}

/* PRIMARY — `bv-btn is-primary` */
.bv-btn.is-primary .bv-btn__link {
	background: var(--color-accent);
	color: var(--color-text-inverse);
}
.bv-btn.is-primary .bv-btn__link:hover {
	background: var(--color-accent-strong);
	transform: translateY(-1px);
}

/* SECONDARY — `bv-btn is-secondary` */
.bv-btn.is-secondary .bv-btn__link {
	background: var(--color-surface);
	color: var(--color-accent-strong);
	border: 1px solid var(--color-accent-border);
}
.bv-btn.is-secondary .bv-btn__link:hover {
	background: var(--color-accent-soft);
}

/* GHOST — `bv-btn is-ghost` */
.bv-btn.is-ghost .bv-btn__link {
	background: transparent;
	color: var(--color-accent-strong);
}
.bv-btn.is-ghost .bv-btn__link:hover {
	background: rgba(0, 0, 0, 0.04);
}

/* TEXT — `bv-btn is-text` */
.bv-btn.is-text .bv-btn__link {
	background: none;
	padding: 0;
	color: var(--color-accent) !important;
	font-size: var(--font-size-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.bv-btn.is-text .bv-btn__link:hover {
	color: var(--color-accent-strong) !important;
	text-decoration: none;
}
.bv-btn.is-text:hover {
	color: var(--bv-copper-900) !important;
	text-decoration: none;
}
/* Optional: tighten button treatment on very small screens */
@media (max-width: 480px) {
	.bv-btn .bv-btn__link {
		letter-spacing: 0.06em;
		padding: 12px 16px;
	}
}

/* =========================================
   10. UTILITIES — spacing, alignment, dividers
   ========================================= */

/* Padding helpers */
.u-p-sm,
.p-sm {
	padding: var(--space-3);
}
.u-p-md,
.p-md {
	padding: var(--space-4);
}
.u-p-lg,
.p-lg {
	padding: var(--space-6);
}

.u-pt-0,
.pt-0 {
	padding-top: 0 !important;
}
.u-pb-0,
.pb-0 {
	padding-bottom: 0 !important;
}

/* Margin helpers */
.u-mt-md,
.mt-md {
	margin-top: var(--space-4);
}
.u-mb-md,
.mb-md {
	margin-bottom: var(--space-4);
}

/* Text alignment */
.u-text-right,
.text-right {
	text-align: right;
}
.u-text-center,
.text-center {
	text-align: center;
}

/* Divider utility */
.u-divider-top,
.divider-top {
	border-top: var(--border-subtle);
	padding-top: var(--space-3);
}

footer {
	z-index: -1;
}

/******** Admin Theme Code ********/

.bv-brand-relations {
	display: flex;
	gap: 24px;
	margin: 6px 0 2px;
}

.bv-brand-relations .bv-panel {
	flex: 1;
	padding-right: 12px;
	box-sizing: border-box;
}

/* Vertical divider */
.bv-brand-relations .bv-panel:first-child {
	border-right: 1px solid #e2e4e7;
}

.bv-panel__header {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 13px;
	color: #1d2327;
}

.bv-panel__header .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
}

.bv-panel__title {
	margin-right: 2px;
}

.bv-panel__count {
	margin-left: auto;
	background: #f3f4f6;
	color: #50575e;
	border-radius: 999px;
	padding: 0 7px;
	font-size: 11px;
	line-height: 1.6;
}

.bv-panel__empty {
	margin: 0;
	font-size: 12px;
	color: #777;
}

.bv-panel__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bv-panel__item {
	padding: 3px 0;
	font-size: 12px;
	line-height: 1.4;
}

.bv-panel__item a {
	text-decoration: none;
}

.bv-panel__item a:hover {
	text-decoration: underline;
}

.bv-panel__item-meta {
	color: #8c8f94;
	font-size: 11px;
	margin-top: 1px;
}

/* Stack on narrow screens */
@media (max-width: 900px) {
	.bv-brand {
		width: 100%;
		margin-inline: auto;
		padding-block: var(--space-4);
		padding: var(--space-4);
	}

	.bv-brand-relations {
		flex-direction: column;
	}

	.bv-brand-relations .bv-panel:first-child {
		border-right: none;
		border-bottom: 1px solid #e2e4e7;
		padding-bottom: 6px;
	}
}

/* =========================================
   9. CAMPAIGN COLOR LIST COMPONENT
   ========================================= */

/* Wrapper */
.bv-color-list--campaign {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-6, 24px);
	margin-top: var(--space-8, 32px);
}

/* Each color chip */
.bv-color-item {
	display: flex;
	align-items: center;
	gap: var(--space-5, 20px);
	padding: var(--space-5, 20px) var(--space-6, 24px);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 18px 45px rgba(15, 23, 42, 0.09);
}

/* Swatch */
.bv-color-swatch-circle {
	width: 96px;
	height: 96px;
	border-radius: 999px;
	background: var(--bv-color-swatch, #000);
	box-shadow: 0 15px 40px rgba(15, 23, 42, 0.18);
	flex-shrink: 0;
}

/* Text block */
.bv-color-details {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

/* Name */
.bv-color-name {
	font-family: var(--font-sans);
	font-size: var(--font-size-lg);
	font-weight: 600;
	letter-spacing: 0.01em;
	margin: 0 0 0.15rem;
}

/* Specs list */
.bv-color-specs {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--font-mono);
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* Label/value treatment */
.bv-color-specs__label {
	font-weight: 600;
	margin-right: 0.35rem;
	color: rgba(15, 23, 42, 0.7);
}

.bv-color-specs__value {
	color: rgba(15, 23, 42, 0.85);
}

/* 3-up base layout */
.bv-color-list--campaign > .bv-color-item {
	flex: 1 1 calc(33.333% - var(--space-6, 24px));
	max-width: calc(33.333% - var(--space-6, 24px));
}

/* 1 item in last row → full width */
.bv-color-list--campaign > .bv-color-item:nth-last-child(1):nth-child(3n + 1) {
	flex-basis: 100%;
	max-width: 100%;
}

/* 2 items in last row → 50/50 */
.bv-color-list--campaign > .bv-color-item:nth-last-child(2):nth-child(3n + 1),
.bv-color-list--campaign > .bv-color-item:nth-last-child(1):nth-child(3n + 2) {
	flex-basis: calc(50% - var(--space-6, 24px) / 2);
	max-width: calc(50% - var(--space-6, 24px) / 2);
}

/* MOBILE: stack */
@media (max-width: 768px) {
	.bv-color-list--campaign > .bv-color-item {
		flex-basis: 100%;
		max-width: 100%;
		padding: var(--space-4, 16px) var(--space-4, 16px);
		gap: var(--space-4, 16px);
	}

	.bv-color-swatch-circle {
		width: 80px;
		height: 80px;
	}

	.bv-color-name {
		font-size: var(--font-size-md, 15px);
	}
}

.bv-collection-tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}
.bv-collection-tile {
	display: block;
	padding: 18px;
	border: 1px solid var(--border-subtle, #e5e7eb);
	border-radius: 14px;
	text-decoration: none;
}
.bv-collection-tile__title {
	font-weight: 600;
}
.bv-collection-tile__desc {
	opacity: 0.7;
	font-size: 0.9em;
	margin-top: 6px;
}
@media (max-width: 1024px) {
	.bv-collection-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 520px) {
	.bv-collection-tiles {
		grid-template-columns: 1fr;
	}
}

/* =========================================
   PALETTE DOC COMPONENT (Hero + 5-step ramp)
   ========================================= */

.bv-palette {
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
}

.bv-palette__intro {
	max-width: var(--width-narrow);
}

.bv-palette-hero {
	background: var(--color-surface);
	box-shadow: var(--shadow-soft);
	overflow: hidden;
}

.bv-palette-hero__swatch {
	background: var(--bv-primary);
	height: 240px;
	position: relative;
}

.bv-palette-hero__aa {
	position: absolute;
	top: var(--space-4);
	left: var(--space-4);
	color: rgba(255, 255, 255, 0.9);
}

.bv-palette-ramp {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	height: 46px;
}

.bv-palette-ramp__chip {
	background: var(--bv-step);
}

.bv-palette-hero__meta {
	padding: var(--space-4) var(--space-5);
	gap: var(--space-4);
}

@media (max-width: 768px) {
	.bv-palette-hero__swatch {
		height: 180px;
	}
	.bv-palette-ramp {
		height: 40px;
	}
}

.bv-copy-status {
	display: inline-block;
	margin-left: 8px;
	font-size: 12px;
	opacity: 0.8;
}

/* =========================================================
   Palette-scoped Copy Buttons (match the color block system)
   ========================================================= */

/* Layout: keep copy group tight and aligned */
.bv-palette-colorcard .bv-palette-copy {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Base token button — ONLY inside palette cards */
.bv-palette-colorcard .bv-copy {
	/* Pull from your swatch variable (set on card via --bv-color) */
	--bv-accent: var(--bv-color, #111827);
	border: none;
	appearance: none;
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);

	color: rgba(17, 24, 39, 0.92);
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;

	padding: 8px 10px;
	border-radius: 999px; /* pill */
	cursor: pointer;
	transition:
		transform 0.06s ease,
		box-shadow 0.18s ease,
		border-color 0.18s ease,
		background-color 0.18s ease,
		color 0.18s ease;
}

/* Hover = token-y lift */
.bv-palette-colorcard .bv-copy:hover {
	transform: translateY(-1px);
}

/* Active press */
.bv-palette-colorcard .bv-copy:active {
	transform: translateY(0);
}

/* Keyboard focus */
.bv-palette-colorcard .bv-copy:focus-visible {
	outline: 2px solid var(--color-focus-ring);
	outline-offset: 2px;
}

/* Make the first copy button (HEX) the “primary” token */
.bv-palette-colorcard .bv-palette-copy .bv-copy:first-of-type {
	background: var(--bv-accent);
	color: var(--color-text-inverse);
}

/* Hover on primary */
.bv-palette-colorcard .bv-palette-copy .bv-copy:first-of-type:hover {
	background: color-mix(in srgb, var(--bv-accent) 86%, #000);
}

/* Secondary (RGB) stays outline but lightly tinted toward the swatch */
.bv-palette-colorcard .bv-palette-copy .bv-copy:not(:first-of-type) {
	border-color: color-mix(in srgb, var(--bv-accent) 38%, rgba(0, 0, 0, 0.14));
	color: color-mix(in srgb, var(--bv-accent) 70%, #111827);
}

/* Optional: copy status text feels like metadata */
.bv-palette-colorcard .bv-copy-status {
	margin-left: 6px;
	font-size: 12px;
	font-weight: 550;
	color: rgba(17, 24, 39, 0.55);
	min-width: 64px;
}
/* =========================================
   Palette: per-color cards
   ========================================= */

.bv-palette-colorgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-6);
}

@media (max-width: 960px) {
	.bv-palette-colorgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 640px) {
	.bv-palette-colorgrid {
		grid-template-columns: 1fr;
	}
}

/* Card */
.bv-palette-colorcard {
	background: var(--color-surface);
	border-radius: var(--radius-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Swatch — color set via --bv-color on the article */
.bv-palette-colorcard__swatch {
	background: var(--bv-color);
	height: 140px;
	position: relative;
	flex-shrink: 0;
}

/* Aa — always white, soft opacity. No mix-blend-mode. */
.bv-palette-colorcard__aa {
	position: absolute;
	top: var(--space-4);
	left: var(--space-4);
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: rgba(255, 255, 255, 0.72);
	letter-spacing: 0.02em;
	user-select: none;
}

/* Mini ramp */
.bv-palette-ramp--mini {
	height: 28px;
	flex-shrink: 0;
}

/* Meta block — vertical stack, fills remaining card height */
.bv-palette-colorcard__meta {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 1;
	padding: var(--space-4) var(--space-5);
	gap: var(--space-4);
	min-height: 110px;
}

/* Name + hex stacked */
.bv-palette-colorcard__meta-text {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.bv-color-name {
	font-size: var(--font-size-lg);
	font-weight: 600;
	line-height: 1.25;
	margin: 0;
}

/* Copy buttons — always pinned to bottom of meta */
.bv-palette-copy {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* Copy HEX — filled with swatch color */
.bv-palette-colorcard .bv-copy {
	--bv-accent: var(--bv-color, #111827);
	border: none;
	appearance: none;
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
	padding: 7px 12px;
	border-radius: 999px;
	cursor: pointer;
	transition:
		transform 0.06s ease,
		background-color 0.18s ease;
}

.bv-palette-colorcard .bv-palette-copy .bv-copy:first-of-type {
	background: var(--bv-accent);
	color: var(--color-text-inverse);
}

.bv-palette-colorcard .bv-palette-copy .bv-copy:first-of-type:hover {
	background: color-mix(in srgb, var(--bv-accent) 84%, #000);
	transform: translateY(-1px);
}

.bv-palette-colorcard .bv-palette-copy .bv-copy:not(:first-of-type) {
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: color-mix(in srgb, var(--bv-accent) 70%, #111827);
	border: 1.5px solid
		color-mix(in srgb, var(--bv-accent) 30%, rgba(0, 0, 0, 0.12));
}

.bv-palette-colorcard .bv-palette-copy .bv-copy:not(:first-of-type):hover {
	transform: translateY(-1px);
}

.bv-palette-colorcard .bv-copy:focus-visible {
	outline: 2px solid var(--color-focus-ring);
	outline-offset: 2px;
}

/* Copy status */
.bv-copy-status {
	font-size: 12px;
	font-weight: 550;
	color: rgba(17, 24, 39, 0.5);
	/* min-width: 56px; */
}

/* count-based grid rules */
.bv-grid-count-1 {
	grid-template-columns: 1fr;
}
.bv-grid-count-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bv-grid-count-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.bv-grid-count-4 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bv-grid-count-5 {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}
.bv-grid-count-5 > *:nth-child(1),
.bv-grid-count-5 > *:nth-child(2) {
	grid-column: span 3;
}
.bv-grid-count-5 > *:nth-child(n + 3) {
	grid-column: span 2;
}

@media (max-width: 960px) {
	.bv-grid-count-3,
	.bv-grid-count-5 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.bv-grid-count-5 > * {
		grid-column: auto;
	}
}
@media (max-width: 640px) {
	.bv-grid-count-2,
	.bv-grid-count-3,
	.bv-grid-count-4,
	.bv-grid-count-5 {
		grid-template-columns: 1fr;
	}
}
/* =========================================
   Values – BrandVault-native component
   Uses .bv-card for card styling
   ========================================= */

.bv-values {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-6);
}

@media (max-width: 860px) {
	.bv-values {
		grid-template-columns: 1fr;
	}
}

/* Tighten interior rhythm for values cards */
.bv-values__item.bv-card {
	padding: var(--space-5);
	box-shadow: var(--shadow-subtle);
	transition:
		box-shadow var(--transition-med),
		transform var(--transition-med),
		border-color var(--transition-med);
}

.bv-values__item.bv-card:hover {
	box-shadow: var(--shadow-strong);
	border-color: var(--color-border-strong);
}

/* Title: spacing + layout + wrap */
.bv-values__title {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-top: var(--space-2);
	word-wrap: break-word;
}

.bv-values__dot {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: var(--color-accent);
	box-shadow: 0 10px 18px rgba(180, 83, 9, 0.22);
	flex-shrink: 0;
	transform: translateY(-1px);
}

/* ===== BrandVault Logo Carousel (shortcode) ===== */

.bv-logoCarousel {
	--bv-ink: var(--bv-copper-700);
	--bv-gap: 18px;
	--bv-item: 220px;

	width: 100%;
	overflow: hidden;
}

.bv-logoCarousel__track {
	display: flex;
	gap: var(--bv-gap);
	align-items: center;
	flex-wrap: nowrap;
	padding: 6px 2px;
}

/* item */
.bv-logoItem {
	position: relative;
	flex: 0 0 auto;
	width: var(--bv-item);
	aspect-ratio: 3 / 2;
	display: grid;
	place-items: center;
	border-radius: 16px;
	background: var(--color-surface);
	border: 1px solid var(--color-accent-border-soft);
	overflow: hidden;
	text-decoration: none;
	transition:
		transform 0.18s ease,
		border-color 0.18s ease,
		box-shadow 0.18s ease;
}

.bv-logoItem:hover {
	transform: translateY(-2px);
	border-color: var(--color-accent-border);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* ink silhouette via mask */
.bv-logoItem__ink {
	width: min(70%, 240px);
	height: min(55%, 120px);
	background: var(--bv-ink);

	-webkit-mask-image: var(--bv-logo-url);
	mask-image: var(--bv-logo-url);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;

	opacity: 0.95;
	transition: opacity 0.18s ease;
}

/* full color image fades in on hover */
.bv-logoItem__img {
	position: absolute;
	inset: 0;
	margin: auto;
	width: min(70%, 240px);
	height: auto;
	max-height: 70%;
	object-fit: contain;

	opacity: 0;
	transform: scale(0.98);
	transition:
		opacity 0.18s ease,
		transform 0.18s ease;
}

.bv-logoItem:hover .bv-logoItem__ink {
	opacity: 0;
}
.bv-logoItem:hover .bv-logoItem__img {
	opacity: 1;
	transform: scale(1);
}

.bv-logoItem:focus-visible {
	outline: 3px solid rgba(180, 83, 9, 0.35);
	outline-offset: 3px;
}

/* =========================================================
   FILTER SYSTEM — consolidated  (v2, 2026-06-10)

   This single section REPLACES three blocks in the live stylesheet:
     1. "Filter Panel: length management"  →  end of "Filter UX Enhancements"
        (everything from the .bv-filter-panel base rule through
        .bv-filter-search__input:focus-visible)
     2. The stray override that followed the mobile-sheet rules:
        .bv-filter-panel { position: static; max-width: 100%;
                           width: 95vw !important; margin: auto; }
     3. The trailing ":root { --bv-bg … }" tokens block and the whole
        "Campaign Filter & Sort" section at the end of the file.

   Markup contract unchanged — every selector matches the existing
   PHP markup and JS hooks (data-bv-filter-*). No JS edits needed.

   Breakpoint: ONE boundary at 1024px.
     < 1024px  →  toggle button + bottom sheet
     ≥ 1024px  →  sticky sidebar
   ========================================================= */

/* ── Wrapper (shared by panel + campaign bar) ── */

.bv-filter-wrapper {
	position: relative;
	width: 100%;
	margin-bottom: var(--space-8);
}

/* Dim page while a filter form is submitting */
.bv-filter-wrapper.bv-submitting {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity var(--transition-med);
}

/* ── Panel shell ── */

.bv-filter-panel {
	width: 100%;
	padding: var(--space-5);
	border-radius: var(--radius-lg);
	/* background: var(--color-surface); */
	border: var(--border-subtle);
	box-shadow: var(--shadow-soft);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	/* No overflow here — it clips the absolutely-positioned .bv-select-menu */
}

.bv-filter-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
}

.bv-filter-panel__actions {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.bv-filter-panel__label {
	font-size: var(--font-size-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-text-soft);
}

.bv-filter-reset {
	border-radius: var(--radius-pill);
	background: transparent;
	padding: var(--space-2);
	font-size: var(--font-size-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-text-soft);
	cursor: pointer;
	transition: color var(--transition-fast);
}

.bv-filter-reset:hover {
	color: var(--color-accent-strong);
}

.bv-filter-close {
	display: none; /* shown only in the mobile sheet */
	border: var(--border-subtle);
	background: var(--color-surface);
	color: var(--color-text);
	border-radius: var(--radius-pill);
	min-height: 28px;
	padding: 0 10px;
	font-family: var(--font-sans);
	font-size: var(--font-size-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background-color var(--transition-fast),
		border-color var(--transition-fast),
		color var(--transition-fast);
}

.bv-filter-close:hover {
	background: var(--color-bg-alt);
	border-color: var(--color-border-strong);
	color: var(--color-accent-strong);
}

/* ── Active-filter pills ── */

.bv-filter-active {
	margin-block: calc(-1 * var(--space-1)) 0; /* tucks under the header */
}

.bv-filter-active__label {
	font-size: var(--font-size-xs);
	color: var(--color-text-soft);
}

.bv-filter-active__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: var(--space-1);
}

.bv-filter-active-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--color-accent-border);
	background: var(--color-accent-soft);
	color: var(--color-accent-strong);
	border-radius: var(--radius-pill);
	min-height: 26px;
	padding: 3px 10px;
	font-size: var(--font-size-xs);
	font-weight: 500;
	cursor: pointer;
	transition:
		background-color var(--transition-fast),
		border-color var(--transition-fast),
		color var(--transition-fast);
}

.bv-filter-active-pill:hover {
	border-color: var(--color-accent);
	background: var(--color-surface);
}

.bv-filter-active-pill__x {
	color: currentColor;
	font-weight: 700;
	opacity: 0.6;
}

.bv-filter-active-pill:hover .bv-filter-active-pill__x {
	color: var(--color-danger);
	opacity: 1;
}

/* ── Groups (accordion) — scoped under .bv-filter-panel so the
      campaign bar's .bv-filter-group can never collide ── */

.bv-filter-panel .bv-filter-group {
	border-top: var(--border-subtle);
	padding-top: var(--space-3);
}

.bv-filter-panel .bv-filter-group:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.bv-filter-panel .bv-filter-group__header {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 28px;
}

.bv-filter-panel .bv-filter-group__title {
	font-size: var(--font-size-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-text-soft);
}

.bv-filter-panel .bv-filter-group__meta {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.bv-filter-panel .bv-filter-group__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding-inline: 5px;
	border-radius: var(--radius-pill);
	background: var(--color-accent);
	color: var(--color-text-inverse);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

.bv-filter-panel .bv-filter-group__hint {
	font-size: var(--font-size-xs);
	color: var(--color-text-soft);
}

.bv-filter-panel .bv-filter-group__clear {
	border: 0;
	background: transparent;
	padding: 0;
	font-size: var(--font-size-xs);
	color: var(--color-text-soft);
	cursor: pointer;
	line-height: 1;
	transition: color var(--transition-fast);
}

.bv-filter-panel .bv-filter-group__clear:hover {
	color: var(--color-danger);
}

.bv-filter-panel .bv-filter-group__toggle {
	border: 0;
	background: transparent;
	color: var(--color-text-muted);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0 2px;
	line-height: 1;
	transition: color var(--transition-fast);
}

.bv-filter-panel .bv-filter-group__toggle:hover {
	color: var(--color-accent-strong);
}

.bv-filter-panel .bv-filter-group__toggle-icon {
	display: inline-block;
	transition: transform var(--transition-fast);
}

.bv-filter-panel .bv-filter-group:not(.is-open) .bv-filter-group__toggle-icon {
	transform: rotate(-90deg);
}

.bv-filter-panel .bv-filter-group__body {
	padding-top: var(--space-2);
}

.bv-filter-panel .bv-filter-group:not(.is-open) .bv-filter-group__body {
	display: none;
}

/* ── Faux select ── */

.bv-select-faux {
	position: relative;
}

.bv-select-trigger {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	border: var(--border-subtle);
	background: var(--color-surface);
	color: var(--color-text);
	border-radius: var(--radius-pill);
	min-height: 36px;
	padding: 6px 12px;
	font-family: var(--font-sans);
	font-size: var(--font-size-xs);
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition:
		border-color var(--transition-fast),
		background-color var(--transition-fast),
		color var(--transition-fast);
}

.bv-select-trigger:hover {
	border-color: var(--color-accent-border);
	background: var(--color-bg-alt);
	color: var(--color-accent-strong);
}

.bv-select-faux.is-open .bv-select-trigger {
	border-color: var(--color-accent);
	background: var(--color-accent-soft);
}

.bv-select-trigger__label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bv-select-trigger__chevron {
	color: var(--color-text-soft);
	transition: transform var(--transition-fast);
}

.bv-select-faux.is-open .bv-select-trigger__chevron {
	transform: rotate(180deg);
}

.bv-select-menu {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	display: none;
	flex-direction: column;
	gap: 2px;
	background: var(--color-surface);
	border: var(--border-strong);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-strong);
	padding: 4px;
	max-height: 240px;
	overflow-y: auto;
	z-index: 100;
}

.bv-select-faux.is-open .bv-select-menu {
	display: flex;
}

.bv-select-option {
	width: 100%;
	border: 0;
	background: transparent;
	color: var(--color-text);
	text-align: left;
	border-radius: var(--radius-md);
	padding: 7px 10px;
	font-family: var(--font-sans);
	font-size: var(--font-size-sm);
	font-weight: 500;
	line-height: 1.25;
	cursor: pointer;
	transition:
		background-color var(--transition-fast),
		color var(--transition-fast);
}

.bv-select-option:hover {
	background: var(--color-bg-alt);
	color: var(--color-accent-strong);
}

/* ── Chips ── */

.bv-filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.bv-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: var(--radius-pill);
	border: var(--border-subtle);
	padding: 4px 8px;
	font-family: var(--font-sans);
	font-size: 0.65rem;
	font-weight: 600;
	line-height: 1;
	background: var(--color-bg-alt);
	text-transform: capitalize;
	color: var(--color-text);
	white-space: nowrap;
	transition:
		background-color var(--transition-fast),
		border-color var(--transition-fast),
		color var(--transition-fast);
}

.bv-chip:hover {
	background: var(--color-accent-soft);
	border-color: var(--color-accent-border);
	color: var(--color-accent-strong);
}

.bv-chip.is-active {
	background: var(--color-accent);
	color: var(--color-text-inverse);
	border-color: var(--color-accent);
}

.bv-chip.is-active:hover {
	background: var(--color-accent-strong);
	border-color: var(--color-accent-strong);
	color: var(--color-text-inverse);
}

.bv-chip__count {
	font-size: var(--font-size-xs);
	color: var(--color-text-soft);
}

.bv-chip.is-active .bv-chip__count {
	color: rgba(255, 255, 255, 0.75);
}

.bv-chip.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.bv-filter-more {
	margin-top: var(--space-1);
	border: none;
	background: transparent;
	color: var(--color-accent);
	font-size: var(--font-size-xs);
	font-weight: 600;
	cursor: pointer;
	padding: 0;
	transition: color var(--transition-fast);
}

.bv-filter-more:hover {
	color: var(--color-accent-strong);
}

/* ── In-group term search ── */

.bv-filter-search {
	margin-bottom: var(--space-2);
}

.bv-filter-search__input {
	width: 100%;
	border: var(--border-subtle);
	background: var(--color-surface);
	color: var(--color-text);
	border-radius: var(--radius-pill);
	min-height: 32px;
	padding: 5px 12px;
	font-family: var(--font-sans);
	font-size: var(--font-size-sm);
	line-height: 1.2;
	transition:
		border-color var(--transition-fast),
		background-color var(--transition-fast);
}

.bv-filter-search__input::placeholder {
	color: var(--color-text-soft);
}

.bv-filter-search__input:hover {
	border-color: var(--color-accent-border);
}

.bv-filter-search__input:focus-visible {
	outline: 2px solid var(--color-focus-ring);
	outline-offset: 2px;
	border-color: var(--color-accent-border);
}

/* ── Keyboard focus, all filter controls ── */

.bv-filter-wrapper
	:is(
		.bv-filter-mobile-toggle,
		.bv-filter-close,
		.bv-filter-reset,
		.bv-filter-group__clear,
		.bv-filter-group__toggle,
		.bv-select-trigger,
		.bv-select-option,
		.bv-chip,
		.bv-filter-more,
		.bv-filter-active-pill
	):focus-visible {
	outline: 2px solid var(--color-focus-ring);
	outline-offset: 2px;
}

/* ── Mobile toggle button (hidden on desktop) ── */

.bv-filter-mobile-toggle {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	border-radius: var(--radius-pill);
	border: var(--border-subtle);
	background: var(--color-surface);
	min-height: 44px;
	padding: 10px 16px;
	color: var(--color-text);
	box-shadow: var(--shadow-subtle);
	cursor: pointer;
	margin-bottom: var(--space-4);
	transition:
		background-color var(--transition-fast),
		border-color var(--transition-fast),
		color var(--transition-fast);
}

.bv-filter-mobile-toggle:hover {
	background: var(--color-bg-alt);
	border-color: var(--color-border-strong);
	color: var(--color-accent-strong);
}

.bv-filter-mobile-toggle__label {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: var(--font-size-xs);
	font-weight: 700;
}

.bv-filter-mobile-toggle__badge {
	min-width: 20px;
	height: 20px;
	border-radius: var(--radius-pill);
	background: var(--color-accent);
	color: var(--color-text-inverse);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	padding-inline: 6px;
}

.bv-filter-backdrop {
	display: none;
}

/* ── Desktop: sticky sidebar (≥1024px) ── */

@media (min-width: 1024px) {
	.bv-filter-panel {
		position: sticky;
		top: 110px;
		/* Scrolls internally only when taller than the viewport.
		   Known trade-off: an open .bv-select-menu clips at the panel
		   edge while the panel itself is scrolling. */
		/* max-height: calc(100vh - 130px); */
		overflow-y: auto;
		/* overscroll-behavior: contain; */
	}
}

/* ── Mobile/tablet: bottom sheet (<1024px) ── */

@media (max-width: 1023.98px) {
	body.bv-filter-mobile-open {
		overflow: hidden;
	}

	.bv-filter-mobile-toggle {
		display: flex;
		width: 100%;
	}

	.bv-filter-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		border: 0;
		margin: 0;
		padding: 0;
		background: rgba(2, 6, 23, 0.42);
		opacity: 0;
		pointer-events: none;
		z-index: 9998;
		transition: opacity var(--transition-fast);
	}

	.bv-filter-backdrop.is-open-mobile {
		opacity: 1;
		pointer-events: auto;
	}

	.bv-filter-panel[data-bv-filter-sheet] {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		width: 100%;
		max-height: min(82vh, 760px);
		overflow-y: auto;
		overscroll-behavior: contain;
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
		padding-left: max(var(--space-5), env(safe-area-inset-left, 0px));
		padding-right: max(var(--space-5), env(safe-area-inset-right, 0px));
		padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
		box-shadow: var(--shadow-strong);
		transform: translateY(100%);
		opacity: 0;
		pointer-events: none;
		z-index: 9999;
		transition:
			transform var(--transition-med),
			opacity var(--transition-fast);
	}

	.bv-filter-panel[data-bv-filter-sheet].is-open-mobile {
		transform: translateY(0);
		opacity: 1;
		pointer-events: auto;
	}

	.bv-filter-close {
		display: block;
	}
}

/* ── Touch: 44px tap targets on coarse pointers ── */

@media (pointer: coarse) {
	.bv-chip,
	.bv-select-trigger,
	.bv-select-option,
	.bv-filter-more,
	.bv-filter-reset,
	.bv-filter-group__toggle,
	.bv-filter-active-pill {
		min-height: 30px;
	}
	/* 
	.bv-chip {
		padding: 10px 14px;
	} */

	.bv-select-trigger {
		padding: 10px 16px;
	}
}

/* ===================== END FILTER SYSTEM ===================== */
/* The old .bv-filter-bar plain-select campaign filter and its duplicate
   ruleset (further below) were removed — [bv_campaign_filter] now renders
   the same .bv-select-faux/.bv-filter-group components used by
   [bv_filter_panel], so it shares their styling automatically. The bar
   variant below (--bar modifiers) lays those same components out as a
   compact horizontal row instead of a vertical sidebar accordion, since
   the campaign archive places this filter full-width above the grid
   rather than in a narrow sidebar column. */

/* ── Campaign filter: horizontal bar variant ── */

.bv-filter-wrapper--bar {
	position: relative;
	z-index: 20;
	margin-bottom: var(--space-6);
	overflow: visible;
}

.bv-filter-panel--bar {
	/* position: relative; */
	width: 100%;
	padding: var(--space-4) var(--space-5);
	/* border-radius: var(--radius-lg); */
	/* background: var(--color-surface); */
	/* border: var(--border-subtle); */
	/* box-shadow: var(--shadow-soft); */
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	overflow: visible;
}

.bv-filter-panel--bar .bv-filter-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
}

.bv-filter-bar-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--space-4);
	overflow: visible;
}

.bv-filter-group--bar {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 200px;
	min-width: 160px;
	/* max-width: 280px; */
	border-top: 0;
	padding-top: 0;
	overflow: visible;
}

.bv-filter-group--bar .bv-filter-group__title {
	font-size: var(--font-size-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-soft);
}

.bv-filter-group--bar .bv-select-faux {
	width: 100%;
}

@media (max-width: 768px) {
	.bv-filter-bar-row {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-3);
	}

	.bv-filter-group--bar {
		max-width: none;
		min-width: 0;
	}
}

/**** VIDEO *****/

.pods-video {
	max-width: 1120px;
	margin: 0 auto;
	width: 100%;
	aspect-ratio: 16 / 9;
	position: relative;
}

/* make sure the embed actually respects the box */
.pods-video iframe,
.pods-video embed,
.pods-video object {
	width: 100% !important;
	height: 100% !important;
	display: block;
	border: 0;
}

/* Mobile tweak: slightly taller ratio (optional but often fixes “squished” look) */
@media (max-width: 767px) {
	.pods-video {
		aspect-ratio: 4 / 3; /* change to 1 / 1 if it’s a vertical video */
	}
}

/********* Breadcrumb *********/

.bv-breadcrumbs__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.75rem;
	font-family: var(--font-mono);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.bv-breadcrumbs__item + .bv-breadcrumbs__item::before {
	content: "›";
	color: rgba(15, 23, 42, 0.35);
	margin-right: 0.35rem;
}

.bv-breadcrumbs__link {
	color: var(--color-accent);
	text-decoration: none;
}

.bv-breadcrumbs__link:hover {
	text-decoration: underline;
}

.bv-breadcrumbs__current {
	color: rgba(15, 23, 42, 0.5);
}

body.post-type-asset .bv-thumb img {
	width: 100px !important;
	height: 100px !important;
	object-fit: cover;
	border-radius: 6px;
	display: block;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* =========================================================
   FILTER: NATIVE SELECT
   =========================================================
   Replaces .bv-select-faux, a div-and-buttons imitation with no listbox
   semantics. Styled to match .bv-field select on the campaigns page so the
   two browse surfaces look like one product — the appearance was never the
   reason to hand-build it. */

.bv-filter-select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	padding: 0.65rem 2.25rem 0.65rem 0.9rem;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-pill);
	background: var(--color-surface)
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%2371717a' stroke-width='1.5'/></svg>")
		no-repeat right 0.9rem center;
	font: inherit;
	font-size: var(--font-size-sm);
	color: var(--color-text);
	cursor: pointer;
}

.bv-filter-select:hover {
	border-color: var(--color-ink);
}

.bv-filter-select:focus-visible {
	outline: 2px solid var(--color-focus-ring);
	outline-offset: 2px;
}

/* The accordion trigger is the whole title row now, not a 12px chevron. */
.bv-filter-group__toggle {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	text-align: left;
	color: inherit;
}

.bv-filter-group__toggle:focus-visible {
	outline: 2px solid var(--color-focus-ring);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

.bv-filter-group__toggle-icon {
	transition: transform var(--transition-fast);
}

.bv-filter-group.is-open .bv-filter-group__toggle-icon {
	transform: rotate(180deg);
}