/* ==========================================================================
   EXO VAULT — foundation styles
   Mobile-first. Logical properties throughout (RTL must mirror for free).
   Animations: transform/opacity only, ≤ 400ms, custom easing.
   ========================================================================== */

/* ---- Fonts (WOFF2 only, swap) ------------------------------------------ */
@font-face {
	font-family: "Cinzel";
	src: url("../fonts/cinzel-700-latin.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
	unicode-range: U+0000-00FF, U+2013-2014, U+2018-201D;
}
@font-face {
	font-family: "Outfit";
	src: url("../fonts/outfit-400-latin.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
	unicode-range: U+0000-00FF, U+2013-2014, U+2018-201D;
}
@font-face {
	font-family: "Outfit";
	src: url("../fonts/outfit-600-latin.woff2") format("woff2");
	font-weight: 600;
	font-display: swap;
	unicode-range: U+0000-00FF, U+2013-2014, U+2018-201D;
}
@font-face {
	font-family: "Zain";
	src: url("../fonts/zain-400-arabic.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
	font-family: "Zain";
	src: url("../fonts/zain-700-arabic.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}

/* ---- Tokens -------------------------------------------------------------- */
:root {
	--ev-gold: #c9a227;
	--ev-gold-shadow: #8b6914;
	--ev-gold-hi: #ffe9a8;
	--ev-violet: #3b1d5e;
	--ev-space: #1a0b2e;
	--ev-black: #0a0612;
	--ev-cyan: #4fc3f7;
	--ev-text: #efe9dc;
	--ev-text-dim: #b5ac9a;
	--ev-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ev-press: cubic-bezier(0.34, 1.56, 0.64, 1);
	--ev-glow-gold: 0 0 24px rgba(201, 162, 39, 0.35);
	--ev-rule: linear-gradient(90deg, transparent, var(--ev-gold) 20%, var(--ev-gold-hi) 50%, var(--ev-gold) 80%, transparent);
}

html {
	scrollbar-color: var(--ev-gold-shadow) var(--ev-black);
}

body {
	background:
		radial-gradient(ellipse 120% 60% at 50% -20%, rgba(59, 29, 94, 0.55) 0%, rgba(26, 11, 46, 0.3) 45%, transparent 75%),
		var(--ev-black);
	color: var(--ev-text);
	-webkit-font-smoothing: antialiased;
}

::selection {
	background: var(--ev-gold);
	color: var(--ev-black);
}

/* ---- Buttons: embossed gold plates -------------------------------------- */
.ev-btn {
	display: inline-block;
	padding: 0.8rem 1.9rem;
	border-radius: 4px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: transform 180ms var(--ev-press), box-shadow 180ms var(--ev-ease);
	will-change: transform;
}
.ev-btn--gold {
	background: linear-gradient(160deg, var(--ev-gold-hi) 0%, var(--ev-gold) 45%, var(--ev-gold-shadow) 100%);
	color: var(--ev-black);
	box-shadow:
		inset 0 1px 0 rgba(255, 233, 168, 0.8),
		inset 0 -2px 3px rgba(74, 52, 6, 0.45),
		0 4px 14px rgba(0, 0, 0, 0.5);
	text-shadow: 0 1px 0 rgba(255, 233, 168, 0.4);
}
@media (hover: hover) and (pointer: fine) {
	.ev-btn--gold:hover {
		transform: translateY(-2px);
		box-shadow:
			inset 0 1px 0 rgba(255, 233, 168, 0.8),
			inset 0 -2px 3px rgba(74, 52, 6, 0.45),
			0 6px 20px rgba(0, 0, 0, 0.55),
			var(--ev-glow-gold);
	}
}
.ev-btn--gold:active {
	transform: translateY(1px) scale(0.985);
	box-shadow:
		inset 0 2px 6px rgba(74, 52, 6, 0.6),
		0 2px 6px rgba(0, 0, 0, 0.5);
}
.ev-btn--ghost {
	color: var(--ev-gold-hi);
	border: 1px solid var(--ev-gold-shadow);
	background: rgba(201, 162, 39, 0.06);
}
@media (hover: hover) and (pointer: fine) {
	.ev-btn--ghost:hover {
		transform: translateY(-2px);
		box-shadow: var(--ev-glow-gold);
		border-color: var(--ev-gold);
	}
}
.ev-btn--ghost:active {
	transform: translateY(1px) scale(0.985);
}
.wp-block-button__link { /* WP buttons inherit the embossed treatment */
	transition: transform 180ms var(--ev-press), box-shadow 180ms var(--ev-ease);
	box-shadow:
		inset 0 1px 0 rgba(255, 233, 168, 0.8),
		inset 0 -2px 3px rgba(74, 52, 6, 0.45),
		0 4px 14px rgba(0, 0, 0, 0.5);
}
.wp-block-button__link:active {
	transform: translateY(1px) scale(0.985);
}

/* ---- Announcement bar (dynamic free-shipping nudge) ------------------------ */
.ev-announce {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	min-height: 2.3rem;
	padding: 0.35rem 1rem;
	background:
		linear-gradient(90deg, rgba(26, 11, 46, 0) 0%, rgba(59, 29, 94, 0.55) 50%, rgba(26, 11, 46, 0) 100%),
		rgba(10, 6, 18, 0.92);
	border-block-end: 1px solid rgba(201, 162, 39, 0.28);
	font-size: 0.8rem;
	letter-spacing: 0.01em;
	color: var(--ev-gold-hi);
	text-align: center;
}
.ev-announce__icon {
	flex: none;
	color: var(--ev-gold);
}
.ev-announce__msg {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: opacity 260ms var(--ev-ease);
}
.ev-announce__msg .woocommerce-Price-amount {
	color: #fff;
	font-weight: 600;
}
/* Free tier: warmer, with a slow gold shimmer sweeping the bar. */
.ev-announce--free {
	color: #fff;
	border-block-end-color: rgba(201, 162, 39, 0.5);
	background:
		linear-gradient(90deg, rgba(201, 162, 39, 0) 0%, rgba(201, 162, 39, 0.22) 50%, rgba(201, 162, 39, 0) 100%),
		rgba(10, 6, 18, 0.92);
}
.ev-announce--free .ev-announce__msg {
	font-weight: 600;
	animation: ev-announce-glow 2.6s var(--ev-ease) infinite;
}
@keyframes ev-announce-glow {
	0%, 100% { text-shadow: 0 0 0 rgba(255, 233, 168, 0); }
	50% { text-shadow: 0 0 14px rgba(255, 233, 168, 0.55); }
}
.ev-announce__msg.is-swapping { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
	.ev-announce--free .ev-announce__msg { animation: none; }
}

/* ---- News ticker (auto-pulls latest products) ---------------------------- */
.ev-ticker {
	display: flex;
	align-items: stretch;
	overflow: hidden;
	background: rgba(10, 6, 18, 0.88);
	border-block-end: 1px solid rgba(201, 162, 39, 0.18);
	font-size: 0.82rem;
}
.ev-ticker__label {
	flex: none;
	display: inline-flex;
	align-items: center;
	padding: 0.4rem clamp(0.8rem, 2vw, 1.35rem);
	background: linear-gradient(160deg, var(--ev-gold-hi), var(--ev-gold) 60%, var(--ev-gold-shadow));
	color: var(--ev-black);
	font-family: "Cinzel", "Zain", serif;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
}
.ev-ticker__viewport {
	position: relative;
	flex: 1 1 auto;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.ev-ticker__track {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	will-change: transform;
	animation: ev-ticker-scroll 45s linear infinite;
}
.ev-ticker__group {
	display: inline-flex;
	align-items: center;
}
.ev-ticker:hover .ev-ticker__track,
.ev-ticker:focus-within .ev-ticker__track {
	animation-play-state: paused;
}
.ev-ticker__item {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.4rem 0;
	color: var(--ev-gold-hi);
	text-decoration: none;
}
.ev-ticker__name { color: var(--ev-gold-hi); }
a.ev-ticker__item:hover .ev-ticker__name {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.ev-ticker__price { color: #fff; font-weight: 600; }
.ev-ticker__price .woocommerce-Price-amount { color: #fff; }
.ev-ticker__sep {
	padding: 0 0.85rem;
	color: var(--ev-gold);
	opacity: 0.6;
}
@keyframes ev-ticker-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
[dir="rtl"] .ev-ticker__track { animation-name: ev-ticker-scroll-rtl; }
@keyframes ev-ticker-scroll-rtl {
	from { transform: translateX(0); }
	to { transform: translateX(50%); }
}
@media (prefers-reduced-motion: reduce) {
	.ev-ticker__track { animation: none; }
	.ev-ticker__viewport { overflow-x: auto; }
}

/* ---- Header -------------------------------------------------------------- */
.ev-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 60;
	background: rgba(10, 6, 18, 0.72);
	-webkit-backdrop-filter: blur(12px) saturate(1.1);
	backdrop-filter: blur(12px) saturate(1.1);
	border-block-end: 1px solid rgba(201, 162, 39, 0.18);
	transition: background 300ms var(--ev-ease), border-color 300ms var(--ev-ease);
}
.ev-header.is-scrolled {
	background: rgba(10, 6, 18, 0.94);
	border-block-end-color: rgba(201, 162, 39, 0.32);
}
.ev-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 2vw, 1.5rem);
	padding: 0.75rem clamp(1rem, 4vw, 2.5rem);
}
.ev-header__brand {
	font-family: "Cinzel", "Zain", serif;
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: 0.14em;
	color: var(--ev-gold-hi);
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	white-space: nowrap;
}
.ev-header__brand small {
	font-size: 0.6em;
	letter-spacing: 0.2em;
	color: var(--ev-gold);
}
.ev-header__brand-mark {
	color: var(--ev-gold);
	text-shadow: var(--ev-glow-gold);
}

/* Primary nav (desktop) */
.ev-nav {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.4vw, 2.2rem);
	margin-inline: auto;
}
.ev-nav__link {
	position: relative;
	font-size: 0.82rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ev-text-dim);
	text-decoration: none;
	padding-block: 0.4rem;
	transition: color 200ms var(--ev-ease);
}
.ev-nav__link::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--ev-gold), transparent);
	transform: scaleX(0);
	transition: transform 240ms var(--ev-ease);
}
@media (hover: hover) and (pointer: fine) {
	.ev-nav__link:hover { color: var(--ev-gold-hi); }
	.ev-nav__link:hover::after { transform: scaleX(1); }
}
.ev-nav__link:focus-visible { color: var(--ev-gold-hi); }

/* Actions cluster */
.ev-header__actions {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}
.ev-icon-btn {
	position: relative;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--ev-gold);
	cursor: pointer;
	text-decoration: none;
	transition: color 200ms var(--ev-ease), background 200ms var(--ev-ease);
}
@media (hover: hover) and (pointer: fine) {
	.ev-icon-btn:hover {
		color: var(--ev-gold-hi);
		background: rgba(201, 162, 39, 0.1);
	}
}
.ev-icon-btn:active { transform: scale(0.94); }

/* Language switcher — gold EN / ع toggle */
.ev-lang {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-inline-end: 0.15rem;
	padding: 2px;
	border: 1px solid rgba(201, 162, 39, 0.4);
	border-radius: 999px;
	background: rgba(10, 6, 18, 0.4);
}
.ev-lang__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 26px;
	padding: 0 9px;
	border-radius: 999px;
	color: var(--ev-gold);
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.03em;
	text-decoration: none;
	transition: color 200ms var(--ev-ease), background 200ms var(--ev-ease);
}
.ev-lang__btn[lang="ar"] { font-size: 1.05rem; }
.ev-lang__btn.is-current {
	background: linear-gradient(160deg, var(--ev-gold-hi), var(--ev-gold) 60%, var(--ev-gold-shadow));
	color: var(--ev-black);
}
@media (hover: hover) and (pointer: fine) {
	.ev-lang__btn:not(.is-current):hover {
		color: var(--ev-gold-hi);
		background: rgba(201, 162, 39, 0.1);
	}
}
.ev-lang__btn:active { transform: scale(0.94); }

