/**
 * Al Sharhan Industries — Custom Styles
 * Design: Figma V2 — Clean corporate e-commerce
 * All properties use CSS logical properties for RTL compatibility.
 */

/* ─── Self-hosted Fonts ─── */
@font-face {
	font-family: 'Poppins';
	src: url('../fonts/poppins/Poppins-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Poppins';
	src: url('../fonts/poppins/Poppins-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Poppins';
	src: url('../fonts/poppins/Poppins-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Poppins';
	src: url('../fonts/poppins/Poppins-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Tajawal';
	src: url('../fonts/tajawal/Tajawal-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Tajawal';
	src: url('../fonts/tajawal/Tajawal-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Tajawal';
	src: url('../fonts/tajawal/Tajawal-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ─── Design Tokens ─── */
:root {
	--asi-radius: 16px;
	--asi-radius-pill: 100px;
	--asi-border: 1px solid rgba(15, 23, 42, 0.15);
	--asi-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
	--asi-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
	--asi-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
	--asi-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
	--asi-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

	/* Brand gradients */
	--asi-gradient-blue: linear-gradient(135deg, #0155B7 0%, #013A7A 100%);
	--asi-gradient-orange: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
	--asi-gradient-green: linear-gradient(135deg, #72B94A 0%, #5A9A38 100%);

	/* Font family — switched to Tajawal for Arabic via PHP inline style */
	--asi-font-family: Poppins, sans-serif;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--asi-transition: 0ms;
		--asi-transition-slow: 0ms;
	}
}

/* ─── Scroll Animations ─── */
.asi-animate-in {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1),
	            transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.asi-animate-in.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ─── Global ─── */
html {
	scroll-behavior: smooth;
}

/* Honour reduced-motion for the global smooth scroll — in-page jump links
   (e.g. the brands page logo jump-nav) must not animate for these users. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body,
body h1, body h2, body h3, body h4, body h5, body h6 {
	font-family: var(--asi-font-family) !important;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/* Pill buttons */
.wp-block-button__link,
.wp-element-button {
	transition: transform var(--asi-transition), box-shadow var(--asi-transition);
	cursor: pointer;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
	transform: translateY(-1px);
	box-shadow: var(--asi-shadow-sm);
}

.wp-block-button__link:active,
.wp-element-button:active {
	transform: translateY(0);
}

/* Ghost/secondary button inset shadow (Figma style) */
.asi-btn-secondary .wp-block-button__link,
.asi-btn-ghost .wp-block-button__link {
	box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05), inset 0 -2px 1px rgba(15, 23, 42, 0.05);
}

/* Primary button glow */
.asi-btn-primary .wp-block-button__link {
	box-shadow: var(--asi-shadow-sm), inset 0 32px 24px rgba(255, 255, 255, 0.05), inset 0 2px 1px rgba(255, 255, 255, 0.25), inset 0 -2px 1px rgba(0, 0, 0, 0.2);
}

/* ─── Header ─── */
/* Wrap topbar + main header so they stick together. */
.asi-header-stack {
	position: sticky;
	inset-block-start: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--base);
}

.asi-header-sticky {
	background-color: var(--wp--preset--color--base);
	transition: box-shadow var(--asi-transition);
}

.asi-header-sticky.is-scrolled {
	box-shadow: var(--asi-shadow-md);
}

/* Top bar — blue gradient announcement (overdrive ticker)
   ----------------------------------------------------------------
   Static gradient was invisible to clients; the bar now hosts a
   continuously-moving conveyor of chip-style promos with a slow
   hue-shift background and a periodic shimmer sweep. Identical on
   desktop + mobile, RTL-aware via animation-direction. */
.asi-topbar {
	border-block-end: none;
	position: relative;
	z-index: 2;
	/* 3-stop gradient with extra length so the background-position
	   animation can drift without revealing an edge. */
	background:
		linear-gradient(
			110deg,
			#013A7A 0%,
			#0155B7 35%,
			#0A6FD8 50%,
			#0155B7 65%,
			#013A7A 100%
		) !important;
	background-size: 220% 100% !important;
	animation: asi-topbar-hue 16s ease-in-out infinite;
}

@keyframes asi-topbar-hue {
	0%, 100% { background-position: 0% 50%; }
	50%      { background-position: 100% 50%; }
}

.asi-topbar a {
	color: var(--wp--preset--color--base) !important;
	text-decoration: none;
}

/* (Removed shimmer sweep — client felt it read as a "flash" rather
   than ambient motion. The marquee + chip pulse already register as
   the alive layer; no need to add a recurring highlight.) */

/* Ticker container — wraps the marquee viewport.
   On desktop, capped to a fixed inline-size so the chips occupy a
   defined "promo zone" rather than stretching the whole bar; the
   actions stay anchored to the trailing edge via space-between.
   On mobile, the actions are hidden so the ticker spans the row. */
.asi-topbar-ticker {
	position: relative;
	flex: 1 1 480px;
	min-inline-size: 0;
	max-inline-size: 480px;
	display: flex;
	align-items: center;
	min-block-size: 1.5rem;
}

/* Viewport — fades the marquee at both edges so chips melt in/out
   rather than hard-cropping against the gradient. The viewport must
   itself be LTR: an inline-flex belt inside an RTL viewport anchors
   to the RIGHT edge, then translateX(-50%) pushes the whole belt
   off-screen for half the cycle (the AR "empty bar" bug). Forcing
   the viewport (and its parent .asi-topbar-ticker) to LTR makes the
   belt anchor to the LEFT edge regardless of page direction. The
   chips themselves restore Arabic reading order via :lang(ar) below. */
.asi-topbar-ticker,
.asi-topbar-ticker__viewport {
	direction: ltr;
}

.asi-topbar-ticker__viewport {
	position: relative;
	inline-size: 100%;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 6%,
		#000 94%,
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 6%,
		#000 94%,
		transparent 100%
	);
}

/* Belt — the moving track. Inline-flex so chips lay out in a row;
   width: max-content so they don't wrap; translateX -50% loops
   exactly because we render the chip list twice (or more). */
.asi-topbar-ticker__belt {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	inline-size: max-content;
	padding-inline: 0.25rem;
	/* The belt must lay out LTR regardless of page direction. In an
	   RTL parent, inline-flex anchors to the viewport's right edge —
	   then translateX(-50%) pushes the whole belt off the left side
	   for half the cycle, producing the AR "ticker disappears" bug.
	   Forcing direction: ltr here anchors the belt to the left edge
	   in both languages so the keyframe behaves identically. Reading
	   direction inside each chip is restored via :lang(ar) below. */
	direction: ltr;
	/* Faster cadence so chips arrive every ~2s instead of every ~7s,
	   eliminating the "lonely chip" feel in the constrained lane. */
	animation: asi-topbar-marquee 36s linear infinite;
	will-change: transform;
	transform: translateZ(0);
}

@keyframes asi-topbar-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* Pause on hover — but only on devices with a real pointer; on
   touch we never want the belt to freeze unexpectedly. */
@media (hover: hover) and (pointer: fine) {
	.asi-topbar-ticker:hover .asi-topbar-ticker__belt {
		animation-play-state: paused;
	}
}

/* Chip — pill-shaped promo unit with icon + text. The chip itself
   sits on a faint glass background so it reads as a "thing" against
   the moving gradient, not as floating words. */
.asi-topbar-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	padding: 0.1875rem 0.625rem 0.1875rem 0.5rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: #fff;
	font-family: var(--asi-font-family);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.005em;
	white-space: nowrap;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
	transition:
		transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
		background-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

[dir="rtl"] .asi-topbar-chip {
	padding-inline: 0.5rem 0.625rem;
}

/* Hover parallax — chip lifts and gains a soft shadow. Only fires
   on hover-capable devices. */
@media (hover: hover) and (pointer: fine) {
	.asi-topbar-ticker:hover .asi-topbar-chip {
		transform: translateY(-1px);
		background: rgba(255, 255, 255, 0.16);
		box-shadow:
			0 4px 12px -4px rgba(0, 0, 0, 0.35),
			0 1px 0 rgba(255, 255, 255, 0.14) inset;
	}
}

/* Icon — accent-green pulse on the leading glyph. The keyframe runs
   forever; offset per-chip via animation-delay below isn't possible
   without :nth-child math, so we let them pulse in unison — looks
   like a heartbeat across the belt. */
.asi-topbar-chip__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1.125rem;
	block-size: 1.125rem;
	color: var(--asi-color-accent-2, #72B94A);
	filter: drop-shadow(0 0 6px rgba(114, 185, 74, 0));
	animation: asi-topbar-icon-pulse 3.6s ease-in-out infinite;
}

.asi-topbar-chip__icon svg {
	inline-size: 100%;
	block-size: 100%;
}

@keyframes asi-topbar-icon-pulse {
	0%, 100% {
		transform: scale(1);
		filter: drop-shadow(0 0 0 rgba(114, 185, 74, 0));
	}
	50% {
		transform: scale(1.15);
		filter: drop-shadow(0 0 8px rgba(114, 185, 74, 0.55));
	}
}

.asi-topbar-chip__text {
	display: inline-block;
}

/* Per-chip Arabic adjustments — the belt is forced LTR for animation
   reasons, so each chip must reverse its internal flex direction so
   the icon sits on the leading (right) edge and Arabic text reads
   naturally on the left of the icon. The text element also gets its
   own direction so the Arabic glyphs themselves shape RTL. */
:lang(ar) .asi-topbar-chip {
	flex-direction: row-reverse;
}

:lang(ar) .asi-topbar-chip__text {
	direction: rtl;
	unicode-bidi: isolate;
	/* Tajawal optical center sits slightly lower than its geometric
	   center; nudge it up 1px so icon + text share an optical
	   baseline. Tajawal also needs a touch more leading. */
	transform: translateY(-1px);
	line-height: 1.4;
}

/* Diamond separator between chips — fades to ghost-white so it
   doesn't compete with the chips themselves. */
.asi-topbar-chip__sep {
	display: inline-flex;
	align-items: center;
	font-size: 0.5rem;
	color: rgba(255, 255, 255, 0.45);
	user-select: none;
	transform: translateY(-1px);
}

/* Initial reveal — when the page loads, the belt slides in from
   the leading edge with a tiny stagger on each chip. JS toggles
   `.is-ready` on the ticker after the first frame so the animation
   plays once and the marquee takes over from there. */
.asi-topbar-ticker:not(.is-ready) .asi-topbar-ticker__belt {
	animation-play-state: paused;
}

.asi-topbar-ticker:not(.is-ready) .asi-topbar-chip {
	opacity: 0;
	transform: translateY(6px);
}

.asi-topbar-ticker.is-ready .asi-topbar-chip {
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Stagger the first ~6 chips so the reveal cascades; later chips
   are already off-screen on the marquee belt, so their entry isn't
   visible anyway. */
.asi-topbar-ticker.is-ready .asi-topbar-chip:nth-child(1)  { transition-delay:  60ms; }
.asi-topbar-ticker.is-ready .asi-topbar-chip:nth-child(3)  { transition-delay: 140ms; }
.asi-topbar-ticker.is-ready .asi-topbar-chip:nth-child(5)  { transition-delay: 220ms; }
.asi-topbar-ticker.is-ready .asi-topbar-chip:nth-child(7)  { transition-delay: 300ms; }
.asi-topbar-ticker.is-ready .asi-topbar-chip:nth-child(9)  { transition-delay: 380ms; }
.asi-topbar-ticker.is-ready .asi-topbar-chip:nth-child(11) { transition-delay: 460ms; }

/* Mobile — same marquee, slightly tighter chip padding so two chips
   fit on a phone-width viewport before they scroll off. */
@media (max-width: 640px) {
	.asi-topbar-chip {
		font-size: 0.75rem;
		padding-block: 0.125rem;
		padding-inline: 0.5rem 0.5625rem;
	}
	[dir="rtl"] .asi-topbar-chip {
		padding-inline: 0.5625rem 0.5rem;
	}
	.asi-topbar-chip__icon {
		inline-size: 1rem;
		block-size: 1rem;
	}
	.asi-topbar-ticker__belt {
		gap: 0.375rem;
		animation-duration: 28s;
	}
}

/* Reduced-motion fallback — kill the marquee, the gradient drift,
   and the icon pulse. Show chips centered, static. Belt scrolls
   horizontally if it overflows (native scrollbar). */
@media (prefers-reduced-motion: reduce) {
	.asi-topbar {
		animation: none;
	}
	.asi-topbar-ticker__viewport {
		overflow-x: auto;
		scrollbar-width: none;
	}
	.asi-topbar-ticker__viewport::-webkit-scrollbar {
		display: none;
	}
	.asi-topbar-ticker__belt {
		animation: none;
		transform: none;
	}
	.asi-topbar-chip__icon {
		animation: none;
	}
	.asi-topbar-ticker:not(.is-ready) .asi-topbar-chip {
		opacity: 1;
		transform: none;
	}
}

/* Top bar actions — lang & currency switchers
   ---------------------------------------------------------------- */
.asi-topbar-actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* Dismiss button — mobile-only; hidden on desktop via the media query below */
.asi-topbar-dismiss {
	display: none;
	align-items: center;
	justify-content: center;
	inline-size: 28px;
	block-size: 28px;
	padding: 0;
	margin: 0;
	background: transparent;
	border: none;
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	opacity: 0.85;
	transition: opacity var(--asi-transition), background-color var(--asi-transition);
	flex-shrink: 0;
}

.asi-topbar-dismiss:hover,
.asi-topbar-dismiss:focus-visible {
	opacity: 1;
	background: rgba(255, 255, 255, 0.15);
	outline: none;
}

.asi-topbar-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: #fff;
	font-family: var(--asi-font-family);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: opacity var(--asi-transition);
	opacity: 0.9;
}

.asi-topbar-btn svg {
	display: block;
	flex-shrink: 0;
	inline-size: 14px;
	block-size: 14px;
}

.asi-topbar-btn:hover {
	opacity: 1;
}

a.asi-topbar-btn {
	color: #fff;
}

.asi-topbar-sep {
	inline-size: 1px;
	block-size: 14px;
	background: rgba(255, 255, 255, 0.35);
}

/* Topbar switcher — country / currency dropdown
   ---------------------------------------------------------------- */
.asi-topbar-switcher {
	position: relative;
	display: inline-flex;
	align-items: center;
}

button.asi-topbar-currency {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	font-family: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
	border-radius: 5px;
	transition: background-color 120ms cubic-bezier(0.22, 1, 0.36, 1),
				opacity 120ms cubic-bezier(0.22, 1, 0.36, 1),
				transform 80ms cubic-bezier(0.22, 1, 0.36, 1);
}

button.asi-topbar-currency:hover,
button.asi-topbar-currency:focus-visible {
	background: rgba(255, 255, 255, 0.18);
	opacity: 1;
	outline: none;
}

button.asi-topbar-currency:active {
	transform: scale(0.96);
}

.asi-topbar-switcher.is-open button.asi-topbar-currency {
	background: rgba(255, 255, 255, 0.2);
	opacity: 1;
}

.asi-topbar-flag {
	display: none;
}

.asi-topbar-currency-code {
	font-weight: 500;
	white-space: nowrap;
}

button.asi-topbar-currency svg {
	opacity: 0.65;
	transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
				opacity 120ms cubic-bezier(0.22, 1, 0.36, 1);
}

button.asi-topbar-currency:hover svg,
button.asi-topbar-currency:focus-visible svg,
.asi-topbar-switcher.is-open button.asi-topbar-currency svg {
	opacity: 1;
}

.asi-topbar-switcher.is-open button.asi-topbar-currency svg {
	transform: rotate(180deg);
}

/* Dropdown panel — slim, elevated, snappy entrance. */
.asi-topbar-switcher__panel {
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: calc(100% + 6px);
	min-inline-size: 240px;
	background: #fff;
	color: var(--asi-color-contrast, #0F172A);
	border-radius: 10px;
	border: 1px solid rgba(15, 23, 42, 0.06);
	box-shadow: 0 12px 32px -10px rgba(15, 23, 42, 0.18),
				0 2px 6px rgba(15, 23, 42, 0.05);
	padding: 4px;
	z-index: 200;
	opacity: 0;
	transform: translateY(-3px) scale(0.985);
	transform-origin: top right;
	transition: opacity 120ms cubic-bezier(0.22, 1, 0.36, 1),
				transform 120ms cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}

.asi-topbar-switcher.is-open .asi-topbar-switcher__panel {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.asi-topbar-switcher__panel[hidden] {
	display: none;
}

[dir="rtl"] .asi-topbar-switcher__panel {
	transform-origin: top left;
}

.asi-topbar-switcher__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Row — tight, balanced, three columns: flag • name • currency • check */
.asi-topbar-switcher__option {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	inline-size: 100%;
	padding: 0.5rem 0.625rem;
	background: transparent;
	border: 0;
	border-radius: 7px;
	font-family: var(--asi-font-family);
	font-size: 0.875rem;
	line-height: 1.25;
	color: var(--asi-color-contrast, #0F172A);
	text-align: start;
	cursor: pointer;
	transition: background-color 140ms cubic-bezier(0.22, 1, 0.36, 1);
}

.asi-topbar-switcher__option:hover {
	background: rgba(1, 85, 183, 0.05);
}

.asi-topbar-switcher__option:focus-visible {
	background: rgba(1, 85, 183, 0.05);
	outline: 2px solid var(--asi-color-accent-1, #0155B7);
	outline-offset: -2px;
}

/* Active = subtle background tint + checkmark. Text color stays
   for contrast/legibility — the check is the primary signal. */
.asi-topbar-switcher__option.is-active {
	background: rgba(1, 85, 183, 0.06);
}

.asi-topbar-switcher__option.is-active .asi-topbar-switcher__name {
	color: var(--asi-color-accent-1, #0155B7);
	font-weight: 600;
}

.asi-topbar-switcher__flag {
	font-size: 1.125rem;
	line-height: 1;
	flex-shrink: 0;
}

.asi-topbar-switcher__name {
	flex: 1;
	font-weight: 500;
	white-space: nowrap;
}

/* Reserved column for the check, so rows don't shift width when
   one becomes active. */
.asi-topbar-switcher__check-slot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 14px;
	block-size: 14px;
	flex-shrink: 0;
}

.asi-topbar-switcher__check {
	color: var(--asi-color-accent-1, #0155B7);
	flex-shrink: 0;
}

.asi-topbar-switcher.is-busy .asi-topbar-switcher__panel {
	opacity: 0.55;
	pointer-events: none;
}

@media (max-width: 600px) {
	.asi-topbar-switcher__panel {
		inset-inline-end: -0.25rem;
		min-inline-size: 220px;
	}
}

@media (prefers-reduced-motion: reduce) {
	button.asi-topbar-currency,
	.asi-topbar-currency svg,
	.asi-topbar-switcher__panel,
	.asi-topbar-switcher__option {
		transition: none;
	}
}

/* Main nav — logo left, nav, actions right */
.asi-header-left {
	flex: 1;
	min-inline-size: 0;
}

.asi-header-logo {
	flex-shrink: 0;
}

.asi-header-logo img {
	max-block-size: 52px;
	inline-size: auto !important;
}

.asi-header-right {
	flex-shrink: 0;
}

/* Header action icons */
.asi-header-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--contrast);
	transition: color var(--asi-transition);
	padding: 0.25rem;
}

.asi-header-icon:hover {
	color: var(--wp--preset--color--accent-1);
}

/* Header icons group */
.asi-header-icons {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* Header separator */
.asi-header-sep {
	inline-size: 1px;
	block-size: 20px;
	background: rgba(15, 23, 42, 0.15);
}

/* Cart icon with badge */
.asi-header-cart {
	position: relative;
}

.asi-cart-badge {
	position: absolute;
	inset-block-start: -6px;
	inset-inline-end: -8px;
	min-inline-size: 18px;
	block-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--warm-orange, #F59E0B);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 600;
	font-family: var(--asi-font-family);
	border-radius: 50%;
	line-height: 1;
	padding: 0 4px;
}

/* Nav links */
.asi-header-sticky .wp-block-navigation a {
	position: relative;
	transition: color var(--asi-transition);
	font-weight: 400;
	font-size: 1rem;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.asi-header-sticky .wp-block-navigation a:hover {
	color: var(--wp--preset--color--accent-1);
}

.asi-header-sticky .wp-block-navigation {
	flex-grow: 0;
	flex-shrink: 0;
}

/* ─── FiboSearch — Shared base (pirx theme) ─── */
/* The pirx style uses: outer sf-wrapp (white bg + padding) → inner input (own border + bg).
   We override colors/fonts but preserve the pirx padding/positioning so the magnifier icon
   stays aligned with the input's left padding (48px). */

.asi-fibosearch-desktop .dgwt-wcas-search-wrapp,
.asi-fibosearch-mobile .dgwt-wcas-search-wrapp {
	min-width: unset !important;
}

/* ─── FiboSearch — Desktop Header ─── */
/* Fluid sizing — fills up to 340px when the row has room, shrinks down to
   240px (still usable) when the nav menu + account chip crowd it. Prevents
   the box from overlapping "Shop by Brands" at mid-desktop widths between
   the mobile breakpoint and full-width desktop. */
.asi-fibosearch-desktop {
	flex: 1 1 240px;
	min-inline-size: 0;
	max-inline-size: 340px;
}

.asi-fibosearch-desktop .dgwt-wcas-search-wrapp {
	inline-size: 100%;
	max-width: none !important;
}

/* Outer wrapper — no visible border, just holds padding for pirx layout */
.asi-fibosearch-desktop .dgwt-wcas-sf-wrapp {
	padding: 0 !important;
	background: transparent !important;
	border-radius: var(--asi-radius-pill, 999px) !important;
}

/* Input — the actual visible search bar */
.asi-fibosearch-desktop .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
	font-family: var(--asi-font-family) !important;
	font-size: 0.8125rem !important;
	font-weight: 300;
	color: var(--wp--preset--color--contrast) !important;
	background-color: var(--wp--preset--color--accent-3, #F8FAFC) !important;
	border: 1px solid rgba(15, 23, 42, 0.12) !important;
	border-radius: var(--asi-radius-pill, 999px) !important;
	padding: 0.5rem 1.25rem 0.5rem 2.75rem !important;
	min-block-size: 40px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

[dir="rtl"] .asi-fibosearch-desktop .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
	padding: 0.5rem 2.75rem 0.5rem 1.25rem !important;
}

.asi-fibosearch-desktop .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input:hover {
	background-color: var(--wp--preset--color--accent-3, #F8FAFC) !important;
	border-color: rgba(15, 23, 42, 0.2) !important;
}

.asi-fibosearch-desktop .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input::placeholder {
	color: var(--wp--preset--color--accent-4, #64748B);
	opacity: 1;
}

/* Focused state */
.asi-fibosearch-desktop.dgwt-wcas-search-focused .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input,
.asi-fibosearch-desktop .dgwt-wcas-search-focused .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
	border-color: var(--wp--preset--color--accent-1, #0155B7) !important;
	box-shadow: 0 0 0 3px rgba(1, 85, 183, 0.1);
	background-color: var(--wp--preset--color--base, #fff) !important;
}

/* Magnifier icon — reposition for smaller input */
.asi-fibosearch-desktop .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
	left: 10px !important;
	top: 50% !important;
	transform: translateY(-50%);
	min-height: 28px !important;
	min-width: 28px !important;
	height: 28px !important;
	width: 28px !important;
}

[dir="rtl"] .asi-fibosearch-desktop .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
	left: auto !important;
	right: 10px !important;
}

.asi-fibosearch-desktop .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit svg {
	width: 16px !important;
	height: 16px !important;
}

.asi-fibosearch-desktop .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit svg path {
	fill: var(--wp--preset--color--accent-4, #64748B) !important;
}

/* When filled — keep magnifier on the left, don't jump */
.asi-fibosearch-desktop.dgwt-wcas-search-filled .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit,
.asi-fibosearch-desktop .dgwt-wcas-search-filled .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
	left: 10px !important;
	right: auto !important;
	transform: translateY(-50%);
	pointer-events: none;
}

[dir="rtl"] .asi-fibosearch-desktop.dgwt-wcas-search-filled .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit,
[dir="rtl"] .asi-fibosearch-desktop .dgwt-wcas-search-filled .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
	left: auto !important;
	right: 10px !important;
}

/* Keep input padding consistent when filled (don't swap for icon jump) */
.asi-fibosearch-desktop .dgwt-wcas-search-filled .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input,
.asi-fibosearch-desktop.dgwt-wcas-search-filled .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
	padding: 0.5rem 3rem 0.5rem 2.75rem !important;
}

[dir="rtl"] .asi-fibosearch-desktop .dgwt-wcas-search-filled .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input,
[dir="rtl"] .asi-fibosearch-desktop.dgwt-wcas-search-filled .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
	padding: 0.5rem 2.75rem 0.5rem 3rem !important;
}

/* Close (X) icon — positioning override.
   FiboSearch's JS sets inline `right: <submit-button-width>px` on this
   element so it sits on top of the default right-aligned submit button.
   We moved the submit (magnifier) to the LEFT of the input, so that
   inline offset lands the X in the middle of the pill. Force it to the
   inline-end edge instead, with consistent inset on both sides. */
.asi-fibosearch-desktop .dgwt-wcas-close {
	opacity: 0.5 !important;
	transition: opacity 0.15s ease;
	right: 14px !important;
	left: auto !important;
	top: 50% !important;
	transform: translateY(-50%);
}

[dir="rtl"] .asi-fibosearch-desktop .dgwt-wcas-close {
	right: auto !important;
	left: 14px !important;
}

.asi-fibosearch-desktop .dgwt-wcas-close:hover {
	opacity: 1 !important;
}

.asi-fibosearch-desktop .dgwt-wcas-close path {
	fill: var(--wp--preset--color--contrast, #0F172A) !important;
}

/* ─── FiboSearch — Mobile Menu ─── */
.asi-fibosearch-mobile .dgwt-wcas-search-wrapp {
	inline-size: 100%;
	max-width: none !important;
}

/* Outer wrapper — transparent, let input be the visual element */
.asi-fibosearch-mobile .dgwt-wcas-sf-wrapp {
	padding: 0 !important;
	background: transparent !important;
	border-radius: 12px !important;
}

/* Input */
.asi-fibosearch-mobile .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
	font-family: var(--asi-font-family) !important;
	font-size: 0.875rem !important;
	font-weight: 400;
	color: var(--wp--preset--color--contrast) !important;
	background-color: var(--wp--preset--color--accent-3, #F8FAFC) !important;
	border: 1.5px solid rgba(15, 23, 42, 0.1) !important;
	border-radius: 12px !important;
	padding: 0.75rem 1.25rem 0.75rem 2.75rem !important;
	min-block-size: 48px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[dir="rtl"] .asi-fibosearch-mobile .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
	padding: 0.75rem 2.75rem 0.75rem 1.25rem !important;
}

.asi-fibosearch-mobile .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input:hover {
	background-color: var(--wp--preset--color--accent-3, #F8FAFC) !important;
}

.asi-fibosearch-mobile .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input::placeholder {
	color: var(--wp--preset--color--accent-4, #64748B);
	opacity: 1;
}

/* Focused state */
.asi-fibosearch-mobile.dgwt-wcas-search-focused .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input,
.asi-fibosearch-mobile .dgwt-wcas-search-focused .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
	border-color: var(--wp--preset--color--accent-1, #0155B7) !important;
	box-shadow: 0 0 0 3px rgba(1, 85, 183, 0.1);
	background-color: var(--wp--preset--color--base, #fff) !important;
}

/* Magnifier icon — reposition */
.asi-fibosearch-mobile .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
	left: 12px !important;
	top: 50% !important;
	transform: translateY(-50%);
	min-height: 28px !important;
	min-width: 28px !important;
	height: 28px !important;
	width: 28px !important;
}

[dir="rtl"] .asi-fibosearch-mobile .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
	left: auto !important;
	right: 12px !important;
}

.asi-fibosearch-mobile .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit svg path {
	fill: var(--wp--preset--color--accent-4, #64748B) !important;
}

/* When filled — keep magnifier on the left */
.asi-fibosearch-mobile.dgwt-wcas-search-filled .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit,
.asi-fibosearch-mobile .dgwt-wcas-search-filled .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
	left: 12px !important;
	right: auto !important;
	transform: translateY(-50%);
	pointer-events: none;
}

[dir="rtl"] .asi-fibosearch-mobile.dgwt-wcas-search-filled .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit,
[dir="rtl"] .asi-fibosearch-mobile .dgwt-wcas-search-filled .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
	left: auto !important;
	right: 12px !important;
}

/* Keep input padding consistent when filled */
.asi-fibosearch-mobile .dgwt-wcas-search-filled .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input,
.asi-fibosearch-mobile.dgwt-wcas-search-filled .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
	padding: 0.75rem 3rem 0.75rem 2.75rem !important;
}

[dir="rtl"] .asi-fibosearch-mobile .dgwt-wcas-search-filled .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input,
[dir="rtl"] .asi-fibosearch-mobile.dgwt-wcas-search-filled .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
	padding: 0.75rem 2.75rem 0.75rem 3rem !important;
}

/* Close (X) icon */
.asi-fibosearch-mobile .dgwt-wcas-close {
	opacity: 0.5 !important;
	transition: opacity 0.15s ease;
}

.asi-fibosearch-mobile .dgwt-wcas-close:hover {
	opacity: 1 !important;
}

.asi-fibosearch-mobile .dgwt-wcas-close path {
	fill: var(--wp--preset--color--contrast, #0F172A) !important;
}

/* ─── FiboSearch — Results Dropdown ─── */
.dgwt-wcas-suggestions-wrapp {
	border: none !important;
	border-radius: 16px !important;
	box-shadow: 0 8px 30px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06) !important;
	overflow: hidden;
	background: var(--wp--preset--color--base, #fff) !important;
	margin-block-start: 0.5rem;
	animation: asiFiboDropIn 200ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
	min-width: 320px;
}

.dgwt-wcas-suggestion {
	padding: 0.625rem 1rem !important;
	border-block-end: 1px solid rgba(15, 23, 42, 0.05);
	transition: background 0.15s ease;
	font-family: var(--asi-font-family);
}

.dgwt-wcas-suggestion:last-child {
	border-block-end: none;
}

.dgwt-wcas-suggestion.dgwt-wcas-suggestion-selected,
.dgwt-wcas-suggestion:hover {
	background: var(--wp--preset--color--accent-3, #F8FAFC) !important;
}

/* Product row */
.dgwt-wcas-suggestion.dgwt-wcas-suggestion-product {
	padding: 0.5rem 1.25rem !important;
}

/* Product thumbnail */
.dgwt-wcas-si {
	inline-size: 44px !important;
	block-size: 44px !important;
	min-width: 44px !important;
	border-radius: 8px;
	overflow: hidden;
	flex-shrink: 0;
	margin-inline-end: 0.75rem;
	background: var(--wp--preset--color--accent-3, #F8FAFC);
	border: 1px solid rgba(15, 23, 42, 0.06);
}

.dgwt-wcas-si img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	padding: 2px;
}

/* Product title */
.dgwt-wcas-st {
	font-family: var(--asi-font-family);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--preset--color--contrast, #0F172A);
	line-height: 1.4;
}

/* Product price */
.dgwt-wcas-sp {
	font-family: var(--asi-font-family);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent-1, #0155B7);
	margin-block-start: 0.125rem;
}

.dgwt-wcas-sp del {
	color: var(--wp--preset--color--accent-4, #64748B);
	font-weight: 400;
}

/* Section headings (CATEGORIES, PRODUCTS) */
.dgwt-wcas-suggestion.dgwt-wcas-suggestion-headline {
	font-family: var(--asi-font-family);
	font-size: 0.625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--accent-4, #64748B);
	padding: 0.75rem 1.25rem 0.375rem !important;
	background: transparent !important;
	text-decoration: none !important;
	border-block-end: none !important;
	cursor: default;
}

/* Remove underline from headline inner elements */
.dgwt-wcas-suggestion.dgwt-wcas-suggestion-headline .dgwt-wcas-st,
.dgwt-wcas-suggestion.dgwt-wcas-suggestion-headline span {
	text-decoration: none !important;
	color: var(--wp--preset--color--accent-4, #64748B);
}

/* Category/taxonomy results — background highlight, no underline */
.dgwt-wcas-has-headings .dgwt-wcas-suggestion.dgwt-wcas-suggestion-tax {
	padding: 0.625rem 1.25rem !important;
	border-radius: 8px;
	margin-inline: 0.5rem;
	transition: background 0.15s ease;
}

.dgwt-wcas-has-headings .dgwt-wcas-suggestion.dgwt-wcas-suggestion-tax.dgwt-wcas-suggestion-selected,
.dgwt-wcas-has-headings .dgwt-wcas-suggestion.dgwt-wcas-suggestion-tax:hover {
	background: var(--wp--preset--color--accent-3, #F8FAFC) !important;
	text-decoration: none !important;
}

/* Category title — clean, no underline (override pirx default) */
.dgwt-wcas-suggestion-tax .dgwt-wcas-st,
.dgwt-wcas-suggestion-tax .dgwt-wcas-st span,
.dgwt-wcas-has-headings .dgwt-wcas-suggestion.dgwt-wcas-suggestion-tax .dgwt-wcas-st,
.dgwt-wcas-has-headings .dgwt-wcas-suggestion.dgwt-wcas-suggestion-tax:hover .dgwt-wcas-st,
.dgwt-wcas-has-headings .dgwt-wcas-suggestion.dgwt-wcas-suggestion-tax.dgwt-wcas-suggestion-selected .dgwt-wcas-st {
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none !important;
	color: var(--wp--preset--color--contrast, #0F172A);
}

/* Kill underline on tax suggestion itself (all states) */
.dgwt-wcas-suggestion.dgwt-wcas-suggestion-tax,
.dgwt-wcas-suggestion.dgwt-wcas-suggestion-tax:hover,
.dgwt-wcas-suggestion.dgwt-wcas-suggestion-tax.dgwt-wcas-suggestion-selected,
.dgwt-wcas-has-headings .dgwt-wcas-suggestion.dgwt-wcas-suggestion-tax,
.dgwt-wcas-has-headings .dgwt-wcas-suggestion.dgwt-wcas-suggestion-tax:hover,
.dgwt-wcas-has-headings .dgwt-wcas-suggestion.dgwt-wcas-suggestion-tax.dgwt-wcas-suggestion-selected {
	text-decoration: none !important;
}

/* "See all results" — no underline */
.dgwt-wcas-suggestion.dgwt-wcas-suggestion-more .dgwt-wcas-st,
.dgwt-wcas-suggestion.dgwt-wcas-suggestion-more .dgwt-wcas-st-more {
	text-decoration: none !important;
}

/* Breadcrumb / parent ("in Home Care") */
.dgwt-wcas-st-breadcrumbs {
	font-family: var(--asi-font-family);
	font-size: 0.75rem !important;
	color: var(--wp--preset--color--accent-4, #64748B) !important;
	opacity: 1 !important;
	margin-block-start: 0.125rem;
}

/* "See all results" link */
.dgwt-wcas-suggestion.dgwt-wcas-suggestion-more {
	font-family: var(--asi-font-family);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--preset--color--accent-1, #0155B7) !important;
	text-align: center;
	padding: 0.75rem 1rem !important;
	border-block-start: 1px solid rgba(15, 23, 42, 0.08);
}

.dgwt-wcas-suggestion.dgwt-wcas-suggestion-more:hover {
	background: rgba(1, 85, 183, 0.04) !important;
}

/* No results */
.dgwt-wcas-suggestion.dgwt-wcas-suggestion-nores {
	font-family: var(--asi-font-family);
	font-size: 0.875rem;
	color: var(--wp--preset--color--accent-4);
	text-align: center;
	padding: 1.5rem 1rem !important;
}

/* ─── FiboSearch — Overlay ─── */
.dgwt-wcas-overlay-mobile,
.dgwt-wcas-open .dgwt-wcas-overlay {
	background: rgba(15, 23, 42, 0.3) !important;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

/* ─── FiboSearch — RTL ─── */
[dir="rtl"] .dgwt-wcas-sf-wrapp {
	direction: rtl;
}

[dir="rtl"] .dgwt-wcas-suggestions-wrapp {
	direction: rtl;
	text-align: start;
}

/* ─── FiboSearch — Header icon alignment ─── */
.asi-header-search {
	display: flex;
	align-items: center;
}

/* ─── FiboSearch — Animations ─── */
@keyframes asiFiboDropIn {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dgwt-wcas-suggestions-wrapp {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* ─── FiboSearch — Z-index (mobile menu) ─── */
.asi-fibosearch-mobile .dgwt-wcas-suggestions-wrapp,
.asi-mega-mobile .dgwt-wcas-suggestions-wrapp {
	z-index: 1001 !important;
}

/* WooCommerce mini cart */
.wc-block-mini-cart__badge {
	background-color: var(--wp--preset--color--warm-orange, #F59E0B) !important;
	color: var(--wp--preset--color--base) !important;
}

/* ─── Mega Menu ─── */

/* Navigation — inline within header flex row */
.asi-mega-nav {
	position: static;
	flex-grow: 0;
	flex-shrink: 0;
}

.asi-mega-nav__list {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.asi-mega-nav__item {
	position: static;
}

.asi-mega-nav__link {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 0.875rem;
	color: var(--wp--preset--color--contrast);
	font-family: var(--asi-font-family);
	font-size: 0.9375rem;
	font-weight: 400;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--asi-transition), background-color var(--asi-transition);
	cursor: pointer;
}

.asi-mega-nav__link:hover,
.asi-mega-nav__item.is-open .asi-mega-nav__link {
	color: var(--wp--preset--color--accent-1);
	background: rgba(34, 96, 174, 0.04);
}

.asi-mega-nav__chevron {
	inline-size: 12px;
	block-size: 12px;
	flex-shrink: 0;
	opacity: 0.5;
	transition: transform var(--asi-transition);
}

.asi-mega-nav__item.is-open .asi-mega-nav__chevron {
	transform: rotate(180deg);
}

/* "Offers" highlight */
.asi-mega-nav__link--highlight {
	color: var(--wp--preset--color--warm-orange, #F59E0B);
	font-weight: 500;
}

.asi-mega-nav__link--highlight:hover {
	color: var(--wp--preset--color--accent-2);
	opacity: 0.8;
}

/* ─── Mega Dropdown Panel ─── */
.asi-mega-panel {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 100%;
	background: var(--wp--preset--color--base);
	box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
	border-block-start: 1px solid rgba(15, 23, 42, 0.06);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity var(--asi-transition), transform var(--asi-transition), visibility var(--asi-transition);
	pointer-events: none;
	z-index: 99;
}

.asi-mega-panel[aria-hidden="false"],
.asi-mega-nav__item.is-open .asi-mega-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

/* CSS-only hover fallback */
@media (hover: hover) {
	.asi-mega-nav__item:hover > .asi-mega-panel,
	.asi-mega-nav__item:focus-within > .asi-mega-panel {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		pointer-events: auto;
	}
}

.asi-mega-panel__inner {
	max-inline-size: 1280px;
	margin-inline: auto;
	padding: 2rem var(--wp--preset--spacing--50, 1.5rem);
}

.asi-mega-panel__body {
	display: flex;
	gap: 2rem;
	align-items: start;
}

/* Main content column (links + view-all) */
.asi-mega-panel__main {
	flex: 1;
	min-inline-size: 0;
}

/* 2-level flat link grid */
.asi-mega-panel__links {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.25rem 2rem;
	align-content: start;
}

.asi-mega-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.625rem 0.875rem;
	border-radius: 10px;
	color: var(--wp--preset--color--contrast);
	font-family: var(--asi-font-family);
	font-size: 0.9rem;
	font-weight: 500;
	text-decoration: none;
	transition: background var(--asi-transition), color var(--asi-transition);
}

.asi-mega-link:hover {
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--accent-1);
}

.asi-mega-link__icon {
	inline-size: 32px;
	block-size: 32px;
	border-radius: 8px;
	object-fit: cover;
	flex-shrink: 0;
}

.asi-mega-link__dot {
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-1);
	flex-shrink: 0;
	opacity: 0.5;
	transition: opacity var(--asi-transition);
}

.asi-mega-link:hover .asi-mega-link__dot {
	opacity: 1;
}

.asi-mega-link__name {
	line-height: 1.3;
}

/* "View All" link below the grid */
.asi-mega-panel__view-all {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-block-start: 0.75rem;
	padding: 0.5rem 0.875rem;
	font-family: var(--asi-font-family);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent-1);
	text-decoration: none;
	transition: opacity var(--asi-transition);
}

.asi-mega-panel__view-all:hover {
	opacity: 0.7;
}

/* Promo card */
.asi-mega-panel__promo {
	inline-size: 240px;
	flex-shrink: 0;
	border-radius: var(--asi-radius);
	background: linear-gradient(160deg, var(--wp--preset--color--accent-1), #1a4a8a);
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: #fff;
}

.asi-mega-panel__promo-badge {
	font-family: var(--asi-font-family);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.8;
	margin-block-end: 0.75rem;
}

.asi-mega-panel__promo-title {
	font-family: var(--asi-font-family);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 1rem;
}

.asi-mega-panel__promo-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: #fff;
	font-family: var(--asi-font-family);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	border-block-end: 1px solid rgba(255, 255, 255, 0.4);
	padding-block-end: 0.25rem;
	transition: border-color var(--asi-transition);
	align-self: flex-start;
}

.asi-mega-panel__promo-cta:hover {
	border-color: #fff;
	color: #fff;
}

/* Brands bar at bottom */
.asi-mega-panel__brands {
	max-inline-size: 1280px;
	margin-inline: auto;
	padding: 1.25rem var(--wp--preset--spacing--50, 1.5rem) 1.5rem;
	border-block-start: 1px solid rgba(15, 23, 42, 0.08);
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.asi-mega-panel__brands-title {
	font-family: var(--asi-font-family);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--contrast);
	white-space: nowrap;
}

.asi-mega-panel__brands-row {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.asi-mega-panel__brands-row a {
	display: block;
	transition: opacity var(--asi-transition), transform var(--asi-transition);
	opacity: 0.5;
}

.asi-mega-panel__brands-row a:hover {
	opacity: 1;
	transform: scale(1.08);
}

.asi-mega-panel__brands-row img {
	block-size: 28px;
	inline-size: auto;
	object-fit: contain;
}

/* Brands panel — full grid layout */
.asi-mega-panel--brands .asi-mega-panel__body {
	flex-direction: column;
}

/*
 * Brand grid — count-aware responsive layout.
 *
 * The server picks an ideal column count (3–5) based on how many brands
 * are visible, exposed as `--asi-brands-cols`. We use flex-wrap with
 * `justify-content: center` so the last row auto-centers when it isn't
 * full (e.g. 7 brands → 4 on top, 3 centered below), rather than
 * leaving an awkward empty slot the way a fixed grid would.
 */
.asi-mega-brand-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	inline-size: 100%;
	--asi-brands-cols: 5;
	--asi-brands-gap: 1rem;
}

.asi-mega-brand-card {
	/* Each card claims exactly (100% − total gaps) ÷ cols, matching a
	   grid with that many columns, but participating in flex wrapping
	   so an incomplete row centers gracefully. */
	flex: 0 1 calc((100% - (var(--asi-brands-cols) - 1) * var(--asi-brands-gap)) / var(--asi-brands-cols));
	min-inline-size: 150px;
	max-inline-size: 240px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	padding: 1.25rem 1rem;
	border-radius: 12px;
	border: 1px solid rgba(15, 23, 42, 0.08);
	background: var(--wp--preset--color--accent-3);
	text-decoration: none;
	position: relative;
	isolation: isolate;
	transition: border-color var(--asi-transition), box-shadow var(--asi-transition), background var(--asi-transition), transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.asi-mega-brand-card::after {
	/* Subtle brand-accent underline that slides in on hover — an intentional
	   touch of ASI blue without loading a whole border state. */
	content: "";
	position: absolute;
	inset-inline: 20%;
	inset-block-end: 0;
	block-size: 2px;
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--accent-1), transparent);
	opacity: 0;
	transform: scaleX(0.4);
	transform-origin: center;
	transition: opacity 240ms ease-out, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
	pointer-events: none;
}

.asi-mega-brand-card:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 35%, transparent);
	box-shadow: var(--asi-shadow-sm);
	background: var(--wp--preset--color--base);
	transform: translateY(-2px);
}

.asi-mega-brand-card:hover::after {
	opacity: 1;
	transform: scaleX(1);
}

.asi-mega-brand-card img {
	block-size: 48px;
	inline-size: auto;
	max-inline-size: 100%;
	object-fit: contain;
}

.asi-mega-brand-card span {
	font-family: var(--asi-font-family);
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
	text-align: center;
}

/* When there's only 1–2 brands the cards shouldn't span the full panel;
   the max-inline-size already caps them, and center alignment keeps the
   composition balanced instead of stranding them on the left. */
.asi-mega-brand-grid[data-count="1"],
.asi-mega-brand-grid[data-count="2"] {
	justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
	.asi-mega-brand-card,
	.asi-mega-brand-card::after {
		transition: none;
	}
	.asi-mega-brand-card:hover {
		transform: none;
	}
}

/*
 * CTA tile inside the brand grid.
 *
 * Rendered as the grid's final item so it shares the card shape and rhythm
 * of the brand tiles. The treatment is a quiet accent-tinted surface rather
 * than a saturated gradient — just enough blue in the background + icon chip
 * + label to read as the "action" end of the sequence, without shouting over
 * the neutral brand logos sitting beside it.
 */
.asi-mega-brand-card--cta {
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 7%, var(--wp--preset--color--base));
	border-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 18%, transparent);
	color: var(--wp--preset--color--accent-1);
	overflow: hidden;
}

/* Kill the brand-card underline accent — the arrow slide is the CTA's affordance. */
.asi-mega-brand-card--cta::after {
	content: none;
}

.asi-mega-brand-card--cta:hover {
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 12%, var(--wp--preset--color--base));
	border-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 32%, transparent);
	box-shadow: var(--asi-shadow-sm);
	transform: translateY(-2px);
}

/* Icon chip — soft accent-tinted disc behind the arrow, sized to match the 48px
   brand logo slot so vertical rhythm is preserved across the whole grid. */
.asi-mega-brand-card__cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 48px;
	block-size: 48px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 14%, transparent);
	color: var(--wp--preset--color--accent-1);
}

.asi-mega-brand-card__cta-icon svg {
	transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.asi-mega-brand-card--cta:hover .asi-mega-brand-card__cta-icon {
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 22%, transparent);
}

.asi-mega-brand-card--cta:hover .asi-mega-brand-card__cta-icon svg {
	transform: translateX(3px);
}

[dir="rtl"] .asi-mega-brand-card--cta .asi-mega-brand-card__cta-icon svg {
	transform: scaleX(-1);
}

[dir="rtl"] .asi-mega-brand-card--cta:hover .asi-mega-brand-card__cta-icon svg {
	transform: scaleX(-1) translateX(3px);
}

/* Label override — accent-1 (brand blue) to match the softened tint so it
   still reads as the action terminus without the full-bleed gradient. */
.asi-mega-brand-card--cta > span:last-child {
	color: var(--wp--preset--color--accent-1) !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em;
}

/* ─── Hamburger Button ─── */
.asi-mega-hamburger {
	display: none;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 0.5rem;
	cursor: pointer;
	color: var(--wp--preset--color--contrast);
}

.asi-mega-hamburger svg {
	inline-size: 24px;
	block-size: 24px;
}

.asi-mega-hamburger:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
}

/* ─── Mobile Menu ─── */
.asi-mega-mobile {
	position: fixed;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: min(320px, 85vw);
	background: var(--wp--preset--color--base);
	z-index: 1000;
	transform: translateX(-100%);
	transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
	overflow-y: auto;
	overscroll-behavior: contain;
	will-change: transform;
}

[dir="rtl"] .asi-mega-mobile {
	transform: translateX(100%);
}

.asi-mega-mobile.is-open {
	transform: translateX(0);
}

.asi-mega-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	transition: opacity 300ms;
}

.asi-mega-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.asi-mega-mobile__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	border-block-end: 1px solid rgba(15, 23, 42, 0.08);
}

.asi-mega-mobile__header span {
	font-family: var(--asi-font-family);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.asi-mega-mobile__close {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 0.5rem;
	cursor: pointer;
	color: var(--wp--preset--color--contrast);
}

.asi-mega-mobile__close svg {
	inline-size: 20px;
	block-size: 20px;
}

.asi-mega-mobile__close:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
}

.asi-mega-mobile__body {
	padding: 0.5rem 0;
}

/* Mobile search inside slide-in menu */
.asi-mega-mobile__search {
	padding: 0.75rem 1.25rem 1rem;
	border-block-end: 1px solid rgba(15, 23, 42, 0.08);
}


.asi-mega-mobile__group {
	border-block-end: 1px solid rgba(15, 23, 42, 0.05);
}

.asi-mega-mobile__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	inline-size: 100%;
	padding: 0.875rem 1.25rem;
	background: none;
	border: none;
	font-family: var(--asi-font-family);
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	text-align: start;
	transition: background-color var(--asi-transition);
}

.asi-mega-mobile__trigger:hover {
	background: rgba(15, 23, 42, 0.02);
}

.asi-mega-mobile__trigger:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: -2px;
}

.asi-mega-mobile__trigger svg {
	inline-size: 16px;
	block-size: 16px;
	flex-shrink: 0;
	opacity: 0.5;
	transition: transform var(--asi-transition);
}

.asi-mega-mobile__trigger[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.asi-mega-mobile__content {
	max-block-size: 0;
	overflow: hidden;
	transition: max-block-size 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.asi-mega-mobile__content[aria-hidden="false"] {
	max-block-size: 500px;
}

.asi-mega-mobile__content a {
	display: block;
	padding: 0.5rem 1.25rem 0.5rem 2rem;
	color: var(--wp--preset--color--accent-4);
	font-family: var(--asi-font-family);
	font-size: 0.875rem;
	font-weight: 400;
	text-decoration: none;
	transition: color var(--asi-transition), background-color var(--asi-transition);
}

.asi-mega-mobile__content a:hover {
	color: var(--wp--preset--color--accent-1);
	background: rgba(34, 96, 174, 0.04);
}

/* "View All" link — first in each group */
.asi-mega-mobile__content a:first-child {
	color: var(--wp--preset--color--accent-1);
	font-weight: 500;
}

/* Direct links (Brands, Offers) */
.asi-mega-mobile__link {
	display: block;
	padding: 0.875rem 1.25rem;
	color: var(--wp--preset--color--contrast);
	font-family: var(--asi-font-family);
	font-size: 0.9375rem;
	font-weight: 400;
	text-decoration: none;
	transition: background-color var(--asi-transition);
	border-block-end: 1px solid rgba(15, 23, 42, 0.05);
}

.asi-mega-mobile__link:hover {
	background: rgba(15, 23, 42, 0.02);
}

.asi-mega-mobile__link--highlight {
	color: var(--wp--preset--color--accent-2);
	font-weight: 500;
}

/* Locale block — language + currency switchers at the bottom of the mobile menu */
.asi-mega-mobile__locale {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	margin-block-start: 0.5rem;
	border-block-start: 1px solid rgba(15, 23, 42, 0.08);
}

.asi-mega-mobile__locale-item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--wp--preset--color--contrast);
	font-family: var(--asi-font-family);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	transition: color var(--asi-transition);
}

a.asi-mega-mobile__locale-item:hover {
	color: var(--wp--preset--color--accent-1);
}

.asi-mega-mobile__locale-item svg {
	flex-shrink: 0;
	opacity: 0.7;
}

.asi-mega-mobile__locale-item--currency {
	color: var(--wp--preset--color--accent-4);
	font-weight: 500;
	letter-spacing: 0.02em;
}

.asi-mega-mobile__currency {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	min-inline-size: 0;
}

.asi-mega-mobile__currency .asi-topbar-switcher {
	color: var(--wp--preset--color--accent-4);
}

.asi-mega-mobile__currency button.asi-topbar-currency {
	min-block-size: 34px;
	padding: 0.35rem 0;
	color: var(--wp--preset--color--accent-4);
	font-size: 0.9375rem;
	font-weight: 600;
}

.asi-mega-mobile__currency button.asi-topbar-currency:hover,
.asi-mega-mobile__currency button.asi-topbar-currency:focus-visible,
.asi-mega-mobile__currency .asi-topbar-switcher.is-open button.asi-topbar-currency {
	background: transparent;
	color: var(--wp--preset--color--accent-1);
}

.asi-mega-mobile__currency .asi-topbar-switcher__panel {
	inset-inline-start: auto;
	inset-inline-end: 0;
	inset-block-start: auto;
	inset-block-end: calc(100% + 8px);
	min-inline-size: min(280px, calc(100vw - 2.5rem));
	transform-origin: bottom right;
	z-index: 10020;
}

[dir="rtl"] .asi-mega-mobile__currency .asi-topbar-switcher__panel {
	transform-origin: bottom left;
}

.asi-mega-mobile__locale-sep {
	inline-size: 1px;
	block-size: 18px;
	background: rgba(15, 23, 42, 0.15);
}

/* ─── Mega menu responsive ─── */
@media (max-width: 1080px) {
	.asi-mega-nav {
		display: none;
	}

	.asi-mega-hamburger {
		display: flex;
	}
}

/* ─── Homepage Hero Slider ─── */
.asi-homepage-hero {
	position: relative;
	overflow: hidden;
	block-size: calc(100vh - 120px);
	/* Use svh (small viewport height) — NOT dvh.
	   dvh changes as the iOS URL bar collapses on scroll, which resizes the
	   hero mid-scroll and causes a visible jump of content below it. */
	block-size: calc(100svh - 120px);
}

/* Subtle dot pattern for texture */
.asi-homepage-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 3;
	background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2' cy='2' r='0.8' fill='white' fill-opacity='0.04'/%3E%3C/svg%3E");
	pointer-events: none;
}

/* Individual slide — stacked, crossfade */
.asi-hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.6s;
	z-index: 1;
}

.asi-hero-slide.is-active {
	position: relative;
	opacity: 1;
	visibility: visible;
	z-index: 2;
}

/* Background image */
.asi-hero-slide__bg {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	z-index: 0;
	will-change: transform;
}

/* Hero backgrounds are static — no Ken Burns. Banners are framed with
   intent (product lineups at the edges), and any zoom risked cropping
   the parts that matter. The crossfade between slides carries enough
   motion on its own. */

/* Gradient overlay — vertical: dark top (text zone), light middle (products breathe), dark bottom (tab bar) */
.asi-hero-slide__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		180deg,
		rgba(15, 23, 42, 0.78) 0%,
		rgba(15, 23, 42, 0.6) 35%,
		rgba(34, 96, 174, 0.32) 55%,
		rgba(15, 23, 42, 0.18) 72%,
		rgba(15, 23, 42, 0.35) 88%,
		rgba(15, 23, 42, 0.62) 100%
	);
}

/* Content layer */
.asi-hero-slide__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	block-size: calc(100vh - 120px);
	block-size: calc(100svh - 120px);
	padding: 0 var(--wp--preset--spacing--50, 1.5rem);
	/* 40% above / 60% below: top padding = 40% of usable space (hero minus trust+tabs ~7rem) */
	padding-block-start: calc((100svh - 120px - 7rem) * 0.25);
	padding-block-end: 7rem; /* clear trust bar (~52px) + tab bar (~51px) */
}

.asi-hero-content {
	max-inline-size: 800px;
	text-align: center;
}

/* Badge */
.asi-hero-badge {
	margin-block-end: 1.25rem;
}

.asi-badge-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--asi-radius-pill);
	padding: 0.5rem 1.25rem;
	color: #fff;
	font-family: var(--asi-font-family);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.01em;
}

.asi-badge-pill svg {
	flex-shrink: 0;
	opacity: 0.8;
}

/* Heading */
.asi-hero-slide__heading {
	color: var(--wp--preset--color--base, #fff);
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 700;
	letter-spacing: -0.84px;
	line-height: 1;
	text-transform: none;
	margin-block-end: 1rem;
	text-shadow:
		0 2px 8px rgba(0, 0, 0, 0.55),
		0 4px 32px rgba(0, 0, 0, 0.35);
}

/* Subheadline */
.asi-hero-slide__text {
	color: var(--wp--preset--color--base, #fff);
	font-size: clamp(1rem, 1.5vw, 1.25rem);
	font-weight: 500;
	line-height: 1.6;
	margin-block-end: 1.5rem;
	text-shadow:
		0 1px 4px rgba(0, 0, 0, 0.65),
		0 2px 12px rgba(0, 0, 0, 0.4);
}

/* CTAs */
.asi-hero-slide__ctas {
	display: flex;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.asi-hero-cta {
	display: inline-block;
	border-radius: var(--asi-radius-pill);
	padding: 0.875rem 2rem;
	font-size: 1.125rem;
	font-weight: 500;
	font-family: var(--asi-font-family);
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--asi-transition), box-shadow var(--asi-transition), background-color var(--asi-transition);
}

.asi-hero-cta:hover {
	transform: translateY(-1px);
}

.asi-hero-cta--primary {
	background-color: var(--wp--preset--color--accent-1, #0155B7);
	color: #fff;
	box-shadow: var(--asi-shadow-sm), inset 0 32px 24px rgba(255, 255, 255, 0.05), inset 0 2px 1px rgba(255, 255, 255, 0.25), inset 0 -2px 1px rgba(0, 0, 0, 0.2);
}

.asi-hero-cta--primary:hover {
	box-shadow: var(--asi-shadow-md);
	color: #fff;
}

.asi-hero-cta--ghost {
	background-color: rgba(255, 255, 255, 0.08);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.asi-hero-cta--ghost:hover {
	background-color: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
}

/* Single CTA state — when the secondary button is empty, the primary
   button is the sole action. Give it a touch more width and a subtle
   arrow so it feels like a confident standalone CTA, not a button
   that lost its partner. */
.asi-hero-slide__ctas--single .asi-hero-cta--primary {
	padding-inline: 2.75rem;
	font-size: 1.1875rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	box-shadow:
		0 8px 24px rgba(1, 85, 183, 0.35),
		inset 0 32px 24px rgba(255, 255, 255, 0.05),
		inset 0 2px 1px rgba(255, 255, 255, 0.25),
		inset 0 -2px 1px rgba(0, 0, 0, 0.2);
}

.asi-hero-slide__ctas--single .asi-hero-cta--primary:hover {
	box-shadow: 0 12px 32px rgba(1, 85, 183, 0.45);
	transform: translateY(-2px);
}

/* Trust bar — shared across slides, positioned above tabs */
.asi-hero-trust-bar {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 56px; /* above tab bar */
	z-index: 4;
	display: flex;
	justify-content: center;
	gap: 2.5rem;
	padding: 1rem 1.5rem;
	border-block-start: 1px solid rgba(255, 255, 255, 0.15);
}

.asi-trust-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--asi-font-family);
	font-size: 0.875rem;
	font-weight: 400;
}

.asi-trust-item svg {
	flex-shrink: 0;
	opacity: 0.7;
}

/* Tab navigation — bottom of hero */
.asi-hero-tabs {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	z-index: 5;
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	display: flex;
	justify-content: center;
}

.asi-hero-tabs-inner {
	display: flex;
	max-inline-size: 1024px;
	inline-size: 100%;
}

.asi-hero-tab {
	flex: 1;
	text-align: center;
	padding: 1rem 2rem;
	border: none;
	border-block-end: 3px solid transparent;
	cursor: pointer;
	transition: border-color var(--asi-transition), background-color var(--asi-transition);
	color: #fff;
	background: transparent;
	font-family: var(--asi-font-family);
	font-size: 1rem;
	font-weight: 500;
}

.asi-hero-tab.is-active {
	border-block-end-color: #fff;
	background: rgba(255, 255, 255, 0.05);
}

.asi-hero-tab:hover {
	border-block-end-color: rgba(255, 255, 255, 0.5);
	background: rgba(255, 255, 255, 0.08);
}

.asi-hero-tab:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: -2px;
}

/* ─── Mobile dot indicators ─── */
.asi-hero-dots {
	display: none; /* shown via media query on mobile */
	position: absolute;
	inset-block-end: 1rem;
	inset-inline: 0;
	z-index: 6;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.5rem;
}

.asi-hero-dot {
	inline-size: 8px;
	block-size: 8px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.4);
	cursor: pointer;
	padding: 0;
	transition: background var(--asi-transition), inline-size var(--asi-transition);
}

.asi-hero-dot.is-active {
	background: #fff;
	inline-size: 24px;
	border-radius: 4px;
}

.asi-hero-dot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ─── Top Picks slide variant ─── */
.asi-hero-slide--top-picks .asi-hero-slide__overlay {
	background: linear-gradient(
		180deg,
		rgba(15, 23, 42, 0.82) 0%,
		rgba(15, 23, 42, 0.62) 35%,
		rgba(1, 85, 183, 0.36) 55%,
		rgba(15, 23, 42, 0.2) 72%,
		rgba(15, 23, 42, 0.38) 88%,
		rgba(15, 23, 42, 0.68) 100%
	);
}

.asi-hero-slide--top-picks .asi-badge-pill {
	background: rgba(1, 85, 183, 0.3);
	border-color: rgba(1, 85, 183, 0.45);
}

.asi-hero-slide--top-picks .asi-hero-cta--primary {
	background-color: var(--wp--preset--color--accent-1, #0155B7);
}

/* ─── Just Launched slide variant ─── */
.asi-hero-slide--launched .asi-hero-slide__overlay {
	background: linear-gradient(
		180deg,
		rgba(15, 23, 42, 0.82) 0%,
		rgba(15, 23, 42, 0.62) 35%,
		rgba(245, 158, 11, 0.32) 55%,
		rgba(15, 23, 42, 0.2) 72%,
		rgba(15, 23, 42, 0.38) 88%,
		rgba(15, 23, 42, 0.68) 100%
	);
}

.asi-hero-slide--launched .asi-badge-pill {
	background: rgba(245, 158, 11, 0.3);
	border-color: rgba(245, 158, 11, 0.45);
}

.asi-hero-slide--launched .asi-hero-cta--primary {
	background-color: var(--wp--preset--color--warm-orange, #F59E0B);
}


/* ─── Special Offers slide variant ─── */
.asi-hero-slide--offers .asi-hero-slide__overlay {
	background: linear-gradient(
		180deg,
		rgba(15, 23, 42, 0.82) 0%,
		rgba(15, 23, 42, 0.62) 35%,
		rgba(114, 185, 74, 0.3) 55%,
		rgba(15, 23, 42, 0.2) 72%,
		rgba(15, 23, 42, 0.38) 88%,
		rgba(15, 23, 42, 0.68) 100%
	);
}

.asi-hero-slide--offers .asi-badge-pill {
	background: rgba(114, 185, 74, 0.25);
	border-color: rgba(114, 185, 74, 0.4);
}

.asi-hero-slide--offers .asi-hero-cta--primary {
	background-color: var(--wp--preset--color--accent-2, #72B94A);
}

/* ─── Our Heritage slide variant ─── */
.asi-hero-slide--heritage .asi-hero-slide__overlay {
	background: linear-gradient(
		180deg,
		rgba(15, 23, 42, 0.86) 0%,
		rgba(15, 23, 42, 0.7) 35%,
		rgba(1, 58, 122, 0.42) 55%,
		rgba(15, 23, 42, 0.28) 72%,
		rgba(15, 23, 42, 0.45) 88%,
		rgba(15, 23, 42, 0.74) 100%
	);
}

.asi-hero-slide--heritage .asi-badge-pill {
	background: rgba(1, 58, 122, 0.35);
	border-color: rgba(1, 58, 122, 0.5);
}

.asi-hero-slide--heritage .asi-hero-cta--primary {
	background-color: var(--wp--preset--color--contrast, #0F172A);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.asi-hero-slide {
		transition: none;
	}
}

/* ─── Brand Logos Bar ─── */
.asi-homepage-brands {
	border-block-end: 1px solid rgba(15, 23, 42, 0.08);
}

.asi-brands-row {
	display: flex;
	align-items: center;
	gap: 2.5rem;
}

.asi-brands-heading {
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.3px;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
	margin: 0;
	white-space: nowrap;
	flex-shrink: 0;
}

.asi-brands-marquee {
	flex: 1;
	overflow: hidden;
	mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
	-webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.asi-brands-track {
	display: flex;
	align-items: center;
	gap: 2.5rem;
	inline-size: max-content;
	animation: asi-marquee 30s linear infinite;
	animation-play-state: paused;
}

/* Start marquee only after section scrolls into view */
.asi-brands-row.is-visible .asi-brands-track {
	animation-play-state: running;
}

.asi-brands-marquee:hover .asi-brands-track {
	animation-play-state: paused;
}

@keyframes asi-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

[dir="rtl"] .asi-brands-track {
	animation-name: asi-marquee-rtl;
}

@keyframes asi-marquee-rtl {
	from { transform: translateX(0); }
	to { transform: translateX(50%); }
}

@media (prefers-reduced-motion: reduce) {
	.asi-brands-track {
		animation: none;
	}
	.asi-brands-marquee {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		mask-image: none;
		-webkit-mask-image: none;
	}
	.asi-brands-marquee::-webkit-scrollbar { display: none; }
}

.asi-brand-logo-item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	opacity: 0.5;
	filter: grayscale(1);
	transition: opacity 300ms cubic-bezier(0.25, 1, 0.5, 1),
	            filter 300ms cubic-bezier(0.25, 1, 0.5, 1),
	            transform 300ms cubic-bezier(0.25, 1, 0.5, 1);
	text-decoration: none;
}

.asi-brand-logo-item:hover {
	opacity: 1;
	filter: grayscale(0);
	transform: translateY(-2px);
}

.asi-brand-logo-item img {
	block-size: 40px;
	inline-size: auto;
	object-fit: contain;
}

/* ─── Category Cards ─── */
.asi-category-card {
	position: relative;
	transition: transform var(--asi-transition), box-shadow var(--asi-transition);
	overflow: clip;
	box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
}

/* Color-coded accent strip */
.asi-category-card::before {
	content: '';
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 4px;
	background: var(--card-accent, var(--wp--preset--color--accent-1));
	z-index: 2;
	transition: block-size var(--asi-transition);
}

.asi-category-card--household { --card-accent: #0155B7; }
.asi-category-card--personal  { --card-accent: #72B94A; }
.asi-category-card--paper     { --card-accent: #F59E0B; }

.asi-category-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--asi-shadow-lg);
}

.asi-category-card:hover::before {
	block-size: 5px;
}

/* Icon — color-matched */
.asi-category-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	background: color-mix(in srgb, var(--card-accent, #0155B7) 12%, transparent);
	border-radius: 12px;
	color: var(--card-accent, #0155B7);
	transition: background var(--asi-transition), transform var(--asi-transition);
}

.asi-category-card:hover .asi-category-icon {
	background: color-mix(in srgb, var(--card-accent, #0155B7) 18%, transparent);
	transform: scale(1.05);
}

/* Card image */
.asi-category-card-img {
	position: relative;
	overflow: hidden;
	max-block-size: 240px;
}

/* Gradient fade from image to content */
.asi-category-card-img::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 32px;
	background: linear-gradient(to top, #ffffff, transparent);
	pointer-events: none;
}

.asi-category-card-img img {
	inline-size: 100%;
	block-size: 240px;
	object-fit: cover;
	display: block;
	transition: transform var(--asi-transition-slow);
}

.asi-category-card:hover .asi-category-card-img img {
	transform: scale(1.06);
}

/* CTA — branded pill with arrow */
.asi-category-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-block-start: 1rem;
	padding: 0.5rem 1.25rem;
	background: var(--card-accent, #0155B7);
	color: #fff;
	font-family: var(--asi-font-family);
	font-size: 0.8125rem;
	font-weight: 500;
	border-radius: var(--asi-radius-pill);
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--asi-transition), box-shadow var(--asi-transition);
	box-shadow: var(--asi-shadow-sm);
}

/* Stretched link — entire card is clickable */
.asi-category-cta::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

.asi-category-cta svg {
	transition: translate var(--asi-transition);
	flex-shrink: 0;
}

.asi-category-card:hover .asi-category-cta {
	box-shadow: var(--asi-shadow-md);
}

.asi-category-card:hover .asi-category-cta svg {
	translate: 4px 0;
}

[dir="rtl"] .asi-category-cta svg {
	transform: scaleX(-1);
}

[dir="rtl"] .asi-category-card:hover .asi-category-cta svg {
	translate: -4px 0;
}

.asi-category-cta:focus-visible {
	outline: 2px solid var(--card-accent, var(--wp--preset--color--accent-1));
	outline-offset: 2px;
}

/* ─── Category Bubbles (grocery-app style) ─── */
.asi-bubble-slider {
	position: relative;
}

.asi-bubble-track {
	/* 20 items flow column-by-column into 2 even rows of 10 (Mega Savings
	   pairs with All Purpose Cleaner in column 1, etc.). The container is
	   sized so exactly 8 columns are visible; the remaining 2 columns
	   (4 items) sit off-screen and are reached via the right arrow. */
	display: grid;
	inline-size: 100%;
	grid-template-rows: auto auto;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 7 * 0.5rem) / 8);
	justify-items: center;
	column-gap: 0.5rem;
	row-gap: 1.5rem;
	padding: 1rem 0 0.75rem;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 0;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-inline: contain;
}

.asi-bubble-track::-webkit-scrollbar {
	display: none;
}

.asi-bubble-item {
	scroll-snap-align: start;
}

.asi-bubble-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.625rem;
	text-decoration: none;
	color: inherit;
}

.asi-bubble-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 112px;
	block-size: 112px;
	background: var(--wp--preset--color--accent-3, #F1F5F9);
	border-radius: 50%;
	overflow: visible;
	transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1);
	box-shadow:
		inset 0 2px 6px rgba(15, 23, 42, 0.04),
		0 1px 3px rgba(15, 23, 42, 0.03);
}

.asi-bubble-item:hover .asi-bubble-icon {
	transform: translateY(-4px);
	box-shadow:
		inset 0 2px 6px rgba(15, 23, 42, 0.04),
		0 8px 20px rgba(1, 85, 183, 0.10),
		0 2px 6px rgba(15, 23, 42, 0.04);
}

.asi-bubble-icon img {
	/* Image is larger than its circular parent (163px in a 112px circle) and
	   overflows symmetrically on all sides. We rely on the parent's flex
	   centering (justify-content + align-items) instead of absolute +
	   transform because `inset-inline-start: 50%` flips to `right: 50%` in
	   RTL while `transform: translate(-50%, -50%)` stays physical — that
	   combination offsets the image far off-center on the Arabic site.
	   Flex centering works identically in both directions. */
	position: relative;
	flex: 0 0 auto;
	z-index: 1;
	width: 163px !important;
	height: 163px !important;
	max-width: none !important;
	object-fit: contain;
	filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.08));
}

.asi-bubble-label {
	font-family: var(--asi-font-family);
	font-size: 0.8125rem;
	font-weight: 600;
	text-align: center;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast, #0F172A);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-inline-size: 100%;
	transition: color 240ms ease;
}

.asi-bubble-item:hover .asi-bubble-label {
	color: var(--wp--preset--color--accent-1, #0155B7);
}

.asi-bubble-item:focus-visible .asi-bubble-icon {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 3px;
}

/* Mega Savings special card — brand orange */
.asi-bubble-icon--sale {
	background: var(--asi-gradient-orange, linear-gradient(135deg, #F59E0B 0%, #D97706 100%));
	flex-direction: column;
	gap: 0.3rem;
	padding: 0.3rem;
	overflow: hidden;
	box-shadow:
		0 2px 8px rgba(245, 158, 11, 0.2),
		0 0 0 1px rgba(245, 158, 11, 0.1);
}

.asi-sale-tag {
	display: inline-block;
	background: #fff;
	color: var(--wp--preset--color--warm-orange, #F59E0B);
	font-family: var(--asi-font-family);
	font-size: 0.5625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 0.15rem 0.5rem;
	border-radius: var(--asi-radius-pill);
}

/* Arabic: drop tracking + uppercase because both break Arabic ligatures /
   have no semantic effect, and the pill should read as a clean one-word
   tag ("تخفيض") rather than spaced-out characters */
[dir="rtl"] .asi-sale-tag {
	letter-spacing: normal;
	text-transform: none;
}

.asi-sale-text {
	color: #fff;
	font-family: var(--asi-font-family);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
}

.asi-bubble-item--sale:hover .asi-bubble-icon--sale {
	background: linear-gradient(135deg, #D97706 0%, #B45309 100%);
	border-color: rgba(245, 158, 11, 0.4);
}

/* Slider arrows */
.asi-bubble-arrow {
	display: flex;
	position: absolute;
	inset-block-start: 50%;
	transform: translateY(-70%);
	z-index: 2;
	align-items: center;
	justify-content: center;
	inline-size: 36px;
	block-size: 36px;
	border-radius: 50%;
	border: 1px solid rgba(15, 23, 42, 0.12);
	background: #fff;
	color: var(--wp--preset--color--contrast, #0F172A);
	cursor: pointer;
	box-shadow: var(--asi-shadow-sm);
	transition: box-shadow var(--asi-transition), opacity var(--asi-transition);
}

.asi-bubble-arrow:hover {
	box-shadow: var(--asi-shadow-md);
}

.asi-bubble-arrow:disabled {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	cursor: default;
}

.asi-bubble-arrow--prev {
	inset-inline-start: -18px;
}

.asi-bubble-arrow--next {
	inset-inline-end: -18px;
}

.asi-bubble-arrow[hidden] {
	display: none;
}

[dir="rtl"] .asi-bubble-arrow svg {
	transform: scaleX(-1);
}

/* Show More button — mobile only */
.asi-bubble-show-more {
	display: none;
	margin-block-start: 0.25rem;
	padding: 0.375rem 1rem;
	font-family: var(--asi-font-family);
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--wp--preset--color--accent-4, #64748B);
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #0F172A) 12%, transparent);
	border-radius: 999px;
	cursor: pointer;
	align-items: center;
	gap: 0.25rem;
	transition: background var(--asi-transition), color var(--asi-transition);
	box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05), inset 0 -2px 1px rgba(15, 23, 42, 0.05);
}
.asi-bubble-show-more:hover {
	background: var(--wp--preset--color--accent-3, #F8FAFC);
	color: var(--wp--preset--color--contrast, #0F172A);
}
.asi-bubble-slider {
	display: flex;
	flex-direction: column;
	align-items: center;
}
@media (max-width: 768px) {
	.asi-bubble-show-more {
		display: inline-flex;
	}
}

/* ─── Featured Products (WooCommerce) ─── */
/* ─── Product Slider Container ─── */
.asi-product-slider {
	position: relative;
	overflow-x: clip;
}

.asi-product-slider__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	scroll-padding-inline: var(--wp--preset--spacing--50);
	padding-inline: var(--wp--preset--spacing--50);
}

.asi-product-slider__viewport::-webkit-scrollbar {
	display: none;
}

/* Slider arrows — anchored to the image well's vertical center, refined hover */
.asi-product-slider__arrow {
	position: absolute;
	inset-block-start: 38%;
	transform: translateY(-50%);
	inline-size: 42px;
	block-size: 42px;
	border-radius: 50%;
	border: none;
	background: #FFFFFF;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow:
		0 4px 14px rgba(15, 23, 42, 0.10),
		0 1px 3px rgba(15, 23, 42, 0.06),
		0 0 0 1px color-mix(in srgb, var(--wp--preset--color--accent-1) 8%, transparent);
	transition:
		opacity 240ms cubic-bezier(0.22, 1, 0.36, 1),
		background 240ms cubic-bezier(0.22, 1, 0.36, 1),
		color 240ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 4;
	padding: 0;
}

.asi-product-slider__arrow:hover {
	background: var(--wp--preset--color--accent-1);
	color: #FFFFFF;
	box-shadow:
		0 8px 22px rgba(1, 85, 183, 0.32),
		0 2px 6px rgba(1, 85, 183, 0.16),
		0 0 0 1px color-mix(in srgb, var(--wp--preset--color--accent-1) 35%, transparent);
	transform: translateY(-50%) scale(1.06);
}

.asi-product-slider__arrow:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
}

.asi-product-slider__arrow--prev {
	inset-inline-start: calc(var(--wp--preset--spacing--50) - 8px);
}

.asi-product-slider__arrow--next {
	inset-inline-end: calc(var(--wp--preset--spacing--50) - 8px);
}

.asi-product-slider__arrow.is-hidden,
.asi-product-slider__arrow:disabled {
	opacity: 0;
	pointer-events: none;
}

[dir="rtl"] .asi-product-slider__arrow svg {
	transform: scaleX(-1);
}

/* ─── Product Track (flex row) ─── */
.asi-products {
	inline-size: 100%;
}

.asi-products ul.products,
.asi-products .woocommerce ul.products,
.woocommerce .asi-products ul.products {
	display: flex !important;
	gap: 1.125rem !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	flex-wrap: nowrap !important;
}

.asi-products ul.products::before,
.asi-products ul.products::after {
	display: none !important;
	content: none !important;
}

/* ─── Product Card — two-plane shelf ───
   Card chrome bg is a soft warm cream that becomes the visible color of the
   info plinth (title + price) and the action row (qty + cart). The image
   well overrides this with an explicit #FFFFFF so supplier photos with white
   backgrounds blend seamlessly into the well. The two planes are separated
   by the shelf line at the bottom of the image well — clean horizontal seam. */
.asi-products ul.products li.product,
.asi-products .woocommerce ul.products li.product,
.asi-products ul.products li.product.first,
.asi-products ul.products li.product.last,
.asi-products ul.products li.product:nth-child(n) {
	flex: 0 0 calc((100% - 4rem) / 6.4);
	min-inline-size: 126px;
	scroll-snap-align: start;
	background: #F7F5F0;
	border-radius: 16px !important;
	overflow: hidden;
	transition:
		transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 360ms cubic-bezier(0.22, 1, 0.36, 1),
		border-color 360ms cubic-bezier(0.22, 1, 0.36, 1);
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-1) 10%, transparent);
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.04),
		0 6px 18px rgba(15, 23, 42, 0.05);
	display: flex !important;
	flex-direction: column;
	float: none !important;
	clear: none !important;
	position: relative;
}

.asi-products ul.products li.product:hover {
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.04),
		0 14px 32px rgba(1, 85, 183, 0.13),
		0 2px 6px rgba(15, 23, 42, 0.04);
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 22%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.asi-products ul.products li.product { transition: box-shadow 200ms ease, border-color 200ms ease; }
	.asi-products ul.products li.product:hover { transform: none; }
}

/* Product link wrapper */
.asi-products ul.products li.product .woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	flex: 1;
	text-decoration: none;
	overflow: hidden;
}

/* Image well — pure white to match the dominant supplier-photo background.
   No color tint and no inset top shadow: those were creating a visible
   "photo island" because the product's own white square no longer blended.
   Depth now comes from the outer card shadow + the bottom shelf line only. */
.asi-products ul.products li.product a img,
.asi-products ul.products li.product .woocommerce-LoopProduct-link img {
	box-sizing: border-box !important;
	inline-size: 100% !important;
	block-size: 260px !important;
	object-fit: contain;
	object-position: 50% 50%;
	display: block;
	margin: 0 !important;
	padding: clamp(1rem, 1.6vw, 1.5rem) clamp(0.875rem, 1.4vw, 1.25rem);
	background: #FFFFFF;
	border-start-start-radius: 15px;
	border-start-end-radius: 15px;
	border-end-start-radius: 0;
	border-end-end-radius: 0;
	box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--wp--preset--color--accent-1) 9%, transparent);
	transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1), filter 520ms ease;
	max-inline-size: none;
	will-change: transform;
}

.asi-products ul.products li.product:hover img {
	transform: scale(1.045);
	filter: drop-shadow(0 6px 12px rgba(15, 23, 42, 0.08));
}

@media (prefers-reduced-motion: reduce) {
	.asi-products ul.products li.product:hover img { transform: none; filter: none; }
}

/* Title — always reserves 2 lines for consistent card alignment */
.asi-products ul.products li.product .woocommerce-loop-product__title,
.asi-products ul.products li.product h2,
.asi-products ul.products li.product h2.woocommerce-loop-product__title {
	font-size: 0.8125rem !important;
	font-weight: 500 !important;
	font-family: var(--asi-font-family) !important;
	padding: 0.875rem 1rem 0.25rem !important;
	margin: 0 !important;
	color: var(--wp--preset--color--contrast);
	line-height: 1.4;
	letter-spacing: -0.005em;
	text-transform: none !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden !important;
	min-block-size: calc(0.8125rem * 1.4 * 2);
}

/* Price — new price reads first via flex order, old price demoted as a
   small strikethrough chip behind it. Works in LTR and RTL because
   `order:` reorders flex items in flow direction (no row-reverse). */
.asi-products ul.products li.product .price {
	display: flex !important;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0.25rem 1rem 0.625rem !important;
	font-family: var(--asi-font-family) !important;
	color: var(--wp--preset--color--contrast) !important;
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	line-height: 1.15;
	margin-block-start: auto;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

.asi-products ul.products li.product .price ins {
	order: 1;
	text-decoration: none;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}

.asi-products ul.products li.product .price del {
	order: 2;
	font-weight: 500;
	font-size: 0.75rem;
	color: var(--wp--preset--color--accent-4);
	text-decoration: line-through;
	text-decoration-thickness: 1.5px;
	text-decoration-color: color-mix(in srgb, var(--wp--preset--color--accent-4) 60%, transparent);
	opacity: 0.85;
	align-self: center;
}

/* "KD" / currency tail — downweight the suffix so the number leads */
.asi-products ul.products li.product .price .woocommerce-Price-currencySymbol {
	font-size: 0.9em;
	font-weight: 700;
	color: var(--wp--preset--color--accent-4);
	margin-inline: 0.15em;
	letter-spacing: 0;
	text-transform: uppercase;
}

.asi-sar-symbol {
	display: inline-block;
	font-size: 0.9em;
	font-weight: 700;
	line-height: 1;
	margin-inline: 0;
}

.asi-currency-sar {
	--asi-sar-symbol-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1124.14 1256.39'%3E%3Cpath d='M699.62 1113.02h0c-20.06 44.48-33.32 92.75-38.4 143.37l424.51-90.24c20.06-44.47 33.31-92.75 38.4-143.37l-424.51 90.24Z'/%3E%3Cpath d='M1085.73 895.8c20.06-44.47 33.32-92.75 38.4-143.37l-330.68 70.33v-135.2l292.27-62.11c20.06-44.47 33.32-92.75 38.4-143.37l-330.68 70.27V66.13c-50.67 28.45-95.67 66.32-132.25 110.99v403.35l-132.25 28.11V0c-50.67 28.44-95.67 66.32-132.25 110.99v525.69l-295.91 62.88c-20.06 44.47-33.33 92.75-38.42 143.37l334.33-71.05v170.26l-358.3 76.14c-20.06 44.47-33.32 92.75-38.4 143.37l375.04-79.7c30.53-6.35 56.77-24.4 73.83-49.24l68.78-101.97v-.02c7.14-10.55 11.3-23.27 11.3-36.97v-149.98l132.25-28.11v270.4l424.53-90.28Z'/%3E%3C/svg%3E");
}

.asi-currency-sar .woocommerce-Price-currencySymbol,
.asi-sar-symbol {
	display: inline-block;
	inline-size: 0.72em;
	block-size: 0.82em;
	background-color: currentColor;
	color: inherit;
	font-size: 0.95em;
	font-weight: 700;
	line-height: 1;
	overflow: hidden;
	text-indent: -999em;
	vertical-align: -0.06em;
	-webkit-mask: var(--asi-sar-symbol-mask) center / contain no-repeat;
	mask: var(--asi-sar-symbol-mask) center / contain no-repeat;
}

.asi-sar-money {
	display: inline-flex;
	align-items: baseline;
	direction: ltr;
	gap: 0.15em;
	unicode-bidi: isolate;
}

.asi-sar-money .asi-sar-symbol {
	margin-inline: 0 !important;
}

/* ─── Qty Stepper + Cart Actions Row ───
   Separated from the price area by a hairline that echoes the shelf line
   above the image well — visual rhythm of two horizontal seams.
   Background stays white (no tint) so the card reads as one continuous panel. */
.asi-qty-cart {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.625rem 0.875rem 0.75rem;
	gap: 0.5rem;
	border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-1) 9%, transparent);
	margin-block-start: 0.25rem;
}

.asi-qty-stepper {
	display: flex;
	align-items: center;
	border: 1px solid rgba(15, 23, 42, 0.1);
	border-radius: 8px;
	overflow: hidden;
	background: var(--wp--preset--color--base);
}

.asi-qty-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 28px;
	block-size: 28px;
	border: none;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	padding: 0;
	transition: background-color 150ms ease, color 150ms ease;
}

.asi-qty-btn:hover {
	background: rgba(15, 23, 42, 0.08);
}

.asi-qty-btn:active {
	background: rgba(15, 23, 42, 0.12);
}

.asi-qty-btn.is-min {
	color: var(--wp--preset--color--accent-4);
	cursor: default;
}

.asi-qty-value {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 26px;
	font-family: var(--asi-font-family);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	font-variant-numeric: tabular-nums;
	user-select: none;
}

/* Cart button — brand-blue with subtle inner highlight, refined hover.
   Wrapped in :where() so specificity stays low (0,1,0) and the state classes
   (is-loading, is-success, is-error, added) can naturally win without needing
   the same deep selector chain. !important still overrides Woo defaults. */
:where(.asi-products ul.products li.product) .asi-cart-btn,
:where(.asi-products ul.products li.product) .asi-cart-btn.add_to_cart_button,
.asi-cart-btn,
.asi-cart-btn.add_to_cart_button {
	position: relative !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	inline-size: 38px !important;
	block-size: 38px !important;
	flex-shrink: 0;
	border-radius: 11px !important;
	background:
		linear-gradient(180deg,
			color-mix(in srgb, var(--wp--preset--color--accent-1) 100%, white 6%) 0%,
			var(--wp--preset--color--accent-1) 100%) !important;
	background-image:
		linear-gradient(180deg,
			color-mix(in srgb, var(--wp--preset--color--accent-1) 100%, white 6%) 0%,
			var(--wp--preset--color--accent-1) 100%) !important;
	color: white !important;
	border: none;
	cursor: pointer;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.18),
		0 2px 6px rgba(1, 85, 183, 0.25),
		0 1px 2px rgba(15, 23, 42, 0.08);
	/* Split transitions: press feedback (transform) is tight at 110ms,
	   ambient hover transitions (color/shadow) breathe at 220ms. */
	transition:
		background-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
		background-image 220ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 110ms cubic-bezier(0.22, 1, 0.36, 1);
	text-indent: 0 !important;
	font-size: 0 !important;
	line-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}

.asi-cart-btn:hover {
	background:
		linear-gradient(180deg,
			color-mix(in srgb, var(--wp--preset--color--accent-2) 100%, white 8%) 0%,
			var(--wp--preset--color--accent-2) 100%) !important;
	background-image:
		linear-gradient(180deg,
			color-mix(in srgb, var(--wp--preset--color--accent-2) 100%, white 8%) 0%,
			var(--wp--preset--color--accent-2) 100%) !important;
	transform: translateY(-1px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.22),
		0 6px 14px rgba(114, 185, 74, 0.32),
		0 2px 4px rgba(15, 23, 42, 0.08);
}

.asi-cart-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
}

.asi-cart-btn svg {
	stroke: white;
	flex-shrink: 0;
}

/* Legacy loading state — WC adds .loading during ajax_add_to_cart for the
   non-simple-product fallback link. Our own handler uses .is-loading. */
.asi-cart-btn.loading {
	opacity: 0.6;
	pointer-events: none;
}

.asi-cart-btn.added {
	background: var(--asi-gradient-blue, linear-gradient(135deg, #0155B7 0%, #013A7A 100%)) !important;
}

/* ─── ASI Add to Cart — interactive states (driven by add-to-cart.js) ─── */

/* Press feedback: tactile scale-down (transform only, no layout shift).
   Tight 110ms transition is set on the base rule above. */
.asi-cart-btn:active:not(.is-loading):not(.is-success):not(.is-error) {
	transform: scale(0.94);
}

/* Extend the tap area without changing the visual size. We expand only
   on the block (top/bottom) and trailing inline edges so the hit box
   never overlaps the adjacent qty stepper buttons. */
.asi-cart-btn::before {
	content: '';
	position: absolute;
	inset-block: -5px;
	inset-inline-end: -5px;
	inset-inline-start: 0;
	border-radius: inherit;
}

/* Loading: spinning ring, button locked */
.asi-cart-btn.is-loading {
	pointer-events: none;
	background: var(--wp--preset--color--accent-1) !important;
}

.asi-cart-btn .asi-cart-spin {
	animation: asi-cart-spin 720ms linear infinite;
	transform-origin: 50% 50%;
}

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

/* Success: brand green confirmation. A clean ease-out scale-up settles
   to rest — no overshoot, no bounce, reads as decisive and trustworthy. */
.asi-cart-btn.is-success {
	background: var(--wp--preset--color--accent-2, #72B94A) !important;
	box-shadow: 0 6px 18px rgba(114, 185, 74, 0.35);
	animation: asi-cart-success 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes asi-cart-success {
	0%   { transform: scale(0.92); }
	100% { transform: scale(1); }
}

/* Error: warm orange + asymmetric shake. Recoverable, never blocking. */
.asi-cart-btn.is-error {
	background: var(--wp--preset--color--warm-orange, #F59E0B) !important;
	animation: asi-cart-shake 320ms cubic-bezier(0.36, 0, 0.66, -0.56);
}

@keyframes asi-cart-shake {
	0%, 100% { transform: translateX(0); }
	25%      { transform: translateX(-3px); }
	50%      { transform: translateX(3px); }
	75%      { transform: translateX(-2px); }
}

/* Cart badge bump when count updates after a successful add.
   Clean ease-out scale, no overshoot. */
.asi-cart-badge.is-bumping {
	animation: asi-badge-bump 280ms cubic-bezier(0.22, 1, 0.36, 1);
	transform-origin: 50% 50%;
}

@keyframes asi-badge-bump {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.28); }
	100% { transform: scale(1); }
}

/* Cart icon attention pulse — when the badge bumps, the parent cart icon
   gets a brief lift to direct the eye to where the item just landed.
   Logical-property safe (translateY is the same in LTR + RTL). */
.asi-header-cart.is-receiving {
	animation: asi-cart-receive 360ms cubic-bezier(0.22, 1, 0.36, 1);
	transform-origin: 50% 50%;
}

@keyframes asi-cart-receive {
	0%   { transform: translateY(0)    scale(1);    }
	35%  { transform: translateY(-3px) scale(1.08); }
	100% { transform: translateY(0)    scale(1);    }
}

/* ─── Toast notification ─── */

/* Base toast: compact inline bar (used on mobile + error/undo on all sizes) */
.asi-toast {
	position: fixed;
	inset-block-start: max(1.25rem, env(safe-area-inset-top));
	inset-inline-end: 1.25rem;
	z-index: 9999;
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 0.875rem 0.75rem 1rem;
	background: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--contrast, #0F172A);
	border-radius: 12px;
	box-shadow:
		0 12px 32px rgba(15, 23, 42, 0.16),
		0 2px 6px rgba(15, 23, 42, 0.08);
	font-family: var(--asi-font-family);
	font-size: 0.875rem;
	font-weight: 500;
	max-inline-size: min(420px, calc(100vw - 2rem));
	transform: translateY(-12px);
	opacity: 0;
	pointer-events: none;
	transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 240ms ease;
}

.asi-toast.is-visible {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

.asi-toast__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 32px;
	block-size: 32px;
	border-radius: 50%;
	flex-shrink: 0;
	background: color-mix(in srgb, var(--wp--preset--color--accent-2, #72B94A) 14%, transparent);
	color: var(--wp--preset--color--accent-2, #72B94A);
}

.asi-toast--error .asi-toast__icon {
	background: color-mix(in srgb, var(--wp--preset--color--warm-orange, #F59E0B) 16%, transparent);
	color: var(--wp--preset--color--warm-orange, #F59E0B);
}

/* Undo variant — subdued chrome since it appears post-action and shouldn't
   feel celebratory. The trash icon sits in a neutral gray well so the
   "Undo" button is the visual anchor. */
.asi-toast--undo .asi-toast__icon {
	background: color-mix(in srgb, var(--wp--preset--color--contrast, #0F172A) 8%, transparent);
	color: var(--wp--preset--color--accent-4, #64748B);
}

.asi-toast--undo .asi-toast__text strong {
	font-weight: 600;
	color: var(--wp--preset--color--contrast, #0F172A);
}

.asi-toast__text {
	flex: 1 1 auto;
	min-inline-size: 0;
}

.asi-toast__action {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.75rem;
	border-radius: 8px;
	background: var(--wp--preset--color--accent-1, #0155B7);
	color: #fff !important;
	font-weight: 600;
	font-size: 0.8125rem;
	text-decoration: none;
	flex-shrink: 0;
	transition: background-color 160ms ease, transform 160ms ease;
}

.asi-toast__action:hover {
	background: var(--wp--preset--color--contrast, #0F172A);
	transform: translateY(-1px);
}

.asi-toast__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 28px;
	block-size: 28px;
	border: none;
	background: transparent;
	color: var(--wp--preset--color--accent-4, #64748B);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	border-radius: 6px;
	flex-shrink: 0;
	transition: background-color 150ms ease, color 150ms ease;
}

.asi-toast__close:hover {
	background: rgba(15, 23, 42, 0.06);
	color: var(--wp--preset--color--contrast, #0F172A);
}

/* ─── Desktop enhanced toast panel — anchored under cart icon ─── */

.asi-toast.asi-toast--desktop {
	inset-block-start: var(--toast-top, 5rem);
	inset-block-end: auto;
	inset-inline-start: auto;
	inset-inline-end: var(--toast-inline-end, 1.5rem);
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	inline-size: 340px;
	max-inline-size: 340px;
	border-radius: 16px;
	box-shadow:
		0 20px 60px rgba(15, 23, 42, 0.20),
		0 4px 12px rgba(15, 23, 42, 0.10),
		0 0 0 1px rgba(15, 23, 42, 0.05);
	transform: translateY(-8px);
	opacity: 0;
	overflow: visible;
}

.asi-toast--desktop.is-visible {
	transform: translateY(0);
	opacity: 1;
	animation: asi-toast-drop-in 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes asi-toast-drop-in {
	0%   { transform: translateY(-12px); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
}

.asi-toast--desktop::before {
	content: "";
	position: absolute;
	inset-block-start: -6px;
	inset-inline-end: 18px;
	inset-inline-start: auto;
	inline-size: 12px;
	block-size: 12px;
	background: var(--wp--preset--color--base, #fff);
	transform: rotate(45deg);
	border-radius: 2px 0 0 0;
	box-shadow: -2px -2px 4px rgba(15, 23, 42, 0.06);
	z-index: 1;
}

/* Header row: icon + "Added to cart" + × */
.asi-toast--desktop .asi-toast__header {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.875rem 1rem 0.625rem;
}

.asi-toast--desktop .asi-toast__header .asi-toast__icon {
	inline-size: 28px;
	block-size: 28px;
}

.asi-toast--desktop .asi-toast__header .asi-toast__icon svg {
	width: 15px;
	height: 15px;
}

.asi-toast--desktop .asi-toast__header .asi-toast__text {
	flex: 1;
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--wp--preset--color--accent-2, #72B94A);
}

.asi-toast--desktop .asi-toast__header .asi-toast__close {
	inline-size: 24px;
	block-size: 24px;
	font-size: 1.125rem;
}

/* Product row: thumbnail + name + count */
.asi-toast__product {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 1rem 0.75rem;
}

.asi-toast__thumb {
	inline-size: 56px;
	block-size: 56px;
	border-radius: 10px;
	object-fit: cover;
	background: var(--wp--preset--color--accent-5, #F8FAFC);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #0F172A) 8%, transparent);
	flex-shrink: 0;
}

.asi-toast__product-name {
	flex: 1;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast, #0F172A);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.asi-toast__count {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--wp--preset--color--accent-4, #64748B);
	white-space: nowrap;
	flex-shrink: 0;
}

/* Action buttons row */
.asi-toast__actions {
	display: flex;
	gap: 0.5rem;
	padding: 0 1rem 0.875rem;
}

.asi-toast--desktop .asi-toast__action--primary {
	flex: 1;
	justify-content: center;
	padding: 0.5rem 1rem;
	border-radius: 10px;
	font-size: 0.8125rem;
	font-weight: 600;
	background: var(--wp--preset--color--accent-1, #0155B7);
	color: #fff !important;
	text-decoration: none;
	transition: background-color 160ms ease, transform 100ms ease;
}

.asi-toast--desktop .asi-toast__action--primary:hover {
	background: var(--wp--preset--color--contrast, #0F172A);
	transform: translateY(-1px);
}

.asi-toast--desktop .asi-toast__action--secondary {
	flex: 1;
	justify-content: center;
	padding: 0.5rem 1rem;
	white-space: nowrap;
	border-radius: 10px;
	font-size: 0.8125rem;
	font-weight: 600;
	background: transparent;
	color: var(--wp--preset--color--contrast, #0F172A) !important;
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--contrast, #0F172A) 25%, transparent);
	cursor: pointer;
	inline-size: auto;
	block-size: auto;
	transition: background-color 160ms ease, border-color 160ms ease;
	font-family: var(--asi-font-family);
}

.asi-toast--desktop .asi-toast__action--secondary:hover {
	background: color-mix(in srgb, var(--wp--preset--color--contrast, #0F172A) 6%, transparent);
	border-color: color-mix(in srgb, var(--wp--preset--color--contrast, #0F172A) 40%, transparent);
}

/* Progress bar — visual countdown to auto-dismiss */
.asi-toast__progress {
	block-size: 3px;
	background: color-mix(in srgb, var(--wp--preset--color--contrast, #0F172A) 6%, transparent);
	overflow: hidden;
	border-radius: 0 0 16px 16px;
}

.asi-toast__progress-bar {
	block-size: 100%;
	background: var(--wp--preset--color--accent-1, #0155B7);
	border-radius: 0 3px 3px 0;
	inline-size: 100%;
	transform-origin: inline-start center;
	animation: asi-toast-countdown 4200ms linear forwards;
}

@keyframes asi-toast-countdown {
	0%   { transform: scaleX(1); }
	100% { transform: scaleX(0); }
}

/* Mobile: top-center, full-width minus margin — easier to read with a
   thumb hold and avoids overlapping the bottom CTA bar / tab bar. */
@media (max-width: 600px) {
	.asi-toast {
		inset-block-start: max(0.75rem, env(safe-area-inset-top));
		inset-inline-start: 0.75rem;
		inset-inline-end: 0.75rem;
		max-inline-size: none;
	}
}

/* Respect prefers-reduced-motion across the whole flow */
@media (prefers-reduced-motion: reduce) {
	.asi-cart-btn.is-success,
	.asi-cart-btn.is-error,
	.asi-cart-badge.is-bumping,
	.asi-header-cart.is-receiving {
		animation: none;
	}
	.asi-cart-btn:active:not(.is-loading):not(.is-success):not(.is-error) {
		transform: none;
	}
	.asi-cart-btn .asi-cart-spin {
		animation-duration: 0ms;
	}
	.asi-toast {
		transition: opacity 200ms ease;
		transform: none;
	}
	.asi-toast--desktop {
		transform: none;
	}
	.asi-toast--desktop.is-visible {
		animation: none;
	}
	.asi-toast__progress-bar {
		animation: none;
		transform: scaleX(0);
	}
}

/* Fallback for non-simple products that still use the old WC button */
.asi-products ul.products li.product > .button,
.asi-products ul.products li.product > .add_to_cart_button,
.asi-products ul.products li.product > a.button {
	position: absolute !important;
	inset-block-end: 0.625rem;
	inset-inline-end: 0.625rem;
	display: block !important;
	inline-size: 36px !important;
	block-size: 36px !important;
	padding: 0 !important;
	margin: 0 !important;
	background-color: var(--wp--preset--color--accent-1) !important;
	color: transparent !important;
	border-radius: 50% !important;
	border: none;
	cursor: pointer;
	transition: background-color var(--asi-transition), transform var(--asi-transition);
	z-index: 2;
	line-height: 0 !important;
	font-size: 0 !important;
	text-indent: -9999px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
}

/* "View cart" link after AJAX add */
.asi-products ul.products li.product .added_to_cart {
	display: none !important;
}

/* ─── Sale Percentage Badge — "shelf tag" ───
   A vertical price tag that hangs slightly off the inline-start edge of the
   image well, like the cardboard tags on a real grocery shelf. Pseudo-element
   creates the small notch at the bottom edge so it reads as a label, not a pill. */
.asi-sale-badge {
	position: absolute;
	inset-block-start: 0.875rem;
	inset-inline-start: -4px;
	background: var(--asi-gradient-orange, linear-gradient(180deg, #F59E0B 0%, #D97706 100%));
	color: #fff;
	font-family: var(--asi-font-family);
	font-size: 0.6875rem;
	font-weight: 700;
	padding: 0.3125rem 0.625rem 0.375rem 0.5rem;
	border-start-end-radius: 8px;
	border-end-end-radius: 8px;
	border-start-start-radius: 3px;
	border-end-start-radius: 3px;
	z-index: 3;
	line-height: 1;
	letter-spacing: 0.02em;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.25),
		0 2px 6px rgba(217, 119, 6, 0.30),
		0 1px 2px rgba(15, 23, 42, 0.10);
	font-variant-numeric: tabular-nums;
}

/* The little folded-corner shadow that gives the tag its "pinned" look */
.asi-sale-badge::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-end: -4px;
	inline-size: 4px;
	block-size: 4px;
	background: #B45309;
	clip-path: polygon(0 0, 100% 0, 100% 100%);
}

[dir="rtl"] .asi-sale-badge::before {
	clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* ─── Bulk-deal pill on product cards (tier "buy more, save more") ───
   Floats over the top-start corner of the product image (opposite the wishlist
   heart, which is top-end). Green = savings, distinct from the orange Sale tag.
   Logical properties keep it correct in RTL. */
.asi-tier-pill {
	position: absolute;
	inset-block-start: 0.8rem;
	inset-inline-start: 0.8rem;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.3rem 0.6rem;
	background: var(--asi-gradient-green, linear-gradient(135deg, #72B94A, #5A9A38));
	color: #fff;
	font-family: var(--asi-font-family);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.15;
	border-radius: 999px;
	white-space: nowrap;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.22),
		0 2px 6px rgba(90, 154, 56, 0.28);
	font-variant-numeric: tabular-nums;
}

.asi-tier-pill__icon {
	flex-shrink: 0;
	opacity: 0.95;
}

/* ─── Wishlist Heart — refined small circle ─── */
:root {
	--asi-wishlist-red: #E11D48;
	--asi-wishlist-red-dark: #BE123C;
	--asi-wishlist-size: 32px;
}

.asi-wishlist-btn {
	position: absolute;
	inset-block-start: 0.75rem;
	inset-inline-end: 0.75rem;
	z-index: 3;
	background: #FFFFFF;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	border-radius: 50%;
	inline-size: var(--asi-wishlist-size);
	block-size: var(--asi-wishlist-size);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--wp--preset--color--accent-4);
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
	transition:
		color 240ms cubic-bezier(0.22, 1, 0.36, 1),
		border-color 240ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1),
		background-color 240ms cubic-bezier(0.22, 1, 0.36, 1);
	padding: 0;
	-webkit-tap-highlight-color: transparent;
}

.asi-wishlist-btn svg {
	inline-size: calc(var(--asi-wishlist-size) * 0.53);
	block-size: calc(var(--asi-wishlist-size) * 0.53);
	transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.asi-wishlist-btn:hover {
	color: var(--asi-wishlist-red);
	border-color: color-mix(in srgb, var(--asi-wishlist-red) 35%, transparent);
	transform: translateY(-1px) scale(1.06);
	box-shadow: 0 4px 14px rgba(225, 29, 72, 0.22), 0 1px 3px rgba(15, 23, 42, 0.06);
}

.asi-wishlist-btn:focus-visible {
	outline: 2px solid var(--asi-wishlist-red);
	outline-offset: 2px;
}

.asi-wishlist-btn:active {
	transform: scale(0.92);
}

.asi-wishlist-btn.is-wishlisted {
	color: var(--asi-wishlist-red);
	border-color: color-mix(in srgb, var(--asi-wishlist-red) 28%, transparent);
}

.asi-wishlist-btn.is-wishlisted svg {
	fill: var(--asi-wishlist-red);
	stroke: var(--asi-wishlist-red);
	animation: asi-heart-pop 360ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.asi-wishlist-btn.is-loading {
	pointer-events: none;
	opacity: 0.7;
}

.asi-wishlist-btn.is-loading svg {
	animation: asi-heart-pulse 700ms ease-in-out infinite alternate;
}

@keyframes asi-heart-pop {
	0%   { transform: scale(0.7); }
	60%  { transform: scale(1.18); }
	100% { transform: scale(1); }
}

@keyframes asi-heart-pulse {
	from { opacity: 0.55; transform: scale(0.92); }
	to   { opacity: 1;    transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
	.asi-wishlist-btn,
	.asi-wishlist-btn svg,
	.asi-wishlist-btn.is-wishlisted svg,
	.asi-wishlist-btn.is-loading svg {
		transition: none !important;
		animation: none !important;
	}
}

/* ─── Gallery zoom trigger — top-start, mirrors the wishlist heart ───────
   WC ships .woocommerce-product-gallery__trigger pinned at top:.5em/right:.5em
   (left:.5em in its RTL stylesheet) — which lands it ON TOP of our wishlist
   heart on the RTL Arabic surface. We move it to the opposite top corner
   (inline-start) and re-skin it to match the wishlist heart's chrome:
   same 44px white pill, same shadow, brand-blue hover (vs heart's red).
   Logical properties keep LTR/RTL symmetric automatically; we still zero
   out WC's physical top/right/bottom/left so its base + RTL stylesheets
   can't double-position the button. */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger,
.woocommerce-product-gallery .woocommerce-product-gallery__trigger {
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	position: absolute;
	inset-block-start: 1rem;
	inset-inline-start: 1rem;
	z-index: 5;
	box-sizing: border-box;
	inline-size: 44px;
	block-size: 44px;
	margin: 0;
	padding: 0;
	background: #FFFFFF;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	border-radius: 50%;
	color: var(--wp--preset--color--accent-4);
	box-shadow: 0 6px 20px rgba(15, 23, 42, 0.10), 0 1px 3px rgba(15, 23, 42, 0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0;
	text-indent: 0;
	overflow: hidden;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition:
		color 240ms cubic-bezier(0.22, 1, 0.36, 1),
		border-color 240ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Replace WC's two-piece pseudo magnifier (.5em hardcoded coords tuned for
   a 36px button) with one masked Lucide-style search glyph that scales
   with currentColor and centers via the parent flex. The WC RTL stylesheet
   selector `.woocommerce div.product div.images .…__trigger::before` has
   (0,3,2) specificity, so we match its chain to win deterministically. */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger::before,
.woocommerce-product-gallery .woocommerce-product-gallery__trigger::before {
	content: '';
	position: static;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	inline-size: 18px;
	block-size: 18px;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") center / contain no-repeat;
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") center / contain no-repeat;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger::after,
.woocommerce-product-gallery .woocommerce-product-gallery__trigger::after {
	display: none;
}

/* WC injects <span aria-hidden="true">🔍</span> inside the trigger and relies
   on text-indent: -9999px to push the emoji off-screen. We reset text-indent
   above so our mask-based glyph centers cleanly, which means we have to hide
   the emoji span explicitly here — otherwise both render side-by-side.
   Match WC's RTL selector specificity (`.woocommerce div.product div.images
   .…__trigger span[aria-hidden=true]`) so the AR surface doesn't keep the
   emoji visible. */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger > span,
.woocommerce div.product div.images .woocommerce-product-gallery__trigger span[aria-hidden="true"],
.woocommerce-product-gallery .woocommerce-product-gallery__trigger > span {
	display: none;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger:hover,
.woocommerce-product-gallery .woocommerce-product-gallery__trigger:hover {
	color: var(--wp--preset--color--accent-1);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 35%, transparent);
	transform: translateY(-1px) scale(1.06);
	box-shadow: 0 10px 28px rgba(1, 85, 183, 0.20), 0 2px 4px rgba(15, 23, 42, 0.08);
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger:focus-visible,
.woocommerce-product-gallery .woocommerce-product-gallery__trigger:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger:active,
.woocommerce-product-gallery .woocommerce-product-gallery__trigger:active {
	transform: scale(0.92);
}

@media (max-width: 768px) {
	.woocommerce div.product div.images .woocommerce-product-gallery__trigger,
	.woocommerce-product-gallery .woocommerce-product-gallery__trigger {
		inset-block-start: 0.75rem;
		inset-inline-start: 0.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce-product-gallery .woocommerce-product-gallery__trigger {
		transition: none !important;
	}
}

/* ─── Header wishlist icon: badge sits inside the link, mirrors cart badge ─── */
.asi-header-wishlist {
	position: relative;
}

.asi-wishlist-badge {
	position: absolute;
	inset-block-start: -6px;
	inset-inline-end: -8px;
	min-inline-size: 18px;
	block-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--warm-orange, #F59E0B);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 600;
	font-family: var(--asi-font-family);
	border-radius: 50%;
	line-height: 1;
	padding: 0 4px;
	pointer-events: none;
	transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.asi-wishlist-badge[hidden] {
	display: none;
}

.asi-header-wishlist:hover .asi-wishlist-badge {
	transform: scale(1.08);
}

/* ─── Wishlist toast — shares .asi-toast chrome, tinted red ─── */
.asi-toast--wishlist .asi-toast__icon {
	color: var(--asi-wishlist-red);
}

.asi-toast--wishlist.asi-toast--error .asi-toast__icon {
	color: #DC2626;
}

/* ─── Rating Row (loop / product card / homepage slider) ─── */
.asi-rating-row {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0 0.875rem;
	margin-block-end: 0.25rem;
	--asi-rating-warm: var(--wp--preset--color--warm-orange, #F59E0B);
	/* Reuse the same 5-star sprite shape as the PDP rating block so the
	   glyph is consistent across surfaces. Two sprites (ghost + fill) over
	   a 120×24 viewBox, one star per 24px slot. */
	--asi-rating-empty: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' fill='%23cbd5e1'><path d='M12 2.2 L14.6 8.9 L21.8 9.4 L16.2 14 L18 21 L12 17.2 L6 21 L7.8 14 L2.2 9.4 L9.4 8.9 Z'/><path d='M36 2.2 L38.6 8.9 L45.8 9.4 L40.2 14 L42 21 L36 17.2 L30 21 L31.8 14 L26.2 9.4 L33.4 8.9 Z'/><path d='M60 2.2 L62.6 8.9 L69.8 9.4 L64.2 14 L66 21 L60 17.2 L54 21 L55.8 14 L50.2 9.4 L57.4 8.9 Z'/><path d='M84 2.2 L86.6 8.9 L93.8 9.4 L88.2 14 L90 21 L84 17.2 L78 21 L79.8 14 L74.2 9.4 L81.4 8.9 Z'/><path d='M108 2.2 L110.6 8.9 L117.8 9.4 L112.2 14 L114 21 L108 17.2 L102 21 L103.8 14 L98.2 9.4 L105.4 8.9 Z'/></svg>");
	--asi-rating-fill: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' fill='%23F59E0B'><path d='M12 2.2 L14.6 8.9 L21.8 9.4 L16.2 14 L18 21 L12 17.2 L6 21 L7.8 14 L2.2 9.4 L9.4 8.9 Z'/><path d='M36 2.2 L38.6 8.9 L45.8 9.4 L40.2 14 L42 21 L36 17.2 L30 21 L31.8 14 L26.2 9.4 L33.4 8.9 Z'/><path d='M60 2.2 L62.6 8.9 L69.8 9.4 L64.2 14 L66 21 L60 17.2 L54 21 L55.8 14 L50.2 9.4 L57.4 8.9 Z'/><path d='M84 2.2 L86.6 8.9 L93.8 9.4 L88.2 14 L90 21 L84 17.2 L78 21 L79.8 14 L74.2 9.4 L81.4 8.9 Z'/><path d='M108 2.2 L110.6 8.9 L117.8 9.4 L112.2 14 L114 21 L108 17.2 L102 21 L103.8 14 L98.2 9.4 L105.4 8.9 Z'/></svg>");
}

/* wc_get_star_rating_html() emits a bare <span style="width:N%">Rated …</span>
   here (no outer .star-rating wrapper). Without explicit CSS the alt-text
   leaks as full Arabic prose and breaks the card layout. Paint the stars
   ourselves and hide the alt-text — the (N) count next to the row preserves
   the human-readable signal. */
.asi-rating-row .asi-rating-stars {
	position: relative;
	display: inline-block;
	inline-size: 5em;
	block-size: 1em;
	overflow: hidden;
	white-space: nowrap;
	text-indent: -9999px;
	color: transparent;
	background-image: var(--asi-rating-empty);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 5em 1em;
	font-size: 0.875rem;
	line-height: 1;
}
.asi-rating-row .asi-rating-stars > span {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	block-size: 100%;
	max-inline-size: 100%;
	overflow: hidden;
	color: transparent;
	background-image: var(--asi-rating-fill);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 5em 1em;
}
/* Stars sprite paints left → right; force LTR so width:60% always fills the
   leading 3 stars regardless of document direction. */
[dir="rtl"] .asi-rating-row .asi-rating-stars,
[dir="rtl"] .asi-rating-row .asi-rating-stars > span {
	direction: ltr;
}

/* Legacy WC rating markup if it ever slips through with the outer wrapper. */
.asi-rating-row .star-rating {
	font-size: 0.75rem !important;
	margin: 0 !important;
}

.asi-rating-count {
	font-family: var(--asi-font-family);
	font-size: 0.6875rem;
	color: var(--wp--preset--color--accent-4);
}

/* Hide default WC sale flash */
.asi-products ul.products li.product .onsale {
	display: none !important;
}


/* ─── Bento Grid (Shop by Use) ─── */
.asi-bento-grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 1.25rem;
}

.asi-bento-large {
	min-inline-size: 0;
	display: flex;
}

.asi-bento-card-tall {
	block-size: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.asi-bento-card-tall .asi-bento-card-img {
	flex: 1 1 0;
	min-block-size: 0;
	max-block-size: none;
}

.asi-bento-right {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-inline-size: 0;
}

.asi-bento-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	flex: 1;
}

.asi-bento-small {
	display: flex;
	min-inline-size: 0;
}

.asi-bento-small > .asi-bento-card {
	display: flex;
	flex-direction: column;
	inline-size: 100%;
}

/* Reset figure margins inside bento cards */
.asi-bento-card figure {
	margin: 0;
}

.asi-bento-card {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	border-radius: 16px;
	padding: 1.25rem;
	background: var(--wp--preset--color--base);
	transition: transform var(--asi-transition), box-shadow var(--asi-transition), border-color var(--asi-transition);
	position: relative;
	overflow: hidden;
}

/* Bento card typography */
.asi-bento-card h3 {
	margin-block-end: 0.5rem;
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	letter-spacing: -0.32px;
	text-transform: uppercase;
	font-weight: 900;
}

.asi-bento-card h4 {
	margin-block-end: 0.375rem;
	font-size: 1.25rem;
	letter-spacing: -0.24px;
	line-height: 1.2;
	text-transform: uppercase;
	font-weight: 900;
}

.asi-bento-card p {
	font-size: 0.8125rem;
	line-height: 1.4;
}

.asi-bento-card.asi-bento-card-tall p {
	font-size: 1rem;
	line-height: 1.5;
}

.asi-bento-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--asi-shadow-md);
	border-color: rgba(1, 85, 183, 0.15) !important;
}

/* Subtle gradient shine on hover */
.asi-bento-card::after {
	content: '';
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: -100%;
	inline-size: 50%;
	block-size: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	transition: inset-inline-start 0.5s ease;
	pointer-events: none;
	z-index: 1;
}

.asi-bento-card:hover::after {
	inset-inline-start: 200%;
}

/* Bento card images */
.asi-bento-card-img {
	flex: 1;
	margin-block: 0.75rem;
	border-radius: 10px;
	overflow: hidden;
	min-block-size: 0;
	max-block-size: 280px;
}

.asi-bento-card-img img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: bottom center;
	display: block;
	border-radius: 10px;
}

.asi-bento-card-img-sm {
	flex: 1;
	margin-block-start: 0.5rem;
	border-radius: 8px;
	overflow: hidden;
	min-block-size: 0;
}

.asi-bento-card-img-sm img {
	inline-size: 100%;
	block-size: 100%;
	min-block-size: 0;
	object-fit: cover;
	object-position: bottom center;
	display: block;
	border-radius: 8px;
}

/* Shop link */
.asi-bento-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	font-family: var(--asi-font-family);
	color: var(--wp--preset--color--accent-1);
	text-decoration: none;
	margin-block-start: 0.75rem;
	width: fit-content;
	padding: 0.375rem 1rem;
	border: 1.5px solid var(--wp--preset--color--accent-1);
	border-radius: 100px;
	transition: background var(--asi-transition), color var(--asi-transition), gap var(--asi-transition);
}

.asi-bento-link:hover,
.asi-bento-card:hover .asi-bento-link {
	background: var(--wp--preset--color--accent-1);
	color: #fff;
	gap: 0.75rem;
}

/* ─── §8 Shop by Need — editorial feature + chip row (supersedes .asi-bento-*) ─── */
.asi-needs {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 1.5rem;
	margin-block-start: 1.5rem;
	align-items: stretch;
}

.asi-needs-feature {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-block-size: 360px;
	padding: 1.75rem;
	border-radius: var(--asi-radius, 16px);
	overflow: hidden;
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 6%, var(--wp--preset--color--base));
	color: var(--wp--preset--color--base);
	text-decoration: none;
	isolation: isolate;
	transition: transform var(--asi-transition);
}

.asi-needs-feature__img {
	margin: 0;
	position: absolute;
	inset: 0;
	z-index: -2;
}

.asi-needs-feature__img img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Readability scrim — bottom-anchored, restrained, no decorative glow */
.asi-needs-feature::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--wp--preset--color--contrast) 78%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--contrast) 35%, transparent) 45%,
		transparent 75%
	);
}

.asi-needs-feature__body {
	position: relative;
	max-inline-size: 36ch;
}

.asi-needs-feature__title {
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--base);
}

.asi-needs-feature__desc {
	font-size: 0.9375rem;
	line-height: 1.55;
	margin: 0 0 1rem;
	color: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
}

.asi-needs-feature__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--base);
	padding: 0.5rem 1.125rem;
	background: color-mix(in srgb, var(--wp--preset--color--base) 18%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 35%, transparent);
	border-radius: 100px;
	backdrop-filter: blur(4px);
	transition: background var(--asi-transition), gap var(--asi-transition);
}

.asi-needs-feature:hover {
	transform: translateY(-2px);
}

.asi-needs-feature:hover .asi-needs-feature__cta {
	background: color-mix(in srgb, var(--wp--preset--color--base) 28%, transparent);
	gap: 0.75rem;
}

[dir="rtl"] .asi-needs-feature__cta svg {
	transform: scaleX(-1);
}

/* Chip row — secondary needs as restrained pill-shaped links */
.asi-needs-chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	align-self: stretch;
}

.asi-needs-chip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.875rem 1.125rem;
	background: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	border-radius: 12px;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.3;
	transition: border-color var(--asi-transition), background var(--asi-transition), transform var(--asi-transition);
}

.asi-needs-chip:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 28%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 3%, var(--wp--preset--color--base));
	transform: translateX(2px);
}

[dir="rtl"] .asi-needs-chip:hover {
	transform: translateX(-2px);
}

.asi-needs-chip__title {
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.asi-needs-chip__arrow {
	flex: 0 0 auto;
	color: var(--wp--preset--color--accent-1);
	transition: transform var(--asi-transition);
}

[dir="rtl"] .asi-needs-chip__arrow {
	transform: scaleX(-1);
}

.asi-needs-chip:hover .asi-needs-chip__arrow {
	transform: translateX(2px);
}

[dir="rtl"] .asi-needs-chip:hover .asi-needs-chip__arrow {
	transform: scaleX(-1) translateX(2px);
}

@media (max-width: 768px) {
	.asi-needs {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.asi-needs-feature {
		min-block-size: 280px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.asi-needs-feature,
	.asi-needs-chip,
	.asi-needs-chip__arrow,
	.asi-needs-feature__cta {
		transition: none;
	}
	.asi-needs-feature:hover,
	.asi-needs-chip:hover {
		transform: none;
	}
}

/* ─── Testimonials ─── */
.asi-testimonial-card {
	transition: transform var(--asi-transition), box-shadow var(--asi-transition);
}

.asi-testimonial-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--asi-shadow-md);
}

/* Accent quote mark on testimonial cards */
.asi-testimonial-card::before {
	content: '\201C';
	display: block;
	font-size: 2rem;
	line-height: 1;
	color: var(--wp--preset--color--accent-1);
	opacity: 0.15;
	font-family: Georgia, serif;
	margin-block-end: -0.25rem;
}

img.asi-avatar {
	inline-size: 40px;
	block-size: 40px;
	border-radius: 100%;
	flex-shrink: 0;
	object-fit: cover;
}

.asi-testimonial-author {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* ─── Stats Bento Grid ─── */
.asi-stats-bento {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	grid-template-rows: 240px 240px;
	gap: 1rem;
}

.asi-stats-bento__item {
	border-radius: 16px;
	overflow: hidden;
	position: relative;
	background-color: #e2e8f0;
}

.asi-stats-bento__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.asi-stats-bento__item--tall {
	grid-row: 1 / 3;
}

.asi-stats-bento__item--overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.6);
}

.asi-stats-bento__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 1.5rem;
	color: #fff;
}

.asi-stats-bento__number {
	font-size: var(--asi-stat-number-size, clamp(2.25rem, 3.5vw, 3.0625rem));
	font-weight: 900;
	line-height: 1.1;
}

.asi-stats-bento__label {
	font-size: 0.9375rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin-block-start: 0.25rem;
}

.asi-stats-bento__desc {
	font-size: 0.8125rem;
	line-height: 1.4;
	opacity: 0.85;
	margin-block-start: 0.375rem;
}

@media (max-width: 781px) {
	.asi-stats-bento {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 220px 220px 220px;
		gap: 0.75rem;
	}

	.asi-stats-bento__item--tall {
		grid-row: auto;
		grid-column: 1 / 3;
	}

	.asi-stats-bento__item {
		min-height: 0;
	}
}

@media (max-width: 480px) {
	.asi-stats-bento {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(5, 200px);
	}

	.asi-stats-bento__item--tall {
		grid-column: auto;
	}
}

/* ─── Trust Icon Cards ─── */
.asi-trust-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
}

.asi-trust-card {
	position: relative;
	padding: 1.75rem 1.5rem 1.5rem;
	background: var(--wp--preset--color--base);
	border-radius: 16px;
	text-align: center;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	transition: box-shadow var(--asi-transition), transform var(--asi-transition), border-color var(--asi-transition);
}

.asi-trust-card:hover {
	box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 22%, transparent);
}

.asi-trust-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 72px;
	block-size: 72px;
	margin-block-end: 1rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 8%, transparent);
	color: var(--wp--preset--color--accent-1);
	transition: transform var(--asi-transition), background var(--asi-transition);
}

.asi-trust-card__icon svg {
	inline-size: 40px;
	block-size: 40px;
	display: block;
}

.asi-trust-card:hover .asi-trust-card__icon {
	transform: scale(1.06);
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 14%, transparent);
}

.asi-trust-card__number {
	font-size: clamp(1.5rem, 2.2vw, 2rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.5px;
	color: var(--wp--preset--color--contrast);
	margin-block-end: 0.375rem;
}

.asi-trust-card__label {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-block-end: 0.5rem;
}

.asi-trust-card__desc {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--accent-4);
}

/* Brand accent per card — label + icon share the same hue */
.asi-trust-card:nth-child(1) { --asi-trust-accent: var(--wp--preset--color--accent-1); }
.asi-trust-card:nth-child(2) { --asi-trust-accent: var(--wp--preset--color--warm-orange, #F59E0B); }
.asi-trust-card:nth-child(3) { --asi-trust-accent: var(--wp--preset--color--accent-2); }
.asi-trust-card:nth-child(4) { --asi-trust-accent: var(--wp--preset--color--accent-1); }

.asi-trust-card__label { color: var(--asi-trust-accent); }
.asi-trust-card__icon {
	background: color-mix(in srgb, var(--asi-trust-accent) 8%, transparent);
	color: var(--asi-trust-accent);
}
.asi-trust-card:hover .asi-trust-card__icon {
	background: color-mix(in srgb, var(--asi-trust-accent) 16%, transparent);
}

@media (max-width: 768px) {
	.asi-trust-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.asi-trust-cards {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.75rem;
	}

	.asi-trust-card {
		padding: 1.25rem 1rem;
	}

	.asi-trust-card__icon {
		inline-size: 60px;
		block-size: 60px;
		margin-block-end: 0.75rem;
	}

	.asi-trust-card__icon svg {
		inline-size: 32px;
		block-size: 32px;
	}
}

/* ─── §7 Stats — single-line strip (supersedes .asi-trust-cards for the homepage) ─── */
.asi-homepage-stats {
	padding-block: 2rem;
}

.asi-stats-strip {
	list-style: none;
	margin: 0;
	padding: 1rem 1.25rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: 0.5rem 1.5rem;
	background: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	border-radius: 100px;
}

.asi-stats-strip__item {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5rem;
	color: var(--wp--preset--color--contrast);
	font-size: 0.9375rem;
	line-height: 1.4;
}

.asi-stats-strip__item + .asi-stats-strip__item {
	padding-inline-start: 1.5rem;
	border-inline-start: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
}

.asi-stats-strip__num {
	font-weight: 700;
	font-size: 1.0625rem;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--accent-1);
	font-variant-numeric: tabular-nums;
}

.asi-stats-strip__sep {
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 35%, transparent);
}

.asi-stats-strip__label {
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 75%, transparent);
}

@media (max-width: 768px) {
	.asi-stats-strip {
		border-radius: 18px;
		padding: 0.875rem 1rem;
		gap: 0.5rem 1rem;
	}

	.asi-stats-strip__item + .asi-stats-strip__item {
		padding-inline-start: 1rem;
	}
}

@media (max-width: 480px) {
	.asi-stats-strip {
		flex-direction: column;
		align-items: stretch;
		border-radius: 16px;
	}

	.asi-stats-strip__item {
		justify-content: center;
	}

	.asi-stats-strip__item + .asi-stats-strip__item {
		padding-inline-start: 0;
		padding-block-start: 0.5rem;
		border-inline-start: 0;
		border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	}
}

/* Bulk orders mobile — now handled in front-page mobile overrides */

/* ─── FAQ Section ─── */
.asi-faq-sidebar {
	position: sticky;
	inset-block-start: 2rem;
	align-self: start;
}

.asi-faq-sidebar .wp-block-separator {
	border-color: color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
}

.asi-faq-item {
	background: var(--wp--preset--color--accent-3);
	border: none;
	border-radius: 12px;
	transition: box-shadow var(--asi-transition), background var(--asi-transition);
}

.asi-faq-item:hover {
	box-shadow: var(--asi-shadow-sm);
}

.asi-faq-item[open] {
	background: var(--wp--preset--color--base);
	box-shadow: 0 1px 4px rgba(26, 43, 60, 0.06), 0 6px 16px rgba(26, 43, 60, 0.05);
}

.asi-faq-item summary {
	cursor: pointer;
	font-family: var(--asi-font-family);
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	outline: none;
}

.asi-faq-item summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
	border-radius: 8px;
}

.asi-faq-item summary::-webkit-details-marker {
	display: none;
}

/* Smooth accordion — JS-driven height animation */
.asi-faq-item > p {
	overflow: hidden;
	transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
	            opacity 0.25s ease,
	            margin 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.asi-faq-item summary::after {
	content: '';
	display: block;
	inline-size: 10px;
	block-size: 10px;
	/* Physical borders for direction-agnostic chevron */
	border-right: 2px solid var(--wp--preset--color--accent-4);
	border-bottom: 2px solid var(--wp--preset--color--accent-4);
	transform: rotate(45deg);
	flex-shrink: 0;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.asi-faq-item[open] summary::after {
	transform: rotate(-135deg);
}

@media (max-width: 781px) {
	.asi-faq-sidebar {
		position: static;
	}
}

/* ─── FAQ Page ─── */
.asi-faq-hero {
	text-align: center;
}

.asi-faq-cta {
	border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
}

/* Category-grouped accordion. Each .asi-faq-group is a category bucket
   with an H2 heading + its accordion items. The first group sits flush
   against the top of the body container; subsequent groups get a top
   margin so the category boundary reads clearly. */
.asi-faq-group {
	margin-block-start: 3rem;
}

.asi-faq-group.is-first {
	margin-block-start: 0;
}

.asi-faq-category {
	font-size: clamp(1.375rem, 1.5vw + 0.75rem, 1.625rem);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.25;
	margin: 0 0 1.25rem;
	color: var(--wp--preset--color--contrast);
	padding-block-end: 0.625rem;
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	text-transform: none;
}

.asi-faq-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* Spacing inside each accordion item now that the inline padding from
   the old hard-coded markup is gone. */
.asi-faq-item {
	padding: 1.25rem 1.75rem;
}

.asi-faq-item summary {
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.5;
}

.asi-faq-item > p {
	margin-block-start: 1rem;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--wp--preset--color--accent-4);
}

.asi-faq-item > p + p {
	margin-block-start: 0.75rem;
}

.asi-faq-empty {
	text-align: center;
	color: var(--wp--preset--color--accent-4);
	margin: 2rem 0;
}

/* ─── Newsletter ─── */
.asi-homepage-newsletter {
	position: relative;
	overflow: hidden;
}

/* Subtle decorative accent */
.asi-homepage-newsletter::before {
	content: '';
	position: absolute;
	inset-block-start: -60px;
	inset-inline-end: -60px;
	inline-size: 180px;
	block-size: 180px;
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 6%, transparent);
	border-radius: 50%;
	pointer-events: none;
}

/* Force the search block + wrapper to consume the full column width
   so the pill lines up edge-to-edge with its container. */
.asi-homepage-newsletter .wp-block-search,
.asi-homepage-newsletter .wp-block-search__inside-wrapper {
	inline-size: 100%;
}

.asi-homepage-newsletter .wp-block-search__inside-wrapper {
	display: flex;
	align-items: center;
	gap: 0;
	padding: 5px;
	border-radius: var(--asi-radius-pill) !important;
	background: var(--wp--preset--color--base);
	box-shadow: var(--asi-shadow-sm);
}

.asi-homepage-newsletter .wp-block-search__input {
	flex: 1 1 auto;
	min-inline-size: 0;  /* allow shrinking below intrinsic width */
	inline-size: 100%;    /* belt-and-suspenders: force fill in case flex-grow is overridden */
	font-size: 0.9375rem;
	font-family: var(--asi-font-family);
	padding-block: 0.6rem;
	padding-inline: 1.25rem 0.75rem;
	min-block-size: 44px;
	border: 0;
	background: transparent;
	box-shadow: none;
	outline: none;
}

.asi-homepage-newsletter .wp-block-search__input:focus {
	outline: none;
	box-shadow: none;
}

.asi-homepage-newsletter .wp-block-search__button {
	flex: 0 0 auto;
	margin-inline-start: auto; /* pin to logical end even if input fails to grow */
	background: var(--wp--preset--color--accent-1) !important;
	color: var(--wp--preset--color--base) !important;
	border-radius: var(--asi-radius-pill) !important;
	font-weight: 600;
	font-size: 0.875rem;
	font-family: var(--asi-font-family);
	border: none;
	padding: 0.65rem 1.75rem;
	min-block-size: 40px; /* fits snugly inside 5px wrapper padding */
	transition: background var(--asi-transition), transform var(--asi-transition);
	cursor: pointer;
}

.asi-homepage-newsletter .wp-block-search__button:hover {
	background: #013A7A !important;
	transform: translateY(-1px);
}

@media (max-width: 781px) {
	.asi-newsletter-row {
		text-align: center;
	}
}

/* ─── Footer ─── */
.asi-footer {
	background: linear-gradient(135deg, #013A7A 0%, #012554 100%);
	color: var(--wp--preset--color--base);
}

/* Main grid: brand | shop | help | contact */
.asi-footer-main {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: 3rem;
	max-inline-size: 1280px;
	margin-inline: auto;
	padding-block-end: 3rem;
	border-block-end: 1px solid rgba(255, 255, 255, 0.1);
}

/* Brand column — unified vertical rhythm */
.asi-footer-brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}

.asi-footer-logo img {
	max-block-size: 36px;
	inline-size: auto;
	filter: brightness(0) invert(1);
}

.asi-footer-tagline {
	margin-block: 1rem 1rem;
	font-size: 0.875rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.6);
	max-inline-size: 280px;
}

/* "Our Story" featured link */
.asi-footer-story-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--accent-2);
	text-decoration: none;
	transition: color var(--asi-transition), gap var(--asi-transition);
}

.asi-footer-story-link:hover {
	color: #fff;
	gap: 0.75rem;
}

.asi-footer-story-link svg {
	transition: transform var(--asi-transition);
}

[dir="rtl"] .asi-footer-story-link svg,
:where([lang="ar"], .rtl) .asi-footer-story-link svg {
	transform: scaleX(-1);
}

/* Social icons */
.asi-footer-social {
	display: flex;
	gap: 0.75rem;
	margin-block-start: 1.125rem;
}

.asi-footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 36px;
	block-size: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.7);
	transition: background var(--asi-transition), color var(--asi-transition);
}

.asi-footer-social a:hover {
	background: var(--wp--preset--color--accent-1);
	color: #fff;
}

/* Link columns */
.asi-footer-col h3 {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: none;
	color: #fff;
	margin: 0 0 1.25rem;
}

.asi-footer-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.asi-footer-col li {
	margin-block-end: 0.625rem;
}

.asi-footer-col a {
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
	font-size: 0.875rem;
	transition: color var(--asi-transition);
}

.asi-footer-col a:hover {
	color: #fff;
}

/* Contact column with icons */
.asi-footer-contact li {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.6);
	line-height: 1.5;
}

.asi-footer-contact svg {
	flex-shrink: 0;
	margin-block-start: 2px;
	opacity: 0.5;
}

.asi-footer-contact a {
	color: rgba(255, 255, 255, 0.6);
}

.asi-footer-contact a:hover {
	color: #fff;
}

/* Bottom bar */
.asi-footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	max-inline-size: 1280px;
	margin-inline: auto;
	padding-block: 1.5rem;
}

.asi-footer-payments {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.asi-payment-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 6px;
	overflow: hidden;
	transition: border-color var(--asi-transition);
}

.asi-payment-icon:hover {
	border-color: rgba(255, 255, 255, 0.4);
}

.asi-payment-icon svg {
	display: block;
}

/* The MyFatoorah pill is wider than the 40×26 norm because the wordmark
 * doesn't compress legibly. Allow the wider variant to keep its native
 * width without breaking the row's gap rhythm. */
.asi-payment-icon--mf {
	min-inline-size: 56px;
}

.asi-payment-icon img {
	display: block;
	width: 40px;
	height: 26px;
	object-fit: contain;
}

.asi-copyright {
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.4);
	margin: 0;
}

/* Footer responsive */
@media (max-width: 768px) {
	.asi-footer-main {
		grid-template-columns: 1fr 1fr;
		gap: 2.5rem;
	}

	.asi-footer-brand {
		grid-column: 1 / -1;
	}

	.asi-footer-bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 480px) {
	.asi-footer-main {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.asi-footer-payments {
		flex-wrap: wrap;
	}
}

/* ─── Global heading case — sentence case everywhere ─── */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
	text-transform: none;
}

/* ─── Section visual rhythm ─── */
/* Alternating white/off-white already via backgroundColor, add subtle top separator */
.asi-homepage-categories,
.asi-homepage-shop-by-need {
	position: relative;
}

/* Soft gradient divider between sections */
.asi-homepage-featured::before,
.asi-homepage-testimonials::before {
	content: '';
	position: absolute;
	inset-block-start: 0;
	inset-inline: 10%;
	block-size: 1px;
	background: linear-gradient(to right, transparent, rgba(15, 23, 42, 0.08), transparent);
}

.asi-homepage-featured,
.asi-homepage-testimonials {
	position: relative;
}

/* Let the product slider go full width — heading keeps its own padding */
.asi-homepage-featured {
	padding-inline: 0 !important;
}

.asi-homepage-featured > .asi-section-heading,
.asi-homepage-featured > div:first-child {
	padding-inline: var(--wp--preset--spacing--50);
}

/* ─── Improved section heading style ─── */
.asi-homepage-featured h2,
.asi-homepage-categories h2,
.asi-homepage-shop-by-need h2,
.asi-homepage-testimonials h2,
.asi-category-bubbles h2 {
	position: relative;
}

/* ─── Scroll-triggered fade-in ─── */
/* Only apply when the browser supports scroll-driven animations
   (Safari < 18 ignores animation-timeline but still runs the keyframes
    as a regular timed animation, causing a visible jump on page load) */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.asi-homepage-categories,
		.asi-category-bubbles,
		.asi-homepage-featured,
		.asi-homepage-shop-by-need,
		.asi-homepage-testimonials,
		.asi-homepage-stats,
		.asi-homepage-faq,
		.asi-homepage-newsletter {
			animation: asi-fade-up 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
			animation-timeline: view();
			animation-range: entry 0% entry 30%;
		}

		@keyframes asi-fade-up {
			from {
				opacity: 0;
				transform: translateY(24px);
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}
	}
}

/* Horizontal scroll fade hints — now on .asi-cat-cards-row / .asi-testimonials-row in front-page mobile overrides */

/* ─── Improved category card image overlay ─── */
.asi-category-card-img::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 60%, rgba(15, 23, 42, 0.04) 100%);
	z-index: 1;
	pointer-events: none;
}

/* ─── Focus visible for keyboard nav ─── */
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible,
a:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
}

/* ─── Responsive ─── */

/* Tablet landscape */
@media (max-width: 1024px) {
	.asi-products ul.products li.product {
		flex: 0 0 calc((100% - 2rem) / 4.3) !important;
	}
	.asi-product-slider__arrow--prev { inset-inline-start: -12px; }
	.asi-product-slider__arrow--next { inset-inline-end: -12px; }

	/* Category bubbles — same 2-row slider; show 6 cols at a time on tablet */
	.asi-bubble-track {
		grid-auto-columns: calc((100% - 5 * 0.5rem) / 6);
	}

	.asi-bubble-icon img {
		width: 140px !important;
		height: 140px !important;
	}

	/* Reduce section padding on tablet */
	.asi-homepage-featured,
	.asi-homepage-categories,
	.asi-homepage-shop-by-need,
	.asi-homepage-testimonials,
	.asi-homepage-stats {
		padding-block: 3rem !important;
	}
}

@media (max-width: 768px) {
	.asi-products ul.products li.product {
		flex: 0 0 calc((100% - 1rem) / 2.3) !important;
	}
	.asi-product-slider__arrow {
		inline-size: 32px;
		block-size: 32px;
	}
	.asi-product-slider__arrow--prev { inset-inline-start: 4px; }
	.asi-product-slider__arrow--next { inset-inline-end: 4px; }

	.asi-hero-tabs {
		display: none;
	}

	/* Show mobile dot indicators */
	.asi-hero-dots {
		display: flex;
	}

	/* Compact trust bar on mobile — above dots */
	.asi-hero-trust-bar {
		gap: 1rem;
		padding: 0.625rem 1rem;
		inset-block-end: 2.5rem; /* above dot indicators */
		font-size: 0.75rem;
		background: rgba(0, 0, 0, 0.15);
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
		border-block-start: none;
	}

	.asi-trust-item span {
		font-size: 0.75rem;
	}

	.asi-trust-item svg {
		inline-size: 16px;
		block-size: 16px;
	}

	/* Brand bar mobile */
	.asi-brands-row {
		flex-direction: column;
		gap: 1rem;
		align-items: stretch;
	}

	.asi-brands-heading {
		font-size: 1.25rem;
		text-align: center;
	}

	.asi-brands-track {
		gap: 2rem;
		animation-duration: 20s;
	}

	.asi-brand-logo-item img {
		block-size: 40px;
	}

	/* Category/testimonial horizontal scroll — now handled by .asi-cat-cards-row / .asi-testimonials-row in front-page mobile overrides */

	.asi-bento-grid {
		grid-template-columns: 1fr;
	}

	.asi-bento-card-tall {
		block-size: auto;
		overflow: visible;
	}

	.asi-bento-row {
		grid-template-columns: 1fr 1fr;
	}

	/* Category bubbles — back to a wrapping 3-col grid on mobile */
	.asi-bubble-track {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: none;
		grid-auto-flow: row;
		grid-auto-columns: auto;
		column-gap: 0.25rem;
		row-gap: 1.25rem;
		padding: 1rem 0.25rem 0.5rem;
		overflow: visible;
		scroll-snap-type: none;
	}

	.asi-bubble-icon {
		inline-size: 80px;
		block-size: 80px;
	}

	.asi-bubble-icon img {
		width: 119px !important;
		height: 119px !important;
	}

	/* Reset Mega Savings span on mobile — it sits in the first cell */
	.asi-bubble-item--sale {
		grid-row: auto;
	}

	.asi-bubble-item--sale .asi-bubble-icon--sale {
		inline-size: 80px;
		block-size: 80px;
	}

	.asi-bubble-label {
		font-size: 0.6875rem;
	}

	.asi-bubble-arrow {
		display: none;
	}

	/* Hide items after 6th on mobile until expanded */
	.asi-bubble-track .asi-bubble-item:nth-child(n+7) {
		display: none;
	}
	.asi-bubbles-expanded .asi-bubble-track .asi-bubble-item:nth-child(n+7) {
		display: flex;
	}
	.asi-bubbles-expanded .asi-bubble-show-more {
		display: none;
	}

	/* ─── Mobile Hero Redesign ─── */
	.asi-homepage-hero {
		block-size: calc(100svh - 88px); /* svh prevents resize when iOS URL bar collapses */
	}

	.asi-hero-slide__content {
		block-size: calc(100svh - 88px);
		padding-block-start: 1.5rem;
		padding-block-end: 4rem; /* trust bar + dots */
		padding-inline: 1.25rem;
		justify-content: center;
	}

	.asi-hero-content {
		max-inline-size: 100%;
	}

	/* Stronger overlay for better text contrast on mobile */
	.asi-hero-slide__overlay {
		background: linear-gradient(
			180deg,
			rgba(15, 23, 42, 0.55) 0%,
			rgba(15, 23, 42, 0.7) 50%,
			rgba(15, 23, 42, 0.8) 100%
		) !important;
	}

	.asi-hero-slide__heading {
		font-size: clamp(1.75rem, 8vw, 2.25rem);
		letter-spacing: -0.5px;
		margin-block-end: 0.75rem;
		text-shadow:
			0 1px 4px rgba(0, 0, 0, 0.6),
			0 2px 16px rgba(0, 0, 0, 0.4);
	}

	.asi-hero-slide__text {
		font-size: 0.875rem;
		font-weight: 500;
		line-height: 1.6;
		margin-block-end: 1.5rem;
		text-shadow:
			0 1px 3px rgba(0, 0, 0, 0.7),
			0 2px 10px rgba(0, 0, 0, 0.4);
	}

	.asi-badge-pill {
		font-size: 0.75rem;
		padding: 0.375rem 1rem;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: rgba(255, 255, 255, 0.15);
	}

	.asi-hero-badge {
		margin-block-end: 1rem;
	}

	/* CTAs — stacked, centered */
	.asi-hero-slide__ctas {
		flex-direction: column;
		gap: 0.75rem;
		align-items: center;
	}

	.asi-hero-cta {
		padding: 0.875rem 2rem;
		font-size: 1.125rem;
		font-weight: 500;
		min-block-size: 0;
		display: inline-block;
	}

	.asi-hero-cta--ghost {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background-color: rgba(255, 255, 255, 0.1);
		border: 1px solid rgba(255, 255, 255, 0.25);
	}

	/* Trust bar — above dots */
	.asi-hero-trust-bar {
		flex-wrap: wrap;
		justify-content: center;
		inset-block-end: 2rem;
	}

	/* Dot indicators position */
	.asi-hero-dots {
		inset-block-end: 0.5rem;
	}

	/* ─── Mobile Header Redesign ─── */

	/* Main header bar — more breathing room */
	.asi-header-sticky {
		padding-block: 1rem !important;
	}

	/* Topbar compact — waqtee-style: centered announcement, no actions.
	   Strip the outer wp-block-group horizontal padding so the marquee
	   belt bleeds edge-to-edge on mobile (the pattern markup applies
	   --wp--preset--spacing--50 inline; override here). */
	.asi-topbar {
		padding-block: 0.5rem !important;
		padding-inline: 0 !important;
	}

	.asi-topbar > .wp-block-group {
		justify-content: center !important;
	}

	.asi-topbar-ticker {
		inline-size: 100%;
	}

	.asi-topbar p,
	.asi-topbar .asi-topbar-announcement {
		font-size: 0.8125rem !important;
		text-align: center;
		inline-size: 100%;
		margin: 0;
	}

	/* Lang + currency switchers move into the mobile menu */
	.asi-topbar-actions {
		display: none !important;
	}

	/* Show the dismiss button on mobile only */
	.asi-topbar-dismiss {
		display: inline-flex;
		position: absolute;
		inset-inline-end: 0.25rem;
		inset-block-start: 50%;
		transform: translateY(-50%);
	}

	.asi-topbar > .wp-block-group {
		position: relative;
	}

	/* Full-width on mobile — desktop max-width cap removed. Trailing
	   padding clears the absolute-positioned dismiss X; leading edge
	   bleeds to 0 so the marquee fills the bar. */
	.asi-topbar-ticker {
		padding-inline-start: 0;
		padding-inline-end: 2.25rem;
		max-inline-size: none;
		flex: 1 1 auto;
	}

	/* Dismissed: collapse the bar (mobile only) */
	html.asi-topbar-is-dismissed .asi-topbar {
		display: none !important;
	}

	/* Main header bar: [Hamburger] [Logo] ... [Icons] */
	.asi-header-left {
		gap: 0.75rem !important;
	}

	.asi-header-logo img {
		max-block-size: 36px;
	}

	/* Hide the full search bar on mobile — search in mobile menu */
	.asi-header-search {
		display: none !important;
	}

	/* Simplify icons — hide separators */
	.asi-header-sep {
		display: none;
	}

	.asi-header-icons {
		gap: 0.5rem;
	}

	/* Slightly smaller icons */
	.asi-header-icon svg {
		inline-size: 20px;
		block-size: 20px;
	}

	/* Smaller cart badge */
	.asi-cart-badge {
		min-inline-size: 16px;
		block-size: 16px;
		font-size: 0.625rem;
	}
}

@media (max-width: 480px) {
	/* Tighter section padding on small phones */
	.asi-homepage-featured,
	.asi-homepage-categories,
	.asi-homepage-shop-by-need,
	.asi-homepage-testimonials,
	.asi-homepage-stats,
	.asi-category-bubbles,
	.asi-homepage-newsletter {
		padding-block: 2rem !important;
		padding-inline: 1rem !important;
	}

	/* Section headings smaller on mobile */
	.asi-homepage-featured h2,
	.asi-homepage-categories h2,
	.asi-homepage-shop-by-need h2,
	.asi-homepage-testimonials h2,
	.asi-category-bubbles h2,
	.asi-homepage-stats h2 {
		font-size: 1.5rem !important;
		margin-block-end: 1.25rem !important;
	}

	.asi-bento-row {
		grid-template-columns: 1fr;
	}

	.asi-products ul.products li.product {
		flex: 0 0 calc((100% - 0.75rem) / 2.6) !important;
		min-inline-size: 112px;
		border-radius: 14px !important;
	}

	.asi-products ul.products li.product a img,
	.asi-products ul.products li.product .woocommerce-LoopProduct-link img {
		block-size: 195px !important;
		padding: 0.875rem 0.75rem;
		border-start-start-radius: 13px;
		border-start-end-radius: 13px;
	}

	.asi-products ul.products li.product .woocommerce-loop-product__title,
	.asi-products ul.products li.product h2 {
		font-size: 0.75rem !important;
		padding: 0.625rem 0.75rem 0.1875rem !important;
	}

	.asi-products ul.products li.product .price {
		padding: 0.1875rem 0.75rem 0.5rem !important;
		font-size: 1.0625rem !important;
		gap: 0.375rem;
	}

	.asi-products ul.products li.product .price del {
		font-size: 0.6875rem;
	}

	.asi-sale-badge {
		font-size: 0.625rem;
		padding: 0.25rem 0.5rem 0.3125rem 0.4375rem;
		inset-block-start: 0.625rem;
	}

	.asi-wishlist-btn {
		inset-block-start: 0.5rem;
		inset-inline-end: 0.5rem;
	}

	/* Category/testimonial/newsletter/stats mobile — now handled in front-page mobile overrides */

	.asi-product-slider__arrow {
		display: none;
	}

	/* Compact qty stepper on small mobile */
	.asi-qty-cart {
		padding: 0.375rem 0.5rem 0.5rem;
		gap: 0.375rem;
	}

	.asi-qty-btn {
		inline-size: 28px;
		block-size: 28px;
	}

	.asi-qty-value {
		inline-size: 22px;
		font-size: 0.75rem;
	}

	.asi-qty-stepper {
		border-radius: 6px;
	}

	.asi-cart-btn,
	.asi-cart-btn.add_to_cart_button,
	.asi-products ul.products li.product .asi-cart-btn,
	.asi-products ul.products li.product .asi-cart-btn.add_to_cart_button {
		inline-size: 34px !important;
		block-size: 34px !important;
		border-radius: 8px !important;
	}

	.asi-cart-btn svg {
		width: 16px;
		height: 16px;
	}

	.asi-wishlist-btn {
		--asi-wishlist-size: 28px;
	}

	.asi-rating-row {
		padding: 0 0.625rem;
	}
}

/* ═══════════════════════════════════════════════════════════════
 * ─── Single Product Page (Block Template) ───
 * WooCommerce uses wp-block-columns layout, NOT classic div.product.
 * All selectors scoped via body.single-product.
 * ═══════════════════════════════════════════════════════════════ */

/* Breadcrumb */
.asi-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem;
	padding: 1rem 0 0.5rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--accent-4);
	line-height: 1.4;
}

.asi-breadcrumb a {
	color: var(--wp--preset--color--accent-4);
	text-decoration: none;
	transition: color var(--asi-transition);
}

.asi-breadcrumb a:hover {
	color: var(--wp--preset--color--accent-1);
}

.asi-breadcrumb span:last-child {
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
}

.asi-bc-sep {
	flex-shrink: 0;
	opacity: 0.4;
}

[dir="rtl"] .asi-bc-sep {
	transform: scaleX(-1);
}

/* ─── Gallery ─── */
body.single-product .wp-block-woocommerce-product-image-gallery {
	position: relative;
}

/* Sticky gallery — when the summary column runs long (scent picker, tier
   deals), the photo rides along so variation swaps and the vial→bottle
   morph stay in view while the user is choosing. Only above the core
   columns stacking breakpoint (782px); stacked layouts put the photo on
   top and have no trailing whitespace to begin with.
   --asi-header-h is measured by single-product.js (sticky header height
   differs EN/AR and across breakpoints). align-self is required: flex
   columns stretch by default and a stretched child never sticks. */
@media (min-width: 782px) {
	body.single-product .wp-block-columns.alignwide
		> .wp-block-column:has(.wp-block-woocommerce-product-image-gallery) {
		position: sticky;
		inset-block-start: calc(var(--asi-header-h, 120px) + 1rem);
		align-self: flex-start;
	}
}

body.single-product .woocommerce-product-gallery img {
	border-radius: var(--asi-radius);
	background: var(--wp--preset--color--accent-3);
	object-fit: contain;
}

body.single-product .woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	gap: 0.5rem;
	margin-block-start: 0.75rem;
	padding: 0;
	list-style: none;
}

body.single-product .woocommerce-product-gallery .flex-control-thumbs li {
	flex: 0 0 72px;
}

body.single-product .woocommerce-product-gallery .flex-control-thumbs li img {
	border-radius: 8px;
	border: 2px solid transparent;
	transition: border-color var(--asi-transition);
	cursor: pointer;
	block-size: 72px;
	inline-size: 72px;
	object-fit: contain;
	background: var(--wp--preset--color--accent-3);
}

body.single-product .woocommerce-product-gallery .flex-control-thumbs li img:hover,
body.single-product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
	border-color: var(--wp--preset--color--accent-1);
}

/* Hide ALL sale badges on single product — the sale price is enough */
body.single-product .wp-block-woocommerce-product-sale-badge,
body.single-product span.onsale,
body.single-product .asi-single-sale-badge {
	display: none !important;
}

/* Hide block product meta (SKU + category below cart) — our hooks show these */
body.single-product .wp-block-woocommerce-product-meta,
body.single-product .product_meta {
	display: none !important;
}

/* Perfect Brands plugin renders its own brand logo section — we show
   the brand in our compact meta-row pill instead. */
body.single-product .pwb-single-product-brands {
	display: none !important;
}

/* ─── Product Title (block: wp-block-post-title) ─── */
body.single-product h1.wp-block-post-title {
	font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
	font-weight: 700 !important;
	letter-spacing: -0.3px;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
	margin-block-end: 0.5rem !important;
}

/* ─── Price (block: wp-block-woocommerce-product-price) ─── */
body.single-product .wp-block-woocommerce-product-price {
	margin-block-end: 0.75rem;
}

body.single-product .wp-block-woocommerce-product-price .wc-block-components-product-price {
	font-size: 1.75rem !important;
	font-weight: 700 !important;
	color: var(--wp--preset--color--contrast) !important;
	font-family: var(--asi-font-family);
}

body.single-product .wp-block-woocommerce-product-price .wc-block-components-product-price del {
	font-size: 1.125rem;
	font-weight: 400;
	color: var(--wp--preset--color--accent-4) !important;
	opacity: 0.6;
}

body.single-product .wp-block-woocommerce-product-price .wc-block-components-product-price ins {
	text-decoration: none;
	color: var(--wp--preset--color--warm-orange, #F59E0B) !important;
}

/* Hide the duplicate classic price rendered by hooks */
body.single-product .wp-block-column > p.price {
	display: none !important;
}

/* Hide the block-rendered excerpt (we use our asi-sp-short-desc instead) */
body.single-product .wp-block-post-excerpt {
	display: none !important;
}

/* SKU meta row (brand identity now lives in .asi-sp-masthead above the H1). */
.asi-sp-meta-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-block-end: 0.75rem;
	font-size: 0.8125rem;
}

.asi-sp-sku {
	color: var(--wp--preset--color--accent-4);
}

/* ─── Brand masthead (above the H1 on single product pages) ───
   Magazine-style strip: [wordmark] │ [name + tagline] ──── [View all →]
   The first three columns size to their content so the cluster hugs
   the divider; the 1fr spacer absorbs leftover space and pushes the
   CTA to the trailing edge. Whole strip is the click target.
   `text-align: start` defeats the H1 wrapper's inherited centering so
   the copy aligns with the rule (the bug that put it floating in the
   middle of the row). */
.asi-sp-masthead {
	display: grid;
	grid-template-columns: auto 1px auto;
	align-items: center;
	justify-content: start;
	column-gap: 0.75rem;
	padding-block: 0.75rem;
	border-block-end: 1px solid var(--wp--preset--color--accent-6);
	text-decoration: none;
	text-align: start;
	color: var(--wp--preset--color--contrast);
	margin-block-end: 1.5rem;
	transition: border-color 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.asi-sp-masthead:hover {
	border-block-end-color: var(--wp--preset--color--accent-1);
}

/* Keyboard focus — outline matches the brand-blue hover state and sits
   well clear of the strip so it doesn't fight the hairline. */
.asi-sp-masthead:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 4px;
	border-radius: 4px;
}

.asi-sp-masthead__stage {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

/* Explicit pixel block-size on the image itself — `block-size: 100%` against
   a flex parent with `align-items: center` doesn't reliably resolve, so the
   image was falling back to intrinsic size (141×100) and overflowing.
   `max-block-size` is the belt-and-braces guard against any !important rule
   from WP/WC core trying to set height: auto. */
.asi-sp-masthead__mark {
	block-size: 28px;
	max-block-size: 28px;
	inline-size: auto;
	max-inline-size: 120px;
	object-fit: contain;
	display: block;
}

/* Fallback for brands without a logo image — name as uppercase wordmark. */
.asi-sp-masthead__fallback {
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	line-height: 1;
}

.asi-sp-masthead__rule {
	background: var(--wp--preset--color--accent-6);
	inline-size: 1px;
	block-size: 28px;
	display: block;
	transition: background-color 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Rule warms to brand blue on hover, in concert with the bottom hairline. */
.asi-sp-masthead:hover .asi-sp-masthead__rule {
	background: var(--wp--preset--color--accent-1);
}

.asi-sp-masthead__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-self: start;
	gap: 0.125rem;
	min-inline-size: 0;
	max-inline-size: 320px;
	text-align: start;
}

.asi-sp-masthead__name {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--wp--preset--color--contrast);
	text-align: start;
	align-self: flex-start;
}

.asi-sp-masthead__tagline {
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.3;
	color: var(--wp--preset--color--accent-4);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: start;
	align-self: flex-start;
}


/* Entry choreography — masthead drifts up on first paint via @starting-style.
   Browsers without @starting-style support skip the animation; the strip
   is fully formed either way. */
@supports (animation-timeline: scroll()) {
	.asi-sp-masthead {
		animation: asi-sp-masthead-in 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
	}
	@keyframes asi-sp-masthead-in {
		from { opacity: 0; transform: translateY(8px); }
		to   { opacity: 1; transform: translateY(0); }
	}
}

/* Mobile — drop the divider (the row break replaces it implicitly) and
   tighten padding. The cluster reduces to [logo] [name + tagline]. */
@media (max-inline-size: 640px) {
	.asi-sp-masthead {
		grid-template-columns: auto 1fr;
		column-gap: 0.875rem;
		padding-block: 0.625rem;
	}
	.asi-sp-masthead__mark  { block-size: 22px; max-block-size: 22px; }
	.asi-sp-masthead__rule  { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.asi-sp-masthead,
	.asi-sp-masthead * {
		animation: none !important;
		transition: none !important;
	}
}

/* ─── Single product page — left-align the right column ───
   A wpcode "Title Layout" snippet sets `text-align: center` on
   `.is-layout-constrained > .alignwide`, which cascades into the product
   title, price, and add-to-cart row in the right column. We undo that
   cascade scoped to single-product pages so the layout reads as a
   left-anchored editorial column instead of centered. */
body.single-product .wp-block-columns.alignwide,
body.single-product .wp-block-columns.alignwide h1.wp-block-post-title,
body.single-product .wp-block-columns.alignwide .wp-block-woocommerce-product-price,
body.single-product .wp-block-columns.alignwide .wc-block-components-product-price,
body.single-product .wp-block-columns.alignwide .wp-block-woocommerce-add-to-cart-form {
	text-align: start;
}

/* ─── Short Description (Key Features) ─── */
.asi-sp-short-desc {
	background: var(--wp--preset--color--accent-3);
	border-radius: 12px;
	padding: 1.25rem 1.5rem;
	margin-block-end: 1.25rem;
	border-inline-start: 3px solid var(--wp--preset--color--accent-1);
}

.asi-sp-short-desc__title {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--accent-1);
	margin-block-end: 0.625rem;
}

.asi-sp-short-desc__body {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--wp--preset--color--contrast);
}

.asi-sp-short-desc__body p {
	margin-block-end: 0.375rem;
}

.asi-sp-short-desc__body p:last-child {
	margin-block-end: 0;
}

.asi-sp-short-desc__body ul,
.asi-sp-short-desc__body ol {
	padding-inline-start: 1.25rem;
	margin: 0;
}

.asi-sp-short-desc__body li {
	margin-block-end: 0.25rem;
	padding-inline-start: 0.25rem;
}

.asi-sp-short-desc__body li::marker {
	color: var(--wp--preset--color--accent-2);
}

/* Benefits variant — structured benefit cards inside the summary area */
.asi-sp-short-desc--benefits {
	background: none;
	border-inline-start: none;
	padding: 0;
	margin-block-end: 1rem;
}

.asi-sp-short-desc--benefits .asi-sp-short-desc__title {
	margin-block-end: 0.75rem;
}

.asi-sp-benefits-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
}

.asi-sp-benefit-card {
	display: flex;
	gap: 0.55rem;
	padding: 0.6rem 0.75rem;
	background: var(--wp--preset--color--accent-3);
	border-radius: 10px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 5%, transparent);
	min-inline-size: 0;
}

.asi-sp-benefit-card__icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 20px;
	block-size: 20px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--accent-2) 15%, transparent);
	color: var(--wp--preset--color--accent-2);
	margin-block-start: 2px;
}

.asi-sp-benefit-card__icon svg {
	inline-size: 12px;
	block-size: 12px;
}

.asi-sp-benefit-card__text {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-inline-size: 0;
}

.asi-sp-benefit-card__text strong {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	line-height: 1.3;
	letter-spacing: 0.01em;
}

.asi-sp-benefit-card__text span {
	font-size: 0.74rem;
	line-height: 1.4;
	color: var(--wp--preset--color--accent-4);
}

@media (max-width: 720px) {
	.asi-sp-benefits-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ─── Add to Cart + Qty Stepper (block: wc-block-add-to-cart-form) ─── */
body.single-product .wc-block-add-to-cart-form form.cart {
	display: flex !important;
	align-items: center !important;
	gap: 0.75rem;
	margin-block-end: 0.5rem;
	padding-block: 0.5rem;
	grid-template-columns: unset !important;
}

/* Qty stepper wrapper (injected by JS) */
.asi-sp-qty-stepper {
	display: flex;
	align-items: center;
	border: 1px solid rgba(15, 23, 42, 0.15);
	border-radius: 10px;
	overflow: hidden;
	background: var(--wp--preset--color--accent-3);
	flex-shrink: 0;
	block-size: 44px;
	box-sizing: border-box;
}

.asi-sp-qty-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 36px;
	block-size: 100%;
	border: none;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	padding: 0;
	transition: background-color 150ms ease, color 150ms ease;
	touch-action: manipulation;
}

.asi-sp-qty-btn:hover {
	background: rgba(15, 23, 42, 0.06);
}

.asi-sp-qty-btn:active {
	background: rgba(15, 23, 42, 0.1);
}

.asi-sp-qty-btn.is-disabled {
	color: var(--wp--preset--color--accent-4);
	opacity: 0.4;
	cursor: default;
}

.asi-sp-qty-stepper .qty {
	inline-size: 40px;
	block-size: 100%;
	border: none;
	border-inline: 1px solid rgba(15, 23, 42, 0.08);
	background: transparent;
	text-align: center;
	font-family: var(--asi-font-family);
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}

.asi-sp-qty-stepper .qty::-webkit-inner-spin-button,
.asi-sp-qty-stepper .qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.asi-sp-qty-stepper .qty:focus {
	outline: none;
	background: rgba(1, 85, 183, 0.04);
}

/* Hide the original .quantity wrapper if JS hasn't replaced it yet */
body.single-product .wc-block-add-to-cart-form form.cart .quantity .qty {
	inline-size: 52px;
	block-size: 44px;
	border: 1px solid rgba(15, 23, 42, 0.15);
	border-radius: 10px;
	background: var(--wp--preset--color--accent-3);
	text-align: center;
	font-family: var(--asi-font-family);
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}

body.single-product .wc-block-add-to-cart-form form.cart .quantity .qty::-webkit-inner-spin-button,
body.single-product .wc-block-add-to-cart-form form.cart .quantity .qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Add to cart button */
body.single-product .wc-block-add-to-cart-form form.cart .single_add_to_cart_button {
	position: relative;
	block-size: 44px;
	border: none;
	border-radius: var(--asi-radius-pill);
	background: var(--asi-gradient-blue);
	color: #fff;
	font-family: var(--asi-font-family);
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	/* Split: press feedback (transform) is tight at 110ms, hover ambient at 220ms. */
	transition:
		box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
		background 220ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 110ms cubic-bezier(0.22, 1, 0.36, 1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	/* A CTA must never wrap. The AR label "إضافة إلى السلة" is wider than the
	   EN "Add to cart"; without this it wrapped to two lines once the flex row
	   squeezed the button on mobile. */
	white-space: nowrap;
	letter-spacing: 0.01em;
	padding-inline: 2.5rem;
}

body.single-product .wc-block-add-to-cart-form form.cart .single_add_to_cart_button:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(1, 85, 183, 0.35);
}

body.single-product .wc-block-add-to-cart-form form.cart .single_add_to_cart_button:active:not(.is-loading):not(.is-success):not(.is-error) {
	transform: scale(0.97);
	box-shadow: 0 2px 8px rgba(1, 85, 183, 0.25);
}

body.single-product .wc-block-add-to-cart-form form.cart .single_add_to_cart_button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
}

/* ─── PDP add-to-cart state machine (matches listing button states) ─── */

/* Loading: lock interaction, mute the label, render an inline spinner */
body.single-product .wc-block-add-to-cart-form form.cart .single_add_to_cart_button.is-loading {
	pointer-events: none;
	color: transparent;
}

body.single-product .wc-block-add-to-cart-form form.cart .single_add_to_cart_button.is-loading::before {
	content: '';
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: 18px;
	block-size: 18px;
	margin-block-start: -9px;
	margin-inline-start: -9px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-block-start-color: #fff;
	border-radius: 50%;
	animation: asi-cart-spin 720ms linear infinite;
}

/* Success: brand green confirmation. Decisive ease-out, no overshoot.
   The label swap to "Added to cart" + the gradient shift + the toast +
   the cart-icon pulse together give plenty of acknowledgment. */
body.single-product .wc-block-add-to-cart-form form.cart .single_add_to_cart_button.is-success {
	background: var(--asi-gradient-green) !important;
	box-shadow: 0 8px 24px rgba(114, 185, 74, 0.32);
	animation: asi-cart-success 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Error: warm orange + asymmetric shake. */
body.single-product .wc-block-add-to-cart-form form.cart .single_add_to_cart_button.is-error {
	background: var(--asi-gradient-orange) !important;
	animation: asi-cart-shake 320ms cubic-bezier(0.36, 0, 0.66, -0.56);
}

/* Reduced motion — kill the animations, keep the state colors */
@media (prefers-reduced-motion: reduce) {
	body.single-product .wc-block-add-to-cart-form form.cart .single_add_to_cart_button.is-success,
	body.single-product .wc-block-add-to-cart-form form.cart .single_add_to_cart_button.is-error {
		animation: none;
	}
	body.single-product .wc-block-add-to-cart-form form.cart .single_add_to_cart_button:hover,
	body.single-product .wc-block-add-to-cart-form form.cart .single_add_to_cart_button:active:not(.is-loading):not(.is-success):not(.is-error) {
		transform: none;
	}
	body.single-product .wc-block-add-to-cart-form form.cart .single_add_to_cart_button.is-loading::before {
		animation-duration: 0ms;
	}
}

/* Mobile: the qty stepper is fixed-width (flex-shrink: 0), so on a narrow row
   the 2.5rem button padding left no room for a wider label and the button
   shrank below its single-line width. Let the button grow to fill the row
   beside the stepper and trim the padding — together with `white-space: nowrap`
   above, the label (EN or AR) stays on one line down to the smallest phones. */
@media (max-width: 720px) {
	body.single-product .wc-block-add-to-cart-form form.cart .single_add_to_cart_button {
		flex: 1 1 auto;
		padding-inline: 1.25rem;
	}
}

/* ─── Variable products (qty + CTA layout) ───────────────────────────────
   The WC "Add to Cart with Options" block lays BOTH `form.cart` AND
   `.variations_button` (= `.woocommerce-variation-add-to-cart`) on a 3-column
   grid. The simple-product rule above only re-lays `form.cart`; the scent-picker
   re-lays the rest — but only under `.asi-scent-picker-bound`, and its stylesheet
   only loads when the picker actually renders.

   A variable product the picker skips (no variation attribute, or < 2 values)
   falls back to WC's raw grid: the (here empty) `<table class="variations">`
   still claims the flex row and shoves the controls to the inline-end, while the
   qty stepper — renamed off `.quantity` by our JS, so WC's
   `.variations_button>:not(.quantity){grid-column:1/-1}` now catches it — is
   stretched full-width above the button. That's the stacked, right-shifted break.

   Mirror the scent-picker's column-form + flex-row layout for the general case,
   but keep the native <select> visible (it's the only way to pick a variant with
   no picker). Scoped to `.variations_form` so simple products are untouched. */
body.single-product .wc-block-add-to-cart-form form.variations_form.cart {
	display: flex !important;          /* beat both the simple-product row and WC's grid */
	flex-direction: column;
	align-items: stretch !important;   /* override simple-product `align-items: center` */
	gap: 0;
}

body.single-product .wc-block-add-to-cart-form form.variations_form.cart .single_variation_wrap {
	inline-size: 100%;
	margin-block-start: 0.5rem;
}

/* The real controls row: qty stepper + Add-to-cart, matching the simple layout. */
body.single-product .wc-block-add-to-cart-form form.variations_form.cart .woocommerce-variation-add-to-cart {
	display: flex !important;          /* beat WC's `.variations_button { display: grid }` */
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

/* ─── Trust Badges ─── */
.asi-sp-trust {
	display: flex;
	gap: 1rem;
	padding: 1rem 0;
	margin-block-end: 0.5rem;
	border-block-start: 1px solid rgba(15, 23, 42, 0.08);
}

.asi-sp-trust__item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--accent-4);
}

.asi-sp-trust__item svg {
	flex-shrink: 0;
	color: var(--wp--preset--color--accent-2);
}

/* ─── Product Tabs (block: wp-block-woocommerce-product-details) ─── */
body.single-product .wp-block-woocommerce-product-details {
	margin-block-start: 2rem;
	padding-block-start: 2rem;
	border-block-start: 1px solid rgba(15, 23, 42, 0.08);
}

body.single-product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 0;
	list-style: none;
	padding: 0 !important;
	margin: 0 0 0 0 !important;
	border-block-end: 2px solid rgba(15, 23, 42, 0.08);
	overflow: visible !important;
}

body.single-product .woocommerce-tabs ul.tabs::before {
	display: none !important;
}

body.single-product .woocommerce-tabs ul.tabs li {
	background: none !important;
	border: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	position: relative;
}

body.single-product .woocommerce-tabs ul.tabs li::before,
body.single-product .woocommerce-tabs ul.tabs li::after {
	display: none !important;
}

body.single-product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0.875rem 1.5rem;
	font-family: var(--asi-font-family);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--wp--preset--color--accent-4);
	text-decoration: none;
	transition: color var(--asi-transition);
	position: relative;
	white-space: nowrap;
}

body.single-product .woocommerce-tabs ul.tabs li a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: -2px;
	block-size: 2px;
	background: transparent;
	border-radius: 2px 2px 0 0;
	transition: background var(--asi-transition);
}

body.single-product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--wp--preset--color--contrast);
}

body.single-product .woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--accent-1);
	font-weight: 600;
}

body.single-product .woocommerce-tabs ul.tabs li.active a::after {
	background: var(--wp--preset--color--accent-1);
}

/* Tab Content Panels */
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
	padding: 2rem 0 1rem !important;
	margin: 0 !important;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
}

/* Long description typography */
body.single-product .woocommerce-Tabs-panel--description {
	font-size: 1rem;
	line-height: 1.75;
	color: var(--wp--preset--color--contrast);
	max-inline-size: 860px;
	text-align: start;
}

/* Undo the wpcode "Title Layout" `text-align: center` cascade for the
   product tabs region — description, specs, reviews — so body copy reads
   left-aligned in LTR / right-aligned in RTL. */
body.single-product .woocommerce-tabs,
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel,
body.single-product .woocommerce-tabs .asi-sp-desc,
body.single-product .woocommerce-tabs .asi-sp-desc__overview,
body.single-product .woocommerce-tabs .asi-sp-desc__overview p {
	text-align: start;
}

body.single-product .woocommerce-Tabs-panel--description h2,
body.single-product .woocommerce-Tabs-panel--description h3,
body.single-product .woocommerce-Tabs-panel--description h4 {
	font-weight: 600;
	letter-spacing: -0.2px;
	margin-block-start: 1.5rem;
	margin-block-end: 0.75rem;
}

body.single-product .woocommerce-Tabs-panel--description h2 {
	font-size: 1.375rem;
}

body.single-product .woocommerce-Tabs-panel--description h3 {
	font-size: 1.125rem;
}

body.single-product .woocommerce-Tabs-panel--description p {
	margin-block-end: 1rem;
	color: rgba(15, 23, 42, 0.85);
}

body.single-product .woocommerce-Tabs-panel--description ul,
body.single-product .woocommerce-Tabs-panel--description ol {
	padding-inline-start: 1.5rem;
	margin-block-end: 1.25rem;
}

body.single-product .woocommerce-Tabs-panel--description li {
	margin-block-end: 0.5rem;
	padding-inline-start: 0.25rem;
	line-height: 1.6;
}

body.single-product .woocommerce-Tabs-panel--description li::marker {
	color: var(--wp--preset--color--accent-2);
}

body.single-product .woocommerce-Tabs-panel--description img {
	border-radius: 12px;
	margin-block: 1rem;
}

body.single-product .woocommerce-Tabs-panel--description blockquote {
	border-inline-start: 3px solid var(--wp--preset--color--accent-1);
	padding: 1rem 1.25rem;
	margin-inline-start: 0;
	margin-block: 1.25rem;
	background: var(--wp--preset--color--accent-3);
	border-radius: 0 8px 8px 0;
	font-style: italic;
	color: var(--wp--preset--color--accent-4);
}

/* ── Structured description (asi_parse_product_content output) ──────── */
.asi-sp-desc {
	max-inline-size: 860px;
}

/* Per-variation swap: brief fade between scent selections. */
.asi-sp-desc [data-asi-desc-slot] {
	transition: opacity 180ms ease;
}
.asi-sp-desc.is-swapping [data-asi-desc-slot] {
	opacity: 0.35;
}
@media (prefers-reduced-motion: reduce) {
	.asi-sp-desc [data-asi-desc-slot] { transition: none; }
}

/* Overview */
.asi-sp-desc__overview {
	font-size: 1rem;
	line-height: 1.75;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 88%, transparent);
	margin-block-end: 2rem;
}

.asi-sp-desc__overview p {
	margin-block-end: 0.85rem;
}

.asi-sp-desc__overview p:last-child {
	margin-block-end: 0;
}

/* Guides row — Where to Use + How to Use side by side */
.asi-sp-desc__guides {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.25rem;
	margin-block-end: 2rem;
}

.asi-sp-desc__guide-block {
	background: var(--wp--preset--color--accent-3);
	border-radius: 14px;
	padding: 1.25rem 1.5rem;
}

.asi-sp-desc__guide-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.85rem;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--accent-4);
}

.asi-sp-desc__guide-title svg {
	color: var(--wp--preset--color--accent-1);
	flex-shrink: 0;
}

/* Usage chips — horizontal wrap */
.asi-sp-desc__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.asi-sp-desc__chip {
	display: inline-flex;
	align-items: center;
	padding: 0.35rem 0.85rem;
	font-size: 0.82rem;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	border-radius: 999px;
	line-height: 1.3;
}

/* Directions as numbered steps */
.asi-sp-desc__steps {
	list-style: none;
	counter-reset: step;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.asi-sp-desc__steps li {
	counter-increment: step;
	display: flex;
	align-items: baseline;
	gap: 0.65rem;
	font-size: 0.9rem;
	line-height: 1.55;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 85%, transparent);
}

.asi-sp-desc__steps li::before {
	content: counter(step);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 22px;
	block-size: 22px;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--wp--preset--color--accent-1);
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 10%, transparent);
	border-radius: 50%;
	line-height: 1;
}

/* Key Benefits grid */
.asi-sp-desc__benefits-title {
	margin: 0 0 1rem;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--accent-4);
}

.asi-sp-desc__benefits-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.85rem;
}

.asi-sp-desc__benefit {
	display: flex;
	gap: 0.75rem;
	padding: 1rem 1.15rem;
	background: var(--wp--preset--color--accent-3);
	border-radius: 12px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 5%, transparent);
}

.asi-sp-desc__benefit-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 28px;
	block-size: 28px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--accent-2) 15%, transparent);
	color: var(--wp--preset--color--accent-2);
	margin-block-start: 1px;
}

.asi-sp-desc__benefit-text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-inline-size: 0;
}

.asi-sp-desc__benefit-text strong {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	line-height: 1.3;
}

.asi-sp-desc__benefit-text span {
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--wp--preset--color--accent-4);
}

@media (max-width: 720px) {
	.asi-sp-desc__guides {
		grid-template-columns: minmax(0, 1fr);
	}

	.asi-sp-desc__benefits-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ─────────────────────────────────────────────────────────────────────
 * Product description — RTL hardening + Tajawal AR refinement
 *
 * Three bugs reported on /ar/ product pages (May 2026 content sheet,
 * row 46): step numbers landed on the wrong side, overview paragraphs
 * read as left-aligned, guide-title rows mis-positioned. Root cause is
 * the `entry-content` + WC-bundled cascade leaking `text-align: left`
 * onto description sub-elements, and a stray direction reset on the
 * tab panel breaking the RTL inherited from <html dir="rtl">.
 *
 * Strategy: re-assert logical alignment at the right specificity, force
 * direction inheritance on every flex/grid surface inside the
 * description, then tune Tajawal-specific leading + sizing where
 * Poppins-pitched values read cramped in Arabic.
 * ─────────────────────────────────────────────────────────────────── */

body.single-product .woocommerce-Tabs-panel--description,
body.single-product .woocommerce-Tabs-panel--description .asi-sp-desc,
body.single-product .woocommerce-Tabs-panel--description p,
body.single-product .woocommerce-Tabs-panel--description h2,
body.single-product .woocommerce-Tabs-panel--description h3,
body.single-product .woocommerce-Tabs-panel--description h4,
body.single-product .woocommerce-Tabs-panel--description li,
body.single-product .woocommerce-Tabs-panel--description .asi-sp-desc__benefit-text strong,
body.single-product .woocommerce-Tabs-panel--description .asi-sp-desc__benefit-text span {
	text-align: start;
}

.asi-sp-desc,
.asi-sp-desc__overview,
.asi-sp-desc__guides,
.asi-sp-desc__guide-block,
.asi-sp-desc__guide-title,
.asi-sp-desc__chips,
.asi-sp-desc__steps,
.asi-sp-desc__steps li,
.asi-sp-desc__benefits-grid,
.asi-sp-desc__benefit,
.asi-sp-desc__benefit-text {
	direction: inherit;
}

/* Tajawal AR tuning */
:lang(ar) .asi-sp-desc__overview {
	line-height: 1.85;
	letter-spacing: 0;
}

:lang(ar) .asi-sp-desc__guide-title {
	/* Arabic has no casing — drop the uppercase + tracking eyebrow
	   treatment and rely on weight + color for hierarchy. */
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.85rem;
}

:lang(ar) .asi-sp-desc__steps li {
	line-height: 1.7;
	font-size: 0.95rem;
}

:lang(ar) .asi-sp-desc__chip {
	font-size: 0.88rem;
	line-height: 1.5;
	padding-block: 0.4rem;
}

:lang(ar) .asi-sp-desc__benefit-text strong {
	line-height: 1.5;
}

:lang(ar) .asi-sp-desc__benefit-text span {
	line-height: 1.7;
}

/* Specifications tab table */
body.single-product .woocommerce-Tabs-panel--additional_information {
	max-inline-size: 700px;
}

body.single-product .woocommerce-Tabs-panel--additional_information table {
	border-collapse: separate;
	border-spacing: 0;
	inline-size: 100%;
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 12px;
	overflow: hidden;
}

body.single-product .woocommerce-Tabs-panel--additional_information table th,
body.single-product .woocommerce-Tabs-panel--additional_information table td {
	padding: 0.875rem 1.25rem;
	text-align: start;
	font-size: 0.9375rem;
	border-block-end: 1px solid rgba(15, 23, 42, 0.06);
}

body.single-product .woocommerce-Tabs-panel--additional_information table th {
	background: var(--wp--preset--color--accent-3);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	inline-size: 35%;
}

body.single-product .woocommerce-Tabs-panel--additional_information table td {
	color: rgba(15, 23, 42, 0.8);
}

body.single-product .woocommerce-Tabs-panel--additional_information table tr:last-child th,
body.single-product .woocommerce-Tabs-panel--additional_information table tr:last-child td {
	border-block-end: none;
}

/* Reviews tab */
body.single-product .woocommerce-Tabs-panel--reviews {
	max-inline-size: 860px;
}

body.single-product #reviews #comments ol.commentlist {
	list-style: none;
	padding: 0;
	margin: 0;
}

body.single-product #reviews #comments ol.commentlist li {
	padding: 1.25rem 0;
	border-block-end: 1px solid rgba(15, 23, 42, 0.06);
}

body.single-product #reviews #comments ol.commentlist li:last-child {
	border-block-end: none;
}

body.single-product #reviews #comments ol.commentlist li .comment-text {
	margin: 0;
	padding: 0;
	border: none;
}

body.single-product #reviews #comments ol.commentlist li .meta {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--accent-4);
	margin-block-end: 0.5rem;
}

body.single-product #reviews #review_form #respond .comment-form-rating label {
	font-weight: 600;
}

body.single-product #reviews #review_form #respond textarea {
	border-radius: 10px;
	border: 1px solid rgba(15, 23, 42, 0.15);
	padding: 0.875rem 1rem;
	font-family: var(--asi-font-family);
	font-size: 0.9375rem;
	transition: border-color var(--asi-transition);
}

body.single-product #reviews #review_form #respond textarea:focus {
	border-color: var(--wp--preset--color--accent-1);
	outline: none;
	box-shadow: 0 0 0 3px rgba(1, 85, 183, 0.1);
}

/* ─── Footer Meta (categories, tags) ─── */
.asi-sp-footer-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	padding: 1rem 0 0.5rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--accent-4);
	border-block-start: 1px solid rgba(15, 23, 42, 0.06);
}

.asi-sp-footer-meta__label {
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.asi-sp-footer-meta a {
	color: var(--wp--preset--color--accent-1);
	text-decoration: none;
	transition: opacity var(--asi-transition);
}

.asi-sp-footer-meta a:hover {
	opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════════
 * ─── Related Products — Editorial Shelf (PDP) ───
 *
 * Shares visual DNA with the cart cross-sells shelf (see § "Cart
 * Cross-Sells — Editorial Marketplace Shelf"): bare float cards,
 * price-first typography, ghost pill that morphs to an outlined
 * "in cart" state. The two modules intentionally speak the same
 * language so returning customers feel continuity between product
 * discovery (PDP) and basket confirmation (cart).
 *
 * Differences from the cart shelf:
 *   - Own top-level section (not embedded in a card) → gets a real
 *     sentence-case heading with slim blue accent bar, not an
 *     uppercase eyebrow.
 *   - Slightly wider cards (200px vs 168px) — PDP has more room.
 *   - Arrows live in a .asi-related-viewport wrapper so they align
 *     with the image-well centerline, not the full section center.
 *   - WC's AJAX "View cart" link (.added_to_cart) is hidden — the
 *     add-to-cart toast already surfaces a View cart CTA, and a
 *     second link stacked under each card was ugly and redundant.
 * ═══════════════════════════════════════════════════════════════ */

body.single-product .wp-block-woocommerce-product-collection[data-collection*="related"] {
	margin-block-start: 3.5rem;
	padding-block-start: 2.5rem;
	border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	position: relative;
	--asi-rel-image: 200px;
}

/* Section heading — sentence case + slim blue accent bar.
   Signals "related content, not promoted content" per the cross-sells
   heading rationale. The ::before bar is matched to --asi-gradient-blue
   so it reads as part of the brand language, not decoration. */
body.single-product .wp-block-woocommerce-product-collection[data-collection*="related"] > h2 {
	display: flex !important;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--asi-font-family) !important;
	font-size: 1.0625rem !important;
	font-weight: 600 !important;
	letter-spacing: -0.2px !important;
	line-height: 1.4 !important;
	color: var(--wp--preset--color--contrast) !important;
	text-transform: none !important;
	margin: 0 0 1.75rem !important;
	text-align: start !important;
}

body.single-product .wp-block-woocommerce-product-collection[data-collection*="related"] > h2::before {
	content: "";
	flex-shrink: 0;
	inline-size: 4px;
	block-size: 1.125rem;
	border-radius: 2px;
	background: var(--asi-gradient-blue);
}

/* Viewport — positioning anchor for arrows so they center on the
   image well rather than the whole section. The track sits inside. */
.asi-related-viewport {
	position: relative;
}

/* ─── Horizontal river ───
   Flex scroll-snap, no chrome. Right bleed lets the last card peek
   past the container, signalling "more on scroll" without needing
   always-visible arrows on desktop. */
body.single-product .wc-block-product-template,
body.single-product ul.wc-block-product-template,
body.single-product .wc-block-product-template.columns-3,
body.single-product .wc-block-product-template.columns-4 {
	display: flex !important;
	flex-wrap: nowrap !important;
	grid-template-columns: none !important;
	gap: 1.25rem !important;
	margin: 0 !important;
	padding: 0.25rem 0 0.75rem !important;
	list-style: none !important;
	overflow-x: auto;
	overflow-y: visible;
	scroll-snap-type: x mandatory;
	scroll-padding-inline-start: 0;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

body.single-product .wc-block-product-template::-webkit-scrollbar {
	display: none;
}

/* ─── Slider arrows (injected by JS into .asi-related-viewport) ───
   Positioned on the image-well centerline: image top is flush with
   the viewport top (padding-top: 0.25rem), image is 200px tall, so
   centerline is at 0.25rem + 100px. */
.asi-related-arrow {
	position: absolute;
	inset-block-start: calc(var(--asi-rel-image, 200px) / 2 + 0.25rem);
	transform: translateY(-50%);
	inline-size: 36px;
	block-size: 36px;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	transition: opacity 220ms ease, box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms ease, color 220ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 4;
	padding: 0;
}

.asi-related-arrow:hover {
	box-shadow: 0 6px 18px color-mix(in srgb, var(--wp--preset--color--accent-1) 22%, transparent);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 40%, transparent);
	color: var(--wp--preset--color--accent-1);
	transform: translateY(-50%) scale(1.06);
}

.asi-related-arrow:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
}

.asi-related-arrow--prev {
	inset-inline-start: -14px;
}

.asi-related-arrow--next {
	inset-inline-end: -14px;
}

.asi-related-arrow[hidden] {
	display: none;
}

[dir="rtl"] .asi-related-arrow svg {
	transform: scaleX(-1);
}

/* ─── Product card — bare float, no chrome ───
   No border / background / shadow of its own. The card is defined
   by typographic rhythm and the image well's subtle lift. */
body.single-product .wc-block-product-template > li.wc-block-product,
body.single-product .wc-block-product-template > li,
body.single-product .wc-block-product {
	display: flex !important;
	flex-direction: column !important;
	flex: 0 0 200px !important;
	inline-size: 200px !important;
	max-inline-size: none !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-align: start !important;
	scroll-snap-align: start;
	position: relative;
	overflow: visible !important;
	transition: none !important;
}

/* ─── Image well — square frame on white, lifts on hover ─── */
body.single-product .wc-block-product .wc-block-components-product-image {
	order: 1;
	display: flex !important;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	margin: 0 0 0.875rem !important;
	padding: 1rem !important;
	background: var(--wp--preset--color--base) !important;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent) !important;
	border-radius: 14px !important;
	overflow: hidden !important;
	transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
	position: relative !important;
}

body.single-product .wc-block-product .wc-block-components-product-image a {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	block-size: 100%;
	background: transparent;
	padding: 0;
	overflow: visible;
}

body.single-product .wc-block-product:hover .wc-block-components-product-image {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
}

body.single-product .wc-block-product .wc-block-components-product-image img {
	inline-size: auto !important;
	max-inline-size: 100% !important;
	max-block-size: 100% !important;
	block-size: auto !important;
	object-fit: contain !important;
	mix-blend-mode: multiply;
	margin: 0 auto !important;
	transform: none !important;
	transition: none !important;
}

body.single-product .wc-block-product:hover .wc-block-components-product-image img {
	transform: none !important;
}

/* Sale badge — pinned to image-well top-start corner. */
body.single-product .wc-block-product .wc-block-components-product-sale-badge,
body.single-product .wc-block-product .wc-block-components-product-sale-badge.alignright,
body.single-product .wc-block-product .wc-block-components-product-sale-badge__text {
	display: inline-flex !important;
	position: absolute;
	inset-block-start: 0.625rem;
	inset-inline-start: 0.625rem;
	z-index: 2;
	font-family: var(--asi-font-family) !important;
	font-size: 0.625rem !important;
	font-weight: 700 !important;
	background: var(--wp--preset--color--warm-orange) !important;
	color: #fff !important;
	padding: 0.1875rem 0.5rem !important;
	border-radius: 999px !important;
	border: none !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	line-height: 1.2 !important;
	box-shadow: 0 2px 6px color-mix(in srgb, var(--wp--preset--color--warm-orange) 35%, transparent) !important;
	float: none !important;
	margin: 0 !important;
	inline-size: auto !important;
	block-size: auto !important;
}

/* ─── Price = THE HEADLINE ─── */
body.single-product .wc-block-product .wp-block-woocommerce-product-price,
body.single-product .wc-block-product .wc-block-components-product-price {
	order: 2;
	display: block !important;
	font-family: var(--asi-font-family) !important;
	font-size: 1.0625rem !important;
	font-weight: 700 !important;
	color: var(--wp--preset--color--accent-1) !important;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	line-height: 1.2 !important;
	margin: 0 0 0.25rem !important;
	padding: 0 !important;
	text-align: start !important;
	justify-content: flex-start !important;
}

body.single-product .wc-block-product .wc-block-components-product-price del,
body.single-product .wc-block-product .wc-block-components-product-price del .woocommerce-Price-amount {
	display: inline-block;
	color: var(--wp--preset--color--accent-4) !important;
	font-weight: 400 !important;
	font-size: 0.75rem !important;
	margin-inline-end: 0.375rem;
	text-decoration: line-through;
	opacity: 0.8;
}

body.single-product .wc-block-product .wc-block-components-product-price ins,
body.single-product .wc-block-product .wc-block-components-product-price ins .woocommerce-Price-amount,
body.single-product .wc-block-product .wc-block-components-product-price .woocommerce-Price-amount {
	text-decoration: none;
	color: var(--wp--preset--color--accent-1) !important;
	font-weight: 700 !important;
	font-size: 1.0625rem !important;
}

/* ─── Title = quiet caption ─── */
body.single-product .wc-block-product h3.wp-block-post-title,
body.single-product .wc-block-product .wp-block-post-title {
	order: 3;
	font-family: var(--asi-font-family) !important;
	font-size: 0.75rem !important;
	font-weight: 500 !important;
	line-height: 1.45 !important;
	color: var(--wp--preset--color--accent-4) !important;
	text-transform: none;
	text-decoration: none;
	margin: 0 0 0.875rem !important;
	padding: 0 !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden !important;
	min-block-size: calc(0.75rem * 1.45 * 2);
	text-align: start !important;
	letter-spacing: 0 !important;
}

body.single-product .wc-block-product h3.wp-block-post-title a {
	color: inherit !important;
	text-decoration: none !important;
	transition: color 200ms ease;
}

body.single-product .wc-block-product:hover h3.wp-block-post-title a {
	color: var(--wp--preset--color--contrast) !important;
}

/* ─── Add button — ghost pill, anchored to card bottom ─── */
body.single-product .wc-block-product .wp-block-woocommerce-product-button,
body.single-product .wc-block-product .wc-block-components-product-button {
	order: 4;
	margin: auto 0 0 !important;
	padding: 0 !important;
	text-align: start !important;
}

body.single-product .wc-block-product .wc-block-components-product-button .wp-block-button__link,
body.single-product .wc-block-product .wc-block-components-product-button button,
body.single-product .wc-block-product .wc-block-components-product-button__button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	inline-size: 100% !important;
	block-size: auto !important;
	margin: 0 !important;
	padding: 0.5rem 0.875rem !important;
	font-family: var(--asi-font-family) !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em;
	line-height: 1.3 !important;
	color: var(--wp--preset--color--accent-1) !important;
	background: transparent !important;
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--accent-1) 28%, transparent) !important;
	border-radius: 999px !important;
	cursor: pointer;
	transition: background 220ms ease, color 220ms ease, border-color 220ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
	box-shadow: none !important;
	text-decoration: none !important;
}

body.single-product .wc-block-product .wc-block-components-product-button .wp-block-button__link:hover,
body.single-product .wc-block-product .wc-block-components-product-button button:hover,
body.single-product .wc-block-product .wc-block-components-product-button__button:hover {
	background: var(--wp--preset--color--accent-1) !important;
	color: #fff !important;
	border-color: var(--wp--preset--color--accent-1) !important;
	transform: translateY(-1px);
}

body.single-product .wc-block-product .wc-block-components-product-button .wp-block-button__link:active,
body.single-product .wc-block-product .wc-block-components-product-button button:active {
	transform: translateY(0);
}

body.single-product .wc-block-product .wc-block-components-product-button .wp-block-button__link:focus-visible,
body.single-product .wc-block-product .wc-block-components-product-button button:focus-visible,
body.single-product .wc-block-product .wc-block-components-product-button__button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
}

/* In-cart state — WC toggles `.added` after AJAX add. Transform the
   pill to outlined/cream so it reads as "already in basket" without
   competing visually with the "Add" pills on sibling cards. */
body.single-product .wc-block-product .wc-block-components-product-button .wp-block-button__link.added,
body.single-product .wc-block-product .wc-block-components-product-button__button.added {
	background: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--accent-1) !important;
	border-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 35%, transparent) !important;
	box-shadow: none !important;
	cursor: default;
}

body.single-product .wc-block-product .wc-block-components-product-button .wp-block-button__link.added:hover,
body.single-product .wc-block-product .wc-block-components-product-button__button.added:hover {
	transform: none;
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 6%, var(--wp--preset--color--base)) !important;
}

/* Hide WC's AJAX "View cart" link — the add-to-cart toast already
   offers a View cart CTA, and a second link stacked under the pill
   was visually ugly and redundant. */
body.single-product .wp-block-woocommerce-product-collection[data-collection*="related"] .added_to_cart,
body.single-product .wc-block-product .added_to_cart {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	body.single-product .wc-block-product .wc-block-components-product-image,
	body.single-product .wc-block-product .wc-block-components-product-button button,
	body.single-product .wc-block-product .wc-block-components-product-button .wp-block-button__link,
	.asi-related-arrow {
		transition: none;
	}
	body.single-product .wc-block-product-template {
		scroll-behavior: auto;
	}
}

/* ─── Responsive ─── */
@media (max-width: 1024px) {
	body.single-product .wp-block-woocommerce-product-collection[data-collection*="related"] {
		--asi-rel-image: 180px;
	}
	body.single-product .wc-block-product-template > li.wc-block-product,
	body.single-product .wc-block-product-template > li,
	body.single-product .wc-block-product {
		flex: 0 0 180px !important;
		inline-size: 180px !important;
	}
}

@media (max-width: 768px) {
	body.single-product .wp-block-woocommerce-product-collection[data-collection*="related"] {
		margin-block-start: 2.5rem;
		padding-block-start: 2rem;
		--asi-rel-image: 160px;
	}
	body.single-product .wp-block-woocommerce-product-collection[data-collection*="related"] > h2 {
		font-size: 1rem !important;
		margin-block-end: 1.25rem !important;
	}
	body.single-product .wc-block-product-template > li.wc-block-product,
	body.single-product .wc-block-product-template > li,
	body.single-product .wc-block-product {
		flex: 0 0 160px !important;
		inline-size: 160px !important;
	}
	body.single-product .wc-block-product .wc-block-components-product-image {
		padding: 0.75rem !important;
		border-radius: 12px !important;
	}
	body.single-product .wc-block-product .wc-block-components-product-price,
	body.single-product .wc-block-product .wc-block-components-product-price ins {
		font-size: 1rem !important;
	}
	.asi-related-arrow {
		display: none;
	}
}

@media (max-width: 480px) {
	body.single-product .wp-block-woocommerce-product-collection[data-collection*="related"] {
		--asi-rel-image: 140px;
	}
	body.single-product .wc-block-product-template > li.wc-block-product,
	body.single-product .wc-block-product-template > li,
	body.single-product .wc-block-product {
		flex: 0 0 140px !important;
		inline-size: 140px !important;
	}
	body.single-product .wc-block-product h3.wp-block-post-title,
	body.single-product .wc-block-product .wp-block-post-title {
		font-size: 0.6875rem !important;
	}
}

/* ─── Mobile Sticky Add-to-Cart Bar ─── */
.asi-sticky-cart {
	display: none;
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
	body.single-product h1.wp-block-post-title {
		font-size: 1.375rem !important;
	}

	body.single-product .wp-block-woocommerce-product-price .wc-block-components-product-price {
		font-size: 1.5rem !important;
	}

	.asi-sp-trust {
		flex-direction: column;
		gap: 0.625rem;
	}

	body.single-product .woocommerce-tabs ul.tabs {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	body.single-product .woocommerce-tabs ul.tabs::-webkit-scrollbar {
		display: none;
	}

	body.single-product .woocommerce-tabs ul.tabs li a {
		padding: 0.75rem 1rem;
		font-size: 0.875rem;
	}

	/* Mobile sticky add-to-cart bar */
	.asi-sticky-cart {
		display: flex;
		position: fixed;
		inset-block-end: 0;
		inset-inline: 0;
		background: var(--wp--preset--color--base);
		border-block-start: 1px solid rgba(15, 23, 42, 0.1);
		box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.1);
		padding: 0.75rem 1rem;
		padding-block-end: calc(0.75rem + env(safe-area-inset-bottom, 0px));
		z-index: 1000;
		gap: 0.75rem;
		align-items: center;
		transform: translateY(100%);
		transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
	}

	.asi-sticky-cart.is-visible {
		transform: translateY(0);
	}

	.asi-sticky-cart__info {
		flex: 1;
		min-inline-size: 0;
	}

	.asi-sticky-cart__title {
		font-size: 0.8125rem;
		font-weight: 500;
		color: var(--wp--preset--color--contrast);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.asi-sticky-cart__price {
		font-size: 1rem;
		font-weight: 700;
		color: var(--wp--preset--color--accent-1);
		font-family: var(--asi-font-family);
	}

	.asi-sticky-cart__btn {
		flex-shrink: 0;
		block-size: 44px;
		padding-inline: 1.5rem;
		border: none;
		border-radius: 10px;
		background: var(--asi-gradient-blue);
		color: #fff;
		font-family: var(--asi-font-family);
		font-size: 0.875rem;
		font-weight: 600;
		cursor: pointer;
		display: flex;
		align-items: center;
		gap: 0.375rem;
		white-space: nowrap;
	}

	body.single-product {
		padding-block-end: 5rem;
	}
}

@media (max-width: 480px) {
	body.single-product .woocommerce-tabs ul.tabs li a {
		padding: 0.625rem 0.75rem;
		font-size: 0.8125rem;
	}
}

/* ─── Trust Bar Standalone (extracted from hero) ─── */
.asi-hero-trust-bar--standalone {
	position: static;
	display: flex;
	justify-content: center;
	gap: 2rem;
	padding: 0.625rem 0;
	background: var(--wp--preset--color--base);
	border-block-end: 1px solid rgba(15, 23, 42, 0.08);
}

/* Tighten trust-bar → brands → featured gap */
.asi-homepage-brands {
	padding-block: 0.625rem;
}

/* ─── Hero Fallback (when Smart Slider 3 not installed) ─── */
.asi-hero-fallback {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 300px;
	padding: 4rem 2rem;
	text-align: center;
	background: var(--wp--preset--color--accent-3);
	border-radius: var(--asi-radius);
}
.asi-hero-fallback p {
	margin-block: 0.25rem;
}
.asi-hero-fallback a {
	display: inline-block;
	margin-block-start: 1rem;
	color: var(--wp--preset--color--accent-1);
	font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
 * ─── Front-page section layout (CSS classes, replaces inline styles) ───
 * ═══════════════════════════════════════════════════════════════ */

/* ─── Category Cards Row ─── */
.asi-cat-cards-row {
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
}

.asi-cat-cards-row > .asi-category-card {
	flex: 1;
	min-inline-size: 280px;
}

/* ─── Testimonials Cinema ─── */
.asi-testimonials-cinema-wrap {
	max-inline-size: 1280px;
	margin-inline: auto;
}

.asi-testimonials-cinema {
	position: relative;
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 0.75rem;
	padding-inline: clamp(1rem, 3vw, 2rem);
	outline: none;
}

.asi-cinema-stage {
	display: flex;
	align-items: stretch;
	gap: 0.75rem;
	flex: 0 1 auto;
	justify-content: center;
	min-inline-size: 0;
}

/* Cards: only 3 slots visible (prev / active / next). Others are skipped. */
.asi-cinema-card {
	display: none;
	order: 999;
	flex-direction: column;
	background: #FFFFFF;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	border-radius: 16px;
	overflow: hidden;
	position: relative;
	transition: border-color 240ms cubic-bezier(0.22, 1, 0.36, 1),
				box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.asi-cinema-card.is-prev,
.asi-cinema-card.is-active,
.asi-cinema-card.is-next {
	display: flex;
}

.asi-cinema-card.is-prev   { order: 0; }
.asi-cinema-card.is-active { order: 1; }
.asi-cinema-card.is-next   { order: 2; }

/* Thumb cards — narrow, just photo + name */
.asi-cinema-card.is-prev,
.asi-cinema-card.is-next {
	flex: 0 0 96px;
	align-items: center;
	justify-content: center;
	padding-block: 1.75rem;
	padding-inline: 0.5rem;
	cursor: pointer;
	background: color-mix(in srgb, var(--wp--preset--color--accent-3) 60%, #FFFFFF);
}

.asi-cinema-card.is-prev:hover,
.asi-cinema-card.is-next:hover,
.asi-cinema-card.is-prev:focus-visible,
.asi-cinema-card.is-next:focus-visible {
	border-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 30%, transparent);
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
	outline: none;
}

.asi-cinema-card.is-prev:focus-visible,
.asi-cinema-card.is-next:focus-visible {
	box-shadow:
		0 4px 14px rgba(15, 23, 42, 0.08),
		0 0 0 2px var(--wp--preset--color--accent-1);
}

/* Hero card — wide, with stars, quote, meta */
.asi-cinema-card.is-active {
	flex: 1 1 700px;
	max-inline-size: 720px;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	box-shadow:
		0 14px 40px -8px rgba(15, 23, 42, 0.14),
		0 2px 8px -2px rgba(15, 23, 42, 0.06);
	cursor: default;
}

/* Quote glyph as a decorative accent on the active card only */
.asi-cinema-card.is-active::before {
	content: '\201C';
	position: absolute;
	inset-block-start: 0.5rem;
	inset-inline-start: 1.25rem;
	font-size: 4rem;
	line-height: 1;
	color: var(--wp--preset--color--accent-1);
	opacity: 0.08;
	font-family: Georgia, serif;
	pointer-events: none;
	user-select: none;
}

/* Photo frame — sized identically in both states; only its POSITION morphs */
.asi-cinema-photo-frame {
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	background: var(--wp--preset--color--accent-3);
	position: relative;
}

.asi-cinema-photo {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.asi-cinema-card:not(.is-active) .asi-cinema-photo-frame {
	inline-size: 48px;
	block-size: 48px;
}

.asi-cinema-card.is-active .asi-cinema-photo-frame {
	inline-size: 64px;
	block-size: 64px;
}

/* Stars, quote, role — hidden on thumbs */
.asi-cinema-card:not(.is-active) .asi-cinema-stars,
.asi-cinema-card:not(.is-active) .asi-cinema-quote,
.asi-cinema-card:not(.is-active) .asi-cinema-role {
	display: none;
}

/* Stars (active only) */
.asi-cinema-card.is-active .asi-cinema-stars {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	color: var(--wp--preset--color--warm-orange);
	margin-block-end: 1.125rem;
	position: relative;
	z-index: 1;
}

.asi-cinema-star {
	flex-shrink: 0;
}

.asi-cinema-star.is-empty {
	opacity: 0.25;
}

/* Quote wrapper anchors the Read more overlay */
.asi-cinema-quote-wrap {
	position: relative;
	z-index: 1;
}

/* Quote (active only) — clamp to 4 lines until Read more is clicked */
.asi-cinema-card.is-active .asi-cinema-quote {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--wp--preset--color--contrast);
	margin: 0;
	font-weight: 400;
	position: relative;
}

.asi-cinema-card.is-active:not(.is-expanded) .asi-cinema-quote {
	max-block-size: calc(1.6em * 4);
	overflow: hidden;
}

.asi-cinema-card.is-active.is-expanded .asi-cinema-quote {
	display: block;
}

/* Read more / Show less — reads as inline text, not a button.
   When clamped: absolute-positioned at the end of the last visible line
   with a gradient fade behind so it appears to flow out of the quote.
   When expanded: flows naturally below the full text. */
.asi-cinema-readmore {
	display: none;
	padding: 0;
	background: none;
	border: none;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: calc(1.0625rem * 1.6);
	color: var(--wp--preset--color--accent-1);
	cursor: pointer;
	transition: color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.asi-cinema-card.is-active .asi-cinema-readmore.is-visible {
	display: inline-block;
}

.asi-cinema-card.is-active:not(.is-expanded) .asi-cinema-readmore.is-visible {
	position: absolute;
	inset-block-end: 0;
	inset-inline-end: 0;
	padding-inline-start: 5rem;
	background: linear-gradient(
		to right,
		rgba(255, 255, 255, 0) 0%,
		#ffffff 55%,
		#ffffff 100%
	);
}

[dir="rtl"] .asi-cinema-card.is-active:not(.is-expanded) .asi-cinema-readmore.is-visible {
	background: linear-gradient(
		to left,
		rgba(255, 255, 255, 0) 0%,
		#ffffff 55%,
		#ffffff 100%
	);
}

.asi-cinema-card.is-active.is-expanded .asi-cinema-readmore.is-visible {
	margin-block-start: 0.375rem;
}

.asi-cinema-card:not(.is-active) .asi-cinema-readmore {
	display: none;
}

.asi-cinema-readmore:hover,
.asi-cinema-readmore:focus-visible {
	color: color-mix(in srgb, var(--wp--preset--color--accent-1) 75%, #0F172A);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.asi-cinema-readmore:focus-visible {
	outline: none;
}

.asi-cinema-readmore__less { display: none; }
.asi-cinema-card.is-active.is-expanded .asi-cinema-readmore__more { display: none; }
.asi-cinema-card.is-active.is-expanded .asi-cinema-readmore__less { display: inline; }

/* Meta — photo + name + role */
.asi-cinema-meta {
	display: flex;
	align-items: center;
	gap: 0.875rem;
}

.asi-cinema-card.is-active .asi-cinema-meta {
	margin-block-start: 1.25rem;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
}

.asi-cinema-card:not(.is-active) .asi-cinema-meta {
	flex-direction: column;
	gap: 0.625rem;
	text-align: center;
}

.asi-cinema-meta-text {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
}

.asi-cinema-card.is-active .asi-cinema-name {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	line-height: 1.3;
}

.asi-cinema-card.is-active .asi-cinema-role {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--accent-4);
	line-height: 1.3;
	margin-block-start: 0.125rem;
}

.asi-cinema-card:not(.is-active) .asi-cinema-name {
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--contrast);
	text-transform: uppercase;
	text-align: center;
	max-inline-size: 80px;
	overflow-wrap: anywhere;
}

/* Cinema arrows */
.asi-cinema-arrow {
	flex-shrink: 0;
	align-self: center;
	inline-size: 42px;
	block-size: 42px;
	border-radius: 50%;
	border: none;
	background: #FFFFFF;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow:
		0 4px 14px rgba(15, 23, 42, 0.10),
		0 1px 3px rgba(15, 23, 42, 0.06),
		0 0 0 1px color-mix(in srgb, var(--wp--preset--color--accent-1) 8%, transparent);
	transition:
		background 240ms cubic-bezier(0.22, 1, 0.36, 1),
		color 240ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
	padding: 0;
	z-index: 2;
}

.asi-cinema-arrow:hover {
	background: var(--wp--preset--color--accent-1);
	color: #FFFFFF;
	box-shadow:
		0 8px 22px rgba(1, 85, 183, 0.32),
		0 2px 6px rgba(1, 85, 183, 0.16),
		0 0 0 1px color-mix(in srgb, var(--wp--preset--color--accent-1) 35%, transparent);
	transform: scale(1.06);
}

.asi-cinema-arrow:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
}

[dir="rtl"] .asi-cinema-arrow svg {
	transform: scaleX(-1);
}

/* Standalone arrows hidden on desktop — chevrons inside the thumbs carry
   the affordance. Mobile breakpoint brings them back when thumbs are hidden. */
.asi-cinema-arrow {
	display: none;
}

/* Chevron inside each thumb — points outward, lifts on hover */
.asi-cinema-thumb-chevron {
	position: absolute;
	inset-block-end: 1rem;
	inset-inline: 0;
	display: none;
	justify-content: center;
	align-items: center;
	color: var(--wp--preset--color--accent-1);
	opacity: 0.45;
	pointer-events: none;
	transition:
		opacity 240ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.asi-cinema-card.is-prev .asi-cinema-thumb-chevron,
.asi-cinema-card.is-next .asi-cinema-thumb-chevron {
	display: flex;
}

.asi-cinema-card.is-prev .asi-cinema-thumb-chevron {
	transform: scaleX(-1);
}

.asi-cinema-card.is-next:hover .asi-cinema-thumb-chevron,
.asi-cinema-card.is-next:focus-visible .asi-cinema-thumb-chevron {
	opacity: 1;
	transform: translateX(4px);
}

.asi-cinema-card.is-prev:hover .asi-cinema-thumb-chevron,
.asi-cinema-card.is-prev:focus-visible .asi-cinema-thumb-chevron {
	opacity: 1;
	transform: scaleX(-1) translateX(4px);
}

[dir="rtl"] .asi-cinema-card.is-prev .asi-cinema-thumb-chevron {
	transform: scaleX(1);
}

[dir="rtl"] .asi-cinema-card.is-next .asi-cinema-thumb-chevron {
	transform: scaleX(-1);
}

[dir="rtl"] .asi-cinema-card.is-prev:hover .asi-cinema-thumb-chevron,
[dir="rtl"] .asi-cinema-card.is-prev:focus-visible .asi-cinema-thumb-chevron {
	opacity: 1;
	transform: scaleX(1) translateX(-4px);
}

[dir="rtl"] .asi-cinema-card.is-next:hover .asi-cinema-thumb-chevron,
[dir="rtl"] .asi-cinema-card.is-next:focus-visible .asi-cinema-thumb-chevron {
	opacity: 1;
	transform: scaleX(-1) translateX(4px);
}

/* ─── View Transitions choreography ─── */
::view-transition-group(*) {
	animation-duration: 560ms;
	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-group(root),
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 280ms;
	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

/* ─── Front-page section headings — unified two-rank hierarchy ─── */
.asi-section-heading {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
	margin-block-end: 1.5rem;
}

/* When followed by a description paragraph, tighten the gap */
.asi-section-heading:has(+ p) {
	margin-block-end: 0.5rem;
}

/* ─── Section description — unified secondary text ─── */
.asi-section-desc {
	font-size: 1rem;
	line-height: 1.5;
	color: var(--wp--preset--color--accent-4);
	margin-block-end: 2rem;
	max-inline-size: 56ch;
}

/* Center the box only when the description is explicitly center-aligned */
.asi-section-desc.has-text-align-center {
	margin-inline: auto;
}

/* ─── Star ratings — accessible SVG stars ─── */
.asi-stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-block-end: 0.75rem;
	color: var(--wp--preset--color--warm-orange, #F59E0B);
	line-height: 1;
}

.asi-star {
	flex-shrink: 0;
}

.asi-star.is-empty {
	opacity: 0.25;
}

/* ─── Front-page section rhythm — uniform compact padding ─── */
.asi-homepage-featured,
.asi-homepage-categories,
.asi-category-bubbles,
.asi-homepage-testimonials,
.asi-homepage-shop-by-need,
.asi-homepage-newsletter,
.asi-homepage-faq,
.asi-homepage-stats {
	padding-block: clamp(2rem, 4vw, 3rem);
	padding-inline: var(--wp--preset--spacing--50);
}

/* ─── Stats Section — compact trust strip ─── */
.asi-homepage-stats {
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 6%, var(--wp--preset--color--base));
}

.asi-stats-header {
	text-align: center;
	margin-block-end: 2rem;
	max-inline-size: 640px;
	margin-inline: auto;
}

.asi-stats-header__title {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
	margin-block-end: 0.5rem;
}

.asi-stats-header__desc {
	font-size: 1rem;
	line-height: 1.5;
	color: var(--wp--preset--color--accent-4);
}

/* ─── Newsletter Row ─── */
.asi-newsletter-row {
	display: flex;
	gap: 3rem;
	align-items: center;
	flex-wrap: wrap;
}

.asi-newsletter-text {
	flex: 0 0 45%;
}

.asi-newsletter-form {
	flex: 1;
}

/* Newsletter pill — RTL-safe via logical border-radius */
.asi-newsletter-form .wp-block-search {
	border-radius: 100px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
}

.asi-newsletter-form .wp-block-search__inside-wrapper {
	border-radius: 100px;
}

.asi-newsletter-form .wp-block-search__input {
	border: none;
	border-start-start-radius: 100px;
	border-end-start-radius: 100px;
	border-start-end-radius: 0;
	border-end-end-radius: 0;
}

.asi-newsletter-form .wp-block-search__button {
	border-start-start-radius: 0;
	border-end-start-radius: 0;
	border-start-end-radius: 100px;
	border-end-end-radius: 100px;

	/* Make room for the spinner so the button doesn't reflow on submit. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-inline-size: 7.5rem;
	transition:
		background-color 200ms ease,
		opacity 200ms ease;
}

.asi-newsletter-form form.is-submitting .wp-block-search__button {
	opacity: 0.85;
	cursor: progress;
}

/* Spinner — only visible during submit. Inherits the button's text color
   so it works on both blue and any future variant. */
.asi-newsletter__submit-spinner {
	inline-size: 0.875rem;
	block-size: 0.875rem;
	border-radius: 50%;
	border: 2px solid currentColor;
	border-block-end-color: transparent;
	display: none;
}

.asi-newsletter-form form.is-submitting .asi-newsletter__submit-spinner {
	display: inline-block;
	animation: asi-newsletter-spin 720ms linear infinite;
}

@keyframes asi-newsletter-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.asi-newsletter-form form.is-submitting .asi-newsletter__submit-spinner {
		animation: none;
	}
}

/* Honeypot — visually and audibly hidden, but reachable to dumb form bots. */
.asi-newsletter__hp {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Inline status — sits below the form, never a popup. Reduced-motion
   collapses the slide-in to a fade so it doesn't trigger vestibular issues. */
.asi-newsletter__status {
	margin-block-start: 0.625rem;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--wp--preset--color--accent-4);
	min-block-size: 1.45em;
	transition: color 200ms ease;
}

.asi-newsletter__status:empty {
	margin-block-start: 0;
	min-block-size: 0;
}

.asi-newsletter__status[data-tone="success"] {
	color: var(--wp--preset--color--accent-2);
	font-weight: 500;
}

.asi-newsletter__status[data-tone="error"] {
	color: #b42318;
	font-weight: 500;
}

.asi-newsletter__legal {
	margin-block-start: 0.625rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--accent-4);
}

/* ─── Brevo plugin form (asi-homepage-newsletter--brevo) ──────────────
   The plugin renders [sibwp_form id=…] with FIRSTNAME, LASTNAME, a
   literal "Email Address*" label, and stock alert chips. We override
   everything below to:
     – hide the extra fields,
     – flatten label noise,
     – swap the chrome for the site's pill visual,
     – morph the same pill into a celebration on success
       (no layout shift, no stacked alert box).
   All states are driven by `:has()` on the plugin-emitted classes so
   the working submission flow stays untouched. RTL via logical props
   plus CSS Grid line numbers (which already follow inline-direction). */

.asi-homepage-newsletter--brevo .sib_signup_form {
	position: relative;
	margin: 0;
}

/* The pill ----------------------------------------------------------- */
.asi-homepage-newsletter--brevo .sib_signup_box_inside_1 {
	position: relative; /* anchor for absolute success overlay */
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	background: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	border-radius: 100px;
	padding: 6px;
	max-inline-size: 100%;
	transition:
		border-color 480ms cubic-bezier(0.22, 1, 0.36, 1),
		background-color 480ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 200ms ease;
}

/* Pill focus — blue tint while the visitor is typing */
.asi-homepage-newsletter--brevo .sib_signup_box_inside_1:focus-within {
	border-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 55%, transparent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--wp--preset--color--accent-1) 12%, transparent);
}

/* Hide unused fields (newsletter only collects email) */
.asi-homepage-newsletter--brevo .sib_signup_form .sib-FIRSTNAME-area,
.asi-homepage-newsletter--brevo .sib_signup_form .sib-LASTNAME-area {
	display: none !important;
}

/* Email row — kill the "Email Address*" text label by zeroing the
   <p>'s font-size, restore it on the actual input. The placeholder
   (injected server-side) plus name="email" keep the field accessible. */
.asi-homepage-newsletter--brevo .sib_signup_form p.sib-email-area {
	margin: 0;
	font-size: 0;
	line-height: 0;
	grid-column: 1;
}

.asi-homepage-newsletter--brevo .sib_signup_form p.sib-email-area input[type="email"] {
	inline-size: 100%;
	block-size: 44px;
	font-size: 0.9375rem;
	line-height: 1.4;
	border: 0;
	background: transparent;
	padding-inline: 1.25rem;
	color: var(--wp--preset--color--contrast);
	outline: none;
	box-shadow: none;
}

.asi-homepage-newsletter--brevo .sib_signup_form p.sib-email-area input[type="email"]::placeholder {
	color: var(--wp--preset--color--accent-4);
	opacity: 1;
}

/* Submit row */
.asi-homepage-newsletter--brevo .sib_signup_form p:has(.sib-default-btn) {
	margin: 0;
	grid-column: 2;
}

.asi-homepage-newsletter--brevo .sib_signup_form .sib-default-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 7.5rem;
	block-size: 44px;
	padding-inline: 1.5rem;
	border: 0;
	border-radius: 100px;
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	font: inherit;
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: 0;
	cursor: pointer;
	box-shadow: 0 1px 2px color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	transition:
		background-color 200ms ease,
		transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 200ms ease,
		opacity 200ms ease;
}

.asi-homepage-newsletter--brevo .sib_signup_form .sib-default-btn:hover {
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 88%, var(--wp--preset--color--contrast));
	transform: translateY(-1px);
	box-shadow: 0 6px 16px color-mix(in srgb, var(--wp--preset--color--accent-1) 28%, transparent);
}

.asi-homepage-newsletter--brevo .sib_signup_form .sib-default-btn:active {
	transform: translateY(0);
	box-shadow: 0 1px 2px color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
}

.asi-homepage-newsletter--brevo .sib_signup_form .sib-default-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: -4px;
	box-shadow:
		0 0 0 3px var(--wp--preset--color--accent-1),
		0 6px 16px color-mix(in srgb, var(--wp--preset--color--accent-1) 28%, transparent);
}

.asi-homepage-newsletter--brevo .sib_signup_form .sib-default-btn:disabled {
	opacity: 0.7;
	cursor: progress;
	transform: none;
}

/* Spinner — the plugin's stock GIF clashes with everything. Hide it;
   the submission completes inside ~400 ms locally, so a loading
   indicator isn't load-bearing for this flow. */
.asi-homepage-newsletter--brevo .sib_loader {
	display: none !important;
}

/* Status panel ------------------------------------------------------- */
/* Default — no message: collapsed. The plugin emits whitespace inside
   `.sib_msg_disp` so `:empty` doesn't match; `:has(*)` is the right test. */
.asi-homepage-newsletter--brevo .sib_msg_disp {
	display: none;
}

.asi-homepage-newsletter--brevo .sib_msg_disp:has(*) {
	display: flex;
	align-items: center;
	justify-content: center;
	grid-column: 1 / -1;
	min-block-size: 0;
	margin: 0;
	padding: 0;
}

/* Strip the plugin's stock alert chrome. The plugin's inline <style>
   uses ID-level specificity (`form#sib_signup_form_1 p.sib-alert-message`)
   so the only way to win without selecting the form ID is `!important`. */
.asi-homepage-newsletter--brevo .sib-alert-message {
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-sizing: content-box;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	/* Override the plugin's `.delay(5000).hide('slow')` auto-dismiss —
	   the JS sets inline `display: none` and animates opacity to 0, so
	   we lock both at the visible state. The success state is intended
	   to persist until the next page load, not vanish under the user. */
	display: inline-flex !important;
	opacity: 1 !important;
}

/* SUCCESS state ------------------------------------------------------ */
/* Pill stays the same height — the success message overlays the email
   + submit row with `position: absolute`, so there's no layout shift
   no matter what the plugin's stock styles inject. The email + submit
   are hidden via `visibility: hidden` (kept in layout, just invisible
   and click-inert). */

.asi-homepage-newsletter--brevo .sib_signup_form:has(.sib-alert-message-success) .sib_signup_box_inside_1 > p {
	visibility: hidden;
	pointer-events: none;
}

.asi-homepage-newsletter--brevo .sib_signup_form:has(.sib-alert-message-success) .sib_msg_disp {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.asi-homepage-newsletter--brevo .sib_signup_form:has(.sib-alert-message-success) .sib_signup_box_inside_1 {
	border-color: color-mix(in srgb, var(--wp--preset--color--accent-2) 45%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--accent-2) 8%, var(--wp--preset--color--base));
	animation: asi-newsletter-pulse 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.asi-homepage-newsletter--brevo .sib-alert-message-success {
	align-items: center;
	gap: 0.625rem;
	color: color-mix(in srgb, var(--wp--preset--color--accent-2) 78%, var(--wp--preset--color--contrast)) !important;
	background: transparent !important;
	border-color: transparent !important;
	animation: asi-newsletter-msg-in 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Achievement-badge checkmark — solid brand-green disc with a white tick.
   mask-image SVG keeps it crisp at any DPR. */
.asi-homepage-newsletter--brevo .sib-alert-message-success::before {
	content: "";
	flex-shrink: 0;
	inline-size: 22px;
	block-size: 22px;
	border-radius: 50%;
	background:
		var(--wp--preset--color--accent-2)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
		center / 14px 14px no-repeat;
	box-shadow: 0 1px 2px color-mix(in srgb, var(--wp--preset--color--accent-2) 35%, transparent);
}

/* ERROR / WARNING state --------------------------------------------- */
/* Same overlay treatment so the pill height stays constant. The visitor
   can dismiss by clicking the email field — wait, no — error keeps the
   form interactive: visibility: hidden would block input. Instead, for
   errors we let the pill grow (single extra row above), with a red
   border tint, and a small icon-led message. */

.asi-homepage-newsletter--brevo .sib_signup_form:has(.sib-alert-message-error) .sib_signup_box_inside_1,
.asi-homepage-newsletter--brevo .sib_signup_form:has(.sib-alert-message-warning) .sib_signup_box_inside_1 {
	border-color: color-mix(in srgb, #b42318 35%, transparent);
	border-radius: 22px; /* relax from full-pill to soft rect when message is present */
}

.asi-homepage-newsletter--brevo .sib_signup_form:has(.sib-alert-message-error) .sib_msg_disp,
.asi-homepage-newsletter--brevo .sib_signup_form:has(.sib-alert-message-warning) .sib_msg_disp {
	margin-block-end: 0.375rem;
	padding-inline: 0.75rem;
}

.asi-homepage-newsletter--brevo .sib-alert-message-error,
.asi-homepage-newsletter--brevo .sib-alert-message-warning {
	align-items: center;
	gap: 0.5rem;
	color: #b42318 !important;
	background: transparent !important;
	border-color: transparent !important;
	font-size: 0.875rem;
	animation: asi-newsletter-msg-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.asi-homepage-newsletter--brevo .sib-alert-message-error::before,
.asi-homepage-newsletter--brevo .sib-alert-message-warning::before {
	content: "";
	flex-shrink: 0;
	inline-size: 16px;
	block-size: 16px;
	background: currentColor;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-size: contain;
	-webkit-mask-size: contain;
}

/* Motion ------------------------------------------------------------- */
@keyframes asi-newsletter-msg-in {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes asi-newsletter-pulse {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wp--preset--color--accent-2) 38%, transparent); }
	60%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--wp--preset--color--accent-2) 0%, transparent); }
	100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
	.asi-homepage-newsletter--brevo .sib_signup_box_inside_1,
	.asi-homepage-newsletter--brevo .sib_signup_form:has(.sib-alert-message-success) .sib_signup_box_inside_1,
	.asi-homepage-newsletter--brevo .sib-alert-message,
	.asi-homepage-newsletter--brevo .sib-default-btn {
		animation: none !important;
		transition: none;
	}

	.asi-homepage-newsletter--brevo .sib_signup_form .sib-default-btn:hover {
		transform: none;
	}
}

/* Small viewports — pill stacks: input on top, button below at full
   width. Logical props keep this RTL-safe. */
@media (max-width: 540px) {
	.asi-homepage-newsletter--brevo .sib_signup_box_inside_1 {
		grid-template-columns: 1fr;
		gap: 6px;
		border-radius: 22px;
		padding: 8px;
	}

	.asi-homepage-newsletter--brevo .sib_signup_form p.sib-email-area,
	.asi-homepage-newsletter--brevo .sib_signup_form p:has(.sib-default-btn) {
		grid-column: 1;
	}

	.asi-homepage-newsletter--brevo .sib_signup_form .sib-default-btn {
		inline-size: 100%;
	}
}

/* Bento link arrow icon — flips for RTL */
.asi-bento-link svg {
	transition: translate var(--asi-transition);
	flex-shrink: 0;
}

.asi-bento-card:hover .asi-bento-link svg {
	translate: 4px 0;
}

[dir="rtl"] .asi-bento-link svg {
	transform: scaleX(-1);
}

[dir="rtl"] .asi-bento-card:hover .asi-bento-link svg {
	translate: -4px 0;
}

/* ─── FAQ Columns ─── */
.asi-faq-columns {
	display: flex;
	gap: 4rem;
	flex-wrap: wrap;
}

.asi-faq-sidebar {
	flex: 0 0 36%;
	min-inline-size: 260px;
}

.asi-faq-accordion {
	flex: 1;
	min-inline-size: 300px;
}

/* ─── Bulk Orders Section ─── */
.asi-homepage-bulk {
	position: relative;
	display: flex;
	align-items: center;
	padding: 2rem var(--wp--preset--spacing--50);
	color: #fff;
	overflow: hidden;
}

/* Force all text white over the dark overlay */
.asi-homepage-bulk h2,
.asi-homepage-bulk h3,
.asi-homepage-bulk h4,
.asi-homepage-bulk p {
	color: #fff;
}

.asi-bulk-bg {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	z-index: 0;
}

.asi-bulk-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		160deg,
		rgba(1, 37, 84, 0.92) 0%,
		rgba(15, 23, 42, 0.85) 50%,
		rgba(1, 85, 183, 0.75) 100%
	);
	z-index: 1;
}

.asi-bulk-inner {
	position: relative;
	z-index: 2;
	max-inline-size: 960px;
	margin-inline: auto;
	inline-size: 100%;
	text-align: center;
}

/* Header — centered, compact */
.asi-bulk-header {
	margin-block-end: 2.5rem;
}

.asi-bulk-eyebrow {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.375rem 1rem;
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	margin-block-end: 1rem;
	color: rgba(255, 255, 255, 0.9);
}

.asi-bulk-header h2 {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin-block-end: 0.75rem;
}

.asi-bulk-desc {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
	max-inline-size: 600px;
	margin-inline: auto;
}

/* Feature cards — glassmorphism mini-cards */
.asi-bulk-features {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	margin-block-end: 2rem;
}

.asi-bulk-feature-card {
	padding: 1.5rem;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 16px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	text-align: start;
	transition: background var(--asi-transition), border-color var(--asi-transition), transform var(--asi-transition);
}

.asi-bulk-feature-card:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.2);
	transform: translateY(-2px);
}

/* Feature icon */
.asi-bulk-feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 40px;
	block-size: 40px;
	border-radius: 10px;
	margin-block-end: 0.75rem;
	color: #fff;
}

.asi-bulk-feature-card:first-child .asi-bulk-feature-icon {
	background: color-mix(in srgb, var(--wp--preset--color--accent-2) 25%, transparent);
}

.asi-bulk-feature-card:last-child .asi-bulk-feature-icon {
	background: color-mix(in srgb, var(--wp--preset--color--warm-orange) 25%, transparent);
}

.asi-bulk-features h4 {
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.2px;
	line-height: 1.2;
	margin-block-end: 0.375rem;
}

.asi-bulk-features p {
	font-size: 0.875rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.7);
	margin: 0;
}

/* CTAs — centered */
.asi-bulk-ctas {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

.asi-bulk-cta {
	display: inline-flex;
	align-items: center;
	padding: 0.75rem 2rem;
	font-size: 0.9375rem;
	font-weight: 600;
	font-family: var(--asi-font-family);
	color: #fff;
	text-decoration: none;
	border-radius: 100px;
	transition: transform var(--asi-transition), box-shadow var(--asi-transition), background var(--asi-transition);
}

.asi-bulk-cta:hover {
	transform: translateY(-1px);
}

.asi-bulk-cta--primary {
	background: var(--asi-gradient-blue);
	box-shadow: 0 4px 16px rgba(1, 85, 183, 0.35),
	            inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.asi-bulk-cta--primary:hover {
	box-shadow: 0 6px 24px rgba(1, 85, 183, 0.45),
	            inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* ─── Front-page Mobile Overrides ─── */
@media (max-width: 768px) {
	/* Category cards — horizontal scroll */
	.asi-cat-cards-row {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		gap: 1rem;
		padding-block: 0.25rem;
	}

	.asi-cat-cards-row::-webkit-scrollbar {
		display: none;
	}

	.asi-cat-cards-row > .asi-category-card {
		flex: 0 0 280px;
		min-inline-size: 0;
		scroll-snap-align: start;
	}

	/* Testimonials cinema — hide thumbs, hero takes full width, arrows below */
	.asi-testimonials-cinema {
		flex-wrap: wrap;
		padding-inline: 1rem;
	}

	.asi-cinema-card.is-prev,
	.asi-cinema-card.is-next {
		display: none;
	}

	.asi-cinema-card.is-active {
		flex: 1 1 100%;
		max-inline-size: 100%;
	}

	/* Mobile: hide chevrons (thumbs are gone) and bring back the arrows */
	.asi-cinema-thumb-chevron {
		display: none !important;
	}

	.asi-cinema-arrow {
		display: flex;
		margin-block-start: 0.75rem;
	}

	.asi-cinema-arrow--prev { order: 4; }
	.asi-cinema-arrow--next { order: 5; }

	.asi-cinema-stage {
		flex: 1 1 100%;
		order: 1;
	}

	/* Category cards row — fade end edge to hint at scrollability */
	.asi-cat-cards-row {
		mask-image: linear-gradient(to right, black calc(100% - 2rem), transparent);
		-webkit-mask-image: linear-gradient(to right, black calc(100% - 2rem), transparent);
	}

	[dir="rtl"] .asi-cat-cards-row {
		mask-image: linear-gradient(to left, black calc(100% - 2rem), transparent);
		-webkit-mask-image: linear-gradient(to left, black calc(100% - 2rem), transparent);
	}

/* Newsletter — stack vertically */
	.asi-newsletter-row {
		flex-direction: column;
		gap: 1.5rem;
	}

	.asi-newsletter-text {
		flex: none;
		text-align: center;
	}

	.asi-newsletter-form {
		inline-size: 100%;
	}

	/* FAQ — stack sidebar above accordion */
	.asi-faq-columns {
		flex-direction: column;
		gap: 2rem;
	}

	.asi-faq-sidebar {
		flex: none;
		min-inline-size: 0;
		position: static;
	}

	.asi-faq-accordion {
		min-inline-size: 0;
	}

	/* Bulk orders — compact on mobile */
	.asi-homepage-bulk {
		padding: 3rem var(--wp--preset--spacing--50);
	}

	.asi-bulk-features {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.asi-bulk-header h2 {
		font-size: clamp(1.5rem, 6vw, 2rem);
	}

	/* Category card image height */
	.asi-category-card-img {
		max-block-size: 180px;
	}

	.asi-category-card-img img {
		block-size: 180px;
	}
}

@media (max-width: 480px) {
	/* Category cards smaller */
	.asi-cat-cards-row > .asi-category-card {
		flex: 0 0 250px;
	}

	/* Testimonials smaller */
	.asi-testimonials-row > .asi-testimonial-card {
		flex: 0 0 270px;
		padding: 1.25rem;
	}

	/* Newsletter full stack */
	.asi-newsletter-text {
		text-align: start;
	}

	/* Bulk orders tighter */
	.asi-homepage-bulk {
		padding: 2.5rem 1rem;
	}

	.asi-bulk-desc {
		font-size: 0.9375rem;
	}

	.asi-bulk-feature-card {
		padding: 1.25rem;
	}

	.asi-bulk-ctas {
		justify-content: center;
	}

	/* FAQ tighter */
	.asi-faq-columns {
		gap: 1.5rem;
	}
}

/* ─── Block editor card styles (moved from inline to CSS for validation) ─── */
.asi-testimonial-card {
	padding: 1.25rem 1.5rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	border-radius: 12px;
	background-color: #ffffff;
}
.asi-category-card {
	padding: 0;
	border-width: 0;
	border-radius: 16px;
	background-color: #ffffff;
	overflow: hidden;
}

/* ─── Category bubble placeholder (when no WC thumbnail) ─── */
.asi-bubble-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 1.75rem;
	font-weight: 700;
	color: #FFFFFF;
	background: linear-gradient(145deg, var(--wp--preset--color--accent-1), color-mix(in srgb, var(--wp--preset--color--accent-1) 70%, #013A7A));
	border-radius: 50%;
}

/* ═══════════════════════════════════════════════════════════════
 * ─── Cart Page ───
 * ═══════════════════════════════════════════════════════════════ */

/* Cart + Checkout — match header's 1280px content width */
.woocommerce-cart .wp-site-blocks > main,
.woocommerce-checkout .wp-site-blocks > main {
	max-inline-size: 1280px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--50);
}

/* Cart page top breathing room */
.woocommerce-cart .wp-block-woocommerce-cart {
	padding-block-start: 2rem;
}

/* ─── Cart + Checkout page hero strip ───
   Editorial title block matching the .asi-archive__hero pattern used
   on category pages. Off-white card, gradient bottom accent line,
   uppercase eyebrow with step indicator, big left-aligned title,
   muted meta line on the right side of the title row.
   Markup is rendered by asi_page_hero_title() in functions.php. */
.woocommerce-cart .asi-page-hero,
.woocommerce-checkout .asi-page-hero {
	position: relative;
	background: var(--wp--preset--color--accent-3);
	border-radius: 14px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	overflow: hidden;
	margin-block: 0 clamp(1.5rem, 3vw, 2.5rem);
	max-inline-size: 100%;
}

.woocommerce-cart .asi-page-hero__inner,
.woocommerce-checkout .asi-page-hero__inner {
	padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 3.5vw, 2.5rem) clamp(1rem, 2vw, 1.75rem);
}

.woocommerce-cart .asi-page-hero__accent,
.woocommerce-checkout .asi-page-hero__accent {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 2px;
	background: var(--asi-gradient-blue, linear-gradient(135deg, #0155B7, #013A7A));
	pointer-events: none;
}

/* Eyebrow — uppercase letterspaced step indicator */
.woocommerce-cart .asi-page-hero__eyebrow,
.woocommerce-checkout .asi-page-hero__eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--asi-font-family);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 60%, transparent);
	margin: 0 0 clamp(0.875rem, 2vw, 1.5rem);
}

.woocommerce-cart .asi-page-hero__eyebrow-label,
.woocommerce-checkout .asi-page-hero__eyebrow-label {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
}

.woocommerce-cart .asi-page-hero__eyebrow-sep,
.woocommerce-checkout .asi-page-hero__eyebrow-sep {
	opacity: 0.4;
}

/* Title row — title on the start, meta on the end */
.woocommerce-cart .asi-page-hero__title-row,
.woocommerce-checkout .asi-page-hero__title-row {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 0.5rem 2rem;
}

/* Title — big, weight 600, tight letter-spacing.
   Override the WPCode snippet rule that center-aligns and pads
   `.is-layout-constrained > .alignwide` site-wide; we need start
   alignment + zero padding inside the hero strip. */
.woocommerce-cart .asi-page-hero .wp-block-post-title,
.woocommerce-cart .asi-page-hero .wp-block-post-title.alignwide,
.woocommerce-checkout .asi-page-hero .wp-block-post-title,
.woocommerce-checkout .asi-page-hero .wp-block-post-title.alignwide {
	font-family: var(--asi-font-family) !important;
	font-size: clamp(1.875rem, 4.5vw, 3.25rem) !important;
	font-weight: 600 !important;
	line-height: 1.05 !important;
	letter-spacing: -0.02em !important;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--wp--preset--color--contrast) !important;
	text-align: start !important;
	max-inline-size: none !important;
}

[dir="rtl"] .woocommerce-cart .asi-page-hero .wp-block-post-title,
[dir="rtl"] .woocommerce-checkout .asi-page-hero .wp-block-post-title {
	font-family: var(--asi-font-family) !important;
	letter-spacing: 0 !important;
}

/* Meta — small muted caption next to the title */
.woocommerce-cart .asi-page-hero__meta,
.woocommerce-checkout .asi-page-hero__meta {
	font-family: var(--asi-font-family);
	font-size: 0.8125rem;
	font-weight: 500;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 60%, transparent);
	margin: 0 0 0.375rem;
	font-variant-numeric: tabular-nums;
	max-inline-size: 32ch;
	line-height: 1.4;
	flex-shrink: 0;
}

/* Hide any leftover bare post-title that might escape the hero wrapper
   (e.g. on archive endpoints we don't filter), keeping legacy rules
   from interfering with the wrapped version. */
.woocommerce-cart .wp-site-blocks > .wp-block-post-title,
.woocommerce-checkout .wp-site-blocks > .wp-block-post-title {
	max-inline-size: 100%;
}

/* Main layout — items + sidebar */
.wc-block-cart .wc-block-cart__main {
	background: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	border-radius: var(--asi-radius);
	padding: 1.5rem;
	box-shadow: var(--asi-shadow-sm);
}

/* ─── Table header row ─── */
.wc-block-cart .wc-block-cart-items th {
	font-family: var(--asi-font-family);
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--accent-4);
	padding-block-end: 1rem;
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
}

/* ─── Individual cart item row ─── */
.wc-block-cart-items__row {
	padding-block: 1.5rem;
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent);
	transition: background var(--asi-transition);
}

.wc-block-cart-items__row:last-child {
	border-block-end: none;
}

/* Product image */
.wc-block-cart-items__row .wc-block-cart-item__image {
	overflow: hidden;
	background: var(--wp--preset--color--accent-3);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	border-radius: 12px;
	inline-size: 100px;
	min-inline-size: 100px;
	block-size: 100px;
}

.wc-block-cart-items__row .wc-block-cart-item__image a {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	block-size: 100%;
}

.wc-block-cart-items__row .wc-block-cart-item__image img {
	border-radius: 0;
	object-fit: contain;
	mix-blend-mode: multiply;
	inline-size: 100%;
	block-size: 100%;
	padding: 0.375rem;
}

/* Vertically center the whole item row content */
.wc-block-cart-items__row td {
	vertical-align: middle;
}

/* Product name link */
.wc-block-cart-items__row .wc-block-components-product-name {
	font-family: var(--asi-font-family);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: color var(--asi-transition);
	line-height: 1.4;
}

.wc-block-cart-items__row .wc-block-components-product-name:hover {
	color: var(--wp--preset--color--accent-1);
}

/* Product metadata (short description) */
.wc-block-cart-items__row .wc-block-components-product-metadata {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--accent-4);
	margin-block-start: 0.25rem;
}

/* ─── Price styling ─── */
.wc-block-cart-items__row .wc-block-components-product-price {
	font-family: var(--asi-font-family);
	font-weight: 600;
	font-size: 1rem;
	color: var(--wp--preset--color--contrast);
}

/* Original price (strikethrough) */
.wc-block-cart-items__row .wc-block-components-product-price__regular {
	color: var(--wp--preset--color--accent-4);
	font-weight: 400;
	font-size: 0.8125rem;
	text-decoration: line-through;
}

/* Sale price */
.wc-block-cart-items__row .wc-block-components-product-price__value.is-discounted {
	color: var(--wp--preset--color--accent-1);
	font-weight: 700;
}

/* Savings badge */
.wc-block-cart-items__row .wc-block-components-sale-badge {
	display: inline-flex;
	align-items: center;
	font-family: var(--asi-font-family);
	font-size: 0.6875rem;
	font-weight: 600;
	background: color-mix(in srgb, var(--wp--preset--color--accent-2) 12%, transparent);
	color: #3d7a22;
	padding: 0.25rem 0.625rem;
	border-radius: var(--asi-radius-pill);
	border: none;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

/* ─── Quantity selector ─── */
.wc-block-cart-items__row .wc-block-components-quantity-selector {
	display: inline-flex;
	align-items: center;
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	border-radius: 10px;
	overflow: hidden;
	background: var(--wp--preset--color--base);
	transition: border-color var(--asi-transition);
}

.wc-block-cart-items__row .wc-block-components-quantity-selector:focus-within {
	border-color: var(--wp--preset--color--accent-1);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent-1) 12%, transparent);
}

.wc-block-cart-items__row .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	background: transparent;
	border: none;
	color: var(--wp--preset--color--accent-4);
	font-size: 1.125rem;
	font-weight: 500;
	min-inline-size: 36px;
	min-block-size: 36px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	line-height: 1;
	transition: background var(--asi-transition), color var(--asi-transition);
}

.wc-block-cart-items__row .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover {
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--accent-1);
}

.wc-block-cart-items__row .wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {
	font-family: var(--asi-font-family);
	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;
	inline-size: 40px;
	border: none;
	border-inline-start: 1.5px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	border-inline-end: 1.5px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	padding: 0;
	line-height: 1;
	block-size: 36px;
}

/* Remove item button (trash icon) */
.wc-block-cart-items__row .wc-block-cart-item__remove-link {
	font-size: 0;
	color: var(--wp--preset--color--accent-4);
	opacity: 0.6;
	transition: opacity var(--asi-transition), color var(--asi-transition);
	padding: 0.375rem;
	border-radius: 8px;
}

.wc-block-cart-items__row .wc-block-cart-item__remove-link:hover {
	color: #dc2626;
	opacity: 1;
	background: color-mix(in srgb, #dc2626 8%, transparent);
}

/* ─── Cart Totals Sidebar ─── */
.wc-block-cart .wc-block-cart__sidebar {
	position: sticky;
	inset-block-start: 2rem;
}

/* Card wrapper — target the order-summary block or totals-block as the card */
.wc-block-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-totals-block {
	background: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	border-radius: var(--asi-radius);
	box-shadow: var(--asi-shadow-sm);
	overflow: hidden;
}

/* Cart totals title — sized to read as a confident section heading,
   matching the cross-sells "shelf" heading visual weight. Sentence case
   + slim blue accent bar (vs the cross-sells orange) signals "this is
   the checkout decision zone", anchoring the sidebar as the page's
   primary action area. */
.wc-block-cart .wc-block-cart__totals-title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--asi-font-family);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.2px;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast);
	text-transform: none;
	padding: 1.25rem 1.5rem;
	margin: 0;
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	background: var(--wp--preset--color--base);
}

.wc-block-cart .wc-block-cart__totals-title::before {
	content: "";
	flex-shrink: 0;
	inline-size: 4px;
	block-size: 1.125rem;
	border-radius: 2px;
	background: var(--asi-gradient-blue);
}

/* ─── Totals rows — rigid 2-column ledger ───
   WC's default `.wc-block-components-totals-item` uses flex-wrap which,
   combined with the WPCode snippet's text-align inheritance and the
   sidebar's narrow width, causes the label and value to overlap each
   other. We force a strict CSS Grid layout: label in column 1, value
   in column 2, both on the same row. Grid placement makes overlap
   structurally impossible regardless of upstream rules.

   `position: static` on all descendants nukes any inherited absolute
   positioning that might be sneaking in from the React-rendered tree. */
.wc-block-cart .wc-block-components-totals-item {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 1rem;
	align-items: baseline;
	inline-size: 100% !important;
	box-sizing: border-box;
	padding-inline: 1.5rem !important;
	padding-block: 0.75rem !important;
	margin: 0 !important;
	position: relative;
}

.wc-block-cart .wc-block-components-totals-item > *,
.wc-block-cart .wc-block-components-totals-item > * > * {
	position: static !important;
}

.wc-block-cart .wc-block-components-totals-item__label {
	grid-column: 1 / 2;
	grid-row: 1;
	min-inline-size: 0;
	text-align: start !important;
	font-family: var(--asi-font-family);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--preset--color--accent-4);
	margin: 0 !important;
	padding: 0 !important;
	overflow-wrap: break-word;
}

.wc-block-cart .wc-block-components-totals-item__value {
	grid-column: 2 / 3;
	grid-row: 1;
	justify-self: end;
	text-align: end !important;
	font-family: var(--asi-font-family);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--contrast);
	margin: 0 !important;
	padding: 0 !important;
	white-space: nowrap;
}

/* Optional description line — spans full width on its own grid row */
.wc-block-cart .wc-block-components-totals-item__description {
	grid-column: 1 / -1;
	grid-row: 2;
	font-family: var(--asi-font-family);
	font-size: 0.75rem;
	color: var(--wp--preset--color--accent-4);
	margin-block-start: 0.25rem;
	text-align: start;
}

/* "FREE" shipping value — when shipping is free WC outputs the literal
   word "FREE" in <strong>. Style it as a quiet green pill so it reads
   as a savings signal without competing with the estimated total. */
.wc-block-cart .wc-block-components-totals-shipping .wc-block-components-totals-item__value strong,
.wc-block-cart .wc-block-components-totals-item__value strong {
	display: inline-flex;
	align-items: center;
	padding-inline: 0.625rem;
	padding-block: 0.1875rem;
	font-family: var(--asi-font-family);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #2e7d22;
	background: color-mix(in srgb, var(--wp--preset--color--accent-2) 14%, transparent);
	border-radius: 999px;
	line-height: 1.4;
}

/* ─── Coupon section ─── */
.wc-block-cart .wc-block-components-totals-coupon {
	padding-inline: 1.5rem;
	padding-block: 0.875rem;
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent);
}

/* Coupon toggle — the "Add coupons" dropdown/panel trigger */
.wc-block-cart .wc-block-components-totals-coupon .wc-block-components-panel__button,
.wc-block-cart .wc-block-components-totals-coupon > .wc-block-components-panel > .wc-block-components-panel__button {
	font-family: var(--asi-font-family);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--preset--color--accent-4);
	cursor: pointer;
	background: transparent;
	border: none;
	padding: 0.5rem 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	inline-size: 100%;
}

.wc-block-cart .wc-block-components-totals-coupon .wc-block-components-panel__button:hover {
	color: var(--wp--preset--color--accent-1);
}

/* Panel wrapper in sidebar — no extra border/outline */
.wc-block-cart .wc-block-cart__sidebar .wc-block-components-panel {
	border: none;
	margin: 0;
}

.wc-block-cart .wc-block-components-totals-coupon__button {
	font-family: var(--asi-font-family);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--preset--color--accent-1);
	cursor: pointer;
}

.wc-block-cart .wc-block-components-totals-coupon__button:hover {
	text-decoration: underline;
}

/* Coupon input */
.wc-block-cart .wc-block-components-totals-coupon__content .wc-block-components-text-input input,
.wc-block-cart .wc-block-components-totals-coupon .wc-block-components-text-input input {
	border-radius: 10px;
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	font-family: var(--asi-font-family);
	font-size: 0.875rem;
	padding: 0.75rem 1rem;
	transition: border-color var(--asi-transition), box-shadow var(--asi-transition);
}

.wc-block-cart .wc-block-components-totals-coupon__content .wc-block-components-text-input input:focus,
.wc-block-cart .wc-block-components-totals-coupon .wc-block-components-text-input input:focus {
	border-color: var(--wp--preset--color--accent-1);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent-1) 12%, transparent);
	outline: none;
}

/* Coupon apply button */
.wc-block-cart .wc-block-components-totals-coupon__content .wc-block-components-button,
.wc-block-cart .wc-block-components-totals-coupon .wc-block-components-button {
	font-family: var(--asi-font-family);
	font-weight: 600;
	font-size: 0.8125rem;
	background: var(--wp--preset--color--accent-1);
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 0.625rem 1.25rem;
	cursor: pointer;
	transition: background var(--asi-transition);
}

.wc-block-cart .wc-block-components-totals-coupon__content .wc-block-components-button:hover,
.wc-block-cart .wc-block-components-totals-coupon .wc-block-components-button:hover {
	background: #013A7A;
}

/* ─── Estimated total ───
   Footer item shares the base `wc-block-components-totals-item` class
   so it inherits the grid layout. We override padding (more breathing
   room) and bump font sizes for primary visual weight. */
.wc-block-cart .wc-block-components-totals-footer-item {
	padding-inline: 1.5rem !important;
	padding-block: 1.25rem !important;
	border-block-start: 2px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
}

.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-family: var(--asi-font-family);
	font-size: 1rem !important;
	font-weight: 700 !important;
	color: var(--wp--preset--color--contrast) !important;
}

.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--asi-font-family);
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	color: var(--wp--preset--color--accent-1) !important;
}

/* ─── Proceed to Checkout button ─── */
.wc-block-cart .wc-block-cart__submit-container {
	padding: 1.25rem 1.5rem;
}

.wc-block-cart .wc-block-cart__submit-button {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	padding: 0.9375rem 2rem;
	font-family: var(--asi-font-family);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #fff;
	background: var(--asi-gradient-blue);
	border: none;
	border-radius: 12px;
	cursor: pointer;
	transition: transform var(--asi-transition), box-shadow var(--asi-transition);
	box-shadow: 0 4px 14px color-mix(in srgb, var(--wp--preset--color--accent-1) 30%, transparent);
}

.wc-block-cart .wc-block-cart__submit-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 20px color-mix(in srgb, var(--wp--preset--color--accent-1) 40%, transparent);
}

.wc-block-cart .wc-block-cart__submit-button:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px color-mix(in srgb, var(--wp--preset--color--accent-1) 25%, transparent);
}

.wc-block-cart .wc-block-cart__submit-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
}

/* ─── Shipping calculator ─── */
.wc-block-cart .wc-block-components-shipping-calculator {
	padding-inline: 1.5rem;
}

.wc-block-cart .wc-block-components-shipping-rates-control {
	padding-inline: 1.5rem;
}

/* Sidebar inner wrapper spacing */
.wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-wrapper {
	padding: 0;
	border: none;
}

/* Remove default WC border on totals rows inside sidebar */
.wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-wrapper::after,
.wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-wrapper::before {
	display: none;
}

/* Main card — no excess bottom space */
.wc-block-cart .wc-block-cart__main .wc-block-cart-items {
	margin-block-end: 0;
}

/* ═══════════════════════════════════════════════════════════════
 * ─── Cart Cross-Sells — Editorial Marketplace Shelf ───
 *
 * Lives inside .wc-block-cart-items-block as a sibling of the line
 * items, rendered by a `wp:woocommerce/product-collection` block with
 * collection: "cross-sells". The wrapper has class `asi-cart-shelf`
 * (added via the cart page content) so we have a stable hook even if
 * WC's internal class names change. The heading is a regular
 * `wp:heading` block with class `asi-cart-shelf__heading`.
 *
 * Design intent: a "by the way..." upsell that respects the cart as a
 * serious financial moment. Three differentiation moves:
 *
 *   1. Price-first typography — flip the convention so the price reads
 *      as the headline (bold brand blue), name as the supporting caption.
 *      This is how shelf labels work in real grocery stores in Kuwait.
 *
 *   2. Horizontal river, no chrome — cards float on the shelf with no
 *      borders, backgrounds, or shadows of their own. The grid is
 *      implied by spacing. Last card peeks past the right edge to
 *      signal "more on scroll."
 *
 *   3. Pill action with subtle motion — Add button is a gradient pill
 *      that lifts on hover with exponential ease (no bounce).
 *
 * Separation strategy: negative inline + block-end margins break out
 * of the cart-card padding to create a full-width off-white "shelf"
 * panel. The contrast (white-card → off-white-shelf → bare-floating
 * cards) reads as a distinct module without nested boxes-in-boxes.
 * ═══════════════════════════════════════════════════════════════ */
.wp-block-woocommerce-cart .asi-cart-shelf,
.wc-block-cart .wp-block-woocommerce-product-collection.asi-cart-shelf {
	margin-block: 3.5rem -1.5rem 0;
	margin-inline: -1.5rem;
	padding: 2.5rem 1.5rem 2.75rem;
	background: var(--wp--preset--color--accent-3);
	border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	border-end-start-radius: var(--asi-radius);
	border-end-end-radius: var(--asi-radius);
	max-inline-size: none;
}

/* Section heading — uppercase eyebrow. Quiet, deferential, defers to
   the cards. Override the heavy 1.5rem 500-weight default WPCode
   styling and any inherited block-style heading rules. */
.wp-block-woocommerce-cart .asi-cart-shelf .asi-cart-shelf__heading,
.wp-block-woocommerce-cart .asi-cart-shelf > h2.wp-block-heading {
	font-family: var(--asi-font-family) !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em;
	line-height: 1.4 !important;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-4) !important;
	margin: 0 0 1.75rem !important;
	padding-inline-start: 0.25rem;
	text-align: start !important;
}

/* ─── Horizontal river ───
   Override WC's grid layout with a flex scroll-snap container. Negative
   end margin lets the last card peek past the shelf padding, hinting at
   "more on scroll" without needing nav arrows. */
.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product-template,
.wp-block-woocommerce-cart .asi-cart-shelf ul.wc-block-product-template,
.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product-template.columns-8 {
	display: flex !important;
	flex-wrap: nowrap !important;
	grid-template-columns: none !important;
	gap: 1rem !important;
	margin: 0 -1.5rem 0 0 !important;
	padding: 0 0 0.75rem !important;
	list-style: none !important;
	overflow-x: auto;
	overflow-y: visible;
	scroll-snap-type: x mandatory;
	scroll-padding-inline-start: 0;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product-template::-webkit-scrollbar {
	display: none;
}

[dir="rtl"] .wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product-template {
	margin: 0 0 0 -1.5rem !important;
}

/* ─── Product card — bare float, no chrome ───
   Fixed-width flex item, no border / background / shadow of its own.
   The card is defined by typographic rhythm and the image well. */
.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product-template > li,
.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product {
	display: flex !important;
	flex-direction: column !important;
	flex: 0 0 168px !important;
	inline-size: 168px !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-align: start !important;
	scroll-snap-align: start;
	position: relative;
	overflow: visible !important;
	transition: none !important;
}

/* Product image — square frame on white. Subtle inner border + soft
   lift on hover give the float a tactile feel without nesting cards. */
.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product .wc-block-components-product-image,
.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product-template > li .wc-block-components-product-image {
	order: 1;
	display: flex !important;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	margin: 0 0 0.875rem !important;
	padding: 0.875rem !important;
	background: var(--wp--preset--color--base) !important;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent) !important;
	border-radius: 14px !important;
	overflow: hidden !important;
	transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
	position: relative !important;
}

.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product:hover .wc-block-components-product-image,
.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product-template > li:hover .wc-block-components-product-image {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
}

.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product .wc-block-components-product-image img,
.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product-template > li .wc-block-components-product-image img {
	inline-size: auto !important;
	max-inline-size: 100% !important;
	max-block-size: 100% !important;
	block-size: auto !important;
	object-fit: contain !important;
	mix-blend-mode: multiply;
	margin: 0 auto !important;
	transform: none !important;
}

/* Disable the WC default image-zoom on hover — we lift the whole frame instead */
.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product:hover .wc-block-components-product-image img {
	transform: none !important;
}

/* Sale badge — pinned to the image well's top-start corner.
   Override the WPCode rule that hid it (display:none). */
.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product .wc-block-components-product-sale-badge,
.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product .wc-block-components-product-sale-badge.alignright,
.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product .wc-block-components-product-sale-badge__text {
	display: inline-flex !important;
	position: absolute;
	inset-block-start: 0.625rem;
	inset-inline-start: 0.625rem;
	z-index: 2;
	font-family: var(--asi-font-family) !important;
	font-size: 0.625rem !important;
	font-weight: 700 !important;
	background: var(--wp--preset--color--warm-orange) !important;
	color: #fff !important;
	padding: 0.1875rem 0.5rem !important;
	border-radius: 999px !important;
	border: none !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	line-height: 1.2 !important;
	box-shadow: 0 2px 6px color-mix(in srgb, var(--wp--preset--color--warm-orange) 35%, transparent) !important;
	float: none !important;
	margin: 0 !important;
	inline-size: auto !important;
	block-size: auto !important;
}

/* ─── Price = THE HEADLINE ───
   Largest text on the card. Brand blue, tabular numerals, slightly
   tracked tight. Sits between image and title via flex order. */
.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product .wc-block-components-product-price,
.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product .wp-block-woocommerce-product-price {
	order: 2;
	display: block !important;
	font-family: var(--asi-font-family) !important;
	font-size: 1.0625rem !important;
	font-weight: 700 !important;
	color: var(--wp--preset--color--accent-1) !important;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	line-height: 1.2 !important;
	margin: 0 0 0.25rem !important;
	padding: 0 !important;
	text-align: start !important;
}

.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product .wc-block-components-product-price del,
.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product .wc-block-components-product-price del .woocommerce-Price-amount {
	display: inline-block;
	color: var(--wp--preset--color--accent-4) !important;
	font-weight: 400 !important;
	font-size: 0.75rem !important;
	margin-inline-end: 0.375rem;
	text-decoration: line-through;
}

.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product .wc-block-components-product-price ins,
.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product .wc-block-components-product-price ins .woocommerce-Price-amount,
.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product .wc-block-components-product-price .woocommerce-Price-amount {
	text-decoration: none;
	color: var(--wp--preset--color--accent-1) !important;
	font-weight: 700 !important;
	font-size: 1.0625rem !important;
}

/* ─── Title = quiet caption ───
   Smaller, muted, sits below the price. Two-line clamp keeps cards
   visually aligned across the row. */
.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product .wp-block-post-title,
.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product h3.wp-block-post-title {
	order: 3;
	font-family: var(--asi-font-family) !important;
	font-size: 0.75rem !important;
	font-weight: 500 !important;
	line-height: 1.45 !important;
	color: var(--wp--preset--color--accent-4) !important;
	text-transform: none;
	text-decoration: none;
	margin: 0 0 0.875rem !important;
	padding: 0 !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-block-size: calc(0.75rem * 1.45 * 2);
	text-align: start !important;
}

.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product .wp-block-post-title a {
	color: inherit !important;
	text-decoration: none !important;
	transition: color 200ms ease;
}

.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product:hover .wp-block-post-title a {
	color: var(--wp--preset--color--contrast) !important;
}

/* ─── Add button — gradient pill ───
   Order 4: anchored to the bottom of the card via auto margin. Lifts
   on hover with exponential ease (no bounce). */
.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product .wp-block-woocommerce-product-button,
.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product .wc-block-components-product-button {
	order: 4;
	margin: auto 0 0 !important;
	padding: 0 !important;
	text-align: start !important;
}

/* Ghost pill — subordinate to the primary "Proceed to Checkout" CTA.
   Outlined by default with brand-blue text and a hairline border, fills
   with brand blue on hover. Subtle, refined, doesn't compete visually
   with the gradient checkout button in the sidebar. */
.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product .wc-block-components-product-button__button,
.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product .wc-block-components-product-button .wp-block-button__link {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	inline-size: 100% !important;
	margin: 0 !important;
	padding: 0.5rem 0.875rem !important;
	font-family: var(--asi-font-family) !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--accent-1) !important;
	background: transparent !important;
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--accent-1) 28%, transparent) !important;
	border-radius: 999px !important;
	cursor: pointer;
	transition: background 220ms ease, color 220ms ease, border-color 220ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
	box-shadow: none !important;
	text-decoration: none !important;
}

.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product .wc-block-components-product-button__button:hover,
.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product .wc-block-components-product-button .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent-1) !important;
	color: #fff !important;
	border-color: var(--wp--preset--color--accent-1) !important;
	transform: translateY(-1px);
}

.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product .wc-block-components-product-button__button:focus-visible,
.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product .wc-block-components-product-button .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
}

/* In-cart state — when WC swaps to "X in cart" via React, the button
   gets `.added` class. Transform the pill to outlined so it reads as
   "already in basket" without competing with the primary "Add" pills. */
.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product .wc-block-components-product-button__button.added,
.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product .wc-block-components-product-button .wp-block-button__link.added {
	background: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--accent-1) !important;
	border-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 35%, transparent) !important;
	box-shadow: none !important;
	cursor: default;
}

.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product .wc-block-components-product-button__button.added:hover,
.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product .wc-block-components-product-button .wp-block-button__link.added:hover {
	transform: none;
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 6%, var(--wp--preset--color--base)) !important;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product .wc-block-components-product-image,
	.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product .wc-block-components-product-button__button,
	.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product .wc-block-components-product-button .wp-block-button__link {
		transition: none;
	}
	.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product-template {
		scroll-behavior: auto;
	}
}

/* Hide the "View cart" link that WooCommerce appends after AJAX add —
   users are already on the cart page, so the link is redundant. */
.wc-block-cart .added_to_cart,
.woocommerce-cart .added_to_cart {
	display: none !important;
}

/* ─── Free-delivery progress hint ───
   Sits inside the order summary card, immediately below the "Order
   summary" heading and above the totals rows. Server-rendered for the
   initial state, kept in sync via assets/js/cart-freeship.js which
   subscribes to wc/store/cart. Two visual states:
     • In progress  — orange bar fills toward the threshold
     • Qualified    — green bar full + check icon + celebration text */
.wc-block-cart .asi-freeship {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	padding: 0.875rem 1.5rem 1.125rem;
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
}

.wc-block-cart .asi-freeship__msg {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--asi-font-family);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--wp--preset--color--accent-4);
	line-height: 1.4;
}

.wc-block-cart .asi-freeship__text {
	flex: 1;
	min-inline-size: 0;
}

.wc-block-cart .asi-freeship__text strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.wc-block-cart .asi-freeship__icon {
	flex-shrink: 0;
	color: var(--wp--preset--color--warm-orange);
}

/* Show truck in progress state, hide check */
.wc-block-cart .asi-freeship__icon--check {
	display: none;
}

.wc-block-cart .asi-freeship__bar {
	position: relative;
	block-size: 6px;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	border-radius: 999px;
	overflow: hidden;
}

.wc-block-cart .asi-freeship__fill {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: 0%;
	background: var(--asi-gradient-orange);
	border-radius: 999px;
	transition: inline-size 360ms cubic-bezier(0.22, 1, 0.36, 1), background 240ms ease;
}

/* ─── Qualified state — celebration ─── */
.wc-block-cart .asi-freeship.is-qualified .asi-freeship__msg {
	color: #2e7d22;
	font-weight: 600;
}

.wc-block-cart .asi-freeship.is-qualified .asi-freeship__icon--truck {
	display: none;
}

.wc-block-cart .asi-freeship.is-qualified .asi-freeship__icon--check {
	display: block;
	color: #2e7d22;
}

.wc-block-cart .asi-freeship.is-qualified .asi-freeship__fill {
	background: linear-gradient(135deg, #72B94A, #5A9A38);
}

@media (prefers-reduced-motion: reduce) {
	.wc-block-cart .asi-freeship__fill {
		transition: none;
	}
}

/* ─── Cart Trust Block — last-mile reassurance ───
   Sits as a sibling of the proceed-to-checkout-block inside the white
   .wp-block-woocommerce-cart-totals-block card. Treated as a sub-section
   of the totals card (off-white background, top hairline, no card chrome
   of its own) so we never get a nested-card look. Just three quiet
   trust signals — security/payment chrome lives elsewhere on the page. */
.wc-block-cart .asi-cart-trust {
	margin: 0;
	padding: 1.125rem 1.5rem 1.25rem;
	background: var(--wp--preset--color--accent-3);
	border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
}

/* Hide WC's default accepted-payment-methods-block — payment methods
   are already in the footer, no need to repeat them here. */
.wc-block-cart .wp-block-woocommerce-cart-accepted-payment-methods-block {
	display: none !important;
}

.wc-block-cart .asi-cart-trust__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.wc-block-cart .asi-cart-trust__list li {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-family: var(--asi-font-family);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--wp--preset--color--accent-4);
	line-height: 1.4;
}

.wc-block-cart .asi-cart-trust__list svg {
	flex-shrink: 0;
	color: var(--wp--preset--color--accent-1);
}

/* MyFatoorah brand wordmark inside the trust strip — slightly stronger
 * weight, tinted to MF's brand red. Keeps the line readable as a sentence
 * while letting the brand mark stand out without screaming. */
.wc-block-cart .asi-cart-trust__mf {
	font-weight: 700;
	color: #c32e2e;
	letter-spacing: -0.01em;
}

/* ─── Empty Cart State — Editorial Welcome ───
   An asymmetric two-column hero (text + custom basket illustration) that
   replaces the sterile centered column. Below it: image-driven category
   cards that match the homepage card family, then a best-sellers row
   reusing the [asi_featured_products] carousel. Three trust signals as
   inline icon+label pillars. Scoped to .asi-empty-cart since the WC
   block wrapper class is unstable across versions. */

.asi-empty-cart {
	display: flex;
	flex-direction: column;
	gap: clamp(2.5rem, 5vw, 4rem);
	max-inline-size: 1200px;
	margin-inline: auto;
	padding-block: clamp(1rem, 2.5vw, 2rem);
	font-family: var(--asi-font-family);
	color: var(--wp--preset--color--contrast);
}

/* ── Hero ──────────────────────────────────────────────────────── */
.asi-empty-cart__hero {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 3vw, 2rem);
	align-items: center;
	background: var(--wp--preset--color--accent-3);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	border-radius: 20px;
	padding: clamp(1.75rem, 4vw, 3.25rem);
	overflow: hidden;
}

/* Bottom gradient strip — mirrors the page-hero accent */
.asi-empty-cart__hero::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 3px;
	background: var(--asi-gradient-blue);
	pointer-events: none;
}

/* Soft blue glow in the start corner — a ghost of the brand */
.asi-empty-cart__hero::before {
	content: '';
	position: absolute;
	inset-inline-start: -6rem;
	inset-block-start: -6rem;
	inline-size: 22rem;
	block-size: 22rem;
	background: radial-gradient(circle at center, color-mix(in srgb, var(--wp--preset--color--accent-1) 12%, transparent) 0%, transparent 70%);
	pointer-events: none;
	z-index: 0;
}

@media (min-width: 900px) {
	.asi-empty-cart__hero {
		grid-template-columns: 1.05fr 0.95fr;
		gap: clamp(2rem, 4vw, 3.5rem);
	}
}

.asi-empty-cart__hero-text {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	min-inline-size: 0; /* allow flex/grid child to shrink below content width */
	max-inline-size: 36rem;
}

/* Eyebrow — uppercase letterspaced label with a small dot */
.asi-empty-cart__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1rem;
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 60%, transparent);
}

.asi-empty-cart__eyebrow-dot {
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-1);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--wp--preset--color--accent-1) 18%, transparent);
}

/* Editorial headline — split feel via italic em accent */
.asi-empty-cart__headline {
	inline-size: 100%; /* allow natural wrapping on mobile despite flex-start parent */
	margin: 0 0 0.875rem;
	font-family: var(--asi-font-family);
	font-size: clamp(1.75rem, 4.2vw, 2.75rem);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast);
}

/* Keep "Your basket is empty." on a single line at desktop where the
   two-column hero gives the headline column enough room. Mobile still
   allows natural wrapping. */
@media (min-width: 900px) {
	.asi-empty-cart__headline {
		white-space: nowrap;
	}
}

.asi-empty-cart__headline em {
	font-style: italic;
	font-weight: 500;
	background: var(--asi-gradient-blue);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

[dir="rtl"] .asi-empty-cart__headline {
	letter-spacing: 0;
}

[dir="rtl"] .asi-empty-cart__headline em {
	font-style: normal; /* Tajawal italic isn't loaded; rely on color accent only */
}

.asi-empty-cart__subtitle {
	margin: 0 0 1.5rem;
	font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
	line-height: 1.55;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 72%, transparent);
}

/* Action row — primary gradient button + ghost link */
.asi-empty-cart__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem 0.875rem;
	margin-block-end: 2rem;
}

.asi-empty-cart__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.9rem 1.5rem;
	font-family: var(--asi-font-family);
	font-size: 0.9375rem;
	font-weight: 600;
	border-radius: 12px;
	text-decoration: none;
	transition: transform var(--asi-transition), box-shadow var(--asi-transition), background var(--asi-transition), color var(--asi-transition);
}

.asi-empty-cart__cta--primary {
	color: #fff;
	background: var(--asi-gradient-blue);
	box-shadow: 0 6px 18px color-mix(in srgb, var(--wp--preset--color--accent-1) 32%, transparent);
}

.asi-empty-cart__cta--primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 24px color-mix(in srgb, var(--wp--preset--color--accent-1) 42%, transparent);
}

.asi-empty-cart__cta--ghost {
	color: var(--wp--preset--color--contrast);
	background: transparent;
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent);
}

.asi-empty-cart__cta--ghost:hover {
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 6%, transparent);
	border-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--accent-1);
}

.asi-empty-cart__cta svg {
	flex-shrink: 0;
}

[dir="rtl"] .asi-empty-cart__cta svg {
	transform: scaleX(-1);
}

/* Trust pillars — three icon+label items, inline strip */
.asi-empty-cart__assurances {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	font-size: 0.8125rem;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 70%, transparent);
}

.asi-empty-cart__assurances li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.asi-empty-cart__assurances svg {
	color: var(--wp--preset--color--accent-1);
	flex-shrink: 0;
}

/* Hero illustration — fills its column on desktop, scales down on mobile */
.asi-empty-cart__hero-visual {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	max-inline-size: 32rem;
	margin-inline: auto;
	inline-size: 100%;
}

.asi-empty-cart__hero-visual svg {
	max-block-size: clamp(18rem, 36vw, 26rem);
	display: block;
	filter: drop-shadow(0 16px 30px rgba(15, 23, 42, 0.06));
}

/* Gentle float animations on the three product shapes. CSS transforms
   override the SVG `transform` attribute, so each keyframe restates the
   static translate alongside the small Y-offset to keep the X-position. */
@media (prefers-reduced-motion: no-preference) {
	.asi-empty-cart__float--a {
		animation: asi-empty-cart-float-a 6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
	}
	.asi-empty-cart__float--b {
		animation: asi-empty-cart-float-b 7s cubic-bezier(0.45, 0, 0.55, 1) -2s infinite;
	}
	.asi-empty-cart__float--c {
		animation: asi-empty-cart-float-c 6.5s cubic-bezier(0.45, 0, 0.55, 1) -4s infinite;
	}

	@keyframes asi-empty-cart-float-a {
		0%, 100% { transform: translate(155px, 50px); }
		50%      { transform: translate(155px, 42px); }
	}
	@keyframes asi-empty-cart-float-b {
		0%, 100% { transform: translate(232px, 30px); }
		50%      { transform: translate(232px, 22px); }
	}
	@keyframes asi-empty-cart-float-c {
		0%, 100% { transform: translate(305px, 55px); }
		50%      { transform: translate(305px, 47px); }
	}
}

/* ── Section header (categories + bestsellers) ───────────────── */
.asi-empty-cart__section-header {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin-block-end: clamp(1.25rem, 2.5vw, 1.75rem);
	padding-inline: clamp(0.25rem, 1.5vw, 0.5rem);
}

.asi-empty-cart__section-eyebrow {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--accent-1);
}

.asi-empty-cart__section-title {
	margin: 0;
	font-family: var(--asi-font-family);
	font-size: clamp(1.375rem, 2.5vw, 1.75rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast);
}

[dir="rtl"] .asi-empty-cart__section-title {
	letter-spacing: 0;
}

/* ── Category cards ──────────────────────────────────────────── */
.asi-empty-cart__cats-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.875rem;
}

@media (min-width: 600px) {
	.asi-empty-cart__cats-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.asi-empty-cart__cats-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 1rem;
	}
}

.asi-empty-cart__cat {
	--cat-accent: var(--wp--preset--color--accent-1);
	position: relative;
	background: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	border-radius: 16px;
	overflow: hidden;
	transition: transform var(--asi-transition), box-shadow var(--asi-transition), border-color var(--asi-transition);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.asi-empty-cart__cat--blue   { --cat-accent: #0155B7; }
.asi-empty-cart__cat--orange { --cat-accent: #F59E0B; }
.asi-empty-cart__cat--green  { --cat-accent: #72B94A; }

/* Color-coded inline-start strip — distinguishes cards without screaming */
.asi-empty-cart__cat::before {
	content: '';
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: 4px;
	background: var(--cat-accent);
	z-index: 1;
	transition: inline-size var(--asi-transition);
}

.asi-empty-cart__cat:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--cat-accent) 35%, transparent);
	box-shadow: 0 12px 28px color-mix(in srgb, var(--cat-accent) 14%, transparent);
}

.asi-empty-cart__cat:hover::before {
	inline-size: 6px;
}

.asi-empty-cart__cat-link {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	align-items: center;
	gap: 0.875rem;
	padding-block: 0.875rem;
	padding-inline-start: 1.25rem; /* extra room next to the colored start-edge strip */
	padding-inline-end: 1rem;
	text-decoration: none;
	color: inherit;
}

.asi-empty-cart__cat-img {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 64px;
	block-size: 64px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--cat-accent) 8%, var(--wp--preset--color--accent-3));
	color: var(--cat-accent);
	overflow: hidden;
	flex-shrink: 0;
}

.asi-empty-cart__cat-img img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform var(--asi-transition-slow);
}

.asi-empty-cart__cat:hover .asi-empty-cart__cat-img img {
	transform: scale(1.06);
}

.asi-empty-cart__cat-body {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-inline-size: 0;
}

.asi-empty-cart__cat-name {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.asi-empty-cart__cat-count {
	font-size: 0.75rem;
	font-weight: 500;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent);
}

.asi-empty-cart__cat-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 32px;
	block-size: 32px;
	border-radius: 50%;
	color: var(--cat-accent);
	background: color-mix(in srgb, var(--cat-accent) 10%, transparent);
	transition: background var(--asi-transition), translate var(--asi-transition);
	flex-shrink: 0;
}

.asi-empty-cart__cat:hover .asi-empty-cart__cat-arrow {
	background: var(--cat-accent);
	color: #fff;
	translate: 2px 0;
}

[dir="rtl"] .asi-empty-cart__cat-arrow svg {
	transform: scaleX(-1);
}

[dir="rtl"] .asi-empty-cart__cat:hover .asi-empty-cart__cat-arrow {
	translate: -2px 0;
}

/* ── Best sellers section ────────────────────────────────────── */
.asi-empty-cart__bestsellers {
	scroll-margin-block-start: 6rem;
}

/* Reusing [asi_featured_products] — no override needed; it brings its
   own styling via .asi-product-slider. */

/* ── Mobile fine-tuning ──────────────────────────────────────── */
@media (max-width: 599px) {
	.asi-empty-cart__hero {
		padding: 1.5rem 1.25rem 1.75rem;
	}

	.asi-empty-cart__hero-visual {
		order: -1; /* Illustration above text feels welcoming on small screens */
		max-inline-size: 18rem;
	}

	.asi-empty-cart__hero-visual svg {
		max-block-size: 14rem;
	}

	.asi-empty-cart__actions {
		inline-size: 100%;
	}

	.asi-empty-cart__cta {
		flex: 1 1 100%;
		justify-content: center;
	}

	.asi-empty-cart__assurances {
		flex-direction: column;
		gap: 0.5rem;
	}

	.asi-empty-cart__cat-link {
		padding-block: 0.75rem;
		padding-inline-start: 1.125rem;
		padding-inline-end: 0.875rem;
		gap: 0.75rem;
	}

	.asi-empty-cart__cat-img {
		inline-size: 56px;
		block-size: 56px;
	}
}

/* ─── Cart page Mobile + Tablet (≤899px) ─────────────────────────
   Editorial card-per-item layout that matches the empty-cart aesthetic:
   product image on the start, content stacked on the end column with
   name + line-total on the same row at top, prices below, then a quiet
   bottom row with qty stepper + remove link.

   WC ships its own container-query grid (`@container (max-width: 699px)`
   on .wp-block-woocommerce-cart) plus JS-applied `.is-mobile/is-small/
   is-medium` classes that re-grid the row into a 80px+132px layout and
   hide the remove link. We need higher selector specificity than those
   to win the cascade, and we need to also flatten the inner
   `.wc-block-cart-item__wrap` div with `display: contents` so name/
   prices/meta/qty become direct grid items of the row. The
   `body.woocommerce-cart` prefix gives us specificity (0,5,1+) that
   beats every WC selector for these rules. */
@media (max-width: 899px) {
	/* Roomier wrapping panels */
	.wc-block-cart .wc-block-cart__main {
		padding: 0.75rem;
		border-radius: 14px;
		background: var(--wp--preset--color--accent-3);
		border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent);
		box-shadow: none;
	}

	.wc-block-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-totals-block {
		border-radius: 14px;
	}

	/* Hide table header on mobile — visual hierarchy comes from the cards */
	.wp-block-woocommerce-cart table.wc-block-cart-items thead { display: none; }

	/* Collapse the table so we can use grid layout per row */
	.wp-block-woocommerce-cart table.wc-block-cart-items,
	.wp-block-woocommerce-cart table.wc-block-cart-items tbody {
		display: block;
		inline-size: 100%;
	}

	/* Each row becomes its own card, gap-stacked vertically.
	   minmax(0, 1fr) on the name column prevents long names from forcing
	   the row wider than the container; max-content on the total column
	   keeps the price compact while still giving it the room it needs.
	   Selector is intentionally specific (0,3,2) to beat WC's container-
	   query and `.is-mobile/.is-small/.is-medium` overrides. */
	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row {
		display: grid;
		grid-template-columns: 96px minmax(0, 1fr) max-content;
		grid-template-areas:
			"img  name      total"
			"img  prices    prices"
			"img  delivery  delivery"
			"img  meta      meta"
			"img  qty       qty";
		column-gap: 1rem;
		row-gap: 0.375rem;
		align-items: center;
		background: var(--wp--preset--color--base);
		border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
		border-radius: 14px;
		padding: 0.875rem 1rem;
		margin-block-end: 0.625rem;
		box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
		transition: border-color var(--asi-transition), box-shadow var(--asi-transition);
	}

	/* "Get it tomorrow" delivery pill — warm-orange tinted, sits between
	   the price row and the metadata. Content comes from a CSS variable
	   set via PHP so the label is translatable. */
	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row::after {
		content: var(--asi-cart-delivery-label, "Get it tomorrow");
		grid-area: delivery;
		justify-self: start;
		display: inline-flex;
		align-items: center;
		gap: 0.375rem;
		padding: 0.3125rem 0.625rem;
		font-family: var(--asi-font-family);
		font-size: 0.625rem;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: #7C4A03;
		background: color-mix(in srgb, #F59E0B 18%, transparent);
		border: 1px solid color-mix(in srgb, #F59E0B 38%, transparent);
		border-radius: var(--asi-radius-pill);
		margin-block-start: 0.125rem;
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row:last-child {
		margin-block-end: 0;
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row:hover {
		border-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 24%, transparent);
		box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
	}

	/* Reset td default cell behaviour */
	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row td {
		display: block;
		padding: 0;
	}

	/* Flatten the product cell + its inner __wrap div so their children
	   become direct grid items of the row. WC nests:
	     <td .wc-block-cart-item__product>
	       <div .wc-block-cart-item__wrap>name, prices, meta, qty</div>
	     </td>
	   Both layers need `display: contents` to expose the leaf children. */
	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product,
	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap {
		display: contents;
	}

	/* Image — fixed start column, vertically centered with the content */
	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
		grid-area: img;
		inline-size: 96px;
		min-inline-size: 96px;
		block-size: 96px;
		background: var(--wp--preset--color--accent-3);
		border-radius: 12px;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: contain;
		mix-blend-mode: multiply;
		padding: 0.375rem;
	}

	/* Name — top of content column, allowed to wrap to 2 lines max */
	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
		grid-area: name;
		font-family: var(--asi-font-family);
		font-size: 0.9375rem;
		font-weight: 600;
		line-height: 1.35;
		color: var(--wp--preset--color--contrast);
		text-decoration: none;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		max-inline-size: none;
		margin: 0;
	}

	/* Line total — top-end corner, brand-blue and bold */
	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
		grid-area: total;
		display: block;
		text-align: end;
		align-self: start;
		font-size: 0.9375rem;
		font-weight: 700;
		color: var(--wp--preset--color--accent-1);
		white-space: nowrap;
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total .wc-block-components-product-price {
		font-size: 0.9375rem;
		font-weight: 700;
		color: var(--wp--preset--color--accent-1);
	}

	/* Sale badge — small, sits under the total */
	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-sale-badge {
		font-size: 0.625rem;
		font-weight: 600;
		padding: 0.1875rem 0.5rem;
		margin-block-start: 0.25rem;
		display: inline-block;
		background: color-mix(in srgb, var(--wp--preset--color--accent-2) 18%, transparent);
		color: #2D5C18;
		border-radius: var(--asi-radius-pill);
	}

	/* Prices row — sale + struck-through original on a single line */
	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices {
		grid-area: prices;
		display: flex;
		align-items: baseline;
		gap: 0.5rem;
		flex-wrap: wrap;
		font-size: 0.8125rem;
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices .wc-block-components-product-price__regular {
		font-size: 0.75rem;
		font-weight: 400;
		color: color-mix(in srgb, var(--wp--preset--color--contrast) 50%, transparent);
		text-decoration: line-through;
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices .wc-block-components-product-price__value {
		font-weight: 600;
		color: var(--wp--preset--color--contrast);
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices .wc-block-components-product-price__value.is-discounted {
		color: var(--wp--preset--color--accent-1);
		font-weight: 700;
	}

	/* Metadata (short description / variation) — 1 line clamp, muted */
	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-metadata {
		grid-area: meta;
		font-size: 0.75rem;
		line-height: 1.45;
		color: color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent);
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
		margin: 0;
	}

	/* Quantity row — stepper on the start, remove link on the end */
	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity {
		grid-area: qty;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem;
		margin-block-start: 0.5rem;
		padding-block-start: 0.625rem;
		padding-inline-end: 0;
		border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent);
		align-self: stretch;
	}

	/* Compact quantity selector */
	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector {
		border-radius: 10px;
		border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
		overflow: hidden;
		min-inline-size: 0;
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
		min-inline-size: 36px;
		min-block-size: 36px;
		color: var(--wp--preset--color--contrast);
		background: transparent;
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover {
		background: color-mix(in srgb, var(--wp--preset--color--accent-1) 8%, transparent);
		color: var(--wp--preset--color--accent-1);
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {
		inline-size: 36px;
		block-size: 36px;
		font-size: 0.875rem;
		font-weight: 600;
		color: var(--wp--preset--color--contrast);
		background: transparent;
		border: none;
	}

	/* Remove link — quiet ghost button with a trash glyph already inside.
	   WC explicitly hides this on mobile via container query; we restore
	   it because the icon is the user's primary remove affordance. */
	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__remove-link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.375rem;
		inline-size: auto;
		block-size: auto;
		padding: 0.5rem;
		font-size: 0.75rem;
		font-weight: 500;
		color: color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent);
		text-decoration: none;
		border-radius: 10px;
		transition: color var(--asi-transition), background var(--asi-transition);
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__remove-link:hover {
		color: #B91C1C;
		background: color-mix(in srgb, #B91C1C 8%, transparent);
		text-decoration: none;
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__remove-link svg {
		inline-size: 18px;
		block-size: 18px;
	}

	/* Totals sidebar — compact */
	.wc-block-cart .wc-block-cart__totals-title {
		padding: 1rem 1.25rem;
	}

	.wc-block-cart .wc-block-components-totals-item {
		padding-inline: 1.25rem !important;
	}

	.wc-block-cart .wc-block-components-totals-coupon {
		padding-inline: 1.25rem;
	}

	.wc-block-cart .wc-block-components-totals-footer-item {
		padding-inline: 1.25rem !important;
	}

	.wc-block-cart .wc-block-cart__submit-container {
		padding: 1rem 1.25rem 1.25rem;
	}

	.wc-block-cart .wc-block-cart__submit-button {
		padding: 0.875rem 1.5rem;
		border-radius: 12px;
		font-size: 0.9375rem;
		font-weight: 600;
		min-block-size: 50px;
		background: var(--asi-gradient-blue);
		box-shadow: 0 6px 18px color-mix(in srgb, var(--wp--preset--color--accent-1) 32%, transparent);
	}

	/* ─── Cart shelf — break-out matches mobile cart card padding ─── */
	.wp-block-woocommerce-cart .asi-cart-shelf {
		margin-block: 2.5rem -0.75rem 0;
		margin-inline: -0.75rem;
		padding: 2rem 0.75rem 2.25rem;
	}

	.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product-template {
		margin: 0 -0.75rem 0 0 !important;
		gap: 0.75rem !important;
	}

	[dir="rtl"] .wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product-template {
		margin: 0 0 0 -0.75rem !important;
	}

	.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product-template > li,
	.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product {
		flex: 0 0 148px !important;
		inline-size: 148px !important;
	}
}

/* ─── Tablet (600–899px) — slightly larger image, more breathing room ─── */
@media (min-width: 600px) and (max-width: 899px) {
	.wc-block-cart .wc-block-cart__main {
		padding: 1rem;
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row {
		grid-template-columns: 112px minmax(0, 1fr) max-content;
		column-gap: 1.25rem;
		padding: 1rem 1.25rem;
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
		inline-size: 112px;
		min-inline-size: 112px;
		block-size: 112px;
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
		font-size: 1rem;
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total,
	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total .wc-block-components-product-price {
		font-size: 1rem;
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-metadata {
		-webkit-line-clamp: 2;
	}
}

/* ─── Small phone (≤480px) — tighter image, drop the metadata to stay clean ─── */
@media (max-width: 480px) {
	.woocommerce-cart .wp-block-woocommerce-cart {
		padding-block-start: 1rem;
	}

	.wc-block-cart .wc-block-cart__main {
		padding: 0.625rem;
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row {
		grid-template-columns: 80px minmax(0, 1fr) max-content;
		column-gap: 0.875rem;
		padding: 0.75rem 0.875rem;
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
		inline-size: 80px;
		min-inline-size: 80px;
		block-size: 80px;
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
		font-size: 0.875rem;
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total,
	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total .wc-block-components-product-price {
		font-size: 0.875rem;
	}

	/* Hide metadata on small phones — name + price + qty is enough */
	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-metadata {
		display: none;
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
		min-inline-size: 34px;
		min-block-size: 34px;
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {
		inline-size: 34px;
		block-size: 34px;
		font-size: 0.8125rem;
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__remove-link {
		padding: 0.4375rem;
		font-size: 0.75rem;
	}

	.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
		font-size: 1.125rem;
	}

	/* Cart shelf — match the smaller cart card padding */
	.wp-block-woocommerce-cart .asi-cart-shelf {
		margin-block: 2.25rem -0.625rem 0;
		margin-inline: -0.625rem;
		padding: 1.75rem 0.625rem 2rem;
	}

	.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product-template {
		margin: 0 -0.625rem 0 0 !important;
		gap: 0.75rem !important;
	}

	[dir="rtl"] .wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product-template {
		margin: 0 0 0 -0.625rem !important;
	}

	.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product-template > li,
	.wp-block-woocommerce-cart .asi-cart-shelf .wc-block-product {
		flex: 0 0 138px !important;
		inline-size: 138px !important;
	}
}

/* ═══════════════════════════════════════════════════════════════
 * ─── Checkout Page ───
 * ═══════════════════════════════════════════════════════════════ */

/* Checkout page top breathing room */
.woocommerce-checkout .wp-block-woocommerce-checkout {
	padding-block-start: 2rem;
}

/* Page title */
.woocommerce-checkout .wp-site-blocks > .wp-block-heading,
.woocommerce-checkout .wp-block-woocommerce-checkout .wp-block-heading,
.wc-block-checkout .wp-block-heading {
	font-family: var(--asi-font-family);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	letter-spacing: -0.3px;
	margin-block-start: 0;
	margin-block-end: 1.5rem;
	padding-block-start: 0;
}

/* ─── Main layout — form fields column (no wrapping card) ─── */
/* Drop the outer card; each step becomes its own card below so headings
   sit INSIDE their container instead of floating above it. */
.wc-block-checkout .wc-block-checkout__main {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}

/* ─── Section headings (Contact, Shipping, Billing, etc.) ─── */
/* Shopify-style: 16px semibold, calm letter-spacing, with a 2px brand
   accent rule sitting tight to the leading edge as a subtle visual anchor.
   Using ::before via :is() so the rule attaches only to actual titles
   (sidebar totals title also matches __title; we don't want a rule there). */
.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-step__title,
.woocommerce-checkout .wc-block-checkout .wc-block-components-title,
.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-step__heading,
.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-step > h2,
.woocommerce-checkout .wc-block-checkout .wp-block-woocommerce-checkout-fields-block .wp-block-heading {
	font-family: var(--asi-font-family) !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	color: var(--wp--preset--color--contrast) !important;
	letter-spacing: -0.1px !important;
	text-align: start !important;
	margin-block-start: 0 !important;
	margin-block-end: 0.375rem !important;
	display: flex !important;
	align-items: center !important;
	gap: 0.625rem !important;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-step__title::before {
	content: "";
	flex: 0 0 auto;
	inline-size: 3px;
	block-size: 1.05em;
	background: var(--wp--preset--color--accent-1);
	border-radius: 2px;
}

.wc-block-checkout .wc-block-components-checkout-step__description {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--accent-4);
	margin-block-start: 0;
	margin-block-end: 1rem;
	text-align: start !important;
}

/* Each step IS the card — Shopify-style: hairline border, no shadow, calmer
   radius. White on near-white page produces the "soft anchor" feeling. */
.wc-block-checkout .wc-block-components-checkout-step {
	background: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 9%, transparent);
	border-radius: 12px;
	box-shadow: none;
	padding: 1.5rem clamp(1.25rem, 2.5vw, 1.75rem);
	margin-block-end: 0.875rem;
}

.wc-block-checkout .wc-block-components-checkout-step:last-child {
	margin-block-end: 0;
}

/* Remove Woo Blocks' built-in step number pseudo — we use cards instead */
.wc-block-checkout .wc-block-components-checkout-step__container::before {
	display: none;
}

/* ─── Form fields (text inputs, selects) ─── */
.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .wc-block-components-text-input textarea {
	border-radius: 8px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent);
	font-family: var(--asi-font-family);
	font-size: 0.9375rem;
	padding: 0.875rem 0.875rem;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

.wc-block-checkout .wc-block-components-text-input input:hover,
.wc-block-checkout .wc-block-components-text-input textarea:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--contrast) 22%, transparent);
}

.wc-block-checkout .wc-block-components-text-input input:focus,
.wc-block-checkout .wc-block-components-text-input textarea:focus {
	border-color: var(--wp--preset--color--accent-1);
	box-shadow: 0 0 0 1px var(--wp--preset--color--accent-1);
	outline: none;
}

/* Floating labels */
.wc-block-checkout .wc-block-components-text-input label {
	font-family: var(--asi-font-family);
	font-size: 0.875rem;
	color: var(--wp--preset--color--accent-4);
}

.wc-block-checkout .wc-block-components-text-input.is-active label {
	font-size: 0.6875rem;
	color: var(--wp--preset--color--accent-1);
}

/* Select / combobox dropdowns */
.wc-block-checkout .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input {
	border-radius: 10px;
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	font-family: var(--asi-font-family);
	font-size: 0.875rem;
	padding: 0.75rem 1rem;
	transition: border-color var(--asi-transition), box-shadow var(--asi-transition);
}

.wc-block-checkout .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input:focus {
	border-color: var(--wp--preset--color--accent-1);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent-1) 12%, transparent);
	outline: none;
}

/* Validation error styling */
.wc-block-checkout .wc-block-components-text-input.has-error input,
.wc-block-checkout .wc-block-components-text-input.has-error textarea {
	border-color: #dc2626;
}

.wc-block-checkout .wc-block-components-validation-error {
	font-family: var(--asi-font-family);
	font-size: 0.75rem;
	color: #dc2626;
	margin-block-start: 0.375rem;
}

/* ─── Checkbox & radio controls ─── */
.wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	border-radius: 4px;
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--contrast) 20%, transparent);
	min-inline-size: 20px;
	min-block-size: 20px;
	transition: border-color var(--asi-transition), background var(--asi-transition);
}

.wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	background: var(--wp--preset--color--accent-1);
	border-color: var(--wp--preset--color--accent-1);
}

.wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__label {
	font-family: var(--asi-font-family);
	font-size: 0.875rem;
	color: var(--wp--preset--color--contrast);
}

.wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input {
	min-inline-size: 20px;
	min-block-size: 20px;
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--contrast) 20%, transparent);
}

.wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input:checked {
	border-color: var(--wp--preset--color--accent-1);
}

/* ─── Radio label clipping fix — PAYMENT BLOCK ONLY ─── */
/* Fixes "Fatoorah" (should be "MyFatoorah") and "sh on Delivery" (should be
   "Cash on Delivery") — the labels were rendering behind the radio circle.
   Scoped to the payment block so it doesn't disturb shipping's default
   layout, which has its own padding/description/secondary-label rhythm. */
.wc-block-checkout .wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__option {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	padding-inline-start: 0.875rem;
	min-block-size: 44px;
}

.wc-block-checkout .wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__option > .wc-block-components-radio-control__input {
	margin-block-start: 0.1875rem;
	margin-inline-start: 0;
	position: static;
	flex: 0 0 20px;
}

.wc-block-checkout .wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__label,
.wc-block-checkout .wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__option-layout,
.wc-block-checkout .wp-block-woocommerce-checkout-payment-block .wc-block-components-payment-method-label {
	padding-inline-start: 0;
	margin-inline-start: 0;
	min-inline-size: 0;
	flex: 1 1 auto;
}

.wc-block-checkout .wc-block-components-radio-control__label {
	font-family: var(--asi-font-family);
	font-size: 0.875rem;
}

/* ─── Shipping methods ─── */
.wc-block-checkout .wc-block-components-shipping-rates-control {
	background: var(--wp--preset--color--accent-3);
	border-radius: 10px;
	padding: 1rem;
}

.wc-block-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control__option {
	padding: 0.75rem;
	border-radius: 8px;
	transition: background var(--asi-transition);
}

.wc-block-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control__option:hover {
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 4%, transparent);
}

.wc-block-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control__option--checked,
.wc-block-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control__option:has(.wc-block-components-radio-control__input:checked) {
	background: var(--wp--preset--color--base);
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--accent-1) 60%, transparent);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.wc-block-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control__label {
	font-weight: 500;
}

.wc-block-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control__description {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--accent-4);
}

.wc-block-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control__secondary-label {
	font-family: var(--asi-font-family);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

/* ─── Express payments (Apple Pay / Google Pay) ─── */
.wc-block-checkout .wc-block-components-express-payment {
	margin-block-end: 1.5rem;
	padding-block-end: 1.5rem;
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
}

.wc-block-checkout .wc-block-components-express-payment__title-container {
	font-family: var(--asi-font-family);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--accent-4);
}

.wc-block-checkout .wc-block-components-express-payment .wc-block-components-express-payment__event-buttons .wc-block-components-express-payment__event-buttons__container > * {
	border-radius: 10px !important;
}

/* ─── Payment methods section ─── */
.wc-block-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option--checked {
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 4%, transparent);
	border-color: var(--wp--preset--color--accent-1);
	border-radius: 10px;
}

.wc-block-checkout .wc-block-components-payment-method-label {
	font-family: var(--asi-font-family);
	font-size: 0.875rem;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.wc-block-checkout .wc-block-components-payment-method-icons {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.wc-block-checkout .wc-block-components-payment-method-icons .wc-block-components-payment-method-icons__icon {
	max-block-size: 24px;
}

/* ─── Order Summary Sidebar ─── */
/* Widen the sidebar column at desktop only. The previous attempt
   broke because it also matched `.wp-block-woocommerce-checkout`
   without the `.is-large` qualifier, forcing 2-column layout on
   narrow viewports where WC was supposed to stack. This rule
   targets ONLY `.is-large` (the class WC adds when its responsive
   logic decides side-by-side), and only at 1024px+. No !important
   so any future WC override at the same specificity wins. */
@media (min-width: 1024px) {
	.wp-block-woocommerce-checkout.is-large {
		grid-template-columns: minmax(0, 1fr) 440px;
	}
}

.wc-block-checkout .wc-block-checkout__sidebar {
	position: sticky;
	inset-block-start: 2rem;
}

.wc-block-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-totals-block {
	background: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	border-radius: var(--asi-radius);
	box-shadow: var(--asi-shadow-sm);
	overflow: hidden;
}

/* Order summary title — sentence case, no uppercase shouting. The
   slim accent rule beside the title (added below) carries the brand,
   so the heading itself can stay calm. */
.wc-block-checkout .wc-block-components-order-summary .wc-block-components-panel__button {
	font-family: var(--asi-font-family);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -0.1px;
	color: var(--wp--preset--color--contrast);
	padding: 1.125rem 1.5rem;
	background: var(--wp--preset--color--accent-3);
	border: none;
	cursor: pointer;
}

/* ─── Order summary line item — Shopify-style 3-col flex layout ───
 * [thumb 56px] [name + variation, flex-grow] [price, fixed right]
 *
 * Flex (not grid) because WC Blocks ships its own display rules with
 * !important on .wc-block-components-order-summary-item descendants
 * in some versions; flex with !important is the most defensive way
 * to override and stay readable across WC versions.
 *
 * Pricing is owned by the right column ONLY. WC defaults render
 * `.wc-block-components-product-price` twice (once inside __description
 * for the unit price, once inside __total-price for the line total).
 * For qty=1 these are identical; for qty>1 the line total is correct
 * for an order-confirmation context. We hide the description-internal
 * one to remove the duplicate.
 *
 * Quantity badge is hidden — it rendered as an empty white square in
 * WC's qty=1 default, and for our store qty info is more readable in
 * the upcoming "× N" inline marker (see below) when it matters.
 * ───────────────────────────────────────────────────────────────── */
.wc-block-checkout .wc-block-components-order-summary-item {
	/* Strict 3-column grid — [thumb][name][price]. Matches the
	 * `.wc-block-components-totals-item` grid below so prices line up
	 * vertically across line items and totals. Grid is more reliable
	 * than flex+margin-auto under RTL: `grid-column: 3 / 4` flips
	 * automatically with the writing mode, no `align-items: flex-end`
	 * cross-axis ambiguity. Padding is logical (matches totals'
	 * 1.5rem inline) so the price column has the same gutter from the
	 * panel edge regardless of language direction. */
	display: grid !important;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	column-gap: 0.875rem;
	align-items: center;
	padding-inline: 1.5rem;
	padding-block: 1rem;
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent);
}

.wc-block-checkout .wc-block-components-order-summary-item:last-child {
	border-block-end: none;
}

/* Thumb — fixed 56px, off-white surface. */
.wc-block-checkout .wc-block-components-order-summary-item__image {
	flex: 0 0 56px;
	inline-size: 56px;
	block-size: 56px;
	background: var(--wp--preset--color--accent-3);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent);
	border-radius: 8px;
	overflow: hidden;
	position: relative;
}

.wc-block-checkout .wc-block-components-order-summary-item__image img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	display: block;
	border-radius: inherit;
}

/* Hide qty badge — for qty=1 it renders as an empty container. If
   qty > 1 a "× N" inline marker (added in a follow-up pass) is
   easier to read than a corner badge in this narrow column. */
.wc-block-checkout .wc-block-components-order-summary-item__quantity {
	display: none !important;
}

/* Defensive: hide any plugin-injected checkbox/radio in line items
   (Smart Coupons etc. — they don't belong in checkout review). */
.wc-block-checkout .wc-block-components-order-summary-item input[type="checkbox"],
.wc-block-checkout .wc-block-components-order-summary-item input[type="radio"] {
	display: none !important;
}

/* Description column — name + variation metadata only. */
.wc-block-checkout .wc-block-components-order-summary-item__description {
	flex: 1 1 auto;
	min-inline-size: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	overflow: hidden;
}

.wc-block-checkout .wc-block-components-order-summary-item .wc-block-components-product-name {
	font-family: var(--asi-font-family);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: break-word;
	white-space: normal;
	margin: 0;
}

/* Variation metadata (color, size, etc.) — stay visible. */
.wc-block-checkout .wc-block-components-order-summary-item .wc-block-components-product-metadata {
	font-size: 0.75rem;
	color: var(--wp--preset--color--accent-4);
	line-height: 1.4;
}

/* Hide everything price-related, marketing-related, and the inline
   sale badge from the description column. The right-side __total-price
   owns price display. Belt-and-braces with !important to win against
   WC's own display rules. */
.wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-price,
.wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-sale-badge,
.wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-details,
.wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-summary,
.wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-metadata__description,
.wc-block-checkout .wc-block-components-order-summary-item__description ins,
.wc-block-checkout .wc-block-components-order-summary-item__description del {
	display: none !important;
}

/* Right column — line total. Now lives in grid column 3, so the
 * inline-end alignment is automatic and identical in EN and AR.
 * Sale = small strikethrough above current.
 *
 * Critical RTL: WC's bundled CSS uses *physical* properties on this
 * element (`margin-left: auto`, `text-align: right`) which don't
 * flip under RTL — they leave the price stuck on physical-right.
 * We override with logical properties and `!important` so the price
 * lands on the inline-end (physical-left in RTL) reliably.
 *
 * `min-inline-size: 0` is the safety net that prevents the price
 * cell from blowing past its grid track and getting clipped by the
 * parent's `overflow: hidden + border-radius`. Without it, a long
 * Arabic-symbol price like "2.000 د.ك" can compute wider than the
 * `auto` track expects (because `bdi` with `unicode-bidi: plaintext`
 * can mis-measure RTL content) and bleed into the rounded corner. */
.wc-block-checkout .wc-block-components-order-summary-item__total-price {
	grid-column: 3 / 4 !important;
	justify-self: end !important;
	text-align: end !important;
	display: flex !important;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.25rem;
	font-variant-numeric: tabular-nums;
	margin: 0 !important; /* nuke WC's `margin-left: auto` */
	padding: 0 !important;
	min-inline-size: 0;
}

/* WC's wrapper inside the price cell — `align-items: flex-end` from
 * WC core, which works LTR but in RTL flex-column the cross-axis
 * end isn't reliably the inline-end. Force logical alignment. */
.wc-block-checkout .wc-block-components-order-summary-item__total-price
	.wc-block-cart-item__total-price-and-sale-badge-wrapper,
.wc-block-checkout .wc-block-components-order-summary-item__total-price
	> div {
	align-items: flex-end !important;
	text-align: end !important;
}

/* Description column — WC core sets `padding: 4px 12px 12px 24px`
 * (asymmetric, physical) which puts heavy padding on physical-LEFT.
 * In LTR (image left → name right) that's correct: 24px gap from
 * the image. In RTL (image right → name left), the heavy padding
 * lands on the wrong side — name gets shoved away from the image
 * AND too close to the price column. Logical override. */
.wc-block-checkout .wc-block-components-order-summary-item__description {
	padding-block: 4px 12px !important;
	padding-inline-start: 12px !important;
	padding-inline-end: 12px !important;
}

.wc-block-checkout .wc-block-components-order-summary-item__total-price .wc-block-components-product-price {
	font-family: var(--asi-font-family);
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.0625rem;
	font-feature-settings: "tnum";
	letter-spacing: -0.1px;
}

.wc-block-checkout .wc-block-components-order-summary-item__total-price del,
.wc-block-checkout .wc-block-components-order-summary-item__total-price .wc-block-components-product-price__regular {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--wp--preset--color--accent-4);
	text-decoration: line-through;
	order: -1;
}

.wc-block-checkout .wc-block-components-order-summary-item__total-price ins,
.wc-block-checkout .wc-block-components-order-summary-item__total-price .wc-block-components-product-price__value {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

/* "Save X.XXX KD" pill — muted brand-green, only in the price column. */
.wc-block-checkout .wc-block-components-order-summary-item__total-price .wc-block-components-sale-badge {
	display: inline-block;
	background: color-mix(in srgb, var(--wp--preset--color--accent-2) 14%, transparent);
	color: color-mix(in srgb, var(--wp--preset--color--accent-2) 65%, var(--wp--preset--color--contrast));
	font-family: var(--asi-font-family);
	font-size: 0.6875rem;
	font-weight: 600;
	padding: 0.125rem 0.5rem;
	border-radius: 999px;
	letter-spacing: 0.01em;
	white-space: nowrap;
	font-feature-settings: "tnum";
}

/* ─── Totals rows (Subtotal, Shipping, Tax, Total) ─── */
.wc-block-checkout .wc-block-components-totals-item {
	padding-inline: 1.5rem;
	padding-block: 0.875rem;
}

.wc-block-checkout .wc-block-components-totals-item__label {
	font-family: var(--asi-font-family);
	font-size: 0.875rem;
	color: var(--wp--preset--color--accent-4);
}

.wc-block-checkout .wc-block-components-totals-item__value {
	font-family: var(--asi-font-family);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

/* Grand total — Shopify-style anchor: faint blue-tinted background and
   a hairline rule above. Amount stays in contrast (not blue) so it
   reads as a value, not a CTA. Tabular numerals for the rare cases
   when totals jump digit-counts mid-flow. */
.wc-block-checkout .wc-block-components-totals-footer-item {
	padding: 1.125rem 1.5rem;
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 3.5%, transparent);
	border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
}

.wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	letter-spacing: -0.05px;
}

.wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 1.3125rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	font-feature-settings: "tnum";
	letter-spacing: -0.3px;
}

/* ─── Coupon section in checkout ─── */
.wc-block-checkout .wc-block-components-totals-coupon {
	padding-inline: 1.5rem;
	padding-block: 0.875rem;
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent);
}

.wc-block-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button {
	font-family: var(--asi-font-family);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--preset--color--accent-4);
	background: transparent;
	border: none;
	cursor: pointer;
}

.wc-block-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button:hover {
	color: var(--wp--preset--color--accent-1);
}

.wc-block-checkout .wc-block-components-totals-coupon .wc-block-components-text-input input {
	border-radius: 10px;
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	font-family: var(--asi-font-family);
	font-size: 0.875rem;
	padding: 0.75rem 1rem;
	transition: border-color var(--asi-transition), box-shadow var(--asi-transition);
}

.wc-block-checkout .wc-block-components-totals-coupon .wc-block-components-text-input input:focus {
	border-color: var(--wp--preset--color--accent-1);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent-1) 12%, transparent);
	outline: none;
}

.wc-block-checkout .wc-block-components-totals-coupon .wc-block-components-button {
	font-family: var(--asi-font-family);
	font-weight: 600;
	font-size: 0.8125rem;
	background: var(--wp--preset--color--accent-1);
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 0.625rem 1.25rem;
	cursor: pointer;
	transition: background var(--asi-transition);
}

.wc-block-checkout .wc-block-components-totals-coupon .wc-block-components-button:hover {
	background: #013A7A;
}

/* ─── Sidebar totals wrapper cleanup ─── */
.wc-block-checkout .wc-block-checkout__sidebar .wc-block-components-totals-wrapper {
	padding: 0;
	border: none;
}

.wc-block-checkout .wc-block-checkout__sidebar .wc-block-components-totals-wrapper::after,
.wc-block-checkout .wc-block-checkout__sidebar .wc-block-components-totals-wrapper::before {
	display: none;
}

.wc-block-checkout .wc-block-checkout__sidebar .wc-block-components-panel {
	border: none;
	margin: 0;
}

/* ─── Place Order button — primary CTA, louder treatment ─── */
.wc-block-checkout .wc-block-checkout__actions_row {
	padding-block-start: 1.75rem;
	padding-block-end: 0.5rem;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.875rem;
}

.wc-block-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	inline-size: 100%;
	padding: 1rem 1.5rem;
	font-family: var(--asi-font-family);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -0.1px;
	color: #fff;
	background: var(--wp--preset--color--accent-1);
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: background 120ms ease;
	box-shadow: 0 1px 2px color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	min-block-size: 56px;
	position: relative;
	order: 1;
}

/* Padlock icon before the label — SVG via mask so it inherits currentColor */
.wc-block-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button::before {
	content: "";
	display: inline-block;
	inline-size: 18px;
	block-size: 18px;
	background-color: currentColor;
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2' ry='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>");
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2' ry='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>");
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-size: contain;
	-webkit-mask-size: contain;
	flex-shrink: 0;
}

.wc-block-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:hover {
	background: #013A7A;
}

.wc-block-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:active {
	background: #012E61;
}

.wc-block-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 3px;
}

.wc-block-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:disabled,
.wc-block-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button[aria-busy="true"] {
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 70%, var(--wp--preset--color--contrast));
	cursor: progress;
}

/* Loading / processing state — when Woo is submitting, the icon becomes
   a spinner; hide the ::before lock during that state */
.wc-block-checkout .wc-block-components-checkout-place-order-button.wc-block-components-button--loading::before,
.wc-block-checkout .wc-block-components-checkout-place-order-button[aria-busy="true"]::before {
	display: none;
}

.wc-block-checkout .wc-block-components-checkout-place-order-button .wc-block-components-button__text {
	font-family: var(--asi-font-family);
}

.wc-block-checkout .wc-block-components-checkout-place-order-button .wc-block-components-spinner {
	border-color: rgba(255, 255, 255, 0.3);
	border-inline-start-color: #fff;
}

/* ─── Trust indicators injected by checkout-enhance.js ─── */
.wc-block-checkout .asi-checkout-trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.25rem 1rem;
	padding-block: 0.5rem;
	font-family: var(--asi-font-family);
	font-size: 0.6875rem;
	font-weight: 500;
	color: var(--wp--preset--color--accent-4);
	letter-spacing: 0.02em;
	order: 2;
}

.wc-block-checkout .asi-checkout-trust__item {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	white-space: nowrap;
}

.wc-block-checkout .asi-checkout-trust__item::before {
	content: "";
	display: inline-block;
	inline-size: 12px;
	block-size: 12px;
	background-color: var(--wp--preset--color--accent-2);
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-size: contain;
	-webkit-mask-size: contain;
	flex-shrink: 0;
}

/* Lock-specific (first item) overrides the checkmark with a padlock */
.wc-block-checkout .asi-checkout-trust__item--lock::before {
	background-color: var(--wp--preset--color--accent-1);
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2' ry='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>");
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2' ry='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>");
}

/* Return to cart link */
.wc-block-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-return-to-cart-button {
	font-family: var(--asi-font-family);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--preset--color--accent-4);
	text-decoration: none;
	transition: color var(--asi-transition);
}

.wc-block-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-return-to-cart-button:hover {
	color: var(--wp--preset--color--accent-1);
}

/* ─── Terms & conditions / privacy text ─── */
.wc-block-checkout .wc-block-checkout__terms {
	font-family: var(--asi-font-family);
	font-size: 0.75rem;
	color: var(--wp--preset--color--accent-4);
	line-height: 1.6;
}

.wc-block-checkout .wc-block-checkout__terms a {
	color: var(--wp--preset--color--accent-1);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ─── Notices / Errors ─── */
/* Checkout notices inherit the global "Dispatch Memo" system —
   see the WooCommerce Notices section near the end of this file. */

/* ═══════════════════════════════════════════════════════════════
 * ─── Checkout Page Enhancements (post-critique) ───
 *
 * Additional polish applied after the /critique pass + screenshots.
 * Covers: empty express-payment hide, MyFatoorah iframe scoping,
 * COD row divider, Return to Cart restyle, peak-end polish.
 * ═══════════════════════════════════════════════════════════════ */

/* Hide the express payment block entirely if it's empty (no Apple Pay /
   Google Pay configured yet) — otherwise Woo Blocks renders an orphan
   "EXPRESS CHECKOUT" eyebrow with no content below it. */
.wc-block-checkout .wc-block-components-express-payment:empty,
.wp-block-woocommerce-checkout-express-payment-block:empty {
	display: none;
}
.wc-block-checkout .wc-block-components-express-payment:not(:has(.wc-block-components-express-payment__event-buttons > *)) {
	display: none;
}

/* Kill native list bullets — Woo Blocks radio controls use <ul> markup,
   and without this we get a stray bullet dot in the middle of each row. */
.wc-block-checkout .wc-block-components-radio-control,
.wc-block-checkout .wc-block-components-radio-control ul,
.wc-block-checkout .wc-block-components-payment-methods,
.wc-block-checkout ul.wc-block-components-checkout-step__content {
	list-style: none !important;
	padding-inline-start: 0;
	margin-inline-start: 0;
}

/* The MyFatoorah embedded card's content should NOT collapse onto
   adjacent radio labels. Give each PAYMENT method row (ONLY the payment
   block — shipping has its own styling above) a clear block so the
   embedded widget is visually contained. */
.wc-block-checkout .wp-block-woocommerce-checkout-payment-block .wc-block-components-payment-methods > li,
.wc-block-checkout .wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__option {
	padding: 0.875rem 1rem;
	border-radius: 10px;
	border: 1px solid transparent;
	transition: background var(--asi-transition), border-color var(--asi-transition);
	margin-block-end: 0.5rem;
}

.wc-block-checkout .wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__option--checked,
.wc-block-checkout .wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__option:has(.wc-block-components-radio-control__input:checked) {
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 4%, transparent);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 40%, transparent);
}

/* Divider between payment methods so COD doesn't collide with the
   MyFatoorah widget above it. Scoped to the payment block. */
.wc-block-checkout .wp-block-woocommerce-checkout-payment-block .wc-block-components-payment-methods > li + li {
	margin-block-start: 0.5rem;
}

/* MyFatoorah embedded widget — scope and tame its default styles */
.wc-block-checkout .mf-card-container {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	border-radius: 10px;
	padding: 0.75rem 1rem;
	margin-block-end: 0.5rem;
	font-family: var(--asi-font-family);
	transition: border-color var(--asi-transition), background var(--asi-transition);
}

.wc-block-checkout .mf-card-container:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 45%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 3%, transparent);
}

.wc-block-checkout .mf-card-title {
	font-family: var(--asi-font-family) !important;
	font-weight: 600 !important;
	color: var(--wp--preset--color--contrast) !important;
}

.wc-block-checkout .mf-price-tag {
	font-family: var(--asi-font-family) !important;
	font-weight: 700 !important;
	color: var(--wp--preset--color--accent-1) !important;
	font-variant-numeric: tabular-nums;
}

/* "Return to Cart" — deprioritized next to Place Order */
.wc-block-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-return-to-cart-button {
	order: 3;
	align-self: center;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--accent-4);
	padding-block: 0.5rem;
	text-decoration: none;
}

.wc-block-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-return-to-cart-button:hover {
	color: var(--wp--preset--color--accent-1);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* (Removed late-stage duplicates — total amount + quantity badge styles
   are owned by the order-summary-item block and the totals-footer-item
   block above. Single source of truth.) */

/* Token-ify the error color so it stops being a hardcoded one-off */
.wc-block-checkout .wc-block-components-text-input.has-error input,
.wc-block-checkout .wc-block-components-text-input.has-error textarea {
	border-color: var(--asi-color-error, #dc2626);
}
.wc-block-checkout .wc-block-components-validation-error {
	color: var(--asi-color-error, #dc2626);
}
/* is-error banner styling lives in the global notice system (end of file). */

/* Respect reduced motion — the lift/hover transforms become opacity only */
@media (prefers-reduced-motion: reduce) {
	.wc-block-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button,
	.wc-block-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:hover,
	.wc-block-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:active {
		transform: none;
		transition: filter var(--asi-transition);
	}
}

/* ─── Checkout mobile (768px) ─── */
@media (max-width: 768px) {
	.wc-block-checkout .wc-block-checkout__main {
		padding: 0;
		border-radius: 0;
	}

	.wc-block-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-totals-block {
		border-radius: 12px;
	}

	.wc-block-checkout .wc-block-components-checkout-step {
		padding: 1.25rem 1.25rem;
		margin-block-end: 0.75rem;
		border-radius: 12px;
	}

	/* Sticky Place Order button on mobile */
	.wc-block-checkout .wc-block-checkout__actions_row {
		position: sticky;
		inset-block-end: 0;
		z-index: 10;
		background: var(--wp--preset--color--base);
		padding: 0.875rem 1rem 1rem;
		margin-inline: 0;
		margin-block-end: 0;
		border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
		box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.08);
		gap: 0.5rem;
	}

	.wc-block-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
		padding: 1rem 1.5rem;
		font-size: 1rem;
		border-radius: 12px;
		min-block-size: 54px;
	}

	.wc-block-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button::before {
		inline-size: 16px;
		block-size: 16px;
	}

	.wc-block-checkout .asi-checkout-trust {
		font-size: 0.6875rem;
		gap: 0.125rem 0.75rem;
		padding-block: 0.375rem 0.125rem;
	}

	/* 48px minimum touch targets for mobile */
	.wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
		min-inline-size: 24px;
		min-block-size: 24px;
	}

	.wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input {
		min-inline-size: 24px;
		min-block-size: 24px;
	}

	.wc-block-checkout .wc-block-components-text-input input,
	.wc-block-checkout .wc-block-components-text-input textarea {
		min-block-size: 48px;
		font-size: 1rem; /* prevent iOS zoom on focus */
	}

	.wc-block-checkout .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input {
		min-block-size: 48px;
		font-size: 1rem;
	}

	/* Totals sidebar compact */
	.wc-block-checkout .wc-block-components-totals-item {
		padding-inline: 1.25rem;
	}

	.wc-block-checkout .wc-block-components-totals-footer-item {
		padding-inline: 1.25rem;
	}

	.wc-block-checkout .wc-block-components-totals-coupon {
		padding-inline: 1.25rem;
	}

	.wc-block-checkout .wc-block-components-order-summary .wc-block-components-panel__button {
		padding: 1rem 1.25rem;
	}
}

/* ─── Checkout mobile (480px) ─── */
@media (max-width: 480px) {
	.woocommerce-checkout .wp-site-blocks {
		padding-block-start: 1rem;
	}

	.wc-block-checkout .wc-block-checkout__main {
		padding: 1rem;
		border-radius: 10px;
	}

	.wc-block-checkout .wc-block-checkout__actions_row {
		margin-inline: -1rem;
		margin-block-end: -1rem;
	}

	.wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
		font-size: 1.125rem;
	}

	.wc-block-checkout .wc-block-components-order-summary-item__image {
		max-inline-size: 48px;
	}
}

/* ============================================================================
   CATEGORY ARCHIVE — "Aisle"
   Editorial product archive: hero strip → sticky filter sidebar → grid.
   Distinct from the homepage horizontal slider (which lives in .asi-products
   only). The grid behaviour is scoped under .asi-archive so the slider keeps
   its flex/nowrap layout untouched.
   ============================================================================ */

.asi-archive {
	--asi-archive-pad-i: var(--wp--preset--spacing--50);
	--asi-archive-gap: clamp(1.25rem, 2.5vw, 2.25rem);
	--asi-archive-radius: 14px;
	--asi-archive-line: color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	--asi-archive-muted: color-mix(in srgb, var(--wp--preset--color--contrast) 60%, transparent);

	/* Match header's 1280px constrained content width */
	max-inline-size: 1280px;
	margin-inline: auto;
	padding-block: clamp(1rem, 2.5vw, 2rem) clamp(2rem, 5vw, 4rem);
	padding-inline: var(--asi-archive-pad-i);
	font-family: var(--asi-font-family);
	color: var(--wp--preset--color--contrast);
}

[dir="rtl"] .asi-archive {
	font-family: var(--asi-font-family);
}

/* ─── Hero strip ─── */
.asi-archive__hero {
	position: relative;
	background: var(--wp--preset--color--accent-3);
	border-radius: var(--asi-archive-radius);
	margin-block-end: clamp(1.75rem, 3.5vw, 2.75rem);
	overflow: hidden;
	border: 1px solid var(--asi-archive-line);
}

.asi-archive__hero-inner {
	padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3.5vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
}

.asi-archive__hero-accent {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 2px;
	background: var(--asi-gradient-blue, linear-gradient(135deg, #0155B7, #013A7A));
	pointer-events: none;
}

.asi-archive__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--asi-archive-muted);
	margin-block-end: clamp(0.875rem, 2vw, 1.5rem);
}

.asi-archive__crumbs a {
	color: inherit;
	text-decoration: none;
	transition: color 160ms ease;
}

.asi-archive__crumbs a:hover,
.asi-archive__crumbs a:focus-visible {
	color: var(--wp--preset--color--accent-1);
}

.asi-archive__crumbs span[aria-hidden] { opacity: 0.4; }

.asi-archive__crumbs [aria-current="page"] {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

.asi-archive__title-row {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 1.25rem 2rem;
}

.asi-archive__title-block {
	display: flex;
	align-items: baseline;
	gap: 0.875rem 1.25rem;
	flex-wrap: wrap;
	min-inline-size: 0;
}

.asi-archive__title {
	font-family: var(--asi-font-family);
	font-size: clamp(1.875rem, 4.5vw, 3.25rem);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0;
	color: var(--wp--preset--color--contrast);
}

[dir="rtl"] .asi-archive__title {
	font-family: var(--asi-font-family);
	letter-spacing: 0;
}

.asi-archive__count {
	display: none;
}

/* Segmented sort control */
.asi-archive__sort {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--asi-archive-line);
	border-radius: 999px;
	padding: 0.25rem;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.asi-archive__sort-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-inline: 0.875rem;
	padding-block: 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--asi-archive-muted);
	text-decoration: none;
	border-radius: 999px;
	transition: background-color 180ms ease, color 180ms ease;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.asi-archive__sort-btn:hover,
.asi-archive__sort-btn:focus-visible { color: var(--wp--preset--color--contrast); }

.asi-archive__sort-btn.is-active {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Subcategory chip rail */
.asi-archive__chips {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.5rem;
	overflow-x: auto;
	scroll-snap-type: inline mandatory;
	margin-block-start: clamp(1rem, 2vw, 1.5rem);
	padding-block-end: 0.25rem;
	scrollbar-width: thin;
}

.asi-archive__chips::-webkit-scrollbar { block-size: 4px; }
.asi-archive__chips::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent);
	border-radius: 999px;
}

.asi-archive__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding-inline: 0.875rem;
	padding-block: 0.5rem;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-size: 0.8125rem;
	font-weight: 500;
	border-radius: 999px;
	border: 1px solid var(--asi-archive-line);
	text-decoration: none;
	transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
	scroll-snap-align: start;
	white-space: nowrap;
	flex: 0 0 auto;
}

.asi-archive__chip em {
	display: none;
}

.asi-archive__chip:hover,
.asi-archive__chip:focus-visible {
	border-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 35%, transparent);
	color: var(--wp--preset--color--accent-1);
	transform: translateY(-1px);
}

.asi-archive__chip.is-active {
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--accent-1);
}

.asi-archive__chip.is-active em {
	display: none;
}

/* Hide plugin-rendered brand banner/description — we render it ourselves */
.pwb-brand-banner,
.pwb-brand-description,
.pwb-brand-banner-cont {
	display: none;
}

/* ─── Brand Hero ─── */
.asi-brand-hero {
	display: flex;
	align-items: flex-start;
	gap: clamp(1.25rem, 3vw, 2rem);
}

.asi-brand-hero__logo {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: clamp(80px, 12vw, 120px);
	block-size: clamp(80px, 12vw, 120px);
	background: var(--wp--preset--color--base);
	border-radius: var(--asi-radius);
	border: 1px solid var(--asi-archive-line);
	padding: 0.75rem;
	box-shadow: var(--asi-shadow-sm);
}

.asi-brand-hero__logo-img {
	max-inline-size: 100%;
	max-block-size: 100%;
	object-fit: contain;
}

.asi-brand-hero__body {
	flex: 1;
	min-inline-size: 0;
}

.asi-brand-hero__desc {
	margin-block-start: 0.875rem;
	padding-block-start: 0.875rem;
	border-block-start: 1px solid var(--asi-archive-line);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--asi-archive-muted);
	max-inline-size: 64ch;
}

.asi-brand-hero__desc p {
	margin: 0;
}

.asi-brand-hero__desc p + p {
	margin-block-start: 0.5rem;
}

@media (max-width: 600px) {
	.asi-brand-hero {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 1.25rem;
	}

	.asi-brand-hero__logo {
		inline-size: 88px;
		block-size: 88px;
	}

	.asi-brand-hero .asi-archive__title-row {
		justify-content: center;
	}

	.asi-brand-hero .asi-archive__title-block {
		justify-content: center;
	}

	.asi-brand-hero__desc {
		margin-inline: auto;
		border-block-start: none;
		padding-block-start: 0;
	}
}

@media (max-width: 960px) and (min-width: 601px) {
	.asi-brand-hero .asi-archive__sort {
		margin-block-start: 0.5rem;
	}
}

/* ─── Two-column layout ─── */
.asi-archive__layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: var(--asi-archive-gap);
	align-items: start;
}

@media (max-width: 960px) {
	.asi-archive__layout { grid-template-columns: 1fr; }
}

.asi-archive__main { min-inline-size: 0; }

/* Mobile filter toggle */
.asi-archive__filter-toggle {
	display: none;
	align-items: center;
	gap: 0.625rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--asi-archive-line);
	border-radius: 12px;
	padding: 0.75rem 1rem;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	margin-block-end: 1.25rem;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.asi-archive__filter-toggle .asi-archive__filter-count {
	font-style: normal;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 18px;
	block-size: 18px;
	padding-inline: 5px;
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 700;
	margin-inline-start: 0.125rem;
}

@media (max-width: 960px) {
	.asi-archive__filter-toggle { display: inline-flex; }
}

/* ─── Filter sidebar ─── */
.asi-filters {
	position: sticky;
	inset-block-start: clamp(80px, 9vw, 110px);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--asi-archive-line);
	border-radius: var(--asi-archive-radius);
	padding: 1.25rem 1.25rem 1.5rem;
	max-block-size: calc(100vh - 120px);
	overflow-y: auto;
	scrollbar-width: thin;
}

.asi-filters::-webkit-scrollbar { inline-size: 6px; }
.asi-filters::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent);
	border-radius: 999px;
}

@media (max-width: 960px) {
	.asi-filters {
		position: fixed;
		inset-block: 0;
		inset-inline-start: 0;
		inline-size: min(360px, 86vw);
		max-block-size: none;
		z-index: 200;
		border-radius: 0;
		border-inline-end: 1px solid var(--asi-archive-line);
		transform: translateX(-105%);
		transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
		box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
	}
	[dir="rtl"] .asi-filters {
		inset-inline-start: auto;
		inset-inline-end: 0;
		transform: translateX(105%);
	}
	.asi-filters.is-open { transform: translateX(0); }
}

.asi-filters__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block-end: 1rem;
	margin-block-end: 1rem;
	border-block-end: 1px solid var(--asi-archive-line);
}

.asi-filters__title {
	font-family: var(--asi-font-family);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0;
	color: var(--wp--preset--color--contrast);
}

[dir="rtl"] .asi-filters__title { font-family: var(--asi-font-family); }

.asi-filters__clear {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent-1);
	text-decoration: none;
	margin-inline-start: auto;
}

.asi-filters__clear:hover { text-decoration: underline; }

.asi-filters__close {
	display: none;
	border: none;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	padding: 0.25rem;
	border-radius: 6px;
}

@media (max-width: 960px) {
	.asi-filters__close { display: inline-flex; }
}

/* Filter group (details/summary) */
.asi-filters__group {
	border-block-end: 1px solid var(--asi-archive-line);
	padding-block: 0.875rem;
}

.asi-filters__group:last-of-type { border-block-end: none; }

.asi-filters__group > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	list-style: none;
	padding-block: 0.25rem;
	user-select: none;
}

.asi-filters__group > summary::-webkit-details-marker { display: none; }

.asi-filters__group .asi-filters__chev {
	transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
	color: var(--asi-archive-muted);
}

.asi-filters__group[open] .asi-filters__chev { transform: rotate(-180deg); }

.asi-filters__body { padding-block-start: 0.875rem; }

/* Price two-thumb slider */
.asi-filters__price-range {
	position: relative;
	block-size: 32px;
	margin-block-end: 0.5rem;
}

.asi-filters__price-range input[type="range"] {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 32px;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	pointer-events: none;
}

.asi-filters__price-range input[type="range"]::-webkit-slider-runnable-track {
	block-size: 4px;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	border-radius: 999px;
}

.asi-filters__price-range input[type="range"]::-moz-range-track {
	block-size: 4px;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	border-radius: 999px;
}

.asi-filters__price-range input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	inline-size: 18px;
	block-size: 18px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-1);
	border: 3px solid var(--wp--preset--color--base);
	box-shadow: 0 2px 6px rgba(1, 85, 183, 0.32);
	cursor: grab;
	margin-block-start: -7px;
	pointer-events: auto;
	transition: transform 140ms ease;
}

.asi-filters__price-range input[type="range"]::-moz-range-thumb {
	inline-size: 18px;
	block-size: 18px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-1);
	border: 3px solid var(--wp--preset--color--base);
	box-shadow: 0 2px 6px rgba(1, 85, 183, 0.32);
	cursor: grab;
	pointer-events: auto;
}

.asi-filters__price-range input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }

.asi-filters__price-values {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	font-variant-numeric: tabular-nums;
	margin-block-start: 0.5rem;
}

.asi-filters__price-sep { color: var(--asi-archive-muted); }

.asi-filters__price-cur {
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--asi-archive-muted);
	margin-inline-start: auto;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Brand / rating / in-stock checkbox+radio rows */
.asi-filters__list {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.asi-filters__opt {
	display: grid;
	grid-template-columns: 18px 1fr auto;
	align-items: center;
	gap: 0.625rem;
	padding-block: 0.5rem;
	cursor: pointer;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--contrast);
	border-radius: 6px;
	padding-inline: 0.25rem;
	transition: background-color 140ms ease;
	position: relative;
}

.asi-filters__opt:hover { background: color-mix(in srgb, var(--wp--preset--color--contrast) 4%, transparent); }

.asi-filters__opt input { position: absolute; opacity: 0; pointer-events: none; }

.asi-filters__opt-mark {
	inline-size: 18px;
	block-size: 18px;
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--contrast) 28%, transparent);
	border-radius: 5px;
	background: var(--wp--preset--color--base);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 160ms ease, background-color 160ms ease;
	position: relative;
}

.asi-filters__opt-mark--radio { border-radius: 999px; }

.asi-filters__opt-mark::after {
	content: "";
	inline-size: 10px;
	block-size: 10px;
	background: var(--wp--preset--color--base);
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
	opacity: 0;
	transform: scale(0.7);
	transition: opacity 140ms ease, transform 140ms ease;
}

.asi-filters__opt-mark--radio::after {
	clip-path: none;
	border-radius: 999px;
	inline-size: 8px;
	block-size: 8px;
}

.asi-filters__opt input:checked + .asi-filters__opt-mark {
	background: var(--wp--preset--color--accent-1);
	border-color: var(--wp--preset--color--accent-1);
}

.asi-filters__opt input:checked + .asi-filters__opt-mark::after {
	opacity: 1;
	transform: scale(1);
}

.asi-filters__opt input:focus-visible + .asi-filters__opt-mark {
	outline: 2px solid color-mix(in srgb, var(--wp--preset--color--accent-1) 50%, transparent);
	outline-offset: 2px;
}

.asi-filters__opt-label {
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.asi-filters__opt-count {
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--asi-archive-muted);
	font-variant-numeric: tabular-nums;
}

.asi-filters__opt.is-overflow { display: none; }
.asi-filters__list.is-expanded .asi-filters__opt.is-overflow { display: grid; }

.asi-filters__more {
	border: none;
	background: none;
	color: var(--wp--preset--color--accent-1);
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 600;
	cursor: pointer;
	padding-block: 0.5rem;
	text-align: start;
}

.asi-filters__more:hover { text-decoration: underline; }
.asi-filters__list.is-expanded .asi-filters__more { display: none; }

.asi-filters__stars {
	display: inline-flex;
	gap: 1px;
	color: var(--wp--preset--color--warm-orange, #F59E0B);
}

.asi-filters__opt-andup {
	font-size: 0.6875rem;
	color: var(--asi-archive-muted);
	margin-inline-start: 0.25rem;
}

.asi-filters__submit {
	margin-block-start: 1rem;
	inline-size: 100%;
	padding-block: 0.75rem;
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	border: none;
	border-radius: 10px;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
}

/* ─── Active filter chips row ─── */
.asi-active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.625rem;
	margin-block-end: 1.25rem;
	padding-block-end: 1.25rem;
	border-block-end: 1px solid var(--asi-archive-line);
}

.asi-active-filters__label {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--asi-archive-muted);
}

.asi-active-filters__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.asi-active-filters__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding-inline: 0.625rem 0.5rem;
	padding-block: 0.35rem;
	background: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-1) 25%, transparent);
	color: var(--wp--preset--color--accent-1);
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 140ms ease, color 140ms ease;
}

.asi-active-filters__chip:hover {
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
}

/* Immediate-feedback state when the chip has been clicked but the AJAX swap
   is still in flight — fades + scales slightly so the user sees the click
   register even if the server hasn't responded yet. */
.asi-active-filters__chip.is-leaving {
	opacity: 0.35;
	transform: scale(0.94);
	transition: opacity 180ms ease, transform 180ms ease;
}

.asi-active-filters__chip svg { opacity: 0.7; }

.asi-active-filters__clear {
	margin-inline-start: auto;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--asi-archive-muted);
	text-decoration: none;
}

.asi-active-filters__clear:hover { color: var(--wp--preset--color--accent-1); text-decoration: underline; }

/* ─── Product grid override (only inside .asi-archive) ───
   Reset both the homepage slider's flex/nowrap rules AND WooCommerce core's
   legacy float layout (woocommerce-layout.css applies width:22.05% +
   float:left + margin:0 3.8% 2.992em 0 to every li.product on a .woocommerce
   body, which makes grid items render at ~22% of their cell width — tiny
   slivers). We out-specify by anchoring on .asi-archive AND .woocommerce, and
   slap !important on every conflicting property. */
.woocommerce .asi-archive .asi-products ul.products,
.asi-archive .asi-products ul.products,
.asi-archive .asi-products .woocommerce ul.products,
.asi-archive .woocommerce .asi-products ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)) !important;
	gap: clamp(1rem, 2vw, 1.5rem) !important;
	flex-wrap: wrap !important;
}

.woocommerce .asi-archive .asi-products ul.products li.product,
.asi-archive .asi-products ul.products li.product,
.asi-archive .asi-products .woocommerce ul.products li.product {
	inline-size: auto !important;
	min-inline-size: 0 !important;
	max-inline-size: none !important;
	flex: initial !important;
	float: none !important;
	margin: 0 !important;
	scroll-snap-align: none;
}

/* ─── Load More ─── */
.asi-load-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	margin-block-start: 2.5rem;
	padding-block-start: 2rem;
}

.asi-load-more__count {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--accent-4);
	font-weight: 400;
}

.asi-load-more__count strong {
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.asi-load-more__bar {
	inline-size: min(280px, 100%);
	block-size: 3px;
	background: var(--asi-archive-line, color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent));
	border-radius: 2px;
	overflow: hidden;
}

.asi-load-more__bar-fill {
	block-size: 100%;
	background: var(--wp--preset--color--accent-1);
	border-radius: 2px;
	transition: width 400ms cubic-bezier(0.25, 1, 0.5, 1);
}

.asi-load-more__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-inline-size: 200px;
	padding: 0.75rem 2rem;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--accent-1);
	background: transparent;
	border: 1.5px solid var(--wp--preset--color--accent-1);
	border-radius: 12px;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease, transform 120ms ease;
}

.asi-load-more__btn:hover {
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
}

.asi-load-more__btn:active {
	transform: scale(0.97);
}

.asi-load-more__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
}

.asi-load-more__btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Spinner (hidden by default, shown during loading) */
.asi-load-more__spinner {
	display: none;
	inline-size: 16px;
	block-size: 16px;
	border: 2px solid currentColor;
	border-block-start-color: transparent;
	border-radius: 50%;
	animation: asi-spin 600ms linear infinite;
}

.asi-load-more.is-loading .asi-load-more__btn-label {
	opacity: 0.5;
}

.asi-load-more.is-loading .asi-load-more__spinner {
	display: block;
}

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

@media (prefers-reduced-motion: reduce) {
	.asi-load-more__spinner {
		animation-duration: 1.5s;
	}
	.asi-load-more__bar-fill {
		transition-duration: 0ms;
	}
}

/* ─── Empty state (redesigned) ─── */
.asi-empty-state {
	/* fills parent results container */
}

.asi-empty-state__hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: clamp(3rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--asi-archive-line);
	border-radius: var(--asi-archive-radius);
}

.asi-empty-state__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 56px;
	block-size: 56px;
	border-radius: 14px;
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	margin-block-end: 1.5rem;
}

.asi-empty-state__title {
	font-family: var(--asi-font-family);
	font-size: clamp(1.375rem, 2.5vw, 1.75rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 0.625rem;
	color: var(--wp--preset--color--contrast);
}

.asi-empty-state__text {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--asi-archive-muted);
	margin: 0 0 1.75rem;
	max-inline-size: 42ch;
}

.asi-empty-state__text strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

/* ── Filter chips (shown when filters active) ── */
.asi-empty-state__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-block-end: 1.5rem;
}

.asi-empty-state__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.75rem;
	background: var(--wp--preset--color--accent-3);
	border: 1px solid var(--asi-archive-line);
	border-radius: 999px;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: background 150ms ease, border-color 150ms ease;
}

.asi-empty-state__chip:hover {
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 8%, transparent);
	border-color: var(--wp--preset--color--accent-1);
}

.asi-empty-state__chip svg {
	opacity: 0.5;
	flex-shrink: 0;
	transition: opacity 150ms ease;
}

.asi-empty-state__chip:hover svg {
	opacity: 1;
}

/* ── Action buttons ── */
.asi-empty-state__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
}

.asi-empty-state__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6875rem 1.375rem;
	border-radius: 10px;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.asi-empty-state__btn:hover {
	transform: translateY(-1px);
}

.asi-empty-state__btn--primary {
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	box-shadow: 0 1px 3px rgba(1, 85, 183, 0.2);
}

[dir="rtl"] .asi-empty-state__btn--primary svg {
	transform: scaleX(-1);
}

.asi-empty-state__btn--primary:hover {
	box-shadow: 0 6px 16px rgba(1, 85, 183, 0.25);
	color: var(--wp--preset--color--base);
}

.asi-empty-state__btn--ghost {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--asi-archive-line);
}

.asi-empty-state__btn--ghost:hover {
	background: var(--wp--preset--color--accent-3);
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

/* ── Sections (siblings, products) ── */
.asi-empty-state__section {
	margin-block-start: 1.5rem;
}

.asi-empty-state__section-title {
	font-family: var(--asi-font-family);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 0.875rem;
}

/* ── Sibling category links ── */
.asi-empty-state__siblings {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: 0.5rem;
}

.asi-empty-state__sibling {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.875rem 1rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--asi-archive-line);
	border-radius: var(--asi-archive-radius);
	text-decoration: none;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.asi-empty-state__sibling:hover {
	border-color: var(--wp--preset--color--accent-1);
	box-shadow: 0 2px 8px rgba(1, 85, 183, 0.08);
}

.asi-empty-state__sibling-name {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	flex: 1;
	min-inline-size: 0;
}

.asi-empty-state__sibling-count {
	font-size: 0.75rem;
	color: var(--asi-archive-muted);
	white-space: nowrap;
}

.asi-empty-state__sibling-arrow {
	color: var(--asi-archive-muted);
	flex-shrink: 0;
	transition: color 160ms ease, transform 160ms ease;
}

[dir="rtl"] .asi-empty-state__sibling-arrow {
	transform: scaleX(-1);
}

.asi-empty-state__sibling:hover .asi-empty-state__sibling-arrow {
	color: var(--wp--preset--color--accent-1);
	transform: translateX(2px);
}

[dir="rtl"] .asi-empty-state__sibling:hover .asi-empty-state__sibling-arrow {
	transform: scaleX(-1) translateX(2px);
}

/* ── Suggested products grid ── */
.woocommerce .asi-empty-state__products ul.products,
.asi-empty-state__products ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)) !important;
	gap: 1rem !important;
	flex-wrap: wrap !important;
}

.woocommerce .asi-empty-state__products ul.products li.product,
.asi-empty-state__products ul.products li.product {
	inline-size: auto !important;
	min-inline-size: 0 !important;
	max-inline-size: none !important;
	flex: initial !important;
	float: none !important;
	margin: 0 !important;
	scroll-snap-align: none;
}

/* Mobile filter drawer backdrop */
.asi-archive.is-filters-open::after {
	content: "";
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.4);
	z-index: 199;
}

@media (min-width: 961px) {
	.asi-archive.is-filters-open::after { display: none; }
}

/* Loading swap fade */
.asi-archive__results.is-loading {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 220ms ease;
}

/* Qty-cart fallback states (out-of-stock, select options) */
.asi-qty-cart--oos { justify-content: center; }

.asi-cart-status--oos {
	display: inline-flex;
	align-items: center;
	padding-inline: 0.875rem;
	padding-block: 0.5rem;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 5%, transparent);
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 60%, transparent);
	border-radius: 999px;
	font-family: var(--asi-font-family);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Variable / "needs choosing" products: a clear labelled button instead of a
   bare arrow (which read like a back-arrow). Fills the footer row and links to
   the product page to pick a variant — no inline option selection. */
.asi-qty-cart--select { justify-content: stretch; }

.asi-cart-btn--select {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	inline-size: auto !important;
	block-size: 38px !important;
	flex: 1 1 auto;
	padding-inline: 0.875rem !important;
	/* The base .asi-cart-btn is an icon-only button (font-size:0 !important);
	   restore type so the label shows. */
	font-family: var(--asi-font-family) !important;
	font-size: 0.8125rem !important;
	line-height: 1 !important;
	font-weight: 600;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.asi-cart-btn--select .asi-cart-btn__icon { flex-shrink: 0; }
.asi-cart-btn--select .asi-cart-btn__label { font-size: 0.8125rem; line-height: 1; }


/* ═══════════════════════════════════════════════════════════
   About Us Page — "A Story Written in Kuwaiti Homes"
   Editorial-cinema redesign (2026): hero word-stagger,
   chapter narrative blocks, breathing closing line, mission
   monolith, count-up numbers, directional-light brand cards.
   ═══════════════════════════════════════════════════════════ */

/* ─── Reveal-primitive disabled — content stays visible from page load.
   The .asi-about-anim class is kept as a marker so inner triggers
   like ".asi-about-chapter.is-in .asi-about-iso__item" still work
   when the JS adds `is-in` on load. No section-level fade-in. */
.asi-about-anim {
	opacity: 1;
}

/* Word splitter — applied to .asi-about-hero__title and .asi-about-closing__line */
.asi-word {
	display: inline-block;
	will-change: opacity, transform, filter;
}


/* ═══════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════ */
.asi-about-hero {
	position: relative;
	min-block-size: 68svh;
	min-block-size: 68vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	isolation: isolate;
	background: var(--wp--preset--color--contrast, #0F172A);
}

.asi-about-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	transform: scale(1.08);
	transition: transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1);
	will-change: transform;
}
.asi-about-hero.is-in .asi-about-hero__bg {
	transform: scale(1);
}

.asi-about-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
	display: block;
	opacity: 0.95;
}

.asi-about-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	/* Single bottom-heavy gradient keeps the AL SHARHAN INDUSTRIES sign
	   readable in the upper portion of the image while ensuring text
	   legibility for the headline + subtitle at the bottom. */
	background: linear-gradient(
		180deg,
		rgba(15, 23, 42, 0.04) 0%,
		rgba(15, 23, 42, 0.16) 38%,
		rgba(15, 23, 42, 0.70) 72%,
		rgba(15, 23, 42, 0.94) 100%
	);
}

.asi-about-hero__grain {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: 0.35;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.asi-about-hero__content {
	position: relative;
	z-index: 3;
	max-inline-size: 1280px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--50, 1.5rem);
	padding-block: 4rem 3.5rem;
	width: 100%;
}

.asi-about-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.875rem;
	margin-block-end: 1.5rem;
	opacity: 0;
	transform: translate3d(0, 8px, 0);
	transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s,
		transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s;
}
.asi-about-hero.is-in .asi-about-hero__eyebrow {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

.asi-about-hero__rule {
	display: inline-block;
	inline-size: 32px;
	block-size: 1px;
	background: var(--wp--preset--color--warm-orange, #F59E0B);
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s;
}
[dir="rtl"] .asi-about-hero__rule {
	transform-origin: right center;
}
.asi-about-hero.is-in .asi-about-hero__rule {
	transform: scaleX(1);
}

.asi-about-hero__eyebrow-text {
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--warm-orange, #F59E0B);
}

.asi-about-hero__title {
	color: #fff;
	font-size: clamp(2.5rem, 6vw, 5rem);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.025em;
	max-inline-size: 920px;
	margin-block: 0 1.75rem;
}

.asi-about-hero__title .asi-word {
	opacity: 0;
	transform: translate3d(0, 0.55em, 0);
	filter: blur(10px);
	transition:
		opacity 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--asi-word-i, 0) * 75ms + 0.35s),
		transform 1.05s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--asi-word-i, 0) * 75ms + 0.35s),
		filter 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--asi-word-i, 0) * 75ms + 0.35s);
}
.asi-about-hero.is-in .asi-about-hero__title .asi-word {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	filter: blur(0);
}

.asi-about-hero__subtitle {
	color: rgba(255, 255, 255, 0.78);
	font-size: clamp(1rem, 1.4vw, 1.1875rem);
	line-height: 1.65;
	max-inline-size: 620px;
	margin: 0;
	opacity: 0;
	transform: translate3d(0, 14px, 0);
	transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.9s,
		transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.9s;
}
.asi-about-hero.is-in .asi-about-hero__subtitle {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

.asi-about-hero__hint {
	position: absolute;
	inset-block-end: 2rem;
	inset-inline-end: var(--wp--preset--spacing--50, 1.5rem);
	display: flex;
	align-items: center;
	gap: 0.75rem;
	opacity: 0;
	transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 1.4s;
}
.asi-about-hero.is-in .asi-about-hero__hint {
	opacity: 0.55;
}

.asi-about-hero__hint-line {
	display: inline-block;
	inline-size: 1px;
	block-size: 32px;
	background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.7));
	transform-origin: center top;
	animation: asi-hint-pulse 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.asi-about-hero__hint-label {
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: rgba(255, 255, 255, 0.8);
}

@keyframes asi-hint-pulse {
	0%, 100% { transform: scaleY(0.4); opacity: 0.5; }
	50%      { transform: scaleY(1); opacity: 1; }
}


/* ═══════════════════════════════════════════════
   STORY CHAPTERS
   ═══════════════════════════════════════════════ */
.asi-about-chapters {
	background: var(--wp--preset--color--base, #fff);
}

.asi-about-chapter {
	padding-block: clamp(2.75rem, 6vw, 4.5rem);
	padding-inline: var(--wp--preset--spacing--50, 1.5rem);
	position: relative;
}

.asi-about-chapter + .asi-about-chapter {
	border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #0F172A) 6%, transparent);
}

.asi-about-chapter__inner {
	max-inline-size: 1200px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(2.5rem, 6vw, 5.5rem);
	align-items: center;
}

.asi-about-chapter--reverse .asi-about-chapter__inner {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}
.asi-about-chapter--reverse .asi-about-chapter__media {
	order: 2;
}
.asi-about-chapter--reverse .asi-about-chapter__body {
	order: 1;
}

/* ─── Chapter media ─── */
.asi-about-chapter__media {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 5;
	max-block-size: 620px;
	align-self: stretch;
}

.asi-about-chapter__frame {
	position: relative;
	block-size: 100%;
	inline-size: 100%;
	overflow: hidden;
	border-radius: 4px;
	background: var(--wp--preset--color--accent-3, #F8FAFC);
	transform: translate3d(0, 0, 0) scale(1.04);
	transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.asi-about-chapter.is-in .asi-about-chapter__frame {
	transform: translate3d(0, 0, 0) scale(1);
}

.asi-about-chapter__frame::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 50%, rgba(15, 23, 42, 0.18) 100%);
	pointer-events: none;
}

.asi-about-chapter__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 7s ease-out;
}
.asi-about-chapter.is-in .asi-about-chapter__frame img {
	transform: scale(1.05);
}

/* ─── Chapter body ─── */
.asi-about-chapter__body {
	max-inline-size: 540px;
}

.asi-about-chapter__meta {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-block-end: 1.5rem;
}

.asi-about-chapter__number {
	font-size: clamp(3rem, 6vw, 5rem);
	font-weight: 900;
	line-height: 0.9;
	letter-spacing: -0.04em;
	color: transparent;
	-webkit-text-stroke: 1.25px var(--wp--preset--color--accent-1, #0155B7);
	text-stroke: 1.25px var(--wp--preset--color--accent-1, #0155B7);
	font-variant-numeric: tabular-nums;
}

.asi-about-chapter__divider {
	flex: 1;
	block-size: 1px;
	background: color-mix(in srgb, var(--wp--preset--color--contrast, #0F172A) 14%, transparent);
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s;
}
[dir="rtl"] .asi-about-chapter__divider {
	transform-origin: right center;
}
.asi-about-chapter.is-in .asi-about-chapter__divider {
	transform: scaleX(1);
}

.asi-about-chapter__tag {
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--wp--preset--color--accent-4, #64748B);
}

/* Sub-section labels (chapter 03 uses "ISO Certified" + "Quality Commitment") */
.asi-about-chapter__sublabel {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--wp--preset--color--accent-1, #0155B7);
	margin-block-end: 0.625rem;
	opacity: 0;
	transform: translate3d(0, 4px, 0);
	transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s,
		transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s;
}
.asi-about-chapter.is-in .asi-about-chapter__sublabel {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}
.asi-about-chapter__sublabel--tail {
	margin-block-start: 2rem;
	color: var(--wp--preset--color--accent-4, #64748B);
}

.asi-about-chapter__text--tail {
	margin-block-start: 0;
}

.asi-about-chapter__heading {
	font-size: clamp(1.875rem, 3.5vw, 2.875rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.022em;
	color: var(--wp--preset--color--contrast, #0F172A);
	margin-block: 0 1.5rem;
}

.asi-about-chapter__heading-text {
	display: inline;
}

.asi-about-chapter__underline {
	display: block;
	margin-block-start: 0.5rem;
	color: var(--wp--preset--color--accent-1, #0155B7);
	inline-size: 140px;
	block-size: 10px;
}

.asi-about-chapter__underline path {
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	transition: stroke-dashoffset 1.5s cubic-bezier(0.2, 0.6, 0.2, 1) 0.45s;
}
.asi-about-chapter.is-in .asi-about-chapter__underline path {
	stroke-dashoffset: 0;
}

.asi-about-chapter__text {
	font-size: clamp(1rem, 1.3vw, 1.125rem);
	line-height: 1.75;
	color: var(--wp--preset--color--accent-4, #64748B);
	margin: 0;
}
.asi-about-chapter__text + .asi-about-chapter__text {
	margin-block-start: 0.875rem;
}

/* ─── ISO certifications grid (embedded in chapter 03) ─── */
.asi-about-iso {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin-block-start: 2rem;
	padding: 0;
	list-style: none;
}

.asi-about-iso__item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1rem 1.125rem;
	background: var(--wp--preset--color--accent-3, #F8FAFC);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-1, #0155B7) 12%, transparent);
	border-radius: 4px;
	border-inline-start: 3px solid var(--wp--preset--color--accent-1, #0155B7);
	opacity: 0;
	transform: translate3d(0, 10px, 0);
	transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--asi-iso-i, 0) * 90ms + 0.6s),
		transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--asi-iso-i, 0) * 90ms + 0.6s);
}
.asi-about-chapter.is-in .asi-about-iso__item {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

.asi-about-iso__code {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast, #0F172A);
	letter-spacing: 0.02em;
}

.asi-about-iso__desc {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--accent-4, #64748B);
	line-height: 1.4;
}


/* ═══════════════════════════════════════════════
   Chapter variants — text-only (intro) + closing
   ═══════════════════════════════════════════════ */

/* Text-only chapter (no image): single column, body uses fuller width */
.asi-about-chapter--text-only .asi-about-chapter__inner {
	grid-template-columns: 1fr;
}
.asi-about-chapter--text-only .asi-about-chapter__body {
	max-inline-size: 760px;
	margin-inline: auto;
}

/* Closing chapter: smallest, centered, just a number + line */
.asi-about-chapter--closing {
	padding-block: clamp(2.5rem, 5vw, 4rem);
}
.asi-about-chapter--closing .asi-about-chapter__inner {
	grid-template-columns: 1fr;
}
.asi-about-chapter--closing .asi-about-chapter__body {
	max-inline-size: 780px;
	margin-inline: auto;
	text-align: center;
}
.asi-about-chapter--closing .asi-about-chapter__meta {
	justify-content: center;
}
.asi-about-chapter--closing .asi-about-chapter__divider {
	flex: 0 0 64px;
}
.asi-about-chapter--closing .asi-about-chapter__text {
	font-size: clamp(1.375rem, 2.6vw, 2rem);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--contrast, #0F172A);
	margin-block-start: 0.5rem;
}


/* ═══════════════════════════════════════════════
   MISSION — cream-paper editorial moment
   ═══════════════════════════════════════════════ */
.asi-about-mission {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3rem, 6vw, 4.5rem);
	padding-inline: var(--wp--preset--spacing--50, 1.5rem);
	background-color: #fbf7ee;
	background-image:
		radial-gradient(ellipse 1000px 500px at 50% 0%, color-mix(in srgb, var(--wp--preset--color--accent-1, #0155B7) 5%, transparent), transparent 60%),
		radial-gradient(ellipse 800px 400px at 50% 100%, color-mix(in srgb, var(--wp--preset--color--warm-orange, #F59E0B) 4%, transparent), transparent 60%),
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0.06 0 0 0 0 0.06 0 0 0 0 0.06 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
	background-blend-mode: normal, normal, multiply;
}

.asi-about-mission__inner {
	max-inline-size: 920px;
	margin-inline: auto;
	text-align: center;
}

.asi-about-mission__eyebrow {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--wp--preset--color--accent-1, #0155B7);
	margin-block-end: 1.25rem;
	position: relative;
	padding-block-end: 0.625rem;
}

.asi-about-mission__eyebrow::after {
	content: '';
	position: absolute;
	inset-inline-start: 50%;
	inset-block-end: 0;
	transform: translateX(-50%) scaleX(0);
	transform-origin: center;
	inline-size: 36px;
	block-size: 1px;
	background: currentColor;
	transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s;
}
.asi-about-mission.is-in .asi-about-mission__eyebrow::after {
	transform: translateX(-50%) scaleX(1);
}

.asi-about-mission__statement {
	font-size: clamp(1.375rem, 2.6vw, 1.875rem);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.012em;
	color: var(--wp--preset--color--contrast, #0F172A);
	margin: 0;
}

/* ═══════════════════════════════════════════════
   NUMBERS — count-up grid
   ═══════════════════════════════════════════════ */
.asi-about-numbers {
	background: var(--wp--preset--color--contrast, #0F172A);
	padding-block: clamp(2.75rem, 5vw, 4rem);
	padding-inline: var(--wp--preset--spacing--50, 1.5rem);
	position: relative;
	overflow: hidden;
}

.asi-about-numbers::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: linear-gradient(180deg, transparent 0%, rgba(1, 85, 183, 0.08) 100%);
	pointer-events: none;
}

.asi-about-numbers__inner {
	position: relative;
	max-inline-size: 1280px;
	margin-inline: auto;
}

.asi-about-numbers__heading {
	color: #fff;
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-block: 0 3rem;
	text-align: center;
}

.asi-about-numbers__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
}

.asi-about-numbers__item {
	text-align: center;
	padding: 1.75rem 1.25rem;
	border-inline-start: 1px solid rgba(255, 255, 255, 0.08);
	position: relative;
}
.asi-about-numbers__item:first-child {
	border-inline-start: 0;
}

.asi-about-numbers__value {
	display: block;
	font-size: clamp(2.5rem, 5vw, 3.875rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	margin-block-end: 0.75rem;
	font-variant-numeric: tabular-nums;
	/* Keep "300+" reading as a single LTR token in RTL — otherwise BiDi
	   flips the "+" to the visual start ("+300" instead of "300+"). */
	unicode-bidi: isolate;
	direction: ltr;
}

.asi-about-numbers__value[data-accent="blue"]   { color: var(--wp--preset--color--accent-1, #0155B7); }
.asi-about-numbers__value[data-accent="orange"] { color: var(--wp--preset--color--warm-orange, #F59E0B); }
.asi-about-numbers__value[data-accent="green"]  { color: var(--wp--preset--color--accent-2, #72B94A); }

.asi-about-numbers__label {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: rgba(255, 255, 255, 0.85);
	margin-block-end: 0.75rem;
}

.asi-about-numbers__desc {
	display: block;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.45);
	max-inline-size: 240px;
	margin-inline: auto;
}


/* ═══════════════════════════════════════════════
   BRANDS — directional-light cards
   ═══════════════════════════════════════════════ */
.asi-about-brands {
	background: var(--wp--preset--color--base, #fff);
	padding-block: clamp(2.75rem, 5vw, 4rem);
	padding-inline: var(--wp--preset--spacing--50, 1.5rem);
}

.asi-about-brands__inner {
	max-inline-size: 1280px;
	margin-inline: auto;
}

.asi-about-brands__header {
	max-inline-size: 640px;
	margin-block-end: 3rem;
}

.asi-about-brands__header h2 {
	font-size: clamp(1.875rem, 3.5vw, 2.75rem);
	font-weight: 700;
	letter-spacing: -0.022em;
	color: var(--wp--preset--color--contrast, #0F172A);
	margin-block: 0 0.875rem;
	line-height: 1.15;
}

.asi-about-brands__header p {
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--wp--preset--color--accent-4, #64748B);
	margin: 0;
}

.asi-about-brands__section {
	margin-block-end: 2.5rem;
}
.asi-about-brands__section:last-child {
	margin-block-end: 0;
}

.asi-about-brands__category {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--wp--preset--color--accent-4, #64748B);
	margin-block-end: 1.25rem;
	padding-block-end: 0.75rem;
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #0F172A) 8%, transparent);
}

.asi-about-brands__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1rem;
}

.asi-about-brands__grid--distribute {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.asi-about-brand-card {
	position: relative;
	isolation: isolate;
	display: block;
	background: var(--wp--preset--color--base, #fff);
	border-radius: 4px;
	padding: 1.5rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #0F172A) 8%, transparent);
	overflow: hidden;
	transition:
		transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
		box-shadow 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
		border-color 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
	will-change: transform;
}

.asi-about-brand-card:hover {
	transform: translate3d(0, -4px, 0);
	box-shadow: 0 18px 36px -18px rgba(15, 23, 42, 0.18);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent-1, #0155B7) 20%, transparent);
}

.asi-about-brand-card:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1, #0155B7);
	outline-offset: 3px;
}

.asi-about-brand-card__sheen {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.4s ease-out;
	z-index: 0;
	background: radial-gradient(
		260px circle at var(--asi-light-x, 50%) var(--asi-light-y, 50%),
		color-mix(in srgb, var(--wp--preset--color--accent-1, #0155B7) 12%, transparent) 0%,
		transparent 60%
	);
}
.asi-about-brand-card:hover .asi-about-brand-card__sheen {
	opacity: 1;
}

.asi-about-brand-card > * {
	position: relative;
	z-index: 1;
}

.asi-about-brand-card__logo {
	block-size: 40px;
	display: flex;
	align-items: center;
	margin-block-end: 0.875rem;
}

.asi-about-brand-card--logo-only .asi-about-brand-card__logo {
	block-size: 48px;
	justify-content: center;
	margin-block-end: 0;
}

.asi-about-brand-card--logo-only {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem 1.5rem;
}

.asi-about-brand-card__logo img {
	max-block-size: 36px;
	max-inline-size: 120px;
	width: auto;
	height: auto;
	object-fit: contain;
	object-position: left center;
}
[dir="rtl"] .asi-about-brand-card__logo img {
	object-position: right center;
}

.asi-about-brand-card--logo-only .asi-about-brand-card__logo img {
	max-block-size: 44px;
	max-inline-size: 140px;
	object-position: center;
}

.asi-about-brand-card__name {
	font-size: 1rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast, #0F172A);
	margin-block: 0 0.375rem;
	letter-spacing: -0.005em;
}

.asi-about-brand-card__desc {
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--wp--preset--color--accent-4, #64748B);
	margin: 0;
}


/* ═══════════════════════════════════════════════
   About — Arabic typography adjustments
   Arabic glyphs lack ascenders/descenders, so at the same px size
   they read smaller than Latin. Bump labels and body text up, and
   drop the uppercase letter-spacing tricks (no-op for Arabic and
   wide tracking makes Arabic words look broken apart).
   ═══════════════════════════════════════════════ */
.asi-about-chapter__sublabel:lang(ar),
.asi-about-mission__eyebrow:lang(ar),
.asi-about-numbers__label:lang(ar),
.asi-about-brands__category:lang(ar) {
	font-size: 0.9375rem;
	letter-spacing: 0;
	text-transform: none;
	font-weight: 600;
}

/* Chapter meta tag — bumped well above other eyebrows because half the
   chapters use a year (١٩٦٨, ١٩٧١) where Arabic-Indic digits in Tajawal
   read visually lighter than equivalent letters, and they sit next to a
   very large outlined chapter number which dwarfs anything timid. */
.asi-about-chapter__tag:lang(ar) {
	font-size: 1.25rem;
	letter-spacing: 0;
	text-transform: none;
	font-weight: 700;
}

.asi-about-hero__eyebrow-text:lang(ar) {
	font-size: 0.9375rem;
	letter-spacing: 0.02em;
	text-transform: none;
	font-weight: 600;
}

.asi-about-hero__hint-label:lang(ar) {
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: none;
}

.asi-about-chapter__text:lang(ar) {
	font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
	line-height: 1.85;
}

.asi-about-numbers__desc:lang(ar),
.asi-about-brand-card__desc:lang(ar),
.asi-about-brands__header p:lang(ar) {
	font-size: 0.9375rem;
	line-height: 1.7;
}

.asi-about-numbers__heading:lang(ar),
.asi-about-brands__header h2:lang(ar) {
	letter-spacing: 0;
}

/* Millions counter: spell out "مليون" instead of "M+" in Arabic.
   Flip the value's direction back to RTL so digits (LTR-internal)
   sit on the right and the word reads naturally on the left. */
.asi-about-numbers__value--ar-word {
	direction: rtl;
	unicode-bidi: isolate;
	display: inline-flex;
	align-items: baseline;
	gap: 0.18em;
}
.asi-about-numbers__suffix-word {
	font-size: 0.42em;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1;
	color: inherit;
	white-space: nowrap;
}


/* ═══════════════════════════════════════════════
   About — Responsive
   ═══════════════════════════════════════════════ */
@media (max-width: 1024px) {
	.asi-about-chapter__inner {
		gap: 3rem;
	}

	.asi-about-numbers__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 2rem;
	}

	.asi-about-numbers__item {
		border-inline-start: 0;
	}
}

@media (max-width: 781px) {
	.asi-about-hero {
		min-block-size: 62svh;
		min-block-size: 62vh;
	}
	.asi-about-hero__content {
		padding-block: 3.5rem 2.75rem;
	}

	.asi-about-chapter__inner,
	.asi-about-chapter--reverse .asi-about-chapter__inner {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	.asi-about-chapter__media,
	.asi-about-chapter--reverse .asi-about-chapter__media {
		order: -1;
		aspect-ratio: 4 / 3;
		max-block-size: 360px;
	}
	.asi-about-chapter__body,
	.asi-about-chapter--reverse .asi-about-chapter__body {
		order: 0;
		max-inline-size: none;
	}

	.asi-about-iso {
		grid-template-columns: 1fr;
	}

	.asi-about-brands__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.asi-about-brands__grid--distribute {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.asi-about-hero__hint {
		display: none;
	}

	.asi-about-chapter {
		padding-block: 2.5rem;
	}

	.asi-about-chapter__number {
		font-size: 2.5rem;
	}

	.asi-about-chapter--closing .asi-about-chapter__text {
		font-size: 1.125rem;
	}
	.asi-about-mission__statement {
		font-size: 1.0625rem;
	}

	.asi-about-numbers__grid {
		grid-template-columns: 1fr;
		row-gap: 1.25rem;
	}

	.asi-about-numbers__item {
		padding-block: 1rem;
	}

	.asi-about-brands__grid,
	.asi-about-brands__grid--distribute {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}


/* ═══════════════════════════════════════════════
   Reduced motion — graceful fallback
   ═══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
	.asi-about-anim,
	.asi-about-hero__bg,
	.asi-about-hero__eyebrow,
	.asi-about-hero__rule,
	.asi-about-hero__hint,
	.asi-about-hero__title .asi-word,
	.asi-about-chapter__frame,
	.asi-about-chapter__divider,
	.asi-about-chapter__underline path,
	.asi-about-chapter__sublabel,
	.asi-about-iso__item,
	.asi-about-mission__eyebrow::after {
		transition: none !important;
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		letter-spacing: normal !important;
	}
	.asi-about-chapter__underline path {
		stroke-dashoffset: 0 !important;
	}
	.asi-about-hero__rule,
	.asi-about-chapter__divider {
		transform: scaleX(1) !important;
	}
	.asi-about-mission__eyebrow::after {
		transform: translateX(-50%) scaleX(1) !important;
	}
	.asi-about-hero__hint {
		opacity: 0.55 !important;
	}
	.asi-about-hero__hint-line {
		animation: none !important;
		transform: scaleY(1) !important;
	}
	.asi-about-closing__halo {
		animation: none !important;
	}
}

/* ═══════════════════════════════════════════════════════════
   404 Page — "Cleaned Away" (photo + text two-column)
   ═══════════════════════════════════════════════════════════ */
.asi-404 {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: calc(100vh - 160px);
	min-block-size: calc(100dvh - 160px);
	padding: clamp(2rem, 5vw, 4rem) var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--base);
	overflow: hidden;
}

/* ── Two-column layout ── */
.asi-404-layout {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
	max-inline-size: 1100px;
	margin-inline: auto;
}

/* No-photo fallback — centered single column */
.asi-404-layout--no-photo {
	grid-template-columns: 1fr;
	text-align: center;
	max-inline-size: 580px;
}

.asi-404-layout--no-photo .asi-404-search {
	margin-inline: auto;
}

.asi-404-layout--no-photo .asi-404-actions {
	justify-content: center;
}

/* ── Photo side ── */
.asi-404-photo {
	display: flex;
	align-items: center;
	justify-content: center;
}

.asi-404-photo img {
	max-inline-size: 100%;
	block-size: auto;
	max-block-size: 420px;
	object-fit: contain;
	border-radius: var(--asi-radius);
	animation: asi-404-photo-in 0.6s cubic-bezier(0.25, 1, 0.5, 1) both;
}

@keyframes asi-404-photo-in {
	0% { opacity: 0; transform: scale(0.92) translateY(12px); }
	100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Bubbles container ── */
.asi-404-bubbles {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.asi-404-bubble {
	position: absolute;
	border-radius: 50%;
	opacity: 0;
	will-change: transform;
}

.asi-404-bubble--blue {
	background: radial-gradient(circle at 35% 35%, rgba(1, 85, 183, 0.12), rgba(1, 85, 183, 0.04));
	box-shadow: inset 0 0 8px rgba(1, 85, 183, 0.08);
}
.asi-404-bubble--green {
	background: radial-gradient(circle at 35% 35%, rgba(114, 185, 74, 0.12), rgba(114, 185, 74, 0.04));
	box-shadow: inset 0 0 8px rgba(114, 185, 74, 0.08);
}
.asi-404-bubble--orange {
	background: radial-gradient(circle at 35% 35%, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.04));
	box-shadow: inset 0 0 8px rgba(245, 158, 11, 0.08);
}

/* Individual bubble placements */
.asi-404-bubble--1 {
	inline-size: clamp(40px, 8vw, 80px);
	block-size: clamp(40px, 8vw, 80px);
	inset-inline-start: 10%;
	inset-block-end: -10%;
	animation: asi-404-float 8s ease-in-out infinite;
	animation-delay: 0s;
}
.asi-404-bubble--2 {
	inline-size: clamp(24px, 5vw, 48px);
	block-size: clamp(24px, 5vw, 48px);
	inset-inline-start: 25%;
	inset-block-end: -8%;
	animation: asi-404-float 10s ease-in-out infinite;
	animation-delay: -2s;
}
.asi-404-bubble--3 {
	inline-size: clamp(32px, 6vw, 56px);
	block-size: clamp(32px, 6vw, 56px);
	inset-inline-start: 45%;
	inset-block-end: -12%;
	animation: asi-404-float 9s ease-in-out infinite;
	animation-delay: -4s;
}
.asi-404-bubble--4 {
	inline-size: clamp(20px, 4vw, 36px);
	block-size: clamp(20px, 4vw, 36px);
	inset-inline-start: 65%;
	inset-block-end: -6%;
	animation: asi-404-float 11s ease-in-out infinite;
	animation-delay: -1s;
}
.asi-404-bubble--5 {
	inline-size: clamp(48px, 10vw, 96px);
	block-size: clamp(48px, 10vw, 96px);
	inset-inline-start: 80%;
	inset-block-end: -14%;
	animation: asi-404-float 12s ease-in-out infinite;
	animation-delay: -3s;
}
.asi-404-bubble--6 {
	inline-size: clamp(16px, 3vw, 28px);
	block-size: clamp(16px, 3vw, 28px);
	inset-inline-start: 5%;
	inset-block-end: -5%;
	animation: asi-404-float 7s ease-in-out infinite;
	animation-delay: -5s;
}
.asi-404-bubble--7 {
	inline-size: clamp(28px, 5.5vw, 52px);
	block-size: clamp(28px, 5.5vw, 52px);
	inset-inline-start: 55%;
	inset-block-end: -8%;
	animation: asi-404-float 13s ease-in-out infinite;
	animation-delay: -6s;
}
.asi-404-bubble--8 {
	inline-size: clamp(18px, 3.5vw, 32px);
	block-size: clamp(18px, 3.5vw, 32px);
	inset-inline-start: 90%;
	inset-block-end: -10%;
	animation: asi-404-float 9.5s ease-in-out infinite;
	animation-delay: -7s;
}

@keyframes asi-404-float {
	0% {
		opacity: 0;
		transform: translateY(0) scale(0.6);
	}
	10% {
		opacity: 1;
	}
	80% {
		opacity: 0.6;
	}
	100% {
		opacity: 0;
		transform: translateY(calc(-100vh - 100px)) scale(1);
	}
}

/* ── Content side ── */
.asi-404-content {
	position: relative;
	z-index: 1;
}

/* Error badge */
.asi-404-badge {
	display: inline-block;
	padding: 0.25rem 0.875rem;
	border-radius: var(--asi-radius-pill);
	background: rgba(1, 85, 183, 0.08);
	color: var(--wp--preset--color--accent-1);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	margin-block-end: 1rem;
}

/* Main title */
.asi-404-title {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 0.75rem;
}

/* Description */
.asi-404-desc {
	font-size: clamp(0.875rem, 1.8vw, 1rem);
	line-height: 1.65;
	color: var(--wp--preset--color--accent-4);
	margin: 0 0 1.5rem;
}

/* ── Search bar ── */
.asi-404-search {
	margin-block-end: 1.25rem;
	inline-size: 100%;
	max-inline-size: 440px;
}

.asi-404-search-wrap {
	position: relative;
	display: flex;
	align-items: center;
	background: var(--wp--preset--color--accent-3);
	border: 1px solid rgba(15, 23, 42, 0.1);
	border-radius: var(--asi-radius-pill);
	transition: border-color var(--asi-transition), box-shadow var(--asi-transition);
}

.asi-404-search-wrap:focus-within {
	border-color: var(--wp--preset--color--accent-1);
	box-shadow: 0 0 0 3px rgba(1, 85, 183, 0.12);
}

.asi-404-search-icon {
	position: absolute;
	inset-inline-start: 1rem;
	color: var(--wp--preset--color--accent-4);
	pointer-events: none;
	flex-shrink: 0;
}

.asi-404-search-input {
	flex: 1;
	min-block-size: 48px;
	padding: 0.625rem 0.75rem 0.625rem 2.75rem;
	border: none;
	background: transparent;
	font-family: var(--asi-font-family);
	font-size: 0.9375rem;
	color: var(--wp--preset--color--contrast);
	outline: none;
	inline-size: 100%;
}

[dir="rtl"] .asi-404-search-input {
	padding: 0.625rem 2.75rem 0.625rem 0.75rem;
}

.asi-404-search-input::placeholder {
	color: var(--wp--preset--color--accent-4);
	opacity: 0.7;
}

.asi-404-search-btn {
	flex-shrink: 0;
	padding: 0.5rem 1.25rem;
	margin: 4px;
	margin-inline-end: 4px;
	border: none;
	border-radius: var(--asi-radius-pill);
	background: var(--asi-gradient-blue);
	color: var(--wp--preset--color--base);
	font-family: var(--asi-font-family);
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: opacity var(--asi-transition);
	min-block-size: 40px;
}

.asi-404-search-btn:hover {
	opacity: 0.9;
}

/* CTA buttons */
.asi-404-actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.asi-404-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.75rem 1.75rem;
	border-radius: var(--asi-radius-pill);
	font-family: var(--asi-font-family);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--asi-transition), box-shadow var(--asi-transition);
}

.asi-404-btn:hover {
	transform: translateY(-2px);
}

.asi-404-btn:active {
	transform: translateY(0);
}

.asi-404-btn--primary {
	background: var(--asi-gradient-blue);
	color: var(--wp--preset--color--base);
	box-shadow: var(--asi-shadow-sm),
		inset 0 32px 24px rgba(255, 255, 255, 0.05),
		inset 0 2px 1px rgba(255, 255, 255, 0.25),
		inset 0 -2px 1px rgba(0, 0, 0, 0.2);
}

.asi-404-btn--primary:hover {
	box-shadow: var(--asi-shadow-md),
		inset 0 32px 24px rgba(255, 255, 255, 0.05),
		inset 0 2px 1px rgba(255, 255, 255, 0.25),
		inset 0 -2px 1px rgba(0, 0, 0, 0.2);
	color: var(--wp--preset--color--base);
}

.asi-404-btn--secondary {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid rgba(15, 23, 42, 0.15);
	box-shadow: var(--asi-shadow-sm);
}

.asi-404-btn--secondary:hover {
	box-shadow: var(--asi-shadow-md);
	color: var(--wp--preset--color--accent-1);
	border-color: var(--wp--preset--color--accent-1);
}

.asi-404-btn--secondary svg {
	transition: transform var(--asi-transition);
}

[dir="rtl"] .asi-404-btn--secondary svg {
	transform: scaleX(-1);
}

.asi-404-btn--secondary:hover svg {
	transform: translateX(3px);
}

[dir="rtl"] .asi-404-btn--secondary:hover svg {
	transform: scaleX(-1) translateX(3px);
}

/* ── Focus-visible states ── */
.asi-404-btn:focus-visible,
.asi-404-search-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
}

.asi-404-search-input:focus-visible {
	outline: none;
}

/* ── Decorative shine line ── */
.asi-404-shine {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	block-size: 1px;
	background: linear-gradient(
		to right,
		transparent,
		var(--wp--preset--color--accent-1),
		var(--wp--preset--color--accent-2),
		#F59E0B,
		transparent
	);
	opacity: 0.25;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
	.asi-404-bubble,
	.asi-404-photo img {
		animation: none;
	}
	.asi-404-bubble {
		opacity: 0.5;
		transform: none;
	}
	.asi-404-photo img {
		opacity: 1;
	}
}

/* ── Tablet ── */
@media (max-width: 768px) {
	.asi-404 {
		min-block-size: auto;
		padding-block: 2.5rem 3rem;
	}
	.asi-404-layout {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 1.5rem;
	}
	.asi-404-photo {
		order: -1;
	}
	.asi-404-photo img {
		max-block-size: 260px;
	}
	.asi-404-search {
		margin-inline: auto;
	}
	.asi-404-actions {
		justify-content: center;
	}
}

/* ── Mobile ── */
@media (max-width: 480px) {
	.asi-404-photo img {
		max-block-size: 200px;
	}
	.asi-404-actions {
		flex-direction: column;
		inline-size: 100%;
	}
	.asi-404-btn {
		inline-size: 100%;
		justify-content: center;
		min-block-size: 48px;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
   Brands Page (page-brands.php)
   Story-style, one full-width section per brand. Alternating tinted
   backdrops and mirrored orientation create rhythm across a small list.
   ───────────────────────────────────────────────────────────────────────── */

.asi-brands-page {
	--asi-brand-tint: var(--wp--preset--color--accent-3);
	--asi-brands-container: 1200px;
	--asi-brands-gutter: clamp(1.25rem, 4vw, 3rem);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* ── Page header ───────────────────────────────────────────────────────── */
.asi-brands-page__header {
	padding-block: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 3vw, 2.25rem);
	padding-inline: var(--asi-brands-gutter);
	background:
		radial-gradient(ellipse at 85% 0%, color-mix(in srgb, var(--wp--preset--color--accent-1) 8%, transparent) 0%, transparent 55%),
		linear-gradient(180deg, var(--wp--preset--color--base) 0%, var(--wp--preset--color--accent-3) 100%);
	border-block-end: 1px solid var(--wp--preset--color--accent-6);
	overflow: hidden;
}

.asi-brands-page__header-inner {
	max-inline-size: var(--asi-brands-container);
	margin-inline: auto;
	text-align: start;
}

/* With mosaic: two columns — text on the left, logo cluster on the right */
.asi-brands-page__header.has-mosaic .asi-brands-page__header-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.asi-brands-page__header-text {
	min-inline-size: 0;
}

.asi-brands-page__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	margin: 0 0 0.65rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-1);
}

.asi-brands-page__eyebrow::before {
	content: "";
	inline-size: 2rem;
	block-size: 2px;
	background: var(--wp--preset--color--accent-1);
	display: inline-block;
}

.asi-brands-page__title {
	margin: 0 0 0.75rem;
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast);
	max-inline-size: 18ch;
}

.asi-brands-page__lede {
	max-inline-size: 62ch;
	font-size: clamp(1rem, 1.5vw, 1.15rem);
	line-height: 1.65;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 72%, transparent);
}

.asi-brands-page__lede p {
	margin: 0 0 0.75rem;
}

.asi-brands-page__lede p:last-child {
	margin-block-end: 0;
}

.asi-brands-page__count {
	margin: 1rem 0 0;
	padding-block-start: 0.85rem;
	border-block-start: 1px solid var(--wp--preset--color--accent-6);
	max-inline-size: 62ch;
	font-size: 0.9rem;
	color: var(--wp--preset--color--accent-4);
}

.asi-brands-page__count strong {
	font-size: 1.2rem;
	color: var(--wp--preset--color--accent-1);
	font-weight: 700;
	margin-inline-end: 0.25em;
}

.asi-brands-page__empty {
	padding-block: 5rem;
	padding-inline: var(--asi-brands-gutter);
	text-align: center;
	color: var(--wp--preset--color--accent-4);
}

/* ── Header mosaic (brand logo diamond) ────────────────────────────────────
   7 brand logos arranged as a symmetric 2-3-2 "diamond". A 6-column grid
   gives half-column offsets for the top and bottom rows (2 chips each,
   indented inward) while the middle row (3 chips) forms the widest band.
   The silhouette tapers inward top and bottom, anchoring the eye on the
   brand cluster as an editorial constellation. A soft radial glow sits
   behind the cluster to tie it into the page palette. */
.asi-brands-page__mosaic {
	--asi-mosaic-unit: clamp(34px, 3.8vw, 48px); /* width of 1 grid column */
	--asi-mosaic-gap: clamp(0.4rem, 0.8vw, 0.65rem);
	display: grid;
	grid-template-columns: repeat(6, var(--asi-mosaic-unit));
	gap: var(--asi-mosaic-gap);
	justify-content: center;
	align-content: center;
	position: relative;
	margin-inline: auto;
	padding: calc(var(--asi-mosaic-unit) * 0.25);
	isolation: isolate;
}

/* Soft radial glow behind the diamond — uses the primary brand accent so
   the cluster feels anchored to the page palette */
.asi-brands-page__mosaic::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(
			ellipse at center,
			color-mix(in srgb, var(--wp--preset--color--accent-1) 9%, transparent) 0%,
			transparent 65%
		);
	z-index: -1;
	pointer-events: none;
}

.asi-brands-page__mosaic-chip {
	--asi-chip-tint: var(--wp--preset--color--accent-1);
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	padding: clamp(0.5rem, 0.85vw, 0.75rem);
	background:
		linear-gradient(
			155deg,
			color-mix(in srgb, var(--asi-chip-tint) 18%, var(--wp--preset--color--base)) 0%,
			var(--wp--preset--color--base) 60%,
			color-mix(in srgb, var(--asi-chip-tint) 6%, var(--wp--preset--color--base)) 100%
		);
	border: 1px solid color-mix(in srgb, var(--asi-chip-tint) 20%, transparent);
	border-radius: 16px;
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--wp--preset--color--base) 80%, transparent),
		0 1px 2px color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent),
		0 14px 28px -16px color-mix(in srgb, var(--asi-chip-tint) 60%, transparent);
	transition:
		transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity 480ms cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(var(--asi-chip-index, 0) * 70ms);
}

/* On first paint, each chip drops into formation with a staggered settle —
   a calm, decisive entry (ease-out-quint, no bounce). The --asi-chip-index
   custom property is set inline by PHP so the stagger is deterministic per
   position in the diamond. */
@starting-style {
	.asi-brands-page__mosaic-chip {
		opacity: 0;
		transform: translateY(10px) scale(0.86);
	}
}

/* Diamond layout for exactly 7 chips — 2 / 3 / 2 rows */
.asi-brands-page__mosaic.is-count-7 .asi-brands-page__mosaic-chip:nth-child(1) { grid-column: 2 / span 2; grid-row: 1; }
.asi-brands-page__mosaic.is-count-7 .asi-brands-page__mosaic-chip:nth-child(2) { grid-column: 4 / span 2; grid-row: 1; }
.asi-brands-page__mosaic.is-count-7 .asi-brands-page__mosaic-chip:nth-child(3) { grid-column: 1 / span 2; grid-row: 2; }
.asi-brands-page__mosaic.is-count-7 .asi-brands-page__mosaic-chip:nth-child(4) { grid-column: 3 / span 2; grid-row: 2; }
.asi-brands-page__mosaic.is-count-7 .asi-brands-page__mosaic-chip:nth-child(5) { grid-column: 5 / span 2; grid-row: 2; }
.asi-brands-page__mosaic.is-count-7 .asi-brands-page__mosaic-chip:nth-child(6) { grid-column: 2 / span 2; grid-row: 3; }
.asi-brands-page__mosaic.is-count-7 .asi-brands-page__mosaic-chip:nth-child(7) { grid-column: 4 / span 2; grid-row: 3; }

/* Middle row gets a slightly deeper tint glow to anchor the diamond */
.asi-brands-page__mosaic.is-count-7 .asi-brands-page__mosaic-chip:nth-child(n+3):nth-child(-n+5) {
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--wp--preset--color--base) 80%, transparent),
		0 2px 4px color-mix(in srgb, var(--wp--preset--color--contrast) 7%, transparent),
		0 20px 36px -16px color-mix(in srgb, var(--asi-chip-tint) 72%, transparent);
}

/* Fallback for counts ≠ 7: simple 3-col grid (each chip spans 2 cols) */
.asi-brands-page__mosaic:not(.is-count-7) .asi-brands-page__mosaic-chip {
	grid-column: span 2;
}

.asi-brands-page__mosaic-chip:hover {
	transform: translateY(-4px) scale(1.06);
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--wp--preset--color--base) 80%, transparent),
		0 4px 8px color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent),
		0 24px 44px -14px color-mix(in srgb, var(--asi-chip-tint) 80%, transparent);
	z-index: 2;
}

/* The chip is now an in-page jump link. Keep it visually identical to the
   decorative chip (all look/grid/hover styling hangs off the shared class),
   just add link resets and a keyboard focus ring. The hover rule above applies
   unchanged because it targets the class, not the element. */
a.asi-brands-page__mosaic-chip {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

a.asi-brands-page__mosaic-chip:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 3px;
	transform: translateY(-4px) scale(1.06);
	z-index: 2;
}

.asi-brands-page__mosaic-chip img {
	max-inline-size: 100%;
	max-block-size: 100%;
	inline-size: auto;
	block-size: auto;
	object-fit: contain;
	filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent));
}

.asi-brands-page__mosaic-fallback {
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: color-mix(in srgb, var(--asi-chip-tint) 70%, var(--wp--preset--color--contrast));
	text-transform: uppercase;
}

/* Tablet: shrink the unit so the diamond fits comfortably beneath the text */
@media (max-width: 960px) {
	.asi-brands-page__header.has-mosaic .asi-brands-page__header-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(1.25rem, 3vw, 2rem);
	}

	.asi-brands-page__mosaic {
		--asi-mosaic-unit: 46px;
	}
}

/* Mobile: diamond holds its shape — it's already a compact form */
@media (max-width: 600px) {
	.asi-brands-page__mosaic {
		--asi-mosaic-unit: clamp(32px, 10vw, 42px);
		--asi-mosaic-gap: 0.4rem;
	}

	.asi-brands-page__mosaic-chip {
		border-radius: 12px;
		padding: 0.45rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.asi-brands-page__mosaic-chip {
		transform: none;
		transition: none;
	}

	.asi-brands-page__mosaic-chip:hover,
	a.asi-brands-page__mosaic-chip:focus-visible {
		transform: none;
	}
}

/* ── Brand sections ────────────────────────────────────────────────────── */
.asi-brand-section {
	position: relative;
	/* Jump-nav target: clear the sticky .asi-header-stack (topbar + main header)
	   when a mosaic chip scrolls here. Measured 113px (mobile) → 119px (local
	   desktop) → 126px (staging/prod desktop). 9rem (144px) clears the tallest
	   with ~18px to spare; worst case (topbar hidden) just leaves more space,
	   never a tuck-under. */
	scroll-margin-block-start: 9rem;
	padding-block: clamp(3rem, 7vw, 6rem);
	padding-inline: var(--asi-brands-gutter);
	background: color-mix(in srgb, var(--asi-brand-tint) 12%, var(--wp--preset--color--base));
	overflow: hidden;
	isolation: isolate;
}

/* Soft decorative glow drawn from the brand tint — provides depth without noise */
.asi-brand-section::before {
	content: "";
	position: absolute;
	inset-block-start: -20%;
	inset-inline-end: -10%;
	inline-size: 60%;
	block-size: 140%;
	background: radial-gradient(ellipse at center, color-mix(in srgb, var(--asi-brand-tint) 22%, transparent) 0%, transparent 60%);
	pointer-events: none;
	z-index: 0;
}

.asi-brand-section.is-reverse::before {
	inset-inline-start: -10%;
	inset-inline-end: auto;
}

.asi-brand-section__inner {
	position: relative;
	z-index: 1;
	max-inline-size: var(--asi-brands-container);
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.asi-brand-section.is-reverse .asi-brand-section__inner {
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.asi-brand-section.is-reverse .asi-brand-section__intro {
	grid-column: 2;
	grid-row: 1;
}

.asi-brand-section.is-reverse .asi-brand-section__products {
	grid-column: 1;
	grid-row: 1;
}

.asi-brand-section.is-no-products .asi-brand-section__inner {
	grid-template-columns: minmax(0, 1fr);
	max-inline-size: 720px;
	text-align: start;
}

/* ── Brand intro (identity + text) ─────────────────────────────────────── */
.asi-brand-section__intro {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	min-inline-size: 0;
}

/* Brand identity strip — logo mark + name/tagline side by side */
.asi-brand-section__identity {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.asi-brand-section__logo-mark {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 1rem;
	background: var(--wp--preset--color--base);
	border-radius: 14px;
	box-shadow:
		0 1px 2px color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent),
		0 8px 20px -8px color-mix(in srgb, var(--asi-brand-tint) 25%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent);
}

.asi-brand-section__logo-mark img {
	max-inline-size: 80px;
	max-block-size: 48px;
	inline-size: auto;
	block-size: auto;
	display: block;
	object-fit: contain;
}

.asi-brand-section__id-text {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.asi-brand-section__name {
	margin: 0;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast);
}

.asi-brand-section__tagline {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--asi-brand-tint) 60%, var(--wp--preset--color--contrast));
}

.asi-brand-section__desc {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.65;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 74%, transparent);
	max-inline-size: 48ch;
}

.asi-brand-section__meta {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-block-start: 0.75rem;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
}

.asi-brand-section__count {
	font-size: 0.9rem;
	color: var(--wp--preset--color--accent-4);
}

.asi-brand-section__count strong {
	font-size: 1.05rem;
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	margin-inline-end: 0.25em;
}

.asi-brand-section__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.85rem 1.5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
		background 240ms ease,
		box-shadow 240ms ease;
	box-shadow: 0 2px 6px color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent);
}

.asi-brand-section__cta:hover,
.asi-brand-section__cta:focus-visible {
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	transform: translateY(-1px);
	box-shadow: 0 8px 20px -4px color-mix(in srgb, var(--wp--preset--color--accent-1) 40%, transparent);
}

.asi-brand-section__cta:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 3px;
}

.asi-brand-section__cta-arrow {
	display: inline-flex;
	transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.asi-brand-section__cta:hover .asi-brand-section__cta-arrow,
.asi-brand-section__cta:focus-visible .asi-brand-section__cta-arrow {
	transform: translateX(4px);
}

/* RTL mirror the arrow shift so it still points toward the end edge */
[dir="rtl"] .asi-brand-section__cta:hover .asi-brand-section__cta-arrow,
[dir="rtl"] .asi-brand-section__cta:focus-visible .asi-brand-section__cta-arrow {
	transform: translateX(-4px);
}

[dir="rtl"] .asi-brand-section__cta-arrow svg {
	transform: scaleX(-1);
}

/* ── Brand products grid ───────────────────────────────────────────────── */
.asi-brand-section__products {
	min-inline-size: 0;
}

.asi-brand-section__products-title {
	margin: 0 0 0.85rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-4);
}

.asi-brand-section__products .woocommerce {
	margin: 0;
}

.asi-brand-section__products ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(0.75rem, 2vw, 1.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Adapt the grid when the brand has fewer than 3 products so we don't leave
   empty cells — the remaining card(s) take their natural reading width. */
.asi-brand-section__products.has-1-products ul.products {
	grid-template-columns: minmax(0, 320px);
}

.asi-brand-section__products.has-2-products ul.products {
	grid-template-columns: repeat(2, minmax(0, 280px));
}

.asi-brand-section__products ul.products::before,
.asi-brand-section__products ul.products::after {
	display: none;
}

.asi-brand-section__products ul.products li.product {
	position: relative; /* containing block for .asi-sale-badge and .asi-wishlist-btn */
	inline-size: auto !important;
	margin: 0 !important;
	padding: 1rem !important;
	background: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent);
	border-radius: 16px;
	box-shadow: 0 1px 2px color-mix(in srgb, var(--wp--preset--color--contrast) 4%, transparent);
	transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 280ms ease;
	float: none !important;
	clear: none !important;
}

.asi-brand-section__products ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--asi-brand-tint) 35%, transparent);
}

.asi-brand-section__products ul.products li.product a {
	display: block;
	text-decoration: none;
}

.asi-brand-section__products ul.products li.product img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: var(--wp--preset--color--accent-3);
	border-radius: 10px;
	margin: 0 0 0.85rem;
	padding: 0.5rem;
}

.asi-brand-section__products ul.products li.product .woocommerce-loop-product__title {
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	color: var(--wp--preset--color--contrast) !important;
	padding: 0 !important;
	margin: 0 0 0.4rem !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.asi-brand-section__products ul.products li.product .price {
	font-size: 1rem !important;
	font-weight: 700 !important;
	color: var(--wp--preset--color--accent-1) !important;
	margin: 0 0 0.5rem !important;
}

.asi-brand-section__products ul.products li.product .price del {
	color: var(--wp--preset--color--accent-4) !important;
	font-weight: 500 !important;
	margin-inline-end: 0.35rem;
}

.asi-brand-section__products ul.products li.product .button {
	display: none !important; /* Cleaner: full card is the CTA */
}

/* The theme renders its own shelf-tag sale badge (.asi-sale-badge) via a Woo
   loop hook. Hide WooCommerce's default .onsale circle so we don't get two
   badges stacking on the brand-page product cards. */
.asi-brand-section__products ul.products li.product .onsale {
	display: none !important;
}

/* ── Responsive ────────────────────────────────────────────────────────── */

/* Tablet: single column, products still a 3-col grid */
@media (max-width: 960px) {
	.asi-brand-section__inner,
	.asi-brand-section.is-reverse .asi-brand-section__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.75rem;
	}

	.asi-brand-section.is-reverse .asi-brand-section__intro,
	.asi-brand-section.is-reverse .asi-brand-section__products {
		grid-column: 1;
		grid-row: auto;
	}

	.asi-brand-section__products ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Mobile: products become a compact horizontal slider so the brand story
   stays the visual hero. Cards are smaller, swipeable, and contained
   inside a bordered well so they don't bleed into the next section. */
@media (max-width: 720px) {

	.asi-brand-section {
		padding-block: clamp(2rem, 5vw, 3.5rem);
	}

	/* Tighter section gap on mobile */
	.asi-brand-section__inner,
	.asi-brand-section.is-reverse .asi-brand-section__inner {
		gap: 1.25rem;
	}

	/* Brand identity strip: keep horizontal but scale down */
	.asi-brand-section__logo-mark {
		padding: 0.6rem 0.75rem;
	}

	.asi-brand-section__logo-mark img {
		max-inline-size: 56px;
		max-block-size: 36px;
	}

	.asi-brand-section__name {
		font-size: 1.35rem;
	}

	.asi-brand-section__desc {
		font-size: 0.95rem;
	}

	/* Meta row: stack vertically on mobile */
	.asi-brand-section__meta {
		gap: 0.85rem;
	}

	.asi-brand-section__cta {
		inline-size: 100%;
		justify-content: center;
	}

	/* ── Product slider strip ── */
	.asi-brand-section__products {
		position: relative;
		margin-block-start: 0.25rem;
		padding-block-start: 1rem;
		border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	}

	.asi-brand-section__products-title {
		margin: 0 0 0.6rem;
		font-size: 0.72rem;
	}

	.asi-brand-section__products ul.products {
		/* Switch from grid to horizontal scroll strip */
		display: flex !important;
		gap: 0.75rem;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scroll-padding-inline-start: 0;
		padding-block-end: 0.5rem; /* room for scrollbar */
		margin-inline: -0.25rem;
		padding-inline: 0.25rem;
	}

	/* Thin, styled scrollbar */
	.asi-brand-section__products ul.products::-webkit-scrollbar {
		block-size: 3px;
	}

	.asi-brand-section__products ul.products::-webkit-scrollbar-track {
		background: color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent);
		border-radius: 99px;
	}

	.asi-brand-section__products ul.products::-webkit-scrollbar-thumb {
		background: color-mix(in srgb, var(--asi-brand-tint) 40%, var(--wp--preset--color--contrast));
		border-radius: 99px;
	}

	.asi-brand-section__products ul.products li.product {
		flex: 0 0 auto;
		inline-size: 148px !important;
		padding: 0.65rem !important;
		scroll-snap-align: start;
		border-radius: 12px;
	}

	/* All 3 products always visible in the slider */
	.asi-brand-section__products ul.products li.product:nth-child(3) {
		display: block !important;
	}

	/* Compact product card typography */
	.asi-brand-section__products ul.products li.product img {
		border-radius: 8px;
		margin: 0 0 0.5rem;
		padding: 0.35rem;
	}

	.asi-brand-section__products ul.products li.product .woocommerce-loop-product__title {
		font-size: 0.78rem !important;
		-webkit-line-clamp: 1;
		margin: 0 0 0.25rem !important;
	}

	.asi-brand-section__products ul.products li.product .price {
		font-size: 0.82rem !important;
		margin: 0 !important;
	}

	/* Override has-N-products grid rules at mobile — always flex */
	.asi-brand-section__products.has-1-products ul.products,
	.asi-brand-section__products.has-2-products ul.products {
		display: flex !important;
	}
}

/* Small phone: even more compact */
@media (max-width: 480px) {
	.asi-brand-section__products ul.products li.product {
		inline-size: 132px !important;
		padding: 0.5rem !important;
	}

	.asi-brand-section__identity {
		gap: 0.85rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.asi-brand-section__cta,
	.asi-brand-section__cta-arrow,
	.asi-brand-section__products ul.products li.product {
		transition: none;
	}

	.asi-brand-section__products ul.products {
		scroll-snap-type: none;
	}
}

/* ─── Brands page — entry choreography ─────────────────────────
   The page's signature motion: the diamond mosaic settles into
   formation on first paint, the header text rises in below it,
   and each brand section reveals its own logo → text → meta →
   products as it scrolls into view. Reduced motion strips it all
   so static still reads as complete.

   Easing: ease-out-quint (cubic-bezier(0.22, 1, 0.36, 1)) — the
   same curve used on the my-account view-order page so motion
   reads as one design language across the site. No bounce.
   ────────────────────────────────────────────────────────────── */

.asi-brands-page__eyebrow,
.asi-brands-page__title,
.asi-brands-page__lede,
.asi-brands-page__count {
	transition:
		opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

@starting-style {
	.asi-brands-page__eyebrow { opacity: 0; transform: translateY(8px); transition-delay:   0ms; }
	.asi-brands-page__title   { opacity: 0; transform: translateY(8px); transition-delay:  80ms; }
	.asi-brands-page__lede    { opacity: 0; transform: translateY(8px); transition-delay: 160ms; }
	.asi-brands-page__count   { opacity: 0; transform: translateY(8px); transition-delay: 240ms; }
}

/* The global .asi-animate-in rule at the top of this file translates
   AND fades. For brand sections we let the children carry the motion,
   so the parent only fades in — no section-level translate competing
   with the staggered child reveals. */
.asi-brand-section.asi-animate-in,
.asi-brand-section.asi-animate-in.is-visible {
	transform: none;
}

.asi-brand-section.asi-animate-in {
	transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Per-section reveal — fires when scroll-animations.js flips
   .is-visible on the .asi-animate-in container. Until then, the
   children sit slightly down and transparent. */
.asi-brand-section.asi-animate-in .asi-brand-section__logo-mark,
.asi-brand-section.asi-animate-in .asi-brand-section__id-text,
.asi-brand-section.asi-animate-in .asi-brand-section__desc,
.asi-brand-section.asi-animate-in .asi-brand-section__meta,
.asi-brand-section.asi-animate-in .asi-brand-section__products {
	opacity: 0;
	transform: translateY(10px);
	transition:
		opacity 380ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

/* The logo gets a touch more lift — it's the visual anchor */
.asi-brand-section.asi-animate-in .asi-brand-section__logo-mark {
	transform: translateY(14px) scale(0.96);
}

.asi-brand-section.asi-animate-in.is-visible .asi-brand-section__logo-mark {
	opacity: 1;
	transform: none;
	transition-delay: 0ms;
}

.asi-brand-section.asi-animate-in.is-visible .asi-brand-section__id-text {
	opacity: 1;
	transform: none;
	transition-delay: 100ms;
}

.asi-brand-section.asi-animate-in.is-visible .asi-brand-section__desc {
	opacity: 1;
	transform: none;
	transition-delay: 180ms;
}

.asi-brand-section.asi-animate-in.is-visible .asi-brand-section__meta {
	opacity: 1;
	transform: none;
	transition-delay: 260ms;
}

.asi-brand-section.asi-animate-in.is-visible .asi-brand-section__products {
	opacity: 1;
	transform: none;
	transition-delay: 340ms;
}

/* Once the choreography is done, drop will-change so the browser
   can release the compositor layer — JS adds .is-visible once and
   never removes it, so we can clean up at the matching depth. */
.asi-brand-section.asi-animate-in.is-visible .asi-brand-section__logo-mark,
.asi-brand-section.asi-animate-in.is-visible .asi-brand-section__id-text,
.asi-brand-section.asi-animate-in.is-visible .asi-brand-section__desc,
.asi-brand-section.asi-animate-in.is-visible .asi-brand-section__meta,
.asi-brand-section.asi-animate-in.is-visible .asi-brand-section__products {
	will-change: auto;
}

/* Inside the products grid, stagger each card a beat behind its
   sibling — the slider/grid feels like it's drawing itself in. */
.asi-brand-section.asi-animate-in .asi-brand-section__products ul.products li.product {
	opacity: 0;
	transform: translateY(8px);
	transition:
		opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.asi-brand-section.asi-animate-in.is-visible .asi-brand-section__products ul.products li.product {
	opacity: 1;
	transform: none;
}

.asi-brand-section.asi-animate-in.is-visible .asi-brand-section__products ul.products li.product:nth-child(1) { transition-delay: 360ms; }
.asi-brand-section.asi-animate-in.is-visible .asi-brand-section__products ul.products li.product:nth-child(2) { transition-delay: 420ms; }
.asi-brand-section.asi-animate-in.is-visible .asi-brand-section__products ul.products li.product:nth-child(3) { transition-delay: 480ms; }

/* Reduced motion: skip every entry animation. scroll-animations.js
   already strips .asi-animate-in entirely on first run for these
   users — the rules below are belt-and-suspenders for browsers
   that race the script, and for the @starting-style entries on
   header text which JS doesn't touch. */
@media (prefers-reduced-motion: reduce) {
	.asi-brands-page__eyebrow,
	.asi-brands-page__title,
	.asi-brands-page__lede,
	.asi-brands-page__count {
		transition: none;
	}

	@starting-style {
		.asi-brands-page__eyebrow,
		.asi-brands-page__title,
		.asi-brands-page__lede,
		.asi-brands-page__count,
		.asi-brands-page__mosaic-chip {
			opacity: 1;
			transform: none;
		}
	}

	.asi-brand-section.asi-animate-in .asi-brand-section__logo-mark,
	.asi-brand-section.asi-animate-in .asi-brand-section__id-text,
	.asi-brand-section.asi-animate-in .asi-brand-section__desc,
	.asi-brand-section.asi-animate-in .asi-brand-section__meta,
	.asi-brand-section.asi-animate-in .asi-brand-section__products,
	.asi-brand-section.asi-animate-in .asi-brand-section__products ul.products li.product {
		opacity: 1;
		transform: none;
		transition: none;
		will-change: auto;
	}
}

/* ═══════════════════════════════════════════════════════════════
 * ─── My Account — Full Customer Journey Styling ───
 * ═══════════════════════════════════════════════════════════════ */

/* ─── Page-level layout ─── */
.asi-myaccount .wp-site-blocks > main,
.asi-myaccount .asi-myaccount-main {
	max-inline-size: 1280px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--50);
}

/* Override TT5 constrained layout — WordPress sets max-width (physical
   property) via :where(.is-layout-constrained) > :where(...).  We must
   override max-width specifically, not max-inline-size, because when both
   are set the browser uses min(max-width, max-inline-size). */
.asi-myaccount .wp-block-post-content > * {
	max-width: 100% !important;
	max-inline-size: 100% !important;
}

/* Hero strip — reuse cart/checkout pattern */
.asi-myaccount .asi-page-hero {
	position: relative;
	background: var(--wp--preset--color--accent-3);
	border-radius: 14px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	overflow: hidden;
	margin-block: 0 clamp(2rem, 4vw, 3rem);
	max-inline-size: 100%;
}

.asi-myaccount .asi-page-hero__inner {
	padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 3.5vw, 2.5rem) clamp(1rem, 2vw, 1.75rem);
}

.asi-myaccount .asi-page-hero__accent {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 2px;
	background: var(--asi-gradient-blue, linear-gradient(135deg, #0155B7, #013A7A));
}

.asi-myaccount .asi-page-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-block-end: 0.5rem;
	font-family: var(--asi-font-family);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--accent-1);
}

.asi-myaccount .asi-page-hero__eyebrow-sep {
	color: var(--wp--preset--color--accent-4);
}

.asi-myaccount .asi-page-hero__eyebrow-step {
	color: var(--wp--preset--color--accent-4);
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
}

.asi-myaccount .asi-page-hero .wp-block-post-title,
.asi-myaccount .asi-page-hero .wp-block-post-title.alignwide {
	font-family: var(--asi-font-family) !important;
	font-size: clamp(1.5rem, 3vw, 2rem) !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	color: var(--wp--preset--color--contrast) !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: start !important;
	/* The WP post title is stored as "My account" (lowercase a). Capitalize
	   the rendered output so the page title reads "My Account" without
	   needing to touch the post in the DB. */
	text-transform: capitalize !important;
}

/* Hide default post title outside hero */
.asi-myaccount .wp-site-blocks > .wp-block-post-title,
.asi-myaccount .asi-myaccount-main > .wp-block-post-title:first-child {
	display: none;
}

/* ─── My Account layout — nav sidebar + content area (logged-in only) ─── */
.asi-myaccount.logged-in .woocommerce {
	display: grid !important;
	grid-template-columns: 260px 1fr !important;
	gap: clamp(1.5rem, 3vw, 2.5rem) !important;
	align-items: start;
}

/* Recovery / set-password is not a "browse the account" surface — it's a
   linear flow with its own 3-step indicator. WC may auto-authenticate the
   user via the reset key, which would otherwise drag the page into the
   2-column nav+content layout above and squeeze the form column to ~180px.
   Drop back to a single-column block flow on this endpoint so .asi-auth
   gets its full max-inline-size. */
.asi-myaccount.woocommerce-lost-password .woocommerce {
	display: block !important;
	grid-template-columns: none !important;
	gap: 0 !important;
}
.asi-myaccount.woocommerce-lost-password .woocommerce-MyAccount-navigation,
.asi-myaccount.woocommerce-lost-password .asi-account-nav {
	display: none !important;
}

/* Kill WooCommerce clearfix pseudo-elements — they become invisible
   grid cells that break the 2-column layout */
.asi-myaccount.logged-in .woocommerce::before,
.asi-myaccount.logged-in .woocommerce::after {
	display: none !important;
	content: none !important;
}

/* Notices span both columns */
.asi-myaccount .woocommerce > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

/* Clear WooCommerce default float layout */
.asi-myaccount .woocommerce-MyAccount-navigation,
.asi-myaccount .asi-account-nav {
	float: none !important;
	width: auto !important;
	inline-size: auto !important;
}

.asi-myaccount .woocommerce-MyAccount-content {
	float: none !important;
	width: auto !important;
	inline-size: auto !important;
}

/* ═════════════════════════════════════════
 * Login / Register Forms
 * ═════════════════════════════════════════ */

/* Two-column login/register layout */
.asi-myaccount .u-columns.col2-set {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 3vw, 2rem);
	margin: 0;
	max-inline-size: 800px;
	margin-inline: auto;
}

.asi-myaccount .u-columns.col2-set > .u-column1,
.asi-myaccount .u-columns.col2-set > .u-column2 {
	background: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	border-radius: 14px;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	box-shadow: var(--asi-shadow-sm);
}

/* Login side gets a subtle blue top accent */
.asi-myaccount .u-columns.col2-set > .u-column1 {
	position: relative;
	overflow: hidden;
}

.asi-myaccount .u-columns.col2-set > .u-column1::before {
	content: '';
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 3px;
	background: var(--asi-gradient-blue);
}

/* Register side gets green accent */
.asi-myaccount .u-columns.col2-set > .u-column2 {
	position: relative;
	overflow: hidden;
}

.asi-myaccount .u-columns.col2-set > .u-column2::before {
	content: '';
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 3px;
	background: var(--asi-gradient-green);
}

/* When login only (no registration) */
.asi-myaccount .woocommerce-form-login:not(.u-columns .woocommerce-form-login) {
	max-inline-size: 440px;
	margin-inline: auto;
	background: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	border-radius: 14px;
	padding: clamp(2rem, 4vw, 2.75rem);
	box-shadow: var(--asi-shadow-sm);
	position: relative;
	overflow: hidden;
}

.asi-myaccount .woocommerce-form-login:not(.u-columns .woocommerce-form-login)::before {
	content: '';
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 3px;
	background: var(--asi-gradient-blue);
}

/* Form headings */
.asi-myaccount .u-columns h2,
.asi-myaccount .woocommerce-form-login h2 {
	font-family: var(--asi-font-family);
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	margin-block: 0 1.25rem;
	padding: 0;
	line-height: 1.3;
}

/* Form rows */
.asi-myaccount .woocommerce-form-row,
.asi-myaccount .form-row {
	margin-block-end: 1.25rem;
}

/* Labels */
.asi-myaccount .woocommerce-form-row label,
.asi-myaccount .form-row label,
.asi-myaccount .edit-account label {
	font-family: var(--asi-font-family);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	display: block;
	margin-block-end: 0.375rem;
}

.asi-myaccount .woocommerce-form-row label .required,
.asi-myaccount .form-row label .required {
	color: #DC2626;
}

/* Input fields */
.asi-myaccount .woocommerce-Input,
.asi-myaccount .input-text,
.asi-myaccount select,
.asi-myaccount textarea {
	font-family: var(--asi-font-family);
	font-size: 0.9375rem;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent);
	border-radius: 10px;
	padding: 0.75rem 1rem;
	inline-size: 100%;
	transition: border-color 200ms ease, box-shadow 200ms ease;
	outline: none;
}

.asi-myaccount .woocommerce-Input:hover,
.asi-myaccount .input-text:hover,
.asi-myaccount select:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 35%, transparent);
}

.asi-myaccount .woocommerce-Input:focus,
.asi-myaccount .input-text:focus,
.asi-myaccount select:focus,
.asi-myaccount textarea:focus {
	border-color: var(--wp--preset--color--accent-1);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent-1) 12%, transparent);
}

/* Remember me checkbox */
.asi-myaccount .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--asi-font-family);
	font-size: 0.875rem;
	color: var(--wp--preset--color--accent-4);
	cursor: pointer;
}

.asi-myaccount .woocommerce-form__input-checkbox {
	inline-size: 18px;
	block-size: 18px;
	accent-color: var(--wp--preset--color--accent-1);
	cursor: pointer;
}

/* Buttons */
.asi-myaccount .woocommerce-form-login__submit,
.asi-myaccount .woocommerce-form-register__submit,
.asi-myaccount .woocommerce-Button,
.asi-myaccount button[name="save_account_details"],
.asi-myaccount button[name="save_address"],
.asi-myaccount .button:not(.wc-forward) {
	font-family: var(--asi-font-family);
	font-size: 0.9375rem;
	font-weight: 600;
	color: #FFFFFF;
	background: var(--wp--preset--color--accent-1);
	border: none;
	border-radius: 10px;
	padding: 0.8125rem 2rem;
	cursor: pointer;
	transition: background 240ms ease, box-shadow 240ms ease, transform 240ms ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	text-decoration: none;
	line-height: 1;
}

.asi-myaccount .woocommerce-form-login__submit:hover,
.asi-myaccount .woocommerce-form-register__submit:hover,
.asi-myaccount .woocommerce-Button:hover,
.asi-myaccount button[name="save_account_details"]:hover,
.asi-myaccount button[name="save_address"]:hover,
.asi-myaccount .button:not(.wc-forward):hover {
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 85%, #000);
	box-shadow: 0 4px 14px rgba(1, 85, 183, 0.25);
	transform: translateY(-1px);
}

.asi-myaccount .woocommerce-form-login__submit:focus-visible,
.asi-myaccount .woocommerce-form-register__submit:focus-visible,
.asi-myaccount .woocommerce-Button:focus-visible,
.asi-myaccount button[name="save_account_details"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
}

/* Login form — submit row with remember me */
.asi-myaccount .woocommerce-form-login .form-row:has(.woocommerce-form-login__rememberme) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-block-start: 1.5rem;
}

/* Lost password link */
.asi-myaccount .lost_password {
	margin-block-start: 1rem;
}

.asi-myaccount .lost_password a {
	font-family: var(--asi-font-family);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--accent-1);
	text-decoration: none;
	font-weight: 500;
	transition: color 200ms ease;
}

.asi-myaccount .lost_password a:hover {
	color: color-mix(in srgb, var(--wp--preset--color--accent-1) 75%, #000);
	text-decoration: underline;
}

/* Registration form helper text */
.asi-myaccount .woocommerce-form-register p:not(.form-row) {
	font-family: var(--asi-font-family);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--accent-4);
	line-height: 1.5;
	margin-block-end: 1rem;
}

/* My-account notices inherit the global "Dispatch Memo" system —
   see the WooCommerce Notices section near the end of this file. */

/* ═════════════════════════════════════════
 * Navigation Sidebar
 * ═════════════════════════════════════════ */

.asi-myaccount .woocommerce-MyAccount-navigation,
.asi-myaccount .asi-account-nav {
	background: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	border-radius: 12px;
	padding: 0.375rem;
	box-shadow: var(--asi-shadow-sm);
	position: sticky;
	inset-block-start: 2rem;
}

.asi-myaccount .asi-account-nav ul {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Zero out any WP/WC default vertical rhythm on the <li> so nothing
   competes with our explicit, tight spacing */
.asi-myaccount .asi-account-nav ul li,
.asi-myaccount .woocommerce-MyAccount-navigation ul li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.asi-myaccount .asi-account-nav ul li a {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.55rem 0.8rem;
	margin: 0;
	font-family: var(--asi-font-family);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	border-radius: 8px;
	transition: background 200ms ease, color 200ms ease;
	position: relative;
	line-height: 1.35;
}

.asi-myaccount .asi-account-nav ul li a:hover {
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--accent-1);
}

/* Active state */
.asi-myaccount .asi-account-nav ul li.is-active a,
.asi-myaccount .asi-account-nav ul li a[aria-current="page"] {
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 8%, var(--wp--preset--color--base));
	color: var(--wp--preset--color--accent-1);
	font-weight: 600;
}

.asi-myaccount .asi-account-nav ul li.is-active a::before,
.asi-myaccount .asi-account-nav ul li a[aria-current="page"]::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	inset-block: 20% 20%;
	inline-size: 3px;
	border-radius: 2px;
	background: var(--wp--preset--color--accent-1);
}

/* Icon container */
.asi-nav-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	inline-size: 20px;
	block-size: 20px;
	color: inherit;
	opacity: 0.7;
}

.asi-nav-icon svg {
	inline-size: 20px;
	block-size: 20px;
}

.asi-myaccount .asi-account-nav ul li.is-active .asi-nav-icon,
.asi-myaccount .asi-account-nav ul li a[aria-current="page"] .asi-nav-icon {
	opacity: 1;
}

.asi-nav-label {
	flex: 1;
}

/* Sign out — visually separated with a divider + muted color so it reads
   as a destructive action distinct from the task-oriented items above */
.asi-myaccount .asi-account-nav ul li:last-child {
	margin-block-start: 0.25rem !important;
	padding-block-start: 0.25rem !important;
	border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
}

.asi-myaccount .asi-account-nav ul li:last-child a {
	color: var(--wp--preset--color--accent-4);
}

.asi-myaccount .asi-account-nav ul li:last-child a:hover {
	color: #DC2626;
	background: color-mix(in srgb, #DC2626 6%, var(--wp--preset--color--base));
}

/* ═════════════════════════════════════════
 * Dashboard — Welcome + Tiles
 * ═════════════════════════════════════════ */

.asi-dashboard {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

/* Welcome card — branded greeting with a soft radial glow.
   The gradient + glow give the card enough visual weight to feel like a
   genuine welcome, without shouting over the page content below. */
.asi-dashboard__welcome {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: 1.75rem 1.75rem;
	background:
		radial-gradient(
			ellipse 120% 140% at 100% 0%,
			color-mix(in srgb, var(--wp--preset--color--accent-1) 14%, transparent) 0%,
			transparent 55%
		),
		linear-gradient(
			135deg,
			color-mix(in srgb, var(--wp--preset--color--accent-1) 6%, var(--wp--preset--color--base)) 0%,
			var(--wp--preset--color--accent-3) 100%
		);
	border-radius: 16px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-1) 10%, transparent);
	overflow: hidden;
	isolation: isolate;
}

/* Decorative brand-accent blob behind the avatar — adds depth without noise */
.asi-dashboard__welcome::before {
	content: "";
	position: absolute;
	inset-block-start: -40%;
	inset-inline-start: -10%;
	inline-size: 220px;
	block-size: 220px;
	background: radial-gradient(
		circle,
		color-mix(in srgb, var(--wp--preset--color--accent-1) 16%, transparent) 0%,
		transparent 70%
	);
	z-index: -1;
	pointer-events: none;
}

.asi-dashboard__avatar {
	position: relative;
	flex-shrink: 0;
}

.asi-dashboard__avatar-img {
	inline-size: 60px;
	block-size: 60px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--wp--preset--color--base);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--wp--preset--color--accent-1) 24%, transparent),
		0 4px 12px -4px color-mix(in srgb, var(--wp--preset--color--accent-1) 30%, transparent);
}

.asi-dashboard__greeting {
	min-inline-size: 0;
}

.asi-dashboard__hello {
	font-family: var(--asi-font-family);
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	margin: 0;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.asi-dashboard__subtitle {
	font-family: var(--asi-font-family);
	font-size: 0.85rem;
	color: var(--wp--preset--color--accent-4);
	margin: 0.3rem 0 0;
}

/* Quick action tiles */
.asi-dashboard__tiles {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

.asi-dashboard__tile {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem;
	background: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	border-radius: 14px;
	text-decoration: none;
	color: inherit;
	transition:
		border-color 260ms ease,
		box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
	overflow: hidden;
}

/* Subtle top-edge accent shown on hover — draws the eye without noise */
.asi-dashboard__tile::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 2px;
	background: var(--asi-gradient-blue, linear-gradient(90deg, #0155B7, #013A7A));
	transform: scaleX(0);
	transform-origin: inline-start;
	transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.asi-dashboard__tile:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 32%, transparent);
	box-shadow:
		0 1px 2px color-mix(in srgb, var(--wp--preset--color--contrast) 5%, transparent),
		0 12px 28px -12px color-mix(in srgb, var(--wp--preset--color--accent-1) 25%, transparent);
	transform: translateY(-3px);
}

.asi-dashboard__tile:hover::before {
	transform: scaleX(1);
}

/* When the Orders tile has a badge (i.e. the customer has history) it gets
   a small visual bump — returning shoppers' most common task should be the
   most noticeable thing on the dashboard */
.asi-dashboard__tile:has(.asi-dashboard__tile-badge) {
	border-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 18%, transparent);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--wp--preset--color--accent-1) 3%, var(--wp--preset--color--base)) 0%, var(--wp--preset--color--base) 60%);
}

.asi-dashboard__tile-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 48px;
	block-size: 48px;
	flex-shrink: 0;
	border-radius: 12px;
	background:
		linear-gradient(
			135deg,
			color-mix(in srgb, var(--wp--preset--color--accent-1) 12%, var(--wp--preset--color--base)) 0%,
			color-mix(in srgb, var(--wp--preset--color--accent-1) 4%, var(--wp--preset--color--base)) 100%
		);
	color: var(--wp--preset--color--accent-1);
	transition: background 240ms ease, color 240ms ease;
}

.asi-dashboard__tile:hover .asi-dashboard__tile-icon {
	background: var(--asi-gradient-blue, linear-gradient(135deg, #0155B7, #013A7A));
	color: #ffffff;
}

.asi-dashboard__tile-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.asi-dashboard__tile-label {
	font-family: var(--asi-font-family);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.asi-dashboard__tile-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 22px;
	block-size: 22px;
	padding-inline: 0.375rem;
	border-radius: 100px;
	background: var(--wp--preset--color--accent-1);
	color: #FFFFFF;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
}

.asi-dashboard__tile-desc {
	font-family: var(--asi-font-family);
	font-size: 0.75rem;
	color: var(--wp--preset--color--accent-4);
}

.asi-dashboard__tile-arrow {
	color: var(--wp--preset--color--accent-4);
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 200ms ease, transform 200ms ease;
}

[dir="rtl"] .asi-dashboard__tile-arrow svg {
	transform: scaleX(-1);
}

.asi-dashboard__tile:hover .asi-dashboard__tile-arrow {
	opacity: 0.6;
	transform: translateX(0);
}

/* ═════════════════════════════════════════
 * Content Area — Orders, Addresses, etc.
 * ═════════════════════════════════════════ */

.asi-myaccount .woocommerce-MyAccount-content {
	min-inline-size: 0;
}

/* ─── Orders Table ─── */
.asi-myaccount .woocommerce-orders-table {
	inline-size: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	border-radius: 14px;
	overflow: hidden;
}

.asi-myaccount .woocommerce-orders-table thead {
	background: var(--wp--preset--color--accent-3);
}

.asi-myaccount .woocommerce-orders-table th {
	font-family: var(--asi-font-family);
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--accent-4);
	padding: 0.875rem 1.25rem;
	text-align: start;
	border: none;
}

.asi-myaccount .woocommerce-orders-table td,
.asi-myaccount .woocommerce-orders-table tbody th {
	font-family: var(--asi-font-family);
	font-size: 0.875rem;
	color: var(--wp--preset--color--contrast);
	padding: 1rem 1.25rem;
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent);
	text-align: start;
	vertical-align: middle;
}

.asi-myaccount .woocommerce-orders-table tbody tr:last-child td,
.asi-myaccount .woocommerce-orders-table tbody tr:last-child th {
	border-block-end: none;
}

.asi-myaccount .woocommerce-orders-table tbody tr:hover td,
.asi-myaccount .woocommerce-orders-table tbody tr:hover th {
	background: color-mix(in srgb, var(--wp--preset--color--accent-3) 50%, var(--wp--preset--color--base));
}

/* Order number link */
.asi-myaccount .woocommerce-orders-table a {
	color: var(--wp--preset--color--accent-1);
	font-weight: 600;
	text-decoration: none;
}

.asi-myaccount .woocommerce-orders-table a:hover {
	text-decoration: underline;
}

/* Order actions button */
.asi-myaccount .woocommerce-orders-table .button,
.asi-myaccount .woocommerce-orders-table .woocommerce-button {
	font-size: 0.75rem;
	padding: 0.5rem 1rem;
	border-radius: 8px;
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 8%, var(--wp--preset--color--base));
	color: var(--wp--preset--color--accent-1);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-1) 20%, transparent);
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	transition: background 200ms ease, color 200ms ease;
}

.asi-myaccount .woocommerce-orders-table .button:hover,
.asi-myaccount .woocommerce-orders-table .woocommerce-button:hover {
	background: var(--wp--preset--color--accent-1);
	color: #FFFFFF;
}

/* wc-forward links inside notices render as pill tags — styled globally
   in the Dispatch Memo notice section near the end of this file. */

/* ─── Addresses ─── */

/* Intro text */
.asi-myaccount .woocommerce-MyAccount-content > p:first-of-type {
	font-family: var(--asi-font-family);
	font-size: 0.875rem;
	color: var(--wp--preset--color--accent-4);
	margin-block-end: 1.5rem;
}

/* Address grid — kill WC clearfix floats, use CSS grid */
.asi-myaccount .woocommerce-Addresses,
.asi-myaccount .col2-set.addresses {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 1.5rem !important;
}

.asi-myaccount .woocommerce-Addresses::before,
.asi-myaccount .woocommerce-Addresses::after,
.asi-myaccount .col2-set.addresses::before,
.asi-myaccount .col2-set.addresses::after {
	display: none !important;
	content: none !important;
}

/* Address cards */
.asi-myaccount .woocommerce-Address {
	background: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	border-radius: 14px;
	padding: 1.5rem;
	box-shadow: var(--asi-shadow-sm);
	float: none !important;
	width: auto !important;
	inline-size: auto !important;
}

/* Address header — kill WC float layout */
.asi-myaccount .woocommerce-Address header,
.asi-myaccount .woocommerce-Address-title {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	margin-block-end: 1rem;
	padding-block-end: 0.75rem;
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
}

.asi-myaccount .woocommerce-Address-title::before,
.asi-myaccount .woocommerce-Address-title::after {
	display: none !important;
	content: none !important;
}

.asi-myaccount .woocommerce-Address h2,
.asi-myaccount .woocommerce-Address h3,
.asi-myaccount .woocommerce-column__title {
	font-family: var(--asi-font-family);
	font-size: 1rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	margin: 0 !important;
	float: none !important;
}

.asi-myaccount .woocommerce-Address header a,
.asi-myaccount .woocommerce-Address-title a.edit {
	font-family: var(--asi-font-family);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent-1);
	text-decoration: none;
	padding: 0.375rem 0.75rem;
	border-radius: 6px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-1) 20%, transparent);
	transition: background 200ms ease, color 200ms ease;
	float: none !important;
	white-space: nowrap;
}

.asi-myaccount .woocommerce-Address header a:hover,
.asi-myaccount .woocommerce-Address-title a.edit:hover {
	background: var(--wp--preset--color--accent-1);
	color: #FFFFFF;
}

.asi-myaccount .woocommerce-Address address {
	font-family: var(--asi-font-family);
	font-size: 0.875rem;
	font-style: normal;
	line-height: 1.7;
	color: var(--wp--preset--color--accent-4);
}

/* ─── Edit Address + Edit Account forms ─── */
.asi-myaccount .edit-account,
.asi-myaccount .woocommerce-address-fields {
	background: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	border-radius: 14px;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	box-shadow: var(--asi-shadow-sm);
}

/* Two-column name fields */
.asi-myaccount .form-row-first,
.asi-myaccount .form-row-last {
	display: inline-block;
	inline-size: calc(50% - 0.5rem);
	vertical-align: top;
}

.asi-myaccount .form-row-first {
	margin-inline-end: 0.5rem;
}

.asi-myaccount .form-row-last {
	margin-inline-start: 0.5rem;
}

/* Password change fieldset */
.asi-myaccount .edit-account fieldset {
	margin-block-start: 2rem;
	padding-block-start: 1.5rem;
	border: none;
	border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
}

.asi-myaccount .edit-account fieldset legend {
	font-family: var(--asi-font-family);
	font-size: 1rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	padding-inline-end: 1rem;
}

/* Display name helper text */
.asi-myaccount .edit-account #account_display_name_description {
	display: block;
	margin-block-start: 0.375rem;
}

.asi-myaccount .edit-account #account_display_name_description em {
	font-family: var(--asi-font-family);
	font-size: 0.75rem;
	color: var(--wp--preset--color--accent-4);
	font-style: normal;
}

/* ─── Order Details / View Order ─── */
.asi-myaccount .woocommerce-order-details {
	background: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	border-radius: 14px;
	padding: 1.5rem;
	box-shadow: var(--asi-shadow-sm);
	margin-block-end: 1.5rem;
}

.asi-myaccount .woocommerce-order-details h2,
.asi-myaccount .woocommerce-customer-details h2,
.asi-myaccount .woocommerce-order-details__title {
	font-family: var(--asi-font-family);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	margin-block: 0 1rem;
}

.asi-myaccount .woocommerce-table--order-details {
	inline-size: 100%;
	border-collapse: separate;
	border-spacing: 0;
}

.asi-myaccount .woocommerce-table--order-details th,
.asi-myaccount .woocommerce-table--order-details td {
	font-family: var(--asi-font-family);
	font-size: 0.875rem;
	padding: 0.75rem 0;
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent);
	text-align: start;
}

/* ─── Pagination ─── */
.asi-myaccount .woocommerce-pagination {
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	margin-block-start: 1.5rem;
}

.asi-myaccount .woocommerce-pagination .button {
	font-size: 0.8125rem;
	padding: 0.625rem 1.25rem;
}

/* ─── Lost Password / Reset Password ─── */
.asi-myaccount .woocommerce-ResetPassword,
.asi-myaccount .lost_reset_password {
	max-inline-size: 480px;
	margin-inline: auto;
	background: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	border-radius: 14px;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	box-shadow: var(--asi-shadow-sm);
}

/* ═════════════════════════════════════════
 * Responsive — My Account
 * ═════════════════════════════════════════ */

/* Tablet — compact sidebar */
@media (max-width: 960px) {
	.asi-myaccount.logged-in .woocommerce {
		grid-template-columns: 220px 1fr !important;
		gap: 1.25rem !important;
	}
}

@media (max-width: 768px) {
	/* Stack to single column.
	   minmax(0, 1fr) — not plain 1fr — so the track can shrink below its
	   min-content. Without this, the nav's pill row (inline-flex items with
	   white-space: nowrap) forces the whole track wider than the viewport
	   and the page gets a horizontal scrollbar. */
	.asi-myaccount.logged-in .woocommerce {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 1.25rem !important;
	}

	/* Grid children must also permit shrinking. */
	.asi-myaccount .asi-account-nav,
	.asi-myaccount .woocommerce-MyAccount-navigation,
	.asi-myaccount .woocommerce-MyAccount-content {
		min-inline-size: 0;
		max-inline-size: 100%;
	}

	/* Dashboard is a flex column — same shrink rule for its children so
	   wide pieces (welcome card, tiles) can't push past the viewport. */
	.asi-dashboard,
	.asi-dashboard__welcome,
	.asi-dashboard__tile {
		min-inline-size: 0;
		max-inline-size: 100%;
	}

	/* Mobile nav — horizontal pill scroller.
	   The prior vertical list ate ~40% of the first viewport; this pill row
	   is a single row, reclaims that space, and keeps labels visible (the
	   real reason icon-only bars get rejected here). Active pill fills with
	   brand blue so the current section is legible without reading. Sign
	   out is separated by a divider + destructive color so it can't be
	   confused with a destination. */
	.asi-myaccount .asi-account-nav {
		position: relative;
		inset-block-start: auto;
		padding: 0;
		margin-block: 0 1.25rem;
		background: transparent;
		border: none;
		border-radius: 0;
		box-shadow: none;
		isolation: isolate;
	}

	/* Edge fade masks hint that the row is horizontally scrollable */
	.asi-myaccount .asi-account-nav::before,
	.asi-myaccount .asi-account-nav::after {
		content: "";
		position: absolute;
		inset-block: 0;
		inline-size: 20px;
		pointer-events: none;
		z-index: 2;
	}
	.asi-myaccount .asi-account-nav::before {
		inset-inline-start: 0;
		background: linear-gradient(
			to right,
			var(--wp--preset--color--accent-3) 30%,
			transparent 100%
		);
	}
	.asi-myaccount .asi-account-nav::after {
		inset-inline-end: 0;
		background: linear-gradient(
			to left,
			var(--wp--preset--color--accent-3) 30%,
			transparent 100%
		);
	}
	[dir="rtl"] .asi-myaccount .asi-account-nav::before {
		background: linear-gradient(
			to left,
			var(--wp--preset--color--accent-3) 30%,
			transparent 100%
		);
	}
	[dir="rtl"] .asi-myaccount .asi-account-nav::after {
		background: linear-gradient(
			to right,
			var(--wp--preset--color--accent-3) 30%,
			transparent 100%
		);
	}

	.asi-myaccount .asi-account-nav ul {
		display: flex !important;
		flex-direction: row !important;
		align-items: center;
		gap: 0.5rem;
		padding-block: 0.25rem;
		padding-inline: 0.5rem;
		overflow-x: auto !important;
		overflow-y: hidden;
		scroll-snap-type: inline proximity;
		scrollbar-width: none;
		-ms-overflow-style: none;
		-webkit-overflow-scrolling: touch;
	}
	.asi-myaccount .asi-account-nav ul::-webkit-scrollbar {
		display: none;
	}

	.asi-myaccount .asi-account-nav ul li {
		flex-shrink: 0;
		inline-size: auto;
		scroll-snap-align: start;
	}

	.asi-myaccount .asi-account-nav ul li a {
		inline-size: auto;
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		padding-block: 0.625rem;
		padding-inline: 0.95rem;
		font-size: 0.875rem;
		font-weight: 500;
		line-height: 1;
		white-space: nowrap;
		color: var(--wp--preset--color--contrast);
		background: var(--wp--preset--color--base);
		border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
		border-radius: 999px;
		box-shadow: 0 1px 2px -1px color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
		transition:
			background 220ms cubic-bezier(0.22, 1, 0.36, 1),
			color 220ms cubic-bezier(0.22, 1, 0.36, 1),
			border-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
			transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
			box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.asi-myaccount .asi-account-nav .asi-nav-icon {
		inline-size: 16px;
		block-size: 16px;
		opacity: 0.7;
	}
	.asi-myaccount .asi-account-nav .asi-nav-icon svg {
		inline-size: 16px;
		block-size: 16px;
	}

	/* Labels stay visible on mobile so each destination is scannable */
	.asi-myaccount .asi-account-nav .asi-nav-label {
		display: inline-flex;
		flex: initial;
	}

	/* Non-active press state */
	.asi-myaccount .asi-account-nav ul li:not(.is-active) a:hover,
	.asi-myaccount .asi-account-nav ul li:not(.is-active) a:active {
		color: var(--wp--preset--color--accent-1);
		background: color-mix(in srgb, var(--wp--preset--color--accent-1) 6%, var(--wp--preset--color--base));
		border-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 30%, transparent);
	}

	/* Active pill: fully filled brand gradient, no side stripe */
	.asi-myaccount .asi-account-nav ul li.is-active a,
	.asi-myaccount .asi-account-nav ul li a[aria-current="page"] {
		color: #ffffff;
		background: var(--asi-gradient-blue, linear-gradient(135deg, #0155B7, #013A7A));
		border-color: transparent;
		box-shadow:
			0 1px 2px -1px color-mix(in srgb, var(--wp--preset--color--accent-1) 40%, transparent),
			0 8px 18px -8px color-mix(in srgb, var(--wp--preset--color--accent-1) 60%, transparent);
	}
	.asi-myaccount .asi-account-nav ul li.is-active a::before,
	.asi-myaccount .asi-account-nav ul li a[aria-current="page"]::before {
		display: none;
	}
	.asi-myaccount .asi-account-nav ul li.is-active .asi-nav-icon,
	.asi-myaccount .asi-account-nav ul li a[aria-current="page"] .asi-nav-icon {
		opacity: 1;
	}

	/* Sign out — separated by a gap + vertical divider, destructive tint on hover */
	.asi-myaccount .asi-account-nav ul li:last-child {
		margin-inline-start: 0.25rem !important;
		padding-inline-start: 0.625rem !important;
		padding-block-start: 0 !important;
		margin-block-start: 0 !important;
		border-block-start: none !important;
		border-inline-start: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	}
	.asi-myaccount .asi-account-nav ul li:last-child a {
		color: var(--wp--preset--color--accent-4);
		background: transparent;
		border-color: transparent;
		box-shadow: none;
	}
	.asi-myaccount .asi-account-nav ul li:last-child a:hover,
	.asi-myaccount .asi-account-nav ul li:last-child a:active {
		color: #DC2626;
		background: color-mix(in srgb, #DC2626 7%, var(--wp--preset--color--base));
		border-color: color-mix(in srgb, #DC2626 28%, transparent);
	}

	/* Welcome card — compact on mobile so pills + welcome + first tile
	   all sit within the first viewport on a standard 390×844 phone. */
	.asi-dashboard__welcome {
		padding: 1.1rem 1.25rem;
		gap: 0.9rem;
		border-radius: 14px;
	}
	.asi-dashboard__welcome::before {
		inline-size: 160px;
		block-size: 160px;
	}
	.asi-dashboard__avatar-img {
		inline-size: 52px;
		block-size: 52px;
		border-width: 2px;
	}
	.asi-dashboard__hello {
		font-size: 1.05rem;
	}
	.asi-dashboard__subtitle {
		font-size: 0.8rem;
		margin-block-start: 0.2rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Login/register stack */
	.asi-myaccount .u-columns.col2-set {
		grid-template-columns: 1fr;
		max-inline-size: 440px;
	}

	/* Dashboard tiles — stack */
	.asi-dashboard__tiles {
		grid-template-columns: 1fr;
	}

	/* Addresses — stack */
	.asi-myaccount .woocommerce-Addresses {
		grid-template-columns: 1fr !important;
	}

	/* Form fields — stack */
	.asi-myaccount .form-row-first,
	.asi-myaccount .form-row-last {
		display: block;
		inline-size: 100%;
		margin-inline: 0;
	}

	/* Orders table responsive */
	.asi-myaccount .woocommerce-orders-table thead {
		display: none;
	}

	.asi-myaccount .woocommerce-orders-table tbody tr {
		display: flex;
		flex-direction: column;
		padding: 1rem 1.25rem;
		border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	}

	.asi-myaccount .woocommerce-orders-table td,
	.asi-myaccount .woocommerce-orders-table tbody th {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0.375rem 0;
		border: none;
	}

	.asi-myaccount .woocommerce-orders-table td::before,
	.asi-myaccount .woocommerce-orders-table tbody th::before {
		content: attr(data-title);
		font-weight: 600;
		font-size: 0.75rem;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: var(--wp--preset--color--accent-4);
	}
}

@media (max-width: 480px) {
	.asi-myaccount .asi-page-hero .wp-block-post-title,
	.asi-myaccount .asi-page-hero .wp-block-post-title.alignwide {
		font-size: 1.375rem !important;
	}

	.asi-dashboard__welcome {
		flex-direction: column;
		text-align: center;
	}

	.asi-dashboard__tile {
		padding: 1rem;
	}

	.asi-dashboard__tile-icon {
		inline-size: 38px;
		block-size: 38px;
	}
}

/* ═══════════════════════════════════════════════════════════════
 * ─── WooCommerce Notices — "Dispatch Memo" System ───
 *
 * A single global notice system for every Woo surface: cart, checkout,
 * shop, single-product, my-account. Replaces the default icon-in-a-
 * circle with a typographic eyebrow label, a chunky halftone accent
 * rail, and layered elevation so each notice reads as an intentional
 * memo from the ASI dispatch desk — not a boilerplate warning sign.
 *
 * Tone is driven by a single `--_asi-tone` custom property per type,
 * keeping the rules DRY. Translatable eyebrow labels are emitted from
 * asi_notice_eyebrow_labels() in functions.php as CSS custom props.
 * All spacing uses logical properties for RTL parity with Arabic.
 * ═══════════════════════════════════════════════════════════════ */

:root {
	/* Fallback eyebrow strings if functions.php hook doesn't fire. */
	--asi-notice-eyebrow-info: "Notice";
	--asi-notice-eyebrow-success: "All set";
	--asi-notice-eyebrow-error: "See below";
	--asi-notice-eyebrow-warning: "Heads up";

	--asi-notice-radius: 14px;
	--asi-notice-rail-w: 6px;
	--asi-notice-pad-y: clamp(1rem, 1.1vw + 0.75rem, 1.25rem);
	--asi-notice-pad-x: clamp(1.125rem, 1.4vw + 0.75rem, 1.5rem);
	--asi-notice-pad-start: clamp(1.625rem, 1.8vw + 1rem, 2.125rem);
}

/* ─── Base card ─────────────────────────────────────────────── */
/* Targets every Woo notice class across classic + block contexts.
   High specificity via attribute selector beats WC's default rules
   without needing !important on layout properties. */
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
body .woocommerce-info[role],
body .woocommerce-message[role],
body .woocommerce-error[role],
body.woocommerce .woocommerce-info,
body.woocommerce .woocommerce-message,
body.woocommerce .woocommerce-error,
.wc-block-components-notice-banner {
	position: relative;
	isolation: isolate;
	display: block;
	overflow: hidden;

	margin-block: 0.75rem 1.5rem;
	padding:
		var(--asi-notice-pad-y)
		var(--asi-notice-pad-x)
		var(--asi-notice-pad-y)
		var(--asi-notice-pad-start);

	border: 1px solid
		color-mix(in srgb, var(--_asi-tone, var(--wp--preset--color--accent-1)) 16%, transparent);
	border-radius: var(--asi-notice-radius);

	background:
		linear-gradient(
			135deg,
			color-mix(in srgb, var(--_asi-tone, var(--wp--preset--color--accent-1)) 8%, var(--wp--preset--color--base)) 0%,
			color-mix(in srgb, var(--_asi-tone, var(--wp--preset--color--accent-1)) 2%, var(--wp--preset--color--base)) 45%,
			var(--wp--preset--color--base) 100%
		);

	color: var(--wp--preset--color--contrast);

	font-family: var(--asi-font-family);
	font-size: 0.8125rem;
	line-height: 1.55;
	font-weight: 400;

	list-style: none;

	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.04),
		0 18px 36px -24px
			color-mix(
				in srgb,
				var(--_asi-tone, var(--wp--preset--color--accent-1)) 55%,
				rgba(15, 23, 42, 0.22)
			);

	animation: asi-notice-enter 440ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Flex layout on block notices would push the eyebrow + SVG inline —
   force stacked layout so the pseudo-element eyebrow sits on top. */
.wc-block-components-notice-banner {
	display: block !important;
	min-block-size: auto;
}

/* ─── Per-type tone (single source of truth) ───────────────── */
.woocommerce-notices-wrapper .woocommerce-info,
body .woocommerce-info[role],
body.woocommerce .woocommerce-info,
.wc-block-components-notice-banner.is-info {
	--_asi-tone: var(--wp--preset--color--accent-1);
}

.woocommerce-notices-wrapper .woocommerce-message,
body .woocommerce-message[role],
body.woocommerce .woocommerce-message,
.wc-block-components-notice-banner.is-success {
	--_asi-tone: var(--wp--preset--color--accent-2);
}

.woocommerce-notices-wrapper .woocommerce-error,
body .woocommerce-error[role],
body.woocommerce .woocommerce-error,
.wc-block-components-notice-banner.is-error {
	--_asi-tone: #DC2626;

	/* Errors get a sharp lateral attention-tap after the entrance settles —
	   demands the eye for an actionable problem without feeling alarmist. */
	animation:
		asi-notice-enter 440ms cubic-bezier(0.22, 1, 0.36, 1) both,
		asi-notice-error-tap 360ms 460ms cubic-bezier(0.36, 0, 0.64, 1) both;
}

.wc-block-components-notice-banner.is-warning {
	--_asi-tone: var(--wp--preset--color--warm-orange, #F59E0B);
}

/* ─── Typographic eyebrow label ───────────────────────────── */
/* The pseudo-element renders "NOTICE", "ALL SET", etc. at the top of
   each notice, with a short underline flourish. Width is max-content
   so the flourish matches the label length exactly. */
.woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-error::before,
body .woocommerce-info[role]::before,
body .woocommerce-message[role]::before,
body .woocommerce-error[role]::before,
body.woocommerce .woocommerce-info::before,
body.woocommerce .woocommerce-message::before,
body.woocommerce .woocommerce-error::before,
.wc-block-components-notice-banner::before {
	display: block;
	inline-size: max-content;
	max-inline-size: 100%;

	font-family: var(--asi-font-family);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	line-height: 1.2;
	text-transform: uppercase;

	color: var(--_asi-tone, var(--wp--preset--color--accent-1));

	padding-block-end: 0.425rem;
	margin-block-end: 0.85rem;
	border-block-end: 1.5px solid
		color-mix(in srgb, var(--_asi-tone, var(--wp--preset--color--accent-1)) 32%, transparent);

	/* Subtle kern so uppercase reads clean in Latin; Arabic falls back
	   to natural letter-spacing of the Tajawal font. */
	font-feature-settings: "ss01", "tnum";

	/* Position anchor (absolute icon font from default Woo) won't
	   collide since we override content entirely. */
	text-indent: 0;
	background: none;
	inset-inline-start: auto;

	/* Staged entrance: rises into place after the card lands. */
	animation: asi-notice-eyebrow-rise 380ms 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Arabic: tracked-out uppercase doesn't apply — ease the tracking so
   Tajawal's letterforms breathe without fighting their natural spacing. */
html[dir="rtl"] .woocommerce-notices-wrapper .woocommerce-info::before,
html[dir="rtl"] .woocommerce-notices-wrapper .woocommerce-message::before,
html[dir="rtl"] .woocommerce-notices-wrapper .woocommerce-error::before,
html[dir="rtl"] body .woocommerce-info[role]::before,
html[dir="rtl"] body .woocommerce-message[role]::before,
html[dir="rtl"] body .woocommerce-error[role]::before,
html[dir="rtl"] body.woocommerce .woocommerce-info::before,
html[dir="rtl"] body.woocommerce .woocommerce-message::before,
html[dir="rtl"] body.woocommerce .woocommerce-error::before,
html[dir="rtl"] .wc-block-components-notice-banner::before {
	letter-spacing: 0.05em;
	text-transform: none;
	font-size: 0.75rem;
	font-weight: 700;
}

/* Per-type eyebrow copy — pulled from translatable custom props. */
.woocommerce-notices-wrapper .woocommerce-info::before,
body .woocommerce-info[role]::before,
body.woocommerce .woocommerce-info::before,
.wc-block-components-notice-banner.is-info::before {
	content: var(--asi-notice-eyebrow-info);
}

.woocommerce-notices-wrapper .woocommerce-message::before,
body .woocommerce-message[role]::before,
body.woocommerce .woocommerce-message::before,
.wc-block-components-notice-banner.is-success::before {
	content: var(--asi-notice-eyebrow-success);

	/* Success eyebrow gets a soft confirmation pulse after the rise —
	   a satisfying "settled" beat without confetti tackiness. */
	animation:
		asi-notice-eyebrow-rise 380ms 220ms cubic-bezier(0.22, 1, 0.36, 1) both,
		asi-notice-success-pulse 540ms 640ms cubic-bezier(0.45, 0, 0.55, 1) both;
}

.woocommerce-notices-wrapper .woocommerce-error::before,
body .woocommerce-error[role]::before,
body.woocommerce .woocommerce-error::before,
.wc-block-components-notice-banner.is-error::before {
	content: var(--asi-notice-eyebrow-error);
}

.wc-block-components-notice-banner.is-warning::before {
	content: var(--asi-notice-eyebrow-warning);
}

/* ─── Accent rail with halftone dot pattern ───────────────── */
/* ::after on the notice provides the chunky left rail. The dot pattern
   gives it a pressed/industrial feel that echoes the ASI manufacturing
   heritage without getting literal or skeuomorphic. */
.woocommerce-notices-wrapper .woocommerce-info::after,
.woocommerce-notices-wrapper .woocommerce-message::after,
.woocommerce-notices-wrapper .woocommerce-error::after,
body .woocommerce-info[role]::after,
body .woocommerce-message[role]::after,
body .woocommerce-error[role]::after,
body.woocommerce .woocommerce-info::after,
body.woocommerce .woocommerce-message::after,
body.woocommerce .woocommerce-error::after,
.wc-block-components-notice-banner::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: var(--asi-notice-rail-w);

	background-color: var(--_asi-tone, var(--wp--preset--color--accent-1));
	background-image:
		linear-gradient(
			180deg,
			color-mix(in srgb, var(--wp--preset--color--base) 0%, transparent) 0%,
			color-mix(in srgb, #000 18%, transparent) 100%
		),
		radial-gradient(
			circle at 50% 50%,
			color-mix(in srgb, var(--wp--preset--color--base) 55%, transparent) 1px,
			transparent 1.6px
		);
	background-size: 100% 100%, 100% 8px;
	background-repeat: no-repeat, repeat-y;

	box-shadow:
		inset -1px 0 0 color-mix(in srgb, #000 10%, transparent),
		1px 0 0 color-mix(in srgb, var(--_asi-tone, var(--wp--preset--color--accent-1)) 20%, transparent);

	z-index: 1;
	pointer-events: none;

	/* Rail stamps in from the top, like ink hitting paper. */
	transform-origin: top;
	animation: asi-notice-rail-stamp 420ms 160ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ─── Block-notice content wrappers ───────────────────────── */
/* Hide the default Woo Blocks SVG icon — our eyebrow label replaces it. */
.wc-block-components-notice-banner > svg,
.wc-block-components-notice-banner__content > svg {
	display: none !important;
}

.wc-block-components-notice-banner > .wc-block-components-notice-banner__content,
.wc-block-components-notice-banner .wc-block-components-notice-banner__content {
	/* WC ships `.wc-block-components-notice-banner > __content { font-size: 0.875em }`
	   which, on my-account where the parent has a bumped inherited size, renders
	   the notice body 20px+. We pin the outer banner to a fixed rem above and
	   inherit it here — beats WC's selector via the same descendant-combinator
	   specificity. */
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	padding: 0;
	margin: 0;
	flex: none;
}

.wc-block-components-notice-banner__summary {
	margin: 0 0 0.5rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.wc-block-components-notice-banner__content ul {
	margin: 0;
	padding-inline-start: 1.125rem;
}

.wc-block-components-notice-banner__content ul li {
	margin-block: 0.25rem;
	list-style: disc;
	list-style-position: outside;
}

.wc-block-components-notice-banner__content ul li::marker {
	color: color-mix(in srgb, var(--_asi-tone) 70%, transparent);
}

/* ─── Classic error list items ────────────────────────────── */
.woocommerce-error > li,
.woocommerce-notices-wrapper .woocommerce-error > li {
	list-style: none;
	padding: 0;
	margin: 0;
	position: relative;
}

.woocommerce-error > li + li,
.woocommerce-notices-wrapper .woocommerce-error > li + li {
	margin-block-start: 0.625rem;
	padding-block-start: 0.625rem;
	border-block-start: 1px dashed
		color-mix(in srgb, var(--_asi-tone) 22%, transparent);
}

/* ─── Inline links inside notices (wc-forward → pill tag) ── */
.woocommerce-notices-wrapper a.wc-forward,
body .woocommerce-info a.wc-forward,
body .woocommerce-message a.wc-forward,
body .woocommerce-error a.wc-forward,
body.woocommerce .woocommerce-info a.wc-forward,
body.woocommerce .woocommerce-message a.wc-forward,
body.woocommerce .woocommerce-error a.wc-forward {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;

	margin-inline-start: 0.75rem;
	padding: 0.4rem 0.9rem;

	background: var(--wp--preset--color--base);
	color: var(--_asi-tone) !important;

	border: 1px solid
		color-mix(in srgb, var(--_asi-tone) 42%, transparent);
	border-radius: 999px;

	font-family: var(--asi-font-family);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none !important;

	transition:
		transform var(--asi-transition),
		background var(--asi-transition),
		border-color var(--asi-transition),
		color var(--asi-transition);
}

.woocommerce-notices-wrapper a.wc-forward::after,
body .woocommerce-info a.wc-forward::after,
body .woocommerce-message a.wc-forward::after,
body .woocommerce-error a.wc-forward::after,
body.woocommerce .woocommerce-info a.wc-forward::after,
body.woocommerce .woocommerce-message a.wc-forward::after,
body.woocommerce .woocommerce-error a.wc-forward::after {
	content: "→";
	font-size: 0.95em;
	line-height: 1;
	font-weight: 400;
	transition: transform var(--asi-transition);
}

html[dir="rtl"] .woocommerce-notices-wrapper a.wc-forward::after,
html[dir="rtl"] body .woocommerce-info a.wc-forward::after,
html[dir="rtl"] body .woocommerce-message a.wc-forward::after,
html[dir="rtl"] body .woocommerce-error a.wc-forward::after,
html[dir="rtl"] body.woocommerce .woocommerce-info a.wc-forward::after,
html[dir="rtl"] body.woocommerce .woocommerce-message a.wc-forward::after,
html[dir="rtl"] body.woocommerce .woocommerce-error a.wc-forward::after {
	content: "←";
}

.woocommerce-notices-wrapper a.wc-forward:hover,
body .woocommerce-info a.wc-forward:hover,
body .woocommerce-message a.wc-forward:hover,
body .woocommerce-error a.wc-forward:hover,
body.woocommerce .woocommerce-info a.wc-forward:hover,
body.woocommerce .woocommerce-message a.wc-forward:hover,
body.woocommerce .woocommerce-error a.wc-forward:hover {
	background: var(--_asi-tone);
	color: var(--wp--preset--color--base) !important;
	border-color: var(--_asi-tone);
}

.woocommerce-notices-wrapper a.wc-forward:hover::after,
body .woocommerce-info a.wc-forward:hover::after,
body .woocommerce-message a.wc-forward:hover::after,
body .woocommerce-error a.wc-forward:hover::after,
body.woocommerce .woocommerce-info a.wc-forward:hover::after,
body.woocommerce .woocommerce-message a.wc-forward:hover::after,
body.woocommerce .woocommerce-error a.wc-forward:hover::after {
	transform: translateX(3px);
}

html[dir="rtl"] .woocommerce-notices-wrapper a.wc-forward:hover::after,
html[dir="rtl"] body .woocommerce-info a.wc-forward:hover::after,
html[dir="rtl"] body .woocommerce-message a.wc-forward:hover::after,
html[dir="rtl"] body .woocommerce-error a.wc-forward:hover::after,
html[dir="rtl"] body.woocommerce .woocommerce-info a.wc-forward:hover::after,
html[dir="rtl"] body.woocommerce .woocommerce-message a.wc-forward:hover::after,
html[dir="rtl"] body.woocommerce .woocommerce-error a.wc-forward:hover::after {
	transform: translateX(-3px);
}

/* Inline non-wc-forward anchors still respect the tone without looking
   like raw body links — the underline style keeps typographic hierarchy. */
body .woocommerce-info a:not(.wc-forward):not(.button),
body .woocommerce-message a:not(.wc-forward):not(.button),
body .woocommerce-error a:not(.wc-forward):not(.button),
.wc-block-components-notice-banner__content a {
	color: var(--_asi-tone);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
	text-decoration-color:
		color-mix(in srgb, var(--_asi-tone) 45%, transparent);
	font-weight: 500;
	transition: text-decoration-color var(--asi-transition);
}

body .woocommerce-info a:not(.wc-forward):not(.button):hover,
body .woocommerce-message a:not(.wc-forward):not(.button):hover,
body .woocommerce-error a:not(.wc-forward):not(.button):hover,
.wc-block-components-notice-banner__content a:hover {
	text-decoration-color: var(--_asi-tone);
}

/* ─── Motion choreography ─────────────────────────────────── */
/* Three coordinated beats deliver each notice like a stamped memo:
   ① Card lands (0–440ms): fade + small rise with a hint of scale-settle.
   ② Accent rail stamps in (160–580ms): scaleY from top — ink hitting paper.
   ③ Eyebrow + flourish rise (220–600ms): fade + translateY with the
      underline border riding along.
   Per-type accents play after the entrance settles:
   ④ Error  → lateral attention-tap (460–820ms): a sharp 3px micro-shake
            that decays to nothing — demands the eye without feeling alarmist.
   ⑤ Success → eyebrow scale-pulse (640–1180ms): a soft 1.05 confirmation
            tick on the eyebrow after it rises — rewards a clean action.
   All transforms use translate3d for GPU compositing; no layout properties. */

@keyframes asi-notice-enter {
	from {
		opacity: 0;
		transform: translate3d(0, -10px, 0) scale(0.985);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
	}
}

@keyframes asi-notice-rail-stamp {
	from {
		opacity: 0;
		transform: scaleY(0);
	}
	to {
		opacity: 1;
		transform: scaleY(1);
	}
}

@keyframes asi-notice-eyebrow-rise {
	from {
		opacity: 0;
		transform: translate3d(0, 6px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

/* Decaying lateral micro-shake. Amplitudes drop from 3 → 0.75px so the
   tap feels like a deliberate knock, not a glitch. Pure transform — no
   reflow, no jank. */
@keyframes asi-notice-error-tap {
	0%, 100% { transform: translate3d(0, 0, 0); }
	18%      { transform: translate3d(-3px, 0, 0); }
	38%      { transform: translate3d(2.25px, 0, 0); }
	58%      { transform: translate3d(-1.5px, 0, 0); }
	78%      { transform: translate3d(0.75px, 0, 0); }
}

/* Subtle confirmation tick — eyebrow swells briefly then settles. */
@keyframes asi-notice-success-pulse {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50%      { transform: translate3d(0, 0, 0) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce-notices-wrapper .woocommerce-info,
	.woocommerce-notices-wrapper .woocommerce-message,
	.woocommerce-notices-wrapper .woocommerce-error,
	body .woocommerce-info[role],
	body .woocommerce-message[role],
	body .woocommerce-error[role],
	body.woocommerce .woocommerce-info,
	body.woocommerce .woocommerce-message,
	body.woocommerce .woocommerce-error,
	.wc-block-components-notice-banner,
	.woocommerce-notices-wrapper .woocommerce-info::before,
	.woocommerce-notices-wrapper .woocommerce-message::before,
	.woocommerce-notices-wrapper .woocommerce-error::before,
	body .woocommerce-info[role]::before,
	body .woocommerce-message[role]::before,
	body .woocommerce-error[role]::before,
	body.woocommerce .woocommerce-info::before,
	body.woocommerce .woocommerce-message::before,
	body.woocommerce .woocommerce-error::before,
	.wc-block-components-notice-banner::before,
	.woocommerce-notices-wrapper .woocommerce-info::after,
	.woocommerce-notices-wrapper .woocommerce-message::after,
	.woocommerce-notices-wrapper .woocommerce-error::after,
	body .woocommerce-info[role]::after,
	body .woocommerce-message[role]::after,
	body .woocommerce-error[role]::after,
	body.woocommerce .woocommerce-info::after,
	body.woocommerce .woocommerce-message::after,
	body.woocommerce .woocommerce-error::after,
	.wc-block-components-notice-banner::after {
		animation: none !important;
	}
}

/* ─── Mobile refinement ───────────────────────────────────── */
@media (max-width: 640px) {
	:root {
		--asi-notice-pad-start: 1.5rem;
		--asi-notice-pad-x: 1.125rem;
		--asi-notice-rail-w: 5px;
	}

	.woocommerce-notices-wrapper .woocommerce-info::before,
	.woocommerce-notices-wrapper .woocommerce-message::before,
	.woocommerce-notices-wrapper .woocommerce-error::before,
	body .woocommerce-info[role]::before,
	body .woocommerce-message[role]::before,
	body .woocommerce-error[role]::before,
	body.woocommerce .woocommerce-info::before,
	body.woocommerce .woocommerce-message::before,
	body.woocommerce .woocommerce-error::before,
	.wc-block-components-notice-banner::before {
		font-size: 0.625rem;
		letter-spacing: 0.18em;
	}

	.woocommerce-notices-wrapper a.wc-forward,
	body .woocommerce-info a.wc-forward,
	body .woocommerce-message a.wc-forward,
	body .woocommerce-error a.wc-forward {
		margin-inline-start: 0;
		margin-block-start: 0.625rem;
	}
}

/* ═══════════════════════════════════════════════════════════════
 * ─── Checkout Order Summary — sidebar width override ───
 *
 * The checkout layout block (in WPCode snippet "ASI Checkout - Full
 * Width Clean WooCommerce Blocks Layout") pins the sidebar at 360px.
 * That left the "Save X.XXX KD" sale pill flush with the card's
 * right border at desktop widths. Bump the sidebar to 400px on
 * viewports >1100px to give the badge breathing room. The 1180px
 * container max-width has slack — the form column auto-shrinks
 * ~12px to accommodate, which is visually unnoticeable.
 *
 * `html body.woocommerce-checkout` prefix gives 0,3,2 specificity
 * to beat the WPCode rule's 0,3,1 since both use !important and
 * WPCode loads after custom.css in the head.
 * ═══════════════════════════════════════════════════════════════ */
@media (min-width: 1101px) {
	html body.woocommerce-checkout .wc-block-components-sidebar-layout.wc-block-checkout {
		grid-template-columns: minmax(0, 760px) 400px !important;
	}

	html body.woocommerce-checkout .wc-block-components-sidebar.wc-block-checkout__sidebar {
		inline-size: 400px !important;
		max-inline-size: 400px !important;
	}
}

/* ═══════════════════════════════════════════════════════════════
 * ─── Match checkout container width to the site header ───
 *
 * The WPCode snippet caps the checkout block at 1180px, but the
 * site header (asi-topbar + asi-header-sticky) is constrained at
 * 1280px. The 50px-each-side mismatch made the header read as
 * "wider" than the form below it. Bumping the checkout container
 * to 1280px aligns it with the header and matches the cart page
 * (which already uses 1280px via `.wp-site-blocks > main` rule).
 *
 * The grid `minmax(0, 760px) 400px` caps the form column at 760px
 * regardless of container width, so the form doesn't suddenly grow
 * — the extra space becomes side gutter that mirrors the header's
 * inset, making the page feel coherent top-to-bottom.
 *
 * `html body.X` prefix = 0,3,1 specificity, beats WPCode's
 * `body.X .Y.Z` = 0,3,1 because the !important on both ties go to
 * the rule that loads later. WPCode loads after custom.css, so we
 * need 0,3,2 — added an extra `.entry-content` qualifier where
 * needed to clear the bar.
 * ═══════════════════════════════════════════════════════════════ */
html body.woocommerce-checkout .wp-block-woocommerce-checkout,
html body.woocommerce-checkout .entry-content > .wp-block-woocommerce-checkout,
html body.woocommerce-checkout .entry-content > .wp-block-woocommerce-checkout.alignwide,
html body.woocommerce-checkout .entry-content > .wc-block-checkout.alignwide,
html body.woocommerce-checkout .is-layout-constrained > .wp-block-woocommerce-checkout.alignwide,
html body.woocommerce-checkout .wc-block-components-sidebar-layout.wc-block-checkout {
	max-width: 1280px !important;
	max-inline-size: 1280px !important;
}

/* The page hero (`.asi-page-hero`) is a sibling of `.entry-content`
   inside `.asi-checkout-main`. WPCode forces main to width:100% +
   max-width:none so the form blocks can manage their own constraint,
   but that leaves the hero stretched edge-to-edge — wider than the
   1280px form below it. Cart / category pages don't have this issue
   because their main IS constrained to 1280px. Cap the hero here so
   it visually aligns with the form area below. */
html body.woocommerce-checkout .asi-page-hero {
	max-inline-size: 1280px !important;
	margin-inline: auto !important;
}

/* ═══════════════════════════════════════════════════════════════
 * ─── Hide country field when only one country is allowed ───
 *
 * Body class `asi-checkout-single-country` is added by
 * inc/checkout/country-visibility.php when WC's allowed-countries
 * list has a single entry (V1 ships KW only). Hiding via
 * display:none keeps the submitted value intact — WC's
 * default_country setting fills billing/shipping country=KW
 * automatically, the form just doesn't render a "select" UI for
 * a single-option choice.
 *
 * Selector targets every shape WC Blocks renders the country field
 * across versions: form-row wrapper, country-input wrapper, and
 * combobox wrapper. The `html body.X.Y` prefix gives 0,3,2
 * specificity — beats the WPCode snippet's `.wc-block-components-
 * country-input` width rule (0,2,1) so display:none wins cleanly.
 * ═══════════════════════════════════════════════════════════════ */
html body.woocommerce-checkout.asi-checkout-single-country .wc-block-components-address-form__country,
html body.woocommerce-checkout.asi-checkout-single-country .wc-block-components-country-input,
html body.woocommerce-checkout.asi-checkout-single-country .wc-block-components-address-form .wc-block-components-combobox:has(select[name="country"]),
html body.woocommerce-checkout.asi-checkout-single-country .wc-block-components-address-form .wc-block-components-combobox:has(select[name$="-country"]) {
	display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
 * ─── Suppress focus rings on pointer click (keep them on keyboard) ───
 *
 * Browsers (and many WC Blocks / Gutenberg components) draw a dark
 * focus outline around a control after a click — it reads as an
 * unwanted "border around the thing I just clicked" on checkboxes,
 * radios, and buttons. The `:focus:not(:focus-visible)` selector
 * matches *exactly* the click / touch case (focus from a pointer,
 * not from keyboard navigation).
 *
 * Keyboard users still get full focus indicators via per-component
 * `:focus-visible` rules (address-type cards, area combobox trigger,
 * same-as-billing checkbox, etc.), so this stays accessible.
 *
 * `outline` is the only property removed — `box-shadow` is kept so
 * intentional checked / pressed glows (e.g. the same-as-billing
 * checkbox's blue halo) survive a click.
 *
 * Browser support: :focus-visible is in all evergreen browsers
 * (Chrome 86+, Safari 15.4+, Firefox 85+) — well past the V1 floor.
 * ═══════════════════════════════════════════════════════════════ */
*:focus:not(:focus-visible) {
	outline: none !important;
}

/* ═══════════════════════════════════════════════════════════════
 * ─── Payment failure recovery CTA strip ───
 *
 * Sits above the cart contents when the customer is bounced back
 * from MyFatoorah after a cancel / decline / 3DS failure. Built by
 * inc/checkout/payment-failure-ux.php, only emitted when the URL
 * carries `?error=…`. The branded error notice above gives them
 * the message; this strip gives them the way out.
 *
 * Two buttons side-by-side on desktop, stacked on small viewports.
 * Logical properties throughout for RTL parity.
 * ═══════════════════════════════════════════════════════════════ */
.asi-payment-failure {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block: 1rem 1.5rem;
	margin-inline: 0;
}

.asi-payment-failure__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding-block: 0.75rem;
	padding-inline: 1.25rem;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	transition: transform 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
	border: 1px solid var(--wp--preset--color--accent-6, rgba(15, 23, 42, 0.12));
	background: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--contrast, #0f172a);
}

.asi-payment-failure__cta.is-primary {
	background: var(--wp--preset--color--accent-1, #0155b7);
	color: var(--wp--preset--color--base, #fff);
	border-color: transparent;
	box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--wp--preset--color--accent-1, #0155b7) 50%, transparent);
}

.asi-payment-failure__cta:hover {
	transform: translateY(-1px);
}

.asi-payment-failure__cta.is-primary:hover {
	background: color-mix(in srgb, var(--wp--preset--color--accent-1, #0155b7) 88%, #000);
}

.asi-payment-failure__cta:active {
	transform: translateY(0);
}

.asi-payment-failure__cta svg {
	flex-shrink: 0;
}

@media (max-width: 480px) {
	.asi-payment-failure {
		flex-direction: column;
	}
	.asi-payment-failure__cta {
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.asi-payment-failure__cta {
		transition: none;
	}
	.asi-payment-failure__cta:hover {
		transform: none;
	}
}

/* ===================================================================
   Header — Account chip (Doorman pattern)
   -------------------------------------------------------------------
   Auth-aware affordance that replaces the old single account icon.
   Logged-out: tinted-outline icon + "Sign in" wordmark.
   Logged-in:  initials disc + "Hi, <first name>" → opens a popover.

   Tokens used:
     --wp--preset--color--accent-1   brand blue
     --wp--preset--color--contrast   deep navy
     --wp--preset--color--accent-4   muted gray (used for guest icon)

   Per-user hue is carried inline via `--asi-account-hue` (defaults
   to brand-blue 211°). The disc gradient blends a tinted-warm white
   into a 14% tint of that hue, so each user feels distinctive without
   ever leaving the brand palette band.
   =================================================================== */

.asi-account-chip {
	--asi-account-hue: 211;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.3125rem 0.625rem 0.3125rem 0.3125rem;
	padding-inline: 0.3125rem 0.625rem;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 999px;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 200ms ease,
		border-color 200ms ease,
		box-shadow 250ms cubic-bezier(0.2, 0.7, 0.2, 1),
		transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.asi-account-chip:hover {
	background: color-mix(in oklab, hsl(var(--asi-account-hue) 70% 50%) 6%, transparent);
	border-color: color-mix(in oklab, hsl(var(--asi-account-hue) 70% 50%) 18%, transparent);
}

.asi-account-chip:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in oklab, hsl(var(--asi-account-hue) 70% 50%) 28%, transparent);
}

/* ---- Guest chip ----------------------------------------------------- */

.asi-account-chip.is-guest {
	padding-inline: 0.5rem 0.75rem;
	color: color-mix(in oklab, var(--wp--preset--color--contrast) 78%, transparent);
}

.asi-account-chip.is-guest:hover {
	color: var(--wp--preset--color--contrast);
}

.asi-account-chip__icon {
	display: inline-flex;
	inline-size: 22px;
	block-size: 22px;
	align-items: center;
	justify-content: center;
}

.asi-account-chip.is-guest .asi-account-chip__icon {
	color: color-mix(in oklab, var(--wp--preset--color--contrast) 70%, transparent);
}

.asi-account-chip__label {
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	white-space: nowrap;
}

/* ---- Signed-in chip ------------------------------------------------- */

.asi-account-chip.is-auth {
	padding-block: 0.25rem;
	padding-inline-start: 0.25rem;
	padding-inline-end: 0.625rem;
}

.asi-account-chip__disc {
	display: inline-flex;
	inline-size: 30px;
	block-size: 30px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background:
		radial-gradient(circle at 32% 28%,
			hsl(var(--asi-account-hue) 60% 96%) 0%,
			hsl(var(--asi-account-hue) 55% 88%) 55%,
			hsl(var(--asi-account-hue) 55% 82%) 100%);
	color: hsl(var(--asi-account-hue) 70% 26%);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	box-shadow:
		inset 0 0 0 1px color-mix(in oklab, hsl(var(--asi-account-hue) 70% 50%) 22%, transparent),
		0 1px 0 0 color-mix(in oklab, hsl(var(--asi-account-hue) 70% 30%) 5%, transparent);
	/* Shared-element name for the View Transition disc → panel-disc morph.
	   Only the trigger has this name; the panel disc claims it at open. */
	view-transition-name: asi-account-disc;
}

.asi-account-chip__initials {
	display: inline-flex;
	line-height: 1;
	transform: translateY(0.5px); /* optical baseline correction */
}

.asi-account-chip__greeting {
	display: inline-flex;
	align-items: baseline;
	gap: 0.25rem;
	font-size: 0.875rem;
	font-weight: 500;
	/* Roomy enough for Latin descenders (S, m, g, p) so the name span's
	   overflow:clip doesn't slice them. Shared by both children so AR
	   and Latin sit on a single baseline. */
	line-height: 1.4;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--contrast);
	white-space: nowrap;
}

.asi-account-chip__greeting-hi {
	color: color-mix(in oklab, var(--wp--preset--color--contrast) 60%, transparent);
	font-weight: 400;
}

.asi-account-chip__greeting-name {
	max-inline-size: 7ch;
	overflow: clip;
	overflow-clip-margin: 2px;
	text-overflow: ellipsis;
}

.asi-account-chip__caret {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: color-mix(in oklab, var(--wp--preset--color--contrast) 45%, transparent);
	transition: transform 200ms ease, color 200ms ease;
}

.asi-account-chip[aria-expanded="true"] .asi-account-chip__caret,
.asi-account-chip.is-open .asi-account-chip__caret {
	transform: rotate(180deg);
	color: var(--wp--preset--color--contrast);
}

/* Mobile (≤600px): the disc carries identity on its own. Hide the
   greeting line entirely to give the cart/wishlist room to breathe.
   The full "Hi, Saleem" returns from tablet up. */
@media (max-width: 600px) {
	.asi-account-chip.is-auth {
		padding-inline: 0.25rem;
		gap: 0;
	}
	.asi-account-chip__greeting,
	.asi-account-chip__caret {
		display: none;
	}
	.asi-account-chip.is-guest .asi-account-chip__label {
		display: none;
	}
	.asi-account-chip.is-guest {
		padding-inline: 0.375rem;
	}
}

/* ---- Popover panel -------------------------------------------------- */

.asi-account-pop {
	--asi-account-hue: 211;
	position: fixed;
	inset: auto;
	inset-block-start: 64px;
	inset-inline-end: 1rem;
	inline-size: min(340px, calc(100vw - 2rem));
	margin: 0;
	padding: 0;
	background: #FDFCFA; /* warmed white, not pure */
	color: var(--wp--preset--color--contrast);
	border: 1px solid color-mix(in oklab, var(--wp--preset--color--contrast) 10%, transparent);
	border-radius: 14px;
	box-shadow:
		0 1px 0 0 color-mix(in oklab, var(--wp--preset--color--contrast) 4%, transparent),
		0 20px 50px -28px color-mix(in oklab, hsl(var(--asi-account-hue) 70% 30%) 35%, transparent),
		0 8px 22px -16px color-mix(in oklab, var(--wp--preset--color--contrast) 18%, transparent);
	font-family: var(--asi-font-family);
	overflow: clip;
}

/* Tame popover default centering. */
.asi-account-pop::backdrop {
	background: transparent;
}

/* Entry / exit choreography — same-name keyframes for entry and exit
   so the panel feels like one continuous motion rather than open/close.
   Driven by @starting-style for entry and `popover` close transitions. */
.asi-account-pop {
	opacity: 0;
	transform: translateY(-6px) scale(0.985);
	transition:
		opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
		overlay 220ms allow-discrete,
		display 220ms allow-discrete;
}

.asi-account-pop:popover-open {
	opacity: 1;
	transform: translateY(0) scale(1);
}

@starting-style {
	.asi-account-pop:popover-open {
		opacity: 0;
		transform: translateY(-6px) scale(0.985);
	}
}

/* Panel header — disc claims the View Transition name once the panel is
   open, so the same disc visually morphs from the trigger into the panel. */

.asi-account-pop__head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.125rem 0.875rem;
	background:
		radial-gradient(circle at 8% 0%,
			color-mix(in oklab, hsl(var(--asi-account-hue) 65% 92%) 80%, transparent) 0%,
			transparent 60%);
	border-block-end: 1px solid color-mix(in oklab, var(--wp--preset--color--contrast) 8%, transparent);
}

.asi-account-pop__disc {
	display: inline-flex;
	inline-size: 44px;
	block-size: 44px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background:
		radial-gradient(circle at 30% 24%,
			hsl(var(--asi-account-hue) 60% 96%) 0%,
			hsl(var(--asi-account-hue) 55% 86%) 60%,
			hsl(var(--asi-account-hue) 55% 78%) 100%);
	color: hsl(var(--asi-account-hue) 70% 24%);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	box-shadow:
		inset 0 0 0 1px color-mix(in oklab, hsl(var(--asi-account-hue) 70% 50%) 22%, transparent),
		0 1px 0 0 color-mix(in oklab, hsl(var(--asi-account-hue) 70% 30%) 6%, transparent);
	flex: 0 0 auto;
}

.asi-account-pop:popover-open .asi-account-pop__disc {
	view-transition-name: asi-account-disc;
}

.asi-account-pop__hello {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-inline-size: 0;
}

.asi-account-pop__greeting {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.012em;
	color: var(--wp--preset--color--contrast);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.asi-account-pop__sub {
	margin: 0;
	font-size: 0.8125rem;
	color: color-mix(in oklab, var(--wp--preset--color--contrast) 60%, transparent);
}

/* Status row — the "live" reason to open the dropdown. Three tones only. */

.asi-account-pop__order {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.875rem 1.125rem;
	color: inherit;
	text-decoration: none;
	background: transparent;
	transition: background-color 180ms ease;
	border-block-end: 1px solid color-mix(in oklab, var(--wp--preset--color--contrast) 6%, transparent);
}

.asi-account-pop__order:hover {
	background: color-mix(in oklab, hsl(var(--asi-account-hue) 70% 50%) 4%, transparent);
}

.asi-account-pop__order-dot {
	inline-size: 8px;
	block-size: 8px;
	border-radius: 50%;
	flex: 0 0 auto;
	background: var(--wp--preset--color--accent-1);
	box-shadow: 0 0 0 4px color-mix(in oklab, var(--wp--preset--color--accent-1) 18%, transparent);
}

.asi-account-pop__order[data-tone="live"] .asi-account-pop__order-dot {
	background: var(--wp--preset--color--warm-orange, #F59E0B);
	box-shadow: 0 0 0 4px color-mix(in oklab, var(--wp--preset--color--warm-orange, #F59E0B) 22%, transparent);
	animation: asi-account-pulse 2.4s ease-in-out infinite;
}

.asi-account-pop__order[data-tone="done"] .asi-account-pop__order-dot {
	background: var(--wp--preset--color--accent-2, #72B94A);
	box-shadow: 0 0 0 4px color-mix(in oklab, var(--wp--preset--color--accent-2, #72B94A) 18%, transparent);
}

.asi-account-pop__order[data-tone="halted"] .asi-account-pop__order-dot {
	background: color-mix(in oklab, var(--wp--preset--color--contrast) 35%, transparent);
	box-shadow: 0 0 0 4px color-mix(in oklab, var(--wp--preset--color--contrast) 8%, transparent);
}

.asi-account-pop__order-dot.is-quiet {
	background: color-mix(in oklab, var(--wp--preset--color--contrast) 22%, transparent);
	box-shadow: none;
}

@keyframes asi-account-pulse {
	0%, 100% {
		box-shadow: 0 0 0 4px color-mix(in oklab, var(--wp--preset--color--warm-orange, #F59E0B) 22%, transparent);
	}
	50% {
		box-shadow: 0 0 0 7px color-mix(in oklab, var(--wp--preset--color--warm-orange, #F59E0B) 8%, transparent);
	}
}

.asi-account-pop__order-body {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-inline-size: 0;
	flex: 1 1 auto;
}

.asi-account-pop__order-label {
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--contrast);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.asi-account-pop__order-meta {
	font-size: 0.75rem;
	color: color-mix(in oklab, var(--wp--preset--color--contrast) 55%, transparent);
	letter-spacing: 0.005em;
}

.asi-account-pop__order-arrow {
	display: inline-flex;
	color: color-mix(in oklab, var(--wp--preset--color--contrast) 40%, transparent);
	transition: transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1), color 200ms ease;
}

.asi-account-pop__order:hover .asi-account-pop__order-arrow {
	color: var(--wp--preset--color--accent-1);
	transform: translateX(2px);
}

/* RTL: the arrow points the other direction. We don't flip the SVG glyph
   (it's directional and that breaks BiDi text), we flip the icon itself. */
:dir(rtl) .asi-account-pop__order-arrow {
	transform: scaleX(-1);
}
:dir(rtl) .asi-account-pop__order:hover .asi-account-pop__order-arrow {
	transform: scaleX(-1) translateX(2px);
}

/* Empty state — never lectures, points at the shop. */
.asi-account-pop__order.is-empty .asi-account-pop__order-label {
	font-weight: 500;
}

/* ---- Nav links ------------------------------------------------------ */

.asi-account-pop__nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 0.375rem;
	gap: 0.125rem;
}

.asi-account-pop__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 0.75rem;
	border-radius: 8px;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	transition: background-color 160ms ease, color 160ms ease;
}

.asi-account-pop__link:hover {
	background: color-mix(in oklab, hsl(var(--asi-account-hue) 70% 50%) 7%, transparent);
	color: var(--wp--preset--color--accent-1);
}

.asi-account-pop__link-icon {
	flex: 0 0 auto;
	color: color-mix(in oklab, var(--wp--preset--color--contrast) 60%, transparent);
	transition: color 160ms ease;
}

.asi-account-pop__link:hover .asi-account-pop__link-icon {
	color: var(--wp--preset--color--accent-1);
}

/* ---- Footer / sign out --------------------------------------------- */

.asi-account-pop__foot {
	padding: 0.375rem;
	border-block-start: 1px solid color-mix(in oklab, var(--wp--preset--color--contrast) 6%, transparent);
	background: color-mix(in oklab, var(--wp--preset--color--contrast) 2%, transparent);
}

.asi-account-pop__signout {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	inline-size: 100%;
	padding: 0.5rem 0.75rem;
	border-radius: 8px;
	color: color-mix(in oklab, var(--wp--preset--color--contrast) 72%, transparent);
	text-decoration: none;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.005em;
	transition: background-color 160ms ease, color 160ms ease;
}

.asi-account-pop__signout:hover {
	background: color-mix(in oklab, var(--wp--preset--color--contrast) 5%, transparent);
	color: var(--wp--preset--color--contrast);
}

.asi-account-pop__signout svg {
	color: color-mix(in oklab, var(--wp--preset--color--contrast) 55%, transparent);
}

/* The logout chevron is directional; flip in RTL. */
:dir(rtl) .asi-account-pop__signout svg {
	transform: scaleX(-1);
}

/* ---- View Transitions for the disc → panel morph ------------------- */

::view-transition-old(asi-account-disc),
::view-transition-new(asi-account-disc) {
	animation-duration: 320ms;
	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Mobile popover positioning ------------------------------------ */

@media (max-width: 600px) {
	.asi-account-pop {
		inset-block-start: auto;
		inset-block-end: 0;
		inset-inline: 0;
		inline-size: 100%;
		max-inline-size: 100%;
		border-radius: 18px 18px 0 0;
		border-block-end: none;
		transform: translateY(8px);
	}
	.asi-account-pop:popover-open {
		transform: translateY(0);
	}
	@starting-style {
		.asi-account-pop:popover-open {
			transform: translateY(8px);
		}
	}
	.asi-account-pop::backdrop {
		background: color-mix(in oklab, var(--wp--preset--color--contrast) 32%, transparent);
		backdrop-filter: blur(2px);
	}
}

/* ---- Tajawal (Arabic) tuning --------------------------------------- */

:lang(ar) .asi-account-chip__greeting,
:lang(ar) .asi-account-pop__greeting,
:lang(ar) .asi-account-pop__sub,
:lang(ar) .asi-account-pop__order-label,
:lang(ar) .asi-account-pop__order-meta,
:lang(ar) .asi-account-pop__link,
:lang(ar) .asi-account-pop__signout {
	font-family: 'Tajawal', system-ui, sans-serif;
}

/* Tajawal sits high; bring the greeting baseline down a touch so it aligns
   visually with the disc's centerline, matching the cart-vault tuning. */
:lang(ar) .asi-account-chip__greeting {
	transform: translateY(1px);
}

/* Slightly larger so AR doesn't feel undersized next to the Latin chip. */
:lang(ar) .asi-account-chip__greeting-name {
	font-size: 0.9375rem;
}

/* ---- Reduced motion ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.asi-account-pop,
	.asi-account-pop:popover-open,
	.asi-account-chip,
	.asi-account-chip__caret,
	.asi-account-pop__order-arrow {
		transition-duration: 0ms !important;
		animation: none !important;
		transform: none !important;
	}
	@starting-style {
		.asi-account-pop:popover-open {
			opacity: 1;
			transform: none;
		}
	}
	.asi-account-pop__order[data-tone="live"] .asi-account-pop__order-dot {
		animation: none;
	}
}

/* ---- Tighter blue separator between chip and the icons ------------- */

.asi-account-chip + .asi-header-sep {
	margin-inline-start: 0.25rem;
}