/*
Theme Name:  NEON ABYSS
Theme URI:   https://7daystoremy.com
Description: Luxury streetwear storefront for 7DAYSTORE — aggressive, minimalist, cinematic. OLED-black child theme of Storefront, mobile-first. Requires the NEON ABYSS Core plugin for content (lookbook slides, hero fields, settings).
Author:      NEON ABYSS
Template:    storefront
Version:     1.0.0
License:     GPL-2.0-or-later
Text Domain: neon-abyss
*/

/* ============================================================
   1. FONTS — self-hosted woff2 (see assets/fonts/FONTS-README.txt).
   Missing files fail silently onto the fallback stacks below.
   ============================================================ */
@font-face {
	font-family: "Archivo Black";
	src: url("assets/fonts/archivo-black-v23-latin-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("assets/fonts/inter-v20-latin-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("assets/fonts/inter-v20-latin-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Space Mono";
	src: url("assets/fonts/space-mono-v17-latin-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Space Mono";
	src: url("assets/fonts/space-mono-v17-latin-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ============================================================
   2. TOKENS
   ============================================================ */
:root {
	--ink: #0a0a0a;
	--surface: #141414;
	--line: #262626;
	--bone: #f5f5f2;
	--smoke: #8a8a82;
	--acid: #39ff14;
	--acid-dim: #2bcc10;
	--error: #ff4136;
	--warning: #ffbe0b;
	--surface-raised: #1c1c1c;
	--text-secondary: #9a9a92;
	--text-tertiary: #7f7f76; /* ≥4.5:1 on --ink (was #6a6a62 at ~3.2:1, failing AA) */

	--font-display: "Archivo Black", "Arial Black", sans-serif;
	--font-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-mono: "Space Mono", ui-monospace, "SF Mono", Consolas, monospace;

	/* spacing scale */
	--s1: 4px;
	--s2: 8px;
	--s3: 12px;
	--s4: 16px;
	--s5: 24px;
	--s6: 40px;
	--s7: 64px;

	--radius: 2px;
	--radius-sheet: 16px;
	--header-h: 56px;
	--ticker-h: 34px;
	--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ============================================================
   3. BASE — dark ground over Storefront
   ============================================================ */
html {
	background: var(--ink);
}
body {
	background: var(--ink);
	color: var(--bone);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
}
::selection {
	background: var(--acid);
	color: var(--ink);
}
a {
	color: var(--bone);
}
h1, h2, h3, h4, h5, h6 {
	color: var(--bone);
}
/* Storefront structural surfaces inherit the ink ground. */
#page,
.site-content,
.hentry,
.storefront-breadcrumb {
	background: transparent;
}
.na-front.site-content {
	padding: 0;
}

/* Keyboard focus — acid, always visible. */
:focus-visible {
	outline: 2px solid var(--acid);
	outline-offset: 2px;
}
:focus:not(:focus-visible) {
	outline: none;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}
.skip-link {
	background: var(--acid);
	color: var(--ink);
	font-family: var(--font-mono);
	font-size: 12px;
	left: var(--s3);
	letter-spacing: 0.18em;
	padding: var(--s2) var(--s4);
	position: absolute;
	text-transform: uppercase;
	top: -100px;
	z-index: 200;
}
.skip-link:focus {
	top: var(--s3);
}

.na-container {
	margin: 0 auto;
	max-width: 1280px;
	padding-left: var(--s4);
	padding-right: var(--s4);
}

/* Section rhythm: 64px + 1px rule. */
.na-section {
	border-top: 1px solid var(--line);
	padding: var(--s7) 0;
}
.na-section--flush {
	padding: 0;
}

/* Micro-label: the mono eyebrow used across sections. */
.na-label {
	color: var(--smoke);
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.na-section-head {
	align-items: baseline;
	display: flex;
	justify-content: space-between;
	margin-bottom: var(--s5);
}
.na-section-head a {
	color: var(--acid);
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-decoration: none;
	text-transform: uppercase;
}

/* Display type. */
.na-display {
	font-family: var(--font-display);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 0.95;
	text-transform: uppercase;
}
.na-display--outline {
	-webkit-text-stroke: 1.5px var(--bone);
	color: transparent;
}
@supports not (-webkit-text-stroke: 1px black) {
	.na-display--outline {
		color: var(--smoke);
	}
}

/* Mono data (prices, countdown, chips). */
.na-mono {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
}

/* ============================================================
   4. MOTION — the one signature move
   ============================================================ */
.na-rise {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 350ms var(--ease), transform 350ms var(--ease);
}
.na-rise.is-in {
	opacity: 1;
	transform: none;
}

@keyframes na-ticker {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@keyframes na-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(57, 255, 20, 0.5); }
	50% { box-shadow: 0 0 0 8px rgba(57, 255, 20, 0); }
}
@keyframes na-shimmer {
	from { background-position: -200% 0; }
	to { background-position: 200% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.na-rise {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.na-ticker-track {
		animation: none !important;
		transform: none !important;
	}
	.na-hotspot {
		animation: none !important;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ============================================================
   5. COMPONENTS
   ============================================================ */

/* Buttons */
.na-btn {
	align-items: center;
	border: 1px solid transparent;
	border-radius: var(--radius);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 700;
	justify-content: center;
	letter-spacing: 0.18em;
	min-height: 44px;
	padding: var(--s3) var(--s5);
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease);
}
.na-btn--solid {
	background: var(--acid);
	border-color: var(--acid);
	color: var(--ink);
}
.na-btn--solid:hover {
	background: var(--bone);
	border-color: var(--bone);
	color: var(--ink);
}
.na-btn--outline {
	background: transparent;
	border-color: var(--bone);
	color: var(--bone);
}
.na-btn--outline:hover {
	border-color: var(--acid);
	color: var(--acid);
}
.na-btn--ghost {
	background: transparent;
	border-color: var(--acid);
	color: var(--acid);
}
.na-btn--ghost:hover {
	background: var(--acid);
	color: var(--ink);
}
.na-btn--block {
	display: flex;
	width: 100%;
}
.na-btn[disabled] {
	cursor: not-allowed;
	opacity: 0.5;
}
.na-btn.is-loading {
	cursor: wait;
	opacity: 0.7;
	pointer-events: none;
	position: relative;
}
.na-btn.is-loading::after {
	animation: na-spin 600ms linear infinite;
	border: 2px solid transparent;
	border-radius: 50%;
	border-top-color: currentColor;
	content: "";
	height: 16px;
	margin-left: var(--s2);
	width: 16px;
}
@keyframes na-spin {
	to { transform: rotate(360deg); }
}
.na-btn.is-added {
	border-color: var(--acid);
	color: var(--acid);
}

/* Chips (filters, sizes). */
.na-chip {
	align-items: center;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--bone);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--font-mono);
	font-size: 12px;
	justify-content: center;
	letter-spacing: 0.12em;
	min-height: 44px;
	min-width: 44px;
	padding: var(--s2) var(--s4);
	text-transform: uppercase;
	transition: border-color 150ms var(--ease), color 150ms var(--ease);
}
.na-chip[aria-pressed="true"],
.na-chip.is-active {
	border-color: var(--acid);
	color: var(--acid);
}
.na-chip[disabled],
.na-chip.is-soldout {
	color: var(--smoke);
	cursor: not-allowed;
	text-decoration: line-through;
}

/* Bottom sheets (lookbook mini-sheet + filter drawer). */
.na-scrim {
	background: rgba(10, 10, 10, 0.7);
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	transition: opacity 300ms var(--ease);
	z-index: 90;
}
.na-scrim.is-open {
	opacity: 1;
	pointer-events: auto;
}
.na-sheet {
	background: var(--surface);
	border: 1px solid var(--line);
	border-bottom: none;
	border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	left: 0;
	max-height: 85vh;
	max-height: 85svh;
	padding-bottom: env(safe-area-inset-bottom, 0px);
	position: fixed;
	right: 0;
	transform: translateY(105%);
	transition: transform 300ms var(--ease);
	z-index: 100;
}
.na-sheet.is-open {
	transform: none;
}
.na-sheet__handle {
	background: var(--line);
	border: none;
	border-radius: 999px;
	height: 4px;
	margin: var(--s3) auto var(--s2);
	padding: 0;
	width: 40px;
}
.na-sheet__head {
	align-items: center;
	border-bottom: 1px solid var(--line);
	display: flex;
	gap: var(--s3);
	justify-content: space-between;
	padding: var(--s2) var(--s4) var(--s3);
}
.na-sheet__title {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.18em;
	margin: 0;
	text-transform: uppercase;
}
.na-sheet__close {
	background: none;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--bone);
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	min-height: 44px;
	min-width: 44px;
}
.na-sheet__body {
	-webkit-overflow-scrolling: touch;
	overflow-y: auto;
	padding: var(--s4);
}
.na-sheet__foot {
	border-top: 1px solid var(--line);
	padding: var(--s3) var(--s4);
}
body.na-sheet-open {
	overflow: hidden;
}
body.na-sheet-open .na-fab {
	opacity: 0;
	pointer-events: none;
}

/* Skeleton shimmer. */
.na-skeleton {
	background: linear-gradient(90deg, var(--surface) 25%, #1d1d1d 50%, var(--surface) 75%);
	background-size: 200% 100%;
	animation: na-shimmer 1.2s linear infinite;
	border-radius: var(--radius);
}

/* Inline error (never alert()). */
.na-error {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--bone);
	cursor: pointer;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	padding: var(--s3);
	text-align: center;
	text-transform: uppercase;
	width: 100%;
	background: transparent;
}

/* ============================================================
   6. SECTION 1 — ANNOUNCEMENT TICKER
   The only acid-filled bar on the site. Height reserved: no CLS.
   ============================================================ */
.na-ticker {
	background: var(--acid);
	color: var(--ink);
	cursor: pointer;
	height: var(--ticker-h);
	overflow: hidden;
	position: relative;
}
.na-ticker-track {
	align-items: center;
	animation: na-ticker 22s linear infinite;
	display: flex;
	height: var(--ticker-h);
	white-space: nowrap;
	width: max-content;
}
.na-ticker-track span {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	padding: 0 var(--s5);
	text-transform: uppercase;
}
.na-ticker:hover .na-ticker-track {
	animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
	.na-ticker-track {
		justify-content: center;
		width: 100%;
	}
	.na-ticker-track span + span {
		display: none;
	}
}

/* ============================================================
   7. SECTION 2 — HEADER
   ============================================================ */
.na-header {
	align-items: center;
	background: transparent;
	border-bottom: 1px solid transparent;
	display: flex;
	height: var(--header-h);
	justify-content: space-between;
	padding: 0 var(--s4);
	position: sticky;
	top: 0;
	transition: background-color 200ms var(--ease), transform 250ms var(--ease), border-color 200ms var(--ease);
	z-index: 80;
}
/* Over the hero the header floats transparent: it occupies no flow height
   (negative margin) so the 100svh hero starts underneath it. */
body.na-has-hero .na-header {
	margin-bottom: calc(-1 * var(--header-h));
}
.na-header.is-solid {
	background: var(--ink);
	border-bottom-color: var(--line);
}
.na-header.is-hidden {
	transform: translateY(calc(-100% - 1px));
}
/* On non-hero pages the header is always solid and stays in flow. */
body:not(.na-has-hero) .na-header {
	background: var(--ink);
	border-bottom-color: var(--line);
}

.na-wordmark {
	color: var(--bone);
	display: inline-flex;
	align-items: center;
	font-family: var(--font-display);
	font-size: 18px;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
}
.na-wordmark__logo {
	display: block;
	/* 75% of the previous (header-h + 8px) size per client review. */
	height: calc((var(--header-h) + 8px) * 0.75);
	max-width: 135px;
	object-fit: contain;
	width: auto;
}
.na-icon-btn {
	align-items: center;
	background: none;
	border: none;
	color: var(--bone);
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	position: relative;
	text-decoration: none;
}
.na-icon-btn svg {
	display: block;
}
.na-cart-badge {
	color: var(--acid);
	font-family: var(--font-mono);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	min-width: 2ch; /* reserved width: no CLS when the count resolves */
	position: absolute;
	right: 0;
	text-align: left;
	top: 4px;
}
.na-header__actions {
	align-items: center;
	display: flex;
	gap: var(--s1);
}

/* Mobile nav panel — top set by JS to the header's live bottom edge. */
.na-nav {
	background: var(--ink);
	border-bottom: 1px solid var(--line);
	display: none;
	left: 0;
	padding: var(--s4);
	position: fixed;
	right: 0;
	top: var(--header-h);
	z-index: 79;
}
.na-nav.is-open {
	display: block;
}
.na-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.na-nav a {
	border-bottom: 1px solid var(--line);
	color: var(--bone);
	display: block;
	font-family: var(--font-display);
	font-size: 22px;
	letter-spacing: -0.01em;
	padding: var(--s3) 0;
	text-decoration: none;
	text-transform: uppercase;
}
.na-nav a:hover {
	color: var(--acid);
}
/* Categories / Brands accordions under the primary links. The panel scrolls
   so a long brand list never pushes past the viewport on small screens. */
.na-nav {
	max-height: calc(100vh - var(--header-h));
	max-height: calc(100dvh - var(--header-h));
	overflow-y: auto;
	overscroll-behavior: contain;
}
.na-nav__group {
	border-bottom: 1px solid var(--line);
}
/* Group toggles match the primary links exactly (same face, size, rhythm). */
.na-nav__group > button {
	align-items: center;
	background: none;
	border: none;
	color: var(--bone);
	cursor: pointer;
	display: flex;
	font-family: var(--font-display);
	font-size: 22px;
	justify-content: space-between;
	letter-spacing: -0.01em;
	line-height: inherit;
	padding: var(--s3) 0;
	text-align: left;
	text-transform: uppercase;
	width: 100%;
}
.na-nav__group > button::after {
	color: var(--smoke);
	content: "+";
	font-family: var(--font-mono);
	font-size: 18px;
}
.na-nav__group > button[aria-expanded="true"] {
	color: var(--acid);
}
.na-nav__group > button[aria-expanded="true"]::after {
	content: "–";
}
.na-nav__group-list {
	display: none;
	padding-bottom: var(--s3);
}
.na-nav__group > button[aria-expanded="true"] + .na-nav__group-list {
	display: block;
}
.na-nav .na-nav__group-list a {
	border-bottom: none;
	color: var(--smoke);
	font-family: var(--font-body, inherit);
	font-size: 15px;
	letter-spacing: 0;
	padding: var(--s2) 0 var(--s2) var(--s3); /* indent = child of the group above */
	text-transform: none;
}
.na-nav .na-nav__group-list a:hover {
	color: var(--acid);
}
/* Nav scrim overlay. */
[data-na-nav-scrim] {
	z-index: 78;
}

/* Search overlay */
.na-search-overlay {
	background: rgba(10, 10, 10, 0.95);
	inset: 0;
	position: fixed;
	z-index: 110;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 120px;
}
.na-search-overlay[hidden] {
	display: none;
}
.na-search-overlay__inner {
	max-width: 640px;
	width: 100%;
	padding: 0 var(--s4);
}
.na-search-form {
	display: flex;
	align-items: center;
	border-bottom: 2px solid var(--line);
	gap: var(--s3);
	padding-bottom: var(--s3);
	transition: border-color 200ms var(--ease);
}
.na-search-form:focus-within {
	border-bottom-color: var(--acid);
}
.na-search-input {
	background: transparent;
	border: none;
	color: var(--bone);
	flex: 1;
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 5vw, 2.2rem);
	letter-spacing: -0.02em;
	outline: none;
	text-transform: uppercase;
}
.na-search-input::placeholder {
	color: var(--text-tertiary);
}
.na-search-close {
	flex-shrink: 0;
}
.na-search-results {
	margin-top: var(--s5);
	max-height: 50vh;
	overflow-y: auto;
}
.na-search-results a {
	align-items: center;
	border-bottom: 1px solid var(--line);
	color: var(--bone);
	display: flex;
	gap: var(--s3);
	padding: var(--s3) 0;
	text-decoration: none;
}
.na-search-results a:hover {
	color: var(--acid);
}
.na-search-results img {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	height: 56px;
	object-fit: cover;
	width: 56px;
}
.na-search-results .na-search-name {
	font-size: 14px;
	font-weight: 600;
}
.na-search-results .na-search-price {
	color: var(--smoke);
	font-family: var(--font-mono);
	font-size: 13px;
}

/* Mini-cart drawer */
.na-minicart {
	background: var(--surface);
	border-left: 1px solid var(--line);
	bottom: 0;
	display: flex;
	flex-direction: column;
	max-width: 400px;
	position: fixed;
	right: 0;
	top: 0;
	transform: translateX(105%);
	transition: transform 300ms var(--ease);
	width: 90vw;
	z-index: 100;
}
.na-minicart.is-open {
	transform: none;
}
.na-minicart__head {
	align-items: center;
	border-bottom: 1px solid var(--line);
	display: flex;
	justify-content: space-between;
	padding: var(--s3) var(--s4);
}
.na-minicart__body {
	flex: 1;
	overflow-y: auto;
	padding: var(--s4);
}
.na-minicart__empty {
	color: var(--smoke);
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: 0.12em;
	text-align: center;
	text-transform: uppercase;
	padding: var(--s7) 0;
}
.na-minicart__item {
	align-items: flex-start;
	border-bottom: 1px solid var(--line);
	display: flex;
	gap: var(--s3);
	padding: var(--s3) 0;
}
.na-minicart__item img {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	height: 72px;
	object-fit: cover;
	width: 60px;
}
.na-minicart__item-info {
	flex: 1;
}
.na-minicart__item-name {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 2px;
}
.na-minicart__item-meta {
	color: var(--smoke);
	font-family: var(--font-mono);
	font-size: 12px;
}
.na-minicart__item-price {
	font-family: var(--font-mono);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}
.na-minicart__foot {
	border-top: 1px solid var(--line);
	padding: var(--s4);
}
.na-minicart__total {
	display: flex;
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 700;
	justify-content: space-between;
	letter-spacing: 0.12em;
	margin-bottom: var(--s3);
	text-transform: uppercase;
}
.na-minicart__viewcart {
	color: var(--smoke);
	display: block;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	margin-top: var(--s3);
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}
.na-minicart__viewcart:hover {
	color: var(--acid);
}

/* ============================================================
   8. SECTION 3 — VIDEO HERO
   ============================================================ */
.na-hero {
	align-items: flex-start;
	background: var(--ink);
	display: flex;
	flex-direction: column;
	height: 100vh;   /* fallback */
	height: 100svh;
	justify-content: flex-end;
	overflow: hidden;
	position: relative;
}
/* Placeholder hero uses the fallback <img> in the template; no CSS bg needed. */
.na-hero__media,
.na-hero__media img,
.na-hero__media video {
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}
.na-hero__scrim {
	background: linear-gradient(to top, rgba(10, 10, 10, 0.85), transparent 55%);
	inset: 0;
	pointer-events: none;
	position: absolute;
}
.na-hero__content {
	padding: 0 var(--s4) calc(var(--s6) + env(safe-area-inset-bottom, 0px));
	position: relative;
	width: 100%;
}
.na-hero__title {
	font-size: clamp(2rem, 9vw, 4rem);
	margin: 0 0 var(--s4);
}
.na-hero__title .na-display--outline {
	display: block;
}
.na-hero__subtitle {
	color: var(--smoke);
	font-size: 15px;
	opacity: 0.8;
	line-height: 1.5;
	margin: 0 0 var(--s5);
	max-width: 280px;
}
.na-hero__cta-explore {
	font-size: 12px;
	letter-spacing: 0.18em;
}
.na-hero__footer {
	align-items: flex-end;
	display: flex;
	justify-content: space-between;
	margin-top: var(--s6);
}
.na-hero__est {
	color: var(--bone);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	line-height: 1.6;
	text-transform: uppercase;
}
.na-hero__tagline {
	color: var(--bone);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.na-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s3);
	margin-bottom: var(--s4);
}
.na-countdown {
	color: var(--smoke);
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.na-countdown time,
.na-countdown .na-countdown-digits {
	color: var(--acid);
	font-weight: 700;
}
.na-countdown.is-live {
	color: var(--acid);
	font-weight: 700;
}
/* Placeholder ground while no poster is configured. */
.na-hero--placeholder .na-hero__media {
	background:
		radial-gradient(120% 90% at 70% 10%, rgba(57, 255, 20, 0.12), transparent 55%),
		linear-gradient(160deg, #141414, #050505);
}

/* ============================================================
   9. SECTION 4 — NEW-ARRIVALS RAIL
   ============================================================ */
.na-rail-wrap {
	position: relative;
}
.na-rail {
	-webkit-overflow-scrolling: touch;
	display: flex;
	gap: var(--s3);
	overflow-x: auto;
	padding-bottom: var(--s2);
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.na-rail::-webkit-scrollbar {
	display: none;
}
.na-rail > * {
	flex: 0 0 44vw;
	scroll-snap-align: start;
}
/* Right-edge fade: more content this way. */
.na-rail-wrap::after {
	background: linear-gradient(to right, transparent, var(--ink));
	bottom: 0;
	content: "";
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	width: var(--s6);
}
.na-rail__more {
	align-items: center;
	display: flex;
	justify-content: center;
}
.na-rail__more a {
	color: var(--acid);
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-decoration: none;
	text-transform: uppercase;
}

/* ============================================================
   10. PRODUCT CARD — single source of truth
   (server-rendered AND cloned from <template> by JS)
   ============================================================ */
.na-card {
	display: block;
	position: relative;
}
.na-card__media {
	aspect-ratio: 4 / 5;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	display: block;
	overflow: hidden;
	position: relative;
}
.na-card__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}
.na-card__name {
	color: var(--bone);
	display: block;
	font-size: 14px;
	font-weight: 600;
	margin: 4px 0 2px;
	text-decoration: none;
}
.na-card__price {
	color: var(--bone);
	display: block;
	font-family: var(--font-mono);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}
.na-card__price del {
	color: var(--smoke);
}
.na-card__price ins,
.na-card__price .na-sale {
	color: var(--acid);
	text-decoration: none;
}
.na-card__swatches {
	display: flex;
	gap: var(--s2);
	margin-top: var(--s2);
	min-height: 16px;
}
.na-swatch-dot {
	background-size: cover;
	background-position: center;
	background-color: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	cursor: pointer;
	height: 28px;
	padding: 0;
	position: relative;
	width: 28px;
}
.na-swatch-dot.is-active {
	border-color: var(--acid);
}
.na-swatch-dot::before {
	content: "";
	height: 44px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
}

/* Card placeholder (no product image). */
.na-card__media--empty {
	background: linear-gradient(150deg, var(--surface-raised), var(--surface));
}

/* ============================================================
   11. SECTION 5 — SHOPPABLE LOOKBOOK
   ============================================================ */
.na-look {
	margin: 0 0 var(--s3);
	max-height: 80vh;
	max-height: 80svh;
	overflow: hidden;
	position: relative;
}
.na-look img {
	display: block;
	height: auto;
	max-height: 80vh;
	max-height: 80svh;
	object-fit: cover;
	width: 100%;
}
.na-look--placeholder {
	align-items: center;
	aspect-ratio: 4 / 5;
	background: linear-gradient(200deg, #181818, #0c0c0c);
	border: 1px solid var(--line);
	display: flex;
	justify-content: center;
}
.na-look--placeholder span {
	color: var(--smoke);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.24em;
	opacity: 0.7;
	text-transform: uppercase;
}
.na-hotspot {
	align-items: center;
	animation: na-pulse 2s var(--ease) infinite;
	background: rgba(57, 255, 20, 0.15);
	border: 1px solid var(--acid);
	border-radius: 50%;
	color: var(--acid);
	cursor: pointer;
	display: flex;
	font-size: 16px;
	height: 28px;
	justify-content: center;
	line-height: 1;
	position: absolute;
	transform: translate(-50%, -50%);
	width: 28px;
}
/* 44px hit area around the 28px marker. */
.na-hotspot::before {
	content: "";
	height: 44px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
}

/* Lookbook mini-sheet content. */
.na-minisheet__product {
	align-items: center;
	display: flex;
	gap: var(--s3);
	margin-bottom: var(--s4);
}
.na-minisheet__thumb {
	background: var(--ink);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	flex: 0 0 72px;
	height: 72px;
	object-fit: cover;
	width: 72px;
}
.na-minisheet__name {
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 2px;
}
.na-minisheet__price {
	font-family: var(--font-mono);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}
.na-minisheet__sizes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	margin-bottom: var(--s4);
}
.na-minisheet__link {
	color: var(--smoke);
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.18em;
	margin-top: var(--s3);
	text-transform: uppercase;
}
.na-minisheet__status {
	color: var(--acid);
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* ============================================================
   12. SECTION 6 — CATEGORY TILES
   ============================================================ */
.na-cats {
	display: grid;
	gap: var(--s3);
	grid-template-columns: repeat(2, 1fr);
}
.na-cat {
	aspect-ratio: 4 / 5;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	padding: var(--s4);
	position: relative;
	text-decoration: none;
}
.na-cat__img {
	filter: none;
	inset: 0;
	object-fit: cover;
	position: absolute;
	height: 100%;
	transition: transform 400ms var(--ease);
	width: 100%;
}
.na-cat::after {
	background: rgba(10, 10, 10, 0.35);
	content: "";
	inset: 0;
	position: absolute;
	transition: background 300ms var(--ease);
}
.na-cat__name {
	font-size: 20px;
	position: relative;
	z-index: 1;
}
.na-cat--placeholder {
	background: linear-gradient(150deg, #191919, #0e0e0e);
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: var(--s3);
}
.na-cat--placeholder .na-cat__name {
	position: static;
}
.na-cat:hover .na-cat__img {
	transform: scale(1.06);
}
.na-cat:hover::after {
	background: rgba(10, 10, 10, 0.2);
}
.na-cat:hover {
	border-color: var(--acid);
}
.na-cat__icon {
	color: var(--acid);
	height: 48px;
	opacity: 0.7;
	position: relative;
	width: 48px;
	z-index: 1;
}
.na-cat:hover .na-cat__icon {
	opacity: 1;
}

/* ============================================================
   12b. SECTION 6b — BRAND LOGO GRID
   Bordered light tiles on the ink ground (per the client's brand-wall
   reference): monochrome logo mark + mono caption, linking to each
   /brand/ archive.
   ============================================================ */
.na-brands {
	display: grid;
	gap: var(--s3);
	grid-template-columns: repeat(3, 1fr);
}
/* Homepage variant: exactly 4 featured brands — 2×2 on mobile, one row of 4 up. */
.na-brands--home {
	grid-template-columns: repeat(2, 1fr);
}
/* Belt-and-braces: if the legacy editor-content brand grid ever reappears
   on the /brands/ page, never show two listings (page-brands.php also
   strips it server-side). */
.na-brands-page .sds-brand-grid {
	display: none;
}
.na-brand {
	align-items: center;
	aspect-ratio: 1 / 1;
	background: var(--bone);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	display: flex;
	flex-direction: column;
	gap: var(--s2);
	justify-content: center;
	overflow: hidden;
	padding: var(--s3);
	text-decoration: none;
	transition: border-color 150ms var(--ease);
}
.na-brand:hover,
.na-brand:focus-visible {
	border-color: var(--acid);
}
.na-brand__logo {
	filter: grayscale(1);
	height: auto;
	max-height: 46%;
	max-width: 64%;
	object-fit: contain;
	width: auto;
}
.na-brand__mark {
	color: var(--ink);
	font-size: 15px;
	line-height: 1.1;
	overflow-wrap: anywhere;
	text-align: center;
}
.na-brand__name {
	color: var(--ink);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	max-width: 100%;
	overflow: hidden;
	text-align: center;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ============================================================
   13. SECTION 7 — SHOP THE DROP (filter bar + grid)
   ============================================================ */
.na-filterbar {
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	border-top: 1px solid var(--line);
	position: sticky;
	top: var(--header-h);
	z-index: 60;
}
.na-filterbar button {
	align-items: center;
	background: none;
	border: none;
	color: var(--bone);
	cursor: pointer;
	display: flex;
	font-family: var(--font-mono);
	font-size: 12px;
	justify-content: space-between;
	letter-spacing: 0.18em;
	min-height: 48px;
	padding: 0 var(--s4);
	text-transform: uppercase;
	width: 100%;
}
.na-filterbar .na-filter-count {
	color: var(--acid);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.na-grid {
	display: grid;
	gap: var(--s4) var(--s3);
	grid-template-columns: repeat(2, 1fr);
	margin-top: var(--s5);
	transition: opacity 150ms var(--ease);
}
.na-grid.is-loading {
	opacity: 0.4;
}
.na-grid .na-skeleton {
	aspect-ratio: 4 / 6;
}
.na-grid-foot {
	display: flex;
	justify-content: center;
	margin-top: var(--s5);
}
.na-empty {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	grid-column: 1 / -1;
	padding: var(--s7) var(--s4);
	text-align: center;
}
.na-empty p {
	font-family: var(--font-display);
	font-size: 20px;
	letter-spacing: -0.01em;
	margin: 0 0 var(--s4);
	text-transform: uppercase;
}

/* Filter drawer internals. */
.na-filtergroup {
	border-bottom: 1px solid var(--line);
	padding: var(--s4) 0;
}
.na-filtergroup:last-child {
	border-bottom: none;
}
.na-filtergroup__label {
	display: block;
	margin-bottom: var(--s3);
}
.na-chiprow {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
}

/* Dual-thumb price slider: two overlaid range inputs. */
.na-pricerange {
	padding: var(--s2) 0 0;
	position: relative;
}
.na-pricerange__track {
	height: 44px;
	position: relative;
}
.na-pricerange input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	background: none;
	height: 44px;
	left: 0;
	margin: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	width: 100%;
}
.na-pricerange input[type="range"]::-webkit-slider-runnable-track {
	background: var(--line);
	height: 2px;
	margin-top: 21px;
}
.na-pricerange input[type="range"]::-moz-range-track {
	background: var(--line);
	height: 2px;
}
.na-pricerange input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	background: var(--acid);
	border-radius: 50%;
	height: 20px;
	margin-top: -9px;
	pointer-events: auto;
	width: 20px;
}
.na-pricerange input[type="range"]::-moz-range-thumb {
	background: var(--acid);
	border: none;
	border-radius: 50%;
	height: 20px;
	pointer-events: auto;
	width: 20px;
}
.na-pricerange__readout {
	color: var(--bone);
	display: block;
	font-family: var(--font-mono);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	margin-top: var(--s1);
}

/* In-stock toggle. */
.na-toggle {
	align-items: center;
	display: flex;
	gap: var(--s3);
	justify-content: space-between;
	min-height: 44px;
	width: 100%;
	background: none;
	border: none;
	color: var(--bone);
	cursor: pointer;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.18em;
	padding: 0;
	text-transform: uppercase;
}
.na-toggle__pill {
	background: var(--line);
	border-radius: 999px;
	flex: 0 0 44px;
	height: 24px;
	position: relative;
	transition: background-color 150ms var(--ease);
	width: 44px;
}
.na-toggle__pill::after {
	background: var(--bone);
	border-radius: 50%;
	content: "";
	height: 18px;
	left: 3px;
	position: absolute;
	top: 3px;
	transition: transform 150ms var(--ease);
	width: 18px;
}
.na-toggle[aria-pressed="true"] .na-toggle__pill {
	background: var(--acid);
}
.na-toggle[aria-pressed="true"] .na-toggle__pill::after {
	background: var(--ink);
	transform: translateX(20px);
}

/* ============================================================
   14. SECTION 8 — MANIFESTO
   ============================================================ */
.na-manifesto p {
	border-bottom: 1px solid var(--line);
	color: var(--smoke);
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: 0.18em;
	margin: 0;
	padding: var(--s4) 0;
	text-transform: uppercase;
}
.na-manifesto p:last-child {
	border-bottom: none;
}

/* ============================================================
   15. SECTION 9 — NEWSLETTER
   ============================================================ */
.na-newsletter {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: var(--s5) var(--s4);
}
.na-newsletter h2 {
	font-size: clamp(1.6rem, 7vw, 2.2rem);
	margin: 0 0 var(--s2);
}
.na-newsletter p {
	color: var(--smoke);
	font-size: 14px;
	margin: 0 0 var(--s4);
	max-width: 65ch;
}
.na-newsletter form {
	display: flex;
	flex-direction: column;
	gap: var(--s3);
}
.na-newsletter input[type="email"] {
	background: var(--ink);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--bone);
	font-family: var(--font-mono);
	font-size: 14px;
	min-height: 44px;
	padding: var(--s3) var(--s4);
}
.na-newsletter input[type="email"]::placeholder {
	color: var(--smoke);
}
/* Honeypot — hidden from humans, present for bots. */
.na-newsletter .na-hp {
	left: -9999px;
	position: absolute;
}
.na-form-msg {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	min-height: 1.2em; /* reserved: no CLS when the message appears */
	text-transform: uppercase;
}
.na-form-msg.is-ok {
	color: var(--acid);
}
.na-form-msg.is-err {
	color: var(--bone);
}

/* ============================================================
   16. SECTION 10 — FOOTER
   ============================================================ */
.na-footer {
	border-top: 1px solid var(--line);
	margin-top: var(--s7);
	padding: var(--s6) 0 calc(var(--s6) + env(safe-area-inset-bottom, 0px));
}
.na-footer-group {
	border-bottom: 1px solid var(--line);
}
.na-footer-group > button {
	align-items: center;
	background: none;
	border: none;
	color: var(--bone);
	cursor: pointer;
	display: flex;
	font-family: var(--font-mono);
	font-size: 12px;
	justify-content: space-between;
	letter-spacing: 0.18em;
	min-height: 48px;
	padding: 0;
	text-transform: uppercase;
	width: 100%;
}
.na-footer-group > button::after {
	content: "+";
	color: var(--smoke);
}
.na-footer-group > button[aria-expanded="true"]::after {
	content: "–";
}
.na-footer-group ul {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0 0 var(--s4);
}
.na-footer-group > button[aria-expanded="true"] + ul {
	display: block;
}
.na-footer-group li a {
	color: var(--smoke);
	display: block;
	font-size: 14px;
	padding: var(--s2) 0;
	text-decoration: none;
}
.na-footer-group li a:hover {
	color: var(--acid);
}
.na-footer-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	padding: var(--s5) 0;
}
.na-footer-social a {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--smoke);
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	min-height: 44px;
	padding: var(--s2) var(--s4);
	text-decoration: none;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
}
.na-footer-social a:hover {
	border-color: var(--acid);
	color: var(--acid);
}
.na-copyright {
	color: var(--smoke);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
/* Minimal footer variant — social + copyright centered, no link groups. */
.na-footer--minimal {
	text-align: center;
}
.na-footer--minimal .na-footer-social {
	justify-content: center;
}
.na-footer--minimal .na-copyright {
	margin-top: 0;
}

/* Third-party scroll-to-top widgets: unstyled grey boxes on this design —
   the theme ships its own (.na-scrolltop below). */
#scroll-top,
#back-to-top,
#backtotop,
.back-to-top,
.scroll-to-top,
.scrollup,
.scroll-top,
#ast-scroll-top,
#wpfront-scroll-top-container,
.wpfront-scroll-top,
#goto-top,
.goto-top,
#totop,
.to-top,
#toTop {
	display: none !important;
}

/* Scroll-to-top: bottom-left twin of the WhatsApp FAB, visible only after
   a real scroll. */
.na-scrolltop {
	align-items: center;
	background: var(--ink);
	border: 1px solid var(--line);
	border-radius: 50%;
	bottom: calc(var(--s4) + env(safe-area-inset-bottom, 0px));
	color: var(--bone);
	cursor: pointer;
	display: flex;
	height: 44px;
	justify-content: center;
	left: calc(var(--s4) + env(safe-area-inset-left, 0px));
	opacity: 0;
	padding: 0;
	pointer-events: none;
	position: fixed;
	transition: opacity 200ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease);
	width: 44px;
	z-index: 70;
}
.na-scrolltop.is-visible {
	opacity: 1;
	pointer-events: auto;
}
.na-scrolltop:hover,
.na-scrolltop:focus-visible {
	border-color: var(--acid);
	color: var(--acid);
}
.na-scrolltop svg {
	display: block;
	height: 18px;
	width: 18px;
}

/* ============================================================
   17. SECTION 11 — WHATSAPP FAB
   ============================================================ */
.na-fab {
	align-items: center;
	background: var(--ink);
	border: 1px solid var(--bone);
	border-radius: 50%;
	bottom: calc(var(--s4) + env(safe-area-inset-bottom, 0px));
	color: var(--bone);
	display: flex;
	height: 52px;
	justify-content: center;
	position: fixed;
	right: calc(var(--s4) + env(safe-area-inset-right, 0px));
	transition: opacity 200ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease);
	width: 52px;
	z-index: 70;
}
.na-fab:hover {
	border-color: var(--acid);
	color: var(--acid);
}

/* ============================================================
   18. PRODUCT PAGE SWATCHES
   ============================================================ */
.na-var-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	margin: var(--s2) 0;
}
.na-var-swatch {
	background-color: var(--surface);
	background-position: center;
	background-size: cover;
	border: 2px solid var(--line);
	border-radius: var(--radius);
	cursor: pointer;
	height: 40px;
	min-width: 40px;
	padding: 0;
	width: 40px;
}
.na-var-swatch.is-selected {
	border-color: var(--acid);
}
.na-var-swatch--text {
	background: transparent;
	color: var(--bone);
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	min-height: 44px;
	min-width: 44px;
	padding: 0 var(--s3);
	text-transform: uppercase;
	width: auto;
}
.na-var-swatch--text.is-soldout {
	color: var(--smoke);
	cursor: not-allowed;
	text-decoration: line-through;
}
/* The native select stays in the DOM for WooCommerce's JS — visually hidden. */
.na-var-native {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

/* ============================================================
   18b. WOOCOMMERCE INNER PAGES — shop archive, single product,
   cart/checkout. Storefront's light defaults re-grounded on ink.
   ============================================================ */

/* --- page chrome --- */
.woocommerce-products-header__title.page-title,
.site-content .page-title {
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 6vw, 2.4rem);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 0.95;
	text-transform: uppercase;
}
.storefront-breadcrumb {
	border-bottom: 1px solid var(--line);
	margin: 0 0 var(--s5);
	padding: var(--s3) 0;
}
.storefront-breadcrumb .woocommerce-breadcrumb,
.storefront-breadcrumb .woocommerce-breadcrumb a {
	color: var(--smoke);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.woocommerce-result-count {
	color: var(--smoke);
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* --- generic form controls on ink --- */
.site-content input[type="text"],
.site-content input[type="email"],
.site-content input[type="tel"],
.site-content input[type="password"],
.site-content input[type="search"],
.site-content input[type="number"],
.site-content input[type="url"],
.site-content select,
.site-content textarea,
.site-content .input-text {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--bone);
	font-family: var(--font-body);
	padding: var(--s2) var(--s3);
}
.site-content select {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.1em;
	min-height: 40px;
	text-transform: uppercase;
}

/* --- buttons: Storefront .button → outline; primary alt → solid acid --- */
.site-content .button,
.site-content button.button,
.site-content .added_to_cart {
	background: transparent;
	border: 1px solid var(--bone);
	border-radius: var(--radius);
	color: var(--bone);
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	padding: var(--s2) var(--s4);
	text-transform: uppercase;
	transition: border-color 150ms var(--ease), color 150ms var(--ease), background-color 150ms var(--ease);
}
.site-content .button:hover,
.site-content .added_to_cart:hover {
	background: transparent;
	border-color: var(--acid);
	color: var(--acid);
}
.site-content .button.alt,
.site-content .button.checkout,
.site-content .single_add_to_cart_button {
	background: var(--acid);
	border-color: var(--acid);
	color: var(--ink);
}
.site-content .button.alt:hover,
.site-content .button.checkout:hover,
.site-content .single_add_to_cart_button:hover {
	background: var(--bone);
	border-color: var(--bone);
	color: var(--ink);
}
.site-content .button:disabled,
.site-content .button.disabled {
	background: transparent;
	border-color: var(--line);
	color: var(--smoke);
	opacity: 1;
}

/* --- product loop (archive + related/upsells) ---
   The grid sells the image. Card = image, name, price, badge on the image
   — same anatomy as the homepage cards. Loop buttons (add to cart, quick
   view) are removed: purchase actions live on the product page. */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	gap: var(--s6) var(--s4);
	grid-template-columns: repeat(2, 1fr);
	list-style: none;
	margin: 0 0 var(--s6) !important;
	padding: 0;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: transparent;
	display: flex;
	flex-direction: column;
	float: none !important;
	gap: 2px;
	list-style: none;
	margin: 0 !important;
	padding: 0;
	position: relative;
	text-align: left;
	width: auto !important;
}
.woocommerce ul.products li.product::marker {
	content: "";
}
.woocommerce ul.products li.product a {
	text-decoration: none;
}
.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img,
.site-content .related li.product img,
.site-content .up-sells li.product img {
	aspect-ratio: 4 / 5;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	display: block;
	height: auto !important;
	margin: 0 0 var(--s2) !important;
	object-fit: cover;
	transition: border-color 150ms var(--ease), transform 200ms var(--ease);
	width: 100% !important;
}
/* Stray slider/carousel chrome from loop plugins never renders. */
ul.products .flex-direction-nav,
ul.products .slick-arrow,
ul.products .owl-nav {
	display: none;
}
.woocommerce ul.products li.product:hover img {
	border-color: var(--smoke);
	transform: scale(1.02);
}
.woocommerce ul.products li.product {
	transition: transform 200ms var(--ease);
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-2px);
}
/* Add transition to product images */
.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img {
	transition: border-color 150ms var(--ease), transform 200ms var(--ease);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
	color: var(--bone);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	margin: 0;
	padding: 0;
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
	color: var(--acid);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.na-card__name {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	overflow: hidden;
}
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
	color: var(--bone);
	font-family: var(--font-mono);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	margin: 0;
}
.woocommerce ul.products li.product .price del,
.site-content .price del {
	color: var(--smoke);
	opacity: 1;
}
.woocommerce ul.products li.product .price ins,
.site-content .price ins {
	background: none;
	color: var(--acid);
	font-weight: 700;
	text-decoration: none;
}
/* No controls inside the grid: add-to-cart, "N products in cart", star
   rows and any quick-view plugin button. The whole card is the link. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart,
.woocommerce ul.products li.product .star-rating,
.woocommerce ul.products li.product [class*="quick-view"],
.woocommerce ul.products li.product [class*="quickview"],
.woocommerce ul.products li.product [class*="woosq"],
.woocommerce ul.products li.product .yith-wcqv-button {
	display: none;
}

/* Sale badge: sharp, mono, acid — pinned to the image corner. The
   !importants are deliberate: old-theme/plugin flash styles (orange
   borders, round blobs) must never win over the token system. */
.woocommerce span.onsale,
.site-content span.onsale {
	background: var(--ink) !important;
	border: 1px solid var(--acid) !important;
	border-radius: var(--radius) !important;
	color: var(--acid) !important;
	font-family: var(--font-mono) !important;
	font-size: 10px !important;
	font-weight: 700;
	left: var(--s2);
	letter-spacing: 0.18em;
	line-height: 1 !important;
	margin: 0;
	min-height: 0;
	min-width: 0;
	padding: var(--s1) var(--s2) !important;
	position: absolute;
	right: auto;
	text-transform: uppercase;
	top: var(--s2);
	z-index: 2;
}
/* On the product page the badge belongs on the gallery image, not in the
   summary text flow — div.product is the positioning context. */
.single-product div.product {
	position: relative;
}
.single-product div.product span.onsale {
	left: var(--s3);
	top: var(--s3);
}

/* Star ratings. */
.woocommerce .star-rating span,
.site-content .star-rating span {
	color: var(--acid);
}

/* Pagination. */
.woocommerce nav.woocommerce-pagination ul {
	border: none;
}
.woocommerce nav.woocommerce-pagination ul li {
	border: none;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	background: transparent;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--bone);
	font-family: var(--font-mono);
	font-size: 12px;
	margin: 0 var(--s1);
	min-width: 40px;
	padding: var(--s2) var(--s3);
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: transparent;
	border-color: var(--acid);
	color: var(--acid);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--acid);
	border-color: var(--acid);
	color: var(--ink);
}
/* Fallback for any other pagination markup (.page-numbers variants). */
.site-content a.page-numbers,
.site-content span.page-numbers {
	background: transparent;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--bone);
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 12px;
	margin: 0 var(--s1);
	min-width: 40px;
	padding: var(--s2) var(--s3);
	text-align: center;
	text-decoration: none;
}
.site-content a.page-numbers:hover {
	border-color: var(--acid);
	color: var(--acid);
}
.site-content span.page-numbers.current {
	background: var(--acid);
	border-color: var(--acid);
	color: var(--ink);
}

