/*
Theme Name: Noble Collectable
Theme URI: https://noblecollectable.com
Author: Yousha Rizvi
Author URI: https://yousha.dev
Description: Bespoke WooCommerce theme for Noble Collectable — graded, authenticated football card collectibles. Standalone theme built to the Noble Collectable brand guide.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: noblecollectable
Tags: e-commerce, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   1. DESIGN TOKENS — per docs/BRAND_GUIDE.md
   ========================================================================== */

:root {
	/* Primary brand */
	--nc-burgundy-900: #3d0f1f;
	--nc-burgundy-800: #5a1429;
	--nc-burgundy-700: #7c1d35;

	/* Accent */
	--nc-gold-300: #e5c158;
	--nc-gold-400: #d4a550;
	--nc-gold-500: #b8935a;

	/* Supporting */
	--nc-navy-900: #0c1a3f;
	--nc-navy-800: #16264f;
	--nc-slate-50: #f8fafc;
	--nc-slate-100: #f1f5f9;
	--nc-slate-200: #e2e8f0;
	--nc-slate-300: #cbd5e1;
	--nc-slate-600: #475569;

	/* Semantic */
	--nc-success: #059669;
	--nc-warning: #ea580c;
	--nc-critical: #dc2626;

	/* Roles */
	--nc-bg: #ffffff;
	--nc-bg-subtle: var(--nc-slate-50);
	--nc-bg-card: #ffffff;
	--nc-text: var(--nc-navy-900);
	--nc-text-muted: var(--nc-slate-600);
	--nc-border: var(--nc-slate-200);
	--nc-accent: var(--nc-gold-400);

	/* Type */
	--nc-font-display: Georgia, "Times New Roman", serif;
	--nc-font-body: Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* Space */
	--nc-container: 1280px;
	--nc-gutter: 1.5rem;
	--nc-radius: 4px;

	/* Elevation */
	--nc-shadow-sm: 0 1px 2px rgba(12, 26, 63, .06);
	--nc-shadow-md: 0 4px 16px rgba(12, 26, 63, .08);
	--nc-shadow-lg: 0 12px 32px rgba(12, 26, 63, .14);

	--nc-transition: .22s ease;
}

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

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--nc-bg);
	color: var(--nc-text);
	font-family: var(--nc-font-body);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Prevent any oversized media from blowing out flex/grid tracks.
   This is the rule whose absence broke earlier grid attempts. */
img,
svg,
video,
canvas,
iframe {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--nc-burgundy-800);
	text-decoration: none;
	transition: color var(--nc-transition);
}

a:hover,
a:focus {
	color: var(--nc-burgundy-700);
}

:focus-visible {
	outline: 2px solid var(--nc-gold-400);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ==========================================================================
   3. TYPOGRAPHY — scale per brand guide
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--nc-font-display);
	font-weight: 700;
	color: var(--nc-navy-900);
	margin: 0 0 .75em;
	line-height: 1.18;
}

h1 { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem); letter-spacing: -.01em; }
h3 { font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem); }
h4 { font-size: 1.25rem; }

p { margin: 0 0 1.25rem; }
p:last-child { margin-bottom: 0; }

/* --- Icons ---------------------------------------------------------------
   Material-style solid glyphs on a 24×24 grid. They scale with font-size and
   inherit `currentColor`, so an icon always matches the text beside it.
   Overrides the global `svg { display: block }` reset. */
.nc-icon {
	display: inline-block;
	width: 1.15em;
	height: 1.15em;
	fill: currentColor;
	flex: none;
	vertical-align: -.22em;
}

.nc-icon--lg { width: 1.6em; height: 1.6em; }

.nc-eyebrow {
	font-family: var(--nc-font-body);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--nc-burgundy-800);
	margin: 0 0 .75rem;
}

.nc-lede {
	font-size: 1.125rem;
	color: var(--nc-text-muted);
	max-width: 60ch;
}

/* Gold accent rule — brand signature element */
.nc-rule {
	display: block;
	width: 64px;
	height: 3px;
	border: 0;
	margin: 0 0 1.25rem;
	background: linear-gradient(90deg, var(--nc-gold-300), var(--nc-gold-500));
}

.nc-rule--center { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

.nc-container {
	width: 100%;
	max-width: var(--nc-container);
	margin-inline: auto;
	padding-inline: var(--nc-gutter);
}

.nc-section { padding-block: clamp(3rem, 6vw, 5rem); }
.nc-section--subtle { background: var(--nc-bg-subtle); }

.site-main { min-height: 50vh; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: .75rem 1.25rem;
	background: var(--nc-navy-900);
	color: #fff;
}

.skip-link:focus {
	left: 1rem;
	top: 1rem;
	color: #fff;
}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.nc-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .8rem 1.5rem;
	border: 2px solid var(--nc-navy-900);
	border-radius: var(--nc-radius);
	background: var(--nc-navy-900);
	color: #fff;
	font-family: var(--nc-font-body);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .5px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--nc-transition), border-color var(--nc-transition),
		color var(--nc-transition), transform var(--nc-transition), box-shadow var(--nc-transition);
}