/* Cart count badge */
.ev-cart-count {
	position: absolute;
	inset-block-start: 2px;
	inset-inline-end: 0;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 99px;
	background: linear-gradient(160deg, var(--ev-gold-hi), var(--ev-gold) 60%, var(--ev-gold-shadow));
	color: #0a0612;
	font-size: 0.62rem;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
	box-shadow: 0 0 10px rgba(201, 162, 39, 0.5);
	transition: transform 240ms var(--ev-press), opacity 200ms var(--ev-ease);
}
.ev-cart-count.is-empty {
	opacity: 0;
	transform: scale(0.4);
}
.ev-cart-count.is-bumped {
	animation: ev-cart-bump 360ms var(--ev-press);
}
@keyframes ev-cart-bump {
	0% { transform: scale(1); }
	40% { transform: scale(1.35); }
	100% { transform: scale(1); }
}

/* Inline product search */
.ev-search {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0.6rem;
	max-height: 0;
	padding-inline: clamp(1rem, 4vw, 2.5rem);
	overflow: hidden;
	border-block-start: 1px solid transparent;
	transition: max-height 320ms var(--ev-ease), padding-block 320ms var(--ev-ease), border-color 320ms var(--ev-ease);
}
.ev-search.is-open {
	max-height: 4rem;
	padding-block: 0.8rem;
	border-block-start-color: rgba(201, 162, 39, 0.18);
}
.ev-search__icon { color: var(--ev-gold); }
.ev-search__input {
	width: 100%;
	background: none;
	border: 0;
	color: var(--ev-text);
	font: inherit;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
}
.ev-search__input::placeholder { color: var(--ev-text-dim); }
.ev-search__input:focus { outline: none; }
.ev-search__close {
	background: none;
	border: 0;
	color: var(--ev-text-dim);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	padding: 0 0.3rem;
}
.ev-search__close:hover { color: var(--ev-gold); }

/* Menu toggle (hamburger) — opens the category drawer on all breakpoints */
.ev-menu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none; /* keep the full 44px hit area; never let the header row shrink it */
	width: 44px;
	height: 44px;
	background: none;
	border: 0;
	color: var(--ev-gold);
	cursor: pointer;
	padding: 0;
}
.ev-menu-toggle__bars {
	display: grid;
	gap: 5px;
	width: 22px;
}
.ev-menu-toggle__bars i {
	display: block;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 260ms var(--ev-ease), opacity 200ms var(--ev-ease);
	transform-origin: center;
}
.ev-menu-toggle[aria-expanded="true"] .ev-menu-toggle__bars i:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.ev-menu-toggle[aria-expanded="true"] .ev-menu-toggle__bars i:nth-child(2) {
	opacity: 0;
}
.ev-menu-toggle[aria-expanded="true"] .ev-menu-toggle__bars i:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Responsive: collapse nav into the overlay below the desktop breakpoint */
@media (max-width: 980px) {
	.ev-nav { display: none; }
	.ev-menu-toggle { display: flex; }
	.ev-header__brand { margin-inline: auto; }
}
@media (max-width: 480px) {
	/* Tighten the header so brand + language switcher + search + account + cart
	   fit without horizontal overflow once the gold EN/ع toggle is in the row. */
	.ev-header__inner { gap: 0.28rem; padding-inline: 0.7rem; }
	.ev-header__brand { font-size: 0.92rem; letter-spacing: 0.06em; }
	.ev-icon-btn { width: 34px; height: 34px; }
	.ev-lang { margin-inline-end: 0; padding: 1px; }
	/* height lifts the tap target to ~34px; keep the original narrow width so the
	   header actions row (lang + search + cart) still fits 390px without overflow. */
	.ev-lang__btn { min-width: 26px; height: 34px; padding: 0 6px; font-size: 0.72rem; }
	.ev-lang__btn[lang="ar"] { font-size: 0.95rem; }
	.ev-ticker { font-size: 0.78rem; }
	.ev-ticker__label { font-size: 0.6rem; padding-inline: 0.7rem; }
}
@media (max-width: 360px) {
	.ev-header__brand small { display: none; }
}

/* ---- Countdown timer (offers / sales) ------------------------------------- */
.ev-countdown {
	display: grid;
	justify-items: center;
	gap: 0.9rem;
	padding: clamp(1.5rem, 4vw, 2.5rem) 1rem;
	text-align: center;
}
.ev-countdown__title {
	margin: 0;
	font-family: "Cinzel", "Zain", serif;
	font-size: clamp(0.95rem, 2.4vw, 1.2rem);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ev-gold-hi);
}
.ev-countdown__grid {
	display: flex;
	align-items: center;
	gap: clamp(0.4rem, 1.5vw, 0.9rem);
}
.ev-countdown__cell {
	display: grid;
	justify-items: center;
	gap: 0.45rem;
	min-width: clamp(3.4rem, 12vw, 4.6rem);
	padding: clamp(0.6rem, 2vw, 0.9rem) clamp(0.5rem, 2vw, 0.8rem);
	border-radius: 10px;
	border: 1px solid rgba(201, 162, 39, 0.4);
	background:
		linear-gradient(180deg, rgba(59, 29, 94, 0.35), rgba(10, 6, 18, 0.55));
	box-shadow:
		inset 0 1px 0 rgba(255, 233, 168, 0.12),
		0 6px 20px rgba(0, 0, 0, 0.35);
}
.ev-countdown__num {
	font-family: "Cinzel", serif;
	font-weight: 700;
	font-size: clamp(1.6rem, 6vw, 2.6rem);
	line-height: 1;
	color: var(--ev-gold-hi);
	font-variant-numeric: tabular-nums;
	text-shadow: 0 0 14px rgba(201, 162, 39, 0.3);
	transition: transform 200ms var(--ev-press);
}
.ev-countdown__num.is-tick {
	transform: translateY(-2px) scale(1.06);
}
.ev-countdown__label {
	font-size: 0.62rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ev-text-dim);
}
.ev-countdown__sep {
	font-family: "Cinzel", serif;
	font-size: clamp(1.2rem, 4vw, 1.8rem);
	color: var(--ev-gold);
	transform: translateY(-0.5rem);
	animation: ev-countdown-blink 1s steps(1) infinite;
}
@keyframes ev-countdown-blink {
	50% { opacity: 0.25; }
}
.ev-countdown.is-expired .ev-countdown__grid {
	display: none;
}
.ev-countdown.is-expired .ev-countdown__title {
	color: var(--ev-text-dim);
	letter-spacing: 0.1em;
}
@media (prefers-reduced-motion: reduce) {
	.ev-countdown__num.is-tick { transform: none; }
	.ev-countdown__sep { animation: none; }
}
.ev-offer-band {
	position: relative;
	margin-block: clamp(1.5rem, 5vw, 3rem);
	border-block: 1px solid rgba(201, 162, 39, 0.22);
	background:
		radial-gradient(ellipse 60% 120% at 50% 50%, rgba(59, 29, 94, 0.4), transparent 70%);
}
/* No active drop → the countdown shortcode renders nothing; hide the band
   entirely so an empty offer strip never lingers on the homepage. */
.ev-offer-band:not(:has(.ev-countdown)) {
	display: none;
}
/* Keep all four cells on one row on the narrowest phones. */
@media (max-width: 420px) {
	.ev-countdown { padding-inline: 0.5rem; }
	.ev-countdown__grid { gap: 0.3rem; }
	.ev-countdown__cell {
		min-width: 0;
		flex: 1 1 0;
		padding: 0.55rem 0.35rem;
	}
	.ev-countdown__num { font-size: 1.5rem; }
	.ev-countdown__label { font-size: 0.55rem; letter-spacing: 0.1em; }
}

/* ---- Slide-in category sidebar (drawer) --------------------------------- */
.ev-drawer-backdrop {
	position: fixed;
	inset: 0;
	z-index: 70;
	background: rgba(10, 6, 18, 0.55);
	-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 280ms var(--ev-ease), visibility 0s 280ms;
}
.ev-drawer-backdrop.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 280ms var(--ev-ease);
}
.ev-menu {
	position: fixed;
	inset-block: 0;
	inset-inline-start: 0;
	z-index: 80;
	display: flex;
	flex-direction: column;
	width: min(86vw, 360px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background:
		linear-gradient(180deg, rgba(59, 29, 94, 0.5), rgba(10, 6, 18, 0.97) 38%),
		var(--ev-black);
	border-inline-end: 1px solid rgba(201, 162, 39, 0.28);
	box-shadow: 0 0 60px rgba(0, 0, 0, 0.55);
	visibility: hidden;
	transform: translateX(-100%);
	transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 300ms;
}
/* Logical inset/border already dock the drawer to the right in RTL; only the
   physical translate needs flipping so it hides off the right edge. */
[dir="rtl"] .ev-menu {
	transform: translateX(100%);
}
.ev-menu.is-open {
	visibility: visible;
	transform: translateX(0);
	transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
}
.ev-menu__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.1rem 1.25rem 0.9rem;
	border-block-end: 1px solid rgba(201, 162, 39, 0.16);
}
.ev-menu__title {
	font-family: "Cinzel", "Zain", serif;
	font-size: 0.78rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ev-gold-hi);
}
.ev-menu__close {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--ev-gold);
	cursor: pointer;
	transition: background 200ms var(--ev-ease), transform 160ms var(--ev-press);
}
.ev-menu__close:hover { background: rgba(201, 162, 39, 0.12); }
.ev-menu__close:active { transform: scale(0.92); }
.ev-menu__nav {
	flex: 1 1 auto;
	padding: 0.75rem 0.7rem 0;
}
.ev-menu__list {
	list-style: none;
	margin: 0 0 0.4rem;
	padding: 0;
	display: grid;
	gap: 0.1rem;
}
.ev-menu__item {
	opacity: 0;
	transform: translateX(-14px);
}
[dir="rtl"] .ev-menu__item { transform: translateX(14px); }
.ev-menu.is-open .ev-menu__item {
	animation: ev-drawer-item 360ms var(--ev-ease) forwards;
	animation-delay: calc(45ms * var(--i, 0) + 90ms);
}
@keyframes ev-drawer-item {
	to { opacity: 1; transform: translateX(0); }
}
.ev-menu__item a {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.65rem 0.8rem;
	border-radius: 12px;
	color: var(--ev-text);
	text-decoration: none;
	font-size: 1rem;
	letter-spacing: 0.01em;
	transition: background 200ms var(--ev-ease), color 200ms var(--ev-ease);
}
@media (hover: hover) and (pointer: fine) {
	.ev-menu__item a:hover { background: rgba(201, 162, 39, 0.1); color: var(--ev-gold-hi); }
}
.ev-menu__item a:focus-visible { background: rgba(201, 162, 39, 0.1); color: var(--ev-gold-hi); outline: none; }
.ev-menu__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	border: 1px solid rgba(201, 162, 39, 0.3);
	background: linear-gradient(180deg, rgba(59, 29, 94, 0.35), rgba(10, 6, 18, 0.5));
	color: var(--ev-gold);
	transition: border-color 200ms var(--ev-ease), color 200ms var(--ev-ease);
}
.ev-menu__item a:hover .ev-menu__icon,
.ev-menu__item a:focus-visible .ev-menu__icon {
	border-color: var(--ev-gold);
	color: var(--ev-gold-hi);
}
.ev-menu__sep {
	height: 1px;
	margin: 0.55rem 0.85rem;
	background: var(--ev-rule);
	opacity: 0.55;
}
.ev-menu__item--wholesale a { color: var(--ev-gold-hi); font-weight: 600; }
.ev-menu__foot {
	display: flex;
	gap: 1.5rem;
	padding: 1rem 1.55rem 1.4rem;
	border-block-start: 1px solid rgba(201, 162, 39, 0.14);
}
.ev-menu__foot a {
	color: var(--ev-text-dim);
	text-decoration: none;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.72rem;
	padding-block: 0.6rem; /* lift the overlay social links to a ~40px tap target */
	transition: color 200ms var(--ev-ease);
}
.ev-menu__foot a:hover { color: var(--ev-gold); }
@media (prefers-reduced-motion: reduce) {
	.ev-menu { transform: none; opacity: 0; transition: opacity 140ms linear, visibility 0s 140ms; }
	.ev-menu.is-open { opacity: 1; transition: opacity 140ms linear; }
	.ev-menu__item { animation: none; opacity: 1; transform: none; }
	.ev-drawer-backdrop { transition: opacity 140ms linear, visibility 0s 140ms; }
}

