/*
 * Lights Out Racing — theme.css
 * All visual styling lives here (Section 10). No CSS is emitted from PHP
 * templates other than the mandatory Customizer color/logo-height variables.
 */

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

:root {
	--color-primary: #c81c1c;
	--color-background: #f7f0e2;
	--color-foreground: #141414;
	--color-secondary: #ece3d2;
	--color-muted: #e8e0cf;
	--color-border: #d4c9b0;
	--color-button-text: #f9f4e8;

	--color-muted-foreground: #5b5850;
	--color-card: color-mix(in srgb, var(--color-background) 96%, white 4%);
	--color-border-soft: color-mix(in srgb, var(--color-border) 70%, transparent);

	--font-display: 'Saira Condensed', 'Barlow', 'Helvetica Neue', sans-serif;
	--font-body: 'Barlow', 'Helvetica Neue', sans-serif;

	--radius: 2px;
	--btn-radius: 0;
	--btn-height: 3rem;
	--btn-padding: 0 2rem;
	--btn-font-size: 0.6875rem;
	--btn-font-weight: 600;
	--btn-letter-spacing: 0.28em;
	--btn-text-transform: uppercase;
	--btn-icon-padding: 0.5rem;

	--shadow-soft: 0 6px 24px -8px rgba(0, 0, 0, 0.22);
	--shadow-elevated: 0 14px 40px -12px rgba(0, 0, 0, 0.38);
	--transition-smooth: cubic-bezier(0.25, 0.4, 0.25, 1);

	--header-height: 84px;
	--logo-height: 24px;
	--logo-height-header-md: 28px;
	--logo-height-footer: 29px;
	--checkout-gap: 2rem;
	--checkout-max-width: 1280px;
	--card-radius: 4px;
	--section-padding: 2rem;

	/* Fixed "dark section" palette — used for structural dark-on-cream
	   inversions (header pill, shop section) that exist in every variant
	   of this design and are not brand-color driven. */
	--dark-bg: #131313;
	--dark-fg: #f7f0e2;
	--dark-primary: var(--color-primary);
	--dark-secondary: #232323;
	--dark-border: #333333;
	--dark-muted-foreground: #b7b2a4;
}

/* =========================================================================
 * 2. RESET / BASE
 * ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; max-width: 100%; }
body {
	margin: 0;
	background: var(--color-background);
	color: var(--color-foreground);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
img:not(.cover-img):not(.hero-parallax):not(.site-logo-img) {
	max-width: 100%;
	height: auto;
}
.cover-img, .hero-parallax {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
a { color: inherit; text-decoration: none; cursor: pointer; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 800;
	letter-spacing: -0.005em;
	font-size: inherit;
	margin: 0;
}
.font-display { font-family: var(--font-display); font-weight: inherit; font-size: inherit; }
p { margin: 0; }

.container-wide { width: 100%; max-width: 80rem; margin: 0 auto; padding-inline: 1.5rem; }
@media (min-width: 1024px) { .container-wide { padding-inline: 2.5rem; } }

.label-eyebrow {
	display: block;
	font-family: var(--font-body);
	font-size: 0.7rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--color-muted-foreground);
}

.screen-reader-text, .skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.skip-link:focus {
	left: 1rem; top: 1rem; width: auto; height: auto; z-index: 10000;
	background: var(--color-background); padding: 0.5rem 1rem;
}

/* =========================================================================
 * 3. BUTTONS
 * ========================================================================= */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	cursor: pointer;
	height: var(--btn-height);
	padding: var(--btn-padding);
	font-family: var(--font-body);
	font-size: var(--btn-font-size);
	font-weight: var(--btn-font-weight);
	letter-spacing: var(--btn-letter-spacing);
	text-transform: var(--btn-text-transform);
	border: 1px solid transparent;
	border-radius: var(--btn-radius);
	transition: all 0.3s var(--transition-smooth);
	white-space: nowrap;
}
.btn-hero-primary, .btn-hero-outline, .single-product .single_add_to_cart_button {
	text-transform: none;
}
.btn-primary, .theme-btn-primary { background: var(--color-primary); color: var(--color-button-text); border-color: var(--color-primary); }
.btn-primary:hover, .theme-btn-primary:hover { background: var(--color-foreground); color: var(--color-background); border-color: var(--color-foreground); }
.btn-outline { background: transparent; color: var(--color-foreground); border-color: var(--color-border); }
.btn-outline:hover { background: var(--color-foreground); color: var(--color-background); border-color: var(--color-foreground); }
.btn-dark { background: var(--color-foreground); color: var(--color-background); }
.btn-dark:hover { background: var(--color-primary); color: var(--color-button-text); }
.btn-outline-dark { background: transparent; color: var(--color-foreground); border-color: var(--color-foreground); }
.btn-outline-dark:hover { background: var(--color-foreground); color: var(--color-background); }
.btn-light { background: var(--color-background); color: var(--color-foreground); }
.btn-light:hover { background: var(--color-primary); color: var(--color-button-text); }
.btn-outline-hero { background: transparent; color: var(--dark-fg); border-color: color-mix(in srgb, var(--dark-fg) 70%, transparent); }
.btn-outline-hero:hover { background: var(--dark-fg); color: var(--color-foreground); }

/* =========================================================================
 * 4. ANIMATIONS (Section 2.1)
 * ========================================================================= */

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes kenBurns { 0% { transform: scale(1); } 100% { transform: scale(1.08); } }
@keyframes silkDrift {
	0%   { background-position:   0% 50%,  100%   0%; transform: scale(1.05) rotate(0deg); }
	50%  { background-position: 100% 50%,    0% 100%; transform: scale(1.12) rotate(0.4deg); }
	100% { background-position:   0% 50%,  100%   0%; transform: scale(1.05) rotate(0deg); }
}

.animate-fade-in { animation: fadeIn 0.8s var(--transition-smooth) forwards; }
.animate-slide-up { animation: slideUp 0.8s var(--transition-smooth) forwards; }
.animate-ken-burns { animation: kenBurns 18s ease-in-out infinite alternate; }

/* Reveal-on-scroll (framer-motion whileInView equivalent).
   Section 2.1.5 — this class is used inside the shared content-product
   partial (shop grid, homepage featured row, related products), so the
   observer must cover every context; see main.js for a global selector. */
.reveal-item {
	opacity: 0;
	will-change: opacity, transform;
}
.reveal-item.reveal-up { transform: translateY(24px); }
.reveal-item.reveal-fade { transform: none; }
.reveal-item.is-visible {
	opacity: 1;
	transform: none;
	transition: opacity 0.55s var(--transition-smooth), transform 0.55s var(--transition-smooth);
}
/* Customizer preview fallback — never leave content invisible in the editor. */
body.is-customizer .reveal-item,
body.is-customizer .theme-product-card-wrap.reveal-item {
	opacity: 1 !important;
	transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
	.reveal-item { opacity: 1 !important; transform: none !important; }
	.animate-ken-burns, .hero-parallax { animation: none !important; }
}

.scroll-progress {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: var(--color-primary);
	transform-origin: 0% 50%;
	transform: scaleX(0);
	z-index: 70;
	pointer-events: none;
	transition: background-color 0.3s;
}

/* =========================================================================
 * 5. HEADER
 * ========================================================================= */

.site-header {
	position: fixed;
	top: 0.75rem; left: 0; right: 0;
	z-index: 50;
	padding: 0 0.75rem;
}
@media (min-width: 768px) { .site-header { top: 1.25rem; padding: 0 1.5rem; } }

/* WordPress admin bar offset */
.admin-bar .site-header {
	top: calc(0.75rem + 32px);
}
@media (min-width: 768px) {
	.admin-bar .site-header {
		top: calc(1.25rem + 32px);
	}
}
@media (max-width: 782px) {
	.admin-bar .site-header {
		top: calc(0.75rem + 46px);
	}
}
.admin-bar .scroll-progress {
	top: 32px;
}
@media (max-width: 782px) {
	.admin-bar .scroll-progress {
		top: 46px;
	}
}
.admin-bar.theme-no-hero .site-main,
html.admin-bar body.theme-no-hero .site-main {
	padding-top: calc(var(--header-height) + 32px);
}
@media (max-width: 782px) {
	.admin-bar.theme-no-hero .site-main,
	html.admin-bar body.theme-no-hero .site-main {
		padding-top: calc(var(--header-height) + 46px);
	}
}

.site-header__bar {
	max-width: 80rem;
	margin: 0 auto;
	background: color-mix(in srgb, var(--dark-bg) 85%, transparent);
	backdrop-filter: blur(10px);
	border: 1px solid color-mix(in srgb, var(--dark-border) 60%, transparent);
	border-radius: 8px;
	box-shadow: 0 10px 40px -12px rgba(0, 0, 0, 0.3);
	color: var(--dark-fg);
}
.site-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 4.2rem;
	padding: 0 1rem;
}
@media (min-width: 768px) { .site-header__inner { padding: 0 1.5rem; } }

.site-header__left { display: flex; align-items: center; gap: 1.5rem; }
.site-header__menu-btn { padding: 0.5rem; margin-left: -0.5rem; color: var(--dark-fg); }
.site-header__nav { display: none; }
@media (min-width: 1024px) { .site-header__nav { display: flex; align-items: center; gap: 1.25rem; } .site-header__menu-btn { display: none; } }

.theme-nav-list { display: flex; align-items: center; gap: 1.25rem; }
.theme-nav-list .nav-link,
.theme-nav-list a {
	font-size: 0.8125rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--dark-fg);
	transition: color 0.3s;
}
.theme-nav-list a:hover { color: var(--dark-primary); }