.nc-btn:hover,
.nc-btn:focus,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--nc-burgundy-800);
	border-color: var(--nc-burgundy-800);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--nc-shadow-md);
}

.nc-btn--ghost {
	background: transparent;
	color: var(--nc-navy-900);
	border-color: var(--nc-slate-300);
}

.nc-btn--ghost:hover,
.nc-btn--ghost:focus {
	background: var(--nc-navy-900);
	border-color: var(--nc-navy-900);
	color: #fff;
}

.nc-btn--gold {
	background: var(--nc-gold-400);
	border-color: var(--nc-gold-400);
	color: var(--nc-navy-900);
}

.nc-btn--gold:hover,
.nc-btn--gold:focus {
	background: var(--nc-gold-300);
	border-color: var(--nc-gold-300);
	color: var(--nc-navy-900);
}

.nc-btn--block { width: 100%; }

/* ==========================================================================
   6. TOP BAR + HEADER
   ========================================================================== */

.nc-topbar {
	background: var(--nc-navy-900);
	color: rgba(255, 255, 255, .82);
	font-size: .75rem;
	letter-spacing: .05em;
}

.nc-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	min-height: 38px;
	flex-wrap: wrap;
	text-align: center;
}

.nc-topbar__item {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	white-space: nowrap;
}

.nc-topbar__item .nc-icon {
	color: var(--nc-gold-400);
	width: 15px;
	height: 15px;
	vertical-align: -.2em;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	border-bottom: 1px solid var(--nc-border);
	transition: box-shadow var(--nc-transition);
}

.site-header.is-stuck { box-shadow: var(--nc-shadow-md); }

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 84px;
}

/* Logo */
.site-brand {
	display: inline-flex;
	align-items: center;
	flex: none;
	line-height: 0;
}

.site-brand svg,
.site-brand img {
	height: 52px;
	width: auto;
	max-width: 240px;
}

.site-brand__text {
	font-family: var(--nc-font-display);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--nc-burgundy-800);
	line-height: 1.1;
}

/* Primary nav */
.nc-nav ul {
	display: flex;
	align-items: center;
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nc-nav a {
	display: inline-block;
	padding: .35rem 0;
	color: var(--nc-navy-900);
	font-size: .9375rem;
	font-weight: 700;
	border-bottom: 2px solid transparent;
	transition: color var(--nc-transition), border-color var(--nc-transition);
}

.nc-nav a:hover,
.nc-nav a:focus,
.nc-nav .current-menu-item > a,
.nc-nav .current_page_item > a {
	color: var(--nc-burgundy-800);
	border-bottom-color: var(--nc-gold-400);
}

/* Header actions */
.site-header__actions {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex: none;
}

.nc-cart-link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .55rem .9rem;
	border: 1px solid var(--nc-border);
	border-radius: var(--nc-radius);
	color: var(--nc-navy-900);
	font-size: .875rem;
	font-weight: 700;
	transition: border-color var(--nc-transition), background var(--nc-transition);
}

.nc-cart-link:hover,
.nc-cart-link:focus {
	border-color: var(--nc-gold-400);
	background: var(--nc-slate-50);
	color: var(--nc-burgundy-800);
}

.nc-cart-link__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 .35rem;
	border-radius: 10px;
	background: var(--nc-burgundy-800);
	color: #fff;
	font-size: .6875rem;
	line-height: 1;
}

/* Mobile toggle */
.nc-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	padding: 0;
	border: 1px solid var(--nc-border);
	border-radius: var(--nc-radius);
	background: #fff;
	cursor: pointer;
}

.nc-nav-toggle__bars,
.nc-nav-toggle__bars::before,
.nc-nav-toggle__bars::after {
	display: block;
	width: 20px; height: 2px;
	background: var(--nc-navy-900);
	transition: transform var(--nc-transition), opacity var(--nc-transition);
}

.nc-nav-toggle__bars {
	position: relative;
}

.nc-nav-toggle__bars::before,
.nc-nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.nc-nav-toggle__bars::before { top: -6px; }
.nc-nav-toggle__bars::after { top: 6px; }

.nc-nav-toggle[aria-expanded="true"] .nc-nav-toggle__bars { background: transparent; }
.nc-nav-toggle[aria-expanded="true"] .nc-nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nc-nav-toggle[aria-expanded="true"] .nc-nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   7. HERO
   ========================================================================== */

/* Rich banner treatment.
   Uses the dark-mode palette sanctioned in docs/BRAND_GUIDE.md: Navy 900
   ground, gold brightened to #e5c158, burgundy lifted for contrast.
   Four stacked layers — burgundy bloom, gold bloom, deep diagonal ramp, and
   a vignette — so it reads as depth rather than a flat fill. */
