/* =====================================================================
   BigSkid Child Theme -- design system port from Lovable
   ---------------------------------------------------------------------
   Source of truth: /home/teky/Projects/bigskid/lovable/skid-drop-shop-main
   Mirrored: tailwind.config.ts + src/index.css + components/*
   Brand: dark canvas, aggressive #FF4500 orange, Bebas/Inter, sharp 0.25rem
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root,
.bigskid-brand {
	--bs-bg:               #000000;
	--bs-fg:               #FFFFFF;
	--bs-card:             #0D0D0D;
	--bs-input-bg:         #1A1A1A;
	--bs-border:           #262626;
	--bs-muted:            #333333;
	--bs-muted-fg:         #CCCCCC;
	--bs-smoke:            #B8B8B8;
	--bs-orange:           #FF4500;
	--bs-orange-soft:      rgba(255, 69, 0, 0.5);
	--bs-orange-glow:      0 0 30px rgba(255, 69, 0, 0.5);
	--bs-shadow-intense:   0 4px 20px rgba(0, 0, 0, 0.8);

	--bs-radius:           0.25rem;
	--bs-radius-sm:        calc(var(--bs-radius) - 1px);
	--bs-radius-lg:        calc(var(--bs-radius) + 4px);

	--bs-font-display:     'Bebas Neue', Impact, sans-serif;
	--bs-font-body:        'Inter', system-ui, -apple-system, sans-serif;

	--bs-gradient-smoke:   linear-gradient(135deg, #000000 0%, #333333 100%);
	--bs-gradient-hero:    linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.9) 100%);

	--bs-transition:       all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--bs-transition-bounce: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);

	--bs-container-max:    1400px;
	--bs-container-pad:    2rem;
}

/* ---------- Base ---------- */
.bigskid-brand,
.bigskid-brand body {
	background-color: var(--bs-bg);
	color: var(--bs-fg);
	font-family: var(--bs-font-body);
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.bigskid-brand *,
.bigskid-brand *::before,
.bigskid-brand *::after {
	border-color: var(--bs-border);
}

.bigskid-brand a {
	color: var(--bs-fg);
	text-decoration: none;
	transition: var(--bs-transition);
}

.bigskid-brand a:hover,
.bigskid-brand a:focus {
	color: var(--bs-orange);
}

.bigskid-brand ::selection {
	background: var(--bs-orange);
	color: var(--bs-fg);
}

/* ---------- Typography ---------- */
.bigskid-brand h1,
.bigskid-brand h2,
.bigskid-brand h3,
.bigskid-brand h4,
.bigskid-brand h5,
.bigskid-brand h6,
.bigskid-brand .bs-display {
	font-family: var(--bs-font-display);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1;
	color: var(--bs-fg);
	text-transform: uppercase;
}

.bigskid-brand h1 {
	font-size: clamp(3.5rem, 8vw, 8rem);
	letter-spacing: -0.025em;
}

.bigskid-brand h2 {
	font-size: clamp(2.5rem, 5vw, 4rem);
}

.bigskid-brand h3 {
	font-size: clamp(2rem, 3.5vw, 2.75rem);
}

.bigskid-brand h4 { font-size: 1.875rem; }
.bigskid-brand h5 { font-size: 1.5rem;   }
.bigskid-brand h6 { font-size: 1.25rem;  }

.bigskid-brand p,
.bigskid-brand li,
.bigskid-brand label {
	font-family: var(--bs-font-body);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--bs-muted-fg);
}

.bigskid-brand .bs-eyebrow,
.bigskid-brand .eyebrow {
	font-family: var(--bs-font-body);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bs-orange);
}

/* ---------- Layout primitives ---------- */
.bigskid-brand .wp-site-blocks,
.bigskid-brand .site,
.bigskid-brand .content-wrap,
.bigskid-brand .site-container {
	background-color: var(--bs-bg);
}

.bigskid-brand .container,
.bigskid-brand .site-container,
.bigskid-brand .entry-content > .wp-block-group.alignwide {
	max-width: var(--bs-container-max);
	padding-left: var(--bs-container-pad);
	padding-right: var(--bs-container-pad);
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Header / Navigation ---------- */
.bigskid-brand .site-header,
.bigskid-brand #masthead {
	position: sticky;
	top: 0;
	z-index: 50;
	background-color: rgba(0, 0, 0, 0.95);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--bs-border);
}

