/* ==========================================================================
   NAGI — product archive

   Loaded on the shop and on product category, tag and attribute archives
   only. Nothing in here is global: every selector is either a .nagi-shop*
   / .nagi-fgroup / .nagi-chip / .nagi-range block that exists on no other
   template, or a .nagi-card--shop refinement that other callers of the card
   never carry.

   Loads after commerce.css, which is what lets it retire the old archive
   rules by simply restating them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Local tokens. Scoped to the archive so no other page inherits them.
   -------------------------------------------------------------------------- */

.nagi-shopbar,
.nagi-shopintro,
.nagi-main--shop {
	--nagi-shop-rule:       rgba(31, 31, 31, 0.13);
	--nagi-shop-rule-soft:  rgba(31, 31, 31, 0.08);
	--nagi-shop-surface:    #FDFAF5;
	--nagi-shop-surface-2:  #F2E4D7;
	--nagi-shop-accent:       var(--nagi-red-deep);
	--nagi-shop-sidebar-w:  264px;
}

/* --------------------------------------------------------------------------
   The navy bar behind the header

   The site header is sticky, transparent and light-on-nothing until 80px of
   scroll, so this band has to stay under it for that whole distance:
   header height + the 80px threshold, or the logo and navigation would
   cross onto ivory mid-scroll and disappear. That is the only reason it has
   a minimum height, and the reason the ivory intro starts below it rather
   than at the top of the page.
   -------------------------------------------------------------------------- */

.nagi-shopbar {
	margin-top: calc(var(--nagi-header-h) * -1);
	padding-top: var(--nagi-header-h);
	min-height: calc(var(--nagi-header-h) + 92px);
	display: flex;
	align-items: center;
	border-bottom: 1px solid rgba(175, 26, 22, 0.34);
}

.nagi-shopbar__inner {
	display: flex;
	align-items: center;
	width: 100%;
	padding-block: var(--nagi-space-3);
}

.nagi-shopbar .nagi-breadcrumbs { width: 100%; }

/* --------------------------------------------------------------------------
   Editorial intro
   -------------------------------------------------------------------------- */

.nagi-shopintro {
	background: var(--nagi-shop-surface);
	color: var(--nagi-text-dark);
	padding-block: clamp(2.25rem, 4.5vw, 4rem) clamp(2rem, 3.5vw, 3.25rem);
	border-bottom: 1px solid var(--nagi-shop-rule);
}

.nagi-shopintro__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: var(--nagi-space-4) var(--nagi-space-6);
}

.nagi-shopintro__eyebrow {
	color: var(--nagi-shop-accent);
	margin-bottom: var(--nagi-space-3);
}

.nagi-shopintro__title {
	font-size: clamp(2.5rem, 5.2vw, 4.25rem);
	line-height: 1.02;
	letter-spacing: -0.025em;
	font-weight: 300;
	max-width: 15ch;
	margin: 0;
}

.nagi-shopintro__lede {
	margin-top: var(--nagi-space-4);
	max-width: 56ch;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--nagi-text-mute);
}

/* Origin node — the coordinate the line is traded from. */
.nagi-shopintro__node {
	display: inline-flex;
	align-items: baseline;
	gap: var(--nagi-space-2);
	margin: 0;
	padding-bottom: 0.35rem;
	font-family: var(--nagi-f-mono);
	font-size: var(--nagi-t-micro);
	letter-spacing: var(--nagi-ls-mono);
	text-transform: uppercase;
	white-space: nowrap;
}

.nagi-shopintro__pin {
	align-self: center;
	display: inline-flex;
	color: var(--nagi-shop-accent);
}

.nagi-shopintro__place { color: var(--nagi-text-dark); }
.nagi-shopintro__coord { color: var(--nagi-text-mute); }