/* --- sidebar widgets (price / brand / size filters stay useful) --- */
#secondary .widget {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	margin: 0 0 var(--s4);
	padding: var(--s4);
}
#secondary .widget-title,
#secondary .wp-block-heading {
	color: var(--smoke);
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.18em;
	margin: 0 0 var(--s3);
	text-transform: uppercase;
}
#secondary a {
	color: var(--bone);
	text-decoration: none;
}
#secondary a:hover {
	color: var(--acid);
}
#secondary .count {
	color: var(--smoke);
	font-family: var(--font-mono);
	font-size: 11px;
}
#secondary ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#secondary li {
	border-bottom: 1px solid var(--line);
	padding: var(--s2) 0;
}
#secondary li:last-child {
	border-bottom: none;
}
/* WooCommerce price slider. */
.price_slider_wrapper .ui-slider {
	background: var(--line);
}
.price_slider_wrapper .ui-slider .ui-slider-range {
	background: var(--acid);
}
.price_slider_wrapper .ui-slider .ui-slider-handle {
	background: var(--acid);
	border: none;
}
.price_slider_amount .price_label {
	color: var(--smoke);
	font-family: var(--font-mono);
	font-size: 12px;
}
/* Active filter chips. */
.widget_layered_nav_filters ul li.chosen a {
	border: 1px solid var(--acid);
	border-radius: 999px;
	color: var(--acid);
	font-family: var(--font-mono);
	font-size: 12px;
	padding: var(--s1) var(--s3);
}