.bigskid-brand .site-branding .site-title,
.bigskid-brand .site-branding .site-title a {
	font-family: var(--bs-font-display);
	font-size: 1.75rem;
	letter-spacing: -0.01em;
	color: var(--bs-fg);
	text-transform: uppercase;
}

.bigskid-brand .header-navigation ul li a,
.bigskid-brand .main-navigation a {
	font-family: var(--bs-font-body);
	font-weight: 600;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--bs-fg);
}

.bigskid-brand .header-navigation ul li a:hover,
.bigskid-brand .main-navigation a:hover {
	color: var(--bs-orange);
}

/* ---------- Buttons ---------- */
.bigskid-brand .wp-block-button__link,
.bigskid-brand .button,
.bigskid-brand button.btn,
.bigskid-brand input[type="submit"],
.bigskid-brand .kb-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--bs-font-body);
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background-color: var(--bs-orange);
	color: var(--bs-fg);
	border: 1px solid var(--bs-orange);
	border-radius: var(--bs-radius);
	padding: 0.875rem 1.75rem;
	cursor: pointer;
	transition: var(--bs-transition);
}

.bigskid-brand .wp-block-button__link:hover,
.bigskid-brand .button:hover,
.bigskid-brand button.btn:hover,
.bigskid-brand input[type="submit"]:hover,
.bigskid-brand .kb-button:hover {
	background-color: var(--bs-orange);
	box-shadow: var(--bs-orange-glow);
	animation: bs-shake 0.5s ease-in-out;
}

.bigskid-brand .is-style-outline .wp-block-button__link,
.bigskid-brand .button.outline {
	background-color: transparent;
	color: var(--bs-fg);
	border: 1px solid var(--bs-border);
}

.bigskid-brand .is-style-outline .wp-block-button__link:hover,
.bigskid-brand .button.outline:hover {
	border-color: var(--bs-orange);
	color: var(--bs-orange);
	background-color: transparent;
	box-shadow: none;
	animation: none;
}

/* ---------- Forms ---------- */
.bigskid-brand input[type="text"],
.bigskid-brand input[type="email"],
.bigskid-brand input[type="password"],
.bigskid-brand input[type="search"],
.bigskid-brand input[type="tel"],
.bigskid-brand input[type="url"],
.bigskid-brand input[type="number"],
.bigskid-brand textarea,
.bigskid-brand select {
	background-color: var(--bs-input-bg);
	color: var(--bs-fg);
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius);
	padding: 0.75rem 1rem;
	font-family: var(--bs-font-body);
	font-size: 1rem;
	transition: var(--bs-transition);
	width: 100%;
}

.bigskid-brand input:focus,
.bigskid-brand textarea:focus,
.bigskid-brand select:focus {
	outline: none;
	border-color: var(--bs-orange);
	box-shadow: 0 0 0 2px var(--bs-orange-soft);
}

.bigskid-brand ::placeholder {
	color: var(--bs-smoke);
	opacity: 0.6;
}

/* ---------- Hero ---------- */
.bigskid-brand .bs-hero,
.bigskid-brand .hero-section,
.bigskid-brand .home .wp-block-cover.is-style-bs-hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
	background-color: var(--bs-bg);
}

.bigskid-brand .bs-hero::before,
.bigskid-brand .hero-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--bs-gradient-hero);
	z-index: 1;
	pointer-events: none;
}

.bigskid-brand .bs-hero > *,
.bigskid-brand .hero-section > * {
	position: relative;
	z-index: 2;
}

.bigskid-brand .bs-hero h1,
.bigskid-brand .hero-section h1 {
	font-size: clamp(4rem, 10vw, 9rem);
	margin-bottom: 1.5rem;
}

/* ---------- Cards ---------- */
.bigskid-brand .bs-card,
.bigskid-brand .wp-block-group.is-style-bs-card,
.bigskid-brand .kt-inside-inner-col.kt-style-card {
	background-color: var(--bs-card);
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius);
	padding: 2rem;
	transition: var(--bs-transition);
}

.bigskid-brand .bs-card:hover,
.bigskid-brand .wp-block-group.is-style-bs-card:hover {
	border-color: var(--bs-orange);
	box-shadow: var(--bs-shadow-intense);
}

/* ---------- Section spacing ---------- */
.bigskid-brand .entry-content > * {
	margin-top: clamp(4rem, 8vw, 7rem);
	margin-bottom: clamp(4rem, 8vw, 7rem);
}

