/* ==========================================================================
   NAGI — shop archive, product single, cart, checkout, account
   Loaded only on commerce surfaces, alongside woocommerce.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SHOP ARCHIVE

   Moved to shop.css, which loads only on product listings. The hero, layout,
   filter and toolbar rules that lived here styled markup the archive no
   longer emits, and left behind a .nagi-shop grid and a .nagi-toolbar that
   the new ones then had to out-specify on every property.

   What stays below is shared with templates shop.css never loads on:
   .nagi-input--sm (cart coupon field), .nagi-pagination and .nagi-empty
   (the cart and thank-you pages). shop.css refines those three rather than
   restating them.
   -------------------------------------------------------------------------- */

.nagi-input--sm {
	padding: 0.5rem var(--nagi-space-2);
	font-size: var(--nagi-t-small);
	border-color: var(--nagi-sand);
	color: var(--nagi-text-dark);
	width: 100%;
}

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

.nagi-pagination { margin-top: var(--nagi-space-7); }

.nagi-pagination__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--nagi-space-2);
	justify-content: center;
}

.nagi-pagination a,
.nagi-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--nagi-space-2);
	border: 1px solid var(--nagi-surface-rule, rgba(31, 31, 31, 0.14));
	border-radius: var(--nagi-radius);
	font-family: var(--nagi-f-mono);
	font-size: var(--nagi-t-micro);
	transition: border-color var(--nagi-dur-s) var(--nagi-ease), color var(--nagi-dur-s) var(--nagi-ease);
}

.nagi-pagination a:hover { border-color: var(--nagi-red); color: var(--nagi-red-deep); }
.nagi-pagination .current { background: var(--nagi-ink); color: var(--nagi-text-light); border-color: var(--nagi-ink); }

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

.nagi-empty { text-align: center; padding-block: var(--nagi-space-8); }
.nagi-empty__mark { color: var(--nagi-red-deep); display: inline-flex; margin-bottom: var(--nagi-space-4); }
.nagi-empty__title { font-size: var(--nagi-t-h2); margin-bottom: var(--nagi-space-3); }
.nagi-empty__lede { margin-inline: auto; }
.nagi-empty__actions { margin-top: var(--nagi-space-5); }

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

/* --------------------------------------------------------------------------
   PRODUCT SINGLE
   -------------------------------------------------------------------------- */

.nagi-product-top {
	padding-block: calc(var(--nagi-header-h) + var(--nagi-space-4)) var(--nagi-space-3);
	margin-top: calc(var(--nagi-header-h) * -1);
	background: var(--nagi-ink);
	color: var(--nagi-text-light);
}

.nagi-product__top { align-items: start; padding-block: var(--nagi-space-6); }

@media (min-width: 901px) {
	.nagi-product__media { position: sticky; top: calc(var(--nagi-header-h) + var(--nagi-space-4)); }
}

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

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

.nagi-gallery__zoom {
	position: absolute;
	right: var(--nagi-space-3);
	bottom: var(--nagi-space-3);
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	background: rgba(26, 26, 26, 0.72);
	backdrop-filter: blur(6px);
	color: var(--nagi-text-light);
	border-radius: var(--nagi-radius);
	transition: background-color var(--nagi-dur-s) var(--nagi-ease);
}

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

.nagi-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	gap: var(--nagi-space-2);
	margin-top: var(--nagi-space-2);
}

/*
 * Desktop puts the thumbnails in a rail down the left of the main image, so
 * the whole gallery is visible without scrolling past it. Below 900px they
 * fall back to the row underneath, where a vertical rail would steal width
 * the main image needs.
 */
@media (min-width: 901px) {
	.nagi-gallery {
		display: grid;
		grid-template-columns: 76px minmax(0, 1fr);
		gap: var(--nagi-space-2);
		align-items: start;
	}

	.nagi-gallery__thumbs {
		grid-column: 1;
		grid-row: 1;
		grid-template-columns: minmax(0, 1fr);
		align-content: start;
		margin-top: 0;
	}

	.nagi-gallery__main {
		grid-column: 2;
		grid-row: 1;
	}
}

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

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

.nagi-gallery__thumb-frame {
	position: absolute;
	inset: 0;
	border: 1px solid transparent;
	border-radius: var(--nagi-radius);
	transition: border-color var(--nagi-dur-s) var(--nagi-ease);
}

.nagi-gallery__thumb:hover .nagi-gallery__thumb-frame,
.nagi-gallery__thumb[aria-pressed="true"] .nagi-gallery__thumb-frame { border-color: var(--nagi-red); }
.nagi-gallery__thumb[aria-pressed="true"] .nagi-gallery__thumb-frame { border-width: 2px; }