/* --- single product: a focused buy page --- */

/* No sidebar (widgets removed in functions.php; this is belt-and-braces). */
.single-product #secondary {
	display: none;
}
.single-product .content-area {
	float: none;
	margin: 0 auto;
	max-width: 1100px;
	width: 100%;
}

/* Gallery. */
.single-product div.product .woocommerce-product-gallery {
	margin-bottom: var(--s3) !important;
}
.single-product div.product .woocommerce-product-gallery img {
	background: transparent;
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.single-product div.product .woocommerce-product-gallery .flex-viewport {
	margin-bottom: var(--s2) !important;
}
/* Thumbnails: one horizontal, swipeable strip under the main image
   (flexslider emits them as a bare <ol> — reset the list completely). */
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	gap: var(--s2);
	list-style: none;
	margin: 0;
	overflow-x: auto;
	padding: 0;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar {
	display: none;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li {
	flex: 0 0 auto;
	float: none;
	margin: 0;
	padding: 0;
	scroll-snap-align: start;
	width: 72px;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	cursor: pointer;
	display: block;
	height: 72px;
	object-fit: cover;
	opacity: 0.6;
	width: 72px;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img:hover {
	border-color: var(--acid);
	opacity: 1;
}
/* No floating magnifier icon — the image itself opens the lightbox. */
.woocommerce-product-gallery__trigger {
	display: none;
}

/* Summary hierarchy: title → rating → price → blurb → buy → meta. */
.single-product div.product .product_title {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 6vw, 2.6rem);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 0.95;
	margin: 0 0 var(--s3);
	text-transform: uppercase;
}
.single-product div.product .woocommerce-product-rating {
	align-items: center;
	display: flex;
	gap: var(--s2);
	margin: 0 0 var(--s3);
}
.single-product div.product .woocommerce-product-rating .woocommerce-review-link {
	color: var(--smoke);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.single-product div.product p.price,
.single-product div.product span.price {
	color: var(--bone);
	font-family: var(--font-mono);
	font-size: 22px;
	font-variant-numeric: tabular-nums;
	margin: 0 0 var(--s4);
}
.single-product div.product p.price del {
	color: var(--smoke);
	font-size: 16px;
	opacity: 1;
}
.single-product div.product p.price ins {
	background: none;
	color: var(--acid);
	font-weight: 700;
	text-decoration: none;
}
.single-product div.product .woocommerce-product-details__short-description {
	color: var(--smoke);
	font-size: 15px;
	line-height: 1.7;
	margin: 0 0 var(--s4);
	max-width: 65ch;
}

/* Buy row: quantity + full-width acid button, thumb-friendly. */
.single-product form.cart {
	margin: 0 0 var(--s5);
}
.single-product form.cart:not(.variations_form),
.single-product .woocommerce-variation-add-to-cart {
	align-items: stretch;
	display: flex;
	flex-wrap: wrap;
	gap: var(--s3);
}
.single-product form.cart .quantity {
	float: none;
	margin: 0;
}
/* Quantity stepper: [−] [n] [+] — buttons injected by variations.js. */
.quantity {
	align-items: stretch;
	display: inline-flex;
}
.quantity .qty {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 0;
	color: var(--bone);
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	min-height: 48px;
	min-width: 56px;
	-moz-appearance: textfield;
	appearance: textfield;
	text-align: center;
}
.quantity .qty::-webkit-outer-spin-button,
.quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.na-qty-btn {
	align-items: center;
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--bone);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--font-mono);
	font-size: 16px;
	justify-content: center;
	line-height: 1;
	min-height: 48px;
	min-width: 44px;
	padding: 0;
	transition: color 150ms var(--ease), border-color 150ms var(--ease);
}
.na-qty-btn:hover {
	border-color: var(--acid);
	color: var(--acid);
}
.na-qty-btn--minus {
	border-radius: var(--radius) 0 0 var(--radius);
	border-right: none;
}
.na-qty-btn--plus {
	border-left: none;
	border-radius: 0 var(--radius) var(--radius) 0;
}
.single-product .single_add_to_cart_button {
	flex: 1;
	min-height: 48px;
}
.single-product .woocommerce-variation-price {
	margin-bottom: var(--s3);
}

/* Variations table → quiet rows; swatches come from variations.js. */
table.variations,
table.variations td,
table.variations th {
	background: transparent;
	border: none;
	color: var(--bone);
	padding-left: 0;
}
table.variations label {
	color: var(--smoke);
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.reset_variations {
	color: var(--smoke);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Meta: mono microtext behind a hairline. */
.single-product div.product .product_meta {
	border-top: 1px solid var(--line);
	color: var(--smoke);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	padding-top: var(--s4);
	text-transform: uppercase;
}
.single-product div.product .product_meta > span {
	display: block;
	margin-bottom: var(--s1);
}
.single-product div.product .product_meta a {
	color: var(--bone);
	text-decoration: none;
}
.single-product div.product .product_meta a:hover {
	color: var(--acid);
}

/* Trust signals below add-to-cart */
.na-trust-signals {
	border-top: 1px solid var(--line);
	display: flex;
	flex-wrap: wrap;
	gap: var(--s4);
	margin-top: var(--s4);
	padding-top: var(--s4);
}
.na-trust-signal {
	align-items: center;
	color: var(--smoke);
	display: flex;
	font-family: var(--font-mono);
	font-size: 11px;
	gap: var(--s2);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.na-trust-signal svg {
	color: var(--acid);
	flex-shrink: 0;
}

/* Tabs: mono labels, acid underline for the active one, quiet panels. */
.single-product div.product .woocommerce-tabs {
	border-top: 1px solid var(--line);
	margin-top: var(--s6);
	padding-top: var(--s4);
}
.single-product div.product .woocommerce-tabs ul.tabs {
	border: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--s3) var(--s4);
	list-style: none;
	margin: 0 0 var(--s4);
	padding: 0;
}
.single-product div.product .woocommerce-tabs ul.tabs::before,
.single-product div.product .woocommerce-tabs ul.tabs::after,
.single-product div.product .woocommerce-tabs ul.tabs li::before,
.single-product div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}
.single-product div.product .woocommerce-tabs ul.tabs li,
.single-product div.product .woocommerce-tabs ul.tabs li.active {
	background: transparent;
	border: none;
	display: block;
	float: none;
	list-style: none;
	margin: 0;
	padding: 0;
}
.single-product div.product .woocommerce-tabs ul.tabs li a {
	border-bottom: 2px solid transparent;
	display: inline-block;
	white-space: nowrap;
	color: var(--smoke);
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.18em;
	padding: var(--s2) 0;
	text-transform: uppercase;
}
.single-product div.product .woocommerce-tabs ul.tabs li.active a {
	border-bottom-color: var(--acid);
	color: var(--bone);
}
.single-product div.product .woocommerce-Tabs-panel {
	color: var(--smoke);
	font-size: 15px;
	line-height: 1.7;
	max-width: 65ch;
}
/* WooCommerce repeats the tab label as an h2 inside the panel — redundant. */
.single-product div.product .woocommerce-Tabs-panel > h2:first-of-type {
	display: none;
}

/* Reviews. */
.woocommerce #reviews #comments ol.commentlist li {
	background: transparent;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	margin: 0 0 var(--s3);
	padding: var(--s4);
}
.woocommerce #reviews #comments ol.commentlist li img.avatar {
	background: var(--surface);
	border: 1px solid var(--line);
	padding: 0;
	width: 40px;
}
.woocommerce #reviews #comments ol.commentlist li .comment-text {
	border: none;
	margin-left: 56px;
	padding: 0;
}
.woocommerce #review_form #respond p.stars a {
	color: var(--acid);
}