/* ---------- Footer ---------- */
.bigskid-brand .site-footer,
.bigskid-brand #colophon {
	background-color: var(--bs-bg);
	border-top: 1px solid var(--bs-border);
	padding: 3rem 0;
	color: var(--bs-muted-fg);
}

.bigskid-brand .site-footer a {
	color: var(--bs-muted-fg);
}

.bigskid-brand .site-footer a:hover {
	color: var(--bs-orange);
}

/* ---------- Badges / pill labels ---------- */
.bigskid-brand .bs-badge {
	display: inline-block;
	font-family: var(--bs-font-body);
	font-weight: 700;
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.25rem 0.625rem;
	border-radius: var(--bs-radius-sm);
}

.bigskid-brand .bs-badge--primary { background: var(--bs-orange); color: var(--bs-fg); }
.bigskid-brand .bs-badge--alert   { background: #C42323;        color: var(--bs-fg); }
.bigskid-brand .bs-badge--muted   { background: var(--bs-muted); color: var(--bs-fg); }

/* ---------- WooCommerce overrides ---------- */
.bigskid-brand.woocommerce ul.products li.product .price,
.bigskid-brand .woocommerce-Price-amount {
	color: var(--bs-orange);
	font-weight: 700;
	font-size: 1.25rem;
}

.bigskid-brand .woocommerce ul.products li.product .button,
.bigskid-brand .woocommerce a.button,
.bigskid-brand .woocommerce-page button.button.alt,
.bigskid-brand .woocommerce #respond input#submit.alt {
	background-color: var(--bs-orange);
	color: var(--bs-fg);
	border-radius: var(--bs-radius);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
}

.bigskid-brand .woocommerce ul.products li.product .button:hover,
.bigskid-brand .woocommerce a.button:hover {
	background-color: var(--bs-orange);
	box-shadow: var(--bs-orange-glow);
}

.bigskid-brand .woocommerce ul.products li.product h2,
.bigskid-brand .woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--bs-font-display);
	font-size: 1.5rem;
	color: var(--bs-fg);
	text-transform: uppercase;
}

.bigskid-brand .woocommerce ul.products li.product a img {
	border-radius: var(--bs-radius);
	transition: var(--bs-transition);
}

.bigskid-brand .woocommerce ul.products li.product:hover a img {
	transform: scale(1.03);
}

/* ---------- Animations ---------- */
@keyframes bs-smoke-float {
	0%, 100% {
		transform: translateY(0) translateX(0) rotate(0deg);
		opacity: 0.3;
	}
	50% {
		transform: translateY(-20px) translateX(10px) rotate(5deg);
		opacity: 0.5;
	}
}

@keyframes bs-shake {
	0%, 100% { transform: translateX(0); }
	25%      { transform: translateX(-2px); }
	75%      { transform: translateX(2px); }
}

@keyframes bs-zoom-in {
	from { transform: scale(1); }
	to   { transform: scale(1.05); }
}

.bigskid-brand .bs-smoke {
	animation: bs-smoke-float 8s ease-in-out infinite;
	pointer-events: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
	.bigskid-brand .container,
	.bigskid-brand .site-container {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	.bigskid-brand .entry-content > * {
		margin-top: clamp(2.5rem, 6vw, 4rem);
		margin-bottom: clamp(2.5rem, 6vw, 4rem);
	}
}

/* =====================================================================
   Front-page sections (Lovable port)
   On the front page Kadence's CSS is dequeued (see functions.php), so this
   block owns the entire visual baseline. Don't inherit, don't assume.
   ===================================================================== */

/* ---------- Reset (front page only) ---------- */
body.bs-page,
body.bs-page * {
	box-sizing: border-box;
}

body.bs-page {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	background: var(--bs-bg);
	color: var(--bs-fg);
	font-family: var(--bs-font-body);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.bs-page h1,
body.bs-page h2,
body.bs-page h3,
body.bs-page h4,
body.bs-page h5,
body.bs-page h6 {
	font-family: var(--bs-font-display);
	font-weight: 400;
	line-height: 1;
	margin: 0 0 1rem;
	color: var(--bs-fg);
}

body.bs-page p     { margin: 0 0 1rem; }
body.bs-page ul    { padding: 0; margin: 0; list-style: none; }
body.bs-page img   { max-width: 100%; height: auto; display: block; }
body.bs-page svg   { max-width: 100%; height: auto; display: inline-block; vertical-align: middle; }
body.bs-page a     { color: var(--bs-fg); text-decoration: none; transition: var(--bs-transition); }
body.bs-page a:hover { color: var(--bs-orange); }
body.bs-page button { font-family: inherit; }
body.bs-page input,
body.bs-page select,
body.bs-page textarea { font-family: inherit; }

/* WordPress admin bar (if logged in) shouldn't push the sticky nav around */
body.bs-page.admin-bar .bs-nav { top: 32px; }
@media (max-width: 782px) {
	body.bs-page.admin-bar .bs-nav { top: 46px; }
}

/* ---------- Container ---------- */
.bs-page .bs-container {
	max-width: var(--bs-container-max);
	margin: 0 auto;
	padding-left: var(--bs-container-pad);
	padding-right: var(--bs-container-pad);
	position: relative;
}

/* ---------- Sticky nav (overrides Kadence layout entirely on front page) ---------- */
.bs-nav {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(0, 0, 0, 0.95);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--bs-border);
}

.bs-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 4rem;
}