@media (max-width: 860px) {
	.nagi-shopintro__inner {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}

	.nagi-shopintro__node { padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

.nagi-main--shop {
	background: var(--nagi-paper);
	padding-block: clamp(2rem, 3.5vw, 3.25rem) var(--nagi-space-8);
}

.nagi-shop {
	display: grid;
	grid-template-columns: var(--nagi-shop-sidebar-w) minmax(0, 1fr);
	gap: clamp(2rem, 3.6vw, 3.5rem);
	align-items: start;
}

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

.nagi-shop__main { min-width: 0; }
.nagi-shop__results { position: relative; }

/* --------------------------------------------------------------------------
   Filter sidebar
   -------------------------------------------------------------------------- */

.nagi-shop__filters {
	position: sticky;
	top: calc(var(--nagi-header-h) + var(--nagi-space-3));
	background: var(--nagi-shop-surface);
	border: 1px solid var(--nagi-shop-rule);
	border-radius: var(--nagi-radius);
	/* A hairline of brand red along the top is the whole badge this panel needs. */
	box-shadow: inset 0 2px 0 0 var(--nagi-red);
}

.nagi-shop__filters-head { display: none; }

.nagi-filters {
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - var(--nagi-header-h) - var(--nagi-space-6));
}

.nagi-filters__scroll {
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--nagi-space-4) var(--nagi-space-4) var(--nagi-space-2);
}

/* ---- Group ---- */

.nagi-fgroup {
	border-bottom: 1px solid var(--nagi-shop-rule-soft);
	padding-block: 0.35rem;
}

.nagi-fgroup:last-of-type { border-bottom: 0; }
.nagi-fgroup--flat { padding-block: var(--nagi-space-2) 0.35rem; }

.nagi-fgroup__head { margin: 0; }

.nagi-fgroup__toggle,
.nagi-fgroup__head--static {
	display: flex;
	align-items: center;
	gap: var(--nagi-space-2);
	width: 100%;
	padding-block: 0.85rem;
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
	color: var(--nagi-text-dark);
}

.nagi-fgroup__head--static { cursor: default; padding-bottom: 0.5rem; }

.nagi-fgroup__label {
	flex: 1;
	font-family: var(--nagi-f-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--nagi-text-mute);
	transition: color var(--nagi-dur-s) var(--nagi-ease);
}

.nagi-fgroup__toggle:hover .nagi-fgroup__label { color: var(--nagi-text-dark); }

.nagi-fgroup__badge {
	display: inline-grid;
	place-items: center;
	min-width: 17px;
	height: 17px;
	padding-inline: 4px;
	background: var(--nagi-red);
	color: var(--nagi-on-red);
	border-radius: 9px;
	font-family: var(--nagi-f-mono);
	font-size: 10px;
	line-height: 1;
}

.nagi-fgroup__chevron {
	display: inline-flex;
	color: var(--nagi-text-mute);
	transition: transform var(--nagi-dur-s) var(--nagi-ease);
}

.nagi-fgroup__toggle[aria-expanded="false"] .nagi-fgroup__chevron { transform: rotate(-90deg); }
.nagi-fgroup__toggle[aria-expanded="false"] + .nagi-fgroup__body { display: none; }

.nagi-fgroup__body { padding-bottom: var(--nagi-space-2); }

.nagi-fgroup__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1px;
}

.nagi-fgroup__more {
	margin-top: 0.35rem;
	padding: 0.4rem 0;
	background: none;
	border: 0;
	font-family: var(--nagi-f-mono);
	font-size: 10px;
	letter-spacing: var(--nagi-ls-mono);
	text-transform: uppercase;
	color: var(--nagi-shop-accent);
	cursor: pointer;
	border-bottom: 1px solid currentColor;
	line-height: 1.6;
}

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

/* ---- Checkbox row ---- */

.nagi-check {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	min-height: 34px;
	padding: 0.28rem 0.4rem;
	margin-inline: -0.4rem;
	border-radius: var(--nagi-radius);
	font-size: 0.875rem;
	line-height: 1.35;
	color: var(--nagi-text-dark);
	cursor: pointer;
	transition: background-color var(--nagi-dur-xs) var(--nagi-ease);
}

.nagi-check:hover { background: rgba(175, 26, 22, 0.09); }

/* The real input drives every state below and stays focusable. */
.nagi-check__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	margin: 0;
	pointer-events: none;
}

.nagi-check__box {
	position: relative;
	flex: none;
	display: grid;
	place-items: center;
	width: 16px;
	height: 16px;
	border: 1px solid var(--nagi-sand);
	border-radius: 1px;
	background: #fff;
	color: var(--nagi-ink);
	transition: background-color var(--nagi-dur-xs) var(--nagi-ease),
	            border-color var(--nagi-dur-xs) var(--nagi-ease);
}