/* Storefront's prev/next product pagination is unhooked in functions.php;
   hide it too in case another plugin re-adds it. */
.storefront-product-pagination {
	display: none !important;
}

/* Related / upsells: section label + the shared grid (buttons already
   removed by the loop rules). */
.single-product .related.products > h2,
.single-product .up-sells > h2 {
	border-top: 1px solid var(--line);
	color: var(--smoke);
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.18em;
	margin: var(--s4) 0 var(--s3) !important;
	padding-top: var(--s4) !important;
	text-transform: uppercase;
}

/* --- cart & checkout tables/panels --- */
.site-content table.shop_table {
	background: transparent;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--bone);
}
.site-content table.shop_table th,
.site-content table.shop_table td {
	background: transparent;
	border-color: var(--line);
	color: var(--bone);
}
.site-content table.shop_table .product-name a {
	color: var(--bone);
}
#payment,
.woocommerce-checkout #payment {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--bone);
}
#payment div.payment_box,
.woocommerce-checkout #payment div.payment_box {
	background: var(--ink);
	color: var(--smoke);
}
#payment div.payment_box::before {
	border-bottom-color: var(--ink);
}
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
	background: var(--surface);
	border-top: 2px solid var(--acid);
	color: var(--bone);
}
.woocommerce-error {
	border-top-color: var(--error);
}
.woocommerce form .form-row label {
	color: var(--smoke);
	font-size: 13px;
}