/* ---- Intro overlay ------------------------------------------------------- */
.ev-intro {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: var(--ev-black);
	display: grid;
	place-items: center;
}
.ev-intro__video {
	width: 100%;
	height: 100%;
	object-fit: cover; /* mobile: center crop — door is composed in the safe zone */
}
.ev-intro__skip {
	position: absolute;
	inset-block-end: clamp(1.5rem, 5vh, 3rem);
	inset-inline-end: clamp(1.5rem, 5vw, 3rem);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.5rem;
	border: 1px solid rgba(201, 162, 39, 0.6);
	border-radius: 4px;
	background: rgba(10, 6, 18, 0.55);
	color: var(--ev-gold-hi);
	font: 600 0.9rem/1 inherit;
	letter-spacing: 0.08em;
	cursor: pointer;
	opacity: 0;
	animation: ev-skip-in 400ms var(--ev-ease) 1s forwards; /* visible from second 1 */
}
@keyframes ev-skip-in {
	to { opacity: 1; }
}
.ev-intro__skip:hover {
	box-shadow: var(--ev-glow-gold);
}
.ev-intro.is-leaving {
	animation: ev-intro-out 400ms var(--ev-ease) forwards; /* golden dissolve */
}
@keyframes ev-intro-out {
	to { opacity: 0; }
}
.ev-intro-seen .ev-intro,
.ev-intro[hidden] {
	display: none;
}

/* ---- Sections ------------------------------------------------------------ */
.ev-home {
	padding-block-start: 0;
}
/* Inner pages: breathing room below the sticky header (covers our templates
   and the block templates WooCommerce ships for cart/checkout/shop) */
main:not(.ev-home) {
	padding-block-start: clamp(2rem, 5vh, 3.5rem);
	padding-block-end: 2rem;
}
.ev-section {
	padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 5vw, 3rem);
	max-width: 1200px;
	margin-inline: auto;
}
.ev-section__title {
	text-align: center;
	font-size: clamp(1.6rem, 4.5vw, 2.6rem);
	margin-block: 0 0.8rem;
}
.ev-section__rule {
	height: 1px;
	max-width: 320px;
	margin: 0 auto 2.5rem;
	background: var(--ev-rule);
}

/* ---- Hero ----------------------------------------------------------------- */
.ev-hero {
	min-height: 92svh;
	display: grid;
	align-content: center;
	justify-items: center;
	text-align: center;
	gap: 1.2rem;
	padding: clamp(5rem, 12vh, 8rem) clamp(1rem, 5vw, 3rem) clamp(3rem, 8vh, 5rem);
	position: relative;
	overflow: hidden;
}
/* Cosmic Vault Hall: violet nebula dome fading into the near-black page bg. */
.ev-hero--hall {
	background: radial-gradient(130% 100% at 50% 6%, #341a63 0%, var(--ev-violet-deep, #1a0b2e) 40%, var(--ev-black, #0a0612) 78%);
}
.ev-hero__rays {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(255, 233, 168, 0.16) 0%, rgba(201, 162, 39, 0.05) 45%, transparent 70%);
	pointer-events: none;
	z-index: 0;
}
/* 3D hero stage: sits above the rays, below the copy. Decorative only. */
.ev-hero__stage {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	transition: opacity 900ms var(--ev-ease);
}
.ev-hero__stage.is-ready { opacity: 1; }
.ev-hero__canvas {
	display: block;
	width: 100%;
	height: 100%;
}
/* Vault-ring loader, shown while the 3D scene initialises. */
.ev-hero__loader {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	transition: opacity 500ms var(--ev-ease);
}
.ev-hero__stage.is-ready .ev-hero__loader {
	opacity: 0;
	visibility: hidden;
}
.ev-hero__ring {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: 2px solid rgba(201, 162, 39, 0.18);
	border-top-color: var(--ev-gold-hi);
	border-right-color: var(--ev-gold);
	box-shadow: 0 0 22px rgba(201, 162, 39, 0.35), inset 0 0 18px rgba(201, 162, 39, 0.12);
	animation: ev-ring-spin 1.1s linear infinite;
}
@keyframes ev-ring-spin { to { transform: rotate(360deg); } }

/* ---- Cosmic Vault Hall hero layers ---------------------------------------- */
.ev-hero__stage--hall { opacity: 1; } /* CSS-driven visuals — no JS gate */
.ev-hero__par { position: absolute; inset: 0; will-change: transform; }
.ev-hero__neb {
	position: absolute;
	width: 60vmin;
	height: 60vmin;
	border-radius: 50%;
	filter: blur(40px);
	opacity: 0.5;
}
.ev-hero__neb--1 { left: 12%; top: 22%; background: radial-gradient(circle, #6a3fb0, transparent 70%); }
.ev-hero__neb--2 { right: 8%; bottom: 12%; background: radial-gradient(circle, #244a8f, transparent 70%); }
.ev-hero__dust { position: absolute; inset: 0; width: 100%; height: 100%; }
.ev-hero__beams {
	position: absolute;
	left: 50%;
	top: -25%;
	width: 140%;
	height: 120%;
	transform: translateX(-50%);
	transform-origin: 50% 0%;
	filter: blur(2px);
	background: conic-gradient(from 180deg at 50% 0%,
		transparent 0deg, rgba(255, 233, 168, 0.10) 6deg, transparent 12deg,
		transparent 22deg, rgba(255, 233, 168, 0.07) 27deg, transparent 33deg,
		transparent 44deg, rgba(79, 195, 247, 0.06) 49deg, transparent 55deg,
		transparent 305deg, rgba(255, 233, 168, 0.07) 311deg, transparent 317deg,
		transparent 327deg, rgba(255, 233, 168, 0.10) 333deg, transparent 339deg);
	animation: ev-hall-sway 14s ease-in-out infinite;
}
@keyframes ev-hall-sway {
	0%, 100% { transform: translateX(-50%) rotate(-2deg); }
	50% { transform: translateX(-50%) rotate(2deg); }
}
.ev-hero__sigil {
	position: absolute;
	left: 50%;
	top: 11%;
	transform: translateX(-50%);
	width: min(20vmin, 150px);
	color: var(--ev-gold-hi);
	opacity: 0;
	animation: ev-hall-sigil-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}
.ev-hero__sigil svg {
	width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 0 14px rgba(255, 233, 168, 0.55));
	animation: ev-hall-glow 5s ease-in-out infinite 1.3s;
}
@keyframes ev-hall-sigil-in { to { opacity: 0.92; } }
@keyframes ev-hall-glow {
	0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 233, 168, 0.4)); }
	50% { filter: drop-shadow(0 0 24px rgba(255, 233, 168, 0.85)); }
}

@media (prefers-reduced-motion: reduce) {
	/* Keep the old WebGL-card stage hidden, but keep the static Hall visible
	   (no motion): god-rays, nebula and sigil hold without animating. */
	.ev-hero__stage:not(.ev-hero__stage--hall) { display: none; }
	.ev-hero__beams, .ev-hero__sigil, .ev-hero__sigil svg { animation: none; }
	.ev-hero__sigil { opacity: 0.9; }
	.ev-hero__dust { display: none; }
}

/* ---- "Living Eclipse" parallax hero --------------------------------------- */
/* Background eclipse photo, sliced into depth layers by exovault.js and parallaxed
   on pointer move. The stage (z-1) holds the canvas layers + vignette; copy is z-2. */
.ev-hero--ring { background: #05010f; }
.ev-hero__ring-stage {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}
/* JS injects these <canvas> layers into the stage. */
.ev-hero__ring-layer {
	position: absolute;
	top: -5%;
	left: -5%;
	width: 110%;
	height: 110%;
	object-fit: cover;
	will-change: transform;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	pointer-events: none;
}
.ev-hero__ring-layer.l3 { animation: ev-ring-glow 4s ease-in-out infinite; }
.ev-hero__ring-layer.l4 { opacity: 0.9; }
.ev-hero__ring-layer.l4.is-flash {
	filter: brightness(2.4) saturate(1.4) drop-shadow(0 0 6px rgba(79, 195, 247, 0.8));
	transition: filter 0.06s ease-out;
}
.ev-hero__ring-vig {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	background: radial-gradient(120% 90% at 50% 46%, transparent 52%, rgba(5, 1, 15, 0.55) 100%);
}
/* Copy wrapper: keep the original grid rhythm + sit above the stage, parallax-ready. */
.ev-hero__ring-copy {
	position: relative;
	z-index: 2;
	display: grid;
	justify-items: center;
	gap: 1.2rem;
	will-change: transform;
	transform: translate3d(0, 0, 0);
}
@keyframes ev-ring-glow {
	0%, 100% { filter: brightness(0.92) saturate(1); }
	50% { filter: brightness(1.28) saturate(1.12); }
}
@media (prefers-reduced-motion: reduce) {
	.ev-hero__ring-layer.l3 { animation: none; }
}

/* Keep hero copy above the 3D stage. */
.ev-hero__kicker,
.ev-hero__title,
.ev-hero__sub,
.ev-hero__cta { position: relative; z-index: 2; }
.ev-hero__kicker {
	color: var(--ev-cyan);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-size: 0.75rem;
	margin: 0;
}
.ev-hero__title {
	font-size: clamp(2.4rem, 9vw, 5.5rem);
	margin: 0;
	color: var(--ev-gold-hi);
	/* Engraved-metal depth without gradient-clipped text */
	text-shadow:
		0 1px 0 rgba(139, 105, 20, 0.55),
		0 2px 3px rgba(0, 0, 0, 0.55),
		0 0 32px rgba(201, 162, 39, 0.25);
}
.ev-hero__sub {
	max-width: 56ch;
	color: var(--ev-text-dim);
	margin: 0;
	font-size: clamp(1rem, 2.2vw, 1.15rem);
}
.ev-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	margin-block-start: 0.8rem;
}