.bs-nav__brand {
	display: inline-flex;
	align-items: center;
	height: 100%;
	color: var(--bs-fg);
	text-decoration: none;
}

/* Note: prefixed with .bs-nav to beat the universal body.bs-page img
   reset which sets height:auto. Without the bump the logo renders at
   its intrinsic 600x400 and swamps the nav. */
.bs-nav .bs-nav__logo,
body.bs-page .bs-nav__logo {
	display: block;
	height: 2.25rem !important;
	width: auto !important;
	max-width: 9rem;
	object-fit: contain;
	transition: var(--bs-transition);
}

@media (min-width: 768px) {
	.bs-nav .bs-nav__logo,
	body.bs-page .bs-nav__logo {
		height: 2.5rem !important;
		max-width: 10rem;
	}
}

.bs-nav__brand:hover .bs-nav__logo { opacity: 0.85; }

.bs-nav__menu {
	display: none;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 768px) {
	.bs-nav__menu { display: flex; align-items: center; }
}

.bs-nav__link {
	font-family: var(--bs-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bs-fg);
	text-decoration: none;
	transition: var(--bs-transition);
}

.bs-nav__link:hover { color: var(--bs-orange); }
.bs-nav__link--accent { color: var(--bs-orange); font-weight: 700; }

.bs-nav__cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	color: var(--bs-fg);
	border-radius: var(--bs-radius);
	text-decoration: none;
	transition: var(--bs-transition);
}

.bs-nav__cart:hover { color: var(--bs-orange); background: rgba(255, 255, 255, 0.05); }
.bs-nav__cart svg { width: 1.25rem; height: 1.25rem; }

.bs-nav__cart-count {
	position: absolute;
	top: -0.125rem;
	right: -0.125rem;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 0.25rem;
	background: var(--bs-orange);
	color: var(--bs-fg);
	font-family: var(--bs-font-body);
	font-size: 0.6875rem;
	font-weight: 700;
	border-radius: 9999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ---------- Coming-soon banner ---------- */
.bs-banner {
	background: var(--bs-orange);
	color: var(--bs-fg);
	font-family: var(--bs-font-body);
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	text-align: center;
	padding: 0.5rem 1rem;
}

.bs-banner__copy { margin: 0 0.625rem; }
.bs-banner__flame { animation: bs-pulse 2s ease-in-out infinite; display: inline-block; }

@keyframes bs-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

/* ---------- Sections ---------- */
.bs-section {
	position: relative;
	padding: clamp(3.5rem, 8vw, 5rem) 0;
	overflow: hidden;
}

.bs-section--bg   { background: var(--bs-bg); }
.bs-section--card { background: var(--bs-card); }

.bs-section__head { margin-bottom: 3rem; }
.bs-section__head--center { text-align: center; }
.bs-section__head .bs-badge { margin-bottom: 1rem; }

.bs-section__title {
	font-family: var(--bs-font-display);
	font-weight: 400;
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	line-height: 1;
	text-transform: uppercase;
	color: var(--bs-fg);
	margin: 0 0 1.5rem;
}

.bs-section__title--center { text-align: center; }

/* ---------- Hero ---------- */
/* Spec: video band at top (H1 overlaid), everything else flows below. */

.bs-hero {
	display: block;
	background: var(--bs-bg);
	color: var(--bs-fg);
}

.bs-hero__band {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 75vh;
	overflow: hidden;
	background: var(--bs-bg);
}

.bs-hero__video {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	border: 0;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	animation: none;
	z-index: 1;
	pointer-events: none;
}

.bs-hero__band-content {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1.5rem;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.8);
}

