/**
 * ANZO Store — Reusable UI components.
 *
 * Buttons, badges, cards, product cards, drawers, search overlay, notices,
 * breadcrumbs, pagination, newsletter, benefits, hero.
 */

/* ---------------------------------------------------------------
 * Buttons
 * --------------------------------------------------------------- */

.btn,
.button,
button.btn {
	align-items: center;
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--font-sans);
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	gap: var(--space-2);
	justify-content: center;
	line-height: 1.2;
	min-block-size: 44px;
	padding-block: var(--space-3);
	padding-inline: var(--space-6);
	text-align: center;
	text-decoration: none;
	transition: background-color var(--duration-fast) var(--ease),
		border-color var(--duration-fast) var(--ease),
		color var(--duration-fast) var(--ease),
		transform var(--duration-fast) var(--ease);
	white-space: nowrap;
}

.btn:active {
	transform: translateY(1px);
}

/* ---------------------------------------------------------------
 * Button rows — two adjacent controls are never allowed to touch
 *
 * Explicit rows in the theme's own templates use .btn-row. The :has()
 * rule below is the safety net for markup we do not write: WooCommerce
 * prints button pairs into plain <p class="buttons"> and <td class="actions">
 * with no spacing of its own.
 *
 * `display: flex` is the mechanism on purpose — `gap` has no effect on a
 * block container, and a margin would double up wherever a container
 * already sets its own gap. Re-declaring flex on something that is already
 * flex changes nothing, so the rule is safe to apply broadly.
 * --------------------------------------------------------------- */