.nagi-lightbox {
	position: fixed;
	inset: 0;
	z-index: var(--nagi-z-modal);
	display: grid;
	place-items: center;
	padding: var(--nagi-space-5);
	background: rgba(26, 26, 26, 0.94);
	backdrop-filter: blur(8px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 250ms var(--nagi-ease);
}

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

.nagi-lightbox__img {
	max-width: min(92vw, 900px);
	max-height: 88vh;
	width: auto;
	height: auto;
	object-fit: contain;
	clip-path: inset(100% 0 0 0);
	transition: clip-path 400ms var(--nagi-ease);
}

.nagi-lightbox[data-open="true"] .nagi-lightbox__img { clip-path: inset(0 0 0 0); }

.nagi-lightbox__close {
	position: absolute;
	top: var(--nagi-space-4);
	right: var(--nagi-space-4);
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	color: var(--nagi-text-light);
}

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

/* --------------------------------------------------------------------------
   Summary column
   -------------------------------------------------------------------------- */

.nagi-product__line a { color: var(--nagi-accent, var(--nagi-red-deep)); }
.nagi-product__title { font-size: var(--nagi-t-h1); margin-bottom: var(--nagi-space-3); }

.nagi-product__price {
	font-size: var(--nagi-t-h3);
	font-family: var(--nagi-f-display);
	color: var(--nagi-text-dark);
	margin-bottom: var(--nagi-space-3);
}

.nagi-product__price del { opacity: 0.5; margin-right: 0.4em; font-size: 0.8em; }
.nagi-product__price ins { text-decoration: none; }
.nagi-product__excerpt { color: var(--nagi-text-mute); margin-bottom: var(--nagi-space-4); max-width: 52ch; }

.nagi-swatches-wrap { margin-block: var(--nagi-space-4); }

.nagi-swatches__label {
	display: flex;
	gap: var(--nagi-space-2);
	color: var(--nagi-text-mute);
	margin-bottom: var(--nagi-space-2);
}

.nagi-swatches__chosen { color: var(--nagi-text-dark); }

.nagi-swatches { display: flex; flex-wrap: wrap; gap: var(--nagi-space-2); align-items: flex-end; }

.nagi-swatch {
	position: relative;
	display: grid;
	justify-items: center;
	align-content: end;
	gap: 6px;
	min-width: 60px;
	min-height: 44px;
	padding: var(--nagi-space-2);
	border-radius: var(--nagi-radius);
	color: var(--nagi-ink);
	opacity: 0.55;
	transition: opacity 180ms var(--nagi-ease);
}

.nagi-swatch:hover { opacity: 0.85; }
.nagi-swatch[aria-pressed="true"] { opacity: 1; }

.nagi-swatches--bottles .nagi-swatch__bottle { display: flex; align-items: flex-end; }

.nagi-swatches--pills .nagi-swatch {
	border: 1px solid var(--nagi-sand);
	align-content: center;
	padding-inline: var(--nagi-space-3);
}

.nagi-swatch__label {
	font-family: var(--nagi-f-mono);
	font-size: 10px;
	letter-spacing: var(--nagi-ls-mono);
	text-transform: uppercase;
}

/* The native select stays for no-JS; JS-capable browsers get the swatches. */
html[data-motion="ready"] .nagi-variations__native {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.nagi-variations__wrap { margin-top: var(--nagi-space-3); }

.woocommerce-variation-price {
	margin-bottom: var(--nagi-space-3);
	font-size: var(--nagi-t-h3);
	font-family: var(--nagi-f-display);
}

form.cart { display: flex; flex-wrap: wrap; gap: var(--nagi-space-2); align-items: stretch; }
.nagi-variations { display: block; }

.quantity,
.nagi-qty {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--nagi-sand);
	border-radius: var(--nagi-radius);
	overflow: hidden;
}

.nagi-qty__btn {
	width: 44px;
	min-height: 44px;
	display: grid;
	place-items: center;
	color: var(--nagi-text-dark);
	transition: background-color var(--nagi-dur-s) var(--nagi-ease);
}

.nagi-qty__btn:hover { background: var(--nagi-paper-deep); }

.quantity input.qty,
.nagi-qty input.qty {
	width: 56px;
	min-height: 44px;
	border: 0;
	background: transparent;
	text-align: center;
	font-family: var(--nagi-f-mono);
	font-size: var(--nagi-t-small);
	color: var(--nagi-text-dark);
	transition: opacity 120ms var(--nagi-ease);
	-moz-appearance: textfield;
}

.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.single_add_to_cart_button {
	flex: 1;
	min-width: 180px;
	min-height: 44px;
	padding: 0.9rem 1.6rem;
	background: var(--nagi-red);
	color: var(--nagi-on-red);
	border: 0;
	border-radius: var(--nagi-radius);
	font-family: var(--nagi-f-body);
	font-size: var(--nagi-t-small);
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background-color var(--nagi-dur-s) var(--nagi-ease);
}

.single_add_to_cart_button:hover { background: var(--nagi-red-deep); }
.single_add_to_cart_button.disabled { opacity: 0.45; pointer-events: none; }

.nagi-trust-row { margin-top: var(--nagi-space-4); }

.nagi-trust-row__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-mute);
}

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

