/* ==========================================================================
   NAGI — components
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons

   No scale on any button, ever. The red fill deepens, outlines fill from the
   bottom, arrows nudge. That is the whole vocabulary.
   -------------------------------------------------------------------------- */

.nagi-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--nagi-space-2);
	padding: 0.9rem 1.6rem;
	border-radius: var(--nagi-radius);
	font-family: var(--nagi-f-body);
	font-size: var(--nagi-t-small);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	transition: background-color var(--nagi-dur-s) var(--nagi-ease),
	            color var(--nagi-dur-s) var(--nagi-ease),
	            border-color var(--nagi-dur-s) var(--nagi-ease);
}

.nagi-btn__arrow {
	display: inline-block;
	transition: transform var(--nagi-dur-s) var(--nagi-ease);
}

.nagi-btn:hover .nagi-btn__arrow {
	transform: translateX(4px);
}

/* Primary — brand-red fill */
.nagi-btn--primary {
	background: var(--nagi-red);
	color: var(--nagi-on-red);
}

.nagi-btn--primary:hover {
	background: var(--nagi-red-deep);
}

/* Secondary — brand-red outline, fills from the bottom */
.nagi-btn--secondary {
	background: transparent;
	border: 1px solid var(--nagi-red);
	color: var(--nagi-surface-accent, var(--nagi-red-deep));
}

.nagi-btn--secondary::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--nagi-red);
	transform: scaleY(0);
	transform-origin: bottom center;
	transition: transform 300ms var(--nagi-ease);
}

.nagi-btn--secondary:hover {
	color: var(--nagi-ink);
}

.nagi-btn--secondary:hover::before {
	transform: scaleY(1);
}

/* Ghost */
.nagi-btn--ghost {
	background: transparent;
	border: 1px solid var(--nagi-surface-rule, rgba(31, 31, 31, 0.14));
	color: inherit;
}

.nagi-btn--ghost:hover {
	border-color: var(--nagi-red);
	color: var(--nagi-surface-accent, var(--nagi-red-deep));
}

/* Text with arrow */
.nagi-btn--text {
	padding: 0;
	background: none;
	color: var(--nagi-surface-accent, var(--nagi-red-deep));
	font-family: var(--nagi-f-mono);
	font-size: var(--nagi-t-micro);
	letter-spacing: var(--nagi-ls-mono);
	text-transform: uppercase;
	overflow: visible;
}

.nagi-btn--block { width: 100%; }
.nagi-btn--large { padding: 1.05rem 2rem; font-size: 0.9375rem; }

.nagi-btn[disabled],
.nagi-btn[aria-disabled="true"] {
	opacity: 0.45;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Trade Line nodes
   -------------------------------------------------------------------------- */

.nagi-node {
	display: inline-flex;
	align-items: center;
	gap: var(--nagi-space-2);
}

.nagi-node__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--nagi-red);
	flex: none;
	transform: scale(0);
	transition: transform 260ms var(--nagi-ease);
}

[data-motion="ready"] .nagi-node__dot { transform: scale(0); }
.nagi-node[data-revealed] .nagi-node__dot,
[data-motion="ready"] [data-revealed] .nagi-node__dot,
html:not([data-motion="ready"]) .nagi-node__dot { transform: scale(1); }

.nagi-node__label {
	font-family: var(--nagi-f-mono);
	font-size: var(--nagi-t-micro);
	letter-spacing: var(--nagi-ls-mono);
	text-transform: uppercase;
	color: var(--nagi-surface-mute, var(--nagi-text-mute));
	white-space: nowrap;
}

.nagi-node__coord { color: var(--nagi-surface-accent, var(--nagi-red-deep)); }

/* --------------------------------------------------------------------------
   The Trade Line itself. Brand red, 1px, left edge of the content column.
   Hidden below 900px — static nodes carry the idea instead.
   -------------------------------------------------------------------------- */

.nagi-trade-line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--nagi-gutter) / 2);
	width: 1px;
	pointer-events: none;
	z-index: 1;
}

.nagi-trade-line svg {
	width: 1px;
	height: 100%;
	overflow: visible;
}

.nagi-trade-line path {
	stroke: var(--nagi-red);
	stroke-width: 1;
	fill: none;
	opacity: 0.55;
}

@media (max-width: 900px) {
	.nagi-trade-line { display: none; }
}

