/* =========================================================================
   Scent picker — variable-product swatch row
   Replaces WC's <select> with fluid-vial cards whose bottle morphs into
   the hero gallery image on select (View Transitions API).
   Source-of-truth <select> stays in DOM (visually hidden).
   ========================================================================= */

.asi-scent-picker {
	--sp-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--sp-vial-w: 96px;
	--sp-vial-h: 150px;
	--sp-radius: 20px;
	--sp-ink: var(--wp--preset--color--contrast, #0F172A);
	--sp-muted: var(--wp--preset--color--accent-4, #64748B);
	--sp-surface: #ffffff;
	--sp-border: color-mix(in srgb, var(--sp-ink) 10%, transparent);

	margin-block: 1.75rem 1.25rem;
	font-family: var(--wp--preset--font-family--poppins, inherit);

	/* Take full width inside its parent (the WC form block) so the row of
	   vials sits on its own visual line and never crowds the qty/Add CTA. */
	inline-size: 100%;
	flex: 1 1 100%;
}

:lang(ar) .asi-scent-picker {
	font-family: var(--wp--preset--font-family--tajawal, inherit);
}

/* ─── heading ─────────────────────────────────────────────────────────── */

.asi-scent-picker__heading {
	display: flex;
	align-items: baseline;
	gap: 0.7em;
	margin-block-end: 0.4rem;
	flex-wrap: wrap;
}

.asi-scent-picker__title {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sp-muted);
}

.asi-scent-picker__active {
	font-size: 1rem;
	font-weight: 600;
	color: var(--sp-ink);
	letter-spacing: -0.005em;
	min-block-size: 1.3em;
	transition: opacity 220ms var(--sp-ease);
}

.asi-scent-picker__active[data-empty="true"] {
	color: var(--sp-muted);
	font-weight: 500;
	font-style: italic;
}

/* ─── "About this scent" description ──────────────────────────────────── */
/* One-liner evocative copy from the Revised Fragrance Hint column.       */
/* Renders under the swatch grid; fades in when a scent is selected.      */
.asi-scent-picker__desc {
	margin-block-start: 0.875rem;
	padding-block: 0.625rem;
	padding-inline: 0.875rem;
	border-radius: 10px;
	background: color-mix(in srgb, var(--wp--preset--color--accent-3, #F8FAFC) 70%, transparent);
	border-inline-start: 3px solid color-mix(in srgb, var(--wp--preset--color--accent-1, #0155B7) 35%, transparent);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: color-mix(in srgb, var(--wp--preset--color--contrast, #0F172A) 80%, transparent);
	font-style: italic;
	min-block-size: 1.55em;
	transition: opacity 220ms var(--sp-ease), background 220ms var(--sp-ease);
}

.asi-scent-picker__desc[data-empty="true"] {
	opacity: 0;
	min-block-size: 0;
	padding-block: 0;
	margin-block-start: 0;
	border: none;
}

/* ─── PDP title swap (per-variation H1) ───────────────────────────────── */
/* Assign a view-transition-name so document.startViewTransition() animates */
/* ONLY the H1 crossfade, not the whole page. Browsers without View         */
/* Transitions support ignore this — JS falls back to instant swap.         */
h1.wp-block-post-title,
h1.product_title {
	view-transition-name: asi-pdp-title;
}
::view-transition-old(asi-pdp-title),
::view-transition-new(asi-pdp-title) {
	animation-duration: 280ms;
	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
	.asi-scent-picker__desc { transition: none; }
	h1.wp-block-post-title,
	h1.product_title { view-transition-name: none; }
}

/* ─── row of vials ────────────────────────────────────────────────────── */

.asi-scent-picker__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding-block: 12px 8px;
}

/* ─── one vial ────────────────────────────────────────────────────────── */

.asi-scent-vial {
	--scent: var(--swatch, #94a3b8);

	appearance: none;
	border: 0;
	background: transparent;
	padding: 0;
	cursor: pointer;
	font: inherit;
	color: inherit;

	position: relative;
	inline-size: var(--sp-vial-w);
	block-size: var(--sp-vial-h);
	border-radius: var(--sp-radius);
	isolation: isolate;

	/* Anchor bottle near the top + label near the bottom via flex column
	   with justify between. Reserve fixed dimensions for both regions so
	   bottles sit at identical heights regardless of label line count. */
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 8px 6px 10px;

	/* Card surface — soft, even scent tint across the card with a single
	   subtle highlight at the top-left for depth. Keeping the gradient
	   gentle so the white product window inside reads as the focal
	   element, not the colored frame. */
	background:
		linear-gradient(165deg,
			color-mix(in srgb, var(--scent) 12%, #ffffff) 0%,
			color-mix(in srgb, var(--scent) 22%, #ffffff) 100%);
	border: 1px solid color-mix(in srgb, var(--scent) 28%, var(--sp-border));
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.04),
		inset 0 1px 0 rgba(255, 255, 255, 0.7);

	transition:
		transform 420ms var(--sp-ease),
		border-color 260ms var(--sp-ease),
		box-shadow 420ms var(--sp-ease);
}

/* Entry choreography — matches the view-order house pattern */
.asi-scent-vial {
	opacity: 1;
	transform: translateY(0);
}

@starting-style {
	.asi-scent-vial {
		opacity: 0;
		transform: translateY(10px);
		transition-delay: calc(80ms + var(--swatch-index, 0) * 70ms);
	}
}

/* ─── glass interior ──────────────────────────────────────────────────── */

.asi-scent-vial__glass {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	min-block-size: 0;
	border-radius: 13px;
	overflow: hidden;

	/* White "product window" — bottle PNGs ship on white backgrounds, so
	   the glass interior matches and the bottle blends in. The bottom of
	   the window fades into the scent tint so the window doesn't sit on
	   the card like a hard sticker. */
	background:
		linear-gradient(180deg,
			#ffffff 0%,
			#ffffff 78%,
			color-mix(in srgb, var(--scent) 8%, #ffffff) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		inset 0 -10px 16px -10px color-mix(in srgb, var(--scent) 22%, transparent);
}

/* Bottle image — explicit pixel sizing so layout is bulletproof regardless
   of intrinsic image dimensions. Square box, object-fit contain. */
.asi-scent-vial__bottle {
	display: block;
	inline-size: 76px;
	block-size: 76px;
	object-fit: contain;
	pointer-events: none;
	-webkit-user-drag: none;
	user-select: none;
	filter: drop-shadow(0 4px 6px rgba(15, 23, 42, 0.08));
	transition: transform 480ms var(--sp-ease), filter 480ms var(--sp-ease);
	transform-origin: center 75%;
}

/* Sheen sweep — diagonal mask of light, animates on hover */
.asi-scent-vial__sheen {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	inline-size: 100%;
	block-size: 100%;
	background: linear-gradient(115deg,
		transparent 30%,
		rgba(255, 255, 255, 0.6) 50%,
		transparent 70%);
	transform: translateX(-110%);
	opacity: 0;
	pointer-events: none;
	mix-blend-mode: overlay;
}

:dir(rtl) .asi-scent-vial__sheen {
	transform: translateX(110%);
	background: linear-gradient(-115deg,
		transparent 30%,
		rgba(255, 255, 255, 0.6) 50%,
		transparent 70%);
}

/* ─── label ───────────────────────────────────────────────────────────── */

.asi-scent-vial__label {
	flex: 0 0 2.4em;
	margin-block-start: 6px;

	font-size: 0.76rem;
	font-weight: 600;
	color: var(--sp-ink);
	text-align: center;
	line-height: 1.2;
	letter-spacing: 0.005em;

	/* Fixed 2-line label slot — bottles above sit at identical heights
	   whether the label fits one line ("Lemon Mint") or wraps to two
	   ("Cucumber Melon"). One-liners visually center in the slot. */
	display: flex;
	align-items: center;
	justify-content: center;
	text-wrap: balance;
	overflow: hidden;
	padding-inline: 2px;
}

/* ─── hover ───────────────────────────────────────────────────────────── */

@media (hover: hover) {
	.asi-scent-vial:hover {
		transform: translateY(-4px);
		border-color: color-mix(in srgb, var(--scent) 40%, transparent);
		box-shadow:
			0 10px 24px color-mix(in srgb, var(--scent) 22%, transparent),
			inset 0 1px 0 rgba(255, 255, 255, 0.9);
	}

	.asi-scent-vial:hover .asi-scent-vial__bottle {
		transform: translateY(-2px) scale(1.04);
		filter: drop-shadow(0 10px 14px rgba(15, 23, 42, 0.16));
	}

	.asi-scent-vial:hover .asi-scent-vial__sheen {
		animation: asi-scent-sheen 1.05s var(--sp-ease);
	}
}

@keyframes asi-scent-sheen {
	0%   { transform: translateX(-110%); opacity: 0; }
	18%  { opacity: 1; }
	100% { transform: translateX(110%);  opacity: 0; }
}

:dir(rtl) .asi-scent-vial:hover .asi-scent-vial__sheen {
	animation-name: asi-scent-sheen-rtl;
}

@keyframes asi-scent-sheen-rtl {
	0%   { transform: translateX(110%);  opacity: 0; }
	18%  { opacity: 1; }
	100% { transform: translateX(-110%); opacity: 0; }
}

/* ─── focus ───────────────────────────────────────────────────────────── */

.asi-scent-vial:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1, #0155B7);
	outline-offset: 4px;
}

/* ─── active state ────────────────────────────────────────────────────── */

/* @property powers the rotating conic halo on the active vial */
@property --asi-scent-spin {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

.asi-scent-vial[aria-checked="true"] {
	transform: translateY(-6px);
	border-color: color-mix(in srgb, var(--scent) 70%, transparent);
	box-shadow:
		0 10px 22px color-mix(in srgb, var(--scent) 22%, transparent),
		0 0 0 2px color-mix(in srgb, var(--scent) 55%, transparent),
		inset 0 1px 0 rgba(255, 255, 255, 0.95);
	/* Hint to the compositor: this vial's box-shadow + child ::before halo
	   are continuously animated, so promote it to its own layer. Reduces
	   the chance of the animation stalling under heavy paint pressure
	   (e.g., during a View Transition tear-down). */
	will-change: transform, box-shadow;
	animation: asi-scent-halo-pulse 3s ease-in-out infinite;
}

@keyframes asi-scent-halo-pulse {
	0%, 100% {
		box-shadow:
			0 10px 22px color-mix(in srgb, var(--scent) 22%, transparent),
			0 0 0 2px color-mix(in srgb, var(--scent) 55%, transparent),
			inset 0 1px 0 rgba(255, 255, 255, 0.95);
	}
	50% {
		box-shadow:
			0 12px 26px color-mix(in srgb, var(--scent) 28%, transparent),
			0 0 0 2px color-mix(in srgb, var(--scent) 70%, transparent),
			inset 0 1px 0 rgba(255, 255, 255, 1);
	}
}

/* Tight rotating conic halo — orbits the card edge rather than radiating
   outward. Keeps the "alive" quality without blooming all over the page. */
.asi-scent-vial[aria-checked="true"]::before {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: calc(var(--sp-radius) + 3px);
	background: conic-gradient(from var(--asi-scent-spin),
		color-mix(in srgb, var(--scent) 70%, transparent) 0deg,
		transparent 100deg,
		color-mix(in srgb, var(--scent) 45%, transparent) 200deg,
		transparent 300deg,
		color-mix(in srgb, var(--scent) 70%, transparent) 360deg);
	z-index: -1;
	filter: blur(5px);
	opacity: 0.55;
	animation: asi-scent-spin 6s linear infinite;
}

@keyframes asi-scent-spin {
	to { --asi-scent-spin: 360deg; }
}

.asi-scent-vial[aria-checked="true"] .asi-scent-vial__bottle {
	transform: translateY(-2px) scale(1.04);
	filter: drop-shadow(0 10px 14px color-mix(in srgb, var(--scent) 22%, transparent));
}

.asi-scent-vial[aria-checked="true"] .asi-scent-vial__label {
	color: var(--sp-ink);
	font-weight: 700;
}

/* ─── disabled (out of stock) ─────────────────────────────────────────── */

.asi-scent-vial[aria-disabled="true"] {
	opacity: 0.38;
	cursor: not-allowed;
	filter: grayscale(0.6);
}

.asi-scent-vial[aria-disabled="true"]:hover {
	transform: none;
}

/* ─── hide the native source ──────────────────────────────────────────── */

.asi-scent-picker-bound .variations,
.asi-scent-picker-bound .reset_variations {
	position: absolute !important;
	inline-size: 1px !important;
	block-size: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ─── stack form children so qty + CTA land under the swatches ────────── */

/* WC's variations_form normally lets siblings sit side-by-side with the
   variation table; with our wider swatch picker, the quantity stepper +
   Add-to-cart get crowded to the right. Force a column layout when the
   picker is active so the stepper + CTA land on their own row below. */
form.variations_form.asi-scent-picker-bound {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.asi-scent-picker-bound > .asi-scent-picker,
.asi-scent-picker-bound > .single_variation_wrap {
	inline-size: 100%;
	max-inline-size: 100%;
}

.asi-scent-picker-bound .single_variation_wrap {
	margin-block-start: 0.5rem;
}

/* Hide WC's variation info block ("11 in stock", duplicate price, etc.)
   that appears after a variant is picked. Our picker already communicates
   out-of-stock visually (greyed-out vial), and all variations share the
   parent price — so this row is pure noise. Hiding it also keeps the
   layout identical before and after selection. */
.asi-scent-picker-bound .woocommerce-variation,
.asi-scent-picker-bound .single_variation,
.asi-scent-picker-bound .woocommerce-variation-availability,
.asi-scent-picker-bound .woocommerce-variation-description,
.asi-scent-picker-bound .woocommerce-variation-price {
	display: none !important;
}

.asi-scent-picker-bound .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

/* ─── view transition: bottle → hero morph ────────────────────────────── */

/* Tightened from 620ms → 420ms so the new DOM (with enabled CTA + active
   halo) appears faster after a pick. Snappier feel without losing the
   sense of motion. */
::view-transition-group(asi-scent-hero) {
	animation-duration: 420ms;
	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-old(asi-scent-hero),
::view-transition-new(asi-scent-hero) {
	animation-duration: 420ms;
	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
	mix-blend-mode: normal;
}

/* The rest of the page transitions quietly — we keep this short so the
   surrounding UI doesn't feel like it's stuttering during the bottle morph. */
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 200ms;
}

/* ─── mobile ──────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
	.asi-scent-picker {
		--sp-vial-w: 84px;
		--sp-vial-h: 116px;
		--sp-radius: 18px;
	}

	.asi-scent-picker__row {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-inline: 4px;
		margin-inline: -4px;
		padding-block-end: 14px;

		scrollbar-width: none;
	}

	.asi-scent-picker__row::-webkit-scrollbar {
		display: none;
	}

	.asi-scent-vial {
		flex: 0 0 var(--sp-vial-w);
		scroll-snap-align: start;
	}
}

/* ─── reduced motion ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.asi-scent-vial,
	.asi-scent-vial[aria-checked="true"],
	.asi-scent-vial[aria-checked="true"]::before,
	.asi-scent-vial__bottle,
	.asi-scent-vial__sheen {
		animation: none !important;
		transition-duration: 80ms !important;
	}

	.asi-scent-vial:hover,
	.asi-scent-vial:hover .asi-scent-vial__bottle {
		transform: none !important;
	}

	.asi-scent-vial[aria-checked="true"] {
		transform: none !important;
	}

	.asi-scent-vial[aria-checked="true"] .asi-scent-vial__bottle {
		transform: none !important;
	}

	@starting-style {
		.asi-scent-vial {
			opacity: 1;
			transform: none;
		}
	}

	::view-transition-group(asi-scent-hero),
	::view-transition-old(asi-scent-hero),
	::view-transition-new(asi-scent-hero) {
		animation-duration: 1ms !important;
	}
}