.nagi-origin-strip__label { color: var(--nagi-text-mute); }
.nagi-origin-strip__value { color: var(--nagi-text-dark); }

.nagi-product__detail { padding-block: var(--nagi-space-6) var(--nagi-space-8); max-width: var(--nagi-max-narrow); }
.nagi-accordion__heading { margin: 0; }
.nagi-accordion__body { padding-block: var(--nagi-space-3) var(--nagi-space-4); }
.nagi-panel__h { font-size: 1rem; margin-block: var(--nagi-space-3) var(--nagi-space-1); }

.nagi-panel__note {
	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-deep);
}

.nagi-sticky-atc__info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.nagi-sticky-atc__name { font-size: var(--nagi-t-small); font-weight: 600; }
.nagi-sticky-atc__price { font-family: var(--nagi-f-mono); font-size: var(--nagi-t-micro); color: var(--nagi-text-light-m); }
.nagi-sticky-atc__price del { display: none; }

/* --------------------------------------------------------------------------
   CART / CHECKOUT / ACCOUNT
   -------------------------------------------------------------------------- */

/* Checkout has its own grid in checkout.css; this is the cart page only. */
.nagi-cart { display: grid; grid-template-columns: 62% 38%; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }

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

.nagi-cart__aside { position: sticky; top: calc(var(--nagi-header-h) + var(--nagi-space-4)); }

.nagi-cart-item {
	display: grid;
	grid-template-columns: 88px 1fr auto;
	gap: var(--nagi-space-3);
	align-items: start;
	padding-block: var(--nagi-space-4);
	border-bottom: 1px solid var(--nagi-surface-rule, rgba(31, 31, 31, 0.14));
}

.nagi-cart-item__media { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--nagi-radius); background: var(--nagi-ink); }
.nagi-cart-item__name { font-family: var(--nagi-f-display); font-size: 1.0625rem; }
.nagi-cart-item__meta { font-family: var(--nagi-f-mono); font-size: var(--nagi-t-micro); color: var(--nagi-text-mute); }
.nagi-cart-item__price { text-align: right; white-space: nowrap; }

.nagi-summary {
	padding: var(--nagi-space-4);
	border: 1px solid var(--nagi-surface-rule, rgba(31, 31, 31, 0.14));
	border-radius: var(--nagi-radius);
	background: var(--nagi-paper-deep);
}

.nagi-summary__row {
	display: flex;
	justify-content: space-between;
	gap: var(--nagi-space-3);
	padding-block: var(--nagi-space-2);
	font-size: var(--nagi-t-small);
}

.nagi-summary__row--total {
	border-top: 1px solid var(--nagi-sand);
	margin-top: var(--nagi-space-2);
	padding-top: var(--nagi-space-3);
	font-family: var(--nagi-f-display);
	font-size: var(--nagi-t-h3);
}

.nagi-account { display: grid; grid-template-columns: 240px 1fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }

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

.nagi-account__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.nagi-account__nav a {
	display: block;
	padding: var(--nagi-space-2) var(--nagi-space-3);
	border-radius: var(--nagi-radius);
	font-size: var(--nagi-t-small);
	min-height: 44px;
	transition: background-color var(--nagi-dur-s) var(--nagi-ease);
}

.nagi-account__nav a:hover { background: var(--nagi-paper-deep); }
.nagi-account__nav .is-active a { background: var(--nagi-ink); color: var(--nagi-text-light); }

.nagi-form-row { display: grid; gap: var(--nagi-space-1); margin-bottom: var(--nagi-space-3); }
.nagi-form-row label { font-size: var(--nagi-t-small); color: var(--nagi-text-mute); }

.nagi-form-row input,
.nagi-form-row select,
.nagi-form-row textarea {
	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-size: var(--nagi-t-small);
	min-height: 44px;
	transition: border-color 200ms var(--nagi-ease);
}

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