/* --------------------------------------------------------------------------
   Marquee — Space Mono coordinates, 40s per loop, pauses on hover.
   -------------------------------------------------------------------------- */

.nagi-marquee {
	overflow: hidden;
	background: var(--nagi-ink);
	color: var(--nagi-red);
	border-block: 1px solid rgba(175, 26, 22, 0.25);
	padding-block: var(--nagi-space-2);
}

.nagi-marquee__track {
	display: flex;
	width: max-content;
	animation: nagi-marquee 40s linear infinite;
}

.nagi-marquee:hover .nagi-marquee__track,
.nagi-marquee:focus-within .nagi-marquee__track {
	animation-play-state: paused;
}

.nagi-marquee__item {
	font-family: var(--nagi-f-mono);
	font-size: var(--nagi-t-micro);
	letter-spacing: var(--nagi-ls-mono);
	text-transform: uppercase;
	padding-inline: var(--nagi-space-4);
	white-space: nowrap;
}

@keyframes nagi-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.nagi-header {
	position: sticky;
	top: 0;
	z-index: var(--nagi-z-header);
	background: transparent;
	color: var(--nagi-text-light);
	transition: background-color 300ms var(--nagi-ease),
	            transform 300ms var(--nagi-ease),
	            border-color 300ms var(--nagi-ease);
	border-bottom: 1px solid transparent;
}

.nagi-header[data-solid="true"] {
	background: var(--nagi-ink);
	border-bottom-color: rgba(175, 26, 22, 0.35);
}

.nagi-header[data-hidden="true"] {
	transform: translateY(-100%);
}

.nagi-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--nagi-space-4);
	min-height: var(--nagi-header-h);
}

.nagi-logo {
	font-family: var(--nagi-f-display);
	font-size: 1.5rem;
	letter-spacing: 0.14em;
	color: var(--nagi-red);
	line-height: 1;
	transition: letter-spacing 800ms var(--nagi-ease), opacity 800ms var(--nagi-ease);
}

html[data-motion="ready"] .nagi-logo { opacity: 0; }
.nagi-header[data-loaded="true"] .nagi-logo { opacity: 1; letter-spacing: 0.02em; }

.nagi-nav {
	display: flex;
	justify-content: center;
	gap: clamp(1rem, 2.2vw, 2.25rem);
}

.nagi-nav__link {
	position: relative;
	font-size: var(--nagi-t-small);
	font-weight: 500;
	padding-block: var(--nagi-space-2);
	white-space: nowrap;
}

.nagi-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;
	height: 1px;
	background: var(--nagi-red);
	transform: scaleX(0);
	/* Draws from the left on enter; retracts to the right on leave. */
	transform-origin: right center;
	transition: transform 240ms var(--nagi-ease);
}

.nagi-nav__link:hover::after,
.nagi-nav__link:focus-visible::after,
.nagi-nav__link[aria-current]::after {
	transform: scaleX(1);
	transform-origin: left center;
}

.nagi-utils {
	display: flex;
	align-items: center;
	gap: var(--nagi-space-3);
}

.nagi-util {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--nagi-radius);
	transition: color var(--nagi-dur-s) var(--nagi-ease);
}

.nagi-util:hover { color: var(--nagi-red); }

.nagi-util__count {
	position: absolute;
	top: 3px;
	right: 2px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--nagi-red);
	color: var(--nagi-on-red);
	font-family: var(--nagi-f-mono);
	font-size: 10px;
	line-height: 17px;
	text-align: center;
	transition: opacity var(--nagi-dur-xs) var(--nagi-ease);
}

.nagi-burger { display: none; }

@media (max-width: 1024px) {
	.nagi-nav { display: none; }
	.nagi-burger { display: inline-flex; }
	.nagi-header__inner { grid-template-columns: auto 1fr auto; }
}

/* --------------------------------------------------------------------------
   Announcement bar
   -------------------------------------------------------------------------- */

.nagi-announce {
	background: var(--nagi-coal);
	color: var(--nagi-text-light);
	font-size: var(--nagi-t-micro);
	font-family: var(--nagi-f-mono);
	letter-spacing: var(--nagi-ls-mono);
	text-transform: uppercase;
}

.nagi-announce__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--nagi-space-3);
	min-height: 36px;
	position: relative;
}

.nagi-announce__close {
	position: absolute;
	right: 0;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	opacity: 0.7;
}