.btn-row {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

/* Kept as a named list rather than `*:has(…)`: an unqualified :has() on
 * every element in the document is the one form of it that actually costs
 * something at scale. */
:is(p, div, td, li, footer, header, form):has(
		> :is(.btn, .button, button, input[type="submit"], a.wc-forward)
			+ :is(.btn, .button, button, input[type="submit"], a.wc-forward)
	) {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.btn:disabled,
.btn[aria-disabled="true"],
.btn.is-loading {
	cursor: not-allowed;
	opacity: 0.6;
	pointer-events: none;
}

.btn--primary {
	background-color: var(--color-primary);
	color: var(--color-white);
}

.btn--primary:hover {
	background-color: var(--color-primary-hover);
	color: var(--color-white);
}

.btn--accent {
	background-color: var(--color-accent);
	color: var(--color-white);
}

.btn--accent:hover {
	background-color: var(--color-accent-hover);
	color: var(--color-white);
}

.btn--outline {
	background-color: transparent;
	border-color: var(--border-strong);
	color: var(--color-ink-800);
}

.btn--outline:hover {
	border-color: var(--color-ink-900);
	background-color: var(--surface-muted);
	color: var(--color-ink-900);
}

.btn--ghost {
	background-color: transparent;
	color: var(--color-ink-700);
	padding-inline: var(--space-3);
}

.btn--ghost:hover {
	background-color: var(--surface-muted);
}

.btn--light {
	background-color: var(--color-white);
	color: var(--color-ink-900);
}

.btn--light:hover {
	background-color: var(--color-ink-100);
	color: var(--color-ink-900);
}

.btn--block {
	inline-size: 100%;
}

.btn--sm {
	font-size: var(--text-sm);
	min-block-size: 36px;
	padding-block: var(--space-2);
	padding-inline: var(--space-4);
}

.btn--lg {
	font-size: var(--text-md);
	min-block-size: 52px;
	padding-inline: var(--space-8);
}

/* Loading spinner shared by AJAX actions. */
.btn.is-loading::before {
	animation: anzo-spin 700ms linear infinite;
	border: 2px solid currentColor;
	border-block-start-color: transparent;
	border-radius: 50%;
	content: "";
	block-size: 1em;
	inline-size: 1em;
}

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

/* ---------------------------------------------------------------
 * Badges & pills
 * --------------------------------------------------------------- */

.badge {
	align-items: center;
	border-radius: var(--radius-sm);
	display: inline-flex;
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wide);
	line-height: 1;
	padding-block: 0.35rem;
	padding-inline: var(--space-2);
	text-transform: uppercase;
}

.badge--sale {
	background-color: var(--color-sale);
	color: var(--color-white);
}

.badge--new {
	background-color: var(--color-ink-900);
	color: var(--color-white);
}

.badge--out {
	background-color: var(--color-ink-200);
	color: var(--color-ink-700);
}

.badge--soft {
	background-color: var(--color-accent-soft);
	color: var(--color-accent-hover);
}

/* ---------------------------------------------------------------
 * Cards
 * --------------------------------------------------------------- */

.card {
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.card__body {
	padding: var(--space-5);
}

/* Product card — used by the theme and by the WooCommerce loop template. */
/* The card is a real surface, not a bare image + text. With a dense grid this
 * gives each product a clear boundary and a hover state to land on. */
.product-card {
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	display: flex;
	flex-direction: column;
	block-size: 100%;
	overflow: hidden;
	padding: var(--space-3);
	position: relative;
	transition: border-color var(--duration) var(--ease),
		box-shadow var(--duration) var(--ease),
		transform var(--duration) var(--ease);
}

.product-card:hover {
	border-color: var(--border-strong);
	box-shadow: var(--shadow-lg);
	transform: translateY(-3px);
}

.product-card__media {
	aspect-ratio: 4 / 5;
	background-color: var(--surface-muted);
	border-radius: var(--radius-md);
	display: block;
	overflow: hidden;
	position: relative;
}

.product-card__media img {
	block-size: 100%;
	inline-size: 100%;
	object-fit: cover;
	transition: transform var(--duration-slow) var(--ease);
}

.product-card:hover .product-card__media img {
	transform: scale(1.04);
}

.product-card__badges {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	align-items: flex-start;
	inset-block-start: var(--space-3);
	inset-inline-start: var(--space-3);
	position: absolute;
	z-index: 2;
}

.product-card__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	inset-block-start: var(--space-3);
	inset-inline-end: var(--space-3);
	opacity: 0;
	position: absolute;
	transform: translateY(-6px);
	transition: opacity var(--duration) var(--ease),
		transform var(--duration) var(--ease);
	z-index: 2;
}

.product-card:hover .product-card__actions,
.product-card:focus-within .product-card__actions {
	opacity: 1;
	transform: translateY(0);
}

.product-card__action {
	align-items: center;
	background-color: var(--surface);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-sm);
	color: var(--color-ink-700);
	display: inline-flex;
	block-size: 36px;
	inline-size: 36px;
	justify-content: center;
}

.product-card__action:hover {
	background-color: var(--color-ink-900);
	color: var(--color-white);
}

/* ---------------------------------------------------------------
 * Wishlist
 * --------------------------------------------------------------- */

/* Saved items stay visible even when the card is not hovered — otherwise a
 * customer cannot see what they already saved while scanning the grid. */
.product-card__actions:has(.anzo-wishlist-btn.is-active),
.product-card:focus-within .product-card__actions {
	opacity: 1;
	transform: translateY(0);
}

.anzo-wishlist-btn.is-active {
	background-color: var(--color-accent);
	color: var(--color-white);
}

.anzo-wishlist-btn.is-active svg {
	fill: currentColor;
}

.anzo-wishlist-btn--full {
	inline-size: 100%;
	margin-block-start: var(--space-3);
}

.anzo-wishlist-btn--full.is-active {
	background-color: var(--color-accent-soft);
	border-color: var(--color-accent);
	color: var(--color-accent-hover);
}

.anzo-wishlist-btn[data-busy] {
	opacity: 0.6;
	pointer-events: none;
}

/* ---------------------------------------------------------------
 * Unit price — "18.00 ج.م / لتر"
 * --------------------------------------------------------------- */