/* ---- Category portals (vault chamber doors) ------------------------------- */
.ev-portals__grid {
	display: grid;
	gap: 1.2rem;
	grid-template-columns: 1fr;
}
@media (min-width: 640px) {
	.ev-portals__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.ev-portals__grid { grid-template-columns: repeat(4, 1fr); }
}
.ev-portal {
	display: grid;
	gap: 0.5rem;
	justify-items: center;
	text-align: center;
	padding: 2.2rem 1.4rem;
	border: 1px solid rgba(201, 162, 39, 0.35);
	border-radius: 10px;
	background:
		radial-gradient(ellipse 90% 70% at 50% 0%, rgba(59, 29, 94, 0.5), transparent 70%),
		rgba(26, 11, 46, 0.45);
	text-decoration: none;
	color: var(--ev-text);
	transition: transform 240ms var(--ev-ease), box-shadow 240ms var(--ev-ease), border-color 240ms var(--ev-ease);
	will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
	.ev-portal:hover {
		transform: translateY(-6px);
		border-color: var(--ev-gold);
		box-shadow: var(--ev-glow-gold), inset 0 0 30px rgba(201, 162, 39, 0.07);
	}
}
.ev-portal__glyph {
	position: relative;
	width: 104px;
	height: 104px;
	display: grid;
	place-items: center;
	font-size: 1.9rem;
	color: var(--ev-gold);
	text-shadow: var(--ev-glow-gold);
}
/* 3D chamber object canvas overlays the SVG glyph; SVG is the fallback. */
.ev-portal__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 600ms var(--ev-ease);
	pointer-events: none;
}
.ev-portal__glyph svg {
	transition: opacity 400ms var(--ev-ease);
}
.ev-portal__glyph.is-3d .ev-portal__canvas { opacity: 1; }
.ev-portal__glyph.is-3d svg { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
	.ev-portal__canvas { display: none; }
}
.ev-portal__name {
	font-family: "Cinzel", "Zain", serif;
	font-weight: 700;
	font-size: 1.2rem;
	color: var(--ev-gold-hi);
	letter-spacing: 0.06em;
}
.ev-portal__desc {
	font-size: 0.88rem;
	color: var(--ev-text-dim);
}

/* ---- New Arrivals badge (gold, over product image) ------------------------- */
li.product,
.single-product div.product { position: relative; }
.ev-badge--new {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-start: 12px;
	z-index: 3;
	font-family: "Cinzel", "Zain", serif;
	font-weight: 700;
	font-size: 0.62rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.38em 0.7em;
	border-radius: 4px;
	color: #1a0b2e;
	background: linear-gradient(180deg, #ffe9a8 0%, #c9a227 58%, #8b6914 100%);
	border: 1px solid rgba(255, 233, 168, 0.6);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
	pointer-events: none;
	white-space: nowrap;
}
[dir="rtl"] .ev-badge--new { letter-spacing: 0; }

.ev-badge--soldout {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-end: 12px;
	z-index: 4;
	font-family: "Cinzel", "Zain", serif;
	font-weight: 700;
	font-size: 0.62rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.38em 0.7em;
	border-radius: 4px;
	color: #ffdada;
	background: linear-gradient(180deg, rgba(46, 14, 14, 0.92) 0%, rgba(22, 7, 7, 0.92) 100%);
	border: 1px solid rgba(220, 90, 90, 0.5);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(4px);
	pointer-events: none;
	white-space: nowrap;
}
[dir="rtl"] .ev-badge--soldout { letter-spacing: 0; }

/* ---- Sold-out stamp: dim the image + diagonal stamp over it -------------- */
li.product.outofstock img.wp-post-image,
li.product.outofstock img,
.product.outofstock .woocommerce-product-gallery img {
	opacity: 0.6;
	filter: grayscale(0.12);
	transition: opacity 0.3s var(--ev-ease, ease);
}
li.product.outofstock { position: relative; }
.product.outofstock .woocommerce-product-gallery { position: relative; }
li.product.outofstock::after,
.product.outofstock .woocommerce-product-gallery::after {
	content: "SOLD OUT";
	position: absolute;
	top: 42%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-11deg);
	font-family: "Cinzel", "Zain", serif;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #ffe0e0;
	background: linear-gradient(180deg, rgba(150, 28, 28, 0.92) 0%, rgba(90, 12, 12, 0.94) 100%);
	border: 2px solid rgba(255, 210, 210, 0.85);
	padding: 0.32em 0.9em;
	border-radius: 5px;
	font-size: clamp(0.62rem, 1.4vw, 1.05rem);
	white-space: nowrap;
	z-index: 6;
	pointer-events: none;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
}
[dir="rtl"] li.product.outofstock::after,
[dir="rtl"] .product.outofstock .woocommerce-product-gallery::after {
	content: "نفذت الكمية";
	letter-spacing: 0;
}

/* ---- Single product: consistent summary rhythm ------------------------- */
.ev-product .summary.entry-summary,
.ev-product .entry-summary {
	display: flex;
	flex-direction: column;
	gap: 0.95rem;
}
.ev-product .entry-summary > * { margin: 0 !important; }
.ev-product .entry-summary .product_title { line-height: 1.15; }
.ev-product .entry-summary .price { font-size: 1.6rem; }
.ev-product .entry-summary .stock { font-weight: 600; }
.ev-product .entry-summary .product_meta {
	padding-top: 1rem;
	border-top: 1px solid rgba(201, 162, 39, 0.22);
}

/* ---- Smooth cross-document page transitions (progressive enhancement) --- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
}

/* ---- Accessibility: visible keyboard focus on every interactive element -- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.ev-portal:focus-visible,
.ev-btn:focus-visible {
	outline: 2px solid #ffe9a8;
	outline-offset: 3px;
	border-radius: 4px;
}
/* Don't strip focus for keyboard users even where outlines are reset elsewhere. */
:focus-visible { outline-color: #ffe9a8; }

/* Skip-to-content link — visible only on keyboard focus. */
.ev-skip-link {
	position: absolute;
	left: 50%;
	top: -64px;
	transform: translateX(-50%);
	z-index: 1000;
	background: #1a0b2e;
	color: #ffe9a8;
	padding: 0.65em 1.2em;
	border: 1px solid var(--ev-gold, #c9a227);
	border-radius: 0 0 6px 6px;
	text-decoration: none;
	transition: top 0.2s var(--ev-ease, ease);
}
.ev-skip-link:focus,
.ev-skip-link:focus-visible { top: 0; }

/* Trust / secure-checkout badges on cart + checkout. */
.ev-trust-badges {
	list-style: none;
	margin: 1.3rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.85rem;
	justify-content: center;
	align-items: center;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.72);
}
.ev-trust-badges li {
	padding: 0.36em 0.72em;
	border: 1px solid rgba(201, 162, 39, 0.3);
	border-radius: 4px;
	background: rgba(201, 162, 39, 0.06);
	white-space: nowrap;
}

/* ---- Premium product-card motion: pointer-tracked 3D tilt + lift + gold glow.
   JS (footer) writes the transform; CSS retargets it smoothly and adds the glow.
   Transform/opacity only; gated to fine-pointer hover; reduced-motion exempt. -- */
@media (hover: hover) and (pointer: fine) {
	ul.products li.product {
		transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
			box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
		transform-style: preserve-3d;
	}
	ul.products li.product:hover {
		box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5),
			0 0 0 1px rgba(201, 162, 39, 0.55),
			0 0 28px rgba(201, 162, 39, 0.28);
	}
}
@media (prefers-reduced-motion: reduce) {
	ul.products li.product { transition: none !important; transform: none !important; }
}

/* ---- Trust strip ----------------------------------------------------------- */
.ev-trust__strip {
	list-style: none;
	margin: 0;
	padding: 1.8rem 1rem;
	display: grid;
	gap: 1.4rem;
	grid-template-columns: 1fr;
	border-block: 1px solid rgba(201, 162, 39, 0.25);
	text-align: center;
}
@media (min-width: 640px) {
	.ev-trust__strip { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.ev-trust__strip { grid-template-columns: repeat(4, 1fr); }
}
.ev-trust__strip strong {
	display: block;
	color: var(--ev-gold-hi);
	font-family: "Cinzel", "Zain", serif;
	letter-spacing: 0.05em;
	margin-block-end: 0.25rem;
}
.ev-trust__strip span {
	color: var(--ev-text-dim);
	font-size: 0.88rem;
}

/* ---- Story teaser ----------------------------------------------------------- */
.ev-story-teaser__inner {
	text-align: center;
	max-width: 640px;
	margin-inline: auto;
	display: grid;
	gap: 1.2rem;
	justify-items: center;
	padding: clamp(2rem, 6vw, 4rem);
	border: 1px solid rgba(201, 162, 39, 0.3);
	border-radius: 12px;
	background:
		radial-gradient(ellipse 100% 80% at 50% 0%, rgba(59, 29, 94, 0.45), transparent 75%),
		rgba(10, 6, 18, 0.6);
}
.ev-story-teaser__inner p {
	color: var(--ev-text-dim);
	margin: 0;
}

/* ---- Social ------------------------------------------------------------------ */
.ev-social { text-align: center; }
.ev-social__sub { color: var(--ev-text-dim); }
.ev-treasures__placeholder {
	text-align: center;
	color: var(--ev-text-dim);
	font-style: italic;
}

/* ---- Product display cases (WooCommerce-ready) -------------------------------- */
.ev-case,
.wc-block-grid__product,
ul.products li.product {
	border: 1px solid rgba(201, 162, 39, 0.35);
	border-radius: 10px;
	background:
		linear-gradient(165deg, rgba(255, 255, 255, 0.05) 0%, transparent 40%),
		rgba(26, 11, 46, 0.45);
	box-shadow: inset 0 0 24px rgba(201, 162, 39, 0.05);
	transition: transform 240ms var(--ev-ease), box-shadow 240ms var(--ev-ease), border-color 240ms var(--ev-ease);
	will-change: transform;
	overflow: hidden;
}
@media (hover: hover) and (pointer: fine) {
	.ev-case:hover,
	.wc-block-grid__product:hover,
	ul.products li.product:hover {
		transform: translateY(-5px);
		border-color: var(--ev-gold);
		box-shadow: var(--ev-glow-gold), inset 0 0 24px rgba(201, 162, 39, 0.08);
	}
}

/* ---- The Vault: shop hall ----------------------------------------------------------- */
.ev-shop {
	padding-block-start: clamp(2rem, 5vh, 3.5rem);
}
.ev-shop__hall {
	text-align: center;
	display: grid;
	gap: 0.4rem;
	padding-inline: 1rem;
}
.ev-shop__title,
.ev-shop--chamber + .ev-shop__grid .woocommerce-products-header__title {
	font-size: clamp(2rem, 6vw, 3.4rem);
	margin: 0;
	color: var(--ev-gold-hi);
	text-shadow:
		0 1px 0 rgba(139, 105, 20, 0.55),
		0 2px 3px rgba(0, 0, 0, 0.55),
		0 0 32px rgba(201, 162, 39, 0.25);
}
.ev-shop__ar {
	font-family: "Zain", serif;
	color: var(--ev-gold);
	font-size: 1.1rem;
	margin: 0;
}
.ev-shop__grid .woocommerce-products-header {
	text-align: center;
	padding-block-end: 0.5rem;
}
.ev-shop__grid .woocommerce-products-header__title {
	font-size: clamp(2rem, 6vw, 3.4rem);
	color: var(--ev-gold-hi);
	margin: 0;
}

/* Chamber chips */
.ev-chambers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	padding: 1.4rem 1rem 0.4rem;
	max-width: 1200px;
	margin-inline: auto;
}
.ev-chambers a {
	padding: 0.45rem 1.1rem;
	border: 1px solid rgba(201, 162, 39, 0.4);
	border-radius: 4px;
	color: var(--ev-text-dim);
	text-decoration: none;
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	transition: color 180ms var(--ev-ease), border-color 180ms var(--ev-ease), background 180ms var(--ev-ease), box-shadow 180ms var(--ev-ease), transform 180ms var(--ev-ease);
}
.ev-chambers a:hover,
.ev-chambers a:focus-visible {
	color: var(--ev-gold-hi);
	border-color: var(--ev-gold);
	background: rgba(201, 162, 39, 0.08);
	transform: translateY(-2px);
	box-shadow: 0 0 16px rgba(201, 162, 39, 0.28);
}