.nagi-announce__close:hover { opacity: 1; }

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

   Hover: gallery image 2 cross-fades in, a red rule draws under the card,
   the name goes red, add-to-cart lifts. No scale jump, no shadow bloom.
   -------------------------------------------------------------------------- */

.nagi-card {
	position: relative;
	display: flex;
	flex-direction: column;
}

.nagi-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--nagi-ink);
	border-radius: var(--nagi-radius);
}

.nagi-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nagi-card__img--alt {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--nagi-dur-m) var(--nagi-ease);
}

.nagi-card:hover .nagi-card__img--alt {
	opacity: 1;
}

/* The accent rule under the card */
.nagi-card__media::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--nagi-accent, var(--nagi-red));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 350ms var(--nagi-ease);
}

.nagi-card:hover .nagi-card__media::after {
	transform: scaleX(1);
}

.nagi-card__body {
	padding-top: var(--nagi-space-3);
	display: flex;
	flex-direction: column;
	gap: var(--nagi-space-1);
	flex: 1;
}

.nagi-card__line {
	font-family: var(--nagi-f-mono);
	font-size: 10px;
	letter-spacing: var(--nagi-ls-mono);
	text-transform: uppercase;
	color: var(--nagi-accent, var(--nagi-red-deep));
}

.nagi-card__title {
	font-family: var(--nagi-f-display);
	font-size: 1.0625rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
	transition: color var(--nagi-dur-s) var(--nagi-ease);
}

.nagi-card:hover .nagi-card__title {
	color: var(--nagi-surface-accent, var(--nagi-red-deep));
}

.nagi-card__price {
	font-size: var(--nagi-t-small);
	color: var(--nagi-surface-mute, var(--nagi-text-mute));
	margin-top: auto;
}

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

.nagi-card__price del {
	opacity: 0.55;
	margin-right: 0.4em;
}

.nagi-card__atc {
	margin-top: var(--nagi-space-2);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--nagi-dur-m) var(--nagi-ease), transform var(--nagi-dur-m) var(--nagi-ease);
}

.nagi-card:hover .nagi-card__atc,
.nagi-card:focus-within .nagi-card__atc {
	opacity: 1;
	transform: translateY(0);
}

/* Touch devices never hide a control behind hover. */
@media (hover: none) {
	.nagi-card__atc {
		opacity: 1;
		transform: none;
	}

	.nagi-card__media::after { transform: scaleX(1); }
}

.nagi-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.nagi-card__atc,
.nagi-card__badge { position: relative; z-index: 2; }

.nagi-card__badge {
	position: absolute;
	top: var(--nagi-space-2);
	left: var(--nagi-space-2);
	z-index: 2;
	padding: 4px 8px;
	background: var(--nagi-accent, var(--nagi-red));
	color: var(--nagi-accent-on);
	font-family: var(--nagi-f-mono);
	font-size: 10px;
	letter-spacing: var(--nagi-ls-mono);
	text-transform: uppercase;
	border-radius: var(--nagi-radius);
}

/* --------------------------------------------------------------------------
   Category card
   -------------------------------------------------------------------------- */

.nagi-cat-card {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--nagi-radius);
	background: var(--nagi-ink);
	aspect-ratio: 4 / 5;
}

.nagi-cat-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform 700ms var(--nagi-ease);
}

.nagi-cat-card:hover .nagi-cat-card__img { transform: scale(1.04); }

.nagi-cat-card__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(26, 26, 26, 0.85) 0%, rgba(26, 26, 26, 0.15) 55%, rgba(26, 26, 26, 0.05) 100%);
	opacity: 0.35;
	transition: opacity var(--nagi-dur-l) var(--nagi-ease);
}

.nagi-cat-card:hover .nagi-cat-card__scrim { opacity: 0.5; }

.nagi-cat-card__body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: var(--nagi-space-4);
	color: var(--nagi-text-light);
	transform: translateY(0);
	transition: transform var(--nagi-dur-m) var(--nagi-ease);
}

.nagi-cat-card:hover .nagi-cat-card__body { transform: translateY(-4px); }

.nagi-cat-card__name {
	font-family: var(--nagi-f-display);
	font-size: 1.35rem;
	line-height: 1.15;
}

.nagi-cat-card__count {
	font-family: var(--nagi-f-mono);
	font-size: 10px;
	letter-spacing: var(--nagi-ls-mono);
	text-transform: uppercase;
	color: var(--nagi-text-light-m);
}