.nagi-check__box svg {
	opacity: 0;
	transform: scale(0.6);
	transition: opacity var(--nagi-dur-xs) var(--nagi-ease), transform var(--nagi-dur-xs) var(--nagi-ease);
}

.nagi-check__input:checked + .nagi-check__box {
	background: var(--nagi-red);
	border-color: var(--nagi-red);
}

.nagi-check__input:checked + .nagi-check__box svg { opacity: 1; transform: scale(1); }

.nagi-check__input:focus-visible + .nagi-check__box {
	outline: 2px solid var(--nagi-focus);
	outline-offset: 2px;
}

.nagi-check__dot {
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--nagi-accent, var(--nagi-red));
	box-shadow: 0 0 0 1px rgba(31, 31, 31, 0.16);
}

.nagi-check__name {
	flex: 1;
	min-width: 0;
	transition: color var(--nagi-dur-xs) var(--nagi-ease);
}

.nagi-check__input:checked ~ .nagi-check__name { color: var(--nagi-ink); font-weight: 600; }

.nagi-check__count {
	flex: none;
	font-family: var(--nagi-f-mono);
	font-size: 10px;
	color: var(--nagi-text-mute);
	font-variant-numeric: tabular-nums;
}

/* ---- Price range ---- */

.nagi-range {
	position: relative;
	padding-top: 0.9rem;
	padding-bottom: 0.25rem;
}

.nagi-range__track {
	position: relative;
	height: 2px;
	margin-inline: 8px;
	background: var(--nagi-sand);
	border-radius: 2px;
}

.nagi-range__fill {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--nagi-red);
	border-radius: 2px;
}

/*
 * Both sliders sit on the same line over the drawn track. The input itself
 * ignores the pointer so the two do not block each other; only the thumbs
 * take events, which is what lets either handle be grabbed anywhere along
 * the track. Keyboard focus still reaches both, in order.
 */
.nagi-range__input {
	position: absolute;
	left: 0;
	right: 0;
	top: 0.9rem;
	width: 100%;
	height: 2px;
	margin: 0;
	background: none;
	appearance: none;
	-webkit-appearance: none;
	pointer-events: none;
}

.nagi-range__input::-webkit-slider-thumb {
	-webkit-appearance: none;
	pointer-events: auto;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--nagi-paper);
	border: 2px solid var(--nagi-red);
	cursor: grab;
	transition: border-color var(--nagi-dur-xs) var(--nagi-ease), transform var(--nagi-dur-xs) var(--nagi-ease);
}

.nagi-range__input::-moz-range-thumb {
	pointer-events: auto;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--nagi-paper);
	border: 2px solid var(--nagi-red);
	cursor: grab;
}

.nagi-range__input::-webkit-slider-thumb:hover { border-color: var(--nagi-red-deep); transform: scale(1.12); }
.nagi-range__input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--nagi-focus); outline-offset: 2px; }
.nagi-range__input:focus-visible::-moz-range-thumb { outline: 2px solid var(--nagi-focus); outline-offset: 2px; }
.nagi-range__input::-moz-range-track { background: none; }

.nagi-range__values {
	display: flex;
	justify-content: space-between;
	gap: var(--nagi-space-2);
	margin: 1.15rem 0 0;
	font-family: var(--nagi-f-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	color: var(--nagi-text-dark);
	font-variant-numeric: tabular-nums;
}

/* ---- Actions ---- */

.nagi-filters__actions {
	display: grid;
	gap: 0.625rem;
	justify-items: center;
	padding: var(--nagi-space-3) var(--nagi-space-4) var(--nagi-space-4);
	border-top: 1px solid var(--nagi-shop-rule);
	background: var(--nagi-shop-surface-2);
}

.nagi-filters__apply {
	min-height: 46px;
	letter-spacing: 0.04em;
}

.nagi-filters__clear {
	font-family: var(--nagi-f-mono);
	font-size: 10px;
	letter-spacing: var(--nagi-ls-mono);
	text-transform: uppercase;
	color: var(--nagi-text-mute);
	min-height: 32px;
	display: inline-flex;
	align-items: center;
	transition: color var(--nagi-dur-s) var(--nagi-ease);
}

.nagi-filters__clear:hover { color: var(--nagi-shop-accent); }

/* --------------------------------------------------------------------------
   Toolbar
   -------------------------------------------------------------------------- */

.nagi-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--nagi-space-3);
	padding-bottom: var(--nagi-space-3);
	margin-bottom: var(--nagi-space-4);
	border-bottom: 1px solid var(--nagi-shop-rule);
}