/* ============================================================
   19. BREAKPOINTS — exactly two overrides
   ============================================================ */
@media (min-width: 768px) {
	.na-rail > * {
		flex-basis: 25vw;
	}
	.na-grid,
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
	.na-cats {
		grid-template-columns: repeat(4, 1fr);
	}
	/* Directory grid (default) stays 3-up; only the homepage 4-brand row widens. */
	.na-brands {
		gap: var(--s4);
	}
	.na-brands--home {
		grid-template-columns: repeat(4, 1fr);
	}
	.na-brand__logo {
		max-height: 52%;
	}
	.na-brand__mark {
		font-size: 22px;
	}
	.na-brand__name {
		font-size: 12px;
	}
	.na-about__timeline {
		grid-template-columns: repeat(3, 1fr);
	}
	.na-newsletter form {
		flex-direction: row;
	}
	.na-newsletter input[type="email"] {
		flex: 1;
	}
	.na-footer-group > button {
		cursor: default;
		pointer-events: none;
	}
	.na-footer-group > button::after {
		content: "";
	}
	.na-footer-group ul {
		display: block;
	}
	.na-footer-groups {
		display: grid;
		gap: var(--s5);
		grid-template-columns: repeat(3, 1fr);
	}
	.na-footer-group {
		border-bottom: none;
	}
}