/* Woo loop: glass display cases */
.ev-shop__grid {
	padding-inline: clamp(1rem, 4vw, 2rem);
}
.ev-shop__grid ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1.4rem;
	list-style: none;
	margin: 1.5rem 0 3rem;
	padding: 0;
}
.ev-shop__grid ul.products li.product {
	position: relative;
	display: grid;
	gap: 0.5rem;
	padding: 1rem 1rem 1.3rem;
	text-align: center;
	/* Neutralize Woo legacy float layout inside our grid */
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}
.ev-shop__grid ul.products li.product a img {
	width: 100%;
	height: auto;
	border-radius: 6px;
}
.ev-shop__grid .woocommerce-loop-product__title {
	font-family: "Cinzel", "Zain", serif;
	font-size: 1.02rem;
	color: var(--ev-gold-hi);
	line-height: 1.3;
}
.ev-shop__grid .price {
	color: var(--ev-text);
	font-weight: 600;
}
.ev-shop__grid .price del {
	color: var(--ev-text-dim);
	font-weight: 400;
}
.ev-shop__grid .price ins {
	text-decoration: none;
}
.ev-shop__grid ul.products .button {
	justify-self: center;
	padding: 0.55rem 1.4rem;
	border-radius: 4px;
	border: 0;
	cursor: pointer;
	font: 600 0.88rem/1 inherit;
	letter-spacing: 0.04em;
	background: linear-gradient(160deg, var(--ev-gold-hi) 0%, var(--ev-gold) 45%, var(--ev-gold-shadow) 100%);
	color: var(--ev-black);
	box-shadow:
		inset 0 1px 0 rgba(255, 233, 168, 0.8),
		inset 0 -2px 3px rgba(74, 52, 6, 0.45),
		0 3px 10px rgba(0, 0, 0, 0.5);
	transition: transform 160ms var(--ev-press), box-shadow 160ms var(--ev-ease);
	text-decoration: none;
}
.ev-shop__grid ul.products .button:active {
	transform: translateY(1px) scale(0.97);
}
.ev-shop__grid .onsale {
	position: absolute;
	inset-block-start: 1.4rem;
	inset-inline-start: 1.4rem;
	z-index: 2;
	padding: 0.3rem 0.7rem;
	border-radius: 3px;
	background: linear-gradient(160deg, var(--ev-gold-hi), var(--ev-gold) 60%, var(--ev-gold-shadow));
	color: var(--ev-black);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

/* Condition chip (PSA grade / Sealed) */
.ev-chip {
	position: absolute;
	inset-block-start: 1.4rem;
	inset-inline-end: 1.4rem;
	z-index: 2;
	padding: 0.3rem 0.65rem;
	border-radius: 3px;
	border: 1px solid var(--ev-gold);
	background: rgba(10, 6, 18, 0.8);
	color: var(--ev-gold-hi);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Sorting + result count + pagination, vault-dressed */
.ev-shop__grid .woocommerce-result-count {
	color: var(--ev-text-dim);
	font-size: 0.85rem;
}
.ev-shop__grid .woocommerce-ordering select {
	background: rgba(26, 11, 46, 0.6);
	border: 1px solid rgba(201, 162, 39, 0.4);
	border-radius: 4px;
	color: var(--ev-text);
	padding: 0.45rem 0.7rem;
	font: inherit;
}
/* Selectors are scoped through `ul.page-numbers li` so they outrank
   WooCommerce's own pagination CSS (which otherwise forces a white .current
   box and a bordered divider bar — the "double rectangle"). */
.ev-shop__grid .woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
	margin: 1rem 0 2.5rem;
	border: 0;
}
.ev-shop__grid .woocommerce-pagination ul.page-numbers li {
	margin: 0;
	padding: 0;
	border: 0;
	line-height: 0;
}
.ev-shop__grid .woocommerce-pagination ul.page-numbers li .page-numbers {
	display: grid;
	place-items: center;
	min-width: 46px;
	height: 46px;
	margin: 0;
	padding: 0 0.5rem;
	border-radius: 13px;
	border: 1px solid rgba(201, 162, 39, 0.32);
	background: rgba(10, 6, 18, 0.35);
	color: rgba(212, 175, 55, 0.82);
	font-weight: 300;
	letter-spacing: 0.12em;
	font-size: 0.95rem;
	text-decoration: none;
	transition: transform 280ms var(--ev-ease), color 280ms ease,
		border-color 280ms ease, box-shadow 280ms ease, background 280ms ease;
}
.ev-shop__grid .woocommerce-pagination ul.page-numbers li a.page-numbers:hover {
	transform: translateY(-4px);
	border-color: rgba(201, 162, 39, 0.75);
	color: var(--ev-gold-hi);
	background: rgba(26, 11, 46, 0.55);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45), 0 0 18px rgba(201, 162, 39, 0.3);
}
.ev-shop__grid .woocommerce-pagination ul.page-numbers li a.page-numbers:active {
	transform: translateY(-1px) scale(0.96);
}
.ev-shop__grid .woocommerce-pagination ul.page-numbers li a.page-numbers:focus-visible {
	outline: none;
	border-color: var(--ev-gold);
	box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.55);
}
.ev-shop__grid .woocommerce-pagination ul.page-numbers li span.current {
	background: linear-gradient(160deg, var(--ev-gold-hi) 0%, var(--ev-gold) 48%, var(--ev-gold-shadow) 100%);
	border-color: transparent;
	color: #1c1206;
	font-weight: 600;
	box-shadow: 0 0 22px rgba(201, 162, 39, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.55);
	animation: ev-pg-settle 520ms var(--ev-ease) both;
}
.ev-shop__grid .woocommerce-pagination ul.page-numbers li span.dots {
	border-color: transparent;
	background: transparent;
	color: rgba(212, 175, 55, 0.45);
	min-width: 24px;
}
.ev-shop__grid .woocommerce-pagination ul.page-numbers li .prev.page-numbers,
.ev-shop__grid .woocommerce-pagination ul.page-numbers li .next.page-numbers {
	font-size: 1.1rem;
	color: rgba(212, 175, 55, 0.9);
}
@keyframes ev-pg-settle {
	0%   { transform: scale(0.7); }
	60%  { transform: scale(1.06); }
	100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.ev-shop__grid .woocommerce-pagination ul.page-numbers li .page-numbers { transition: none; }
	.ev-shop__grid .woocommerce-pagination ul.page-numbers li a.page-numbers:hover { transform: none; }
	.ev-shop__grid .woocommerce-pagination ul.page-numbers li span.current { animation: none; }
}

/* ---- Dark room: the Graded Cards chamber --------------------------------------------- */
.tax-product_cat.term-graded-cards {
	background:
		radial-gradient(ellipse 60% 36% at 50% 8%, rgba(201, 162, 39, 0.10) 0%, transparent 70%),
		#070410;
}
.tax-product_cat.term-graded-cards ul.products li.product {
	background:
		radial-gradient(ellipse 90% 60% at 50% 8%, rgba(255, 233, 168, 0.07), transparent 65%),
		rgba(10, 6, 18, 0.85);
	border-color: rgba(201, 162, 39, 0.5);
}

/* ---- Door unseal (600ms, once per session per chamber) -------------------------------- */
.ev-unseal {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: none;
	pointer-events: none;
}
.ev-js .ev-unseal.is-sealing {
	display: block;
}
.ev-unseal__half {
	position: absolute;
	inset-block: 0;
	width: 50.5%;
	background:
		linear-gradient(90deg, rgba(201, 162, 39, 0.12), transparent 30%),
		linear-gradient(180deg, #181023, #0a0612);
}
.ev-unseal__half--start { inset-inline-start: 0; }
.ev-unseal__half--end { inset-inline-end: 0; transform: scaleX(-1); }
.ev-unseal.is-sealing .ev-unseal__half--start {
	animation: ev-unseal-start 600ms var(--ev-ease) forwards;
}
.ev-unseal.is-sealing .ev-unseal__half--end {
	animation: ev-unseal-end 600ms var(--ev-ease) forwards;
}
@keyframes ev-unseal-start {
	0% { transform: translateX(0); }
	100% { transform: translateX(-101%); }
}
@keyframes ev-unseal-end {
	0% { transform: translateX(0) scaleX(-1); }
	100% { transform: translateX(101%) scaleX(-1); }
}
[dir="rtl"] .ev-unseal.is-sealing .ev-unseal__half--start {
	animation-name: ev-unseal-end;
}
[dir="rtl"] .ev-unseal.is-sealing .ev-unseal__half--end {
	animation-name: ev-unseal-start;
}

/* ---- Single product: the display case opened ------------------------------------------ */
.ev-product {
	padding-inline: clamp(1rem, 4vw, 2rem);
}
.ev-product div.product {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	margin-block-end: 3rem;
}
@media (min-width: 900px) {
	.ev-product div.product {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: start;
	}
	.ev-product div.product > .related,
	.ev-product div.product > .woocommerce-tabs,
	.ev-product div.product > .up-sells {
		grid-column: 1 / -1;
	}
}
.ev-product .woocommerce-product-gallery {
	border: 1px solid rgba(201, 162, 39, 0.35);
	border-radius: 10px;
	overflow: hidden;
	background:
		linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, transparent 40%),
		rgba(26, 11, 46, 0.4);
}
.ev-product .woocommerce-product-gallery img {
	width: 100%;
	height: auto;
}
.ev-product .summary {
	display: grid;
	gap: 1rem;
	align-content: start;
	padding: clamp(1.2rem, 3vw, 2rem);
	border: 1px solid rgba(201, 162, 39, 0.35);
	border-radius: 10px;
	background: rgba(10, 6, 18, 0.6);
}
.ev-product .product_title {
	font-size: clamp(1.5rem, 3.5vw, 2.2rem);
	margin: 0;
}
.ev-product .summary .price {
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--ev-gold-hi);
}
.ev-product .summary .cart {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	align-items: center;
}
.ev-product .summary .quantity .qty {
	width: 4.5rem;
	padding: 0.6rem;
	background: rgba(26, 11, 46, 0.6);
	border: 1px solid rgba(201, 162, 39, 0.4);
	border-radius: 4px;
	color: var(--ev-text);
	font: inherit;
	text-align: center;
}
.ev-product .summary .single_add_to_cart_button {
	padding: 0.8rem 1.9rem;
	border-radius: 4px;
	border: 0;
	cursor: pointer;
	font: 600 1rem/1 inherit;
	letter-spacing: 0.04em;
	background: linear-gradient(160deg, var(--ev-gold-hi) 0%, var(--ev-gold) 45%, var(--ev-gold-shadow) 100%);
	color: var(--ev-black);
	box-shadow:
		inset 0 1px 0 rgba(255, 233, 168, 0.8),
		inset 0 -2px 3px rgba(74, 52, 6, 0.45),
		0 4px 14px rgba(0, 0, 0, 0.5);
	transition: transform 160ms var(--ev-press), box-shadow 160ms var(--ev-ease);
}
.ev-product .summary .single_add_to_cart_button:active {
	transform: translateY(1px) scale(0.97);
}
.ev-product .product_meta {
	color: var(--ev-text-dim);
	font-size: 0.85rem;
	display: grid;
	gap: 0.25rem;
}
.ev-product .product_meta a {
	color: var(--ev-gold);
	text-decoration: none;
}
.ev-product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
	margin: 0 0 1rem;
	border-block-end: 1px solid rgba(201, 162, 39, 0.3);
}
.ev-product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0.6rem 1.1rem;
	color: var(--ev-text-dim);
	text-decoration: none;
}
.ev-product .woocommerce-tabs ul.tabs li.active a {
	color: var(--ev-gold-hi);
	border-block-end: 2px solid var(--ev-gold);
}
.ev-product .related > h2,
.ev-product .up-sells > h2 {
	text-align: center;
	font-size: clamp(1.4rem, 3vw, 2rem);
}
.ev-product .related ul.products,
.ev-product .up-sells ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.4rem;
	list-style: none;
	padding: 0;
}
.ev-product .related ul.products li.product,
.ev-product .up-sells ul.products li.product {
	position: relative;
	display: grid;
	gap: 0.5rem;
	padding: 1rem;
	text-align: center;
}