.nagi-toolbar__count {
	margin: 0;
	font-family: var(--nagi-f-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--nagi-text-mute);
	font-variant-numeric: tabular-nums;
}

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

/* ---- Sort ---- */

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

.nagi-sort__field {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
	padding: 0 2rem 0 0.9rem;
	border: 1px solid var(--nagi-shop-rule);
	border-radius: var(--nagi-radius);
	background: var(--nagi-shop-surface);
	transition: border-color var(--nagi-dur-s) var(--nagi-ease);
}

.nagi-sort__field:hover { border-color: var(--nagi-sand); }
.nagi-sort__field:focus-within { border-color: var(--nagi-red); }

.nagi-sort__prefix {
	font-family: var(--nagi-f-mono);
	font-size: 0.625rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--nagi-text-mute);
}

/*
 * The native select stays: it is the control, not a decoration over one.
 * Only its chrome is removed, so the platform's own dropdown, keyboard
 * behaviour and mobile picker are exactly what a customer gets.
 */
.nagi-sort__select {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: none;
	padding: 0.55rem 0;
	font-family: var(--nagi-f-body);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--nagi-text-dark);
	cursor: pointer;
	outline: none;
}

.nagi-sort__chevron {
	position: absolute;
	right: 0.75rem;
	display: inline-flex;
	color: var(--nagi-text-mute);
	pointer-events: none;
}

.nagi-sort__go { display: none; }
.nagi-toolbar__mobile { display: none; }

/* --------------------------------------------------------------------------
   Active filter chips
   -------------------------------------------------------------------------- */

.nagi-chips { margin-bottom: var(--nagi-space-4); }

.nagi-chips__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.nagi-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 32px;
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--nagi-sand);
	border-radius: var(--nagi-radius);
	background: var(--nagi-shop-surface);
	font-size: 0.8125rem;
	color: var(--nagi-text-dark);
	transition: border-color var(--nagi-dur-s) var(--nagi-ease), background-color var(--nagi-dur-s) var(--nagi-ease);
}

.nagi-chip:hover { border-color: var(--nagi-red); background: rgba(175, 26, 22, 0.1); }
.nagi-chip__x { display: inline-flex; color: var(--nagi-text-mute); }
.nagi-chip:hover .nagi-chip__x { color: var(--nagi-shop-accent); }

.nagi-chips__clear {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding-inline: 0.35rem;
	font-family: var(--nagi-f-mono);
	font-size: 10px;
	letter-spacing: var(--nagi-ls-mono);
	text-transform: uppercase;
	color: var(--nagi-text-mute);
	transition: color var(--nagi-dur-s) var(--nagi-ease);
}

.nagi-chips__clear:hover { color: var(--nagi-shop-accent); }

/* --------------------------------------------------------------------------
   Grid

   Three tracks on desktop, two everywhere below — including small phones.
   A single column would push add-to-cart below the fold on every card.
   -------------------------------------------------------------------------- */

.nagi-shop__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 1.8vw, 2rem) clamp(0.75rem, 1.6vw, 1.75rem);
	transition: opacity var(--nagi-dur-s) var(--nagi-ease);
}