.site-header__brand {
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.site-header__right { display: flex; align-items: center; gap: 0.125rem; }
.site-header__link-btn {
	display: none;
	font-size: 0.8125rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	font-weight: 500;
	padding: 0 0.75rem;
	color: var(--dark-fg);
	transition: color 0.3s;
}
@media (min-width: 1024px) { .site-header__link-btn { display: inline-flex; } }
.site-header__link-btn:hover { color: var(--dark-primary); }
.site-header__icon-btn {
	position: relative;
	width: 2.75rem; height: 2.75rem;
	display: none;
	align-items: center;
	justify-content: center;
	color: var(--dark-fg);
	transition: color 0.3s;
}
.site-header__search-btn { display: none; }
@media (min-width: 640px) { .site-header__search-btn { display: inline-flex; } }
.site-header__cart-btn { display: inline-flex; }
.site-header__icon-btn:hover { color: var(--dark-primary); }

.theme-cart-count-inline { font-size: inherit; }
.theme-cart-count-badge {
	position: absolute;
	top: -0.05rem; right: -0.05rem;
	width: 1.15rem; height: 1.15rem;
	display: flex; align-items: center; justify-content: center;
	font-size: 0.6875rem; font-weight: 500;
	background: var(--color-primary);
	color: var(--color-button-text);
	border-radius: 50%;
}
.theme-cart-count-badge:empty { display: none; }
/* Legacy fragment class — keep hidden for backward compat */
.theme-cart-count { display: none !important; }

/* Transparent header on home, solid elsewhere (Section 22.7) */
.site-header.is-solid .site-header__bar {
	background: color-mix(in srgb, var(--dark-bg) 96%, transparent);
}

/* =========================================================================
 * 6. MOBILE MENU (off-canvas)
 * ========================================================================= */

.mobile-menu {
	position: fixed; inset: 0; z-index: 90;
	visibility: hidden;
}
.mobile-menu.is-open { visibility: visible; }
.mobile-menu__overlay {
	position: absolute; inset: 0;
	background: rgba(0, 0, 0, 0.8);
	opacity: 0;
	transition: opacity 0.3s;
}
.mobile-menu.is-open .mobile-menu__overlay { opacity: 1; }
.mobile-menu__panel {
	position: absolute; top: 0; left: 0; bottom: 0;
	width: 88vw; max-width: 24rem;
	background: var(--dark-bg);
	color: var(--dark-fg);
	border-right: 1px solid var(--dark-border);
	display: flex; flex-direction: column;
	transform: translateX(-100%);
	transition: transform 0.4s var(--transition-smooth);
}
.mobile-menu.is-open .mobile-menu__panel { transform: translateX(0); }
.mobile-menu__header {
	display: flex; align-items: center; justify-content: space-between;
	padding: 0 1.25rem; height: 4.8rem;
	border-bottom: 1px solid var(--dark-border);
	flex-shrink: 0;
}
.mobile-menu__close { padding: 0.25rem; color: var(--dark-fg); }
.mobile-menu__nav { flex: 1; overflow-y: auto; padding: 0.75rem 0.5rem; }
.mobile-menu__nav li { border-bottom: 1px solid color-mix(in srgb, var(--dark-border) 60%, transparent); }
.mobile-menu__nav a, .mobile-menu__contact-link {
	display: block; width: 100%; text-align: left;
	padding: 1rem 0.75rem;
	font-size: 1rem; letter-spacing: 0.28em; text-transform: uppercase;
	color: var(--dark-fg);
}
.mobile-menu__nav a:hover, .mobile-menu__contact-link:hover { color: var(--dark-primary); }
.mobile-menu__footer {
	border-top: 1px solid var(--dark-border);
	padding: 1rem 0.75rem;
	display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
	flex-shrink: 0;
}
.mobile-menu__action {
	display: flex; align-items: center; justify-content: center; gap: 0.5rem;
	padding: 0.75rem;
	border: 1px solid var(--dark-border);
	font-size: 0.875rem; letter-spacing: 0.24em; text-transform: uppercase;
	color: var(--dark-fg);
	transition: background 0.3s, color 0.3s;
}
.mobile-menu__action:hover { background: var(--dark-fg); color: var(--dark-bg); }
.mobile-menu__action--cart { background: var(--dark-fg); color: var(--dark-bg); }
.mobile-menu__action--cart:hover { background: var(--color-primary); color: var(--color-button-text); }

/* =========================================================================
 * 7. SEARCH DIALOG
 * ========================================================================= */

.search-dialog { position: fixed; inset: 0; z-index: 80; visibility: hidden; }
.search-dialog.is-open { visibility: visible; animation: fadeIn 0.3s var(--transition-smooth) forwards; }
.search-dialog__overlay { position: absolute; inset: 0; background: rgba(20, 20, 20, 0.4); backdrop-filter: blur(4px); border: none; }
.search-dialog__panel {
	position: relative;
	background: var(--color-background);
	width: 100%; max-height: 92vh; overflow-y: auto;
	border-bottom: 1px solid var(--color-border);
	box-shadow: var(--shadow-elevated);
}
.search-dialog__close { position: absolute; top: 1.25rem; right: 1.25rem; padding: 0.5rem; opacity: 0.7; z-index: 10; }
.search-dialog__close:hover { opacity: 1; }
.search-dialog__inner { padding-block: 2.5rem; }
@media (min-width: 1024px) { .search-dialog__inner { padding-block: 3.5rem; } }
.search-dialog__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 1024px) { .search-dialog__grid { grid-template-columns: 260px 1fr; gap: 4rem; } }
.search-dialog__categories h3 { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 1.5rem; }
.search-dialog__categories ul { display: flex; flex-direction: column; gap: 0.875rem; }
.search-dialog__categories button {
	font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase;
	color: color-mix(in srgb, var(--color-foreground) 85%, transparent);
}
.search-dialog__categories button:hover { color: var(--color-primary); }
.search-dialog__input-row { display: flex; align-items: center; gap: 0.75rem; border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 30%, transparent); padding-bottom: 0.75rem; }
.search-dialog__input-row input {
	flex: 1; background: transparent; border: none; outline: none;
	font-family: var(--font-display); font-size: 1.5rem;
	color: var(--color-foreground);
}
.search-dialog__input-row input::placeholder { color: color-mix(in srgb, var(--color-foreground) 40%, transparent); }
.search-dialog__results-inner { margin-top: 2.5rem; }
.search-dialog__results-inner h4 { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 1.5rem; }
.search-dialog__grid-results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2rem; }
@media (min-width: 768px) { .search-dialog__grid-results { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .search-dialog__grid-results { grid-template-columns: repeat(4, 1fr); } }
.search-dialog__result { display: block; text-align: left; }
.search-dialog__result-image { aspect-ratio: 1/1; overflow: hidden; background: var(--color-secondary); position: relative; }
.search-dialog__result-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s; }
.search-dialog__result:hover .search-dialog__result-image img { transform: scale(1.05); }
.search-dialog__result-label { margin-top: 0.75rem; font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase; line-height: 1.4; }
.search-dialog__result-price { margin-top: 0.25rem; font-size: 0.75rem; color: color-mix(in srgb, var(--color-foreground) 70%, transparent); }
.search-dialog__no-results { font-size: 0.875rem; color: var(--color-muted-foreground); }

/* =========================================================================
 * 8. CONTACT MODAL
 * ========================================================================= */