.nc-hero {
	position: relative;
	isolation: isolate;
	padding-block: clamp(4rem, 9vw, 7rem);
	overflow: hidden;
	background-color: var(--nc-navy-900);
	background-image:
		radial-gradient(78% 105% at 12% -10%, rgba(124, 29, 53, .72) 0%, rgba(124, 29, 53, 0) 62%),
		radial-gradient(62% 85% at 92% 108%, rgba(212, 165, 80, .26) 0%, rgba(212, 165, 80, 0) 66%),
		radial-gradient(90% 70% at 50% 120%, rgba(61, 15, 31, .85) 0%, rgba(61, 15, 31, 0) 70%),
		linear-gradient(155deg, #0a1633 0%, #101f45 42%, #2b0f24 100%);
	color: rgba(255, 255, 255, .80);
	border-bottom: 0;
}

/* Gold lattice, strongest toward the artwork side. */
.nc-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: url("assets/images/pattern-lattice.svg");
	background-repeat: repeat;
	background-size: 52px 52px;
	opacity: .85;
	-webkit-mask-image: radial-gradient(105% 120% at 88% 42%, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 78%);
	mask-image: radial-gradient(105% 120% at 88% 42%, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 78%);
	pointer-events: none;
}

/* Copy scrim + vignette + gold hairline along the bottom edge.
   The scrim darkens only the left third, where the headline sits, so the
   text keeps a solid contrast field while the artwork side stays rich. */
.nc-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		linear-gradient(96deg, rgba(4, 9, 22, .90) 0%, rgba(4, 9, 22, .74) 30%, rgba(4, 9, 22, .26) 56%, rgba(4, 9, 22, 0) 74%),
		radial-gradient(120% 100% at 50% 45%, transparent 45%, rgba(4, 9, 22, .55) 100%),
		linear-gradient(180deg, transparent calc(100% - 3px), var(--nc-gold-400) calc(100% - 3px));
}

/* Hero typography on the dark ground.
   The headline is gold rather than white: against a navy/burgundy field white
   separates on luminance alone, which the background blooms erode. Gold adds
   hue separation, so it holds up wherever the bloom falls. The eyebrow drops
   to white so the two are not competing in the same colour. */
.nc-hero .nc-eyebrow {
	color: rgba(255, 255, 255, .80);
	text-shadow: 0 1px 6px rgba(4, 9, 22, .7);
}

.nc-hero h1 {
	color: var(--nc-gold-300);
	text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 4px 26px rgba(4, 9, 22, .8);
}

.nc-hero .nc-lede {
	color: rgba(255, 255, 255, .88);
	text-shadow: 0 1px 10px rgba(4, 9, 22, .6);
}

.nc-hero .nc-rule { box-shadow: 0 0 18px rgba(229, 193, 88, .5); }

/* Buttons invert on the dark banner. */
.nc-hero .nc-btn {
	background: var(--nc-gold-400);
	border-color: var(--nc-gold-400);
	color: var(--nc-navy-900);
}

.nc-hero .nc-btn:hover,
.nc-hero .nc-btn:focus {
	background: var(--nc-gold-300);
	border-color: var(--nc-gold-300);
	color: var(--nc-navy-900);
}

.nc-hero .nc-btn--ghost {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(229, 193, 88, .55);
	color: #fff;
}

.nc-hero .nc-btn--ghost:hover,
.nc-hero .nc-btn--ghost:focus {
	background: #fff;
	border-color: #fff;
	color: var(--nc-navy-900);
}

.nc-hero__grid { position: relative; z-index: 1; }

.nc-hero__inner { max-width: 720px; }

/* Split hero: copy left, live listing right. */
.nc-hero--split .nc-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.nc-hero--split .nc-hero__inner { max-width: none; }

.nc-hero__media {
	margin: 0;
	min-width: 0;
	justify-self: center;
	max-width: 340px;
	width: 100%;
}

/* Light frame so the card reads against the dark banner, with a gold keyline
   and a warm bloom behind it. */
.nc-hero__card {
	position: relative;
	display: block;
	padding: .85rem;
	border: 1px solid rgba(229, 193, 88, .75);
	border-radius: var(--nc-radius);
	background: linear-gradient(158deg, #ffffff 0%, var(--nc-slate-100) 100%);
	box-shadow:
		0 0 0 6px rgba(229, 193, 88, .09),
		0 28px 64px rgba(4, 9, 22, .55);
	transform: rotate(-2.5deg);
	transition: transform var(--nc-transition), box-shadow var(--nc-transition);
}

.nc-hero__card:hover,
.nc-hero__card:focus-visible {
	transform: rotate(0deg) translateY(-6px);
	box-shadow:
		0 0 0 6px rgba(229, 193, 88, .18),
		0 34px 72px rgba(4, 9, 22, .62);
}


.nc-hero__card img {
	width: 100%;
	height: auto;
	border-radius: 2px;
}

.nc-hero__badge {
	top: 1.6rem;
	left: 1.6rem;
	box-shadow: var(--nc-shadow-sm);
}

.nc-hero__caption {
	margin-top: 1.25rem;
	text-align: center;
	font-size: .875rem;
	line-height: 1.45;
}

.nc-hero__caption-label {
	display: block;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .58);
	margin-bottom: .3rem;
}

