/* eKhanS Store Manager — frontend showcase, checkout drawer and tracker.
   Everything is namespaced under .esm so it cannot collide with the theme.
   Colours inherit from the page where possible; only the accent is opinionated. */

.esm {
	--esm-ink: #0f1115;
	--esm-muted: #6b7280;
	--esm-line: rgba(15, 17, 21, .12);
	--esm-accent: #0f9d58;
	--esm-accent-ink: #ffffff;
	--esm-surface: #ffffff;
	--esm-radius: 14px;
	box-sizing: border-box;
	color: var(--esm-ink);
	font-family: inherit;
	margin: 0 auto;
	max-width: 1180px;
	padding: 28px 16px 40px;
	width: 100%;
}

.esm *,
.esm *::before,
.esm *::after { box-sizing: border-box; }

.esm__heading {
	font-size: clamp(20px, 3vw, 28px);
	letter-spacing: -.01em;
	margin: 0 0 18px;
}

/* ---------- rails ---------- */

.esm-rail { margin-bottom: 34px; }

.esm-rail__head {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin-bottom: 12px;
}

.esm-rail__title { font-size: 17px; margin: 0; }
.esm-rail__sub { color: var(--esm-muted); font-size: 13px; margin: 0; }

.esm-rail__track {
	display: grid;
	gap: 14px;
	grid-auto-columns: minmax(200px, 1fr);
	grid-auto-flow: column;
	overflow-x: auto;
	padding-bottom: 8px;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}

.esm-rail__track::-webkit-scrollbar { height: 6px; }
.esm-rail__track::-webkit-scrollbar-thumb { background: var(--esm-line); border-radius: 99px; }

/* ---------- cards ---------- */

.esm-card { scroll-snap-align: start; }

.esm-card__hit {
	background: var(--esm-surface);
	border: 1px solid var(--esm-line);
	border-radius: var(--esm-radius);
	cursor: pointer;
	display: grid;
	gap: 10px;
	height: 100%;
	padding: 10px 10px 12px;
	text-align: left;
	transition: transform .16s ease, box-shadow .16s ease;
	width: 100%;
}

.esm-card__hit:hover,
.esm-card__hit:focus-visible {
	box-shadow: 0 10px 30px rgba(15, 17, 21, .1);
	outline: none;
	transform: translateY(-2px);
}

.esm-card__media {
	align-items: center;
	aspect-ratio: 1 / 1;
	background: rgba(15, 17, 21, .04);
	border-radius: 10px;
	display: flex;
	justify-content: center;
	overflow: hidden;
}

.esm-card__media img { height: 100%; object-fit: cover; width: 100%; }
.esm-card__ph { font-size: 34px; }

.esm-card__body { display: grid; gap: 3px; }
.esm-card__title { font-size: 14px; font-weight: 600; line-height: 1.3; }
.esm-card__meta { color: var(--esm-muted); font-size: 12px; }
.esm-card__price { font-size: 15px; font-weight: 700; margin-top: 2px; }

.esm-card__cta {
	background: var(--esm-accent);
	border-radius: 8px;
	color: var(--esm-accent-ink);
	font-size: 13px;
	font-weight: 600;
	padding: 9px 12px;
	text-align: center;
}

/* ---------- drawer ---------- */

.esm-drawer { inset: 0; position: fixed; z-index: 99999; }
.esm-drawer[hidden] { display: none; }
.esm-drawer__scrim { background: rgba(8, 10, 14, .55); inset: 0; position: absolute; }

.esm-drawer__panel {
	background: var(--esm-surface);
	border-radius: 18px 18px 0 0;
	bottom: 0;
	color: var(--esm-ink);
	left: 50%;
	max-height: 92vh;
	max-width: 520px;
	overflow-y: auto;
	padding: 20px 18px 28px;
	position: absolute;
	transform: translateX(-50%);
	width: 100%;
	animation: esm-rise .22s ease;
}