.contact-modal { position: fixed; inset: 0; z-index: 95; visibility: hidden; }
.contact-modal.is-open { visibility: visible; }
.contact-modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.8); border: none; opacity: 0; transition: opacity 0.2s; }
.contact-modal.is-open .contact-modal__overlay { opacity: 1; }
.contact-modal__panel {
	position: absolute; left: 50%; top: 50%;
	width: calc(100% - 2rem); max-width: 32rem; max-height: 90vh; overflow-y: auto;
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: 8px;
	padding: 1.5rem;
	transform: translate(-50%, -46%) scale(0.96);
	opacity: 0;
	transition: opacity 0.2s, transform 0.2s;
}
.contact-modal.is-open .contact-modal__panel { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.contact-modal__close { position: absolute; right: 1rem; top: 1rem; padding: 0.25rem; opacity: 0.7; border-radius: 2px; }
.contact-modal__close:hover { opacity: 1; }
.contact-modal__title { font-size: 1.5rem; line-height: 1.25; margin-top: 0.5rem; }
.contact-modal__desc { font-size: 0.9375rem; line-height: 1.6; color: var(--color-muted-foreground); margin-top: 0.375rem; }
.contact-modal__meta {
	display: flex; flex-direction: column; gap: 0.5rem;
	font-size: 0.875rem; color: var(--color-muted-foreground);
	border-top: 1px solid var(--color-border); padding-top: 1rem; margin-top: 0.5rem;
}
.contact-modal__meta a { display: flex; align-items: center; gap: 0.5rem; }
.contact-modal__meta a:hover { color: var(--color-foreground); }
.contact-modal__body { margin-top: 1rem; }
.contact-modal__row { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 640px) { .contact-modal__row { grid-template-columns: 1fr 1fr; } }
.contact-modal__field { display: flex; flex-direction: column; }
.contact-modal__field label,
.contact-modal__field .contact-modal__label { margin-bottom: 0.375rem; }
.contact-modal__field input, .contact-modal__field textarea {
	width: 100%; padding: 0.625rem 0.75rem;
	background: var(--color-background);
	border: 1px solid var(--color-border);
	font-size: 0.875rem; font-family: var(--font-body);
	color: var(--color-foreground);
	resize: none;
	transition: border-color 0.3s;
}
.contact-modal__field input::placeholder, .contact-modal__field textarea::placeholder { color: var(--color-muted-foreground); }
.contact-modal__field input:focus, .contact-modal__field textarea:focus { outline: none; border-color: var(--color-primary); }
.contact-modal__field:not(:last-child) { margin-bottom: 1rem; }
.contact-modal__submit-row { display: flex; justify-content: flex-end; margin-top: 0.5rem; }
.contact-modal__submit-row .btn { height: 2.75rem; padding: 0 1.5rem; font-size: 0.75rem; }
.contact-modal__error { color: var(--color-primary); font-size: 0.8125rem; margin-top: 0.75rem; text-align: right; }
.contact-modal__success { text-align: center; padding: 2rem 0; }
.contact-modal__success-icon {
	width: 3.5rem; height: 3.5rem; border-radius: 50%;
	background: var(--color-primary); color: var(--color-button-text);
	display: flex; align-items: center; justify-content: center;
	margin: 0 auto 1rem;
}
.contact-modal__success h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.contact-modal__success p { font-size: 0.875rem; color: var(--color-muted-foreground); }

/* =========================================================================
 * 9. HERO
 * ========================================================================= */

.front-page .site-header { top: 0.75rem; }
body.theme-no-hero .site-main { padding-top: var(--header-height); }

.hero-section { position: relative; width: 100%; }
.hero-section__media { position: relative; width: 100%; height: 100dvh; overflow: hidden; background: var(--color-secondary); }
.hero-section__image { transform: scale(1.05); opacity: 0; transition: transform 1.6s var(--transition-smooth), opacity 1.6s var(--transition-smooth); }
.hero-section__image.is-visible { transform: scale(1); opacity: 1; }
.hero-section__gradient {
	position: absolute; inset: 0;
	background: linear-gradient(to top, color-mix(in srgb, var(--color-foreground) 90%, transparent) 0%, color-mix(in srgb, var(--color-foreground) 45%, transparent) 55%, color-mix(in srgb, var(--color-foreground) 20%, transparent) 100%);
}
@media (min-width: 1024px) {
	.hero-section__gradient { background: linear-gradient(to right, color-mix(in srgb, var(--color-foreground) 85%, transparent) 0%, color-mix(in srgb, var(--color-foreground) 50%, transparent) 55%, transparent 100%); }
}
.hero-section__content-wrap { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.hero-section__content { width: 100%; padding-bottom: 4rem; }
@media (min-width: 768px) { .hero-section__content { padding-bottom: 6rem; } }
@media (min-width: 1024px) { .hero-section__content { padding-bottom: 7rem; } }
.hero-section__eyebrow {
	display: block; font-size: 0.625rem; letter-spacing: 0.42em; text-transform: uppercase;
	color: color-mix(in srgb, var(--dark-fg) 80%, transparent); margin-bottom: 1rem; font-weight: 600;
}
@media (min-width: 768px) { .hero-section__eyebrow { font-size: 0.6875rem; } }
.hero-section__title {
	font-size: 2.75rem; line-height: 1; color: var(--dark-fg);
	margin-bottom: 1.5rem; max-width: 40rem; text-transform: uppercase;
}
@media (min-width: 768px) { .hero-section__title { font-size: 4.5rem; } }
@media (min-width: 1024px) { .hero-section__title { font-size: 6rem; } }
.hero-section__subtitle {
	font-size: 0.875rem; color: color-mix(in srgb, var(--dark-fg) 85%, transparent);
	max-width: 28rem; margin-bottom: 2rem; line-height: 1.6;
}
@media (min-width: 768px) { .hero-section__subtitle { font-size: 1rem; } }
.hero-section__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* =========================================================================
 * 10. PRODUCT ROW / CATEGORY TILES / SHARED PRODUCT CARD
 * ========================================================================= */

.product-row-section { background: var(--color-background); padding: 3.5rem 0 5rem; }
@media (min-width: 1024px) { .product-row-section { padding: 5rem 0; } }
.product-row-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
.product-row-section__title { font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.28em; text-transform: uppercase; }
@media (min-width: 640px) { .product-row-section__title { font-size: 0.875rem; } }
.product-row-section__arrows { display: flex; gap: 0.5rem; flex-shrink: 0; }
.product-row-arrow {
	width: 2.5rem; height: 2.5rem; border: 1px solid var(--color-border);
	display: flex; align-items: center; justify-content: center;
	transition: background 0.3s, color 0.3s;
}
.product-row-arrow:hover:not(:disabled) { background: var(--color-foreground); color: var(--color-background); }
.product-row-arrow:disabled { opacity: 0.35; cursor: not-allowed; }
.product-row-section__scroller {
	display: flex; gap: 1.25rem; overflow-x: auto; overflow-y: hidden; padding-bottom: 1rem;
	scrollbar-width: none; -webkit-overflow-scrolling: touch;
	width: 100%; box-sizing: border-box;
	scroll-behavior: smooth; scroll-snap-type: x mandatory;
}
.product-row-section__scroller::-webkit-scrollbar { display: none; }
.product-row-section__scroller .theme-product-card-wrap {
	flex: 0 0 auto;
	flex-shrink: 0;
	min-width: 0;
	scroll-snap-align: start;
}
/* Mobile: 1 centered card per slide, aligned to section inner (no bleed) */
@media (max-width: 639px) {
	.product-row-section__scroller {
		display: flex;
		gap: 0;
		margin: 0;
		padding-inline: 0;
	}
	.product-row-section__scroller .theme-product-card-wrap {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
		margin: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		scroll-snap-align: center;
		opacity: 1;
		transform: none;
	}
	.product-row-section__scroller .theme-product-card {
		width: calc(100% - 2rem);
		max-width: calc(100% - 2rem);
		margin-inline: auto;
		align-self: center;
	}
}
@media (min-width: 640px) and (max-width: 1023px) {
	.product-row-section__scroller { display: flex; }
	.product-row-section__scroller .theme-product-card-wrap { width: 40vw; flex-basis: 40vw; }
}
@media (min-width: 768px) and (max-width: 1023px) {
	.product-row-section__scroller .theme-product-card-wrap {
		width: calc((100% - 1.25rem) / 2);
		flex-basis: calc((100% - 1.25rem) / 2);
	}
}
@media (max-width: 1023px) {
	.product-row-section__scroller {
		margin: 0 -2rem; padding-left: 2rem; padding-right: 2rem;
	}
}
@media (max-width: 639px) {
	.product-row-section__scroller {
		margin: 0;
		padding-inline: 0;
	}
}
@media (min-width: 1024px) {
	.product-row-section__scroller {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: calc((100% - 4.5rem) / 4);
		gap: 1.5rem;
		margin: 0;
		padding-left: 0;
		padding-right: 0;
		overflow-x: auto;
		scroll-snap-type: x proximity;
	}
	.product-row-section__scroller .theme-product-card-wrap {
		width: auto;
		flex-basis: auto;
		max-width: none;
		min-width: 0;
	}
}

.category-tiles-section { background: var(--color-background); padding-bottom: 4rem; }
@media (min-width: 768px) { .category-tiles-section { padding-bottom: 6rem; } }
.category-tiles-section__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
@media (min-width: 768px) { .category-tiles-section__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.category-tile { position: relative; display: block; aspect-ratio: 4/5; overflow: hidden; background: var(--color-secondary); }
.category-tile__overlay { position: absolute; inset: 0; background: color-mix(in srgb, var(--color-foreground) 40%, transparent); transition: background 0.3s; }
.category-tile:hover .category-tile__overlay { background: color-mix(in srgb, var(--color-foreground) 55%, transparent); }
.category-tile:hover img { transform: scale(1.05); }
.category-tile img { transition: transform 0.7s; }
.category-tile__label-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.category-tile__label { font-family: var(--font-display); color: var(--dark-fg); font-size: 1.5rem; letter-spacing: -0.02em; text-transform: uppercase; text-align: center; padding: 0 1rem; }
@media (min-width: 768px) { .category-tile__label { font-size: 2.25rem; } }

/* Shared product card wrapper (Section 31.13 / 31.9) */
.theme-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.25rem; row-gap: 2.5rem; align-items: stretch; }
@media (min-width: 768px) { .theme-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .theme-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.theme-product-grid--related { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 2rem 2rem; }
@media (min-width: 640px) { .theme-product-grid--related { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .theme-product-grid--related { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.theme-product-card-wrap { display: flex; flex-direction: column; height: 100%; }
.theme-product-card-wrap.is-hidden-by-filter { display: none; }
.theme-product-card { display: flex; flex-direction: column; height: 100%; }
.theme-product-card__image-wrapper {
	position: relative;
	display: grid;
	width: 100%;
	min-height: 0;
	aspect-ratio: 1/1;
	background: color-mix(in srgb, var(--color-muted) 60%, transparent);
	overflow: hidden;
}
.theme-product-card__image-wrapper img,
.theme-product-card__image-wrapper .theme-product-card-img {
	grid-area: 1 / 1;
	width: 100%;
	height: 100% !important;
	max-width: none;
	max-height: 100%;
	object-fit: cover;
	object-position: center;
	align-self: stretch;
	justify-self: stretch;
}
.theme-product-card__badge {
	position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2;
	font-size: 0.625rem; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 600;
	background: color-mix(in srgb, var(--color-background) 90%, transparent);
	backdrop-filter: blur(4px);
	color: var(--color-foreground);
	padding: 0.375rem 0.75rem;
}
.theme-product-card-img { transition: opacity 0.5s, transform 0.5s; }
.theme-product-card:hover .theme-product-card-img { opacity: 0.9; transform: scale(1.05); }
.theme-product-card__info { flex: 1; padding-top: 1rem; text-align: center; }
.theme-product-card__title {
	font-family: var(--font-body); font-weight: 400; font-size: 0.8125rem;
	color: var(--color-foreground);
	overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
	transition: color 0.3s;
}
.theme-product-card:hover .theme-product-card__title { color: var(--color-primary); }
.theme-product-card__category { font-size: 0.6875rem; color: var(--color-muted-foreground); margin-top: 0.25rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.theme-product-card__price { font-size: 0.75rem; color: var(--color-foreground); margin-top: 0.25rem; }
.theme-product-card__price ins { text-decoration: none; }
.theme-product-card__price del { opacity: 0.5; margin-right: 0.35em; }

/* =========================================================================
 * 11. SHOP SECTION (dark)
 * ========================================================================= */

.shop-section.dark { background: var(--dark-bg); color: var(--dark-fg); padding: 3.5rem 0 5rem; }
@media (min-width: 1024px) { .shop-section.dark { padding: 5rem 0; } }
.shop-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.shop-section__title { font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.28em; text-transform: uppercase; }
@media (min-width: 640px) { .shop-section__title { font-size: 0.875rem; } }
.shop-section__count { font-size: 0.75rem; color: var(--dark-muted-foreground); }

.shop-section__controls { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 2.5rem; align-items: end; }
@media (min-width: 1024px) { .shop-section__controls { grid-template-columns: 1fr auto; gap: 2.5rem; } }
.shop-section__search { position: relative; max-width: 28rem; width: 100%; }
.shop-section__search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--dark-muted-foreground); }
.shop-section__search input {
	width: 100%; height: 2.75rem; padding: 0 0.75rem 0 2.5rem;
	background: var(--dark-bg); border: 1px solid var(--dark-border); border-radius: 0;
	color: var(--dark-fg); font-family: var(--font-body); font-size: 0.875rem;
}
.shop-section__search input::placeholder { color: var(--dark-muted-foreground); }
.shop-section__search input:focus { outline: none; border-color: var(--dark-fg); }
.shop-section__price { width: 100%; }
@media (min-width: 1024px) { .shop-section__price { width: 18rem; } }
.shop-section__price-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.shop-section__price-head span:first-child { font-size: 0.625rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--dark-muted-foreground); }
.shop-section__price-head span#theme-price-display { font-size: 0.75rem; color: var(--dark-fg); }

.price-range-wrapper { position: relative; height: 1.5rem; }
.range-track-bg, .range-track-fill { position: absolute; height: 4px; top: 50%; transform: translateY(-50%); pointer-events: none; border-radius: 2px; }
.range-track-bg { left: 0; right: 0; background: var(--dark-border); }
.range-track-fill { background: var(--dark-primary); }
.range-input {
	position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0;
	-webkit-appearance: none; appearance: none; background: transparent; pointer-events: none;
}
.range-input::-webkit-slider-thumb {
	-webkit-appearance: none; pointer-events: auto;
	width: 1.25rem; height: 1.25rem; border-radius: 50%;
	background: var(--dark-bg); border: 2px solid var(--dark-primary);
	cursor: pointer;
}
.range-input::-moz-range-thumb {
	pointer-events: auto; width: 1.1rem; height: 1.1rem; border-radius: 50%;
	background: var(--dark-bg); border: 2px solid var(--dark-primary); cursor: pointer;
}
.range-input--max { z-index: 3; }
.range-input--min { z-index: 4; }

.shop-section__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.5rem; }
.shop-chip {
	height: 2.25rem; padding: 0 1rem; display: inline-flex; align-items: center;
	font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500;
	border: 1px solid var(--dark-border);
	background: var(--dark-bg); color: var(--dark-fg);
	transition: border-color 0.3s, background 0.3s, color 0.3s;
}
.shop-chip:hover { border-color: var(--dark-fg); }
.shop-chip.is-active { background: var(--dark-fg); color: var(--dark-bg); border-color: var(--dark-fg); }

.shop-section.dark .theme-product-card-img { background: transparent; }
.shop-section.dark .theme-product-card__badge { background: color-mix(in srgb, var(--dark-bg) 90%, transparent); color: var(--dark-fg); }
.shop-section.dark .theme-product-card__title { color: var(--dark-fg); }
.shop-section.dark .theme-product-card:hover .theme-product-card__title { color: var(--dark-primary); }
.shop-section.dark .theme-product-card__category { color: var(--dark-muted-foreground); }
.shop-section.dark .theme-product-card__price { color: var(--dark-fg); }
.theme-shop-empty { text-align: center; padding: 4rem 0; font-size: 0.875rem; color: var(--dark-muted-foreground); }

/* =========================================================================
 * 12. ABOUT SECTION
 * ========================================================================= */

.about-section { background: color-mix(in srgb, var(--color-secondary) 50%, transparent); padding: 5rem 0; }
@media (min-width: 1024px) { .about-section { padding: 7rem 0; } }
.about-section__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .about-section__grid { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.about-section__media { position: relative; aspect-ratio: 1/1; overflow: hidden; }
.about-section .section-heading { font-size: 2.25rem; margin: 1rem 0 1.5rem; line-height: 1.2; text-transform: uppercase; }
@media (min-width: 768px) { .about-section .section-heading { font-size: 3rem; } }
.about-section__copy p { color: color-mix(in srgb, var(--color-foreground) 85%, transparent); line-height: 1.7; margin-bottom: 1rem; }
.about-section__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }

/* =========================================================================
 * 13. RACERS SECTION
 * ========================================================================= */

.racers-section { background: var(--dark-bg); color: var(--dark-fg); padding: 5rem 0; }
@media (min-width: 1024px) { .racers-section { padding: 7rem 0; } }
.racers-section__intro { max-width: 42rem; margin-bottom: 3rem; }
@media (min-width: 1024px) { .racers-section__intro { margin-bottom: 4rem; } }
.racers-section__eyebrow { color: var(--dark-primary); }
.racers-section .section-heading { font-size: 2.25rem; margin: 1rem 0 1.25rem; line-height: 1.2; text-transform: uppercase; }
@media (min-width: 768px) { .racers-section .section-heading { font-size: 3rem; } }
.racers-section__intro p { color: color-mix(in srgb, var(--dark-fg) 80%, transparent); line-height: 1.7; }
.racers-section__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .racers-section__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
.racer-card { border: 1px solid color-mix(in srgb, var(--dark-fg) 15%, transparent); background: color-mix(in srgb, var(--dark-fg) 5%, transparent); display: flex; flex-direction: column; }
.racer-card__image-wrap { position: relative; aspect-ratio: 4/5; overflow: hidden; }
.racer-card__number { position: absolute; top: 0; left: 0; font-family: var(--font-display); font-size: 1.5rem; background: var(--dark-primary); color: var(--color-button-text); padding: 0.25rem 0.75rem; line-height: 1; }
.racer-card__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
@media (min-width: 1024px) { .racer-card__body { padding: 1.75rem; } }
.racer-card__name { font-size: 1.5rem; text-transform: uppercase; line-height: 1; }
@media (min-width: 768px) { .racer-card__name { font-size: 1.875rem; } }
.racer-card__discipline { font-size: 0.6875rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dark-primary); font-weight: 600; margin-top: 0.75rem; }
.racer-card__hometown { font-size: 0.75rem; color: color-mix(in srgb, var(--dark-fg) 60%, transparent); margin-top: 0.25rem; }
.racer-card__bio { font-size: 0.875rem; color: color-mix(in srgb, var(--dark-fg) 80%, transparent); line-height: 1.7; margin-top: 1rem; }
.racer-card__highlights { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid color-mix(in srgb, var(--dark-fg) 15%, transparent); display: flex; flex-direction: column; gap: 0.5rem; }
.racer-card__highlights li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; color: color-mix(in srgb, var(--dark-fg) 80%, transparent); }
.racer-card__highlights li svg { margin-top: 0.2em; flex-shrink: 0; color: var(--dark-primary); }

/* =========================================================================
 * 14. CALENDAR + COUNTDOWN
 * ========================================================================= */

.calendar-section { position: relative; padding: 5rem 0; overflow: hidden; background: var(--dark-bg); }
@media (min-width: 1024px) { .calendar-section { padding: 7rem 0; } }
.calendar-section__bg { opacity: 0.4; }
.calendar-section__overlay { position: absolute; inset: 0; background: color-mix(in srgb, var(--dark-bg) 75%, transparent); }
.calendar-section__inner { position: relative; }
.calendar-section__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: flex-start; }
@media (min-width: 1024px) { .calendar-section__grid { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.calendar-section__eyebrow { color: var(--dark-primary); font-weight: 600; }
.calendar-section .section-heading { color: var(--dark-fg); font-size: 2.25rem; margin: 1rem 0 0.75rem; line-height: 1.2; text-transform: uppercase; }
@media (min-width: 768px) { .calendar-section .section-heading { font-size: 3rem; } }
.calendar-section__meta { font-size: 0.875rem; color: color-mix(in srgb, var(--dark-fg) 75%, transparent); margin-bottom: 2rem; }

.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; max-width: 28rem; }
@media (min-width: 640px) { .countdown { gap: 0.75rem; } }
.countdown__unit { border: 1px solid color-mix(in srgb, var(--dark-fg) 20%, transparent); background: color-mix(in srgb, var(--dark-fg) 5%, transparent); padding: 1rem 0.25rem; text-align: center; }
.countdown__value { display: block; font-family: var(--font-display); font-size: 1.875rem; color: var(--dark-fg); line-height: 1; font-variant-numeric: tabular-nums; }
@media (min-width: 640px) { .countdown__value { font-size: 2.25rem; } }
@media (min-width: 768px) { .countdown__value { font-size: 3rem; } }
.countdown__label { display: block; margin-top: 0.5rem; font-size: 0.625rem; letter-spacing: 0.24em; text-transform: uppercase; color: color-mix(in srgb, var(--dark-fg) 60%, transparent); }

.calendar-section__list-title { font-size: 0.6875rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 600; color: color-mix(in srgb, var(--dark-fg) 60%, transparent); margin-bottom: 1.5rem; }
.calendar-list__item { border-top: 1px solid color-mix(in srgb, var(--dark-fg) 15%, transparent); padding: 1.25rem 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem 1.5rem; transition: background 0.3s; }
.calendar-list__item.is-next { background: color-mix(in srgb, var(--dark-primary) 10%, transparent); padding-left: 1rem; padding-right: 1rem; margin: 0 -1rem; }
.calendar-list__date { min-width: 7rem; }
.calendar-list__date-day { font-family: var(--font-display); font-size: 1.25rem; color: var(--dark-fg); text-transform: uppercase; line-height: 1; }
.calendar-list__date-year { font-size: 0.625rem; letter-spacing: 0.24em; text-transform: uppercase; color: color-mix(in srgb, var(--dark-fg) 50%, transparent); margin-top: 0.25rem; }
.calendar-list__body { flex: 1; min-width: 12rem; }
.calendar-list__name { font-size: 0.875rem; font-weight: 600; color: var(--dark-fg); }
.calendar-list__circuit { font-size: 0.75rem; color: color-mix(in srgb, var(--dark-fg) 65%, transparent); margin-top: 0.25rem; display: flex; align-items: center; gap: 0.375rem; }
.calendar-list__status { font-size: 0.625rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dark-primary); margin-top: 0.5rem; display: flex; align-items: center; gap: 0.375rem; }