.nc-hero__caption a {
	font-family: var(--nc-font-display);
	font-weight: 700;
	color: #fff;
}

.nc-hero__caption a:hover { color: var(--nc-gold-300); }

/* Colour lives with the rest of the dark-banner typography above —
   keeping a second `.nc-hero h1` colour here would win on source order. */
.nc-hero h1 { margin-bottom: 1.25rem; }

.nc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 2rem;
}

/* Page header (interior pages / shop) — same banner language as the hero,
   at a shallower height. */
.nc-page-header {
	position: relative;
	isolation: isolate;
	padding-block: clamp(2.75rem, 5.5vw, 4.25rem);
	margin-bottom: clamp(2rem, 4vw, 3rem);
	overflow: hidden;
	background-color: var(--nc-navy-900);
	background-image:
		radial-gradient(70% 130% at 8% -20%, rgba(124, 29, 53, .62) 0%, rgba(124, 29, 53, 0) 64%),
		radial-gradient(55% 110% at 95% 120%, rgba(212, 165, 80, .20) 0%, rgba(212, 165, 80, 0) 68%),
		linear-gradient(150deg, #0a1633 0%, #101f45 50%, #2b0f24 100%);
	color: rgba(255, 255, 255, .78);
	border-bottom: 0;
}

.nc-page-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: url("assets/images/pattern-lattice.svg");
	background-repeat: repeat;
	background-size: 52px 52px;
	opacity: .7;
	-webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 100%);
	mask-image: linear-gradient(100deg, transparent 30%, #000 100%);
	pointer-events: none;
}

.nc-page-header::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(120% 110% at 40% 40%, transparent 50%, rgba(4, 9, 22, .48) 100%),
		linear-gradient(180deg, transparent calc(100% - 3px), var(--nc-gold-400) calc(100% - 3px));
}

.nc-page-header > .nc-container { position: relative; z-index: 1; }

.nc-page-header h1 { margin-bottom: .5rem; color: #fff; }
.nc-page-header p { margin: 0; color: rgba(255, 255, 255, .72); }
.nc-page-header .nc-rule { box-shadow: 0 0 16px rgba(229, 193, 88, .45); }
.nc-page-header .nc-meta { color: rgba(255, 255, 255, .6); }
.nc-page-header a { color: var(--nc-gold-300); }

/* ==========================================================================
   8. WOOCOMMERCE — PRODUCT GRID
   --------------------------------------------------------------------------
   WooCommerce ships float-based widths (li.product { width: 22.05%; float: left })
   in woocommerce-layout.css. We replace that wholesale with CSS Grid.
   `min-width: 0` on the grid item is REQUIRED: without it the item's min-content
   width is set by the product image and the tracks overflow the container.
   ========================================================================== */

.woocommerce ul.products,
ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.5rem 1.75rem;
	margin: 0 0 3rem;
	padding: 0;
	list-style: none;
}

/* Kill WooCommerce's clearfix pseudo-elements — they create phantom grid cells. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after {
	content: none !important;
	display: none !important;
}

.woocommerce ul.products li.product,
ul.products li.product {
	width: auto !important;
	float: none !important;
	clear: none !important;
	margin: 0 !important;
	padding: 0;
	min-width: 0;   /* critical — prevents image-driven track blowout */
	list-style: none;
}

/* --- Product card ------------------------------------------------------- */

.nc-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
	background: var(--nc-bg-card);
	border: 1px solid var(--nc-border);
	border-radius: var(--nc-radius);
	overflow: hidden;
	transition: border-color var(--nc-transition), box-shadow var(--nc-transition),
		transform var(--nc-transition);
}

.nc-card:hover,
.nc-card:focus-within {
	border-color: var(--nc-gold-400);
	box-shadow: var(--nc-shadow-lg);
	transform: translateY(-4px);
}

.nc-card__media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	background: var(--nc-slate-100);
	overflow: hidden;
}

.nc-card__media img {
	width: 100%;
	height: 100%;
	/* `contain` so the graded slab and its cert label are never cropped. */
	object-fit: contain;
	padding: .75rem;
	transition: transform .35s ease;
}

.nc-card:hover .nc-card__media img { transform: scale(1.04); }

/* Grade badge — navy with gold trim, per brand guide */
.nc-badge {
	position: absolute;
	top: .75rem;
	left: .75rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .3rem .6rem;
	border: 1px solid var(--nc-gold-400);
	border-radius: 3px;
	background: var(--nc-navy-900);
	color: #fff;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1;
}

.nc-badge--sale {
	left: auto;
	right: .75rem;
	background: var(--nc-burgundy-800);
	border-color: var(--nc-burgundy-800);
}

.nc-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 1.25rem;
	min-width: 0;
}