/* Notices */
.nagi-notice,
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	list-style: none;
	margin: 0 0 var(--nagi-space-4);
	padding: var(--nagi-space-3) var(--nagi-space-4);
	border-left: 2px solid var(--nagi-red);
	border-radius: var(--nagi-radius);
	background: rgba(175, 26, 22, 0.08);
	font-size: var(--nagi-t-small);
}

.woocommerce-error { border-left-color: var(--nagi-error); background: rgba(163, 58, 46, 0.07); }
.woocommerce-message { border-left-color: var(--nagi-success); background: rgba(46, 107, 79, 0.07); }
/* --------------------------------------------------------------------------
   Checkout

   Nothing here. The checkout is owned entirely by checkout.css, which loads on
   is_checkout() — and that covers the checkout page, the order-pay endpoint
   and WooCommerce's own AJAX refreshes.

   Baseline copies of these rules used to live here as a fallback. They had to
   go: .wc_payment_method > label is more specific than .nagi-co-pay__label, so
   the fallback outranked the real styling and drew a second border inside every
   payment card. A duplicate that wins over the thing it is backing up is not a
   fallback.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Login / register
   -------------------------------------------------------------------------- */

.nagi-login { display: grid; grid-template-columns: 44% 56%; gap: clamp(1.5rem, 3vw, 3.5rem); align-items: start; }

@media (max-width: 900px) {
	.nagi-login { grid-template-columns: minmax(0, 1fr); }
	.nagi-login__figure { display: none; }
}

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

.nagi-login__caption {
	position: absolute;
	left: var(--nagi-space-4);
	bottom: var(--nagi-space-4);
	padding: var(--nagi-space-1) var(--nagi-space-2);
	background: rgba(26, 26, 26, 0.72);
	backdrop-filter: blur(6px);
	border-radius: var(--nagi-radius);
}

.nagi-login__caption .nagi-node__label { color: var(--nagi-text-light); }
.nagi-login__forms { display: grid; gap: var(--nagi-space-6); }
.nagi-login__h { font-size: var(--nagi-t-h3); margin-bottom: var(--nagi-space-4); }

.nagi-login__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nagi-space-3);
	flex-wrap: wrap;
	margin-bottom: var(--nagi-space-3);
	font-size: var(--nagi-t-small);
}

/* --------------------------------------------------------------------------
   Order received
   -------------------------------------------------------------------------- */

.nagi-thankyou { max-width: var(--nagi-max-narrow); margin-inline: auto; text-align: center; }
.nagi-thankyou__head { margin-bottom: var(--nagi-space-6); }
.nagi-thankyou__tick { color: var(--nagi-success); display: inline-flex; margin-bottom: var(--nagi-space-4); }
.nagi-thankyou h1 { font-size: var(--nagi-t-h1); margin-bottom: var(--nagi-space-3); }
.nagi-thankyou .nagi-lede { margin-inline: auto; }
.nagi-thankyou__summary { text-align: left; }
.nagi-thankyou__cod { margin-top: var(--nagi-space-3); color: var(--nagi-red-deep); }
.nagi-thankyou__actions { margin-top: var(--nagi-space-6); }

/* --------------------------------------------------------------------------
   Cart extras
   -------------------------------------------------------------------------- */

.nagi-cart__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--nagi-space-3);
	padding-top: var(--nagi-space-4);
}

.nagi-coupon { display: flex; gap: var(--nagi-space-2); align-items: center; }
.nagi-coupon .nagi-input--sm { width: 160px; }

.nagi-cart-item__controls {
	display: flex;
	align-items: center;
	gap: var(--nagi-space-3);
	margin-top: var(--nagi-space-2);
	flex-wrap: wrap;
}

.nagi-cart-item__remove {
	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);
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.nagi-cart-item__remove:hover { color: var(--nagi-error); }

.cart_totals table { width: 100%; }
.cart_totals th, .cart_totals td {
	padding: var(--nagi-space-2) 0;
	text-align: left;
	font-size: var(--nagi-t-small);
	border-bottom: 1px solid var(--nagi-sand);
}
.cart_totals td { text-align: right; }
.cart_totals .order-total th, .cart_totals .order-total td {
	font-family: var(--nagi-f-display);
	font-size: var(--nagi-t-h3);
	border-bottom: 0;
}

.wc-proceed-to-checkout { margin-top: var(--nagi-space-4); }

.wc-proceed-to-checkout .checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	padding: 1.05rem 2rem;
	background: var(--nagi-red);
	color: var(--nagi-on-red);
	border-radius: var(--nagi-radius);
	font-weight: 600;
	font-size: 0.9375rem;
	transition: background-color var(--nagi-dur-s) var(--nagi-ease);
}

.wc-proceed-to-checkout .checkout-button:hover { background: var(--nagi-red-deep); }