/* ==========================================================================
   Blazin Caucasian theme stylesheet
   ========================================================================== */

/* ---------------- Design tokens ---------------- */
:root {
	--color-background: #f4f2f1;
	--color-foreground: #211e1c;
	--color-primary: #f3551b;
	--color-primary-foreground: #ffffff;
	--color-secondary: #eae6e1;
	--color-border: #d5d0cd;
	--color-purr: #ee2b8c;
	--color-purr-foreground: #ffffff;
	--color-dark-bg: #0a0a0a;
	--color-ivory: #f7f5f3;
	--color-linen: #eeebe7;
	--color-bone: #e5e0dc;

	--font-display: 'Bebas Neue', 'Barlow Condensed', sans-serif;
	--font-condensed: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	--font-body: 'Inter', system-ui, -apple-system, sans-serif;
	--font-graffiti: 'Luckiest Guy', 'Bebas Neue', cursive;
	--font-mono: 'Space Mono', 'Courier New', monospace;

	--logo-height: 56px;
	--header-height: 80px;
	--header-offset: calc(var(--header-height) + 2.75rem);
	--radius: 0.5rem;

	--btn-radius: 999px;
	--btn-height: 44px;
	--btn-padding: 0 1.75rem;
	--btn-font-size: 15px;
	--btn-font-weight: 500;
	--btn-letter-spacing: 0;
	--btn-text-transform: none;
	--btn-icon-padding: 0;

	--shadow-soft: 0 6px 24px -12px rgba(33, 26, 20, 0.18);
	--shadow-elevated: 0 24px 60px -24px rgba(33, 26, 20, 0.28);
}

.theme-dark {
	--color-background: #0a0a0a;
	--color-foreground: #ffffff;
	--color-secondary: #1a1a1a;
	--color-border: #383838;
}
.theme-dark, section.theme-dark {
	background-color: var(--color-dark-bg);
	color: #ffffff;
}
.theme-light {
	--color-background: #f5f4ef;
	--color-foreground: #1a1a1a;
	--color-secondary: #eeece8;
	--color-border: #d5d1cd;
}
.theme-light, section.theme-light {
	background-color: var(--color-background);
	color: var(--color-foreground);
}

/* ---------------- Reset ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: clip; }
html { scroll-behavior: smooth; }

body {
	margin: 0;
	background-color: var(--color-background);
	color: var(--color-foreground);
	font-family: var(--font-body);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: inherit;
	font-size: inherit;
	margin: 0;
}
.font-display, .font-display * {
	font-weight: inherit;
}
p { margin: 0; }
.text-accent { color: var(--color-primary); }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; background: none; border: none; padding: 0; }
a, button, summary, label[for], select,
input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"],
[role="button"], [data-anchor-link], [data-cart-open], .facade__hotspot, .product-thumb {
	cursor: pointer;
}
a { color: inherit; text-decoration: none; }
input, textarea, select { font-family: inherit; font-size: inherit; }

section[id] { scroll-margin-top: 96px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
}
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; }
.skip-link:focus { left: 0; background: #fff; color: #000; padding: 0.5rem 1rem; }

.container-wide {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 1.5rem;
}
@media (min-width: 1024px) { .container-wide { padding: 0 4rem; } }
.container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 1rem; }

/* Global image cover rule exclusions (Section 15.1). */
img:not(.cover-img):not(.hero-bg-img):not(.product-card-img) {
	max-width: 100%;
	height: auto;
}
.cover-img, .hero-bg-img, .product-card-img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}

/* ---------------- Motion utilities ---------------- */
.reveal-item {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1), transform 0.9s cubic-bezier(0.22,1,0.36,1);
	will-change: opacity, transform;
}
.reveal-item.is-visible { opacity: 1; transform: translateY(0); }

body.is-customizer .reveal-item,
body.is-customizer .theme-product-card-wrap { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
	.reveal-item { opacity: 1 !important; transform: none !important; transition: none !important; }
}

@keyframes marquee-scroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.marquee-track { width: max-content; animation: marquee-scroll 45s linear infinite; display: flex; }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

.tilt-card { transition: transform 0.45s cubic-bezier(0.22,1,0.36,1), box-shadow 0.45s ease, border-color 0.45s ease; }
.tilt-card:hover { transform: translate3d(0,-8px,0) rotate(0.75deg); }
.icon-pop { transition: transform 0.35s cubic-bezier(0.22,1,0.36,1); }
.press-scale { transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); }
.press-scale:hover { transform: scale(1.02); }
.press-scale:active { transform: scale(0.98); }