@media (min-width: 1100px) {
	.na-grid,
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(4, 1fr);
	}
	.na-rail {
		display: grid;
		gap: var(--s4);
		grid-template-columns: repeat(4, 1fr);
		overflow: visible;
	}
	.na-rail > * {
		flex-basis: auto;
	}
	.na-rail-wrap::after {
		display: none;
	}
	/* Filter sheet becomes a left slide-in panel. */
	.na-sheet--filters {
		border-bottom: 1px solid var(--line);
		border-radius: 0;
		border-right: 1px solid var(--line);
		bottom: 0;
		left: 0;
		max-height: none;
		right: auto;
		top: 0;
		transform: translateX(-105%);
		width: 380px;
	}
	.na-sheet--filters.is-open {
		transform: none;
	}
	.na-sheet--filters .na-sheet__handle {
		display: none;
	}
}

/* ============================================================
   20. ARCHIVE PAGE FIXES
   Points 4, 6, 7: Remove "New Cloth Technologies" testimonial
   block + black space before products on archive/category pages.
   ============================================================ */

/* Hide orphaned Stackable "New Cloth Technologies" testimonial widget.
   It's a widget_block in sidebar-1 using wp-block-stackable-columns.
   Kill it everywhere: sidebar, filter panel, any page. */
.widget_block:has(.wp-block-stackable-columns),
.widget_block:has([id="new-cloth-technologies"]),
.wp-block-stackable-columns:has([id="new-cloth-technologies"]),
#new-cloth-technologies {
	display: none !important;
}
/* Fallback for browsers without :has() — hide ALL Stackable blocks in
   widget areas (this site doesn't intentionally use Stackable). */