.nc-card__title {
	font-family: var(--nc-font-display);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 .65rem;
	color: var(--nc-navy-900);
	/* keep card heights even across the row */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	overflow: hidden;
}

.nc-card__title a { color: inherit; }
.nc-card__title a:hover { color: var(--nc-burgundy-800); }

/* Gold accent bar under product title — brand signature */
.nc-card__accent {
	width: 40px;
	height: 2px;
	margin-bottom: .85rem;
	background: linear-gradient(90deg, var(--nc-gold-300), var(--nc-gold-500));
	flex: none;
}

.nc-card__specs {
	margin: 0 0 1rem;
	padding: 0;
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--nc-text-muted);
}

.nc-card__spec {
	display: flex;
	justify-content: space-between;
	gap: .75rem;
	padding: .3rem 0;
	border-bottom: 1px dotted var(--nc-slate-200);
	min-width: 0;
}

.nc-card__spec:last-child { border-bottom: 0; }

.nc-card__spec dt {
	flex: none;
	font-weight: 700;
	color: var(--nc-navy-900);
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: .6875rem;
	padding-top: .1rem;
}

.nc-card__spec dd {
	margin: 0;
	text-align: right;
	min-width: 0;
	overflow-wrap: anywhere;
}

.nc-card__footer { margin-top: auto; }

.nc-card__price {
	font-family: var(--nc-font-display);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--nc-burgundy-800);
	line-height: 1.2;
	margin-bottom: .35rem;
}

.nc-card__price del {
	font-size: .9rem;
	color: var(--nc-slate-600);
	font-weight: 400;
	margin-right: .4rem;
}

.nc-card__price ins { text-decoration: none; }

.nc-card__stock {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-bottom: 1rem;
}

.nc-card__stock .nc-icon {
	width: 15px;
	height: 15px;
	vertical-align: 0;
}

.nc-card__stock--in { color: var(--nc-success); }
.nc-card__stock--out { color: var(--nc-critical); }

.nc-card__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .6rem;
}

/* WooCommerce injects its own classes on the add-to-cart anchor. */
.nc-card__actions .button,
.nc-card__actions .nc-btn {
	width: 100%;
	padding: .7rem .75rem;
	font-size: .8125rem;
	margin: 0 !important;
}

.nc-card__actions .added_to_cart {
	grid-column: 1 / -1;
	text-align: center;
	font-size: .8125rem;
	font-weight: 700;
	color: var(--nc-success);
}

/* ==========================================================================
   9. WOOCOMMERCE — SHOP CHROME (toolbar, sorting, pagination, notices)
   ========================================================================== */

/* WooCommerce floats these; the toolbar lays them out itself. */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	float: none !important;
	margin: 0 !important;
}

/* One horizontal row: count | search | sort.
   Count and sort size to their content; search is the only growable item, so
   it takes every remaining pixel. */
.nc-shop-toolbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .85rem 1.25rem;
	padding-bottom: 1.5rem;
	/* Separation from the first product row. */
	margin-bottom: 2.5rem;
	border-bottom: 1px solid var(--nc-border);
	font-size: .875rem;
	color: var(--nc-text-muted);
}

.nc-shop-toolbar__count {
	flex: 0 0 auto;
	white-space: nowrap;
}

.nc-shop-toolbar__sort { flex: 0 0 auto; }

/* Search fills the gap between the two fixed items. */
.nc-shop-toolbar .nc-search {
	flex: 1 1 240px;
	min-width: 0;
}

/* --- Search --------------------------------------------------------- */

.nc-search {
	display: flex;
	align-items: stretch;
	min-width: 0;
}

.nc-search__field {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	padding: .6rem .85rem;
	border: 1px solid var(--nc-border);
	border-right: 0;
	border-radius: var(--nc-radius) 0 0 var(--nc-radius);
	background: #fff;
	font-family: var(--nc-font-body);
	font-size: .875rem;
	color: var(--nc-navy-900);
	transition: border-color var(--nc-transition), box-shadow var(--nc-transition);
}

.nc-search__field::placeholder { color: var(--nc-slate-600); opacity: .8; }

.nc-search__field:focus {
	outline: none;
	border-color: var(--nc-gold-400);
	box-shadow: 0 0 0 3px rgba(212, 165, 80, .18);
}

.nc-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	padding: 0;
	border: 1px solid var(--nc-navy-900);
	border-radius: 0 var(--nc-radius) var(--nc-radius) 0;
	background: var(--nc-navy-900);
	color: #fff;
	cursor: pointer;
	transition: background var(--nc-transition), border-color var(--nc-transition);
}

.nc-search__submit:hover,
.nc-search__submit:focus {
	background: var(--nc-burgundy-800);
	border-color: var(--nc-burgundy-800);
}

.nc-search__submit .nc-icon { width: 18px; height: 18px; vertical-align: 0; }

/* Toolbar controls share one height so they sit on a common baseline. */
.nc-shop-toolbar .nc-search__field,
.nc-shop-toolbar .nc-search__submit,
.nc-shop-toolbar .woocommerce-ordering select {
	height: 44px;
}