.bs-hero__below {
	padding: 3rem 1.5rem 4rem;
	text-align: center;
	max-width: 64rem;
	margin: 0 auto;
}

/* Hero background wrapper -- holds the layout. A plain unnamed div that
   no plugin (Complianz, WC, etc.) has a CSS hook on, so the positioning
   is guaranteed. The video inside just fills it. */
.bs-hero__bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 1;
	background: var(--bs-bg);
	pointer-events: none;
}

.bs-hero__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border: 0;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	animation: none;
}

/* Defensive: if Complianz still wraps our video, force the wrapper to
   fill the bs-hero__bg container instead of taking on its own layout. */
.bs-hero__bg .cmplz-wp-video,
.bs-hero__bg .cmplz-blocked-content-container {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	display: block !important;
	animation: none !important;
}

.bs-hero__overlay {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background:
		linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.75) 60%, rgba(0,0,0,0.95) 100%),
		radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 70%);
	z-index: 2;
	pointer-events: none;
}

.bs-hero__smoke {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	opacity: 0.3;
	pointer-events: none;
	z-index: 3;
}

.bs-hero__content {
	position: relative;
	z-index: 4;
	text-align: center;
	max-width: 64rem;
	margin: 0 auto;
	padding: 6rem 1.5rem 4rem;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
}

.bs-hero__title {
	font-family: var(--bs-font-display);
	font-weight: 400;
	font-size: clamp(3.5rem, 11vw, 8.5rem);
	line-height: 0.95;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	color: var(--bs-fg);
	margin: 0 0 1.5rem;
}

.bs-hero__sub {
	font-family: var(--bs-font-body);
	font-size: clamp(1.125rem, 2vw, 1.5rem);
	font-weight: 500;
	color: rgba(255, 255, 255, 0.9);
	max-width: 48rem;
	margin: 0 auto 2rem;
}

.bs-hero__cta { margin-bottom: 2rem; }

.bs-hero__note {
	font-size: 0.875rem;
	color: var(--bs-smoke);
	font-style: italic;
	margin: 0 0 3rem;
}

.bs-trust-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
	max-width: 56rem;
	margin: 0 auto;
}

@media (min-width: 768px) {
	.bs-trust-grid { grid-template-columns: repeat(3, 1fr); }
}

.bs-trust-grid__cell {
	background: rgba(13, 13, 13, 0.5);
	backdrop-filter: blur(4px);
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius);
	padding: 1rem 1.5rem;
	font-family: var(--bs-font-body);
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.04em;
}

/* ---------- Buttons (front-page variants) ---------- */
.bs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--bs-font-body);
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: var(--bs-radius);
	border: 1px solid transparent;
	padding: 0.75rem 1.5rem;
	cursor: pointer;
	transition: var(--bs-transition);
	text-decoration: none;
	color: var(--bs-fg);
}

.bs-btn--lg  { font-size: 1.0625rem; padding: 1rem 2rem; }
.bs-btn--block { display: flex; width: 100%; }

.bs-btn--primary {
	background: var(--bs-orange);
	border-color: var(--bs-orange);
	color: var(--bs-fg);
}

.bs-btn--primary:hover {
	box-shadow: var(--bs-orange-glow);
	animation: bs-shake 0.5s ease-in-out;
	color: var(--bs-fg);
}

.bs-btn--outline {
	background: transparent;
	border-color: var(--bs-orange);
	color: var(--bs-orange);
}

.bs-btn--outline:hover {
	background: var(--bs-orange);
	color: var(--bs-fg);
}

/* ---------- Inputs (front-page variants) ---------- */
.bs-input {
	background: var(--bs-input-bg);
	color: var(--bs-fg);
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius);
	padding: 0.875rem 1rem;
	font-family: var(--bs-font-body);
	font-size: 1rem;
	width: 100%;
	transition: var(--bs-transition);
}

.bs-input--sm { padding: 0.5rem 0.75rem; font-size: 0.875rem; }
.bs-input:focus { outline: none; border-color: var(--bs-orange); box-shadow: 0 0 0 2px var(--bs-orange-soft); }
.bs-input::placeholder { color: var(--bs-smoke); opacity: 0.6; }

/* ---------- Badge size variant ---------- */
.bs-badge--lg { font-size: 0.8125rem; padding: 0.5rem 1rem; }