/* ---- Classic cart + checkout (server-rendered) ----------------------------------------- */
.woocommerce-cart .ev-page .woocommerce,
.woocommerce-checkout .ev-page .woocommerce {
	max-width: 1100px;
	margin-inline: auto;
}
table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid rgba(201, 162, 39, 0.3);
	border-radius: 8px;
	overflow: hidden;
}
table.shop_table th,
table.shop_table td {
	padding: 0.85rem 1rem;
	border-block-end: 1px solid rgba(201, 162, 39, 0.18);
	text-align: start;
	color: var(--ev-text);
}
table.shop_table th {
	color: var(--ev-gold);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
table.shop_table img {
	width: 64px;
	height: auto;
	border-radius: 4px;
}
table.shop_table .product-remove a {
	color: var(--ev-text-dim);
	font-size: 1.3rem;
	text-decoration: none;
}
.woocommerce-cart .quantity .qty {
	width: 4.2rem;
	padding: 0.45rem;
	background: rgba(26, 11, 46, 0.6);
	border: 1px solid rgba(201, 162, 39, 0.4);
	border-radius: 4px;
	color: var(--ev-text);
	font: inherit;
	text-align: center;
}
.woocommerce .button:not(.single_add_to_cart_button),
.woocommerce button.button,
.woocommerce a.checkout-button {
	padding: 0.65rem 1.4rem;
	border-radius: 4px;
	border: 0;
	cursor: pointer;
	font: 600 0.92rem/1 inherit;
	letter-spacing: 0.04em;
	background: linear-gradient(160deg, var(--ev-gold-hi) 0%, var(--ev-gold) 45%, var(--ev-gold-shadow) 100%);
	color: var(--ev-black);
	box-shadow:
		inset 0 1px 0 rgba(255, 233, 168, 0.8),
		inset 0 -2px 3px rgba(74, 52, 6, 0.45),
		0 3px 10px rgba(0, 0, 0, 0.5);
	transition: transform 160ms var(--ev-press);
	text-decoration: none;
}
.woocommerce .button:active,
.woocommerce button.button:active {
	transform: translateY(1px) scale(0.97);
}
.woocommerce .button:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}
.cart_totals h2,
#order_review_heading {
	font-size: 1.3rem;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	width: 100%;
	padding: 0.65rem 0.85rem;
	background: rgba(26, 11, 46, 0.5);
	border: 1px solid rgba(201, 162, 39, 0.35);
	border-radius: 6px;
	color: var(--ev-text);
	font: inherit;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus {
	outline: none;
	border-color: var(--ev-gold);
	box-shadow: var(--ev-glow-gold);
}
.woocommerce form .form-row label {
	color: var(--ev-gold-hi);
	font-size: 0.85rem;
	display: block;
	margin-block-end: 0.3rem;
}
.woocommerce form .form-row {
	margin-block-end: 1rem;
}
.woocommerce-checkout #payment {
	background: rgba(26, 11, 46, 0.4);
	border: 1px solid rgba(201, 162, 39, 0.3);
	border-radius: 8px;
	padding: 1.2rem;
}
.woocommerce-checkout #payment .payment_methods {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

/* Woo notices on dark */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: rgba(26, 11, 46, 0.7);
	border: 1px solid rgba(201, 162, 39, 0.4);
	border-radius: 6px;
	color: var(--ev-text);
	padding: 0.9rem 1.2rem;
	margin: 0 auto 1.5rem;
	max-width: 1200px;
	list-style: none;
}
.woocommerce-error {
	border-color: rgba(220, 90, 90, 0.6);
}

/* ---- The Story: five acts -------------------------------------------------------- */
.ev-story .ev-act {
	position: relative;
	min-height: 100svh;
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 2rem;
	padding: clamp(3rem, 10vh, 6rem) clamp(1rem, 5vw, 3rem);
	overflow: hidden;
	text-align: center;
}
.ev-act__copy {
	display: grid;
	gap: 0.8rem;
	max-width: 56ch;
	position: relative;
	z-index: 2;
}
.ev-act__ar {
	font-family: "Zain", serif;
	font-weight: 700;
	font-size: clamp(1.6rem, 5vw, 2.8rem);
	color: var(--ev-gold-hi);
	margin: 0;
}
.ev-act__en {
	color: var(--ev-text-dim);
	font-size: clamp(1rem, 2.2vw, 1.2rem);
	margin: 0;
}
/* Void act: the vault as a distant glimmer in deep space (pure CSS, no media). */
.ev-act--void {
	background:
		radial-gradient(ellipse 70% 50% at 50% 42%, rgba(59, 29, 94, 0.55), transparent 70%),
		radial-gradient(circle at 50% 42%, rgba(201, 162, 39, 0.10), transparent 38%);
}
.ev-act__cosmos {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}
.ev-act__spark {
	position: absolute;
	inset-block-start: 38%;
	inset-inline-start: 50%;
	width: 6px;
	height: 6px;
	margin-inline-start: -3px;
	border-radius: 50%;
	background: var(--ev-gold-hi);
	box-shadow:
		0 0 12px 4px rgba(255, 233, 168, 0.7),
		0 0 40px 14px rgba(201, 162, 39, 0.35),
		0 0 90px 30px rgba(201, 162, 39, 0.18);
	animation: ev-spark-breathe 5.5s var(--ev-ease) infinite;
}
@keyframes ev-spark-breathe {
	0%, 100% { opacity: 0.65; transform: scale(0.85); }
	50% { opacity: 1; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
	.ev-act__spark { animation: none; }
}
.ev-act__img {
	display: block;
	max-width: min(520px, 80vw);
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid rgba(201, 162, 39, 0.4);
	box-shadow: var(--ev-glow-gold);
}
.ev-act__img img {
	width: 100%;
	height: auto;
	display: block;
}
.ev-marks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1.5rem, 5vw, 3.5rem);
	color: var(--ev-gold);
}
.ev-marks li {
	display: grid;
	justify-items: center;
	gap: 0.6rem;
	font-family: "Cinzel", serif;
	font-size: 0.85rem;
	letter-spacing: 0.12em;
	color: var(--ev-gold-hi);
}
.ev-marks svg {
	filter: drop-shadow(0 0 10px rgba(201, 162, 39, 0.45));
}
.ev-gcc {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1rem, 4vw, 2.5rem);
	position: relative;
}
.ev-gcc li {
	display: grid;
	justify-items: center;
	gap: 0.55rem;
	color: var(--ev-text-dim);
	font-size: 0.9rem;
	letter-spacing: 0.06em;
}
.ev-gcc__node {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--ev-gold);
	box-shadow: var(--ev-glow-gold);
}
.ev-act__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
}
/* Acts alternate depth, same dark theme family */
.ev-act--door {
	background: radial-gradient(ellipse 70% 50% at 50% 40%, rgba(59, 29, 94, 0.4), transparent 75%);
}
.ev-act--inside {
	background: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(201, 162, 39, 0.06), transparent 70%);
}
.ev-act--keepers {
	background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(59, 29, 94, 0.45), transparent 75%);
}

/* About page — values grid (icon + title + one-line promise) */
.ev-pillars {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: clamp(1.2rem, 3vw, 2rem);
	width: min(960px, 100%);
}
.ev-pillars li {
	display: grid;
	justify-items: center;
	gap: 0.6rem;
	padding: 1.6rem 1.2rem;
	border: 1px solid rgba(201, 162, 39, 0.3);
	border-radius: 10px;
	background: rgba(26, 11, 46, 0.4);
	color: var(--ev-gold);
	transition: transform 0.3s var(--ev-ease), border-color 0.3s var(--ev-ease), box-shadow 0.3s var(--ev-ease);
}
@media (hover: hover) {
	.ev-pillars li:hover {
		transform: translateY(-4px);
		border-color: rgba(201, 162, 39, 0.6);
		box-shadow: var(--ev-glow-gold);
	}
}
.ev-pillars svg {
	filter: drop-shadow(0 0 10px rgba(201, 162, 39, 0.45));
}
.ev-pillars strong {
	font-family: "Cinzel", serif;
	font-size: 0.95rem;
	letter-spacing: 0.08em;
	color: var(--ev-gold-hi);
}
[dir="rtl"] .ev-pillars strong { font-family: "Zain", serif; }
.ev-pillars p {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--ev-text-dim);
}

/* ---- FAQ / Contact / Policy content ----------------------------------------------- */
.ev-faq {
	display: grid;
	gap: 0.8rem;
	max-width: 720px;
	margin-inline: auto;
}
.ev-faq__item {
	border: 1px solid rgba(201, 162, 39, 0.35);
	border-radius: 8px;
	background: rgba(26, 11, 46, 0.4);
	padding: 0;
	overflow: hidden;
}
.ev-faq__item summary {
	cursor: pointer;
	padding: 1rem 1.2rem;
	font-weight: 600;
	color: var(--ev-gold-hi);
	list-style: none;
	position: relative;
	padding-inline-end: 2.6rem;
}
.ev-faq__item summary::-webkit-details-marker { display: none; }
.ev-faq__item summary::after {
	content: "+";
	position: absolute;
	inset-inline-end: 1.1rem;
	inset-block-start: 50%;
	translate: 0 -50%;
	color: var(--ev-gold);
	font-size: 1.3rem;
	transition: rotate 200ms var(--ev-ease);
}
.ev-faq__item[open] summary::after {
	rotate: 45deg;
}
.ev-faq__item p {
	padding: 0 1.2rem 1rem;
	margin: 0;
	color: var(--ev-text-dim);
}
.ev-contact {
	display: grid;
	gap: 1.2rem;
	justify-items: center;
	text-align: center;
	max-width: 560px;
	margin-inline: auto;
}
.ev-contact__ar {
	font-family: "Zain", serif;
	font-size: 1.4rem;
	color: var(--ev-gold);
	margin: 0;
}
.ev-contact__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
}
.ev-contact__note {
	color: var(--ev-text-dim);
	font-size: 0.9rem;
}
.ev-policy {
	max-width: 680px;
	margin-inline: auto;
	display: grid;
	gap: 0.8rem;
}
.ev-policy h2 {
	font-size: 1.3rem;
	margin-block: 1rem 0;
}
.ev-policy p {
	color: var(--ev-text-dim);
	margin: 0;
}

/* ---- Footer --------------------------------------------------------------------- */
.ev-footer {
	margin-block-start: clamp(3rem, 8vw, 6rem);
	padding: 0 clamp(1rem, 5vw, 3rem) 2rem;
}
.ev-footer__divider {
	height: 1px;
	background: var(--ev-rule);
	margin-block-end: 3rem;
}
.ev-footer__grid {
	max-width: 1200px;
	margin-inline: auto;
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
}
@media (min-width: 640px) {
	.ev-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.ev-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
.ev-footer__logo {
	font-family: "Cinzel", "Zain", serif;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--ev-gold-hi);
	font-size: 1.1rem;
	margin: 0 0 0.6rem;
}
.ev-footer__logo small { color: var(--ev-gold); font-size: 0.65em; }
.ev-footer__tag { color: var(--ev-text-dim); font-size: 0.9rem; max-width: 36ch; }
.ev-footer__head {
	color: var(--ev-gold);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.75rem;
	margin: 0 0 0.8rem;
}
.ev-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.45rem;
}
.ev-footer__col a {
	color: var(--ev-text-dim);
	text-decoration: none;
	font-size: 0.92rem;
	display: inline-block;
	padding-block: 0.4rem; /* comfortable ~40px tap target on touch without enlarging the type */
}
.ev-footer__col a:hover { color: var(--ev-gold-hi); }
.ev-footer__legal {
	text-align: center;
	color: var(--ev-text-dim);
	font-size: 0.8rem;
	margin-block-start: 3rem;
}