.nc-shop-toolbar .woocommerce-ordering select { min-width: 190px; }

/* Header search toggle + drop panel */
.nc-search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--nc-border);
	border-radius: var(--nc-radius);
	background: #fff;
	color: var(--nc-navy-900);
	cursor: pointer;
	transition: border-color var(--nc-transition), background var(--nc-transition),
		color var(--nc-transition);
}

.nc-search-toggle:hover,
.nc-search-toggle:focus,
.nc-search-toggle[aria-expanded="true"] {
	border-color: var(--nc-gold-400);
	background: var(--nc-slate-50);
	color: var(--nc-burgundy-800);
}

.nc-search-toggle .nc-icon { width: 20px; height: 20px; vertical-align: 0; }

.nc-header-search {
	border-top: 1px solid var(--nc-border);
	background: var(--nc-slate-50);
	padding-block: 1rem;
}

.nc-header-search[hidden] { display: none; }

.nc-search--header { max-width: 560px; margin-inline: auto; }

.woocommerce .woocommerce-ordering select,
.nc-select {
	padding: .55rem 2rem .55rem .75rem;
	border: 1px solid var(--nc-border);
	border-radius: var(--nc-radius);
	background: #fff;
	color: var(--nc-navy-900);
	font-family: var(--nc-font-body);
	font-size: .875rem;
	cursor: pointer;
}

.woocommerce nav.woocommerce-pagination ul {
	display: flex;
	justify-content: center;
	gap: .4rem;
	border: 0;
	margin: 2rem 0 0;
	padding: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	margin: 0;
	overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 .6rem;
	border: 1px solid var(--nc-border);
	border-radius: var(--nc-radius);
	background: #fff;
	color: var(--nc-navy-900);
	font-weight: 700;
	font-size: .875rem;
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: var(--nc-navy-900);
	border-color: var(--nc-navy-900);
	color: #fff;
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	border-top: 0;
	border-left: 4px solid var(--nc-navy-900);
	border-radius: var(--nc-radius);
	background: var(--nc-slate-50);
	color: var(--nc-navy-900);
	padding: 1rem 1.25rem;
	margin: 0 0 2rem;
	font-size: .9375rem;
	list-style: none;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }

.woocommerce-message { border-left-color: var(--nc-success); }
.woocommerce-error { border-left-color: var(--nc-critical); }
.woocommerce-info { border-left-color: var(--nc-gold-400); }

.woocommerce-breadcrumb {
	font-size: .8125rem;
	color: var(--nc-text-muted);
	margin: 0 0 1.5rem;
}

.woocommerce-breadcrumb a { color: var(--nc-text-muted); }
.woocommerce-breadcrumb a:hover { color: var(--nc-burgundy-800); }

/* ==========================================================================
   10. WOOCOMMERCE — SINGLE PRODUCT
   ========================================================================== */

.woocommerce div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.woocommerce div.product .woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
	margin: 0;
	min-width: 0;
	border: 1px solid var(--nc-border);
	border-radius: var(--nc-radius);
	background: var(--nc-slate-100);
	padding: 1rem;
}

.woocommerce div.product .woocommerce-product-gallery img { border-radius: 2px; }

.woocommerce div.product div.summary {
	width: 100% !important;
	float: none !important;
	margin: 0;
	min-width: 0;
}

.woocommerce div.product .product_title {
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
	margin-bottom: .75rem;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--nc-font-display);
	font-size: 2rem;
	font-weight: 700;
	color: var(--nc-burgundy-800);
	margin: 0 0 1.25rem;
}

.woocommerce div.product p.price del { color: var(--nc-slate-600); font-size: 1.25rem; }
.woocommerce div.product p.price ins { text-decoration: none; }

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--nc-text-muted);
	margin-bottom: 1.5rem;
}

.woocommerce div.product form.cart {
	display: flex;
	align-items: stretch;
	gap: .75rem;
	margin: 0 0 2rem;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--nc-border);
	flex-wrap: wrap;
}

.woocommerce div.product form.cart .quantity input.qty {
	width: 78px;
	height: 100%;
	min-height: 48px;
	padding: .5rem;
	border: 2px solid var(--nc-slate-300);
	border-radius: var(--nc-radius);
	font-size: 1rem;
	text-align: center;
}

.woocommerce div.product form.cart button.button { min-height: 48px; flex: 1 1 200px; }

.woocommerce div.product .stock {
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.woocommerce div.product .stock.in-stock { color: var(--nc-success); }
.woocommerce div.product .stock.out-of-stock { color: var(--nc-critical); }

.woocommerce div.product .product_meta {
	font-size: .8125rem;
	color: var(--nc-text-muted);
	padding-top: 1.25rem;
	border-top: 1px solid var(--nc-border);
}

.woocommerce div.product .product_meta > span { display: block; margin-bottom: .35rem; }

/* Certification / spec table injected into the summary */
.nc-spec-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.75rem;
	font-size: .875rem;
}