/* Accent corner tick — two strokes, 140ms each. */
.nagi-cat-card__tick-h,
.nagi-cat-card__tick-v {
	position: absolute;
	background: var(--nagi-accent, var(--nagi-red));
	transition: transform 140ms var(--nagi-ease);
}

.nagi-cat-card__tick-h {
	top: var(--nagi-space-3);
	right: var(--nagi-space-3);
	width: 22px;
	height: 1px;
	transform: scaleX(0);
	transform-origin: right center;
}

.nagi-cat-card__tick-v {
	top: var(--nagi-space-3);
	right: var(--nagi-space-3);
	width: 1px;
	height: 22px;
	transform: scaleY(0);
	transform-origin: top center;
	transition-delay: 0ms;
}

.nagi-cat-card:hover .nagi-cat-card__tick-h { transform: scaleX(1); }

.nagi-cat-card:hover .nagi-cat-card__tick-v {
	transform: scaleY(1);
	transition-delay: 140ms;
}

/* --------------------------------------------------------------------------
   Rail — snap scrolling with brand-red arrows that hide at each end.
   -------------------------------------------------------------------------- */

.nagi-rail {
	position: relative;
}

.nagi-rail__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(210px, 1fr);
	gap: clamp(1rem, 2vw, 2rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: var(--nagi-space-2);
	overscroll-behavior-x: contain;
}

.nagi-rail__track::-webkit-scrollbar { display: none; }

.nagi-rail__track > * { scroll-snap-align: start; }

.nagi-rail--5 .nagi-rail__track { grid-auto-columns: calc((100% - 4 * clamp(1rem, 2vw, 2rem)) / 5); }

@media (max-width: 1024px) {
	.nagi-rail--5 .nagi-rail__track { grid-auto-columns: calc((100% - 2 * clamp(1rem, 2vw, 2rem)) / 3); }
}

@media (max-width: 768px) {
	.nagi-rail--5 .nagi-rail__track { grid-auto-columns: calc((100% - clamp(1rem, 2vw, 2rem)) / 2); }
}

@media (max-width: 560px) {
	/* 1.4-up peeking so the rail reads as scrollable without an affordance. */
	.nagi-rail--5 .nagi-rail__track { grid-auto-columns: 71%; }
}

.nagi-rail__nav {
	display: flex;
	gap: var(--nagi-space-2);
	margin-top: var(--nagi-space-3);
}

.nagi-rail__btn {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border: 1px solid var(--nagi-accent, var(--nagi-red));
	border-radius: var(--nagi-radius);
	color: var(--nagi-surface-accent, var(--nagi-red-deep));
	transition: opacity var(--nagi-dur-s) var(--nagi-ease),
	            background-color var(--nagi-dur-s) var(--nagi-ease),
	            color var(--nagi-dur-s) var(--nagi-ease);
}

.nagi-rail__btn:hover {
	background: var(--nagi-red);
	color: var(--nagi-on-red);
}

.nagi-rail__btn[disabled] {
	opacity: 0.25;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Compliance strip — persistent, never dismissible.
   -------------------------------------------------------------------------- */

.nagi-compliance-strip {
	display: flex;
	align-items: center;
	gap: var(--nagi-space-2);
	margin-block: var(--nagi-space-4);
	padding: var(--nagi-space-2) var(--nagi-space-3);
	border: 1px solid var(--nagi-surface-rule, rgba(31, 31, 31, 0.14));
	border-left: 2px solid var(--nagi-red-deep);
	border-radius: var(--nagi-radius);
	background: rgba(175, 26, 22, 0.06);
	font-family: var(--nagi-f-mono);
	font-size: var(--nagi-t-micro);
	letter-spacing: var(--nagi-ls-mono);
	text-transform: uppercase;
	color: var(--nagi-surface-text, var(--nagi-text-dark));
}

.nagi-compliance-strip__icon {
	flex: none;
	color: var(--nagi-red-deep);
	display: inline-flex;
}

/* --------------------------------------------------------------------------
   Drawer + backdrop
   -------------------------------------------------------------------------- */

.nagi-backdrop {
	position: fixed;
	inset: 0;
	z-index: var(--nagi-z-drawer);
	background: rgba(26, 26, 26, 0.55);
	backdrop-filter: blur(8px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 300ms var(--nagi-ease);
}

.nagi-backdrop[data-open="true"] {
	opacity: 1;
	pointer-events: auto;
}

.nagi-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: calc(var(--nagi-z-drawer) + 1);
	width: min(420px, 100vw);
	display: flex;
	flex-direction: column;
	background: var(--nagi-paper);
	color: var(--nagi-text-dark);
	transform: translateX(100%);
	transition: transform 350ms var(--nagi-ease);
}

.nagi-drawer[data-open="true"] { transform: translateX(0); }

.nagi-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nagi-space-3);
	padding: var(--nagi-space-4);
	border-bottom: 1px solid var(--nagi-surface-rule, rgba(31, 31, 31, 0.14));
}