@media (max-width: 1180px) and (min-width: 1025px) {
	.nagi-shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
	.nagi-shop__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

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

/* --------------------------------------------------------------------------
   Card — archive refinements

   Everything below is scoped to .nagi-card--shop. The homepage line blocks
   and the related-products rail render the same template without that class
   and are untouched by this file, which does not load on their pages anyway.
   -------------------------------------------------------------------------- */

.nagi-card--shop {
	background: var(--nagi-shop-surface);
	border: 1px solid var(--nagi-shop-rule);
	border-radius: var(--nagi-radius);
	overflow: hidden;
	transition: border-color var(--nagi-dur-m) var(--nagi-ease);
}

.nagi-card--shop:hover,
.nagi-card--shop:focus-within { border-color: var(--nagi-sand); }

.nagi-card--shop .nagi-card__media {
	/* Product photography is shot on cream. A navy plate behind it, which is
	   what the default card uses, cuts a hard rectangle around every bottle. */
	background: var(--nagi-shop-surface-2);
	border-radius: 0;
	aspect-ratio: 1 / 1;
	border-bottom: 1px solid var(--nagi-shop-rule-soft);
}

.nagi-card--shop .nagi-card__img {
	object-fit: cover;
	transition: transform var(--nagi-dur-l) var(--nagi-ease);
}

.nagi-card--shop:hover .nagi-card__img { transform: scale(1.035); }

/* The accent rule sweep belongs to the default card; the archive card has a
   border of its own and does not need a second line under the image. */
.nagi-card--shop .nagi-card__media::after { content: none; }

.nagi-card--shop .nagi-card__body {
	padding: var(--nagi-space-3) var(--nagi-space-3) var(--nagi-space-3);
	gap: 0;
}

.nagi-card--shop .nagi-card__line {
	font-size: 0.625rem;
	letter-spacing: 0.11em;
	color: var(--nagi-shop-accent);
	margin-bottom: 0.5rem;
}

.nagi-card--shop .nagi-card__title {
	font-size: 1.125rem;
	line-height: 1.28;
	font-weight: 400;
	margin-bottom: 0.25rem;
}

.nagi-card--shop .nagi-card__size {
	font-family: var(--nagi-f-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.05em;
	color: var(--nagi-text-mute);
	margin-bottom: 0.6rem;
}

/* ---- Price ----------------------------------------------------------------
   WooCommerce prints the regular price first and the sale price second.
   Reversing them here is presentation only — the markup, the values and the
   <del>/<ins> semantics screen readers rely on are left exactly as
   WooCommerce emitted them.
   -------------------------------------------------------------------------- */

.nagi-card--shop .nagi-card__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0 0 var(--nagi-space-3);
	padding-top: 0.15rem;
	font-family: var(--nagi-f-body);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--nagi-text-dark);
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
	margin-top: auto;
}

.nagi-card--shop .nagi-card__price ins {
	order: 1;
	text-decoration: none;
	background: none;
	color: var(--nagi-text-dark);
}

.nagi-card--shop .nagi-card__price del {
	order: 2;
	opacity: 1;
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--nagi-text-mute);
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(107, 101, 96, 0.7);
}

/* A price range keeps its en dash on one line. */
.nagi-card--shop .nagi-card__price .woocommerce-Price-amount { white-space: nowrap; }

/* ---- Add to cart ---- */

.nagi-card--shop .nagi-card__atc {
	margin-top: 0;
	opacity: 1;
	transform: none;
	width: 100%;
	min-height: 46px;
	padding: 0.75rem 1rem;
	gap: 0.5rem;
	font-size: 0.8125rem;
	letter-spacing: 0.03em;
	background: var(--nagi-red);
	border: 1px solid var(--nagi-red);
	color: var(--nagi-on-red);
}

/* The outline-fill sweep is the default card's hover; a filled button here
   would animate an accent panel over the same accent. */
.nagi-card--shop .nagi-card__atc::before { content: none; }

.nagi-card--shop .nagi-card__atc:hover,
.nagi-card--shop .nagi-card__atc:focus-visible {
	background: var(--nagi-red-deep);
	border-color: var(--nagi-red-deep);
	color: var(--nagi-on-red);
}

.nagi-card--shop .nagi-card__atc[aria-busy="true"] { opacity: 0.65; }
.nagi-card__atc-icon { flex: none; }

.nagi-card--shop .nagi-card__atc--out {
	background: transparent;
	border-color: var(--nagi-sand);
	color: var(--nagi-text-mute);
	cursor: not-allowed;
}

/* ---- Save ---- */

.nagi-card__save {
	position: absolute;
	top: 0.625rem;
	right: 0.625rem;
	z-index: 3;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border: 1px solid var(--nagi-shop-rule);
	border-radius: 50%;
	background: rgba(253, 250, 245, 0.92);
	backdrop-filter: blur(4px);
	color: var(--nagi-text-mute);
	cursor: pointer;
	transition: color var(--nagi-dur-s) var(--nagi-ease),
	            border-color var(--nagi-dur-s) var(--nagi-ease),
	            background-color var(--nagi-dur-s) var(--nagi-ease);
}