.nc-spec-table caption {
	font-family: var(--nc-font-body);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--nc-burgundy-800);
	text-align: left;
	padding-bottom: .6rem;
}

.nc-spec-table th,
.nc-spec-table td {
	padding: .65rem .25rem;
	border-bottom: 1px solid var(--nc-border);
	text-align: left;
	vertical-align: top;
}

.nc-spec-table th {
	width: 42%;
	font-weight: 700;
	font-size: .6875rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--nc-navy-900);
}

.nc-spec-table td { color: var(--nc-text-muted); }

/* Tabs / related — span both columns */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells {
	grid-column: 1 / -1;
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--nc-border);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0 0 1.75rem;
	padding: 0;
	list-style: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 1px solid var(--nc-border);
	border-radius: var(--nc-radius);
	background: #fff;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: .65rem 1.15rem;
	color: var(--nc-navy-900);
	font-weight: 700;
	font-size: .875rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: var(--nc-navy-900);
	border-color: var(--nc-navy-900);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #fff; }

.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2,
.woocommerce div.product .woocommerce-tabs h2 { margin-bottom: 1.5rem; }

/* ==========================================================================
   11. WOOCOMMERCE — CART / CHECKOUT / ACCOUNT
   ========================================================================== */

.woocommerce table.shop_table {
	border: 1px solid var(--nc-border);
	border-radius: var(--nc-radius);
	border-collapse: collapse;
	width: 100%;
}

.woocommerce table.shop_table th {
	background: var(--nc-slate-50);
	color: var(--nc-navy-900);
	font-size: .75rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: .9rem 1rem;
}

.woocommerce table.shop_table td { padding: 1rem; border-top: 1px solid var(--nc-border); }

.woocommerce .cart_totals h2,
.woocommerce-checkout h3 { font-size: 1.375rem; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.nc-input {
	width: 100%;
	padding: .75rem .9rem;
	border: 1px solid var(--nc-slate-300);
	border-radius: var(--nc-radius);
	background: #fff;
	font-family: var(--nc-font-body);
	font-size: .9375rem;
	color: var(--nc-navy-900);
	transition: border-color var(--nc-transition), box-shadow var(--nc-transition);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.nc-input:focus {
	border-color: var(--nc-gold-400);
	box-shadow: 0 0 0 3px rgba(212, 165, 80, .18);
	outline: none;
}

.woocommerce form .form-row label { font-size: .8125rem; font-weight: 700; color: var(--nc-navy-900); }

/* Cart/checkout/account article wrapper — full width, unlike .nc-prose. */
.nc-wc-page { width: 100%; }

.woocommerce .cart-collaterals .cart_totals { width: 100%; float: none; }

@media (min-width: 769px) {
	.woocommerce .cart-collaterals { display: flex; justify-content: flex-end; }
	.woocommerce .cart-collaterals .cart_totals { max-width: 420px; }
}

/* ==========================================================================
   12. HOME SECTIONS
   ========================================================================== */

.nc-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.75rem;
}

.nc-feature {
	min-width: 0;
	padding: 1.75rem;
	background: #fff;
	border: 1px solid var(--nc-border);
	border-radius: var(--nc-radius);
	transition: border-color var(--nc-transition), box-shadow var(--nc-transition);
}

.nc-feature:hover { border-color: var(--nc-gold-400); box-shadow: var(--nc-shadow-md); }

.nc-feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px; height: 52px;
	margin-bottom: 1.1rem;
	border: 2px solid var(--nc-gold-400);
	border-radius: 50%;
	background: var(--nc-slate-50);
	color: var(--nc-burgundy-800);
}

.nc-feature__icon .nc-icon {
	width: 26px;
	height: 26px;
	vertical-align: 0;
}

.nc-feature h3 { font-size: 1.1875rem; margin-bottom: .5rem; }
.nc-feature p { font-size: .9375rem; color: var(--nc-text-muted); margin: 0; }

.nc-section__head { margin-bottom: 2.5rem; }
.nc-section__head--center { text-align: center; }
.nc-section__head--center .nc-lede { margin-inline: auto; }

.nc-section__head--split {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}

/* Newsletter */
.nc-newsletter {
	background: var(--nc-navy-900);
	color: rgba(255, 255, 255, .85);
	border-radius: var(--nc-radius);
	padding: clamp(2rem, 5vw, 3.5rem);
	text-align: center;
}