/* =========================================================================
 * 15. BRAND VOICE STATEMENTS
 * ========================================================================= */

.voice-section { background: var(--color-background); padding: 5rem 0; }
@media (min-width: 1024px) { .voice-section { padding: 7rem 0; } }
.voice-section__head { text-align: center; margin-bottom: 3rem; }
@media (min-width: 1024px) { .voice-section__head { margin-bottom: 4rem; } }
.voice-section .section-heading { font-size: 2.25rem; margin-top: 0.75rem; line-height: 1.2; text-transform: uppercase; }
@media (min-width: 768px) { .voice-section .section-heading { font-size: 3rem; } }
.voice-section__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .voice-section__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .voice-section__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
.voice-card {
	background: var(--color-secondary); border: 1px solid var(--color-border);
	padding: 1.5rem; display: flex; flex-direction: column; overflow: hidden;
	transition: transform 0.3s, box-shadow 0.3s;
}
@media (min-width: 768px) { .voice-card { padding: 1.75rem; } }
@media (min-width: 1024px) { .voice-card { padding: 2.5rem; } }
.voice-card:hover { transform: translateY(-0.5rem); box-shadow: var(--shadow-elevated); }
.voice-card blockquote {
	font-family: var(--font-display); font-size: 1.125rem; line-height: 1.35;
	margin: 0 0 1.5rem; text-transform: uppercase; overflow-wrap: anywhere;
}
@media (min-width: 768px) { .voice-card blockquote { font-size: 1.25rem; } }
@media (min-width: 1024px) { .voice-card blockquote { font-size: 1.5rem; } }
.voice-card figcaption { margin-top: auto; font-size: 0.75rem; color: var(--color-primary); font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; }