.widget_block .wp-block-stackable-columns,
.widget_block .stk-block-columns {
	display: none !important;
}

/* Remove Storefront sidebar on ALL inner pages — archive pages use the
   slide-in filter panel; cart/checkout/brands don't need filters at all. */
body:not(.na-has-hero) #secondary {
	display: none !important;
}
/* Force full width when sidebar hidden */
body:not(.na-has-hero) .content-area {
	float: none;
	margin: 0 auto;
	width: 100%;
}

/* Remove black space (excess top padding/margin) before product grids */
.post-type-archive-product .site-content .col-full,
.tax-product_cat .site-content .col-full,
.tax-product_tag .site-content .col-full {
	padding-top: var(--s4);
}
/* Product image backgrounds are set to transparent in the main rule (section 18b).
   aspect-ratio: 4/5 is kept for layout stability with lazy-loaded placeholders. */

/* ============================================================
   21. FILTER BUTTON + PANEL (archive pages)
   Point 8: Slide-in filter panel triggered by a button.
   ============================================================ */
.na-archive-filter-btn {
	align-items: center;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--bone);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--font-mono);
	font-size: 12px;
	gap: var(--s2);
	letter-spacing: 0.18em;
	margin: var(--s3) 0;
	min-height: 44px;
	padding: var(--s2) var(--s4);
	text-transform: uppercase;
	transition: border-color 150ms var(--ease), color 150ms var(--ease);
}
.na-archive-filter-btn:hover {
	border-color: var(--acid);
	color: var(--acid);
}
.na-archive-filter-btn svg {
	height: 16px;
	width: 16px;
}
/* When filter panel is open, move sidebar into a slide-over */
.na-filter-panel {
	background: var(--surface);
	border-left: 1px solid var(--line);
	bottom: 0;
	max-width: 380px;
	overflow-y: auto;
	padding: var(--s4);
	position: fixed;
	right: 0;
	top: 0;
	transform: translateX(105%);
	transition: transform 300ms var(--ease);
	width: 90vw;
	z-index: 100;
}
.na-filter-panel.is-open {
	transform: none;
}
.na-filter-panel__head {
	align-items: center;
	border-bottom: 1px solid var(--line);
	display: flex;
	justify-content: space-between;
	margin-bottom: var(--s4);
	padding-bottom: var(--s3);
}
.na-filter-panel__title {
	color: var(--bone);
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.18em;
	margin: 0;
	text-transform: uppercase;
}
.na-filter-panel__close {
	background: none;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--bone);
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	min-height: 44px;
	min-width: 44px;
}

/* ============================================================
   22. PRODUCT GALLERY THUMBNAILS — CAROUSEL (single product)
   Point 9: Horizontal carousel, rounded corners, tight/no gaps.
   ============================================================ */
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
	gap: var(--s2);
	scroll-padding-left: var(--s2);
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li {
	width: auto;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {
	border-radius: 8px;
	height: 80px;
	width: 80px;
}

/* Related product spacing handled in section 18b with !important. */

/* ============================================================
   24. STICKY MOBILE ADD-TO-CART BAR
   ============================================================ */
.na-sticky-bar {
	background: var(--surface);
	border-top: 1px solid var(--line);
	bottom: 0;
	left: 0;
	padding: var(--s3) 0;
	position: fixed;
	right: 0;
	transform: translateY(100%);
	transition: transform 300ms var(--ease);
	z-index: 75;
}
.na-sticky-bar.is-visible {
	transform: none;
}
.na-sticky-bar[hidden] {
	display: none;
}
.na-sticky-bar__inner {
	align-items: center;
	display: flex;
	gap: var(--s3);
	justify-content: space-between;
}
.na-sticky-bar__info {
	flex: 1;
	min-width: 0;
}
.na-sticky-bar__name {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	display: -webkit-box;
	font-size: 13px;
	font-weight: 600;
	overflow: hidden;
}
.na-sticky-bar__price {
	color: var(--smoke);
	font-size: 13px;
}
.na-sticky-bar__btn {
	flex-shrink: 0;
	min-height: 40px;
	padding: var(--s2) var(--s4);
}
@media (min-width: 768px) {
	.na-sticky-bar {
		display: none !important;
	}
}

/* ============================================================
   25. PAYMENT METHOD ICONS
   ============================================================ */
.na-payment-icons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	padding: var(--s3) 0;
}
.na-payment-icon {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--smoke);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	padding: var(--s1) var(--s3);
	text-transform: uppercase;
}