.nc-newsletter h2 { color: #fff; }
.nc-newsletter .nc-rule { margin-inline: auto; }

.nc-newsletter__form {
	display: flex;
	gap: .75rem;
	max-width: 480px;
	margin: 1.75rem auto 0;
	flex-wrap: wrap;
}

.nc-newsletter__form .nc-input { flex: 1 1 220px; width: auto; }

/* ==========================================================================
   13. CONTENT / POSTS / 404
   ========================================================================== */

.nc-prose { max-width: 72ch; }
.nc-prose h2, .nc-prose h3 { margin-top: 2rem; }
.nc-prose ul, .nc-prose ol { padding-left: 1.4rem; margin: 0 0 1.25rem; }
.nc-prose li { margin-bottom: .4rem; }

.nc-prose blockquote {
	margin: 1.75rem 0;
	padding: .25rem 0 .25rem 1.5rem;
	border-left: 3px solid var(--nc-gold-400);
	font-family: var(--nc-font-display);
	font-size: 1.125rem;
	color: var(--nc-navy-900);
}

.nc-post-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
}

.nc-post-card {
	min-width: 0;
	border: 1px solid var(--nc-border);
	border-radius: var(--nc-radius);
	overflow: hidden;
	background: #fff;
}

.nc-post-card__body { padding: 1.25rem; }
.nc-post-card h2 { font-size: 1.1875rem; margin-bottom: .5rem; }

.nc-meta { font-size: .75rem; letter-spacing: .05em; color: var(--nc-text-muted); }

.nc-404 { text-align: center; padding-block: clamp(4rem, 10vw, 7rem); }
.nc-404 .nc-rule { margin-inline: auto; }

/* ==========================================================================
   14. FOOTER
   ========================================================================== */

.site-footer {
	background: var(--nc-navy-900);
	color: rgba(255, 255, 255, .72);
	margin-top: clamp(3rem, 7vw, 5rem);
	font-size: .9375rem;
}

.site-footer__top {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
	gap: 2.5rem;
	padding-block: clamp(3rem, 6vw, 4.5rem);
}

.site-footer h3 {
	color: #fff;
	font-family: var(--nc-font-body);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-bottom: 1.25rem;
}

.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { margin-bottom: .6rem; }

.site-footer a { color: rgba(255, 255, 255, .72); }
.site-footer a:hover,
.site-footer a:focus { color: var(--nc-gold-400); }

.site-footer__brand svg { height: 64px; width: auto; margin-bottom: 1rem; }

.site-footer__tagline { max-width: 34ch; font-size: .875rem; line-height: 1.6; }

.site-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding-block: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, .12);
	font-size: .8125rem;
}

.site-footer__trust {
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
	color: rgba(255, 255, 255, .6);
}

.site-footer__trust span {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}

.site-footer__trust .nc-icon {
	color: var(--nc-gold-400);
	width: 16px;
	height: 16px;
	vertical-align: 0;
}

/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
	.woocommerce ul.products,
	ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.site-footer__top { grid-template-columns: 1fr 1fr; gap: 2rem; }
	.nc-post-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.nc-grid-3 { grid-template-columns: 1fr; }

	.woocommerce div.product { grid-template-columns: minmax(0, 1fr); }

	/* Stack the hero: copy first, listing below. */
	.nc-hero--split .nc-hero__grid { grid-template-columns: minmax(0, 1fr); }
	.nc-hero__media { max-width: 280px; }
	.nc-hero__card { transform: none; }

	/* Copy is full-width when stacked, so the scrim runs top-to-bottom
	   instead of left-to-right. */
	.nc-hero::after {
		background:
			linear-gradient(180deg, rgba(4, 9, 22, .80) 0%, rgba(4, 9, 22, .58) 50%, rgba(4, 9, 22, .28) 100%),
			linear-gradient(180deg, transparent calc(100% - 3px), var(--nc-gold-400) calc(100% - 3px));
	}
}

@media (max-width: 782px) {
	/* WP admin bar stops being fixed below 782px — don't let the sticky
	   header sit under it. */
	.admin-bar .site-header { top: 0; }
}

@media (max-width: 860px) {
	.nc-nav-toggle { display: inline-flex; }

	.nc-nav {
		position: absolute;
		inset-inline: 0;
		top: 100%;
		display: none;
		background: #fff;
		border-bottom: 1px solid var(--nc-border);
		box-shadow: var(--nc-shadow-md);
		padding: 1rem var(--nc-gutter) 1.25rem;
	}

	.nc-nav.is-open { display: block; }

	.nc-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.nc-nav li { border-bottom: 1px solid var(--nc-border); }
	.nc-nav li:last-child { border-bottom: 0; }

	.nc-nav a {
		display: block;
		padding: .85rem 0;
		border-bottom: 0;
	}

	.site-header { position: relative; }
	.site-header__inner { min-height: 68px; }
	.site-brand svg,
	.site-brand img { height: 42px; }
}

@media (max-width: 560px) {
	.woocommerce ul.products,
	ul.products {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}

	.nc-post-list { grid-template-columns: minmax(0, 1fr); }
	.site-footer__top { grid-template-columns: 1fr; }
	.nc-card__actions { grid-template-columns: 1fr; }
	.nc-topbar__inner { font-size: .6875rem; gap: .75rem; }
	.nc-hero__actions .nc-btn { width: 100%; }
}

/* ==========================================================================
   16. PRINT / MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}