.unit-price {
	color: var(--text-muted);
	display: block;
	font-size: var(--text-xs);
	font-weight: var(--weight-normal);
	margin-block-start: 2px;
}

.product-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-2);
	padding-block-start: var(--space-4);
}

.product-card__eyebrow {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	min-block-size: 1rem;
}

.product-card__cat {
	color: var(--text-subtle);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

/* Pack size chip — for consumables this is often the deciding detail. */
.product-card__pack {
	background-color: var(--surface-sunken);
	border-radius: var(--radius-xs);
	color: var(--color-ink-700);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	line-height: 1;
	padding: 0.25rem var(--space-2);
	white-space: nowrap;
}

.product-card__title {
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
	letter-spacing: 0;
	line-height: var(--leading-snug);
}

.product-card__title a {
	text-decoration: none;
}

/* The whole card is clickable, but only the title is a real link — this keeps
 * one link per card for screen readers while giving a large pointer target. */
.product-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.product-card__price {
	color: var(--color-ink-900);
	font-size: var(--text-md);
	font-weight: var(--weight-semibold);
	margin-block-start: auto;
	padding-block-start: var(--space-1);
}

.product-card__price del {
	color: var(--text-subtle);
	font-weight: var(--weight-normal);
	margin-inline-end: var(--space-2);
}

.product-card__price ins {
	color: var(--color-sale);
	text-decoration: none;
}

.product-card__footer {
	padding-block-start: var(--space-3);
	position: relative;
	z-index: 2;
}

/* ---------------------------------------------------------------
 * Star rating (shared by cards, product page, reviews)
 * --------------------------------------------------------------- */

.rating {
	align-items: center;
	display: inline-flex;
	gap: var(--space-1);
	font-size: var(--text-xs);
}

.rating__stars {
	color: #f5a623;
	display: inline-flex;
	gap: 1px;
}

.rating__count {
	color: var(--text-subtle);
}

/* ---------------------------------------------------------------
 * Category strip — one scrollable row of round badges
 * --------------------------------------------------------------- */

/* Qualified with `ul` on purpose: base.css resets `ul[class]` padding to 0,
 * and that beats a lone class selector — the inline padding below is what
 * keeps the first and last badge off the screen edge. */
ul.cat-strip {
	display: flex;
	gap: var(--space-5);
	list-style: none;
	margin: 0;
	/* Bleeds to the viewport edge on phones so the row visibly continues
	 * past the container — the cue that tells people it scrolls. */
	margin-inline: calc(var(--container-pad) * -1);
	overflow-x: auto;
	padding-block: var(--space-2);
	padding-inline: var(--container-pad);
	/* Snap positions align to the scrollport, not to the padding box, so
	 * without this the first badge snaps flush against the screen edge and
	 * the inline padding above is silently scrolled away. */
	scroll-padding-inline: var(--container-pad);
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.cat-strip::-webkit-scrollbar {
	display: none;
}

.cat-strip__item {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.cat-circle {
	display: block;
	inline-size: 92px;
	text-align: center;
	text-decoration: none;
}

.cat-circle__media {
	aspect-ratio: 1;
	background-color: var(--surface-muted);
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	display: block;
	overflow: hidden;
	transition: border-color var(--duration) var(--ease),
		box-shadow var(--duration) var(--ease),
		transform var(--duration) var(--ease);
}

.cat-circle__media img {
	block-size: 100%;
	inline-size: 100%;
	object-fit: cover;
}

.cat-circle:hover .cat-circle__media,
.cat-circle:focus-visible .cat-circle__media {
	border-color: var(--color-accent);
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
}

.cat-circle__label {
	color: var(--text);
	display: block;
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	line-height: var(--leading-snug);
	margin-block-start: var(--space-3);
}

.cat-circle:hover .cat-circle__label {
	color: var(--color-accent);
}

@media (min-width: 1024px) {
	.cat-strip {
		/* Enough categories still scroll; a short list centres instead of
		 * stranding a few badges against one edge. */
		justify-content: center;
	}

	.cat-circle {
		inline-size: 104px;
	}
}

/* ---------------------------------------------------------------
 * Homepage banners — slider flanked by two standing promos
 * --------------------------------------------------------------- */

.hero-banners {
	padding-block: var(--space-6);
}

.hero-banners__inner {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: minmax(0, 1fr);
}

.banner {
	background-color: var(--surface-muted);
	border-radius: var(--radius-lg);
	overflow: hidden;
	position: relative;
}

.banner img {
	block-size: 100%;
	display: block;
	inline-size: 100%;
	object-fit: cover;
}

.banner__link {
	display: block;
	block-size: 100%;
}

.banner--main {
	aspect-ratio: 16 / 7;
}

.banner--side {
	aspect-ratio: 16 / 7;
}

/* Side banners are a desktop luxury: on a phone they would push the real
 * content below two extra screens of promo. */
@media (max-width: 899px) {
	.banner--side {
		display: none;
	}
}

@media (min-width: 900px) {
	.hero-banners__inner {
		/* The slider is the point — the flanking promos stay subordinate. */
		grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr) minmax(0, 1fr);
	}

	.banner--main,
	.banner--side {
		aspect-ratio: auto;
		block-size: clamp(320px, 34vw, 460px);
	}
}

/* Slider ------------------------------------------------------- */

.hero-slider__viewport {
	block-size: 100%;
	position: relative;
}

/* Slides crossfade rather than slide sideways: no transform maths that has
 * to be mirrored for RTL, and no layout shift while images decode. */
.hero-slider__slide {
	inset: 0;
	opacity: 0;
	position: absolute;
	transition: opacity var(--duration-slow) var(--ease);
	visibility: hidden;
}

.hero-slider__slide.is-active {
	opacity: 1;
	visibility: visible;
}

/* Without JS every slide would be invisible — show the first one. */
.hero-slider:not(.is-ready) .hero-slider__slide:first-child {
	opacity: 1;
	visibility: visible;
}

.hero-slider__slide > * {
	block-size: 100%;
	display: block;
}

.hero-slider__arrow {
	align-items: center;
	background-color: rgba(255, 255, 255, 0.9);
	border: 0;
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-sm);
	color: var(--color-ink-800);
	cursor: pointer;
	display: none;
	block-size: 40px;
	inline-size: 40px;
	inset-block-start: 50%;
	justify-content: center;
	opacity: 0;
	position: absolute;
	transform: translateY(-50%);
	transition: opacity var(--duration) var(--ease),
		background-color var(--duration) var(--ease);
	z-index: 2;
}

.hero-slider__arrow--prev {
	inset-inline-start: var(--space-4);
}

.hero-slider__arrow--next {
	inset-inline-end: var(--space-4);
}

/* Both buttons draw the same arrow-right glyph. "Next" already points the
 * right way in either direction (rtl.css mirrors the glyph wholesale), so only
 * "prev" needs handling — and it needs the opposite treatment per direction,
 * which is why the RTL case is spelled out here rather than left to rtl.css. */
.hero-slider__arrow--prev .icon {
	transform: scaleX(-1);
}

[dir="rtl"] .hero-slider__arrow--prev .icon {
	transform: none;
}

.hero-slider:hover .hero-slider__arrow,
.hero-slider:focus-within .hero-slider__arrow {
	opacity: 1;
}

.hero-slider__arrow:hover {
	background-color: var(--color-white);
}

@media (min-width: 900px) {
	.hero-slider__arrow {
		display: inline-flex;
	}
}

/* Keyboard users get the arrows the moment they reach them, hover or not. */
.hero-slider__arrow:focus-visible {
	opacity: 1;
}

.hero-slider__dots {
	display: flex;
	gap: var(--space-2);
	inset-block-end: var(--space-4);
	inset-inline: 0;
	justify-content: center;
	position: absolute;
	z-index: 2;
}

.hero-slider__dot {
	background-color: rgba(255, 255, 255, 0.55);
	border: 0;
	border-radius: var(--radius-pill);
	box-shadow: 0 1px 2px rgba(11, 15, 25, 0.25);
	cursor: pointer;
	block-size: 4px;
	inline-size: 22px;
	padding: 0;
	transition: background-color var(--duration) var(--ease),
		inline-size var(--duration) var(--ease);
}

.hero-slider__dot[aria-selected="true"] {
	background-color: var(--color-white);
	inline-size: 34px;
}

/* ---------------------------------------------------------------
 * Hero
 * --------------------------------------------------------------- */

.hero {
	/* A soft two-stop wash that follows the chosen colour scheme, plus a
	 * large blurred accent orb. Cheap (no images) and it stops the hero from
	 * reading as a flat grey band. */
	background-image: linear-gradient(160deg, var(--hero-wash-a) 0%, var(--hero-wash-b) 100%);
	overflow: hidden;
	position: relative;
}

.hero::before {
	background: radial-gradient(
		circle,
		color-mix(in srgb, var(--color-accent) 18%, transparent) 0%,
		transparent 70%
	);
	block-size: 520px;
	content: "";
	inline-size: 520px;
	inset-block-start: -160px;
	inset-inline-end: -140px;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

.hero > * {
	position: relative;
	z-index: 1;
}

.hero__inner {
	align-items: center;
	display: grid;
	gap: var(--space-10);
	grid-template-columns: minmax(0, 1fr);
	padding-block: var(--space-16);
}

@media (min-width: 900px) {
	.hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--space-16);
		padding-block: var(--space-24);
	}
}