@keyframes esm-rise {
	from { opacity: 0; transform: translate(-50%, 18px); }
	to { opacity: 1; transform: translate(-50%, 0); }
}

.esm-drawer__close {
	background: rgba(15, 17, 21, .06);
	border: 0;
	border-radius: 99px;
	cursor: pointer;
	font-size: 22px;
	height: 34px;
	line-height: 1;
	position: absolute;
	right: 14px;
	top: 14px;
	width: 34px;
}

.esm-drawer__title { font-size: 18px; margin: 4px 34px 2px 0; }
.esm-drawer__sub { color: var(--esm-muted); font-size: 13px; margin: 0 0 16px; }

/* ---------- forms ---------- */

.esm-form { display: grid; gap: 12px; }

.esm-field { display: grid; gap: 5px; }
.esm-field__label { font-size: 13px; font-weight: 600; }

.esm-field input,
.esm-field select,
.esm-field textarea {
	background: #fff;
	border: 1px solid var(--esm-line);
	border-radius: 10px;
	color: var(--esm-ink);
	font: inherit;
	font-size: 15px;
	min-height: 46px;
	padding: 11px 12px;
	width: 100%;
}

.esm-field textarea { min-height: 78px; resize: vertical; }
.esm-field input:focus,
.esm-field select:focus,
.esm-field textarea:focus { border-color: var(--esm-accent); outline: none; }

.esm-sizes { display: flex; flex-wrap: wrap; gap: 8px; }

.esm-sizes label {
	border: 1px solid var(--esm-line);
	border-radius: 10px;
	cursor: pointer;
	font-size: 14px;
	min-height: 44px;
	min-width: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
}

.esm-sizes input { position: absolute; opacity: 0; pointer-events: none; }
.esm-sizes label:has(input:checked) { background: var(--esm-accent); border-color: var(--esm-accent); color: var(--esm-accent-ink); font-weight: 600; }

.esm-total {
	border: 1px dashed var(--esm-line);
	border-radius: 12px;
	display: grid;
	gap: 6px;
	padding: 12px;
}

.esm-total__row { display: flex; font-size: 13px; justify-content: space-between; }
.esm-total__row--sum { border-top: 1px solid var(--esm-line); font-size: 16px; font-weight: 700; padding-top: 8px; }

.esm-btn {
	background: var(--esm-accent);
	border: 0;
	border-radius: 12px;
	color: var(--esm-accent-ink);
	cursor: pointer;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	min-height: 50px;
	padding: 13px 18px;
	width: 100%;
}

.esm-btn[disabled] { opacity: .6; cursor: progress; }