.nagi-card__save:hover { color: var(--nagi-red-deep); border-color: var(--nagi-red); }
.nagi-card__save[aria-pressed="true"] { color: var(--nagi-red-deep); border-color: var(--nagi-red); }
.nagi-card__save[aria-pressed="true"] svg { fill: var(--nagi-red); stroke: var(--nagi-red-deep); }

/* A 36px control is under the 44px touch minimum; the hit area is widened
   past the visible circle rather than making the circle heavier. */
.nagi-card__save::after {
	content: "";
	position: absolute;
	inset: -5px;
}

/* ---- Sale badge ---- */

.nagi-card--shop .nagi-card__badge {
	top: 0.625rem;
	left: 0.625rem;
	padding: 0.28rem 0.55rem;
	background: var(--nagi-ink);
	color: var(--nagi-red-lit);
	font-size: 9px;
	letter-spacing: 0.14em;
	border: 0;
}

.nagi-card--shop .nagi-card__badge--out {
	background: rgba(31, 31, 31, 0.82);
	color: var(--nagi-text-light);
}

/* --------------------------------------------------------------------------
   Loading

   The grid dims and a line of type says what is happening. No spinner, no
   full-page flash — the results that are already on screen stay readable
   until the new ones replace them.
   -------------------------------------------------------------------------- */

.nagi-shop__loading {
	display: none;
	position: absolute;
	top: -0.35rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	margin: 0;
	padding: 0.5rem 1rem;
	background: var(--nagi-ink);
	color: var(--nagi-red-lit);
	border-radius: var(--nagi-radius);
	font-size: 10px;
	letter-spacing: var(--nagi-ls-mono);
}

.nagi-shop__results[aria-busy="true"] .nagi-shop__loading { display: block; }
.nagi-shop__results[aria-busy="true"] .nagi-shop__grid { opacity: 0.42; }

/* Skeletons only appear if a request is slow enough to need explaining. */
.nagi-shop__skeleton {
	border: 1px solid var(--nagi-shop-rule);
	border-radius: var(--nagi-radius);
	background: var(--nagi-shop-surface);
	overflow: hidden;
}

.nagi-shop__skeleton::before {
	content: "";
	display: block;
	aspect-ratio: 1 / 1;
	background: linear-gradient(100deg, var(--nagi-shop-surface-2) 30%, #FDFAF5 50%, var(--nagi-shop-surface-2) 70%);
	background-size: 220% 100%;
	animation: nagi-shop-shimmer 1.4s linear infinite;
}

.nagi-shop__skeleton::after {
	content: "";
	display: block;
	height: 92px;
}

@keyframes nagi-shop-shimmer {
	from { background-position: 140% 0; }
	to   { background-position: -40% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.nagi-shop__skeleton::before { animation: none; }
	.nagi-card--shop:hover .nagi-card__img { transform: none; }
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.nagi-pagination {
	margin-top: var(--nagi-space-7);
	padding-top: var(--nagi-space-5);
	border-top: 1px solid var(--nagi-shop-rule);
	display: grid;
	gap: var(--nagi-space-3);
	justify-items: center;
}

.nagi-pagination__list { gap: 0.35rem; }

.nagi-pagination a,
.nagi-pagination span.page-numbers {
	min-width: 44px;
	min-height: 44px;
	border-color: transparent;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--nagi-text-mute);
	background: transparent;
}

.nagi-pagination a:hover {
	border-color: var(--nagi-sand);
	color: var(--nagi-ink);
	background: var(--nagi-shop-surface);
}

.nagi-pagination .current {
	background: var(--nagi-ink);
	border-color: var(--nagi-ink);
	color: var(--nagi-red-lit);
}

.nagi-pagination .dots { border-color: transparent; min-width: 24px; }
.nagi-pagination__arrow { display: inline-flex; }

.nagi-pagination__meta {
	margin: 0;
	font-family: var(--nagi-f-mono);
	font-size: 10px;
	letter-spacing: var(--nagi-ls-mono);
	text-transform: uppercase;
	color: var(--nagi-text-mute);
}

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */

.nagi-empty {
	text-align: center;
	padding: clamp(3rem, 7vw, 5.5rem) var(--nagi-space-4);
	border: 1px solid var(--nagi-shop-rule);
	border-radius: var(--nagi-radius);
	background: var(--nagi-shop-surface);
}

.nagi-empty__mark { color: var(--nagi-sand); }
.nagi-empty__title { font-size: clamp(1.6rem, 2.6vw, 2.15rem); font-weight: 300; }
.nagi-empty__lede { margin-inline: auto; max-width: 44ch; }

.nagi-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nagi-space-2);
	justify-content: center;
	margin-top: var(--nagi-space-5);
}