.nagi-drawer__body {
	flex: 1;
	overflow-y: auto;
	padding: var(--nagi-space-4);
}

.nagi-drawer__foot {
	padding: var(--nagi-space-4);
	border-top: 1px solid var(--nagi-surface-rule, rgba(31, 31, 31, 0.14));
}

/* --------------------------------------------------------------------------
   Free-shipping progress
   -------------------------------------------------------------------------- */

.nagi-progress {
	height: 3px;
	background: var(--nagi-sand);
	border-radius: 2px;
	overflow: hidden;
}

.nagi-progress__fill {
	height: 100%;
	background: var(--nagi-red);
	transform-origin: left center;
	transform: scaleX(var(--nagi-progress, 0));
	transition: transform var(--nagi-dur-m) var(--nagi-ease);
}

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */

/*
 * Hidden by opacity and visibility, not by being shoved off-screen.
 *
 * It used to hide with translate(-50%, -140%): -140% of the toast's own 24px
 * height is 34px, against a top of header + 12px. That left the empty toast
 * sitting at y=54 — on screen on every page, invisible only because it
 * happened to be a dark box over a dark header. Any page with a light header
 * showed it as a stray navy rectangle.
 */
.nagi-toast {
	position: fixed;
	top: calc(var(--nagi-header-h) + var(--nagi-space-2));
	left: 50%;
	z-index: var(--nagi-z-toast);
	padding: var(--nagi-space-2) var(--nagi-space-4);
	background: var(--nagi-ink);
	color: var(--nagi-text-light);
	border-left: 2px solid var(--nagi-red);
	border-radius: var(--nagi-radius);
	font-size: var(--nagi-t-small);
	transform: translate(-50%, -12px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: transform 300ms var(--nagi-ease),
	            opacity 300ms var(--nagi-ease),
	            visibility 0s linear 300ms;
}

.nagi-toast[data-open="true"] {
	transform: translate(-50%, 0);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

/* --------------------------------------------------------------------------
   Skeleton
   -------------------------------------------------------------------------- */

.nagi-skeleton {
	background: linear-gradient(90deg, var(--nagi-paper-deep) 25%, var(--nagi-sand) 37%, var(--nagi-paper-deep) 63%);
	background-size: 400% 100%;
	animation: nagi-shimmer 1.4s ease infinite;
	border-radius: var(--nagi-radius);
}

.nagi-skeleton--card { aspect-ratio: 4 / 5; }

@keyframes nagi-shimmer {
	from { background-position: 100% 50%; }
	to   { background-position: 0 50%; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.nagi-footer {
	background: var(--nagi-ink);
	color: var(--nagi-text-light);
}

.nagi-footer__cols {
	display: grid;
	grid-template-columns: 34% repeat(3, 1fr);
	gap: clamp(1.5rem, 3vw, 3rem);
	padding-block: var(--nagi-space-7);
}

@media (max-width: 900px) {
	.nagi-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.nagi-footer__cols { grid-template-columns: minmax(0, 1fr); }
}

.nagi-footer__heading {
	font-family: var(--nagi-f-mono);
	font-size: var(--nagi-t-micro);
	letter-spacing: var(--nagi-ls-mono);
	text-transform: uppercase;
	color: var(--nagi-red);
	margin-bottom: var(--nagi-space-3);
}

.nagi-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--nagi-space-2);
}

.nagi-footer__list a {
	font-size: var(--nagi-t-small);
	color: var(--nagi-text-light-m);
}

.nagi-footer__list a:hover { color: var(--nagi-red); }

.nagi-footer__rule {
	height: 1px;
	background: var(--nagi-red);
	opacity: 0.4;
}

.nagi-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--nagi-space-3);
	padding-block: var(--nagi-space-4);
	font-family: var(--nagi-f-mono);
	font-size: var(--nagi-t-micro);
	letter-spacing: var(--nagi-ls-mono);
	text-transform: uppercase;
	color: var(--nagi-text-light-m);
}