.esm-msg { font-size: 13px; margin: 0; min-height: 18px; }
.esm-msg--bad { color: #b3261e; }
.esm-msg--ok { color: #0f7b43; }

/* ---------- confirmation ---------- */

.esm-done { display: grid; gap: 10px; text-align: center; }
.esm-done__id { font-size: 20px; font-weight: 700; letter-spacing: .02em; }
.esm-done p { color: var(--esm-muted); font-size: 14px; margin: 0; }

/* ---------- tracker ---------- */

.esm-track__form { align-items: end; display: grid; gap: 10px; grid-template-columns: 1fr auto; margin-bottom: 22px; }
.esm-track__form .esm-btn { width: auto; }

@media (max-width: 520px) {
	.esm-track__form { grid-template-columns: 1fr; }
	.esm-track__form .esm-btn { width: 100%; }
}

.esm-order {
	border: 1px solid var(--esm-line);
	border-radius: var(--esm-radius);
	margin-bottom: 16px;
	padding: 16px;
}

.esm-order__head { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; margin-bottom: 16px; }
.esm-order__id { color: var(--esm-muted); font-size: 12px; margin: 0 0 4px; }
.esm-order__title { font-size: 16px; margin: 0; }
.esm-order__total { font-size: 18px; font-weight: 700; margin: 0; }

.esm-steps {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(3, 1fr);
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	position: relative;
}

.esm-steps__item { display: grid; gap: 8px; justify-items: center; position: relative; text-align: center; }

.esm-steps__item::before {
	background: var(--esm-line);
	content: "";
	height: 3px;
	left: 50%;
	position: absolute;
	top: 7px;
	width: 100%;
	z-index: 0;
}

.esm-steps__item:last-child::before { display: none; }
.esm-steps__item.is-done::before { background: var(--esm-accent); }

.esm-steps__dot {
	background: #fff;
	border: 3px solid var(--esm-line);
	border-radius: 99px;
	height: 17px;
	position: relative;
	width: 17px;
	z-index: 1;
}

.esm-steps__item.is-done .esm-steps__dot { background: var(--esm-accent); border-color: var(--esm-accent); }
.esm-steps__label { font-size: 12px; line-height: 1.3; }

.esm-order__meta { display: grid; gap: 4px 14px; grid-template-columns: auto 1fr; margin: 0; }
.esm-order__meta dt { color: var(--esm-muted); font-size: 12px; }
.esm-order__meta dd { font-size: 13px; margin: 0; }

.esm-note { border-radius: 10px; font-size: 14px; margin: 0 0 16px; padding: 12px 14px; }
.esm-note--ok { background: rgba(15, 123, 67, .1); color: #0f7b43; }
.esm-note--bad { background: rgba(179, 38, 30, .08); color: #b3261e; }
.esm-note--empty { background: rgba(15, 17, 21, .05); color: var(--esm-muted); }

/* ---------- v1.1: gallery, sale badges, coin package picker ---------- */

.esm-card__media { position: relative; }

.esm-badge {
	border-radius: 99px;
	font-size: 11px;
	font-weight: 700;
	left: 8px;
	letter-spacing: .01em;
	padding: 4px 8px;
	position: absolute;
	top: 8px;
}

.esm-badge--sale { background: #b3261e; color: #fff; }

.esm-badge--more {
	background: rgba(8, 10, 14, .72);
	color: #fff;
	left: auto;
	right: 8px;
}

.esm-card__from { color: var(--esm-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; }
.esm-card__was { color: var(--esm-muted); font-size: 12px; font-weight: 500; margin-left: 4px; }

/* Drawer gallery */
.esm-gal-v { display: grid; gap: 8px; margin: 0 0 14px; }

.esm-gal-v__main {
	aspect-ratio: 4 / 3;
	background: rgba(15, 17, 21, .04);
	border-radius: 12px;
	overflow: hidden;
}

.esm-gal-v__main img { height: 100%; object-fit: cover; width: 100%; display: block; }

.esm-gal-v__strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }

.esm-gal-t {
	background: none;
	border: 2px solid transparent;
	border-radius: 8px;
	cursor: pointer;
	flex: 0 0 auto;
	height: 54px;
	line-height: 0;
	overflow: hidden;
	padding: 0;
	width: 54px;
}

.esm-gal-t img { height: 100%; object-fit: cover; width: 100%; }
.esm-gal-t.is-on { border-color: var(--esm-accent); }

.esm-was { color: var(--esm-muted); font-weight: 500; }
.esm-save { color: #b3261e; font-weight: 700; }

/* Visually hidden label text for the card's package select. */
.esm .screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

/* ---------- v1.2: coin top-up card ----------------------------------------
   Dark, self-contained and width-capped. The palette is local to .esm-coin /
   .esm-form--coin so the jersey rail, the tracker and the theme are untouched.
   Gold reads as currency and is the only saturated colour used, which is what
   keeps the selected pill unmistakable.
------------------------------------------------------------------------- */

.esm-rail--coin { margin-bottom: 34px; }

/* The coin section sits on the dark ground, so its own heading has to leave
   the light theme's ink behind. Scoped to --coin: the jersey rail keeps it. */
.esm-rail--coin .esm-rail__title {
	color: #e9ecf3;
	/* The head is a wrap flex row; without a basis the title shrinks below
	   its own text width and breaks mid-word. The sub-line takes the squeeze. */
	flex: 0 0 auto;
}

.esm-rail--coin .esm-rail__sub { color: #a6aec2; flex: 1 1 180px; min-width: 0; }

.esm-games,
.esm-form--coin,
.esm-drawer__panel.is-dark {
	--esm-d-bg: #11141a;
	--esm-d-panel: #161b22;
	--esm-d-line: rgba(255, 255, 255, .09);
	--esm-d-ink: #e9ecf3;
	--esm-d-muted: #8b93a7;
	--esm-d-gold: #f5c04a;
}

/* ---- game carousel ---- */

.esm-games {
	display: grid;
	gap: 16px;
	grid-auto-columns: minmax(196px, 1fr);
	grid-auto-flow: column;
	overflow-x: auto;
	padding: 2px 2px 10px;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.esm-games::-webkit-scrollbar { height: 6px; }
.esm-games::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 99px; }

.esm-games__nav { display: flex; gap: 8px; margin-left: auto; }

.esm-games__arrow {
	background: var(--esm-d-panel, #161b22);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 99px;
	color: #e9ecf3;
	cursor: pointer;
	font-size: 18px;
	height: 34px;
	line-height: 1;
	width: 34px;
}

.esm-games__arrow:hover { border-color: #f5c04a; color: #f5c04a; }

.esm-game {
	background: var(--esm-d-panel);
	border: 1px solid var(--esm-d-line);
	border-radius: 16px;
	color: var(--esm-d-ink);
	cursor: pointer;
	display: grid;
	font: inherit;
	gap: 0;
	overflow: hidden;
	padding: 0;
	scroll-snap-align: start;
	text-align: left;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.esm-game:hover,
.esm-game:focus-visible {
	border-color: rgba(245, 192, 74, .55);
	box-shadow: 0 14px 36px rgba(0, 0, 0, .45), 0 0 0 1px rgba(245, 192, 74, .35), 0 0 26px rgba(245, 192, 74, .16);
	outline: none;
	transform: translateY(-3px);
}

.esm-game__cover {
	align-items: center;
	aspect-ratio: 4 / 5;
	background: linear-gradient(150deg, #1d1830 0%, #11141a 80%);
	display: flex;
	justify-content: center;
	overflow: hidden;
	position: relative;
}

.esm-game__cover img { height: 100%; object-fit: cover; width: 100%; display: block; }
.esm-game__ph { font-size: 40px; }

.esm-game__packs {
	background: rgba(8, 10, 14, .74);
	border-radius: 99px;
	bottom: 8px;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	left: 8px;
	letter-spacing: .04em;
	padding: 4px 9px;
	position: absolute;
	text-transform: uppercase;
}

.esm-game__ink { display: grid; gap: 7px; padding: 12px 12px 13px; }

.esm-game__title {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.25;
	text-wrap: pretty;
}

.esm-game__badge {
	align-items: start;
	color: var(--esm-d-muted);
	display: flex;
	font-size: 11px;
	gap: 6px;
	line-height: 1.35;
}

.esm-game__tick {
	background: rgba(245, 192, 74, .16);
	border-radius: 99px;
	flex: 0 0 auto;
	height: 13px;
	margin-top: 1px;
	position: relative;
	width: 13px;
}

.esm-game__tick::after {
	border-bottom: 2px solid #f5c04a;
	border-left: 2px solid #f5c04a;
	content: "";
	height: 3px;
	left: 3px;
	position: absolute;
	top: 3px;
	transform: rotate(-45deg);
	width: 6px;
}

.esm-game__cta {
	background: linear-gradient(180deg, #f7cc64 0%, #eab131 100%);
	border-radius: 10px;
	color: #17130a;
	font-size: 13px;
	font-weight: 800;
	margin-top: 2px;
	padding: 10px 12px;
	text-align: center;
}

/* ---- top-up modal ---- */

.esm-drawer__panel.is-dark {
	background: var(--esm-d-bg);
	color: var(--esm-d-ink);
	padding: 0 0 24px;
}

.esm-drawer__panel.is-dark .esm-drawer__close { background: rgba(255, 255, 255, .14); color: #fff; z-index: 2; }
.esm-drawer__panel.is-dark .esm-drawer__body { padding: 0 18px; }

.esm-topup__head {
	margin: 0 -18px 14px;
	overflow: hidden;
	position: relative;
}

.esm-topup__art { display: block; height: 168px; object-fit: cover; opacity: .85; width: 100%; }

.esm-topup__ink {
	background: linear-gradient(0deg, rgba(17, 20, 26, .96) 10%, rgba(17, 20, 26, .1) 100%);
	inset: auto 0 0 0;
	padding: 34px 18px 14px;
	position: absolute;
}

.esm-topup__head:not(:has(.esm-topup__art)) .esm-topup__ink { position: static; padding: 22px 18px 6px; }

.esm-topup__title { font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin: 0 34px 4px 0; }
.esm-topup__badge { align-items: center; color: #cfd5e3; display: flex; font-size: 12px; gap: 6px; margin: 0; }
.esm-topup__sub { color: var(--esm-d-muted); font-size: 12px; margin: 0 0 14px; }

.esm-form--coin .esm-field__label { color: var(--esm-d-ink); }

.esm-form--coin .esm-field input {
	background: var(--esm-d-panel);
	border-color: var(--esm-d-line);
	color: var(--esm-d-ink);
}

.esm-form--coin .esm-field input::placeholder { color: #6d768c; }
.esm-form--coin .esm-field input:focus { border-color: var(--esm-d-gold); }

.esm-form--coin .esm-total { border-color: var(--esm-d-line); }
.esm-form--coin .esm-total__row--sum { border-color: var(--esm-d-line); color: var(--esm-d-gold); }

.esm-btn--gold {
	background: linear-gradient(180deg, #f7cc64 0%, #eab131 100%);
	color: #17130a;
	font-weight: 800;
}

/* ---- package grid ---- */

.esm-packs {
	display: grid;
	gap: 9px;
	grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
}

.esm-pack {
	align-content: center;
	background: var(--esm-d-panel);
	border: 1px solid var(--esm-d-line);
	border-radius: 14px;
	color: var(--esm-d-ink);
	cursor: pointer;
	display: grid;
	font: inherit;
	gap: 1px;
	justify-items: center;
	min-height: 84px;
	padding: 11px 6px;
	text-align: center;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}

.esm-pack:hover { border-color: rgba(245, 192, 74, .45); transform: translateY(-1px); }
.esm-pack:focus-visible { outline: 2px solid var(--esm-d-gold); outline-offset: 2px; }

.esm-pack__coins {
	align-items: center;
	display: flex;
	font-size: 15px;
	font-weight: 700;
	gap: 5px;
	letter-spacing: -.01em;
	line-height: 1.1;
}

.esm-pack__glyph {
	background: radial-gradient(circle at 34% 30%, #ffe08a 0%, #f5c04a 52%, #c08a1c 100%);
	border-radius: 99px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
	display: inline-block;
	flex: 0 0 auto;
	height: 13px;
	width: 13px;
}

.esm-pack__unit {
	color: var(--esm-d-muted);
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.esm-pack__price { font-size: 15px; font-weight: 700; margin-top: 5px; white-space: nowrap; }

.esm-pack.is-on {
	background: rgba(245, 192, 74, .11);
	border-color: var(--esm-d-gold);
	box-shadow: 0 0 0 1px var(--esm-d-gold), 0 8px 26px rgba(245, 192, 74, .17);
}

.esm-pack.is-on .esm-pack__price { color: var(--esm-d-gold); }

/* ---- the same pills inside the checkout drawer ---- */

.esm-form--coin .esm-packs { margin-top: 2px; }

.esm-form--coin .esm-pack { min-height: 80px; }

@media (max-width: 420px) {
	.esm-packs { grid-template-columns: repeat(2, 1fr); }
	.esm-games { grid-auto-columns: minmax(168px, 1fr); }
	.esm-topup__art { height: 140px; }
}


/* ================= v1.4: one dark ground for the whole showcase =========
   The jersey rail, its cards and the COD drawer now sit on the same
   #11141a / #161b22 ground as the coin section, so the store reads as one
   surface rather than a light half and a dark half.

   The tracker matches it as of v1.4.1, so an SMS link out of a confirmation
   lands on the same surface the order was placed on.

   Jerseys keep their own accent: neon green for "collect at the door", gold
   reserved for coins, so the two payment behaviours never look alike.
==================================================================== */

.esm {
	--esm-ink: #e9ecf3;
	--esm-muted: #8b93a7;
	--esm-line: rgba(255, 255, 255, .09);
	--esm-accent: #2ee08a;
	--esm-accent-ink: #05170e;
	--esm-surface: #161b22;
	background: #11141a;
	border: 1px solid rgba(255, 255, 255, .06);
	border-radius: 20px;
}

.esm__heading { color: #f4f6fb; }
.esm-rail__title { color: #f4f6fb; }

.esm:not(.esm-track) .esm-card__media { background: linear-gradient(150deg, #1d2330 0%, #12161d 80%); }

.esm:not(.esm-track) .esm-card__hit {
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.esm:not(.esm-track) .esm-card__hit:hover,
.esm:not(.esm-track) .esm-card__hit:focus-visible {
	border-color: rgba(46, 224, 138, .5);
	box-shadow: 0 14px 36px rgba(0, 0, 0, .45), 0 0 0 1px rgba(46, 224, 138, .3);
}

.esm:not(.esm-track) .esm-card__cta { color: var(--esm-accent-ink); font-weight: 700; }
.esm:not(.esm-track) .esm-badge--more { background: rgba(0, 0, 0, .68); }
.esm-note--empty { background: rgba(255, 255, 255, .05); }
.esm:not(.esm-track) .esm-rail__track::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); }

/* ---- jersey checkout drawer ---- */

.esm-drawer__panel {
	background: #11141a;
	color: #e9ecf3;
	border: 1px solid rgba(255, 255, 255, .07);
	border-bottom: 0;
}

.esm-drawer__panel .esm-drawer__close { background: rgba(255, 255, 255, .14); color: #fff; }
.esm-drawer__panel .esm-drawer__sub { color: #8b93a7; }
.esm-drawer__panel .esm-drawer__title { color: #f4f6fb; }
.esm-drawer__panel .esm-gal-v__main { background: #161b22; }

.esm-drawer__panel .esm-field__label { color: #e9ecf3; }

.esm-drawer__panel .esm-field input,
.esm-drawer__panel .esm-field select,
.esm-drawer__panel .esm-field textarea {
	background: #161b22;
	border-color: rgba(255, 255, 255, .1);
	color: #e9ecf3;
}

.esm-drawer__panel .esm-field input::placeholder,
.esm-drawer__panel .esm-field textarea::placeholder { color: #6d768c; }

.esm-drawer__panel .esm-field input:focus,
.esm-drawer__panel .esm-field select:focus,
.esm-drawer__panel .esm-field textarea:focus { border-color: #2ee08a; }

.esm-drawer__panel .esm-sizes label { border-color: rgba(255, 255, 255, .12); color: #e9ecf3; }

.esm-drawer__panel .esm-sizes label:has(input:checked) {
	background: #2ee08a;
	border-color: #2ee08a;
	color: #05170e;
}

.esm-drawer__panel .esm-total { border-color: rgba(255, 255, 255, .14); }
.esm-drawer__panel .esm-total__row--sum { border-color: rgba(255, 255, 255, .14); }
.esm-drawer__panel .esm-btn { background: #2ee08a; color: #05170e; }
.esm-drawer__panel .esm-btn--gold { background: linear-gradient(180deg, #f7cc64 0%, #eab131 100%); color: #17130a; }
.esm-drawer__panel .esm-done p { color: #8b93a7; }

/* Coin panels keep the gold-tinted overrides declared earlier; they win on
   specificity through .is-dark, so nothing above needs undoing. */
.esm-drawer__panel.is-dark .esm-field select {
	background: var(--esm-d-panel);
	border-color: var(--esm-d-line);
	color: var(--esm-d-ink);
}

.esm-drawer__panel.is-dark .esm-field select:focus { border-color: var(--esm-d-gold); }

/* ---- helper text under a field ---- */

.esm-hint {
	color: #8b93a7;
	display: block;
	font-size: 12px;
	line-height: 1.4;
	margin: 2px 0 0;
	text-wrap: pretty;
}

/* ---- the hybrid split, so "pay now" is never mistaken for the total ---- */

.esm-total__row--now {
	border-top: 1px solid rgba(255, 255, 255, .14);
	color: #2ee08a;
	font-weight: 700;
	padding-top: 8px;
}

/* ---- platform toggle ---- */

.esm-plat { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }

.esm-plat__b {
	background: #161b22;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 12px;
	color: #e9ecf3;
	cursor: pointer;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	min-height: 46px;
	padding: 11px 12px;
}

.esm-plat__b:hover { border-color: rgba(245, 192, 74, .45); }

.esm-plat__b.is-on {
	background: rgba(245, 192, 74, .12);
	border-color: #f5c04a;
	box-shadow: 0 0 0 1px #f5c04a;
	color: #f5c04a;
}

.esm-plat__b:focus-visible { outline: 2px solid #f5c04a; outline-offset: 2px; }

/* ---- promo ribbon on a package pill ---- */

.esm-pack { min-height: 98px; padding-top: 32px; position: relative; }
.esm-form--coin .esm-pack { min-height: 94px; }

.esm-pack__promo {
	background: linear-gradient(180deg, #ff7a59 0%, #e8442b 100%);
	border-radius: 99px;
	color: #fff;
	font-size: 9px;
	font-weight: 800;
	/* Symmetric insets, not left:50% + translate: a shrink-to-fit absolute box
	   measured from the centre only gets half the pill to wrap in, which put a
	   two-line note on top of the coin count. */
	left: 4px;
	right: 4px;
	letter-spacing: .04em;
	line-height: 1.2;
	padding: 3px 7px;
	position: absolute;
	text-align: center;
	text-transform: uppercase;
	text-wrap: balance;
	top: -1px;
}

.esm-pack.is-on .esm-pack__promo { box-shadow: 0 2px 10px rgba(232, 68, 43, .45); }

/* Coin panels: re-assert the gold focus ring, which the jersey block above
   would otherwise win on source order. */
.esm-drawer__panel.is-dark .esm-field input:focus,
.esm-drawer__panel.is-dark .esm-field select:focus,
.esm-drawer__panel.is-dark .esm-field textarea:focus { border-color: var(--esm-d-gold); }

/* ---- tracker on the dark ground -------------------------------------------
   Same tokens as the showcase, plus the few tracker parts that carried their
   own light values: the step dots, the search field and the two result cards.
------------------------------------------------------------------------- */

.esm-track { padding-bottom: 32px; }

.esm-track .esm-track__form input {
	background: #161b22;
	border-color: rgba(255, 255, 255, .1);
	color: #e9ecf3;
}

.esm-track .esm-track__form input::placeholder { color: #6d768c; }
.esm-track .esm-track__form input:focus { border-color: var(--esm-accent); }
.esm-track .esm-btn { color: var(--esm-accent-ink); }

.esm-track .esm-order {
	background: #161b22;
	border-color: rgba(255, 255, 255, .08);
}

.esm-track .esm-order__title { color: #f4f6fb; }
.esm-track .esm-order__total { color: var(--esm-accent); }
.esm-track .esm-order__id code { color: #8b93a7; }

.esm-track .esm-steps__dot { background: #11141a; border-color: rgba(255, 255, 255, .16); }
.esm-track .esm-steps__item::before { background: rgba(255, 255, 255, .12); }
.esm-track .esm-steps__item.is-done .esm-steps__dot,
.esm-track .esm-steps__item.is-done::before { background: var(--esm-accent); border-color: var(--esm-accent); }

.esm-track .esm-order--idle { background: none; border-style: dashed; }
.esm-track .esm-order__meta dd { color: #e9ecf3; }

.esm-track .esm-note--ok { background: rgba(46, 224, 138, .12); color: #57e6a2; }
.esm-track .esm-note--bad { background: rgba(255, 122, 89, .12); color: #ff9c82; }

/* ================= v1.4.2: jersey card typography ======================
   Reported as near-invisible on mobile: the theme's own colour rules were
   winning over the card's inherited ink, so every string inside the card is
   now stated explicitly here, at card specificity, with !important on the
   colour and size only — the theme can still own layout.

   Hierarchy inside a card: white title, silver size chips, bright price,
   muted struck-through was-price. Nothing else is allowed to carry colour.
==================================================================== */

.esm .esm-card .esm-card__hit {
	gap: 14px;
	padding: 12px 12px 14px;
}

.esm .esm-card .esm-card__body {
	gap: 7px;
	padding: 2px 2px 0;
}

.esm .esm-card .esm-card__title {
	color: #ffffff !important;
	font-size: 16px !important;
	font-weight: 700;
	line-height: 1.3;
	text-wrap: pretty;
}

.esm .esm-card .esm-card__meta {
	color: #94a3b8 !important;
	display: inline-flex;
	font-size: 12px !important;
	font-weight: 600;
	letter-spacing: .02em;
	width: -moz-fit-content;
	width: fit-content;
	background: rgba(148, 163, 184, .12);
	border-radius: 99px;
	padding: 3px 9px;
}

.esm .esm-card .esm-card__price {
	align-items: baseline;
	color: #22c55e !important;
	display: flex;
	flex-wrap: wrap;
	font-size: 18px !important;
	font-weight: 800;
	gap: 4px 7px;
	letter-spacing: -.01em;
	margin-top: 1px;
}

.esm .esm-card .esm-card__was {
	color: #64748b !important;
	font-size: 13px !important;
	font-weight: 500;
	margin-left: 0;
	text-decoration: line-through;
}

.esm .esm-card .esm-card__from {
	color: #94a3b8 !important;
	font-size: 11px !important;
}

.esm .esm-card .esm-card__cta {
	color: #05170e !important;
	font-size: 13px !important;
	font-weight: 800;
	margin-top: 2px;
	padding: 11px 12px;
}

/* Coin packs sold without a variation table share this card; their price
   reads in gold so the two product families stay distinguishable. */
.esm .esm-card--coin .esm-card__price { color: #f5c04a !important; }

@media (max-width: 520px) {
	.esm .esm-card .esm-card__title { font-size: 16px !important; }
	.esm .esm-card .esm-card__price { font-size: 18px !important; }
}
.esm-sizegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.esm-sizerow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border:1px solid rgba(255,255,255,.14);border-radius:10px}
.esm-sizerow__name{font-weight:600;letter-spacing:.02em}
.esm-sizerow__qty{min-width:64px;min-height:44px}
.esm-field__note{font-weight:400;opacity:.7}