/*
 * commerce.css lays this block out as a flex row for the empty-cart page,
 * which shares the class. The archive nests a label above a list inside it,
 * so the row has to be undone here rather than removed there.
 */
.nagi-empty__lines {
	display: block;
	margin-top: var(--nagi-space-7);
	padding-top: var(--nagi-space-5);
	border-top: 1px solid var(--nagi-shop-rule-soft);
}

.nagi-empty__lines-label {
	margin: 0 0 var(--nagi-space-3);
	font-family: var(--nagi-f-mono);
	font-size: 10px;
	letter-spacing: var(--nagi-ls-mono);
	text-transform: uppercase;
	color: var(--nagi-text-mute);
}

.nagi-empty__lines-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

.nagi-empty__line {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 36px;
	padding: 0.4rem 0.85rem;
	border: 1px solid var(--nagi-shop-rule);
	border-radius: var(--nagi-radius);
	font-size: 0.8125rem;
	color: var(--nagi-text-dark);
	transition: border-color var(--nagi-dur-s) var(--nagi-ease);
}

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

.nagi-empty__line-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--nagi-accent, var(--nagi-red));
}

/* --------------------------------------------------------------------------
   Below 1024px — the sidebar becomes a drawer
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.nagi-toolbar__mobile {
		display: inline-flex;
		align-items: center;
		gap: 0.45rem;
		min-height: 44px;
		padding: 0 0.95rem;
		border: 1px solid var(--nagi-shop-rule);
		border-radius: var(--nagi-radius);
		background: var(--nagi-shop-surface);
		font-family: var(--nagi-f-mono);
		font-size: 0.625rem;
		letter-spacing: 0.09em;
		text-transform: uppercase;
		color: var(--nagi-text-dark);
		cursor: pointer;
		transition: border-color var(--nagi-dur-s) var(--nagi-ease);
	}

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

	.nagi-toolbar__badge {
		display: inline-grid;
		place-items: center;
		min-width: 16px;
		height: 16px;
		padding-inline: 4px;
		background: var(--nagi-red);
		color: var(--nagi-on-red);
		border-radius: 8px;
		font-size: 9px;
		line-height: 1;
	}

	.nagi-shop__filters {
		position: fixed;
		inset: auto 0 0 0;
		top: auto;
		z-index: calc(var(--nagi-z-drawer) + 1);
		width: 100%;
		max-height: 88vh;
		border: 0;
		border-top: 2px solid var(--nagi-red);
		border-radius: var(--nagi-radius-lg) var(--nagi-radius-lg) 0 0;
		background: var(--nagi-shop-surface);
		box-shadow: 0 -18px 50px rgba(26, 26, 26, 0.24);
		transform: translateY(100%);
		transition: transform 340ms var(--nagi-ease);
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

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

	.nagi-shop__filters-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--nagi-space-3) var(--nagi-space-4);
		border-bottom: 1px solid var(--nagi-shop-rule);
	}

	/* The grab bar reads as "this sheet moves" without needing a caption. */
	.nagi-shop__filters-head::before {
		content: "";
		position: absolute;
		top: 0.5rem;
		left: 50%;
		transform: translateX(-50%);
		width: 34px;
		height: 3px;
		border-radius: 3px;
		background: var(--nagi-sand);
	}

	.nagi-filters { max-height: none; flex: 1; min-height: 0; }
	.nagi-filters__scroll { flex: 1; min-height: 0; padding-bottom: var(--nagi-space-4); }

	/*
	 * Below this width the sidebar is a sheet operated by thumb, not a
	 * pointer. The dense 34px rows that suit a desktop column are under the
	 * platform touch minimum, and the sheet has the room to give them 44.
	 */
	.nagi-check { min-height: 44px; }
	.nagi-fgroup__toggle { padding-block: 1rem; }
	.nagi-fgroup__more { min-height: 44px; }
	.nagi-chip { min-height: 38px; }

	.nagi-filters__actions {
		grid-template-columns: 1fr auto;
		align-items: center;
		justify-items: stretch;
		gap: var(--nagi-space-3);
		padding-bottom: max(var(--nagi-space-4), env(safe-area-inset-bottom));
	}

	.nagi-filters__clear { justify-content: center; }
}