/* ---------- Accent (inline highlight) ---------- */
.bs-accent { color: var(--bs-orange); }

/* ---------- Product grid ---------- */
.bs-product-grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
}

@media (min-width: 640px)  { .bs-product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bs-product-grid { grid-template-columns: repeat(4, 1fr); } }

.bs-product {
	background: var(--bs-card);
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius);
	overflow: hidden;
	transition: var(--bs-transition);
}

.bs-product:hover { border-color: var(--bs-orange); box-shadow: var(--bs-shadow-intense); }

.bs-product__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--bs-muted);
	overflow: hidden;
}

.bs-product__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.bs-product:hover .bs-product__media img { transform: scale(1.05); }

.bs-product__badge { position: absolute; top: 1rem; right: 1rem; }

.bs-product__body { padding: 1.25rem; }

.bs-product__name {
	font-family: var(--bs-font-body);
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.3;
	color: var(--bs-fg);
	margin: 0 0 0.5rem;
	text-transform: none;
}

.bs-product__price {
	font-family: var(--bs-font-display);
	font-size: 1.75rem;
	color: var(--bs-orange);
	margin: 0 0 1rem;
}

.bs-product__size {
	background: var(--bs-input-bg);
	color: var(--bs-fg);
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius);
	padding: 0.5rem 0.75rem;
	font-family: var(--bs-font-body);
	font-size: 0.875rem;
	width: 100%;
	margin-bottom: 1rem;
}

/* Real WC product card -- name link inherits card colour, not link styling */
.bs-product__name a,
.bs-product__media-link {
	color: inherit;
	text-decoration: none;
}

.bs-product__name a:hover {
	color: var(--bs-orange);
}

/* Preview placeholder card hint line under the price */
.bs-product__hint {
	font-size: 0.8125rem;
	color: var(--bs-smoke);
	font-style: italic;
	margin: 0;
}

/* ---------- Two-column layout (Brand Story) ---------- */
.bs-two-col {
	display: grid;
	gap: 3rem;
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width: 1024px) { .bs-two-col { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }

.bs-two-col__media {
	position: relative;
	border-radius: var(--bs-radius);
	overflow: hidden;
	border: 1px solid var(--bs-border);
}

.bs-two-col__media img {
	display: block;
	width: 100%;
	height: 500px;
	object-fit: cover;
}

.bs-two-col__media-fade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
	pointer-events: none;
}

.bs-two-col__body p {
	font-size: 1.0625rem;
	color: rgba(255, 255, 255, 0.9);
	margin: 0 0 1rem;
}

.bs-two-col__body .bs-btn { margin-top: 1rem; }

/* ---------- Three-column layout (Community + Testimonials) ---------- */
.bs-three-col {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
}

@media (min-width: 768px) { .bs-three-col { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Cards ---------- */
.bs-card {
	background: var(--bs-card);
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius);
	padding: 2rem;
	transition: var(--bs-transition);
}

.bs-card:hover { border-color: var(--bs-orange); }

.bs-card--center { text-align: center; }

.bs-card__icon {
	font-size: 2.5rem;
	color: var(--bs-orange);
	margin-bottom: 1rem;
	line-height: 1;
}

.bs-card__title {
	font-family: var(--bs-font-display);
	font-weight: 400;
	font-size: 1.625rem;
	color: var(--bs-fg);
	margin: 0 0 0.5rem;
	text-transform: uppercase;
}

.bs-card--quote {
	margin: 0;
	display: flex;
	flex-direction: column;
}

.bs-card__quote {
	font-family: var(--bs-font-body);
	font-size: 1.0625rem;
	font-style: italic;
	color: rgba(255, 255, 255, 0.9);
	margin: 0 0 1.5rem;
	flex: 1;
}

.bs-card__cite {
	font-family: var(--bs-font-body);
	font-weight: 700;
	color: var(--bs-orange);
	font-style: normal;
}

/* ---------- Smoke background overlays ---------- */
.bs-section--smoked { position: relative; overflow: hidden; }

.bs-smoke-bg {
	position: absolute;
	inset: 0;
	opacity: 0.1;
	pointer-events: none;
	z-index: 0;
}

.bs-section--smoked .bs-container { position: relative; z-index: 1; }

.bs-smoke {
	position: absolute;
	border-radius: 9999px;
	background: var(--bs-smoke);
	filter: blur(80px);
	pointer-events: none;
	animation: bs-smoke-float 8s ease-in-out infinite;
}

.bs-smoke--a { top: 25%; left: 25%; width: 24rem; height: 24rem; opacity: 0.2; }
.bs-smoke--b { bottom: 33%; right: 25%; width: 20rem; height: 20rem; opacity: 0.15; animation-delay: 2s; }
.bs-smoke--c { top: 0;     left: 25%;  width: 24rem; height: 24rem; }
.bs-smoke--d { bottom: 0;  right: 25%; width: 24rem; height: 24rem; animation-delay: 3s; }
.bs-smoke--e { top: 50%;   left: 50%;  width: 38rem; height: 38rem; transform: translate(-50%, -50%); }

/* ---------- Email Capture (CTA block) ---------- */
.bs-cta-block {
	max-width: 36rem;
	margin: 0 auto;
	text-align: center;
}

.bs-cta-block .bs-section__title { text-align: center; }

.bs-cta-block__sub {
	font-size: 1.125rem;
	color: rgba(255, 255, 255, 0.9);
	margin: 0 0 2rem;
}

.bs-cta-block__form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 1rem;
}