/* =========================================================================
 * 16. FAQ SECTION
 * ========================================================================= */

.faq-section { position: relative; padding: 5rem 0; border-top: 1px solid color-mix(in srgb, var(--dark-fg) 20%, transparent); overflow: hidden; background: var(--dark-bg); }
@media (min-width: 1024px) { .faq-section { padding: 7rem 0; } }
.faq-section__bg { opacity: 1; }
.faq-section__overlay { position: absolute; inset: 0; background: color-mix(in srgb, var(--color-foreground) 80%, transparent); }
.faq-section__grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
@media (min-width: 640px) { .faq-section__grid { gap: 3rem; } }
@media (min-width: 1024px) { .faq-section__grid { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.faq-section__intro { align-self: start; }
@media (min-width: 1024px) {
	.faq-section__intro { position: sticky; top: 8rem; }
}
.faq-section__list { min-width: 0; }
.faq-section__eyebrow { color: color-mix(in srgb, var(--dark-fg) 70%, transparent); }
.faq-section .section-heading { color: var(--dark-fg); font-size: 2.25rem; margin: 0.75rem 0; line-height: 1.2; text-transform: uppercase; }
@media (min-width: 768px) { .faq-section .section-heading { font-size: 3rem; } }
.faq-section__intro p { color: color-mix(in srgb, var(--dark-fg) 80%, transparent); line-height: 1.7; margin-top: 1.5rem; margin-bottom: 0; max-width: 28rem; }
@media (max-width: 1023px) {
	.faq-section .faq-item.reveal-item {
		opacity: 1;
		transform: none;
	}
}
.faq-item { border-bottom: 1px solid color-mix(in srgb, var(--dark-fg) 20%, transparent); }
.faq-item__question {
	width: 100%; display: flex; align-items: center; justify-content: space-between;
	text-align: left; padding: 1.25rem 0; gap: 1.5rem;
	font-weight: 600; font-size: 0.9375rem; color: var(--dark-fg);
	transition: color 0.3s;
}
@media (min-width: 768px) { .faq-item__question { font-size: 1rem; } }
.faq-item__question:hover { color: var(--dark-primary); }
.faq-item__icon { position: relative; flex-shrink: 0; width: 1rem; height: 1rem; }
.faq-item__icon-plus, .faq-item__icon-minus { position: absolute; inset: 0; display: flex; transition: opacity 0.2s, transform 0.2s; }
.faq-item__icon-minus { opacity: 0; transform: rotate(90deg); }
.faq-item[data-open="true"] .faq-item__icon-plus { opacity: 0; transform: rotate(-90deg); }
.faq-item[data-open="true"] .faq-item__icon-minus { opacity: 1; transform: rotate(0deg); }
.faq-item__answer { height: 0; opacity: 0; overflow: hidden; transition: height 0.35s var(--transition-smooth), opacity 0.35s var(--transition-smooth); }
.faq-item__answer p { font-size: 0.875rem; color: color-mix(in srgb, var(--dark-fg) 80%, transparent); line-height: 1.7; padding-bottom: 1.5rem; padding-right: 2.5rem; }

/* =========================================================================
 * 17. SPONSORSHIP
 * ========================================================================= */

.sponsorship-section { background: color-mix(in srgb, var(--color-secondary) 50%, transparent); padding: 5rem 0; border-top: 1px solid var(--color-border); }
@media (min-width: 1024px) { .sponsorship-section { padding: 7rem 0; } }
.sponsorship-section__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .sponsorship-section__grid { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.sponsorship-section .section-heading { font-size: 2.25rem; margin: 0.75rem 0 1.5rem; line-height: 1.2; text-transform: uppercase; }
@media (min-width: 768px) { .sponsorship-section .section-heading { font-size: 3rem; } }
.sponsorship-section__copy p { color: color-mix(in srgb, var(--color-foreground) 85%, transparent); line-height: 1.7; margin-bottom: 1rem; max-width: 36rem; }
.sponsorship-section__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; align-items: center; }
.sponsorship-section__follow { display: inline-flex; align-items: center; gap: 0.5rem; height: 2.75rem; padding: 0 2rem; border: 1px solid var(--color-foreground); font-size: 0.6875rem; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 600; transition: background 0.3s, color 0.3s; }
.sponsorship-section__follow:hover { background: var(--color-foreground); color: var(--color-background); }
.sponsorship-section__cards { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .sponsorship-section__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sponsorship-card { border: 1px solid var(--color-border); background: var(--color-background); padding: 1.5rem; }
.sponsorship-card h3 { font-size: 1.25rem; text-transform: uppercase; line-height: 1; margin-bottom: 0.75rem; }
.sponsorship-card p { font-size: 0.875rem; color: color-mix(in srgb, var(--color-foreground) 75%, transparent); line-height: 1.7; }

/* =========================================================================
 * 18. CONTACT SECTION
 * ========================================================================= */

.contact-section { background: var(--color-background); padding: 5rem 0; border-top: 1px solid var(--color-border); }
@media (min-width: 1024px) { .contact-section { padding: 7rem 0; } }
.contact-section__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 1024px) { .contact-section__grid { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.contact-section .section-heading { font-size: 2.25rem; margin: 0.75rem 0 1.5rem; line-height: 1.2; text-transform: uppercase; }
@media (min-width: 768px) { .contact-section .section-heading { font-size: 3rem; } }
.contact-section__copy p { color: color-mix(in srgb, var(--color-foreground) 85%, transparent); line-height: 1.7; margin-bottom: 2rem; max-width: 28rem; }
.contact-section__links { display: flex; flex-direction: column; gap: 1rem; }
.contact-section__links a { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; transition: color 0.3s; overflow-wrap: anywhere; }
.contact-section__links a:hover { color: var(--color-primary); }
.contact-section__side { position: relative; overflow: hidden; padding: 2rem; display: flex; flex-direction: column; justify-content: center; min-height: 20rem; }
@media (min-width: 1024px) { .contact-section__side { padding: 3rem; } }
.contact-section__side-overlay { position: absolute; inset: 0; background: color-mix(in srgb, var(--color-foreground) 70%, transparent); }
.contact-section__side-content { position: relative; z-index: 1; }
.contact-section__side-eyebrow { display: block; font-size: 0.625rem; letter-spacing: 0.36em; text-transform: uppercase; color: color-mix(in srgb, var(--dark-fg) 60%, transparent); margin-bottom: 0.75rem; }
.contact-section__side-content h3 { font-size: 1.5rem; color: var(--dark-fg); line-height: 1.25; margin-bottom: 1.5rem; text-transform: uppercase; }
@media (min-width: 768px) { .contact-section__side-content h3 { font-size: 1.875rem; } }
.contact-section__side-content p { font-size: 0.875rem; color: color-mix(in srgb, var(--dark-fg) 85%, transparent); line-height: 1.7; margin-bottom: 2rem; }

/* =========================================================================
 * 19. FOOTER
 * ========================================================================= */

.site-footer { background: var(--dark-bg); color: var(--dark-fg); }
.site-footer__inner { padding-block: 4rem 1rem; }
@media (min-width: 1024px) { .site-footer__inner { padding-block: 5rem 1.25rem; } }
.site-footer__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3rem; } }
.site-footer__tagline { margin-top: 1.5rem; max-width: 20rem; font-size: 0.875rem; line-height: 1.7; color: color-mix(in srgb, var(--dark-fg) 70%, transparent); }
.site-footer__heading { font-size: 0.6875rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 600; color: var(--dark-primary); margin-bottom: 1.25rem; }
.site-footer__list { display: flex; flex-direction: column; gap: 0.75rem; }
.site-footer__list a, .site-footer__list button { font-size: 0.875rem; color: color-mix(in srgb, var(--dark-fg) 70%, transparent); transition: color 0.3s; }
.site-footer__list button {
	padding: 0;
	margin: 0;
	font: inherit;
	text-align: left;
	display: inline;
	line-height: inherit;
	appearance: none;
	-webkit-appearance: none;
}
.site-footer__list a:hover, .site-footer__list button:hover { color: var(--dark-primary); }
.site-footer__list--contact li { display: flex; align-items: flex-start; }
.site-footer__list--contact a { display: flex; align-items: center; gap: 0.5rem; }
.site-footer__bottom { margin-top: 1rem; padding-top: 1.25rem; border-top: 1px solid color-mix(in srgb, var(--dark-fg) 15%, transparent); display: flex; flex-direction: column; align-items: center; gap: 1rem; }
@media (min-width: 640px) { .site-footer__bottom { flex-direction: row; justify-content: space-between; } }
.site-footer__copyright, .site-footer__credit { font-size: 0.625rem; letter-spacing: 0.28em; text-transform: uppercase; color: color-mix(in srgb, var(--dark-fg) 60%, transparent); }
.site-footer__credit a { text-decoration: underline; text-underline-offset: 4px; transition: color 0.3s; }
.site-footer__credit a:hover { color: var(--dark-primary); }

/* =========================================================================
 * 20. SITE IDENTITY / LOGO
 * Matches Lovable: header 1.5rem / md 1.75rem, footer 1.8rem, mobile menu 1.5rem.
 * ========================================================================= */

.site-logo-img {
	width: auto !important;
	max-width: none !important;
	object-fit: contain;
	display: block;
	flex-shrink: 0;
}

/* Header (all pages: home, PDP, cart, checkout) */
.site-header__brand .site-logo-img {
	height: var(--logo-height) !important;
	max-height: var(--logo-height) !important;
	filter: none;
}
@media (min-width: 768px) {
	.site-header__brand .site-logo-img {
		height: var(--logo-height-header-md) !important;
		max-height: var(--logo-height-header-md) !important;
	}
}

/* Mobile menu drawer */
.mobile-menu__header .site-logo-img {
	height: var(--logo-height) !important;
	max-height: var(--logo-height) !important;
}

/* Footer wordmark */
.site-footer__logo .site-logo-img,
.site-footer__col--brand .site-logo-img {
	height: var(--logo-height-footer) !important;
	max-height: var(--logo-height-footer) !important;
	filter: none;
}

.site-logo-text {
	line-height: var(--logo-height);
	display: block;
	font-family: var(--font-display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* Reinforce on WooCommerce templates where global img rules can leak */
body.woocommerce-cart .site-header__brand .site-logo-img,
body.woocommerce-checkout .site-header__brand .site-logo-img,
body.single-product .site-header__brand .site-logo-img,
body.theme-no-hero .site-header__brand .site-logo-img {
	height: var(--logo-height) !important;
	max-height: var(--logo-height) !important;
	width: auto !important;
}
@media (min-width: 768px) {
	body.woocommerce-cart .site-header__brand .site-logo-img,
	body.woocommerce-checkout .site-header__brand .site-logo-img,
	body.single-product .site-header__brand .site-logo-img,
	body.theme-no-hero .site-header__brand .site-logo-img {
		height: var(--logo-height-header-md) !important;
		max-height: var(--logo-height-header-md) !important;
	}
}

/* =========================================================================
 * 21. GENERIC PAGE / 404
 * ========================================================================= */

.theme-page__container { padding-top: calc(var(--header-height) + 2rem); padding-bottom: 4rem; }
.page-title { font-size: 2rem; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .page-title { font-size: 2.5rem; } }
.theme-404__inner { padding-top: calc(var(--header-height) + 4rem); padding-bottom: 6rem; text-align: center; }
.theme-404__inner h1 { font-size: 2rem; margin-bottom: 1rem; }
.theme-404__inner p { color: var(--color-muted-foreground); margin-bottom: 2rem; }
.theme-404__link { display: inline-flex; text-decoration: underline; color: var(--color-primary); }

/* =========================================================================
 * 22. WOOCOMMERCE — GLOBAL BUTTON OVERRIDE (Section 11.4.1)
 * ========================================================================= */

.single_add_to_cart_button.button,
.add_to_cart_button.button,
a.single_add_to_cart_button,
a.add_to_cart_button {
	background-color: var(--color-primary) !important;
	color: var(--color-button-text) !important;
	border: none !important;
	border-radius: var(--btn-radius) !important;
	min-height: var(--btn-height) !important;
	padding: var(--btn-padding) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-family: var(--font-body) !important;
	font-size: var(--btn-font-size) !important;
	font-weight: var(--btn-font-weight) !important;
	letter-spacing: var(--btn-letter-spacing) !important;
	text-transform: none !important;
	cursor: pointer !important;
	transition: opacity 0.2s ease !important;
}
.single_add_to_cart_button.button:hover,
.add_to_cart_button.button:hover {
	opacity: 0.85 !important;
	background-color: var(--color-primary) !important;
	color: var(--color-button-text) !important;
}
.single_add_to_cart_button.button:disabled,
.single_add_to_cart_button.button.disabled,
.add_to_cart_button.button:disabled,
.add_to_cart_button.button.disabled {
	cursor: not-allowed !important;
	opacity: 0.4 !important;
	pointer-events: none !important;
}
.single_add_to_cart_button.button:disabled:hover,
.single_add_to_cart_button.button.disabled:hover,
.add_to_cart_button.button:disabled:hover,
.add_to_cart_button.button.disabled:hover {
	opacity: 0.4 !important;
	background-color: var(--color-primary) !important;
}
.single-product .single_add_to_cart_button.loading::after,
.ajax_add_to_cart.loading::after { display: none !important; }

/* Hide "View cart" injected after AJAX add (Section 11.4.2) */
.woocommerce-page a.added_to_cart.wc-forward,
.single-product a.added_to_cart.wc-forward,
body a.added_to_cart.wc-forward { display: none !important; }

/* Cart drawer "pair with" compact button variant */
.theme-cart-drawer__pair-item.add_to_cart_button.ajax_add_to_cart {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	min-height: unset !important;
	height: auto !important;
	padding: 0 !important;
	background: transparent !important;
	color: var(--color-foreground) !important;
	text-transform: none !important;
}
.theme-cart-drawer__pair-item.add_to_cart_button.ajax_add_to_cart:hover { opacity: 1 !important; }

/* WooCommerce notices — scoped visibility (Section 14.1) */
.single-product .woocommerce-message,
.single-product .woocommerce-info { display: none; }
#theme-cart-drawer .woocommerce-message { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	font-family: var(--font-body); border-radius: 2px; border-top-color: var(--color-primary);
	padding: 1rem 1.5rem; font-size: 0.875rem;
}

/* =========================================================================
 * 23. SINGLE PRODUCT PAGE (ProductDetail.tsx parity)
 * ========================================================================= */

body.theme-no-hero .site-main.single-product-main {
	padding-top: 7rem !important;
	padding-bottom: 5rem;
}
@media (min-width: 1024px) {
	body.theme-no-hero .site-main.single-product-main {
		padding-top: 8rem !important;
	}
}

.single-product-page { padding-top: 0; }
.theme-single-product { max-width: 100%; background: var(--color-background); }
.theme-product-layout { display: grid; grid-template-columns: 1fr; align-items: start; min-width: 0; }
@media (min-width: 1024px) { .theme-product-layout { grid-template-columns: 1fr 440px; } }
@media (min-width: 1280px) { .theme-product-layout { grid-template-columns: 1fr 500px; } }

.theme-product-gallery, .theme-product-info { min-width: 0; max-width: 100%; }
.theme-product-gallery { position: relative; background: var(--color-background); }
@media (min-width: 1024px) { .theme-product-gallery { position: sticky; top: 8rem; align-self: flex-start; } }
.theme-product-gallery__row { display: flex; }
.theme-product-thumbnails--desktop { display: none; flex-direction: column; gap: 0.75rem; padding: 1.5rem; background: color-mix(in srgb, var(--color-background) 40%, transparent); }
@media (min-width: 768px) { .theme-product-thumbnails--desktop { display: flex; } }
.theme-thumb-btn { width: 3.5rem; height: 3.5rem; overflow: hidden; border: 1px solid transparent; border-radius: 4px; opacity: 0.6; transition: opacity 0.3s, border-color 0.3s; flex-shrink: 0; padding: 0; }
@media (min-width: 1024px) { .theme-thumb-btn { width: 4rem; height: 4rem; } }
.theme-thumb-btn img { width: 100%; height: 100%; object-fit: cover; display: block; position: static !important; }
.theme-thumb-btn:hover, .theme-thumb-btn.is-active { opacity: 1; border-color: var(--color-foreground); }
.theme-product-main-image { flex: 1; min-height: 60vh; display: flex; align-items: center; justify-content: center; }
@media (min-width: 768px) { .theme-product-main-image { min-height: 78vh; } }
@media (min-width: 1024px) { .theme-product-main-image { min-height: 88vh; } }
#product-main-img { position: static !important; width: 100%; height: 100%; max-height: 88vh; object-fit: contain; display: block; }

.theme-product-thumbnails--mobile { display: flex; gap: 0.5rem; padding: 1rem; overflow-x: auto; }
@media (min-width: 768px) { .theme-product-thumbnails--mobile { display: none; } }

.theme-product-info { padding: 2.5rem 1.5rem; }
@media (min-width: 768px) { .theme-product-info { padding: 2.5rem 2.5rem; } }
@media (min-width: 1024px) { .theme-product-info { padding: 4rem 3rem; } }
.theme-product-breadcrumb { font-size: 0.75rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-muted-foreground); margin-bottom: 1.5rem; }
.theme-product-breadcrumb a:hover { color: var(--color-foreground); }
.theme-product-breadcrumb span { margin: 0 0.5rem; }
.theme-product-title { font-family: var(--font-body); font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.5; margin: 0; }
@media (min-width: 768px) { .theme-product-title { font-size: 1rem; } }
.theme-product-sku { margin-top: 0.75rem; font-size: 0.75rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-muted-foreground); }
.theme-product-divider { height: 1px; background: var(--color-border); margin: 1.75rem 0; }
.theme-product-price { font-family: var(--font-body); font-size: 1.125rem; margin: 0; color: var(--color-foreground); }
.theme-product-note { margin-top: 1.75rem; background: color-mix(in srgb, var(--color-secondary) 70%, transparent); padding: 1rem 1.25rem; font-size: 0.8125rem; color: color-mix(in srgb, var(--color-foreground) 85%, transparent); line-height: 1.6; border-radius: 4px; }

.theme-attribute-group { margin-top: 1.75rem; }
.theme-attribute-label { font-size: 0.75rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-muted-foreground); margin-bottom: 0.75rem; }
.theme-attribute-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.theme-attr-pills--color { gap: 0.75rem; }
.theme-attr-pills--size .theme-pill-btn,
.theme-attr-pills--license .theme-pill-btn {
	min-width: 3.5rem; padding: 0.625rem 1rem; font-size: 0.75rem; letter-spacing: 0.05em;
	border: 1px solid var(--color-border); border-radius: 4px; background: transparent; color: var(--color-foreground);
}
.theme-attr-pills--size .theme-pill-btn.is-selected,
.theme-attr-pills--license .theme-pill-btn.is-selected {
	background: var(--color-foreground); color: var(--color-background); border-color: var(--color-foreground);
}
.theme-pill-btn { min-width: 3.5rem; padding: 0.625rem 1rem; font-size: 0.75rem; letter-spacing: 0.05em; border: 1px solid var(--color-border); border-radius: 4px; transition: all 0.2s; background: transparent; color: var(--color-foreground); }
.theme-pill-btn:hover { border-color: var(--color-foreground); }
.theme-color-swatch-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; min-width: 0; }
.theme-color-swatch-btn.is-selected { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 5%, transparent); }
.theme-color-swatch { width: 1.25rem; height: 1.25rem; border-radius: 50%; flex-shrink: 0; border: 1px solid color-mix(in srgb, var(--color-foreground) 15%, transparent); }
.theme-color-swatch-label { font-size: 0.75rem; letter-spacing: 0.05em; }
.theme-attr-select-hidden { display: none !important; }