/* ---- WhatsApp float --------------------------------------------------------------- */
.ev-whatsapp {
	position: fixed;
	inset-block-end: 1.2rem;
	inset-inline-end: 1.2rem;
	z-index: 70;
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: linear-gradient(160deg, var(--ev-gold-hi) 0%, var(--ev-gold) 45%, var(--ev-gold-shadow) 100%);
	color: var(--ev-black);
	box-shadow:
		inset 0 1px 0 rgba(255, 233, 168, 0.8),
		0 4px 14px rgba(0, 0, 0, 0.5);
	transition: transform 180ms var(--ev-press), box-shadow 180ms var(--ev-ease);
}
@media (hover: hover) and (pointer: fine) {
	.ev-whatsapp:hover {
		transform: translateY(-3px);
		box-shadow: var(--ev-glow-gold), 0 6px 20px rgba(0, 0, 0, 0.55);
	}
}
.ev-whatsapp:active {
	transform: translateY(1px) scale(0.97);
}

/* ---- Hero Arabic line ------------------------------------------------------------- */
.ev-hero__ar {
	font-family: "Zain", "Cinzel", serif;
	font-weight: 700;
	font-size: clamp(1.1rem, 3vw, 1.6rem);
	color: var(--ev-gold);
	margin: 0;
}

/* ---- Vault floor (footer sitemap-as-architecture) ----------------------------------- */
.ev-floor {
	max-width: 880px;
	margin: 0 auto 3rem;
	text-align: center;
}
.ev-floor__label {
	color: var(--ev-text-dim);
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin: 0 0 1.2rem;
}
.ev-floor__map {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	position: relative;
}
.ev-floor__map::before {
	content: "";
	position: absolute;
	inset-block-start: 5px;
	inset-inline: 8%;
	height: 1px;
	background: var(--ev-rule);
}
.ev-floor__map li {
	flex: 1 1 110px;
	max-width: 170px;
}
.ev-floor__map a {
	display: grid;
	justify-items: center;
	gap: 0.55rem;
	color: var(--ev-text-dim);
	text-decoration: none;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	position: relative;
}
.ev-floor__node {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	border: 1px solid var(--ev-gold);
	background: var(--ev-black);
	transition: box-shadow 200ms var(--ev-ease), background 200ms var(--ev-ease);
}
.ev-floor__map a:hover {
	color: var(--ev-gold-hi);
}
.ev-floor__map a:hover .ev-floor__node {
	background: var(--ev-gold);
	box-shadow: var(--ev-glow-gold);
}
.ev-footer__gcc {
	color: var(--ev-gold);
	font-size: 0.85rem;
	line-height: 1.7;
	margin-block-start: 1rem;
}

/* ---- 404: the sealed chamber --------------------------------------------------------- */
.ev-404 {
	min-height: 70svh;
	display: grid;
	justify-items: center;
	align-content: center;
	text-align: center;
	gap: 1.1rem;
	padding: 3rem 1.5rem;
}
.ev-404__door {
	position: relative;
	width: clamp(140px, 30vw, 200px);
	aspect-ratio: 1;
	margin-block-end: 1rem;
}
.ev-404__ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 3px solid var(--ev-gold-shadow);
	box-shadow:
		inset 0 0 24px rgba(201, 162, 39, 0.25),
		0 0 40px rgba(201, 162, 39, 0.15);
}
.ev-404__bar {
	position: absolute;
	background: linear-gradient(90deg, var(--ev-gold-shadow), var(--ev-gold), var(--ev-gold-shadow));
	border-radius: 3px;
}
.ev-404__bar--h {
	inset-inline: 8%;
	inset-block-start: calc(50% - 3px);
	height: 6px;
}
.ev-404__bar--v {
	inset-block: 8%;
	inset-inline-start: calc(50% - 3px);
	width: 6px;
}
.ev-404__boss {
	position: absolute;
	inset: 38%;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, var(--ev-gold-hi), var(--ev-gold) 55%, var(--ev-gold-shadow));
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), var(--ev-glow-gold);
}
.ev-404__title {
	font-family: "Zain", "Cinzel", serif;
	margin: 0;
	font-size: clamp(1.8rem, 5vw, 2.8rem);
}
.ev-404__sub {
	color: var(--ev-text-dim);
	max-width: 44ch;
	margin: 0 0 1rem;
}

/* ---- Wholesale: the gold-framed door for B2B ------------------------------------------ */
.ev-wholesale {
	max-width: 640px;
	margin-inline: auto;
	padding-inline: clamp(1rem, 5vw, 2rem);
	text-align: center;
}
.ev-wholesale__title {
	font-size: clamp(1.8rem, 5vw, 2.6rem);
	margin-block-end: 0.4rem;
}
.ev-wholesale__ar {
	font-family: "Zain", serif;
	color: var(--ev-gold);
	font-size: 1.15rem;
	margin: 0 0 0.6rem;
}
.ev-wholesale__sub {
	color: var(--ev-text-dim);
	margin: 0 0 2rem;
}
.ev-wholesale__form {
	display: grid;
	gap: 1.2rem;
	padding: clamp(1.5rem, 5vw, 2.5rem);
	border: 1px solid var(--ev-gold-shadow);
	border-radius: 10px;
	background:
		radial-gradient(ellipse 100% 80% at 50% 0%, rgba(59, 29, 94, 0.4), transparent 75%),
		rgba(10, 6, 18, 0.6);
	box-shadow: inset 0 0 30px rgba(201, 162, 39, 0.05);
	text-align: start;
}
.ev-wholesale__form label {
	display: grid;
	gap: 0.45rem;
}
.ev-wholesale__form span {
	font-size: 0.85rem;
	color: var(--ev-gold-hi);
	letter-spacing: 0.04em;
}
.ev-wholesale__form input,
.ev-wholesale__form textarea {
	background: rgba(26, 11, 46, 0.5);
	border: 1px solid rgba(201, 162, 39, 0.35);
	border-radius: 6px;
	padding: 0.7rem 0.9rem;
	color: var(--ev-text);
	font: inherit;
	transition: border-color 180ms var(--ev-ease), box-shadow 180ms var(--ev-ease);
}
.ev-wholesale__form input:focus,
.ev-wholesale__form textarea:focus {
	outline: none;
	border-color: var(--ev-gold);
	box-shadow: var(--ev-glow-gold);
}
.ev-wholesale__form .ev-btn {
	justify-self: center;
	border: 0;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
}
.ev-wholesale__direct {
	margin-block-start: 1.6rem;
	color: var(--ev-text-dim);
	font-size: 0.92rem;
}
/* Bilingual wholesale form: responsive grid + select + success/error states */
.ev-wform__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.2rem;
}
@media (min-width: 620px) {
	.ev-wform__grid { grid-template-columns: 1fr 1fr; }
}
.ev-wholesale__form select {
	background: rgba(26, 11, 46, 0.5);
	border: 1px solid rgba(201, 162, 39, 0.35);
	border-radius: 6px;
	padding: 0.7rem 0.9rem;
	color: var(--ev-text);
	font: inherit;
	transition: border-color 180ms var(--ev-ease), box-shadow 180ms var(--ev-ease);
}
.ev-wholesale__form select:focus {
	outline: none;
	border-color: var(--ev-gold);
	box-shadow: var(--ev-glow-gold);
}
.ev-wform__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
	inset-inline-start: -9999px;
}
.ev-wform__success {
	display: grid;
	justify-items: center;
	gap: 0.8rem;
	padding: clamp(1.5rem, 5vw, 2.5rem);
	border: 1px solid var(--ev-gold-shadow);
	border-radius: 10px;
	background:
		radial-gradient(ellipse 100% 80% at 50% 0%, rgba(59, 29, 94, 0.4), transparent 75%),
		rgba(10, 6, 18, 0.6);
	color: var(--ev-gold-hi);
	text-align: center;
}
.ev-wform__success svg { color: var(--ev-gold); }
.ev-wform__error {
	margin-block-end: 1.2rem;
	padding: 0.8rem 1rem;
	border: 1px solid rgba(214, 120, 120, 0.5);
	border-radius: 8px;
	background: rgba(80, 20, 20, 0.28);
	color: #f3c8c8;
	font-size: 0.9rem;
	text-align: start;
}

/* ---- Photo guide (internal, noindex) --------------------------------------------------- */
.ev-photoguide {
	max-width: 720px;
	margin-inline: auto;
	padding-inline: clamp(1rem, 5vw, 2rem);
}
.ev-photoguide__diagram {
	width: 100%;
	height: auto;
	color: var(--ev-gold);
	margin-block: 1.5rem;
}
.ev-photoguide__rules {
	display: grid;
	gap: 0.7rem;
	padding-inline-start: 1.2rem;
	color: var(--ev-text);
}
.ev-photoguide__note {
	color: var(--ev-text-dim);
	font-style: italic;
}

/* ---- Living Vault ambience (ultra-subtle star drift, <3% visual weight) ----------------- */
.ev-stars {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
}
.ev-stars::before,
.ev-stars::after {
	content: "";
	position: absolute;
	inset: -100% 0 0 0;
	background-image:
		radial-gradient(1px 1px at 12% 22%, rgba(239, 233, 220, 0.5), transparent 100%),
		radial-gradient(1px 1px at 38% 64%, rgba(239, 233, 220, 0.35), transparent 100%),
		radial-gradient(1.5px 1.5px at 61% 31%, rgba(255, 233, 168, 0.4), transparent 100%),
		radial-gradient(1px 1px at 79% 78%, rgba(239, 233, 220, 0.3), transparent 100%),
		radial-gradient(1px 1px at 91% 12%, rgba(79, 195, 247, 0.3), transparent 100%),
		radial-gradient(1.5px 1.5px at 24% 89%, rgba(255, 233, 168, 0.3), transparent 100%);
	background-size: 520px 520px;
	animation: ev-star-drift 240s linear infinite;
}
.ev-stars::after {
	background-size: 780px 780px;
	opacity: 0.55;
	animation-duration: 380s;
}
@keyframes ev-star-drift {
	to { transform: translateY(50%); }
}
@media (prefers-reduced-motion: reduce) {
	.ev-stars::before,
	.ev-stars::after {
		animation: none;
	}
}

/* ---- Scroll reveals ----------------------------------------------------------------- */
/* Reveals only ever hide content when JS is confirmed running (.ev-js),
   so no-JS users and crawlers always see the full page. */
.ev-js .ev-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 400ms var(--ev-ease), transform 400ms var(--ev-ease);
}
.ev-js .ev-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ---- Reduced motion: kill it all ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.ev-reveal {
		opacity: 1;
		transform: none;
	}
}

/* ---- Page transitions (View Transitions API) ---------------------------- */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 420ms;
	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
::view-transition-new(root) { animation-name: ev-page-in; }
@keyframes ev-page-in {
	from { opacity: 0; filter: brightness(1.6) saturate(1.15); }
	to { opacity: 1; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(root),
	::view-transition-new(root) { animation: none !important; }
}

/* ---- Scroll-telling: parallax on the story door image ------------------- */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.ev-act__img { overflow: clip; }
		.ev-act__img img {
			animation: ev-act-parallax linear both;
			animation-timeline: view();
			animation-range: cover;
			will-change: transform;
		}
	}
}
@keyframes ev-act-parallax {
	from { transform: translateY(-6%) scale(1.08); }
	to { transform: translateY(6%) scale(1.08); }
}