@media (min-width: 640px) {
	.bs-cta-block__form { flex-direction: row; }
	.bs-cta-block__form .bs-input { flex: 1; }
}

.bs-cta-block__fineprint {
	font-size: 0.875rem;
	color: var(--bs-smoke);
	margin: 0;
}

/* ---------- Footer ---------- */
.bs-footer {
	background: var(--bs-bg);
	border-top: 1px solid var(--bs-border);
	padding: 3rem 0;
	color: var(--bs-muted-fg);
}

.bs-footer__grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
	margin-bottom: 2rem;
}

@media (min-width: 768px) { .bs-footer__grid { grid-template-columns: repeat(4, 1fr); } }

.bs-footer__heading {
	font-family: var(--bs-font-display);
	font-size: 1.25rem;
	color: var(--bs-fg);
	margin: 0 0 1rem;
	text-transform: uppercase;
}

.bs-footer ul { list-style: none; margin: 0; padding: 0; }
.bs-footer li { margin-bottom: 0.5rem; }
.bs-footer a { color: var(--bs-muted-fg); text-decoration: none; font-size: 0.875rem; transition: var(--bs-transition); }
.bs-footer a:hover { color: var(--bs-orange); }

.bs-footer__form { display: flex; flex-direction: column; gap: 0.5rem; }

.bs-footer__bottom {
	border-top: 1px solid var(--bs-border);
	padding-top: 2rem;
	text-align: center;
}

.bs-footer__bottom p {
	font-size: 0.875rem;
	color: var(--bs-muted-fg);
	margin: 0;
}

/* ---------- Inner pages (shop, cart, product, etc.) ----------------- */
/* Header.php/footer.php run on every page, so we need a main wrapper
   that gives WC and other templates breathing room beneath the sticky
   nav. Front page omits this padding because the hero band sits flush
   against the nav. */
body.bs-page .bs-main {
	padding: 2.5rem 0 4rem;
	min-height: 50vh;
	background: var(--bs-bg);
}

body.bs-page.home .bs-main {
	padding: 0;
}

/* WooCommerce inner pages take the dark BigSkid baseline. Container
   widths + typography fall in line with the brand. */
body.bs-page.woocommerce .bs-main,
body.bs-page.woocommerce-page .bs-main {
	padding-left: var(--bs-container-pad);
	padding-right: var(--bs-container-pad);
	max-width: var(--bs-container-max);
	margin: 0 auto;
}

/* Shop archive headline ("Shop", or whatever WC renders) */
body.bs-page .woocommerce-products-header__title,
body.bs-page .page-title,
body.bs-page h1.entry-title {
	font-family: var(--bs-font-display);
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	text-transform: uppercase;
	line-height: 1;
	margin: 0 0 2rem;
	color: var(--bs-fg);
}

/* Hide WC default result count + sort dropdown (low-utility on a sparse
   catalogue; can be re-enabled later) */
body.bs-page .woocommerce-result-count,
body.bs-page .woocommerce-ordering {
	display: none;
}

/* Empty shop state -- branded ----------------------------------------- */
.bs-empty-shop {
	text-align: center;
	padding: 5rem 1.5rem;
	max-width: 36rem;
	margin: 0 auto;
}

.bs-empty-shop h2 {
	font-family: var(--bs-font-display);
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	color: var(--bs-fg);
	margin: 0 0 1rem;
	text-transform: uppercase;
}