/* ============================================================
   26. WHATSAPP FAB TOOLTIP
   ============================================================ */
.na-fab__tooltip {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--bone);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	opacity: 0;
	padding: var(--s1) var(--s3);
	pointer-events: none;
	position: absolute;
	right: calc(100% + var(--s2));
	text-transform: uppercase;
	top: 50%;
	transform: translateY(-50%) translateX(4px);
	transition: opacity 200ms var(--ease), transform 200ms var(--ease);
	white-space: nowrap;
}
.na-fab:hover .na-fab__tooltip {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}

/* ============================================================
   27. NEWSLETTER PRIVACY NOTE
   ============================================================ */
.na-privacy-note {
	color: var(--text-tertiary);
	font-size: 12px;
	margin-top: var(--s2);
}

/* ============================================================
   28. SEARCH EMPTY STATE
   ============================================================ */
.na-search-noresults {
	color: var(--smoke);
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	padding: var(--s4) 0;
	text-transform: uppercase;
}

/* ============================================================
   29. FIXED-ELEMENT COORDINATION
   While the sticky add-to-cart bar is visible (mobile product pages,
   body.na-sticky-atc set by main.js), lift the FAB and scroll-top
   above it instead of colliding.
   ============================================================ */
@media (max-width: 767px) {
	body.na-sticky-atc .na-fab,
	body.na-sticky-atc .na-scrolltop {
		bottom: calc(72px + var(--s4) + env(safe-area-inset-bottom, 0px));
	}
}

/* ============================================================
   30. ABOUT PAGE (template-about.php)
   ============================================================ */
.na-about__title {
	font-size: clamp(32px, 7vw, 56px);
	margin: var(--s3) 0 var(--s5);
}
.na-about__content {
	max-width: 68ch;
}
.na-about__content p {
	color: var(--text-secondary);
	font-size: 16px;
	line-height: 1.75;
	margin: 0 0 var(--s4);
}
.na-about__content h2,
.na-about__content h3 {
	color: var(--bone);
	font-family: var(--font-display);
	margin: var(--s5) 0 var(--s3);
	text-transform: uppercase;
}
.na-about__timeline {
	display: grid;
	gap: var(--s3);
	grid-template-columns: 1fr;
}
.na-about__milestone {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	display: flex;
	flex-direction: column;
	gap: var(--s2);
	padding: var(--s4);
}
.na-about__year {
	color: var(--acid);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.na-about__event {
	color: var(--text-secondary);
	font-size: 14px;
	line-height: 1.6;
}

/* ============================================================
   31. BLOG — news feed (home.php) + single post (single.php)
   ============================================================ */
.na-blog {
	padding: var(--s6) 0 var(--s7);
}
.na-blog__head {
	margin-bottom: var(--s6);
}
.na-blog__title {
	font-size: clamp(32px, 7vw, 56px);
	margin: var(--s3) 0 0;
}
/* Brand filter: chip links under the title (shares .na-chip with the shop). */
.na-blog__filter {
	margin-top: var(--s5);
}
.na-blog__filter-label {
	margin: 0 0 var(--s2);
}
.na-blog__filter .na-chip {
	text-decoration: none;
}
.na-blog__filter .na-chip:hover,
.na-blog__filter .na-chip:focus-visible {
	border-color: var(--bone);
}
.na-blog__filter .na-chip.is-active,
.na-blog__filter .na-chip.is-active:hover {
	border-color: var(--acid);
	color: var(--acid);
}
.na-blog__filter .na-chip {
	gap: 0.5ch;
}
.na-chip__count {
	color: var(--smoke);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
}
.na-blog__filter .na-chip.is-active .na-chip__count {
	color: inherit;
}
/* Brands with no stories yet: visible but quiet. */
.na-blog__filter .na-chip.is-empty {
	color: var(--smoke);
}
.na-blog__filter .na-chip.is-empty:hover,
.na-blog__filter .na-chip.is-empty:focus-visible {
	color: var(--bone);
}
.na-blog__filter span.na-chip.is-empty {
	cursor: default;
}
.na-post-card__cat {
	color: inherit;
	text-decoration: none;
}
.na-post-card__cat:hover,
.na-post-card__cat:focus-visible {
	color: var(--acid);
}
.na-blog__grid {
	display: grid;
	gap: var(--s6) var(--s4);
	grid-template-columns: 1fr;
}
/* Column steps live here, after the base rule, so they actually win the
   cascade (the shared breakpoint blocks above are overridden by it). */
@media (min-width: 768px) {
	.na-blog__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1100px) {
	.na-blog__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
.na-post-card {
	display: flex;
	flex-direction: column;
	gap: var(--s2);
	margin: 0;
}
.na-post-card__media {
	aspect-ratio: 16 / 10;
	background: linear-gradient(150deg, #191919, #0e0e0e);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	display: block;
	overflow: hidden;
}
.na-post-card__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms var(--ease);
	width: 100%;
}
.na-post-card:hover .na-post-card__media img {
	transform: scale(1.04);
}
.na-post-card__meta {
	align-items: baseline;
	color: var(--smoke);
	display: flex;
	flex-wrap: wrap;
	font-size: 11px;
	gap: var(--s2);
	letter-spacing: 0.14em;
	margin-top: var(--s2);
	text-transform: uppercase;
}
.na-post-card__title {
	font-family: var(--font-body);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
}
.na-post-card__title a {
	color: var(--bone);
	text-decoration: none;
}
.na-post-card__title a:hover,
.na-post-card__title a:focus-visible {
	color: var(--acid);
}
.na-post-card__excerpt {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	color: var(--text-secondary);
	display: -webkit-box;
	font-size: 14.5px;
	line-height: 1.65;
	margin: 0;
	overflow: hidden;
}
.na-post-card__more {
	color: var(--acid);
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	margin-top: var(--s1);
	text-decoration: none;
	text-transform: uppercase;
}
.na-post-card__more:hover {
	text-decoration: underline;
}
.na-blog__empty {
	align-items: center;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	display: flex;
	flex-direction: column;
	gap: var(--s3);
	padding: var(--s7) var(--s4);
	text-align: center;
}
.na-blog__empty p {
	color: var(--text-secondary);
	margin: 0;
	max-width: 46ch;
}

/* Single post. */
.na-post {
	padding: var(--s6) 0 var(--s7);
}
.na-post__head {
	margin: 0 auto var(--s5);
	max-width: 760px;
}
.na-post__title {
	font-size: clamp(28px, 6vw, 46px);
	line-height: 1.08;
	margin: var(--s3) 0 0;
	text-wrap: balance;
}
.na-post__hero {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	margin: 0 auto var(--s6);
	max-width: 960px;
	overflow: hidden;
}
.na-post__hero img {
	display: block;
	height: auto;
	width: 100%;
}
.na-prose {
	margin: 0 auto;
	max-width: 700px;
}
.na-prose p {
	color: var(--text-secondary);
	font-size: 17px;
	line-height: 1.8;
	margin: 0 0 var(--s4);
}
.na-prose h2,
.na-prose h3 {
	color: var(--bone);
	line-height: 1.25;
	margin: var(--s6) 0 var(--s3);
}
.na-prose h2 {
	font-size: 24px;
}
.na-prose h3 {
	font-size: 19px;
}
.na-prose a {
	color: var(--acid);
}
.na-prose img {
	border-radius: var(--radius);
	height: auto;
	max-width: 100%;
}
.na-prose ul,
.na-prose ol {
	color: var(--text-secondary);
	font-size: 17px;
	line-height: 1.8;
	margin: 0 0 var(--s4);
	padding-left: 24px;
}
.na-prose li {
	margin-bottom: var(--s2);
}
.na-prose blockquote {
	border-left: 2px solid var(--acid);
	margin: var(--s5) 0;
	padding: var(--s1) 0 var(--s1) var(--s4);
}
.na-prose blockquote p {
	color: var(--bone);
	font-size: 19px;
}
.na-post__foot {
	border-top: 1px solid var(--line);
	margin: var(--s6) auto 0;
	max-width: 700px;
	padding-top: var(--s5);
}
.na-post__back {
	color: var(--smoke);
	display: inline-block;
	font-size: 12px;
	letter-spacing: 0.14em;
	margin-bottom: var(--s4);
	text-decoration: none;
	text-transform: uppercase;
}
.na-post__back:hover {
	color: var(--acid);
}
.na-post .post-navigation .nav-links {
	display: flex;
	gap: var(--s3);
	justify-content: space-between;
}
.na-post .post-navigation a {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 4px;
	max-width: 48%;
	padding: var(--s3) var(--s4);
	text-decoration: none;
}
.na-post .post-navigation a:hover {
	border-color: var(--acid);
}
.na-post .post-navigation .nav-next {
	text-align: right;
}
.na-postnav__label {
	color: var(--smoke);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.na-postnav__title {
	color: var(--bone);
	font-size: 14px;
	font-weight: 600;
}