.theme-pdp-atc { margin-top: 2rem; }
.theme-pdp-atc__btn {
	width: 100%; height: 3.5rem; display: flex; align-items: center; justify-content: center;
	font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase;
	background: var(--color-primary); color: var(--color-button-text); border: 1px solid var(--color-primary);
	transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.theme-pdp-atc__btn:hover:not(:disabled) { background: var(--color-foreground); color: var(--color-background); border-color: var(--color-foreground); }
.theme-pdp-atc__btn:disabled, .theme-pdp-atc__btn.disabled { opacity: 0.55; cursor: not-allowed; }

.theme-product-details { margin-top: 3rem; }
.theme-product-details__title { font-size: 0.75rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-foreground); margin: 0 0 1.25rem; }
.theme-product-details__lead { font-family: var(--font-display); font-size: 1.1875rem; line-height: 1.55; color: color-mix(in srgb, var(--color-foreground) 90%, transparent); margin: 0 0 1.5rem; white-space: pre-line; }
.theme-product-details__list { list-style: disc; padding-left: 1.25rem; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; font-family: var(--font-body); font-size: 0.875rem; color: color-mix(in srgb, var(--color-foreground) 80%, transparent); }
.theme-product-details__list li { line-height: 1.6; }
.theme-product-details__list li::marker { color: var(--color-primary); }