@media (max-width: 560px) {
	.nagi-toolbar {
		gap: 0.6rem;
		padding-bottom: var(--nagi-space-3);
	}

	.nagi-toolbar__count { width: 100%; order: -1; }
	.nagi-toolbar__controls { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
	.nagi-toolbar__mobile { justify-content: center; }
	.nagi-sort { width: 100%; }
	.nagi-sort__field { width: 100%; justify-content: center; }

	.nagi-shop__grid { gap: 1.25rem 0.75rem; }

	.nagi-card--shop .nagi-card__body { padding: 0.75rem 0.75rem 0.85rem; }
	.nagi-card--shop .nagi-card__title { font-size: 0.9375rem; }
	.nagi-card--shop .nagi-card__price { font-size: 0.9375rem; margin-bottom: 0.7rem; }
	.nagi-card--shop .nagi-card__price del { font-size: 0.75rem; }

	/* Never below the platform touch minimum, whatever the card width. */
	.nagi-card--shop .nagi-card__atc {
		min-height: 44px;
		padding-inline: 0.5rem;
		font-size: 0.75rem;
	}

	.nagi-card__save { width: 34px; height: 34px; top: 0.5rem; right: 0.5rem; }
	.nagi-card__save::after { inset: -8px; }
}

/* --------------------------------------------------------------------------
   Focus

   The archive is filter-heavy and keyboard-driven; every interactive
   element in it gets the same visible ring rather than relying on the
   browser default over a cream background.
   -------------------------------------------------------------------------- */

.nagi-fgroup__toggle:focus-visible,
.nagi-fgroup__more:focus-visible,
.nagi-chip:focus-visible,
.nagi-chips__clear:focus-visible,
.nagi-filters__clear:focus-visible,
.nagi-toolbar__mobile:focus-visible,
.nagi-card__save:focus-visible,
.nagi-card--shop .nagi-card__atc:focus-visible,
.nagi-card--shop .nagi-card__link:focus-visible,
.nagi-empty__line:focus-visible,
.nagi-pagination a:focus-visible {
	outline: 2px solid var(--nagi-focus);
	outline-offset: 2px;
	border-radius: var(--nagi-radius);
}

.nagi-sort__field:focus-within { outline: 2px solid var(--nagi-focus); outline-offset: 2px; }

/* ---- Line archive header carrying the category image ----------------- */

.nagi-shopintro--image {
	position: relative;
	isolation: isolate;
	background: var(--nagi-ink);
	color: var(--nagi-text-light);
	border-bottom: 1px solid rgba(175, 26, 22, 0.22);
	padding-block: clamp(3rem, 5.5vw, 5rem) clamp(3.5rem, 7vw, 6rem);
}

.nagi-shopintro__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.nagi-shopintro__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.nagi-shopintro--image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		rgba(26, 26, 26, 0.74) 0%,
		rgba(26, 26, 26, 0.54) 45%,
		rgba(26, 26, 26, 0.34) 100%
	);
}

.nagi-shopintro--image > .nagi-container {
	position: relative;
	z-index: 2;
}

/* The band flips from paper to ink, so the type that was set for a light
   surface has to come with it. */
.nagi-shopintro--image .nagi-shopintro__title { color: var(--nagi-text-light); }
.nagi-shopintro--image .nagi-shopintro__lede  { color: var(--nagi-text-light-m); }
.nagi-shopintro--image .nagi-shopintro__eyebrow,
.nagi-shopintro--image .nagi-shopintro__pin   { color: var(--nagi-red-lit); }
.nagi-shopintro--image .nagi-shopintro__place { color: var(--nagi-text-light); }
.nagi-shopintro--image .nagi-shopintro__node  { color: var(--nagi-text-light-m); }

@media (max-width: 700px) {
	.nagi-shopintro--image::after {
		background: linear-gradient(180deg, rgba(26, 26, 26, 0.50) 0%, rgba(26, 26, 26, 0.86) 100%);
	}
}