.bs-empty-shop p {
	font-size: 1.125rem;
	color: var(--bs-muted-fg);
	margin: 0 0 2rem;
}

.bs-empty-shop a {
	color: var(--bs-orange);
}

/* WooCommerce loop products on the shop archive -- give them the
   BigSkid card look without re-deriving every WC class */
body.bs-page ul.products li.product,
body.bs-page .wc-block-grid__product {
	background: var(--bs-card);
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius);
	padding: 1rem;
	transition: var(--bs-transition);
}

body.bs-page ul.products li.product:hover,
body.bs-page .wc-block-grid__product:hover {
	border-color: var(--bs-orange);
}

body.bs-page ul.products li.product .woocommerce-loop-product__title,
body.bs-page .wc-block-grid__product-title {
	color: var(--bs-fg);
	font-family: var(--bs-font-body);
	font-weight: 700;
	font-size: 1.0625rem;
	text-transform: none;
}

body.bs-page ul.products li.product .price,
body.bs-page .wc-block-grid__product-price {
	color: var(--bs-orange);
}

/* ---------- Long-form prose (legal pages, policies) ---------- */
.bs-legal-prose {
	max-width: 50rem;
}

.bs-story-hero__sub {
	font-family: var(--bs-font-body);
	font-size: 1rem;
	letter-spacing: 0.04em;
	color: var(--bs-smoke);
	text-transform: uppercase;
	margin: 1rem 0 0;
}

.bs-legal-prose h2 {
	font-family: var(--bs-font-display);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	text-transform: uppercase;
	color: var(--bs-fg);
	margin: 2.5rem 0 1rem;
	letter-spacing: -0.01em;
}

.bs-legal-prose h3 {
	font-family: var(--bs-font-body);
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--bs-fg);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 2rem 0 0.75rem;
}

.bs-legal-prose p,
.bs-legal-prose li {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.9);
}

.bs-legal-prose ul,
.bs-legal-prose ol {
	margin: 0 0 1.25rem 1.25rem;
	padding: 0;
}

.bs-legal-prose ul { list-style: disc; }
.bs-legal-prose ol { list-style: decimal; }

.bs-legal-prose li {
	margin-bottom: 0.5rem;
}

.bs-legal-prose strong {
	color: var(--bs-fg);
	font-weight: 700;
}

.bs-legal-prose a {
	color: var(--bs-orange);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bs-legal-prose a:hover {
	color: var(--bs-fg);
}

/* Size guide tables */
.bs-size-table {
	width: 100%;
	border-collapse: collapse;
	margin: 1rem 0 2rem;
	font-family: var(--bs-font-body);
	font-size: 0.95rem;
}

.bs-size-table th,
.bs-size-table td {
	border: 1px solid var(--bs-border);
	padding: 0.75rem 1rem;
	text-align: left;
}

.bs-size-table th {
	background: var(--bs-input-bg);
	color: var(--bs-fg);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
	font-size: 0.8125rem;
}

.bs-size-table tr:nth-child(even) td {
	background: rgba(255, 255, 255, 0.02);
}

/* ---------- /story page ---------- */
.bs-story-hero {
	padding-top: clamp(4rem, 8vw, 6rem);
	padding-bottom: clamp(3rem, 6vw, 4.5rem);
}

.bs-story-hero__inner {
	max-width: 56rem;
	margin: 0 auto;
	text-align: center;
}

.bs-story-hero .bs-eyebrow {
	display: block;
	margin-bottom: 1.25rem;
}

.bs-story-hero__title {
	font-family: var(--bs-font-display);
	font-size: clamp(2.5rem, 6vw, 5.5rem);
	line-height: 1.05;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	color: var(--bs-fg);
	margin: 0;
}

.bs-story-prose {
	max-width: 44rem;
	margin: 0 auto;
}

.bs-story-prose p {
	font-size: 1.125rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.92);
	margin: 0 0 1.25rem;
}

.bs-story-prose .bs-section__title {
	margin-bottom: 1.75rem;
}

.bs-two-col--prose .bs-two-col__body p {
	font-size: 1.0625rem;
	line-height: 1.7;
}

.bs-story-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	margin-bottom: 0.5rem;
}

@media (max-width: 640px) {
	.bs-story-cta-row .bs-btn { width: 100%; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.bigskid-brand *,
	.bigskid-brand *::before,
	.bigskid-brand *::after,
	.bs-page *,
	.bs-page *::before,
	.bs-page *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}