.nagi-trust-strip {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1rem, 3vw, 2.75rem);
	padding-block: var(--nagi-space-4);
	border-top: 1px solid rgba(175, 26, 22, 0.2);
}

.nagi-trust-strip__item {
	display: inline-flex;
	align-items: center;
	gap: var(--nagi-space-2);
	flex: 0 1 auto;
	font-size: var(--nagi-t-small);
	color: var(--nagi-text-light-m);
}

.nagi-trust-strip__item svg { color: var(--nagi-red); flex: none; }

/* --------------------------------------------------------------------------
   Header load choreography

   Logo at 0ms, nav links from 120ms at a 45ms stagger. Gated on data-loaded
   so the sequence runs once per load and never on a re-render.
   -------------------------------------------------------------------------- */

html[data-motion="ready"] .nagi-nav__link {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 500ms var(--nagi-ease), transform 500ms var(--nagi-ease);
	transition-delay: calc(120ms + var(--nagi-nav-i, 0) * var(--nagi-stagger-tight));
}

.nagi-header[data-loaded="true"] .nagi-nav__link {
	opacity: 1;
	transform: translateY(0);
}

/* The nav underline must not inherit the load transition. */
.nagi-nav__link::after {
	transition: transform 240ms var(--nagi-ease) !important;
}

/* --------------------------------------------------------------------------
   Lazy category blocks

   The heading and container are server-rendered; only the cards arrive late.
   The skeleton holds the row height so nothing jumps when they land.
   -------------------------------------------------------------------------- */

[data-nagi-lazy-block][data-loaded="true"] .nagi-lazy-skeleton,
[data-nagi-lazy-block][data-empty="true"] .nagi-lazy-skeleton {
	display: none;
}

[data-nagi-lazy-block][data-empty="true"] [data-nagi-lazy-target],
[data-nagi-lazy-block][data-failed="true"] .nagi-lazy-skeleton {
	display: none;
}

/* --------------------------------------------------------------------------
   TARGET SIZE

   WCAG 2.2 SC 2.5.8 asks for 24x24 minimum; 44px is the comfortable phone
   target and what the rest of the UI already uses. Text-style buttons had no
   padding at all and footer links were landing at 23px — one pixel short is
   still short.

   Product card titles are exempt: the card carries a full-bleed ::after
   overlay, so the real target is the whole card, not the text.
   -------------------------------------------------------------------------- */

.nagi-btn--text,
.nagi-hero__cue {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.nagi-footer__list a,
.nagi-account__nav a,
.nagi-filter__item {
	display: flex;
	align-items: center;
	min-height: 32px;
}

.nagi-footer__legal a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
}

/* 44px rather than 40px: matches the iOS guideline and every other control. */
.nagi-util {
	width: 44px;
	height: 44px;
}

.nagi-rail__btn {
	width: 44px;
	height: 44px;
}

/* --------------------------------------------------------------------------
   FLOATING WHATSAPP BUTTON
   -------------------------------------------------------------------------- */

.nagi-whatsapp {
	position: fixed;
	right: clamp(1rem, 3vw, 1.75rem);
	bottom: clamp(1rem, 3vw, 1.75rem);
	z-index: var(--nagi-z-toast);
	display: inline-flex;
	align-items: center;
	gap: 0;
	height: 56px;
	padding: 0 15px;
	border-radius: 28px;
	background: #1FA855;
	color: #fff;
	box-shadow: 0 6px 20px rgba(26, 26, 26, 0.28);
	transition: background-color var(--nagi-dur-s) var(--nagi-ease),
	            transform var(--nagi-dur-m) var(--nagi-ease),
	            gap var(--nagi-dur-m) var(--nagi-ease),
	            padding var(--nagi-dur-m) var(--nagi-ease);
}

.nagi-whatsapp:hover,
.nagi-whatsapp:focus-visible {
	background: #17924A;
	gap: 10px;
	padding-right: 22px;
}

.nagi-whatsapp__icon {
	display: inline-flex;
	flex: none;
}

/*
 * The label expands from zero width on hover rather than being display:none,
 * so it stays in the accessibility tree and screen readers still announce it.
 */
