/**
 * Joov — AJAX add to basket: button states, toast, header count bump.
 * Site tokens only (ACSS + Etch). Toast sits under the cookie banner and lightbox,
 * over the sticky bar (40).
 */

/* Button while the request is in flight. Not :disabled — the sticky bar reads that as sold out. */
.single_add_to_cart_button.joov-atc--busy,
.joov-atc-busy .joov-satc__btn {
	pointer-events: none;
	opacity: 0.75;
	cursor: progress;
}

.single_add_to_cart_button.joov-atc--busy::after {
	content: "";
	display: inline-block;
	inline-size: 0.9em;
	block-size: 0.9em;
	margin-inline-start: 0.5em;
	vertical-align: -0.1em;
	border: 2px solid currentColor;
	border-inline-end-color: transparent;
	border-radius: 50%;
	animation: joov-atc-spin 700ms linear infinite;
}

@keyframes joov-atc-spin {
	to { transform: rotate(360deg); }
}

/* Header basket count: a short pop when it changes. */
.joov-atc-bump {
	animation: joov-atc-bump 420ms ease;
}

@keyframes joov-atc-bump {
	0% { transform: scale(1); }
	40% { transform: scale(1.35); }
	100% { transform: scale(1); }
}

/* --------------------------------------------------------------- toast */

.joov-atc-toast {
	position: fixed;
	z-index: 60;
	/* Below the header row so the basket count stays visible as it updates. */
	inset-block-start: 5.5rem;
	inset-inline-end: 1rem;
	inline-size: min(24rem, calc(100vw - 2rem));
	border-radius: var(--radius, 6px);
	background-color: var(--white, #fff);
	color: var(--text-dark, #111);
	border: 1px solid var(--neutral-light, #e5e5e5);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
	opacity: 0;
	transform: translateY(-0.75rem);
	transition: opacity 200ms ease, transform 200ms ease;
}

.joov-atc-toast[hidden] {
	display: none;
}

.joov-atc-toast--in {
	opacity: 1;
	transform: translateY(0);
}

.joov-atc-toast__body {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	padding: var(--card-padding, 1rem);
	flex: 1 1 auto;
	min-inline-size: 0;
}

.joov-atc-toast--error {
	display: flex;
	align-items: flex-start;
}

.joov-atc-toast__item {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
}

.joov-atc-toast__img {
	flex: 0 0 auto;
	inline-size: 3.5rem;
	block-size: 3.5rem;
	border-radius: 3px;
	object-fit: cover;
	background-color: var(--neutral-ultra-light, #f5f5f5);
}

.joov-atc-toast__meta {
	flex: 1 1 auto;
	min-inline-size: 0;
}

.joov-atc-toast p {
	margin: 0;
}

/* Same recipe as the site's .home-eyebrow: pink, 2px mark, 600, 0.18em. */
.joov-atc-toast__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	color: var(--primary);
	font-size: var(--text-xs, 0.75rem);
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1.3333;
	text-transform: uppercase;
	white-space: nowrap;
}

.joov-atc-toast__mark {
	inline-size: 1.75rem;
	block-size: 2px;
	flex-shrink: 0;
	background: currentColor;
}

.joov-atc-toast--error .joov-atc-toast__eyebrow {
	color: var(--danger, #c62828);
}

.joov-atc-toast__name {
	margin-block-start: 0.375rem !important;
	overflow: hidden;
	font-family: var(--heading-font-family);
	font-size: var(--text-m, 1.05rem);
	font-style: italic;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

.joov-atc-toast__variant,
.joov-atc-toast__msg {
	margin-block-start: 0.2rem !important;
	color: var(--text-dark-muted, #6b6b6b);
	font-size: var(--text-s, 0.875rem);
	line-height: 1.4;
}

.joov-atc-toast__msg {
	color: var(--text-dark, #111);
}

.joov-atc-toast__close {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	inline-size: 2rem;
	block-size: 2rem;
	margin: -0.25rem -0.25rem 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--text-dark-muted, #6b6b6b);
	cursor: pointer;
}

.joov-atc-toast--error .joov-atc-toast__close {
	margin: 0.75rem 0.75rem 0 0;
}

.joov-atc-toast__close:hover {
	background-color: var(--neutral-ultra-light, #f5f5f5);
	color: var(--text-dark, #111);
}

.joov-atc-toast__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
}

.joov-atc-toast__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: 2.75rem;
	padding-inline: 1rem;
	border: 2px solid var(--primary);
	border-radius: 3px;
	background-color: var(--primary);
	color: var(--white, #fff) !important;
	font-size: var(--text-s, 0.875rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-decoration: none !important;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.joov-atc-toast__btn--ghost {
	background-color: transparent;
	border-color: var(--text-dark, #111);
	color: var(--text-dark, #111) !important;
}

@media (hover: hover) {
	.joov-atc-toast__btn:hover {
		border-color: var(--primary-hover);
		background-color: var(--primary-hover);
	}

	.joov-atc-toast__btn--ghost:hover {
		border-color: var(--text-dark, #111);
		background-color: var(--text-dark, #111);
		color: var(--white, #fff) !important;
	}
}

.joov-atc-toast__btn:focus-visible,
.joov-atc-toast__close:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

/* Google's Merchant Center badge (bottom-right, z max) would sit on the toast's
   Checkout button: hide it while the toast is up. */
html.joov-atc-toast-open #google-merchantwidget-iframe-wrapper {
	visibility: hidden !important;
	opacity: 0 !important;
}

/* Phones: full width along the bottom, above the sticky bar when it is open. */
@media (width < 700px) {
	.joov-atc-toast {
		inset-block-start: auto;
		inset-block-end: calc(0.75rem + env(safe-area-inset-bottom, 0px));
		inset-inline: 0.75rem;
		inline-size: auto;
		transform: translateY(0.75rem);
	}

	html.joov-satc-open .joov-atc-toast {
		inset-block-end: calc(var(--joov-satc-h, 0px) + 0.75rem);
	}

	.joov-atc-toast--in {
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.joov-atc-toast,
	.joov-atc-bump {
		transition: none;
		animation: none;
	}

	.single_add_to_cart_button.joov-atc--busy::after {
		animation-duration: 2s;
	}
}