/* ==========================================================
   Britampco WordPress Theme — Design System
   Mirrors the original britampco-www CSS faithfully
   ========================================================== */

/* ----------------------------------------------------------
   FONTS
   ---------------------------------------------------------- */
@font-face {
	font-family: 'Metrostyle Extended';
	src: url('../fonts/MetrostyleExtended.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Metrostyle Extended Bold';
	src: url('../fonts/MetrostyleExtendedBold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ----------------------------------------------------------
   GLOBAL THEME VARIABLES (overridable in Britampco → Settings → Appearance)
   ---------------------------------------------------------- */
:root {
	--bc-font-body: sans-serif;
	--bc-font-heading: 'Metrostyle Extended', sans-serif;
	--bc-text: #fff;
	--bc-bg: #000;
	--bc-accent: inherit;
}

/* ----------------------------------------------------------
   RESET & BASE
   ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: var(--bc-root-font-size, 14px); }

body {
	margin: 0;
	font-family: var(--bc-font-body);
	color: var(--bc-text);
	background-color: var(--bc-bg);
	line-height: 1.6;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, pre { margin: 0; font-size: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
figure { margin: 0; }
a { text-decoration: none; color: var(--bc-accent); }
p, span, a { font-weight: 300; font-size: inherit; }
hr { height: 1px; background-color: #000; width: 100%; border: none; }

input {
	border-style: solid;
	border-width: 0;
	border-bottom-width: 1px;
	border-color: inherit;
	color: inherit;
	background-color: transparent;
	border-radius: 0;
	font-family: inherit;
	font-weight: inherit;
	outline: none;
}
textarea {
	font-family: inherit;
	outline: none;
	color: inherit;
	border-color: inherit;
	background-color: transparent;
}
/* Selects are always black-on-white so the dropdown list is readable in both
   light and dark OS themes (inherited white text made options white-on-white
   in light mode). */
select {
	font-family: inherit;
	outline: none;
	color: #000;
	border: 1px solid;
	border-color: inherit;
	background-color: #fff;
}
select option { color: #000; background-color: #fff; }
input::placeholder { color: inherit; }
textarea::placeholder { color: #fff; }

.button {
	transition: background-color 0.3s ease;
	font-family: inherit;
	color: inherit;
	background-color: transparent;
	border: 1px solid;
	border-color: inherit;
	border-radius: 0;
	cursor: pointer;
}
.button:hover { background-color: #aaa; }

/* ----------------------------------------------------------
   COLOUR PALETTE
   ---------------------------------------------------------- */
.clr-white          { color: var(--bc-text); }
.fill-white         { fill: #fff; }
.bg-clr-white       { background-color: #fff; }

.clr-off-white      { color: #f2f2f2; }
.bg-clr-off-white   { background-color: #f2f2f2; }

.clr-light-gray     { color: #efefef; }
.bg-clr-light-gray  { background-color: #efefef; }

.clr-mid-light-gray { color: #b3b3b3; }
.bg-clr-mid-light-gray { background-color: #b3b3b3; }

.clr-mid-gray       { color: #aaaaaa; }
.bg-clr-mid-gray    { background-color: #aaaaaa; }

.clr-black          { color: #000; }
.bg-clr-black       { background-color: var(--bc-bg); }

/* Brand colours */
.clr-hiwatt         { color: var(--bc-hiwatt,#ac9244); }
.bg-clr-hiwatt      { background-color: var(--bc-hiwatt,#ac9244); }
.clr-park           { color: var(--bc-park,#4a8db8); }
.bg-clr-park        { background-color: var(--bc-park,#4a8db8); }
.clr-wem            { color: var(--bc-wem,#ff4716); }
.bg-clr-wem         { background-color: var(--bc-wem,#ff4716); }

.fill-grey          { fill: #aaaaaa; }
.fill-black         { fill: #000; }
.fill-wem-grey      { fill: #ffab95; }
.fill-wem           { fill: var(--bc-wem,#ff4716); }
.fill-park          { fill: var(--bc-park,#4a8db8); }
.fill-park-grey     { fill: #a4dbff; }

.bg-clr-overlay     { background-color: rgba(0,0,0,0.75); }

/* Hover fills */
.hover-fill-black:hover { fill: #000; }
.hover-fill-wem:hover   { fill: var(--bc-wem,#ff4716); }
.hover-fill-park:hover  { fill: var(--bc-park,#4a8db8); }

/* ----------------------------------------------------------
   TYPOGRAPHY SCALE  (matches original exactly)
   ---------------------------------------------------------- */
.h8  { font-size: 0.317rem; }
.h7  { font-size: 0.717rem; }
.h6  { font-size: 1.117rem; }
.h5  { font-size: 1.517rem; }
.h4  { font-size: 1.917rem; }
.h3  { font-size: 2.317rem; }
.h2  { font-size: 2.717rem; }
.h1  { font-size: 3.117rem; }
/* Shop-section heading bar — size is globally adjustable (Britampco → Appearance).
   Subtitle scales with the title via em. Default matches the old .h1 size. */
.bc-section-bar { font-size: 3.117rem; background-color: var(--bc-section-bar-bg, #fff); color: var(--bc-section-bar-text, #000); }
.bc-section-bar .bc-section-sub { font-size: 0.51em; }
.h0  { font-size: 3.517rem; }
.h-1 { font-size: 3.917rem; }
.h-2 { font-size: 4.317rem; }

.text-thin           { font-weight: 300; }
.text-align-center   { text-align: center; }
.white-space-no-wrap { white-space: nowrap; }
.font-metro          { font-family: var(--bc-font-heading); }
.font-metro-bold     { font-family: 'Metrostyle Extended Bold', sans-serif; }

/* ----------------------------------------------------------
   LAYOUT — DISPLAY
   ---------------------------------------------------------- */
.block        { display: block; }
.inline       { display: inline; }
.inline-block { display: inline-block; }
.flex         { display: flex; }
.flex-cc      { display: flex; justify-content: center; align-items: center; }
.flex-wrap    { flex-wrap: wrap; }
.flex-wrap-r  { flex-wrap: wrap-reverse; }
.flex-col     { flex-direction: column; }
.flex-1       { flex: 1; }

.ai-c  { align-items: center; }
.ai-fs { align-items: flex-start; }
.ai-fe { align-items: flex-end; }
.jc-c  { justify-content: center; }
.jc-sb { justify-content: space-between; }
.jc-fs { justify-content: flex-start; }
.jc-fe { justify-content: flex-end; }

/* ----------------------------------------------------------
   LAYOUT — POSITION
   ---------------------------------------------------------- */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }

.absolute.center, .fixed.center {
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
}
.absolute.x-center { left: 50%; transform: translateX(-50%); }
.absolute.top-right { right: 0; top: 0; }
.absolute.top-left  { left: 0; top: 0; }
.top-0  { top: 0; }
.right6 { right: 1.117rem; }
.top6   { top: 1.117rem; }

.overflow-hidden   { overflow: hidden; }
.overflow-x-scroll { overflow-x: scroll; }
.overflow-x-auto   { overflow-x: auto; }

.float-left  { float: left; }
.float-right { float: right; }
.clear-left  { clear: left; }
.clear-both  { clear: both; }

/* Z-index scale */
.z0  { z-index: 0; }
.z10 { z-index: 10; }
.z20 { z-index: 20; }
.z30 { z-index: 30; }
.z40 { z-index: 40; }
.z50 { z-index: 50; }
.z60 { z-index: 60; }
.z70 { z-index: 70; }
.z80 { z-index: 80; }
.z90 { z-index: 90; }
.z-1 { z-index: -1; }

/* ----------------------------------------------------------
   LAYOUT — WIDTHS & HEIGHTS
   ---------------------------------------------------------- */
.w-10p  { width: 10%; }
.w-20p  { width: 20%; }
.w-25p  { width: 25%; }
.w-33p  { width: 33.33%; }
.w-40p  { width: 40%; }
.w-50p  { width: 50%; }
.w-60p  { width: 60%; }
.w-66p  { width: 66.66%; }
.w-75p  { width: 75%; }
.w-80p  { width: 80%; }
.w-100p { width: 100%; }
.max-w-50p { max-width: 50%; }
.max-w-25p { max-width: 25%; }
.max-width-f3 { max-width: 6.5rem; }

.h-50vh  { height: 50vh; }
.h-100vh { height: 100vh; }
.h-100p  { height: 100%; }

.m0auto { margin: 0 auto; }
.w80p   { width: 80%; }

/* ----------------------------------------------------------
   SPACING — generated scale (same values as original)
   p8 = 0.317rem, p7 = 0.717rem, p6 = 1.117rem,
   p5 = 1.517rem, p4 = 1.917rem, p3 = 2.317rem,
   p2 = 2.717rem, p1 = 3.117rem
   ---------------------------------------------------------- */
.p8  { padding: 0.317rem; }
.p7  { padding: 0.717rem; }
.p6  { padding: 1.117rem; }
.p5  { padding: 1.517rem; }
.p4  { padding: 1.917rem; }
.p3  { padding: 2.317rem; }
.p2  { padding: 2.717rem; }
.p1  { padding: 3.117rem; }

.ph8, .px8 { padding-left: 0.317rem; padding-right: 0.317rem; }
.ph7 { padding-left: 0.717rem; padding-right: 0.717rem; }
.ph6 { padding-left: 1.117rem; padding-right: 1.117rem; }
.ph5 { padding-left: 1.517rem; padding-right: 1.517rem; }
.ph4 { padding-left: 1.917rem; padding-right: 1.917rem; }
.ph3 { padding-left: 2.317rem; padding-right: 2.317rem; }
.ph2 { padding-left: 2.717rem; padding-right: 2.717rem; }
.ph1 { padding-left: 3.117rem; padding-right: 3.117rem; }

.pv8 { padding-top: 0.317rem; padding-bottom: 0.317rem; }
.pv7 { padding-top: 0.717rem; padding-bottom: 0.717rem; }
.pv6 { padding-top: 1.117rem; padding-bottom: 1.117rem; }
.pv5 { padding-top: 1.517rem; padding-bottom: 1.517rem; }
.pv4 { padding-top: 1.917rem; padding-bottom: 1.917rem; }
.pv3 { padding-top: 2.317rem; padding-bottom: 2.317rem; }
.pv2 { padding-top: 2.717rem; padding-bottom: 2.717rem; }

.pt8 { padding-top: 0.317rem; }
.pt7 { padding-top: 0.717rem; }
.pt6 { padding-top: 1.117rem; }
.pt5 { padding-top: 1.517rem; }
.pt4 { padding-top: 1.917rem; }

.pb8 { padding-bottom: 0.317rem; }
.pb6 { padding-bottom: 1.117rem; }

.mt8 { margin-top: 0.317rem; }
.mt7 { margin-top: 0.717rem; }
.mt6 { margin-top: 1.117rem; }
.mt5 { margin-top: 1.517rem; }
.mt4 { margin-top: 1.917rem; }
.mt3 { margin-top: 2.317rem; }

.mb8 { margin-bottom: 0.317rem; }
.mb7 { margin-bottom: 0.717rem; }
.mb6 { margin-bottom: 1.117rem; }
.mb5 { margin-bottom: 1.517rem; }
.mb4 { margin-bottom: 1.917rem; }

.ml3 { margin-left: 2.317rem; }
.ml6 { margin-left: 1.117rem; }

.ml6-group > * { margin-left: 1.117rem; }
.ml6-group-nth > *:nth-child(n+2) { margin-left: 1.117rem; }
.ml3-group-nth > *:nth-child(n+2) { margin-left: 2.317rem; }
.mt5-group > * { margin-top: 1.517rem; }

/* ----------------------------------------------------------
   BORDERS & DECORATIVE
   ---------------------------------------------------------- */
.accent-border  { border: 2px solid #fff; }
.border-bottom  { border-color: inherit; border-bottom-width: 1px; border-bottom-style: solid; }
.transition-bg  { transition: background-color 0.3s ease; }

/* ----------------------------------------------------------
   INTERACTIVE STATES
   ---------------------------------------------------------- */
.hover-reset:hover   { text-decoration: none; }
.cursor-pointer      { cursor: pointer; }
.hidden              { display: none !important; }

.hover-light-bg:hover {
	background-color: #eee;
	color: #000;
	transition: background-color 0.5s ease, color 0.5s ease;
}
.hover-bg-transparent:hover { background-color: transparent; transition: background-color 0.3s ease; }
.light-img-hover:hover { opacity: 0.7; }
.inherit-clrs { background-color: inherit; color: inherit; }

/* ----------------------------------------------------------
   NAVIGATION (header brand switcher)
   ---------------------------------------------------------- */
.site-nav {
	background-color: #fff;
	display: flex;
	flex-wrap: wrap;
	position: relative;
	z-index: 10;
}
.site-nav__logos {
	display: flex;
	align-items: center;
	padding: 1.117rem;
	width: 100%;
}
.site-nav__logo-link {
	width: 33.33%;
	padding: 0 0.317rem;
	display: block;
}
.site-nav__logo-link svg {
	width: 100%;
	height: auto;
	display: block;
}
.logo-height { height: 70px; }

/* Sub-navigation (page links on inner pages) */
.site-subnav {
	background-color: #000;
	border-top: 1px solid #333;
	width: 100%;
}
.site-subnav ul {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-subnav ul li a {
	display: block;
	padding: 0.717rem 1.117rem;
	color: #aaa;
	font-size: 1.117rem;
	text-decoration: none;
	transition: color 0.2s ease;
}
.site-subnav ul li a:hover,
.site-subnav ul li.current-menu-item a { color: #fff; }

/* ----------------------------------------------------------
   HOME — VIDEO HERO
   ---------------------------------------------------------- */
.header__home {
	position: relative;
	overflow: hidden;
	height: 100vh;
}
.header__vid {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	min-height: 100%;
	z-index: -1;
	object-fit: cover;
}
.header__hero-overlay {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
/* Hiwatt-specific: full-screen clickable video link to pedals */
.header__home-link {
	display: block;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 5;
}

/* ----------------------------------------------------------
   PRODUCT FILTER BAR
   ---------------------------------------------------------- */
.product-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding-bottom: 1.117rem;
}
.product-filters--hiwatt { background-color: var(--bc-hiwatt,#ac9244); }
.product-filters--park   { background-color: var(--bc-park,#4a8db8); }
.product-filters--wem    { background-color: var(--bc-wem,#ff4716); }

.product-filter-link {
	font-size: 1.517rem;
	padding: 0.317rem 1.517rem;
	margin-top: 1.117rem;
	white-space: nowrap;
	display: block;
	color: #fff;
	border: 1px solid transparent;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.product-filter-link:hover,
.product-filter-link.filter-active {
	background-color: #fff;
	color: #000;
}
.product-filter-link--chart { font-weight: 700; }

/* ----------------------------------------------------------
   PRODUCT GRID
   ---------------------------------------------------------- */
.products-section  { }
.products-subcategory-title {
	font-size: 3.117rem;
	padding: 2.717rem;
	background-color: #fff;
	color: #000;
}
.products-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	width: 100%;
}

.product-tile {
	width: 50%;
	border-bottom: 0;
	position: relative;
	display: block;
	background-color: var(--bc-tile-bg, #aaaaaa);
	padding-top: 0;
	padding-bottom: 0;
	color: var(--bc-tile-text, #fff);
	transition: background-color 0.3s ease, color 0.3s ease;
	text-decoration: none;
}
.product-tile:hover {
	background-color: var(--bc-tile-hover, #eee);
	color: var(--bc-tile-text-hover, #000);
}
/* Uniform image area so titles line up across a row. Slightly shorter than
   square (9:8) so landscape photos have slimmer bands above/below, while
   square art keeps nearly the full width. Nothing is ever cropped. */
.product-tile__image { aspect-ratio: 9 / 8; overflow: hidden; }
.product-tile__image img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Title/subheading overlay the bottom of the product image, so tiles have no
   extra strip above/below the photo. */
.product-tile__info { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.717rem 1.117rem; }
.product-tile__info-inner { display: flex; justify-content: space-between; align-items: flex-end; }
.product-tile__heading    { font-size: 2.717rem; }
.product-tile__subheading { font-size: 1.517rem; font-weight: 300; }
.product-tile__handwired  { text-align: center; }
.product-tile__handwired img  { display: block; width: 90px; }
.product-tile__handwired span { font-size: 1.117rem; display: block; padding-top: 0.717rem; line-height: 1; }

.product-tile-img {
	width: 50%;
	border: 0;
	background-color: transparent;
	padding: 0;
	overflow: hidden;
	position: relative;
}
/* Optional caption (e.g. artist name) overlaid at the bottom of a grid image.
   Size/colour/background are editable in Britampco → Appearance. */
.bc-grid-caption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 0.717rem 1.117rem;
	text-align: right;
	font-family: var(--bc-font-heading);
	font-weight: 300;
	font-size: var(--bc-grid-cap-size, 1.517rem);
	color: var(--bc-grid-cap-color, #fff);
	background-color: var(--bc-grid-cap-bg, transparent);
}
/* Artist / promo image gets the SAME square box as the product images beside
   it: square art fills edge-to-edge with zero cropping, landscape art spans
   the full width (never scaled/cropped oddly), and rows stay aligned. */
.product-tile-img img {
	width: 100%;
	height: auto;
	aspect-ratio: 9 / 8;
	object-fit: contain;
	object-position: top; /* image sits at the top of the tile; any gap stays at the bottom, leaving room for the caption */
	display: block;
}

/* ----------------------------------------------------------
   PRODUCT DETAIL PAGE
   ---------------------------------------------------------- */
.product-details {
	background-color: #aaaaaa;
	color: #fff;
	position: relative;
}
.product-detail__image-col {
	float: left;
	position: relative;
	padding: 1.917rem;
	width: 66.66%;
	background-color: #b3b3b3;
}
.product-detail__image-col img { width: 100%; display: block; }

.product-detail__handwired-badge {
	position: absolute;
	z-index: 10;
	top: 1.117rem;
	right: 1.117rem;
	text-align: center;
}
.product-detail__handwired-badge img { width: 60px; }
.product-detail__handwired-badge span { font-size: 0.717rem; display: block; }

.product-detail__info-col {
	position: sticky;
	top: 0;
	float: right;
	width: 33.33%;
	background-color: #aaaaaa;
	color: #fff;
	padding: 1.117rem;
	border: 2px solid #fff;
}
.product-detail__heading    { font-size: 2.717rem; }
.product-detail__subheading { font-size: 1.517rem; font-weight: 300; margin-bottom: 1.117rem; }
.product-detail__description {
	padding: 1.517rem;
	background-color: #b3b3b3;
	margin-top: 1.117rem;
	font-weight: 300;
}

/* Features section */
.product-detail__lower { clear: left; width: 66.66%; }
.product-features {
	background-color: #000;
	padding: 2.717rem;
	color: #fff;
}
.product-features__inner { width: 80%; margin: 0 auto; }
.product-features__title { text-align: center; font-size: 1.517rem; margin-bottom: 1.917rem; }
.product-features__list  { margin-top: 1.517rem; font-weight: 300; margin-left: 2.317rem; }
.product-features__list li { margin-top: 1.517rem; }
.product-extended-desc { margin-top: 1.517rem; padding: 2.317rem; color: #000; background-color: #fff; }

/* MC signature mods */
.product-mc-mods { padding: 2.317rem; background-color: var(--bc-park,#4a8db8); margin-top: 1.517rem; }
.product-mc-mods__title { text-align: center; font-size: 1.517rem; }

/* Specs table */
.product-specs { background-color: #000; padding: 2.717rem; color: #fff; }
.product-specs__inner { padding: 0 2.317rem; }
.product-specs h3 { font-size: 2.317rem; margin-bottom: 1.917rem; }
.product-spec-row { padding: 0.317rem 0; border-bottom: 1px solid #fff; }
.product-spec-row strong { width: 15rem; display: inline-block; vertical-align: top; }

/* Speaker options */
.product-speakers { display: flex; }
.speaker-figure {
	padding-top: 1.517rem;
	max-width: 50%;
	background-color: #aaaaaa;
}
.speaker-caption {
	text-align: center;
	padding: 1.917rem;
	margin-top: 1.117rem;
	background-color: #b3b3b3;
}
.speaker-caption h4 { font-size: 1.517rem; display: block; }

/* Shopify buy module */
#shop-module { }
.product-layout .product-card { }
.shopify-buy__product__price {
	font-weight: 700;
	padding: 0.75rem 1rem;
	font-size: 1.8rem;
}
.shopify-buy__product__price::after {
	content: "Local Currency Calculated at Checkout ($ / £ / ¥ / etc) ";
	font-size: 1rem;
	display: block;
	font-weight: 300;
	line-height: 1;
}
.shopify-buy__btn {
	display: block;
	width: 100%;
	padding: 1.117rem;
	border: none;
	background-color: var(--bc-hiwatt,#ac9244);
	color: #fff;
	font-size: 1.117rem;
	cursor: pointer;
	transition: background-color 0.3s ease;
}
.shopify-buy__btn:hover { background-color: var(--bc-btn-hover, #d93); }

/* Footswitch compatibility link */
.footswitch-link {
	background-color: #000;
	padding: 1.517rem;
	margin-top: 1.117rem;
	font-weight: 300;
	display: block;
	color: #fff;
}

/* ----------------------------------------------------------
   REGION SELECT MODAL
   ---------------------------------------------------------- */
#region-select {
	display: none;
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0,0,0,0.75);
	z-index: 90;
	text-align: center;
	color: #fff;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
#region-select.is-visible { display: flex; }
.region-select__inner {
	background-color: #000;
	padding: 2.717rem;
	min-width: 80%;
}
.region-select__inner h2 { font-size: 2.717rem; margin-bottom: 1.917rem; }
.region-select__flags { display: flex; justify-content: center; flex-wrap: wrap; }
.region-select__flag {
	padding: 1.917rem;
	cursor: pointer;
	opacity: 1;
	transition: opacity 0.2s ease;
}
.region-select__flag:hover { opacity: 0.7; }
.region-select__flag img  { width: 80px; margin: 0 auto; }
.region-select__flag figcaption { margin-top: 0.717rem; font-size: 1.117rem; }

/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */
.site-footer {
	clear: both;
	background-color: var(--bc-footer-bg, #fff);
	color: var(--bc-footer-text, #000);
}
.footer-artists {
	display: flex;
	clear: both;
}
.footer-artist-link { width: 33.33%; }
.footer-artist-link img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }

.footer-banner {
	color: #fff;
	padding: 2.717rem 3.117rem;
	font-size: 2.317rem;
	text-align: center;
	font-family: var(--bc-font-heading);
	font-weight: 300;
}
.footer-banner--hiwatt { background-color: var(--bc-hiwatt,#ac9244); }
.footer-banner--park   { background-color: var(--bc-park,#4a8db8); }
.footer-banner--wem    { background-color: var(--bc-wem,#ff4716); }

.footer-prefooter {
	padding: 2.717rem;
	background-color: #efefef;
	color: #000;
}
.footer-prefooter h2 {
	font-size: 2.317rem;
	text-align: center;
	font-family: var(--bc-font-heading);
	font-weight: 300;
}

.footer-columns {
	display: flex;
	background-color: #efefef;
}
.footer-column { width: 33.33%; padding: 1.917rem; }
.footer-column h3 { font-size: 1.517rem; margin-bottom: 1.117rem; }
.footer-column ul li { margin-bottom: 0.717rem; }
.footer-column ul li a { color: var(--bc-footer-text, #000); font-weight: 300; font-size: 1.117rem; }
.footer-column ul li a:hover { text-decoration: underline; }
.footer-logo-link { display: block; margin-bottom: 1.117rem; max-width: 6.5rem; }
.footer-logo-link svg { width: 100%; height: auto; }
.footer-about { font-size: 1.117rem; font-weight: 300; }
.footer-social-links { display: flex; align-items: center; margin-top: 1.117rem; }
.footer-social-links li { margin-right: 1.117rem; }
.footer-social-links img { width: 2rem; height: 2rem; display: block; }
.footer-copyright { margin-top: 1.117rem; font-size: 1.117rem; font-weight: 300; }

/* Newsletter form in footer */
.newsletter-form input {
	display: block;
	width: 100%;
	font-size: 1.117rem;
	padding: 0.717rem;
}
.newsletter-form button {
	display: block;
	width: 100%;
	margin-top: 1.117rem;
	font-size: 1.117rem;
	padding: 0.717rem;
}

/* ----------------------------------------------------------
   ARTISTS PAGE
   ---------------------------------------------------------- */
.artists-grid { display: flex; flex-wrap: wrap; background-color: #000; }
.artist-card { width: 33.33%; position: relative; overflow: hidden; }
.artist-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; transition: transform 0.3s ease; }
.artist-card:hover img { transform: scale(1.03); }
.artist-card__name {
	position: absolute;
	bottom: 0; left: 0; right: 0;
	background: rgba(0,0,0,0.6);
	color: #fff;
	padding: 1.117rem;
	font-size: 1.517rem;
}

/* ----------------------------------------------------------
   LISTEN / YOUTUBE PAGE
   ---------------------------------------------------------- */
.listen-section { background-color: #000; padding: 2.317rem; }
.listen-section h2 { font-size: 2.317rem; margin-bottom: 1.517rem; color: #fff; }
.youtube-embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.youtube-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* ----------------------------------------------------------
   CONTACT PAGE
   ---------------------------------------------------------- */
.contact-page { background-color: #000; color: #fff; padding: 2.317rem; }
.contact-page h1 { font-size: 3.117rem; margin-bottom: 1.917rem; }
.contact-form { max-width: 700px; }
.contact-form label { display: block; font-size: 1.117rem; margin-bottom: 0.317rem; font-weight: 300; }
.contact-form input,
.contact-form textarea,
.contact-form select {
	display: block;
	width: 100%;
	font-size: 1.117rem;
	padding: 0.717rem;
	margin-bottom: 1.117rem;
	border-bottom: 1px solid #fff;
}
.contact-form textarea { min-height: 150px; resize: vertical; }
.contact-form button[type="submit"] {
	display: block;
	width: 100%;
	padding: 1.117rem;
	border: 1px solid #fff;
	background-color: transparent;
	color: #fff;
	font-size: 1.117rem;
	cursor: pointer;
	font-family: inherit;
	transition: background-color 0.3s ease;
}
.contact-form button[type="submit"]:hover { background-color: #aaa; }

/* Contact Form 7 overrides — size the fields like the native forms (full width,
   comfortable padding + font) instead of the tiny browser default. */
.wpcf7-form input,
.wpcf7-form textarea { color: #fff; border-color: #fff; background-color: transparent; }
.wpcf7-form select { color: #000; border-color: #fff; background-color: #fff; }
.wpcf7-form input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.wpcf7-form textarea,
.wpcf7-form select {
	display: block;
	width: 100%;
	box-sizing: border-box;
	font-size: 1.117rem;
	padding: 0.717rem;
	margin-bottom: 1.117rem;
	border: 0;
	border-bottom: 1px solid #fff;
	font-family: inherit;
}
.wpcf7-form select { border: 1px solid #fff; }
.wpcf7-form textarea { min-height: 150px; resize: vertical; }
.wpcf7-form label { display: block; font-size: 1.117rem; margin-bottom: 0.317rem; font-weight: 300; }
.wpcf7-form input[type="submit"] {
	display: block;
	width: 100%;
	margin-top: 0.717rem;
	padding: 1.117rem;
	border: 1px solid #fff;
	background-color: transparent;
	color: #fff;
	font-size: 1.117rem;
	font-family: inherit;
	cursor: pointer;
	transition: background-color 0.3s ease;
}
.wpcf7-form input[type="submit"]:hover { background-color: #aaa; }
.wpcf7-form .wpcf7-form-control-wrap { display: block; }

/* ----------------------------------------------------------
   FAQ PAGE
   ---------------------------------------------------------- */
.faq-page { background-color: #000; color: #fff; padding: 2.317rem; }
.faq-page h1 { font-size: 3.117rem; margin-bottom: 1.917rem; }
.faq-item { border-bottom: 1px solid #333; padding: 1.517rem 0; }
.faq-question {
	font-size: 1.517rem;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.faq-question::after { content: '+'; font-size: 1.917rem; }
.faq-item.is-open .faq-question::after { content: '−'; }
.faq-answer { display: none; padding-top: 1.117rem; font-weight: 300; font-size: 1.117rem; }
.faq-item.is-open .faq-answer { display: block; }

/* ----------------------------------------------------------
   REGISTER PRODUCT PAGE
   ---------------------------------------------------------- */
.register-page { background-color: #000; color: #fff; padding: 2.317rem; }
.register-page h1 { font-size: 3.117rem; margin-bottom: 1.917rem; }

/* ----------------------------------------------------------
   DOWNLOADS PAGE
   ---------------------------------------------------------- */
.downloads-page { background-color: #000; color: #fff; padding: 2.317rem; }
.downloads-page h1 { font-size: 3.117rem; margin-bottom: 1.917rem; }
.downloads-list { }
.download-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.117rem 0;
	border-bottom: 1px solid #333;
}
.download-item a {
	color: var(--bc-hiwatt,#ac9244);
	font-size: 1.117rem;
	text-decoration: none;
}
.download-item a:hover { text-decoration: underline; }

/* ----------------------------------------------------------
   CATALOGUE PAGE
   ---------------------------------------------------------- */
.catalogue-page { background-color: #000; color: #fff; }
.catalogue-table { width: 100%; border-collapse: collapse; font-size: 1.117rem; }
.catalogue-table th {
	background-color: #333;
	color: #fff;
	padding: 0.717rem 1.117rem;
	text-align: left;
	font-weight: 400;
}
.catalogue-table td {
	padding: 0.717rem 1.117rem;
	border-bottom: 1px solid #222;
	font-weight: 300;
}
.catalogue-table tr:nth-child(even) td { background-color: #111; }
.catalogue-table a { color: var(--bc-hiwatt,#ac9244); }

/* ----------------------------------------------------------
   GENERAL PAGE / CONTENT
   ---------------------------------------------------------- */
.page-content { background-color: #000; color: #fff; padding: 2.317rem; }
.page-content h1 { font-size: 3.117rem; margin-bottom: 1.917rem; }
.page-content h2 { font-size: 2.717rem; margin-bottom: 1.517rem; }
.page-content p  { font-weight: 300; font-size: 1.117rem; margin-bottom: 1.117rem; }
.page-content a  { color: var(--bc-hiwatt,#ac9244); text-decoration: underline; }

/* ----------------------------------------------------------
   RESPONSIVE — MOBILE & TABLET
   ---------------------------------------------------------- */
@media (max-width: 900px) {
	.stack-tablet { flex-direction: column; }
	.half-width-tablet > * { width: 50%; }
	.footer-columns { flex-direction: column; }
	.footer-column  { width: 100%; }
	.footer-artists { flex-direction: column; }
	.footer-artist-link { width: 100%; }
	.product-detail__image-col,
	.product-detail__info-col,
	.product-detail__lower { float: none; width: 100%; position: static; }
	.product-detail__info-col { border: none; border-top: 2px solid #fff; }
	.artists-grid .artist-card { width: 50%; }
}

@media (max-width: 600px) {
	html { font-size: 12px; }
	.stack-mobile { flex-direction: column; }
	.full-width-mobile > * { width: 100% !important; }
	.product-tile  { width: 100%; }
	.product-tile-img { width: 100%; }
	.product-detail__image-col,
	.product-detail__info-col,
	.product-detail__lower { width: 100%; float: none; position: static; }
	.artists-grid .artist-card { width: 100%; }
	.footer-column { width: 100%; }
	.site-subnav ul { flex-direction: column; }
	.product-filter-link { font-size: 1rem; padding: 0.5rem 1rem; margin-left: 0; }
	.no-margin { margin: 0 !important; }
	/* Footer banner + pre-footer paragraphs: heading-sized on desktop, but on
	   mobile they're long text lines — bring them down to a readable size. */
	.bc-footer-banner-line .h3,
	.bc-prefooter .h3 { font-size: 1.4rem; }
}

/* Admin bar offset when logged in */
.admin-bar .site-nav { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .site-nav { top: 46px; }
}

/* ----------------------------------------------------------
   WP-SPECIFIC HELPERS
   ---------------------------------------------------------- */
.wp-caption { max-width: 100%; }
.aligncenter { display: block; margin: 0 auto; }
.alignleft   { float: left; margin-right: 1.117rem; }
.alignright  { float: right; margin-left: 1.117rem; }

/* Screen reader text */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

/* ----------------------------------------------------------
   MISSING UTILITIES (from original index.css)
   ---------------------------------------------------------- */
.global-wrapper { margin: 0 auto; max-width: 1160px; padding-left: 1.917rem; padding-right: 1.917rem; }
.pv0  { padding-top: 3.517rem; padding-bottom: 3.517rem; }
.pv1  { padding-top: 3.117rem; padding-bottom: 3.117rem; }
.ml-3 { margin-left: 4.717rem; }
.ml-3-group > * { margin-left: 4.717rem; }
.ml-3-group-nth > *:nth-child(n+2) { margin-left: 4.717rem; }
.mt-3-group > * { margin-top: 4.717rem; }
.mt-3-group-nth > *:nth-child(n+2) { margin-top: 4.717rem; }
.ml5 { margin-left: 1.517rem; }
.ml5-group > * { margin-left: 1.517rem; }
.ml5-group-nth > *:nth-child(n+2) { margin-left: 1.517rem; }
.width3 { width: 2.317rem; }
.w-80p { width: 80%; }

/* Responsive iframe (16:9) */
.responsive__iframe-cont { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; width: 100%; }
.responsive__iframe-cont iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Open playlist — clickable video list shown UNDER the player, one per row.
   Sized to show ~3 videos, then scroll for the rest. */
.bc-playlist__list { list-style: none; margin: 10px 0 0; padding: 0; max-height: 261px; overflow-y: auto; background: #111; border: 1px solid rgba(255,255,255,0.1); }
.bc-playlist__list li { margin: 0; }
.bc-playlist__item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,0.08); padding: 8px 10px; cursor: pointer; color: #fff; font: inherit; }
.bc-playlist__item:hover { background: rgba(255,255,255,0.07); }
.bc-playlist__item.is-active { background: rgba(184,154,74,0.28); }
.bc-playlist__item img { width: 120px; height: 68px; object-fit: cover; flex: 0 0 auto; display: block; background: #000; }
.bc-playlist__title { font-size: 0.92rem; line-height: 1.3; }
@media screen and (max-width: 680px) { .bc-playlist__item img { width: 92px; height: 52px; } }

/* ----------------------------------------------------------
   HOME ROWS — editable hub + shop-landing content rows
   ---------------------------------------------------------- */
.bc-home-rows { width: 100%; }
.bc-row { width: 100%; }
.bc-row-image img,
.bc-row-video video { width: 100%; display: block; }
/* Full-width banners (default shop landing + category section banners) so they
   fill the page on screens wider than the 1920px source images. */
.bc-banner img { width: 100%; display: block; }
.bc-row-3up { display: flex; flex-wrap: nowrap; }
.bc-3up-cell { width: 33.3333%; }
.bc-3up-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bc-row-inner { width: 60rem; max-width: 100%; margin: 0 auto; padding: 2rem; }
.bc-row-playlist { background-color: #000; }

/* Brand-home hero: overlay text passes clicks through to the video's shop link,
   but the "Browse the Collection" button stays interactive. */
.header__home .button { pointer-events: auto; }

/* Promo row — image background with centred heading / text / button */
.bc-row-promo { background-size: cover; background-position: center; min-height: 420px; display: flex; }
.bc-row-promo--plain { background-color: #111; }
.bc-promo-body { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem; text-align: center; padding: 3rem 2rem; color: #fff; background: rgba(0,0,0,0.38); }
.bc-row-promo--plain .bc-promo-body { background: none; }
.bc-promo-h { font-size: 3rem; line-height: 1; margin: 0; }
.bc-promo-t { max-width: 48rem; margin: 0; font-size: 1.2rem; font-weight: 300; }
.bc-promo-btn { display: inline-block; padding: 0.7rem 1.7rem; border: 1px solid #fff; color: #fff; }
.bc-promo-btn:hover { background: rgba(255,255,255,0.16); }

/* Text row */
.bc-row-text { background-color: #000; color: #fff; text-align: center; }
.bc-text-h { font-size: 2.8rem; line-height: 1.1; margin: 0 0 1rem; }
.bc-text-t { max-width: 50rem; margin: 0 auto; font-weight: 300; }

@media screen and (max-width: 680px) {
	.bc-row-3up { flex-wrap: wrap; }
	.bc-3up-cell { width: 100%; }
	.bc-promo-h { font-size: 2rem; }
	.bc-text-h { font-size: 2rem; }
}

/* Product filter active state (all sizes) */
.filter-active       { background-color: white; color: black; }
.filter-active:hover { background-color: white; }

/* The "-mobile" filter overrides ONLY apply on small screens (matches original).
   On desktop the buttons keep their larger h5 / ph5 sizing. */
@media screen and (max-width: 680px) {
	.product-filters-mobile { padding-bottom: 1rem; padding-left: 0.5rem; padding-right: 0.5rem; }
	.product-filter-mobile  { padding: 0.5rem 1rem; font-size: 1rem; margin-left: 0.5rem !important; }
}

/* Vertical list with spacing */
.ver-list8 > li { margin-bottom: 0.517rem; }

/* Bold variant for chart link */
.font-alte-bold { font-weight: 700; }
.font-alte      { font-weight: 400; }

/* Block/width group helpers */
.block-group > * { display: block; }
.w-100p-group > * { width: 100%; }

/* Table styles for FAQ fuse table */
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #555; padding: 0.5rem; text-align: left; }
th { background-color: #333; }
caption { font-weight: 700; margin-bottom: 0.5rem; text-align: left; }
.img-header { background-attachment: fixed; background-size: cover; background-position: center center; }

/* Promotional banner (top of site) */
.promo-banner { padding: 0.6rem 1rem; font-size: 0.95rem; letter-spacing: 0.02em; }
a.promo-banner:hover { opacity: 0.9; }
/* Image-background variant: bigger, bolder overlaid text */
.promo-banner--image { padding: 0; }
.promo-banner--image .promo-banner__text { font-size: 1.6rem; font-weight: 600; letter-spacing: 0.04em; padding: 0 1.5rem; }