/* Hide leftover WC chrome on PDP */
.single-product .woocommerce-product-gallery,
.single-product .woocommerce-tabs,
.single-product .woocommerce-breadcrumb,
.single-product .product_meta,
.single-product .posted_in,
.single-product .woocommerce-product-details__short-description,
.single-product .woocommerce-variation-description,
.single-product .variations { display: none !important; }

.related-products-section { padding: 6rem 0; border-top: 1px solid var(--color-border); margin-top: 3rem; }
.related-products-section__head { margin-bottom: 3rem; }
.related-products-section__title { font-family: var(--font-display); font-size: 1.875rem; line-height: 1.2; margin: 0; }
@media (min-width: 768px) { .related-products-section__title { font-size: 2.25rem; } }
.related-products-section__title-accent { font-style: italic; color: var(--color-primary); }

.theme-related-grid { display: grid; grid-template-columns: 1fr; gap: 3rem 2rem; }
@media (min-width: 640px) { .theme-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .theme-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.theme-related-card__link { display: block; text-decoration: none; color: inherit; }
.theme-related-card__image { position: relative; aspect-ratio: 1 / 1; background: color-mix(in srgb, var(--color-muted) 40%, transparent); overflow: hidden; }
.theme-related-card__badge {
	position: absolute; top: 0.75rem; left: 0.75rem; z-index: 1;
	font-size: 0.625rem; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 600;
	background: color-mix(in srgb, var(--color-background) 90%, transparent); color: var(--color-foreground); padding: 0.375rem 0.75rem;
}
.theme-related-card__img { width: 100%; height: 100%; object-fit: cover; display: block; position: static !important; transition: opacity 0.5s, transform 0.5s; }
.theme-related-card__link:hover .theme-related-card__img { opacity: 0.9; transform: scale(1.05); }
.theme-related-card__body { padding-top: 1rem; text-align: center; }
.theme-related-card__title { font-family: var(--font-body); font-size: 0.8125rem; color: var(--color-foreground); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.2s; }
.theme-related-card__link:hover .theme-related-card__title { color: var(--color-primary); }
.theme-related-card__category { font-size: 0.6875rem; color: var(--color-muted-foreground); margin: 0.25rem 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-related-card__price { font-size: 0.75rem; color: var(--color-foreground); margin: 0.25rem 0 0; }

/* =========================================================================
 * 24. SHOP ARCHIVE PAGE (non-home)
 * ========================================================================= */

.theme-shop-archive { padding-top: var(--header-height); }
.theme-shop-archive .shop-section.dark { padding-top: 3rem; }

/* =========================================================================
 * 25. CART DRAWER
 * ========================================================================= */

#theme-cart-overlay {
	position: fixed; inset: 0; z-index: 96;
	background: color-mix(in srgb, var(--color-foreground) 30%, transparent);
	opacity: 0; visibility: hidden; transition: opacity 0.3s;
}
body.cart-open #theme-cart-overlay { opacity: 1; visibility: visible; }

#theme-cart-drawer {
	position: fixed; right: 0; top: 0; height: 100%; width: 100%; max-width: 32rem;
	background: var(--color-background); z-index: 97; box-shadow: var(--shadow-elevated);
	display: flex; flex-direction: column;
	transform: translateX(100%); transition: transform 0.4s var(--transition-smooth);
}
body.cart-open #theme-cart-drawer { transform: translateX(0); }
#theme-cart-drawer.is-updating { opacity: 0.6; pointer-events: none; }

.theme-cart-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 2rem 2rem 1.25rem; border-bottom: 1px solid var(--color-border); }
.theme-cart-drawer__title { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; }
.theme-cart-drawer__close { padding: 0.25rem; }
.theme-cart-drawer__close:hover { opacity: 0.6; }
.theme-cart-drawer__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; text-align: center; }
.theme-cart-drawer__empty-icon { color: var(--color-muted-foreground); margin-bottom: 1.25rem; }
.theme-cart-drawer__empty p { color: var(--color-muted-foreground); margin-bottom: 1.5rem; }
.theme-cart-drawer__items { flex: 1; overflow: auto; padding: 1.5rem 2rem; display: flex; flex-direction: column; gap: 2rem; }
.theme-cart-item { display: flex; gap: 1.25rem; }
.theme-cart-item__image {
	display: grid;
	width: 6rem;
	height: 8rem;
	background: var(--color-secondary);
	overflow: hidden;
	flex-shrink: 0;
}
.theme-cart-item__image img {
	grid-area: 1 / 1;
	width: 100%;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	object-position: center;
}
.theme-cart-item__info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.theme-cart-item__name { font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; display: block; }
.theme-cart-item__name:hover { opacity: 0.7; }
.theme-cart-item-meta { list-style: none; padding: 0; margin: 0.375rem 0 0; display: flex; flex-direction: column; gap: 0.25rem; }
.theme-cart-item-meta__row { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--color-muted-foreground); font-style: italic; }
.theme-cart-item-meta-swatch { width: 0.75rem; height: 0.75rem; border-radius: 50%; flex-shrink: 0; border: 1px solid color-mix(in srgb, var(--color-foreground) 15%, transparent); }
.theme-cart-item__variation { font-size: 0.75rem; color: var(--color-muted-foreground); margin-top: 0.375rem; font-style: italic; }
.theme-cart-item__price { font-size: 0.875rem; margin-top: 0.375rem; }
.theme-cart-item__controls { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 1rem; }
.theme-cart-item__qty { display: flex; align-items: center; border: 1px solid var(--color-border); }
.theme-cart-item__qty button { padding: 0.375rem 0.625rem; transition: background 0.2s; }
.theme-cart-item__qty button:hover { background: var(--color-secondary); }
.theme-cart-item__qty span { padding: 0 0.75rem; font-size: 0.875rem; min-width: 28px; text-align: center; }
.theme-cart-item__remove { font-size: 0.75rem; color: var(--color-muted-foreground); text-decoration: underline; text-underline-offset: 4px; }
.theme-cart-item__remove:hover { color: var(--color-foreground); }

.theme-cart-drawer__pair { padding-top: 1rem; border-top: 1px solid var(--color-border); }
.theme-cart-drawer__pair-title { font-family: var(--font-display); font-style: italic; font-size: 1.125rem; margin-bottom: 1rem; }
.theme-cart-drawer__pair-row { display: flex; gap: 0.75rem; overflow-x: auto; padding-bottom: 0.5rem; }
.theme-cart-drawer__pair-item { flex-shrink: 0; width: 8rem; text-align: left; }
.theme-cart-drawer__pair-image {
	display: grid;
	width: 100%;
	aspect-ratio: 3/4;
	background: var(--color-secondary);
	overflow: hidden;
	margin-bottom: 0.5rem;
}
.theme-cart-drawer__pair-image img {
	grid-area: 1 / 1;
	width: 100%;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	object-position: center;
	transition: transform 0.7s;
}
.theme-cart-drawer__pair-item:hover .theme-cart-drawer__pair-image img { transform: scale(1.05); }
.theme-cart-drawer__pair-name { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.theme-cart-drawer__pair-price { font-size: 0.75rem; color: var(--color-muted-foreground); margin-top: 0.125rem; display: block; }

.theme-cart-drawer__footer { padding: 1.5rem 2rem; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 1rem; }
.theme-cart-drawer__subtotal { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--font-display); font-size: 1.25rem; }
.theme-cart-drawer__note { font-size: 0.75rem; color: var(--color-muted-foreground); }
.theme-cart-drawer__checkout { width: 100%; }

/* =========================================================================
 * 26. WOOCOMMERCE CHECKOUT BLOCK OVERRIDES (Section 13)
 * ========================================================================= */

body.woocommerce-checkout .theme-checkout-main {
	padding-top: 0;
	padding-bottom: 4rem;
}

body.woocommerce-cart .site-main,
body.woocommerce-account .site-main { padding-top: var(--header-height); padding-bottom: 4rem; }

.theme-checkout-shell {
	padding-block: 0.5rem 4rem;
	width: 100%;
	max-width: none;
	box-sizing: border-box;
}

.theme-checkout-header {
	max-width: var(--checkout-max-width);
	width: 100%;
	margin-inline: auto;
	margin-bottom: 0;
	box-sizing: border-box;
	padding-inline: 1.5rem;
}
@media (min-width: 1024px) {
	.theme-checkout-header { padding-inline: 2.5rem; }
}

.checkout-continue-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: var(--color-muted-foreground);
	margin-bottom: 1rem;
	transition: color 0.2s;
}
.checkout-continue-link:hover { color: var(--color-foreground); }

.theme-checkout-title {
	font-family: var(--font-display);
	font-size: 1.875rem;
	margin: 0;
}
@media (min-width: 768px) { .theme-checkout-title { font-size: 2.25rem; } }

.theme-checkout-intro {
	margin: 0.75rem 0 0;
	color: var(--color-muted-foreground);
	font-size: 0.9375rem;
}

body.woocommerce-checkout .theme-checkout-main > .container-wide,
body.woocommerce-checkout .theme-checkout-shell,
body.woocommerce-checkout .theme-checkout-main .entry-content,
.entry-content:has(.wc-block-checkout) {
	max-width: none;
	width: 100%;
}

body.woocommerce-checkout .theme-checkout-main .entry-content,
.entry-content:has(.wc-block-checkout) {
	margin-top: 0;
	padding-top: 0;
}

body.woocommerce-checkout .theme-checkout-main .entry-content > .wc-block-checkout,
body.woocommerce-checkout .theme-checkout-main .entry-content > .wp-block-woocommerce-checkout,
.entry-content > .wc-block-checkout:first-child,
.entry-content > .wp-block-woocommerce-checkout:first-child {
	margin-top: 0;
}

