/* ==========================================================================
   Off-screen (slide-out) cart — drawer panel styles.

   Ported from the nomon-bricks Off-Screen Cart element and reskinned onto the
   theme's design tokens. All selectors are prefixed with `.nomon-cart` to
   prevent bleed. The cart *trigger* button is styled by header.php (Tailwind
   utilities); this file only needs the count-bubble hide rule for it.

   Variable layer maps to the theme's WP preset CSS vars (theme.json single
   source of truth), with literal fallbacks for when the cart is somehow
   rendered before presets load.
   ========================================================================== */

:root {
	--nomon-cart-drawer-width: 420px;
	--nomon-cart-z-index: 2000000; /* above third-party chat/widgets so the open cart covers them */
	--nomon-cart-bg: var(--wp--preset--color--background, #ffffff);
	--nomon-cart-backdrop-bg: rgb(0 0 0 / 0.45);
	--nomon-cart-border: var(--wp--preset--color--border-subtle, #efefef);
	--nomon-cart-grey: var(--wp--preset--color--surface, #f1f3f8);
	--nomon-cart-grey-hover: var(--wp--preset--color--border, #dbdbdb);
	--nomon-cart-text: var(--wp--preset--color--foreground, #000000);
	--nomon-cart-text-light: var(--wp--preset--color--muted, #6c6c6c);
	--nomon-cart-primary: var(--wp--preset--color--accent, #0032cc);
	--nomon-cart-primary-hover: var(--wp--preset--color--ink, #001e7a);
	/* Text on each of those. Ink on yellow is 13:1; the white this file used
	   while `primary` was koneesi's blue is 1.9:1 on the repainted accent. */
	--nomon-cart-on-primary: var(--wp--preset--color--ink, #07121c);
	--nomon-cart-on-primary-hover: var(--wp--preset--color--background, #ffffff);
	--nomon-cart-success: var(--wp--preset--color--success, #1a5e2a);
	--nomon-cart-danger: var(--wp--preset--color--danger, #cc3300);
	--nomon-cart-transition: 0.3s ease;
	--nomon-cart-spacing-sm: 6px;
	--nomon-cart-spacing-md: 12px;
	--nomon-cart-spacing-lg: 16px;
	--nomon-cart-font-size-sm: 12px;
	--nomon-cart-font-size-md: 14px;
	--nomon-cart-font-size-lg: 16px;
	--nomon-cart-font-size-xl: 18px;
	--nomon-cart-header-height: 52px;
	--nomon-cart-progress-height: 6px;
	--nomon-cart-thumb-size: 56px;
}

/* --------------------------------------------------------------------------
   Body lock
   -------------------------------------------------------------------------- */
body.nomon-cart-is-open {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Trigger count bubble — the button itself is styled in header.php; we only
   own the hide-when-empty rule. The descendant selector (0,2,0) out-ranks the
   Tailwind `inline-grid` display utility (0,1,0) regardless of load order.
   -------------------------------------------------------------------------- */
.nomon-cart-trigger .nomon-cart-trigger__count--hidden {
	display: none;
}

/* --------------------------------------------------------------------------
   Panel backdrop
   -------------------------------------------------------------------------- */
.nomon-cart-panel {
	position: fixed;
	inset: 0;
	z-index: var(--nomon-cart-z-index);
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s var(--nomon-cart-transition);
}

.nomon-cart-panel.is-open {
	visibility: visible;
	pointer-events: auto;
	transition: visibility 0s;
}

.nomon-cart-backdrop {
	position: absolute;
	inset: 0;
	background: var(--nomon-cart-backdrop-bg);
	opacity: 0;
	transition: opacity var(--nomon-cart-transition);
}

.nomon-cart-panel.is-open .nomon-cart-backdrop {
	opacity: 1;
}

/* --------------------------------------------------------------------------
   Drawer
   -------------------------------------------------------------------------- */
.nomon-cart-drawer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(var(--nomon-cart-drawer-width), 100vw);
	background: var(--nomon-cart-bg);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transform: translateX(100%);
	transition: transform var(--nomon-cart-transition);
}

.nomon-cart-panel.is-open .nomon-cart-drawer {
	transform: translateX(0);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.nomon-cart-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
	height: var(--nomon-cart-header-height);
	padding: 0 5px 0 var(--nomon-cart-spacing-lg);
	border-bottom: 1px solid var(--nomon-cart-border);
}

.nomon-cart-header__title {
	margin: 0;
	font-size: var(--nomon-cart-font-size-lg);
	font-weight: 600;
	color: var(--nomon-cart-text);
}

.nomon-cart-header__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	color: var(--nomon-cart-text-light);
	transition: color var(--nomon-cart-transition);
}

.nomon-cart-header__close svg {
	width: 24px;
	height: 24px;
}

.nomon-cart-header__close:hover {
	color: var(--nomon-cart-text);
}

.nomon-cart-header__close:focus-visible {
	outline: 2px solid var(--nomon-cart-primary);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Free-shipping progress bar
   -------------------------------------------------------------------------- */
.nomon-cart-shipping-progress {
	flex-shrink: 0;
	padding: var(--nomon-cart-spacing-md) var(--nomon-cart-spacing-lg) var(--nomon-cart-spacing-sm);
	border-bottom: 1px solid var(--nomon-cart-border);
}

.nomon-cart-shipping-progress__bar {
	height: var(--nomon-cart-progress-height);
	background: var(--nomon-cart-border);
	overflow: hidden;
}

.nomon-cart-shipping-progress__fill {
	height: 100%;
	width: 0%;
	background: var(--nomon-cart-primary);
	transition: width 0.4s ease;
}

.nomon-cart-shipping-progress.is-unlocked .nomon-cart-shipping-progress__fill {
	background: var(--nomon-cart-success);
}

.nomon-cart-shipping-progress__message {
	margin: var(--nomon-cart-spacing-sm) 0 0;
	font-size: var(--nomon-cart-font-size-sm);
	color: var(--nomon-cart-text-light);
}

.nomon-cart-shipping-progress.is-unlocked .nomon-cart-shipping-progress__message {
	color: var(--nomon-cart-success);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Cart items list
   -------------------------------------------------------------------------- */
.nomon-cart-items {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: var(--nomon-cart-spacing-md) var(--nomon-cart-spacing-lg);
	overscroll-behavior: contain;
	-webkit-mask-image: linear-gradient(to bottom, black calc(100% - 48px), transparent 100%);
	mask-image: linear-gradient(to bottom, black calc(100% - 48px), transparent 100%);
}

/* Empty state */
.nomon-cart-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--nomon-cart-spacing-md);
	min-height: 100%;
	padding: var(--nomon-cart-spacing-lg) 0;
	text-align: center;
}

.nomon-cart-empty__icon {
	color: var(--nomon-cart-grey-hover);
}

.nomon-cart-empty__icon svg {
	width: 80px;
	height: 80px;
}

.nomon-cart-empty__message {
	margin: 0;
	font-size: var(--nomon-cart-font-size-lg);
	color: var(--nomon-cart-text-light);
}

/* Uppercase Barlow Condensed, as every other button in the theme (the grouped
   rule in main.css); the drawer's own stylesheet carries it because cart.css
   owns the drawer's surfaces. */
.nomon-cart-empty__cta,
.nomon-cart-summary__checkout {
	font-family: var(--wp--preset--font-family--barlow-condensed);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.nomon-cart-empty__cta {
	display: inline-block;
	padding: 12px 20px;
	background: var(--nomon-cart-primary);
	color: var(--nomon-cart-on-primary);
	text-decoration: none;
	font-size: var(--nomon-cart-font-size-md);
	font-weight: 600;
	transition: background var(--nomon-cart-transition), color var(--nomon-cart-transition);
}

.nomon-cart-empty__cta:hover {
	background: var(--nomon-cart-primary-hover);
	color: var(--nomon-cart-on-primary-hover);
}

/* Individual cart item */
.nomon-cart-item {
	display: grid;
	grid-template-columns: var(--nomon-cart-thumb-size) 1fr;
	gap: var(--nomon-cart-spacing-md);
	padding: var(--nomon-cart-spacing-md) 0;
	border-bottom: 1px solid var(--nomon-cart-border);
	position: relative;
	transition: opacity var(--nomon-cart-transition);
}

.nomon-cart-item.is-loading {
	opacity: 0.5;
	pointer-events: none;
}

.nomon-cart-item.is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 2px solid var(--nomon-cart-border);
	border-top-color: var(--nomon-cart-text);
	border-radius: 50%;
	animation: nomon-cart-spin 0.6s linear infinite;
}

@keyframes nomon-cart-spin {
	to { transform: rotate(360deg); }
}

.nomon-cart-item:last-child {
	border-bottom: none;
}

.nomon-cart-item__image {
	width: var(--nomon-cart-thumb-size);
	height: var(--nomon-cart-thumb-size);
	flex-shrink: 0;
	overflow: hidden;
	/* Framed white tile matching the search-results thumbnails
	   (main.css `.nomon-search .sssresults .sss_items .wp-post-image`):
	   1px border token + radius on white, image letterboxed via contain. */
	border: 1px solid var(--wp--preset--color--border, #dbdbdb);
	background: #fff;
}

.nomon-cart-item__image-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.nomon-cart-item__details {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.nomon-cart-item__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--nomon-cart-spacing-sm);
}

.nomon-cart-item__name {
	font-size: var(--nomon-cart-font-size-md);
	font-weight: 600;
	color: var(--nomon-cart-text);
	word-break: break-word;
}

.nomon-cart-item__remove {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--nomon-cart-border);
	cursor: pointer;
	color: var(--nomon-cart-text-light);
	transition: color var(--nomon-cart-transition), background var(--nomon-cart-transition);
}

.nomon-cart-item__remove svg {
	width: 14px;
	height: 14px;
}

.nomon-cart-item__remove:hover {
	color: var(--nomon-cart-danger);
	background: var(--nomon-cart-grey);
}

.nomon-cart-item__remove:focus-visible,
.nomon-cart-item__qty-btn:focus-visible {
	outline: 2px solid var(--nomon-cart-primary);
	outline-offset: 2px;
}

.nomon-cart-item__variation {
	font-size: var(--nomon-cart-font-size-sm);
	color: var(--nomon-cart-text-light);
}

.nomon-cart-item__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: var(--nomon-cart-spacing-sm);
}

/* Quantity controls */
.nomon-cart-item__qty-controls {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border: 1px solid var(--nomon-cart-border);
	overflow: hidden;
}

.nomon-cart-item__qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	color: var(--nomon-cart-text);
	transition: background var(--nomon-cart-transition);
}

.nomon-cart-item__qty-btn svg {
	width: 14px;
	height: 14px;
}

.nomon-cart-item__qty-btn:hover {
	background: var(--nomon-cart-grey);
}

.nomon-cart-item__qty-value {
	min-width: 20px;
	text-align: center;
	font-size: var(--nomon-cart-font-size-sm);
	color: var(--nomon-cart-text);
}

.nomon-cart-item__price {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--nomon-cart-font-size-md);
	font-weight: 600;
	color: var(--nomon-cart-text);
	white-space: nowrap;
}

/* Discounted price — accent pill matching the product card/page sale price.
   Keeps the cart's price font size; just adds the box. */
.nomon-cart-item__price-sale {
	display: inline-block;
	padding: 3px 8px;
	color: var(--nomon-cart-on-primary);
	background: var(--nomon-cart-primary);
}

.nomon-cart-item__price-original {
	font-weight: 400;
	font-size: 0.85em;
	color: var(--nomon-cart-text-light);
	text-decoration: line-through;
}

/* --------------------------------------------------------------------------
   Summary / footer
   -------------------------------------------------------------------------- */
.nomon-cart-summary {
	flex-shrink: 0;
	padding: var(--nomon-cart-spacing-md) var(--nomon-cart-spacing-lg) var(--nomon-cart-spacing-lg);
	border-top: 1px solid var(--nomon-cart-border);
}

.nomon-cart-summary__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 2px 0;
	font-size: var(--nomon-cart-font-size-md);
	color: var(--nomon-cart-text-light);
}

.nomon-cart-summary__row--total {
	font-size: var(--nomon-cart-font-size-md);
	font-weight: 700;
	color: var(--nomon-cart-text);
	border-top: 1px solid var(--nomon-cart-border);
	margin-top: 6px;
	padding-top: 6px;
}

.nomon-cart-summary__row--total .nomon-cart-summary__value {
	font-size: var(--nomon-cart-font-size-xl);
}

.nomon-cart-summary__checkout {
	display: block;
	width: auto;
	margin: 0 var(--nomon-cart-spacing-lg) var(--nomon-cart-spacing-lg);
	padding: 14px var(--nomon-cart-spacing-md);
	background: var(--nomon-cart-primary);
	color: var(--nomon-cart-on-primary);
	text-align: center;
	text-decoration: none;
	font-size: var(--nomon-cart-font-size-lg);
	font-weight: 700;
	transition: background var(--nomon-cart-transition), color var(--nomon-cart-transition);
}

.nomon-cart-summary__checkout:hover {
	background: var(--nomon-cart-primary-hover);
	color: var(--nomon-cart-on-primary-hover);
}

.nomon-cart-summary__checkout:focus-visible {
	outline: 2px solid var(--nomon-cart-primary);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Reduced motion — honour the user preference: no slide-in, fade, or spinner.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.nomon-cart-panel,
	.nomon-cart-backdrop,
	.nomon-cart-drawer,
	.nomon-cart-shipping-progress__fill,
	.nomon-cart-item {
		transition: none;
	}

	.nomon-cart-item.is-loading::after {
		animation: none;
	}
}