.hero__content {
	max-inline-size: 46ch;
}

.hero__title {
	font-size: var(--text-4xl);
	margin-block: var(--space-4) var(--space-5);
}

.hero__text {
	color: var(--text-muted);
	font-size: var(--text-lg);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-block-start: var(--space-8);
}

.hero__media {
	border-radius: var(--radius-xl);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: linear-gradient(135deg, var(--color-ink-200), var(--color-ink-100));
}

.hero__media img {
	block-size: 100%;
	inline-size: 100%;
	object-fit: cover;
}

.hero__stats {
	border-block-start: 1px solid var(--border);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
	margin-block-start: var(--space-10);
	padding-block-start: var(--space-6);
}

.hero__stat strong {
	display: block;
	font-family: var(--font-display);
	font-size: var(--text-xl);
}

.hero__stat span {
	color: var(--text-muted);
	font-size: var(--text-sm);
}

/* ---------------------------------------------------------------
 * Benefits strip
 * --------------------------------------------------------------- */

.benefits {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 900px) {
	.benefits {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.benefit {
	align-items: flex-start;
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	display: flex;
	gap: var(--space-4);
	padding: var(--space-5);
	transition: border-color var(--duration) var(--ease),
		box-shadow var(--duration) var(--ease),
		transform var(--duration) var(--ease);
}

.benefit:hover {
	border-color: var(--border-strong);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.benefit__icon {
	align-items: center;
	background-color: var(--color-accent-soft);
	border-radius: var(--radius-md);
	color: var(--color-accent-hover);
	display: inline-flex;
	flex-shrink: 0;
	block-size: 44px;
	inline-size: 44px;
	justify-content: center;
}

.benefit__title {
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
}

.benefit__text {
	color: var(--text-muted);
	font-size: var(--text-sm);
	margin-block-start: var(--space-1);
}

/* ---------------------------------------------------------------
 * Promo banner
 * --------------------------------------------------------------- */

.promo {
	align-items: center;
	background-color: var(--surface-inverse);
	border-radius: var(--radius-xl);
	color: var(--text-inverse);
	display: grid;
	gap: var(--space-8);
	grid-template-columns: minmax(0, 1fr);
	overflow: hidden;
	padding: var(--space-10);
}

@media (min-width: 900px) {
	.promo {
		grid-template-columns: 1.2fr 1fr;
		padding: var(--space-16);
	}
}

.promo h2 {
	color: var(--text-inverse);
	font-size: var(--text-3xl);
	margin-block: var(--space-3) var(--space-4);
}

.promo p {
	color: var(--color-ink-400);
	max-inline-size: 50ch;
}

.promo__actions {
	margin-block-start: var(--space-8);
}

/* ---------------------------------------------------------------
 * Newsletter
 * --------------------------------------------------------------- */

.newsletter {
	text-align: center;
}

.newsletter__form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-block-start: var(--space-6);
	margin-inline: auto;
	max-inline-size: 480px;
}

.newsletter__form input[type="email"] {
	flex: 1 1 220px;
}

.newsletter__note {
	color: var(--text-muted);
	font-size: var(--text-xs);
	margin-block-start: var(--space-3);
}

.newsletter__status {
	font-size: var(--text-sm);
	margin-block-start: var(--space-3);
	min-block-size: 1.25rem;
}

.newsletter__status.is-error {
	color: var(--color-danger);
}

.newsletter__status.is-success {
	color: var(--color-success);
}

/* ---------------------------------------------------------------
 * Trust / brands strip
 * --------------------------------------------------------------- */

.trust {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-10);
	justify-content: center;
	/* These are links, so they must stay readable — not faded to decoration. */
	opacity: 0.85;
}

.trust__item {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

/* ---------------------------------------------------------------
 * Drawer (mobile nav + mini cart) & overlay
 * --------------------------------------------------------------- */

.overlay {
	background-color: rgba(11, 15, 25, 0.5);
	inset: 0;
	opacity: 0;
	position: fixed;
	transition: opacity var(--duration) var(--ease), visibility var(--duration);
	visibility: hidden;
	z-index: var(--z-overlay);
}

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

.drawer {
	background-color: var(--surface);
	display: flex;
	flex-direction: column;
	inset-block: 0;
	inset-inline-start: 0;
	max-inline-size: 88vw;
	position: fixed;
	inline-size: 360px;
	transform: translateX(-100%);
	transition: transform var(--duration-slow) var(--ease);
	visibility: hidden;
	z-index: var(--z-drawer);
}

[dir="rtl"] .drawer {
	transform: translateX(100%);
}

.drawer--end {
	inset-inline-start: auto;
	inset-inline-end: 0;
	transform: translateX(100%);
}

[dir="rtl"] .drawer--end {
	transform: translateX(-100%);
}

.drawer.is-open {
	transform: translateX(0);
	visibility: visible;
}

.drawer__head {
	align-items: center;
	border-block-end: 1px solid var(--border);
	display: flex;
	justify-content: space-between;
	padding: var(--space-4) var(--space-5);
}

.drawer__title {
	font-size: var(--text-md);
	font-weight: var(--weight-semibold);
}

.drawer__close {
	align-items: center;
	border-radius: var(--radius-md);
	color: var(--color-ink-600);
	display: inline-flex;
	block-size: 40px;
	inline-size: 40px;
	justify-content: center;
}

.drawer__close:hover {
	background-color: var(--surface-muted);
}

.drawer__body {
	flex: 1;
	overflow-y: auto;
	padding: var(--space-4) var(--space-5);
	overscroll-behavior: contain;
}

.drawer__foot {
	border-block-start: 1px solid var(--border);
	padding: var(--space-5);
}

/* Mobile navigation list inside the drawer */
.nav-mobile ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-mobile > ul > li + li {
	border-block-start: 1px solid var(--border);
}

.nav-mobile a {
	display: block;
	font-size: var(--text-md);
	font-weight: var(--weight-medium);
	padding-block: var(--space-4);
	text-decoration: none;
}

/* A parent row is the link plus its expand button, side by side. */
.nav-mobile .menu-item-has-children > a {
	display: inline-block;
}

.nav-mobile__expand {
	align-items: center;
	border-radius: var(--radius-sm);
	color: var(--color-ink-500);
	display: inline-flex;
	float: inline-end;
	block-size: 40px;
	inline-size: 40px;
	justify-content: center;
	margin-block-start: var(--space-2);
}

.nav-mobile__expand:hover {
	background-color: var(--surface-muted);
	color: var(--color-ink-900);
}

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

.nav-mobile__expand svg {
	transition: transform var(--duration-fast) var(--ease);
}

.nav-mobile .sub-menu {
	clear: both;
	padding-inline-start: var(--space-4);
	padding-block-end: var(--space-2);
}

.nav-mobile .sub-menu a {
	color: var(--text-muted);
	font-size: var(--text-base);
	font-weight: var(--weight-normal);
	padding-block: var(--space-2);
}

.drawer__meta {
	border-block-start: 1px solid var(--border);
	display: grid;
	gap: var(--space-3);
	margin-block-start: var(--space-6);
	padding-block-start: var(--space-6);
}

.drawer__meta a {
	align-items: center;
	display: flex;
	gap: var(--space-3);
	text-decoration: none;
}

/* ---------------------------------------------------------------
 * Search overlay
 * --------------------------------------------------------------- */

.search-panel {
	background-color: var(--surface);
	border-block-end: 1px solid var(--border);
	box-shadow: var(--shadow-md);
	inset-block-start: 0;
	inset-inline: 0;
	position: fixed;
	transform: translateY(-100%);
	transition: transform var(--duration) var(--ease), visibility var(--duration);
	visibility: hidden;
	z-index: var(--z-drawer);
}

.search-panel.is-open {
	transform: translateY(0);
	visibility: visible;
}

.search-panel__inner {
	padding-block: var(--space-6) var(--space-8);
}

.search-form {
	align-items: center;
	display: flex;
	gap: var(--space-3);
}

.search-form__field {
	flex: 1;
	position: relative;
}

.search-form input[type="search"] {
	font-size: var(--text-lg);
	padding-block: var(--space-4);
	padding-inline-start: var(--space-12);
}

.search-form__icon {
	color: var(--text-subtle);
	inset-block-start: 50%;
	inset-inline-start: var(--space-4);
	position: absolute;
	transform: translateY(-50%);
}

.search-suggestions {
	margin-block-start: var(--space-5);
}

.search-suggestions__list {
	display: grid;
	gap: var(--space-2);
	list-style: none;
	margin: 0;
	max-block-size: 46vh;
	overflow-y: auto;
	padding: 0;
}

.search-suggestion {
	align-items: center;
	border-radius: var(--radius-md);
	display: flex;
	gap: var(--space-4);
	padding: var(--space-2);
	text-decoration: none;
}

.search-suggestion:hover,
.search-suggestion:focus-visible {
	background-color: var(--surface-muted);
}

.search-suggestion img {
	border-radius: var(--radius-sm);
	block-size: 48px;
	inline-size: 48px;
	object-fit: cover;
	background-color: var(--surface-sunken);
}

.search-suggestion__name {
	font-weight: var(--weight-medium);
}

.search-suggestion__price {
	color: var(--text-muted);
	font-size: var(--text-sm);
}

.search-suggestions__status {
	color: var(--text-muted);
	font-size: var(--text-sm);
	padding-block: var(--space-2);
}

/* ---------------------------------------------------------------
 * Breadcrumbs
 * --------------------------------------------------------------- */

.breadcrumbs {
	color: var(--text-muted);
	font-size: var(--text-sm);
	padding-block: var(--space-4);
}

.breadcrumbs a {
	text-decoration: none;
}

.breadcrumbs a:hover {
	color: var(--color-accent);
}

.breadcrumbs__sep {
	color: var(--text-subtle);
	margin-inline: var(--space-2);
}

/* The separator glyph itself must flip in RTL. */
[dir="rtl"] .breadcrumbs__sep {
	transform: scaleX(-1);
	display: inline-block;
}

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

.pagination {
	display: flex;
	justify-content: center;
	margin-block-start: var(--space-12);
}

.pagination .page-numbers {
	align-items: center;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	display: inline-flex;
	block-size: 40px;
	justify-content: center;
	margin-inline: 2px;
	min-inline-size: 40px;
	padding-inline: var(--space-2);
	text-decoration: none;
}

.pagination .page-numbers:hover {
	border-color: var(--color-ink-900);
}

.pagination .page-numbers.current {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

.pagination .page-numbers.dots {
	border-color: transparent;
}

/* Prev/next arrows are directional glyphs — mirror them. */
[dir="rtl"] .pagination .next svg,
[dir="rtl"] .pagination .prev svg {
	transform: scaleX(-1);
}

/* ---------------------------------------------------------------
 * Notices & empty states
 * --------------------------------------------------------------- */

.notice {
	border: 1px solid var(--border);
	border-inline-start: 3px solid var(--color-ink-400);
	border-radius: var(--radius-md);
	display: flex;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
}

.notice--success {
	background-color: var(--color-success-soft);
	border-color: var(--color-success);
}

.notice--error {
	background-color: var(--color-danger-soft);
	border-color: var(--color-danger);
}

.notice--info {
	background-color: var(--color-accent-soft);
	border-color: var(--color-accent);
}

.empty-state {
	margin-inline: auto;
	max-inline-size: 44ch;
	padding-block: var(--space-16);
	text-align: center;
}

.empty-state__icon {
	color: var(--text-subtle);
	margin-inline: auto;
	margin-block-end: var(--space-5);
}

.empty-state__title {
	font-size: var(--text-xl);
	margin-block-end: var(--space-3);
}

.empty-state__text {
	color: var(--text-muted);
	margin-block-end: var(--space-6);
}

/* ---------------------------------------------------------------
 * Toast (AJAX feedback)
 * --------------------------------------------------------------- */

.toast-stack {
	display: grid;
	gap: var(--space-2);
	inset-block-end: var(--space-5);
	inset-inline-end: var(--space-5);
	position: fixed;
	z-index: var(--z-modal);
	pointer-events: none;
}

.toast {
	background-color: var(--color-ink-900);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	color: var(--color-white);
	font-size: var(--text-base);
	padding: var(--space-3) var(--space-5);
	animation: anzo-toast-in var(--duration) var(--ease);
}

.toast--error {
	background-color: var(--color-danger);
}

@keyframes anzo-toast-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}

/* ---------------------------------------------------------------
 * Widgets (shop / blog sidebar)
 * --------------------------------------------------------------- */

.widget__title {
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	margin-block-end: var(--space-4);
}

.widget ul {
	display: grid;
	gap: var(--space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.widget li a {
	color: var(--text-muted);
	font-size: var(--text-base);
	text-decoration: none;
}

.widget li a:hover {
	color: var(--color-accent);
}

/* ---------------------------------------------------------------
 * Post cards (blog)
 * --------------------------------------------------------------- */

.post-card__media {
	aspect-ratio: 16 / 10;
	background-color: var(--surface-muted);
	border-radius: var(--radius-lg);
	display: block;
	overflow: hidden;
}

.post-card__media img {
	block-size: 100%;
	inline-size: 100%;
	object-fit: cover;
}

.post-card__title {
	font-size: var(--text-lg);
	margin-block: var(--space-4) var(--space-2);
}

.post-card__title a {
	text-decoration: none;
}

.post-card__meta {
	color: var(--text-subtle);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}