/* ---------------- Glass utilities ---------------- */
.glass-card {
	background: color-mix(in srgb, #ffffff 6%, transparent);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	border: 1px solid color-mix(in srgb, #ffffff 18%, transparent);
	box-shadow: 0 20px 60px -20px rgba(0,0,0,0.55);
	border-radius: 1rem;
	padding: 1.75rem;
}
.glass-input {
	background: color-mix(in srgb, #ffffff 8%, transparent);
	backdrop-filter: blur(10px);
	border: 1px solid color-mix(in srgb, #ffffff 22%, transparent);
	color: #fff;
	width: 100%;
	height: 48px;
	padding: 0 1rem 0 2.75rem;
	border-radius: 6px;
}
.glass-input::placeholder { color: rgba(255,255,255,0.55); }
.glass-input:focus { border-color: rgba(255,255,255,0.55); outline: none; }
.glass-button {
	background: rgba(255,255,255,0.92);
	color: #0a0a0a;
	border: 1px solid rgba(255,255,255,0.6);
	width: 100%; height: 48px; border-radius: 6px;
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	font-size: 14px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
}
.glass-button:hover { background: #fff; }

/* ---------------- Buttons ---------------- */
.btn-solid, .btn-outline, .btn-outline-light, .btn-ghost, .btn-hero-primary, .btn-hero-outline {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	border-radius: var(--btn-radius);
	height: var(--btn-height);
	padding: var(--btn-padding);
	font-size: var(--btn-font-size);
	font-weight: var(--btn-font-weight);
	font-family: var(--font-body);
	text-transform: var(--btn-text-transform);
	transition: opacity 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
	border: 1px solid transparent;
}
.btn-solid { background: var(--color-primary); color: #fff; }
.btn-solid:hover { opacity: 0.9; }
.btn-outline { background: transparent; color: var(--color-foreground); border-color: color-mix(in srgb, var(--color-foreground) 25%, transparent); }
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.btn-outline-light:hover { background: #fff; color: #000; }
.btn-ghost { background: transparent; color: color-mix(in srgb, var(--color-foreground) 60%, transparent); }

.btn-hero-primary, .btn-hero-outline {
	width: 100%;
	padding: 0.9rem 1.5rem;
	border-radius: 2px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-family: var(--font-condensed);
	font-size: 16px;
	font-weight: 700;
}
.btn-hero-primary {
	color: #fff;
	background: linear-gradient(180deg, hsl(10 88% 48%) 0%, hsl(6 86% 32%) 100%);
	border: 1px solid rgba(240,140,80,0.6);
	box-shadow: 0 10px 30px -10px rgba(255,80,0,0.7);
}
.btn-hero-primary:hover { box-shadow: 0 0 28px rgba(255,90,0,0.6); }
.btn-hero-outline {
	color: #fff;
	background: rgba(0,0,0,0.5);
	border: 1px solid rgba(255,255,255,0.35);
	backdrop-filter: blur(4px);
}
.btn-hero-outline:hover { background: #fff; color: #000; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 50;
	width: 100%;
	border-bottom: 1px solid transparent;
	background: transparent;
	transition: background-color 0.5s ease, border-color 0.5s ease;
}
.site-header.is-solid {
	background: rgba(10,10,10,0.85);
	backdrop-filter: blur(12px);
	border-bottom-color: rgba(255,255,255,0.1);
}
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .site-header { top: 46px; }
}
body.admin-bar #theme-cart-drawer { top: 32px; height: calc(100% - 32px); }
@media screen and (max-width: 782px) {
	body.admin-bar #theme-cart-drawer { top: 46px; height: calc(100% - 46px); }
}
.site-header__inner {
	position: relative;
	display: flex; align-items: center; justify-content: space-between;
	height: 80px;
	padding: 0 1rem;
	gap: 0.75rem;
}
@media (min-width: 1024px) {
	:root { --header-height: 96px; --header-offset: calc(96px + 3.25rem); }
	.site-header__inner { height: 96px; padding: 0 4rem; }
}

.site-header__left { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.site-header__menu-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 6px; color: #fff;
}
.site-header__menu-toggle:hover { background: rgba(255,255,255,0.1); }
@media (min-width: 1024px) { .site-header__menu-toggle { display: none; } }

.site-header__brand { display: flex; align-items: center; min-width: 0; }
@media (max-width: 1023px) {
	.site-header__brand {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 1;
		max-width: calc(100% - 8.5rem);
		justify-content: center;
	}
	.site-header__brand .site-logo-img { height: 2.75rem; max-height: 2.75rem; max-width: 9.5rem; }
}
.site-header__brand .site-logo-img { height: 3.5rem; max-height: 3.5rem; width: auto; max-width: 11.5rem; object-fit: contain; filter: drop-shadow(0 2px 12px rgba(0,0,0,0.55)); transition: transform 0.5s ease; flex: 0 0 auto; }
.site-header__brand:hover .site-logo-img { transform: scale(1.05); }
.site-header__brand .site-logo-text { font-family: var(--font-display); text-transform: uppercase; color: #fff; font-size: 1.5rem; }
.site-header__brand-text { margin-left: 0.5rem; color: #fff; font-family: var(--font-display); text-transform: uppercase; }

.site-header__nav { display: none; align-items: center; gap: 0.25rem; }
@media (min-width: 1024px) { .site-header__nav { display: flex; } }
.theme-nav-list { display: flex; align-items: center; gap: 0.25rem; }
.theme-nav-link, .theme-nav-list a {
	position: relative;
	padding: 0.5rem 0.9rem;
	font-size: 14px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase;
	color: rgba(255,255,255,0.75);
	border-radius: 4px;
	white-space: nowrap;
	transition: color 0.3s ease;
}
.theme-nav-link:hover, .theme-nav-list a:hover { color: #fff; }

.site-header__right { display: flex; align-items: center; }
.site-header__cart-btn {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 6px; color: #fff;
}
.site-header__cart-btn:hover { background: rgba(255,255,255,0.1); }
.theme-cart-count {
	position: absolute; top: -2px; right: -2px;
	min-width: 18px; height: 18px; padding: 0 4px;
	border-radius: 999px;
	background: var(--color-primary); color: #fff;
	font-size: 12px; font-weight: 500;
	display: inline-flex; align-items: center; justify-content: center;
}
.theme-cart-count:empty { display: none; }

.site-header__mobile-panel {
	display: none;
	border-top: 1px solid rgba(255,255,255,0.1);
	background: #0a0a0a;
}
.site-header__mobile-panel.is-open { display: block; }
.site-header__mobile-panel .theme-nav-list { flex-direction: column; align-items: stretch; padding: 0.5rem 1rem; gap: 0; }
.site-header__mobile-panel .theme-nav-link, .site-header__mobile-panel a {
	text-align: left; padding: 0.75rem 0; border-bottom: 1px solid rgba(255,255,255,0.1);
	color: rgba(255,255,255,0.85);
}
.site-header__mobile-panel li:last-child .theme-nav-link, .site-header__mobile-panel li:last-child a { border-bottom: none; }

/* Home hero fills viewport under fixed transparent header (Section 22.7). */
body:not(.theme-no-hero) main#main-content { padding-top: 0; }
body.theme-no-hero main#main-content:not(.single-product-page):not(.shop-archive-page) { padding-top: var(--header-offset); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { border-top: 1px solid var(--color-border); }
.site-footer__inner { padding-top: 3.5rem; padding-bottom: 5rem; }
@media (max-width: 1023px) {
	.site-footer .container-wide { padding-left: 2rem; padding-right: 2rem; }
}
.site-footer__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 640px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3rem; } }

.site-footer__brand .site-logo-img { height: 3.5rem; max-height: 3.5rem; width: auto; max-width: 11.5rem; object-fit: contain; }
.site-footer__blurb { margin-top: 1rem; font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.6; max-width: 280px; }
.site-footer__mantra { margin-top: 1rem; font-size: 13px; color: rgba(255,255,255,0.7); text-transform: uppercase; font-family: var(--font-display); letter-spacing: 0.02em; max-width: 280px; }

.site-footer__heading { font-family: var(--font-display); text-transform: uppercase; font-size: 1.125rem; margin-bottom: 1rem; }
.site-footer__list { display: flex; flex-direction: column; gap: 0.6rem; }
.site-footer__link { font-size: 13px; color: rgba(255,255,255,0.65); transition: color 0.3s ease; }
.site-footer__link:hover { color: var(--color-primary); }
.site-footer__contact-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 13px; color: rgba(255,255,255,0.75); overflow-wrap: anywhere; }
.site-footer__contact-link:hover { color: var(--color-primary); }
.site-footer__contact-icon { width: 1rem; height: 1rem; flex-shrink: 0; display: block; }

.site-footer__bottom {
	margin-top: 3.5rem; padding-top: 1.5rem;
	border-top: 1px solid var(--color-border);
	display: flex; flex-direction: column; gap: 0.75rem; align-items: center; justify-content: space-between;
}
@media (min-width: 640px) { .site-footer__bottom { flex-direction: row; } }
.site-footer__copyright { font-size: 13px; color: rgba(255,255,255,0.6); }
.site-footer__top-btn { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 13px; color: rgba(255,255,255,0.7); }
.site-footer__top-btn:hover { color: var(--color-primary); }
.site-footer__top-icon { width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--color-border); display: inline-flex; align-items: center; justify-content: center; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero-section { position: relative; min-height: 100vh; width: 100%; overflow: hidden; background: #0a0a0a; }
.hero-section__glow {
	position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(65% 40% at 80% 30%, rgba(255,90,10,0.34) 0%, rgba(255,60,0,0.10) 48%, rgba(0,0,0,0) 76%),
		radial-gradient(55% 35% at 6% 62%, rgba(255,70,0,0.22) 0%, rgba(0,0,0,0) 70%),
		radial-gradient(120% 55% at 50% 108%, rgba(255,50,0,0.20) 0%, rgba(0,0,0,0) 72%);
}
.hero-section__inner { position: relative; z-index: 10; padding: 5.5rem 1rem 2.5rem; }
@media (min-width: 1024px) {
	.hero-section__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: auto minmax(0, 1fr);
		column-gap: 2.5rem;
		row-gap: 0.5rem;
		align-items: stretch;
		padding: 6rem 4rem 2.5rem;
		max-width: 80rem;
		margin: 0 auto;
	}
}
@media (min-width: 1280px) {
	.hero-section__inner { column-gap: 3.5rem; padding-left: 6rem; padding-right: 6rem; }
}

.hero-section__wordmark { position: relative; max-width: 560px; margin: 0 auto; }
@media (min-width: 1024px) { .hero-section__wordmark { grid-column: 1; grid-row: 1; margin: 0; max-width: none; } }
.hero-section__logo-img { width: 100%; height: auto; object-fit: contain; }
.hero-section__banner {
	margin-top: 0.5rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
	border-radius: 3px; border: 1px solid rgba(255,255,255,0.15); padding: 0.4rem 0.5rem;
	background: linear-gradient(90deg, #0d1a0d 0%, #16260f 50%, #0d1a0d 100%);
}
.hero-section__flag { height: 24px; width: 36px; flex-shrink: 0; border-radius: 2px; }
.hero-section__banner-text { font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: 0.22em; font-size: 13px; color: #f0e6a8; white-space: nowrap; font-weight: 700; }
@media (min-width: 640px) { .hero-section__banner-text { font-size: 17px; } }

.hero-section__layout { position: relative; margin-top: 1rem; }
@media (min-width: 1024px) {
	.hero-section__layout { display: contents; margin-top: 0; }
}

.hero-section__portrait {
	position: absolute; right: -1rem; top: -0.5rem; bottom: 0; width: 58%; max-width: 330px;
	-webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 32%, #000 100%);
	mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 32%, #000 100%);
	pointer-events: none;
}
.hero-section__portrait-img { opacity: 0.95; object-position: 30% top; }
@media (min-width: 1024px) {
	.hero-section__portrait {
		position: relative; right: auto; top: auto; bottom: auto;
		grid-column: 2; grid-row: 1 / span 2;
		width: 100%; max-width: none; min-height: 720px;
		aspect-ratio: 538 / 893;
		align-self: stretch;
		background: rgba(0,0,0,0.4);
		-webkit-mask-image: none; mask-image: none;
		border-radius: 1rem; border: 1px solid rgba(255,255,255,0.15);
		box-shadow: 0 30px 80px -30px rgba(255,80,0,0.5);
		overflow: hidden;
	}
	.hero-section__portrait-img { opacity: 1; border-radius: 1rem; object-position: 30% top; }
}
@media (min-width: 1280px) {
	.hero-section__portrait { min-height: 860px; }
}

.hero-section__copy { position: relative; z-index: 10; }
@media (min-width: 1024px) {
	.hero-section__copy {
		grid-column: 1; grid-row: 2;
		display: flex; flex-direction: column; justify-content: space-between;
		min-height: 0; height: 100%;
	}
}

.hero-section__heading { font-family: var(--font-display); text-transform: uppercase; line-height: 0.86; letter-spacing: -0.01em; font-size: clamp(2rem, 11vw, 4.2rem); }
@media (min-width: 1024px) { .hero-section__heading { font-size: 4.2rem; } }
.hero-section__heading-line { display: block; }
.hero-section__heading-line--muted { color: rgba(255,255,255,0.95); }
.hero-section__heading-line--accent { color: var(--color-primary); text-shadow: 0 2px 16px rgba(255,60,0,0.55); }

.hero-section__paragraph { margin-top: 1rem; max-width: 58%; font-family: var(--font-body); font-size: 14px; line-height: 1.375; color: rgba(255,255,255,0.85); }
.hero-section__paragraph .text-accent { color: var(--color-primary); font-weight: 600; }
.hero-section__paragraph .text-strong { color: #fff; font-weight: 700; }
.hero-section__mantra .text-accent { color: var(--color-primary); }
@media (min-width: 640px) { .hero-section__paragraph { font-size: 15px; } }
@media (min-width: 1024px) { .hero-section__paragraph { max-width: 36rem; font-size: 16px; line-height: 1.625; margin-top: 0.5rem; } }
.hero-section__divider { margin-top: 1rem; height: 2px; width: 4rem; background: color-mix(in srgb, var(--color-primary) 80%, transparent); }
.hero-section__mantra { margin-top: 1rem; font-family: var(--font-condensed); text-transform: uppercase; font-size: 15px; font-weight: 600; letter-spacing: 0.025em; color: #fff; line-height: 1.25; max-width: 62%; }
@media (min-width: 640px) { .hero-section__mantra { font-size: 17px; } }
@media (min-width: 1024px) { .hero-section__mantra { max-width: none; margin-top: 0.5rem; } }
.hero-section__sig-intro { margin-top: 0.75rem; color: #fff; font-size: 19px; font-style: italic; font-weight: 600; }
.hero-section__sig-name { color: var(--color-primary); font-size: 30px; line-height: 1.2; font-weight: 900; text-transform: uppercase; text-shadow: 0 2px 14px rgba(255,60,0,0.45); }
@media (min-width: 640px) { .hero-section__sig-intro { font-size: 22px; } .hero-section__sig-name { font-size: 36px; } }

.hero-section__ctas { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; max-width: 28rem; }

/* ==========================================================================
   About
   ========================================================================== */
.about-section { position: relative; overflow: hidden; padding: 5rem 0; background-color: #171310; }
.about-section__bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: grayscale(1) brightness(1.5) contrast(1.05); }
.about-section__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,17,14,0.45) 0%, rgba(20,17,14,0.35) 45%, rgba(20,17,14,0.6) 100%); }
.about-section__inner { position: relative; max-width: 48rem; margin: 0 auto; text-align: center; }

.about-section__lockup { user-select: none; }
.about-section__graffiti { font-family: var(--font-graffiti); text-transform: uppercase; line-height: 0.9; letter-spacing: 0.01em; margin: 0; }
.about-section__graffiti--dark { color: #fff; -webkit-text-stroke: 6px hsl(24 10% 6%); paint-order: stroke fill; text-shadow: 0 6px 0 hsla(24,10%,6%,0.75); font-size: 16vw; }
.about-section__graffiti--light { color: var(--color-primary); -webkit-text-stroke: 6px #fff; paint-order: stroke fill; text-shadow: 0 6px 0 hsla(24,10%,6%,0.6); font-size: 15vw; }
.about-section__graffiti--aka { color: var(--color-primary); font-size: 6vw; margin-top: -0.25rem; }
.about-section__graffiti--rot-neg { transform: rotate(-2deg); }
.about-section__graffiti--rot-pos { transform: rotate(1deg); }
@media (min-width: 640px) { .about-section__graffiti--dark { font-size: 5.5rem; } .about-section__graffiti--light { font-size: 5rem; } .about-section__graffiti--aka { font-size: 2rem; } }

.about-section__kicker-label { margin-top: 1rem; display: flex; align-items: center; justify-content: center; gap: 0.75rem; font-family: var(--font-graffiti); color: #fff; font-size: 1.25rem; letter-spacing: 0.12em; }
.about-section__rule { height: 3px; width: 1.5rem; background: #fff; }

.about-section__body { margin-top: 2.5rem; text-align: left; font-family: var(--font-mono); font-size: 12px; line-height: 1.9; text-transform: uppercase; color: rgba(255,255,255,0.9); max-width: 36rem; margin-left: auto; margin-right: auto; }
@media (min-width: 640px) { .about-section__body { font-size: 14px; } }
.about-section__body :is(span) { color: var(--color-primary); }

.about-section__statement { margin-top: 2.5rem; }
.about-section__statement-line { font-family: var(--font-graffiti); color: #fff; font-size: 1.125rem; line-height: 1.2; }
@media (min-width: 640px) { .about-section__statement-line { font-size: 1.5rem; } }
.about-section__statement-rule { margin-top: 0.75rem; margin-left: auto; margin-right: auto; display: block; height: 3px; width: 10rem; background: var(--color-primary); }
.about-section__punchlines { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; font-family: var(--font-graffiti); line-height: 1.05; color: #fff; font-size: 1.5rem; }
.about-section__punchlines span { color: var(--color-primary); }
.about-section__punchline-final { font-size: 13vw; line-height: 1; padding-top: 0.25rem; }
.about-section__punchline-final .text-accent { text-decoration: underline; text-decoration-color: var(--color-primary); text-decoration-thickness: 6px; text-underline-offset: 10px; }
@media (min-width: 640px) { .about-section__punchlines { font-size: 2.5rem; } .about-section__punchline-final { font-size: 3.75rem; } }

.about-section__card { margin-top: 3.5rem; border-radius: 1rem; border: 1px solid rgba(255,255,255,0.1); background: rgba(28,23,18,0.85); padding: 1.5rem 2rem; backdrop-filter: blur(4px); transition: transform 0.4s ease, border-color 0.4s ease; }
.about-section__card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--color-primary) 50%, transparent); }
.about-section__card-kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.45em; text-transform: uppercase; color: var(--color-primary); }
.about-section__card-text { margin-top: 0.75rem; font-family: var(--font-mono); font-size: 13px; line-height: 1.625; text-transform: uppercase; color: rgba(255,255,255,0.9); }
@media (min-width: 640px) { .about-section__card-text { font-size: 16px; } }

/* ==========================================================================
   Mantra marquee
   ========================================================================== */
.mantra-section { position: relative; overflow: hidden; padding: 2.25rem 0; }
.mantra-section__fade { position: absolute; inset-block: 0; width: 6rem; z-index: 1; pointer-events: none; }
.mantra-section__fade--left { left: 0; background: linear-gradient(to right, #111, transparent); }
.mantra-section__fade--right { right: 0; background: linear-gradient(to left, #111, transparent); }
.mantra-section__track { align-items: center; gap: 3rem; white-space: nowrap; }
.mantra-section__item { display: flex; align-items: center; gap: 3rem; flex-shrink: 0; }
.mantra-section__phrase { font-family: var(--font-display); text-transform: uppercase; line-height: 1; color: #e5e5e5; font-size: clamp(1.44rem, 3.84vw, 3.2rem); }
.mantra-section__dot { display: inline-block; border-radius: 999px; background: var(--color-primary); width: 8px; height: 8px; flex-shrink: 0; }

/* ==========================================================================
   Shop / Facade
   ========================================================================== */
.shop-section { position: relative; overflow: hidden; background: hsl(240 12% 4%); padding: 4rem 0; }
.shop-section__header-wrap { margin-bottom: 2.5rem; }
.shop-section__header { max-width: 48rem; margin: 0 auto; text-align: center; }
.shop-section__kicker { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.35em; color: hsl(268 90% 72%); }
.shop-section__heading { font-family: var(--font-display); margin-top: 0.75rem; font-size: 2.5rem; line-height: 1; color: #fff; }
@media (min-width: 640px) { .shop-section__heading { font-size: 3.75rem; } }
.shop-section__subheading { margin-top: 1rem; font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.7); }

.shop-section__facades { display: flex; flex-direction: column; gap: 3.5rem; padding: 0 0.5rem; }
.facade { position: relative; width: 100%; max-width: 72rem; margin: 0 auto; }
.facade__frame { position: relative; width: 100%; }
.facade__img { user-select: none; }
.facade__hotspot { position: absolute; display: block; }
.facade__hotspot-ring { position: absolute; inset: 0; border-radius: 2px; box-shadow: 0 0 0 0 transparent; transition: box-shadow 0.3s ease; }
.facade__hotspot--violet:hover .facade__hotspot-ring, .facade__hotspot--violet:focus-visible .facade__hotspot-ring { box-shadow: inset 0 0 0 2px hsl(268 90% 66%), 0 0 28px 6px hsla(268,90%,66%,0.55); }
.facade__hotspot--pink:hover .facade__hotspot-ring, .facade__hotspot--pink:focus-visible .facade__hotspot-ring { box-shadow: inset 0 0 0 2px hsl(325 95% 62%), 0 0 28px 6px hsla(325,95%,62%,0.55); }
.facade__hotspot-label {
	pointer-events: none; position: absolute; left: 50%; bottom: 0.75rem; z-index: 20;
	transform: translate(-50%, 0.5rem);
	white-space: nowrap; border-radius: 999px; border: 1px solid rgba(168,85,247,0.5);
	background: rgba(0,0,0,0.8); text-align: center; font-family: var(--font-display); font-weight: 900;
	text-transform: uppercase; color: #fff; box-shadow: 0 0 12px rgba(168,85,247,0.3); backdrop-filter: blur(6px);
	padding: 0.35rem 1rem; font-size: 13px; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease;
}
@media (min-width: 768px) { .facade__hotspot:hover .facade__hotspot-label, .facade__hotspot:focus-visible .facade__hotspot-label { opacity: 1; transform: translate(-50%, 0); } }

/* ==========================================================================
   Waitlist / Drop List
   ========================================================================== */
.waitlist-section { position: relative; padding: 7rem 0; overflow: hidden; background-size: cover; background-position: center; }
.waitlist-section__scrim { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.75) 100%); }
.waitlist-section__grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; min-height: 480px; }
@media (min-width: 1024px) { .waitlist-section__grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.waitlist-section__kicker { font-size: 13px; letter-spacing: 0.42em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 1.25rem; text-shadow: 0 1px 8px rgba(0,0,0,0.6); }
.waitlist-section__heading { font-family: var(--font-condensed); text-transform: uppercase; color: #fff; line-height: 1.05; font-size: 2.25rem; text-shadow: 0 2px 20px rgba(0,0,0,0.55); }
@media (min-width: 1024px) { .waitlist-section__heading { font-size: 3.4rem; } }
.waitlist-section__heading .text-accent { color: var(--color-primary); }
.waitlist-section__paragraph { margin-top: 1.5rem; font-family: var(--font-body); font-size: 15px; line-height: 1.75; color: rgba(255,255,255,0.85); max-width: 28rem; text-shadow: 0 1px 10px rgba(0,0,0,0.55); }
.waitlist-section__quote { margin-top: 1.5rem; font-family: var(--font-condensed); text-transform: uppercase; font-size: 18px; color: rgba(255,255,255,0.9); max-width: 28rem; text-shadow: 0 1px 10px rgba(0,0,0,0.6); }
.waitlist-section__form-wrap { display: flex; justify-content: center; }
@media (min-width: 1024px) { .waitlist-section__form-wrap { justify-content: flex-end; } }
.waitlist-form { width: 100%; max-width: 28rem; }
.waitlist-form__kicker { font-size: 12px; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 0.75rem; }
.waitlist-form__heading { color: #fff; font-family: var(--font-condensed); text-transform: uppercase; font-size: 24px; line-height: 1.2; margin-bottom: 1.5rem; }
.waitlist-form__label { display: block; font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.65); margin-bottom: 0.5rem; }
.waitlist-form__field { position: relative; margin-bottom: 1rem; }
.waitlist-form__icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,0.6); }
.waitlist-form__submit { margin-top: 0.25rem; }
.waitlist-form__disclaimer { margin-top: 1.25rem; font-size: 12px; letter-spacing: 0.02em; color: rgba(255,255,255,0.55); text-align: center; }

/* ==========================================================================
   Services
   ========================================================================== */
.services-section { position: relative; overflow: hidden; padding: 6rem 0; }
.services-section__dots { position: absolute; inset: 0; pointer-events: none; opacity: 0.05; background-image: radial-gradient(rgba(255,255,255,0.7) 1px, transparent 1px); background-size: 26px 26px; }
.services-section__inner { position: relative; z-index: 1; }
.services-section__intro { max-width: 40rem; }
.services-section__kicker { font-size: 15px; letter-spacing: 0.4em; text-transform: uppercase; color: color-mix(in srgb, #fff 60%, transparent); margin-bottom: 1rem; font-weight: 500; }
.services-section__heading { font-family: var(--font-display); text-transform: uppercase; font-size: 2.25rem; line-height: 1.05; color: #fff; }
@media (min-width: 1024px) { .services-section__heading { font-size: 3.4rem; } }
.services-section__heading .text-accent { color: var(--color-primary); }
.services-section__paragraph { margin-top: 1.25rem; font-family: var(--font-body); font-size: 15px; line-height: 1.625; color: rgba(255,255,255,0.7); }

.services-section__grid { margin-top: 3.5rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .services-section__grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.service-card { border-radius: 1rem; padding: 1px; opacity: 0.9; }
.service-card:hover { opacity: 1; }
.service-card--1 { background: linear-gradient(135deg, #ff7a18, #ff3d77, #ff9a3d); }
.service-card--1:hover { box-shadow: 0 0 28px rgba(255,100,0,0.42); }
.service-card--2 { background: linear-gradient(135deg, #22d3ee, #6366f1, #a855f7); }
.service-card--2:hover { box-shadow: 0 0 28px rgba(99,102,241,0.42); }
.service-card--3 { background: linear-gradient(135deg, #10b981, #84cc16, #facc15); }
.service-card--3:hover { box-shadow: 0 0 28px rgba(16,185,129,0.42); }
.service-card__inner { height: 100%; border-radius: 1rem; background: #0b0b0b; padding: 1.75rem; display: flex; flex-direction: column; }
.service-card__icon-wrap { position: relative; width: 3.5rem; height: 3.5rem; margin-bottom: 1.5rem; }
.service-card__icon { position: relative; width: 3.5rem; height: 3.5rem; border-radius: 0.75rem; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.service-card--1 .service-card__icon { background: linear-gradient(135deg, #ff7a18, #ff3d77, #ff9a3d); }
.service-card--2 .service-card__icon { background: linear-gradient(135deg, #22d3ee, #6366f1, #a855f7); }
.service-card--3 .service-card__icon { background: linear-gradient(135deg, #10b981, #84cc16, #facc15); }
.service-card__badge {
	position: absolute; right: -0.5rem; bottom: -0.5rem; z-index: 1;
	width: 1.75rem; height: 1.75rem; border-radius: 0.5rem;
	background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
	display: inline-flex; align-items: center; justify-content: center; color: #fff;
	transition: transform 0.3s ease;
}
.service-card__badge svg { width: 0.875rem; height: 0.875rem; }
.service-card:hover .service-card__badge { transform: rotate(12deg) scale(1.1); }
.service-card__title { font-family: var(--font-condensed); text-transform: uppercase; font-size: 1.5rem; line-height: 1.15; color: #fff; }
.service-card__text { margin-top: 0.75rem; font-family: var(--font-body); font-size: 15px; line-height: 1.625; color: rgba(255,255,255,0.7); }

.services-section__ctas { margin-top: 3rem; display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) { .services-section__ctas { flex-direction: row; gap: 1rem; } }

/* ==========================================================================
   Music
   ========================================================================== */
.music-section { position: relative; overflow: hidden; padding: 6rem 0; }
.music-section__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 45% at 12% 0%, rgba(255,90,0,0.2) 0%, transparent 65%), radial-gradient(55% 45% at 90% 100%, rgba(168,85,247,0.18) 0%, transparent 65%); }
.music-section__dots { position: absolute; inset: 0; pointer-events: none; opacity: 0.05; background-image: radial-gradient(rgba(255,255,255,0.7) 1px, transparent 1px); background-size: 26px 26px; }
.music-section__inner { position: relative; z-index: 1; }
.music-section__kicker { font-size: 15px; font-weight: 500; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 1rem; }
.music-section__heading { font-family: var(--font-display); text-transform: uppercase; font-size: 2.25rem; line-height: 1.05; color: #fff; }
@media (min-width: 1024px) { .music-section__heading { font-size: 3.4rem; } }
.music-section__heading .text-accent { color: var(--color-primary); }
.music-section__subheading { margin-top: 1.25rem; font-family: var(--font-body); font-size: 15px; line-height: 1.625; color: rgba(255,255,255,0.7); }

.music-section__releases { margin-top: 4rem; }
.music-section__group-heading { display: flex; align-items: center; gap: 0.75rem; }
.music-section__group-heading h3 { font-family: var(--font-condensed); text-transform: uppercase; font-size: 1.5rem; letter-spacing: 0.02em; color: #fff; }
.music-section__group-icon { color: var(--color-primary); }
.music-section__group-heading--violet .music-section__group-icon { color: hsl(268 90% 66%); }

.music-releases-grid { margin-top: 1.75rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .music-releases-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.music-release-card { border-radius: 1rem; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); padding: 1.25rem; backdrop-filter: blur(4px); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.music-release-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--color-primary) 50%, transparent); box-shadow: 0 0 30px rgba(255,90,0,0.22); }
.music-release-card__art { aspect-ratio: 1/1; overflow: hidden; border-radius: 0.75rem; border: 1px solid rgba(255,255,255,0.1); background: #000; padding: 1.25rem; }
.music-release-card__art img { width: 100%; height: 100%; object-fit: contain; }
.music-release-card__tag { margin-top: 1.25rem; font-size: 12px; text-transform: uppercase; letter-spacing: 0.3em; color: rgba(255,255,255,0.5); }
.music-release-card__title { font-family: var(--font-condensed); margin-top: 0.25rem; font-size: 1.5rem; text-transform: uppercase; color: #fff; }
.music-release-card__player { margin-top: 1rem; }
.music-release-card__buy {
	margin-top: 1.25rem; display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: 0.5rem;
	border-radius: 2px; border: 1px solid rgba(240,150,90,0.6); padding: 0.75rem 1.25rem;
	font-family: var(--font-condensed); font-size: 15px; text-transform: uppercase; letter-spacing: 0.2em;
	color: #fff; background: linear-gradient(180deg, hsl(10 88% 48%) 0%, hsl(6 86% 32%) 100%);
	transition: box-shadow 0.3s ease;
}
.music-release-card__buy:hover { box-shadow: 0 0 26px rgba(255,90,0,0.6); }

.track-player__toggle {
	flex-shrink: 0; width: 44px; height: 44px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
	color: #fff; background: linear-gradient(135deg, hsl(10 88% 48%), hsl(28 92% 52%)); box-shadow: 0 0 22px rgba(255,90,0,0.45);
	transition: transform 0.3s ease;
}
.track-player__toggle:hover { transform: scale(1.1); }
.track-player__toggle:disabled,
.is-coming-soon .track-player__toggle { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.is-coming-soon .track-player__bar { cursor: default; pointer-events: none; }
[data-track-player] { display: flex; align-items: center; gap: 1rem; }
[data-accent="violet"] .track-player__toggle { background: linear-gradient(135deg, hsl(268 90% 60%), hsl(325 95% 58%)); box-shadow: 0 0 22px rgba(168,85,247,0.45); }
.track-player__bar-wrap { flex: 1; min-width: 0; }
.track-player__bar { height: 6px; width: 100%; border-radius: 999px; background: rgba(255,255,255,0.12); overflow: hidden; cursor: pointer; }
.track-player__bar-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, hsl(16 88% 50%), hsl(32 95% 58%)); }
[data-accent="violet"] .track-player__bar-fill { background: linear-gradient(90deg, hsl(268 90% 66%), hsl(325 95% 62%)); }
.track-player__time { margin-top: 0.5rem; display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,0.5); }

.music-section__showcase { margin-top: 5rem; }
.music-section__showcase-paragraph { margin-top: 0.75rem; max-width: 36rem; font-family: var(--font-body); font-size: 15px; line-height: 1.625; color: rgba(255,255,255,0.6); }
.music-showcase-list { margin-top: 1.75rem; border-radius: 1rem; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); overflow: hidden; }
.music-showcase-row { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; border-bottom: 1px solid rgba(255,255,255,0.1); transition: background-color 0.3s ease; }
.music-showcase-row:last-child { border-bottom: none; }
.music-showcase-row:hover { background: rgba(255,255,255,0.05); }
@media (min-width: 640px) { .music-showcase-row { flex-direction: row; align-items: center; gap: 2rem; } }
.music-showcase-row__meta { display: flex; min-width: 0; align-items: center; gap: 1rem; }
@media (min-width: 640px) { .music-showcase-row__meta { width: 33%; } }
.music-showcase-row__num { font-family: var(--font-mono); font-size: 13px; color: rgba(255,255,255,0.35); }
.music-showcase-row__title { font-family: var(--font-condensed); text-transform: uppercase; font-size: 1.25rem; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-showcase-row__note { font-size: 12px; text-transform: uppercase; letter-spacing: 0.25em; color: rgba(255,255,255,0.45); }
.music-showcase-row__player { flex: 1; min-width: 0; }

/* ==========================================================================
   Pre-contact CTA
   ========================================================================== */
.precontact-section { position: relative; overflow: hidden; background: #000; color: #fff; min-height: 70vh; display: flex; align-items: center; }
@media (min-width: 768px) { .precontact-section { min-height: 80vh; } }
.precontact-section__video { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.precontact-section__scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.precontact-section__dots { position: absolute; inset: 0; pointer-events: none; opacity: 0.08; background-image: radial-gradient(rgba(255,255,255,0.6) 1px, transparent 1px); background-size: 22px 22px; }
.precontact-section__inner { position: relative; z-index: 1; padding: 6rem 0; text-align: center; text-shadow: 0 2px 8px rgba(0,0,0,0.5); }
.precontact-section__kicker { display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; font-size: 15px; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(255,255,255,0.85); margin-bottom: 1.5rem; font-weight: 500; }
.precontact-section__heading { font-family: var(--font-display); text-transform: uppercase; line-height: 1; letter-spacing: -0.01em; margin: 0 auto; max-width: 56rem; font-size: clamp(2rem, 5.6vw, 4.2rem); }
.precontact-section__paragraph { margin: 1.75rem auto 0; max-width: 32rem; font-family: var(--font-body); font-size: 15px; line-height: 1.625; color: rgba(255,255,255,0.85); }
.precontact-section__cta { margin-top: 2.5rem; text-shadow: none; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-section { padding: 6rem 0 4rem; }
.contact-section__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: stretch; }
@media (min-width: 1024px) { .contact-section__grid { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.contact-section__touchpoints { display: flex; flex-direction: column; height: 100%; }
.contact-section__kicker { font-size: 15px; letter-spacing: 0.4em; text-transform: uppercase; color: color-mix(in srgb, var(--color-foreground) 60%, transparent); margin-bottom: 1rem; font-weight: 500; }
.contact-section__heading { font-family: var(--font-display); text-transform: uppercase; font-size: 2.25rem; line-height: 1.05; color: var(--color-foreground); }
@media (min-width: 1024px) { .contact-section__heading { font-size: 3.4rem; } }
.contact-section__heading .text-accent { color: var(--color-primary); }
.contact-section__paragraph { margin-top: 1.5rem; font-family: var(--font-body); font-size: 15px; line-height: 1.625; color: color-mix(in srgb, var(--color-foreground) 65%, transparent); max-width: 28rem; }

.contact-section__list { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.contact-section__touch-link { display: inline-flex; align-items: center; gap: 1rem; color: var(--color-foreground); transition: color 0.3s ease; }
.contact-section__touch-link:hover { color: var(--color-primary); }
.contact-section__touch-icon { width: 44px; height: 44px; border-radius: 999px; background: var(--color-secondary); border: 1px solid var(--color-border); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color 0.3s ease; }
.contact-section__touch-icon svg { display: block; width: 16px; height: 16px; }
.contact-section__touch-link:hover .contact-section__touch-icon { border-color: var(--color-primary); }
.contact-section__touch-text { display: flex; flex-direction: column; text-align: left; }
.contact-section__touch-label { font-size: 15px; letter-spacing: 0.24em; text-transform: uppercase; color: color-mix(in srgb, var(--color-foreground) 55%, transparent); }
.contact-section__touch-value { font-size: 15px; font-weight: 500; }

.contact-section__quote-card { margin-top: auto; padding-top: 2.5rem; position: relative; border-radius: 1rem; border: 1px solid var(--color-border); background: var(--color-secondary); padding: 2.5rem 1.5rem; text-align: center; overflow: hidden; }
.contact-section__quote-mark { position: absolute; top: 0.75rem; left: 1.25rem; font-family: var(--font-display); line-height: 1; color: color-mix(in srgb, var(--color-primary) 25%, transparent); font-size: 5rem; user-select: none; }
.contact-section__quote-rule { margin: 0 auto 1.25rem; display: block; height: 1px; width: 2.5rem; background: color-mix(in srgb, var(--color-primary) 40%, transparent); }
.contact-section__quote-card blockquote { font-family: var(--font-display); text-transform: uppercase; color: color-mix(in srgb, var(--color-foreground) 90%, transparent); line-height: 1.2; font-size: 18px; max-width: 28rem; margin: 0 auto; }
.contact-section__quote-card figcaption { margin-top: 1.5rem; font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; color: color-mix(in srgb, var(--color-foreground) 55%, transparent); font-weight: 500; }

.contact-section__form { background: var(--color-secondary); border: 1px solid var(--color-border); border-radius: 1rem; padding: 1.75rem; box-shadow: var(--shadow-soft); height: 100%; display: flex; flex-direction: column; gap: 1rem; }
.contact-section__form-fields { flex: 1; display: flex; flex-direction: column; gap: 1rem; }
.contact-section__form-row { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .contact-section__form-row { grid-template-columns: 1fr 1fr; } }
.contact-section__form label { display: block; font-size: 15px; letter-spacing: 0.24em; text-transform: uppercase; color: color-mix(in srgb, var(--color-foreground) 55%, transparent); margin-bottom: 0.5rem; }
.contact-section__form input, .contact-section__form select, .contact-section__form textarea {
	width: 100%; height: 48px; padding: 0 1rem; background: var(--color-background);
	border: 1px solid var(--color-border); border-radius: 6px; font-size: 15px; color: var(--color-foreground);
}
.contact-section__form input::placeholder, .contact-section__form textarea::placeholder { color: color-mix(in srgb, var(--color-foreground) 45%, transparent); }
.contact-section__form input:focus, .contact-section__form select:focus, .contact-section__form textarea:focus { outline: none; border-color: var(--color-primary); }
.contact-section__form textarea { height: auto; padding: 0.75rem 1rem; resize: none; }
.contact-section__select-wrap { position: relative; }
.contact-section__select-wrap select { appearance: none; padding-right: 2.5rem; }
.contact-section__select-caret { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: color-mix(in srgb, var(--color-foreground) 55%, transparent); }
.contact-section__form-footer { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 0.5rem; }
.contact-section__submit { width: 100%; }
.contact-section__disclaimer { font-size: 15px; text-align: center; color: color-mix(in srgb, var(--color-foreground) 55%, transparent); }

/* ==========================================================================
   Logo Vault
   ========================================================================== */
.vault-section { padding: 6rem 0; overflow: hidden; }
.vault-section__kicker { font-size: 15px; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 1rem; font-weight: 500; }
.vault-section__heading { font-family: var(--font-display); text-transform: uppercase; font-size: 2.25rem; line-height: 1.05; color: #fff; }
@media (min-width: 768px) { .vault-section__heading { font-size: 3rem; } }
.vault-section__heading .text-accent { color: var(--color-primary); }
.vault-section__paragraph { margin-top: 1.25rem; font-family: var(--font-body); font-size: 15px; line-height: 1.625; color: rgba(255,255,255,0.7); max-width: 36rem; }

.vault-section__marquee-wrap { margin-top: 3rem; position: relative; }
.vault-section__fade { position: absolute; inset-block: 0; width: 4rem; z-index: 10; pointer-events: none; }
.vault-section__fade--left { left: 0; background: linear-gradient(to right, #0a0a0a, transparent); }
.vault-section__fade--right { right: 0; background: linear-gradient(to left, #0a0a0a, transparent); }
.vault-section__track { gap: 1.5rem; padding: 0 1.5rem; }
.vault-frame { flex-shrink: 0; width: 260px; }
@media (min-width: 640px) { .vault-frame { width: 300px; } }
.vault-frame__border { border-radius: 1rem; padding: 1px; background: linear-gradient(135deg, #ff7a18, #a855f7); opacity: 0.8; transition: opacity 0.3s ease, box-shadow 0.3s ease, transform 0.45s ease; }
.vault-frame:hover .vault-frame__border { opacity: 1; box-shadow: 0 0 28px rgba(255,100,0,0.28); transform: translateY(-8px); }
.vault-frame__panel { border-radius: 1rem; background: #101010; padding: 1.5rem; display: flex; align-items: center; justify-content: center; height: 170px; overflow: hidden; }
.vault-frame__panel--light { background: #fff; }
.vault-frame__panel img { max-height: 120px; max-width: 100%; width: auto; object-fit: contain; }
.vault-frame__label { margin-top: 0.75rem; font-size: 13px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.55); }

/* ==========================================================================
   Generic content / 404
   ========================================================================== */
.generic-content { padding: var(--header-offset) 0 4rem; min-height: 60vh; }
.generic-content__inner .page-title { font-family: var(--font-display); text-transform: uppercase; font-size: 2.5rem; margin-bottom: 1.5rem; }
.not-found-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--color-secondary); }
.not-found-page__inner { text-align: center; }
.not-found-page__code { font-size: 3rem; font-weight: 700; margin-bottom: 1rem; }
.not-found-page__text { font-size: 1.25rem; color: color-mix(in srgb, var(--color-foreground) 65%, transparent); margin-bottom: 1rem; }
.not-found-page__link { color: var(--color-primary); text-decoration: underline; }

/* ==========================================================================
   WooCommerce: single product
   ========================================================================== */
.single-product-page { padding: calc(96px + 2.75rem) 0 4rem; background: var(--color-ivory); }
@media (min-width: 1024px) { .single-product-page { padding-top: calc(96px + 3.25rem); } }
.back-to-shop-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 15px; color: color-mix(in srgb, var(--color-foreground) 65%, transparent); margin-bottom: 1rem; }
.back-to-shop-link:hover { color: var(--color-primary); }
.product-breadcrumb { padding: 0.5rem 0 1.5rem; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: color-mix(in srgb, var(--color-foreground) 55%, transparent); }
.product-breadcrumb a:hover { color: var(--color-primary); }
.product-breadcrumb span { margin: 0 0.4rem; }

.theme-product-layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding-bottom: 5rem; align-items: flex-start; min-width: 0; }
@media (min-width: 1024px) { .theme-product-layout { grid-template-columns: 7fr 5fr; gap: 4rem; } }
.theme-product-gallery, .theme-product-info { min-width: 0; max-width: 100%; }

.theme-product-thumbnails-main { position: relative; aspect-ratio: 1/1; width: 100%; background: var(--color-linen); border-radius: 0.75rem; overflow: hidden; margin-bottom: 1rem; }
.theme-product-thumbnails { display: flex; flex-wrap: wrap; gap: 0.6rem; max-width: 100%; }
.product-thumb { width: calc(20% - 0.5rem); aspect-ratio: 1/1; background: var(--color-linen); border-radius: 6px; overflow: hidden; border: 2px solid transparent; position: relative; }
.product-thumb.is-active { border-color: var(--color-primary); }
.product-thumb:not(.is-active):hover { border-color: color-mix(in srgb, var(--color-foreground) 20%, transparent); }

.product-category { font-size: 15px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 0.75rem; font-weight: 500; }
.product-title { font-family: var(--font-body); font-weight: 600; font-size: 1.75rem; line-height: 1.1; color: var(--color-foreground); margin-bottom: 1rem; }
@media (min-width: 1024px) { .product-title { font-size: 2.2rem; } }
.product-price { font-size: 20px; font-weight: 500; color: color-mix(in srgb, var(--color-foreground) 90%, transparent); margin-bottom: 1.25rem; }
.stock-indicator--out { display: inline-block; margin-bottom: 1.25rem; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primary); }
.product-description { font-size: 15px; line-height: 1.7; color: color-mix(in srgb, var(--color-foreground) 75%, transparent); margin-bottom: 1.5rem; overflow-wrap: break-word; word-break: break-word; }

.theme-quantity-wrapper { display: inline-flex; align-items: center; border: 1px solid color-mix(in srgb, var(--color-foreground) 20%, transparent); border-radius: 999px; height: var(--btn-height); }
.theme-qty-minus, .theme-qty-plus { padding: 0 1rem; height: 100%; display: inline-flex; align-items: center; justify-content: center; color: var(--color-foreground); }
.theme-qty-minus:hover, .theme-qty-plus:hover { color: var(--color-primary); }
.theme-qty-input { width: 3rem; text-align: center; border: none; background: transparent; font-size: 15px; font-weight: 500; -moz-appearance: textfield; }
.theme-qty-input::-webkit-outer-spin-button, .theme-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.product-details { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent); }
.product-details__label { font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: color-mix(in srgb, var(--color-foreground) 55%, transparent); margin-bottom: 0.85rem; font-weight: 600; }
.product-details__content, .product-details__content ul { font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: color-mix(in srgb, var(--color-foreground) 72%, transparent); overflow-wrap: break-word; word-break: break-word; }
.product-details__content ul { list-style: disc; margin: 0; padding-left: 1.15rem; display: flex; flex-direction: column; gap: 0.625rem; }
.product-details__content li { padding-left: 0.15rem; }
.product-details__content li::marker { color: var(--color-primary); }

.product-assurances {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
}
.product-assurances__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 0.55rem;
	text-align: center;
	min-width: 0;
	color: color-mix(in srgb, var(--color-foreground) 70%, transparent);
}
.product-assurances__item svg { flex-shrink: 0; color: var(--color-primary); }
.product-assurances__item span {
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.3;
}

.related-products-section { padding-top: 3rem; border-top: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent); }
.related-products-section__header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 2.5rem; }
.related-products-section__header h2 { font-family: var(--font-display); font-size: 1.75rem; color: var(--color-foreground); }
@media (min-width: 768px) { .related-products-section__header h2 { font-size: 2.25rem; } }
.related-products-section__view-all { display: none; align-items: center; gap: 0.4rem; font-size: 15px; font-weight: 500; color: color-mix(in srgb, var(--color-foreground) 70%, transparent); }
@media (min-width: 640px) { .related-products-section__view-all { display: inline-flex; } }
.related-products-section__view-all:hover { color: var(--color-primary); }

.single-product .woocommerce-product-details__short-description,
.single-product .woocommerce-variation-description,
.single-product .posted_in { overflow-wrap: break-word; word-break: break-word; }

/* Variations table layout */
.single-product .variations.shop_attributes tbody,
.single-product .variations tbody tr,
.single-product .variations tbody td { display: block; width: 100%; }
.single-product .variations tbody td.label { padding-bottom: 0.55rem; font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: color-mix(in srgb, var(--color-foreground) 55%, transparent); }
.single-product .variations tbody td.value { position: relative; padding-top: 0; margin-bottom: 1.15rem; }
.single-product .variations select.theme-variation-select {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}
.theme-variation-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.theme-variation-option {
	min-height: 40px;
	padding: 0 0.95rem;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--color-foreground) 18%, transparent);
	background: transparent;
	color: var(--color-foreground);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.theme-variation-option:hover:not(:disabled) { border-color: var(--color-foreground); }
.theme-variation-option.is-selected {
	background: var(--color-foreground);
	border-color: var(--color-foreground);
	color: var(--color-ivory);
}
.theme-variation-option.is-disabled,
.theme-variation-option:disabled {
	opacity: 0.35;
	cursor: not-allowed;
	text-decoration: line-through;
}

/* Quantity + button row */
.single-product .theme-add-to-cart-area, .theme-add-to-cart-area {
	display: flex; align-items: stretch; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem;
}
.single-product .single_add_to_cart_button, .theme-add-to-cart-area .single_add_to_cart_button { flex: 1 1 auto; min-width: 160px; }

/* Add to cart button style 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: #fff !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;
	gap: 0.5rem !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: var(--btn-text-transform) !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: #fff !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;
}
.ajax_add_to_cart.theme-btn-loading { opacity: 0.6 !important; pointer-events: none !important; cursor: wait !important; }
.single-product .single_add_to_cart_button.loading::after,
.ajax_add_to_cart.loading::after { display: none !important; }

/* Card compact button variant (scoped, after globals) */
.theme-product-card .add_to_cart_button.ajax_add_to_cart {
	min-height: 40px !important;
	padding: 0 1rem !important;
	border-radius: 999px !important;
	font-size: 13px !important;
	gap: 0.4rem !important;
}

/* Hide native "View cart" injected after AJAX add */
.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; }

/* Scoped WooCommerce notices */
.single-product .woocommerce-message,
.single-product .woocommerce-info { display: none; }
#theme-cart-drawer .woocommerce-message { display: none; }
.woocommerce-error { display: block; margin: 1rem 0; padding: 1rem; border-radius: 6px; background: #fde8e8; color: #7a2020; font-size: 14px; }

/* ==========================================================================
   WooCommerce: shop archive + product cards
   ========================================================================== */
.shop-archive-page { padding: var(--header-offset) 0 5rem; }
.shop-archive-page__header { margin-bottom: 2rem; }
.shop-archive-page__header .page-title { font-family: var(--font-display); text-transform: uppercase; font-size: 2.5rem; }
.shop-archive-page__empty { padding: 3rem 0; text-align: center; font-size: 1rem; color: color-mix(in srgb, var(--color-foreground) 60%, transparent); }

.theme-product-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0,1fr));
	gap: 1.5rem 1.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)); gap: 1.5rem 2rem; } }

.theme-product-card-wrap { display: flex; }
.theme-product-card { position: relative; display: flex; flex-direction: column; height: 100%; width: 100%; }

.theme-card-link { position: absolute; inset: 0; z-index: 2; pointer-events: auto; }
.theme-product-card *:not(.theme-card-link) { pointer-events: none; }
.theme-product-card__add, .theme-product-card__quick-add { pointer-events: auto; }

.theme-product-card__image-wrapper {
	position: relative; aspect-ratio: 1/1; border-radius: 0.5rem; overflow: hidden;
	background: linear-gradient(to bottom, var(--color-linen), var(--color-bone));
	border: 2px solid var(--color-border);
	margin-bottom: 1rem;
	transition: border-color 0.5s ease, box-shadow 0.5s ease;
}
.theme-product-card:hover .theme-product-card__image-wrapper { border-color: color-mix(in srgb, var(--color-foreground) 40%, transparent); }
.theme-product-card-wrap--purr .theme-product-card__image-wrapper { border-color: color-mix(in srgb, var(--color-purr) 50%, transparent); }
.theme-product-card-wrap--purr:hover .theme-product-card__image-wrapper { border-color: var(--color-purr); box-shadow: 0 0 30px -6px color-mix(in srgb, var(--color-purr) 50%, transparent); }
.theme-product-card__image { padding: 2rem; background: none; object-fit: contain; transition: transform 0.7s cubic-bezier(0.22,0.61,0.36,1); }
.theme-product-card:hover .theme-product-card__image { transform: scale(1.05); }

.theme-product-card__badge { position: absolute; z-index: 3; font-size: 12px; font-weight: 600; padding: 0.3rem 0.7rem; border-radius: 999px; }
.theme-product-card__badge--soldout { top: 0.75rem; left: 0.75rem; background: var(--color-primary); color: #fff; }
.theme-product-card__badge--purr { top: 0.75rem; right: 0.75rem; background: var(--color-purr); color: #fff; text-transform: uppercase; letter-spacing: 0.18em; box-shadow: 0 0 18px -2px color-mix(in srgb, var(--color-purr) 70%, transparent); }

.theme-product-card__quick-actions {
	position: absolute; z-index: 3; left: 0.75rem; right: 0.75rem; bottom: 0.75rem;
	display: flex; align-items: center; gap: 0.5rem;
	opacity: 0; transform: translateY(0.5rem);
	transition: opacity 0.5s ease, transform 0.5s ease;
}
@media (min-width: 768px) { .theme-product-card:hover .theme-product-card__quick-actions { opacity: 1; transform: translateY(0); } }
@media (max-width: 767px) { .theme-product-card__quick-actions { opacity: 1; transform: none; } }
.theme-product-card__add {
	flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
	height: 40px; border-radius: 999px; font-size: 13px; font-weight: 500;
}

.theme-product-card__info { flex: 1; padding: 0 0.1rem; }
.theme-product-card__category { font-size: 13px; text-transform: uppercase; letter-spacing: 0.22em; color: color-mix(in srgb, var(--color-primary) 80%, transparent); margin-bottom: 0.4rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-product-card-wrap--purr .theme-product-card__category { color: color-mix(in srgb, var(--color-purr) 90%, transparent); }
.theme-product-card__category a { color: inherit; }
.theme-product-card__title { font-family: var(--font-display); text-transform: uppercase; font-size: 1.2rem; line-height: 1.25; color: var(--color-foreground); transition: color 0.3s ease; }
.theme-product-card:hover .theme-product-card__title { color: var(--color-primary); }
.theme-product-card-wrap--purr:hover .theme-product-card__title { color: var(--color-purr); }
.theme-product-card__price { margin-top: 0.4rem; font-size: 15px; font-weight: 500; color: var(--color-primary); }
.theme-product-card-wrap--purr .theme-product-card__price { color: var(--color-purr); }
.theme-product-card__price del { opacity: 0.5; margin-right: 0.4rem; }

/* ==========================================================================
   Side cart drawer + overlay
   ========================================================================== */
#theme-cart-overlay {
	position: fixed; inset: 0; z-index: 55; background: color-mix(in srgb, var(--color-foreground) 30%, transparent);
	opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
body.cart-open #theme-cart-overlay { opacity: 1; pointer-events: auto; }

#theme-cart-drawer {
	position: fixed; top: 0; right: 0; height: 100%; width: 100%; max-width: 28rem; z-index: 60;
	background: var(--color-ivory); box-shadow: var(--shadow-elevated);
	display: flex; flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.45s cubic-bezier(0.22,1,0.36,1);
}
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: 1.5rem; border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent); }
.theme-cart-drawer__header h2 { font-family: var(--font-display); font-size: 1.5rem; }
.theme-cart-drawer__close { padding: 0.4rem; border-radius: 999px; }
.theme-cart-drawer__close:hover { background: color-mix(in srgb, var(--color-foreground) 6%, transparent); }

.theme-cart-drawer__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; text-align: center; color: color-mix(in srgb, var(--color-foreground) 65%, transparent); }
.theme-cart-drawer__empty svg { margin-bottom: 1rem; opacity: 0.4; }
.theme-cart-drawer__empty p { margin-bottom: 1.5rem; font-size: 15px; }

.theme-cart-drawer__items { flex: 1; overflow: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.theme-cart-item { display: flex; gap: 1rem; }
.theme-cart-item__thumb { position: relative; width: 5rem; height: 6rem; background: var(--color-bone); border-radius: 6px; overflow: hidden; flex-shrink: 0; display: block; }
#theme-cart-drawer .theme-cart-item__thumb img {
	position: absolute; inset: 0;
	width: 100%; height: 100%; max-width: none;
	object-fit: cover; display: block;
}
.theme-cart-item__info { flex: 1; min-width: 0; }
.theme-cart-item__title { font-size: 15px; font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-cart-item__title:hover { color: var(--color-primary); }
.theme-cart-item__price { font-size: 15px; color: color-mix(in srgb, var(--color-foreground) 60%, transparent); margin-top: 0.2rem; }
.theme-cart-item__variation { font-size: 13px; color: color-mix(in srgb, var(--color-foreground) 55%, transparent); margin-top: 0.2rem; }
.theme-cart-item__controls { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.6rem; }
.theme-cart-item__qty-btn { padding: 0.25rem 0.5rem; border-radius: 4px; }
.theme-cart-item__qty-btn:hover { background: var(--color-bone); }
.theme-cart-item__qty { font-size: 15px; width: 1.5rem; text-align: center; }
.theme-cart-item__remove { margin-left: auto; font-size: 15px; color: color-mix(in srgb, var(--color-foreground) 55%, transparent); }
.theme-cart-item__remove:hover { color: #b82e2e; }

.theme-cart-drawer__footer { padding: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent); background: color-mix(in srgb, var(--color-linen) 40%, transparent); display: flex; flex-direction: column; gap: 1rem; }
.theme-cart-drawer__subtotal { display: flex; justify-content: space-between; font-size: 15px; }
.theme-cart-drawer__note { font-size: 15px; color: color-mix(in srgb, var(--color-foreground) 55%, transparent); }
.theme-cart-drawer__checkout, .theme-cart-drawer__empty-btn { width: 100%; }
.theme-cart-drawer__empty-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }

/* ==========================================================================
   WooCommerce Checkout Block
   ========================================================================== */
body.woocommerce-checkout .site-main,
body.woocommerce-checkout main#main-content { padding-top: var(--header-offset); padding-bottom: 4rem; }
body.woocommerce-checkout .page-title { font-family: var(--font-display); text-transform: uppercase; font-size: 2.5rem; margin: 0 0 1.5rem; }
body.woocommerce-checkout .wc-block-checkout { display: block; }

@media (min-width: 768px) {
	body.woocommerce-checkout .wc-block-components-sidebar-layout.wc-block-checkout.is-large,
	body.woocommerce-checkout .wc-block-checkout {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
		align-items: start;
	}
}
body.woocommerce-checkout .wc-block-checkout__main,
body.woocommerce-checkout .wc-block-checkout__sidebar {
	min-width: 0; width: 100%; max-width: none;
}
body.woocommerce-checkout .wc-block-checkout__sidebar {
	background-color: var(--color-secondary);
	border-radius: 0.75rem;
	padding: 2rem;
}
body.woocommerce-checkout .wc-block-components-notice-banner { grid-column: 1 / -1; }

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 {
	width: 100% !important; max-width: none !important;
	font-family: var(--font-body); font-size: 15px; color: var(--color-foreground);
	border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-background);
	padding: revert;
}
body.woocommerce-checkout .wc-block-components-text-input input::placeholder { color: color-mix(in srgb, var(--color-foreground) 45%, transparent); }
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 { outline: none; border-color: var(--color-primary); }

body.woocommerce-checkout .wc-block-components-checkout-place-order-button {
	background-color: var(--color-primary) !important;
	color: #fff !important;
	border-radius: var(--btn-radius) !important;
	text-transform: none !important;
}
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover { opacity: 0.9; }

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

/* ==========================================================================
   Thank-you page
   ========================================================================== */
body.theme-thankyou-page { overflow-x: hidden; }
body.theme-thankyou-page .site-main,
body.theme-thankyou-page main#main-content { padding-top: var(--header-offset); padding-bottom: 4rem; }
.theme-thankyou__icon { width: 4rem; height: 4rem; border-radius: 999px; background: var(--color-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; }
body.theme-thankyou-page .woocommerce-order h2,
body.theme-thankyou-page .woocommerce-order-details__title { padding: 0 0 1rem 0; font-family: var(--font-display); text-transform: uppercase; }
body.theme-thankyou-page .woocommerce-order-details table { width: 100%; table-layout: fixed; }
body.theme-thankyou-page .woocommerce-order-details tfoot th { text-align: left; }
body.theme-thankyou-page .woocommerce-order-details tfoot td { text-align: right; }
body.theme-thankyou-page .woocommerce-customer-details address { overflow-wrap: break-word; }
@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; }
}