.nagi-whatsapp__label {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	font-size: var(--nagi-t-small);
	font-weight: 600;
	transition: max-width var(--nagi-dur-m) var(--nagi-ease);
}

.nagi-whatsapp:hover .nagi-whatsapp__label,
.nagi-whatsapp:focus-visible .nagi-whatsapp__label {
	max-width: 8rem;
}

/*
 * The mobile sticky add-to-cart bar occupies the same corner on product
 * pages. Lift the button clear of it while that bar is showing.
 */
body:has(.nagi-sticky-atc[data-open="true"]) .nagi-whatsapp {
	transform: translateY(-72px);
}

@media (prefers-reduced-motion: reduce) {
	.nagi-whatsapp,
	.nagi-whatsapp__label { transition: none !important; }
}

/* --------------------------------------------------------------------------
   FORMS
   -------------------------------------------------------------------------- */

.nagi-form-wrap { max-width: var(--nagi-max-narrow); margin-top: var(--nagi-space-5); }

.nagi-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--nagi-space-3);
}

.nagi-form-row--full { grid-column: 1 / -1; }

/* The honeypot. Off-screen rather than display:none, which some bots skip.
   It used to be classed .nagi-hp — the homepage scope — and was visible. */
.nagi-form__trap {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 620px) {
	.nagi-form__grid { grid-template-columns: minmax(0, 1fr); }
}

.nagi-form-row { display: grid; gap: var(--nagi-space-1); margin: 0; }

.nagi-form-row label {
	font-family: var(--nagi-f-mono);
	font-size: var(--nagi-t-micro);
	letter-spacing: var(--nagi-ls-mono);
	text-transform: uppercase;
	color: var(--nagi-text-mute);
}

.nagi-req { color: var(--nagi-red-deep); }

.nagi-form-row input,
.nagi-form-row textarea {
	width: 100%;
	padding: 0.75rem var(--nagi-space-3);
	border: 1px solid var(--nagi-sand);
	border-radius: var(--nagi-radius);
	background: transparent;
	color: var(--nagi-text-dark);
	font-family: var(--nagi-f-body);
	font-size: var(--nagi-t-small);
	min-height: 44px;
	transition: border-color 200ms var(--nagi-ease);
}

.nagi-form-row textarea { resize: vertical; }
.nagi-form-row input:focus-visible,
.nagi-form-row textarea:focus-visible { border-color: var(--nagi-red); }
.nagi-form-row input[aria-invalid="true"],
.nagi-form-row textarea[aria-invalid="true"] { border-color: var(--nagi-error); }

.nagi-form__err {
	margin: 0;
	font-size: var(--nagi-t-micro);
	color: var(--nagi-error);
}

.nagi-form__actions {
	display: flex;
	align-items: center;
	gap: var(--nagi-space-4);
	flex-wrap: wrap;
	margin-top: var(--nagi-space-4);
}

.nagi-form__note { color: var(--nagi-text-mute); margin: 0; }

.nagi-notice--success {
	border-left-color: var(--nagi-success);
	background: rgba(46, 107, 79, 0.08);
}

.nagi-notice--error {
	border-left-color: var(--nagi-error);
	background: rgba(163, 58, 46, 0.08);
}

/* ---- Brand lockup ---------------------------------------------------- */

.nagi-mark {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1;
}

.nagi-mark__word {
	font-family: var(--nagi-f-display);
	font-size: 1.5rem;
	letter-spacing: 0.14em;
	color: var(--nagi-red);
	line-height: 1;
}

/* text-indent replaces the trailing letter-space so the subline optically
   aligns with the N above it rather than sitting a hair to the left. */
.nagi-mark__sub {
	font-family: var(--nagi-f-mono);
	font-size: 0.5rem;
	font-weight: 700;
	letter-spacing: 0.42em;
	text-indent: 0.42em;
	text-transform: uppercase;
	color: var(--nagi-red-deep);
	margin-top: 0.5em;
}

.nagi-mark--light .nagi-mark__sub { color: var(--nagi-red-lit); opacity: 0.7; }

.nagi-footer .nagi-mark__sub,
.nagi-hp-footer .nagi-mark__sub { color: var(--nagi-red-lit); opacity: 0.7; }

@media (max-width: 600px) {
	.nagi-mark__word { font-size: 1.25rem; }
	.nagi-mark__sub  { font-size: 0.4375rem; letter-spacing: 0.34em; text-indent: 0.34em; }
}