body.woocommerce-checkout .wc-block-checkout,
.entry-content .wc-block-checkout,
body.woocommerce-checkout .wp-block-woocommerce-checkout,
.entry-content .wp-block-woocommerce-checkout {
	max-width: var(--checkout-max-width);
	width: 100%;
	margin-inline: auto;
	margin-top: 0;
	padding-top: 0;
	padding-inline: 1.5rem;
	min-width: 0;
	box-sizing: border-box;
	font-family: var(--font-body);
	color: var(--color-foreground);
}
@media (min-width: 1024px) {
	body.woocommerce-checkout .wc-block-checkout,
	.entry-content .wc-block-checkout,
	body.woocommerce-checkout .wp-block-woocommerce-checkout,
	.entry-content .wp-block-woocommerce-checkout {
		padding-inline: 2.5rem;
	}
}

body.woocommerce-checkout .wc-block-checkout.alignwide,
.entry-content .wc-block-checkout.alignwide {
	margin-top: 0;
}

body.woocommerce-checkout .wc-block-checkout__main,
body.woocommerce-checkout .wc-block-components-main,
.entry-content .wc-block-checkout__main,
.entry-content .wc-block-components-main {
	margin-top: 0;
	padding-top: 0;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-sidebar-layout,
body.woocommerce-checkout .wc-block-checkout .wc-block-checkout-sidebar-layout,
.entry-content .wc-block-checkout .wc-block-components-sidebar-layout,
.entry-content .wc-block-checkout .wc-block-checkout-sidebar-layout {
	margin-top: 0;
	padding-top: 0;
}

body.woocommerce-checkout .wc-block-checkout > .wc-block-components-notices:empty,
.entry-content .wc-block-checkout > .wc-block-components-notices:empty {
	display: none;
	margin: 0;
	padding: 0;
}

body.woocommerce-checkout .wc-block-components-notices,
.entry-content .wc-block-components-notices {
	max-width: var(--checkout-max-width);
	margin-inline: auto;
	width: 100%;
	box-sizing: border-box;
	margin-top: 0;
	padding-top: 0;
	margin-bottom: var(--checkout-gap);
}

@media (min-width: 768px) {
	body.woocommerce-checkout .wc-block-checkout .wc-block-components-sidebar-layout,
	body.woocommerce-checkout .wc-block-checkout .wc-block-checkout-sidebar-layout,
	.entry-content .wc-block-checkout .wc-block-components-sidebar-layout,
	.entry-content .wc-block-checkout .wc-block-checkout-sidebar-layout {
		display: grid !important;
		grid-template-columns: 1fr minmax(360px, 400px);
		gap: var(--checkout-gap);
		align-items: start;
		flex-direction: unset;
		flex-wrap: nowrap;
		margin: 0;
	}

	body.woocommerce-checkout .wc-block-checkout .wc-block-components-sidebar-layout .wc-block-checkout__main,
	body.woocommerce-checkout .wc-block-checkout .wc-block-components-sidebar-layout .wc-block-components-main,
	body.woocommerce-checkout .wc-block-checkout .wc-block-components-sidebar-layout .wc-block-checkout__sidebar,
	body.woocommerce-checkout .wc-block-checkout .wc-block-components-sidebar-layout .wc-block-components-sidebar,
	.entry-content .wc-block-checkout .wc-block-components-sidebar-layout .wc-block-checkout__main,
	.entry-content .wc-block-checkout .wc-block-components-sidebar-layout .wc-block-components-main,
	.entry-content .wc-block-checkout .wc-block-components-sidebar-layout .wc-block-checkout__sidebar,
	.entry-content .wc-block-checkout .wc-block-components-sidebar-layout .wc-block-components-sidebar {
		width: auto !important;
		max-width: 100%;
		min-width: 0;
		margin: 0 !important;
		padding: 0 !important;
		box-sizing: border-box;
	}

	body.woocommerce-checkout .wc-block-checkout:has(> .wc-block-checkout__main):has(> .wc-block-checkout__sidebar),
	.entry-content .wc-block-checkout:has(> .wc-block-checkout__main):has(> .wc-block-checkout__sidebar) {
		display: grid;
		grid-template-columns: 1fr minmax(360px, 400px);
		gap: var(--checkout-gap);
		align-items: start;
	}

	body.woocommerce-checkout .wc-block-checkout > .wc-block-components-notices,
	.entry-content .wc-block-checkout > .wc-block-components-notices {
		grid-column: 1 / -1;
	}
}

body.woocommerce-checkout .wc-block-checkout__sidebar,
body.woocommerce-checkout .wc-block-components-sidebar,
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block,
.entry-content .wc-block-checkout__sidebar,
.entry-content .wc-block-components-sidebar,
.entry-content .wp-block-woocommerce-checkout-totals-block {
	background: transparent;
	padding: 0;
	border-radius: 0;
}

body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block,
.entry-content .wp-block-woocommerce-checkout-order-summary-block {
	width: 100%;
	background-color: var(--color-secondary);
	border-radius: var(--card-radius);
	padding: var(--section-padding);
	box-sizing: border-box;
}

body.woocommerce-checkout .wc-block-components-text-input input,
body.woocommerce-checkout .wc-block-components-select select,
body.woocommerce-checkout .wc-block-components-textarea textarea,
.entry-content .wc-block-checkout .wc-block-components-text-input input,
.entry-content .wc-block-checkout .wc-block-components-select select,
.entry-content .wc-block-checkout .wc-block-components-textarea textarea {
	width: 100% !important;
	max-width: none !important;
	font-family: var(--font-body);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	background-color: var(--color-background);
	color: var(--color-foreground);
}
body.woocommerce-checkout .wc-block-components-text-input input:focus,
body.woocommerce-checkout .wc-block-components-select select:focus,
body.woocommerce-checkout .wc-block-components-textarea textarea:focus,
.entry-content .wc-block-checkout .wc-block-components-text-input input:focus,
.entry-content .wc-block-checkout .wc-block-components-select select:focus,
.entry-content .wc-block-checkout .wc-block-components-textarea textarea:focus {
	border-color: var(--color-primary);
}
body.woocommerce-checkout .wc-block-components-text-input input { padding: revert; }
body.woocommerce-checkout .wc-block-components-checkout-place-order-button,
.entry-content .wc-block-checkout .wc-block-components-checkout-place-order-button {
	background-color: var(--color-primary) !important;
	color: var(--color-button-text) !important;
	border-radius: var(--btn-radius) !important;
	font-family: var(--font-body) !important;
	letter-spacing: var(--btn-letter-spacing);
	text-transform: uppercase;
	font-size: var(--btn-font-size);
}
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover,
.entry-content .wc-block-checkout .wc-block-components-checkout-place-order-button:hover {
	opacity: 0.85;
}
body.woocommerce-checkout .wc-block-components-notice-banner,
.entry-content .wc-block-components-notice-banner {
	border-radius: 4px;
}

body.woocommerce-checkout .wc-block-checkout-empty,
.entry-content .wc-block-checkout-empty {
	margin-inline: auto;
	max-width: 36rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

body.woocommerce-checkout .wc-block-cart,
body.woocommerce-cart .wc-block-cart {
	font-family: var(--font-body);
	color: var(--color-foreground);
}

/* =========================================================================
 * 27. THANK YOU PAGE (Section 22.8)
 * ========================================================================= */

body.theme-thankyou-page { overflow-x: hidden; }
body.theme-thankyou-page .site-main { padding-top: var(--header-height); padding-bottom: 4rem; }
body.theme-thankyou-page .woocommerce-order { max-width: 48rem; margin: 0 auto; }
body.theme-thankyou-page .woocommerce-order h2,
body.theme-thankyou-page .woocommerce-order-details__title {
	font-family: var(--font-display); font-size: 1.5rem; padding: 0 0 1rem 0;
}
body.theme-thankyou-page .woocommerce-order-overview { display: flex; flex-wrap: wrap; gap: 1.5rem; list-style: none; padding: 0; margin: 1.5rem 0; }
body.theme-thankyou-page .woocommerce-order-overview li { border: 1px solid var(--color-border); padding: 0.75rem 1.25rem; font-size: 0.8125rem; }
body.theme-thankyou-page .woocommerce-customer-details { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem; }
body.theme-thankyou-page .woocommerce-customer-details address { max-width: 480px; overflow-wrap: break-word; border: 1px solid var(--color-border); padding: 1rem; font-style: normal; }
@media (min-width: 768px) {
	body.theme-thankyou-page .woocommerce-customer-details {
		display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start;
	}
	body.theme-thankyou-page .woocommerce-customer-details address { min-width: 0; max-width: none; }
}
body.theme-thankyou-page .woocommerce-order-details table { width: 100%; table-layout: fixed; margin-top: 1.5rem; }
body.theme-thankyou-page .woocommerce-order-details tfoot th { text-align: left; }
body.theme-thankyou-page .woocommerce-order-details tfoot td { text-align: right; }

/* =========================================================================
 * 28. IMAGE POINTER / OVERLAY SAFETY (Section 15.1 / 31.3)
 * ========================================================================= */

.theme-product-card__image-wrapper { position: relative; overflow: hidden; }

@media (max-width: 767px) {
	.site-header__link-btn.desktop-only { display: none !important; }
}

/* =========================================================================
 * 29. CLICKABLE CURSOR CONSISTENCY
 * ========================================================================= */

.theme-nav-list a,
.category-tile,
.theme-product-card,
.theme-product-card a,
.sponsorship-section__follow,
.site-footer__list a,
.site-footer__list button,
.mobile-menu__nav a,
.mobile-menu__contact-link,
.mobile-menu__action,
.theme-404__link,
.theme-section-link,
.faq-item__question,
.product-row-arrow,
.theme-thumb-btn,
.theme-pill-btn,
.search-dialog__categories button,
.search-dialog__close,
.search-dialog__overlay,
.contact-modal__overlay,
.contact-modal__close,
.site-header__menu-btn,
.site-header__link-btn,
.site-header__icon-btn,
.mobile-menu__close,
.mobile-menu__overlay,
[data-open-contact-modal],
[data-search-open],
[data-cart-open],
[data-mobile-menu-open],
[data-mobile-menu-close],
[data-contact-close],
[data-search-close],
[data-cart-close] {
	cursor: pointer;
}