/* ---- Shop: active chamber + branded empty-vault state ------------------- */
.ev-chambers a.is-active {
	color: #1c1206;
	background: linear-gradient(160deg, var(--ev-gold-hi), var(--ev-gold) 60%, var(--ev-gold-shadow));
	border-color: transparent;
	font-weight: 600;
	box-shadow: 0 0 24px rgba(201, 162, 39, 0.6), 0 0 9px rgba(255, 233, 168, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.ev-chambers a.is-active:hover { transform: none; }
.ev-empty {
	display: grid;
	justify-items: center;
	gap: 0.7rem;
	max-width: 32rem;
	margin: clamp(2rem, 8vw, 5rem) auto;
	padding: clamp(1.5rem, 5vw, 2.5rem);
	text-align: center;
}
.ev-empty__mark { font-size: 2rem; color: var(--ev-gold); opacity: 0.85; }
.ev-empty__title {
	margin: 0;
	font-family: "Cinzel", "Zain", serif;
	font-size: clamp(1.3rem, 4vw, 1.9rem);
	letter-spacing: 0.04em;
	color: var(--ev-gold-hi);
}
.ev-empty__sub { margin: 0 0 0.6rem; color: var(--ev-text-dim); }

/* ============================================================== *
 *  ORRERY HERO  (Task 1)                                          *
 * ============================================================== */
.ev-hero--orrery{
	position: relative; overflow: hidden;
	padding-block: clamp(4rem, 8vh, 5.5rem) clamp(2rem, 5vh, 3rem);
	background: radial-gradient(130% 100% at 50% 8%, #1c1140 0%, #1a0b2e 42%, var(--ev-black) 80%);
}
/* orrery sits as the centrepiece emblem ABOVE the copy (where the Eye sigil was) */
.ev-hero__orrery{ display: block; width: min(29vmin, 260px); margin: 0 auto; pointer-events: none; }
.ev-orrery{ width: 100%; aspect-ratio: 1 / 1; opacity: .95; }
.ev-orrery svg{ width: 100%; height: 100%; display: block; overflow: visible; }
.ev-hero--orrery .ev-hero__copy{ position: relative; z-index: 2; display: grid; justify-items: center; gap: 1.1rem; }
@media (max-width: 560px){ .ev-hero__orrery{ width: min(66vmin, 300px); } }

/* each ring rotates about the SVG centre (500,500) at its own cadence */
.ev-spin{ transform-box: view-box; transform-origin: 500px 500px; }
.ev-s-outer{ animation: ev-orr-cw 120s linear infinite; }
.ev-s-r5{ animation: ev-orr-ccw 90s linear infinite; }
.ev-s-r4{ animation: ev-orr-cw 70s linear infinite; }
.ev-s-r3{ animation: ev-orr-ccw 55s linear infinite; }
.ev-s-r2{ animation: ev-orr-cw 40s linear infinite; }
.ev-s-r1{ animation: ev-orr-ccw 28s linear infinite; }
@keyframes ev-orr-cw{ to{ transform: rotate(360deg); } }
@keyframes ev-orr-ccw{ to{ transform: rotate(-360deg); } }
.ev-core{ transform-box: view-box; transform-origin: 500px 500px; animation: ev-orr-core 4s ease-in-out infinite; }
@keyframes ev-orr-core{
	0%,100%{ filter: drop-shadow(0 0 4px rgba(212,175,55,.45)); }
	50%    { filter: drop-shadow(0 0 16px rgba(212,175,55,.95)) drop-shadow(0 0 34px rgba(212,175,55,.55)); }
}
.ev-star{ animation: ev-orr-tw 3.4s ease-in-out infinite; }
@keyframes ev-orr-tw{ 0%,100%{ opacity: .25; } 50%{ opacity: 1; } }
@media (prefers-reduced-motion: reduce){ .ev-spin,.ev-core,.ev-star{ animation: none; } }
@media (max-width: 560px){ .ev-orrery{ opacity: .9; } }

/* ============================================================== *
 *  DARK / LIGHT MODE  (Task 2)                                    *
 * ============================================================== */
html[data-theme="light"]{
	--ev-black: #f6f1e6;        /* warm off-white page bg (never pure #fff) */
	--ev-text: #1c1407;         /* dark ink */
	--ev-text-dim: #5d5340;
	--ev-gold-hi: #8a6f1e;      /* gold that stays legible on light surfaces */
	--ev-violet: #c9a9f0;
}
/* smooth 0.4s flip on the surfaces that read the theme tokens */
body, .ev-header, .ev-section, .ev-footer, .ev-card, .ev-product-card,
.ev-portal, .ev-treasures, .ev-ticker, .ev-nav, .ev-nav__link, .ev-theme-toggle{
	transition: background-color .4s ease, color .4s ease, border-color .4s ease;
}
/* keep the cosmic hero + orrery dark in both modes (it is the vault sky); the
   rest of the page flips. In light mode soften it to deep twilight, not black. */
html[data-theme="light"] .ev-hero--orrery{
	background: radial-gradient(130% 100% at 50% 8%, #2a1d52 0%, #1c1338 45%, #120b22 82%);
}

/* theme toggle button (sun / moon) */
.ev-theme-toggle{
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; flex: none; padding: 0; cursor: pointer;
	background: transparent; border: 1px solid var(--ev-gold-shadow); border-radius: 50%;
	color: var(--ev-gold); line-height: 0;
}
.ev-theme-toggle:hover{ border-color: var(--ev-gold); color: var(--ev-gold-hi); box-shadow: 0 0 14px rgba(201,162,39,.35); }
.ev-theme-toggle svg{ width: 19px; height: 19px; }
.ev-theme-toggle .ev-ico-sun{ display: none; }
.ev-theme-toggle .ev-ico-moon{ display: block; }
html[data-theme="light"] .ev-theme-toggle .ev-ico-sun{ display: block; }
html[data-theme="light"] .ev-theme-toggle .ev-ico-moon{ display: none; }

/* ============================================================== *
 *  HEADINGS FONT  (Task 3) — Inter, EXO VAULT gold #D4AF37        *
 *  (Arabic glyphs fall through to Zain automatically)            *
 * ============================================================== */
h1, h2, h3, h4, h5, h6,
.ev-hero__title, .ev-section__title, .ev-empty__title, .ev-chamber__name,
.ev-nav__link, .ev-logo, .ev-ticker__name, .ev-product-card__title{
	font-family: "Inter", "Zain", system-ui, sans-serif !important;
}
h1, h2, h3,
.ev-hero__title, .ev-section__title, .ev-empty__title{ color: #D4AF37; }
/* deepen heading gold on light surfaces for legible contrast (still gold) */
html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3,
html[data-theme="light"] .ev-section__title, html[data-theme="light"] .ev-empty__title{ color: #9a7d1e; }
/* the hero stays dark, so its title keeps the bright gold */
html[data-theme="light"] .ev-hero__title{ color: #D4AF37; }

/* ================================================================ *
 *  ECLIPSE GOLD LABEL TYPE STYLE  (owner approved 2026-06-20)      *
 *    · UPPERCASE                                                   *
 *    · wide letter-spacing (0.2em)                                 *
 *    · light weight (300, Inter)                                   *
 *    · theme gold at 0.85 alpha + soft amber glow                  *
 *  Scope: English / LTR only — Arabic (Zain) keeps its weight.     *
 *  Applies to headings, nav, labels, eyebrows, buttons; body copy  *
 *  (incl. .ev-hero__sub) and prices left untouched for legibility. *
 * ================================================================ */

/* 1) Uppercase + light weight + wide tracking — all chrome (incl. buttons) */
html:not([dir="rtl"]) :is(
	h1, h2, h3, h4, h5, h6,
	.ev-hero__title, .ev-hero__kicker,
	.ev-section__title, .ev-section__eyebrow,
	.ev-empty__title, .ev-chamber__name, .ev-portal__name,
	.ev-shop__title, .ev-wholesale__title, .ev-404__title,
	.ev-countdown__title, .ev-countdown__label,
	.ev-menu__title, .ev-menu__item, .ev-menu__link,
	.ev-nav__link, .ev-logo, .ev-footer__tag, .ev-floor__label,
	.ev-ticker__label, .ev-ticker__name, .ev-product-card__title,
	.ev-btn
){
	font-weight: 300 !important;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* 2) Glowing gold — text on the dark surface only
 *    (buttons / badges keep their own fill colour so they stay legible). */
html:not([dir="rtl"]) :is(
	h1, h2, h3, h4, h5, h6,
	.ev-hero__title, .ev-hero__kicker,
	.ev-section__title, .ev-section__eyebrow,
	.ev-empty__title, .ev-chamber__name, .ev-portal__name,
	.ev-shop__title, .ev-wholesale__title, .ev-404__title,
	.ev-countdown__title, .ev-countdown__label,
	.ev-menu__title, .ev-menu__item, .ev-menu__link,
	.ev-nav__link, .ev-logo, .ev-footer__tag, .ev-floor__label,
	.ev-ticker__label, .ev-ticker__name, .ev-product-card__title
){
	color: rgba(212, 175, 55, 0.85) !important;
	text-shadow: 0 0 18px rgba(212, 175, 55, 0.45), 0 0 40px rgba(201, 162, 39, 0.22);
}

/* Light mode: deeper gold + drop the glow so it stays legible on cream */
html[data-theme="light"]:not([dir="rtl"]) :is(
	h1, h2, h3, h4, h5, h6,
	.ev-hero__kicker,
	.ev-section__title, .ev-section__eyebrow,
	.ev-empty__title, .ev-chamber__name, .ev-portal__name,
	.ev-shop__title, .ev-wholesale__title, .ev-404__title,
	.ev-countdown__title, .ev-countdown__label,
	.ev-menu__title, .ev-menu__item, .ev-menu__link,
	.ev-nav__link, .ev-logo, .ev-footer__tag, .ev-floor__label,
	.ev-product-card__title
){
	color: rgba(111, 83, 16, 1) !important;
	text-shadow: none;
}
/* the hero stays cosmic-dark in both modes — keep its gold bright + glow */
html[data-theme="light"]:not([dir="rtl"]) :is(
	.ev-hero__title, .ev-hero__kicker, .ev-ticker__label, .ev-ticker__name
){
	color: rgba(212, 175, 55, 0.9) !important;
	text-shadow: 0 0 18px rgba(212, 175, 55, 0.45), 0 0 40px rgba(201, 162, 39, 0.22);
}

/* ================================================================ *
 *  MOBILE DRAWER — always cosmic-dark (fix 2026-06-20)             *
 *  In light mode --ev-black flips to cream, which washed out the   *
 *  drawer and made its text unreadable. Pin the panel dark and its *
 *  text bright in BOTH themes so the menu is always legible.       *
 * ================================================================ */
html[data-theme="light"] .ev-menu{
	background:
		linear-gradient(180deg, rgba(59, 29, 94, 0.5), rgba(10, 6, 18, 0.97) 38%),
		#0a0612;
	border-inline-end-color: rgba(201, 162, 39, 0.28);
}
html[data-theme="light"] .ev-menu__head{ border-block-end-color: rgba(201, 162, 39, 0.16); }
html[data-theme="light"] .ev-menu__sep{ background: rgba(201, 162, 39, 0.16); }
/* bright gold text (matching dark mode) on the now-dark panel — overrides the
   light-mode deep-gold rule above, hence !important + later source order */
html[data-theme="light"] :is(
	.ev-menu__title, .ev-menu__item a, .ev-menu__link
){
	color: rgba(212, 175, 55, 0.9) !important;
	text-shadow: 0 0 18px rgba(212, 175, 55, 0.45), 0 0 40px rgba(201, 162, 39, 0.22);
}
html[data-theme="light"] .ev-menu__item--wholesale a{ color: var(--ev-gold-hi) !important; }
html[data-theme="light"] .ev-menu__close{ color: #efe9dc !important; text-shadow: none; }
html[data-theme="light"] .ev-menu__foot a{ color: rgba(239, 233, 220, 0.8) !important; text-shadow: none; }
html[data-theme="light"] .ev-menu__icon{ color: rgba(212, 175, 55, 0.9); }