/*
 * Express Trade front end.
 *
 * Reuses express-shop's design language: Archivo, the violet-on-white
 * commercial palette, 900-weight tight-tracked headings, tabular figures, and
 * the store's own rules of no monospace and no uppercase letter-spaced labels.
 *
 * It falls back to its own copy of the token values under .et-account so it
 * renders correctly even when the storefront chrome, and therefore
 * express-shop-tokens, is not enqueued on the page.
 */

.et-account {
	--et-vio: #6D28D9;
	--et-vio-hover: #5B21B6;
	--et-ink: #1A1030;
	--et-ink-2: #3D3357;
	--et-mut: #6B6280;
	--et-card: #FFFFFF;
	--et-bg: #FFFFFF;
	--et-sunk: #F4F3F7;
	--et-line: #E4DEF2;
	--et-line-2: #F0EBFA;
	--et-tint: #F3EDFF;
	--et-tint-e: #DCD0F5;
	--et-ok: #0F7B4F;
	--et-ok-bg: #E8F5EE;
	--et-warn: #8A5A00;
	--et-warn-bg: #FBF3DF;
	--et-err: #B3261E;
	--et-err-bg: #FBECEB;
	--et-ds: #185FA5;
	--et-ds-bg: #E6F1FB;
	--et-r-sm: 8px;
	--et-r-md: 10px;
	--et-r-lg: 14px;
	--et-r-full: 980px;

	max-width: 900px;
	margin: 0 auto;
	padding: 0 20px 64px;
	font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	color: var(--et-ink);
}
/* The theme (Kirki) sets headings and controls to Inter with a rule that beats
   inheritance, so force Archivo across the trade UI. Scoped to .et-account so
   nothing leaks to the rest of the site. */
.et-account,
.et-account h1, .et-account h2, .et-account h3,
.et-account p, .et-account span, .et-account label, .et-account small,
.et-account input, .et-account select, .et-account button, .et-account a {
	font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}
.et-account *,
.et-account *::before,
.et-account *::after { box-sizing: border-box; }
.et-num { font-variant-numeric: tabular-nums; }
/* The product filter (category rail + search) and the checkout step-swap hide
   elements via the [hidden] attribute. Several trade elements set an explicit
   display (grid/flex) that beats the user-agent [hidden] rule, so force it here,
   scoped to the trade UI so nothing leaks to the rest of the site. */
.et-account [hidden] { display: none !important; }
.et-account :focus-visible { outline: 2px solid var(--et-vio); outline-offset: 3px; border-radius: var(--et-r-sm); }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* eyebrow: NOT uppercase-with-tracking (banned in this system). Small, violet,
   weight-led. */
.et-eyebrow {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--et-vio);
	margin-bottom: 8px;
}

/* ---------------------------------------------------------------- hero + type */
/* The /trade hero: a tint band echoing the refer page. Full-bleed within the
   account wrapper via negative side margins, cancelled by its own padding. */
.et-auth .et-hero {
	margin: 0 -20px 0;
	padding: 48px 20px 40px;
	background: var(--et-tint);
	border-bottom: 1px solid var(--et-tint-e);
	text-align: center;
}
.et-badge {
	display: inline-block;
	margin-bottom: 16px;
	padding: 6px 14px;
	border-radius: var(--et-r-full);
	background: var(--et-vio);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.et-hero__title {
	margin: 0 0 12px;
	font-size: 52px;
	font-weight: 900;
	letter-spacing: -0.045em;
	line-height: 0.99;
	text-wrap: balance;
	color: var(--et-ink);
}
.et-hero__sub {
	margin: 0 auto;
	max-width: 54ch;
	font-size: 18px;
	line-height: 1.5;
	color: var(--et-mut);
}
@media (max-width: 640px) { .et-hero__title { font-size: 38px; } }

/* highlights */
.et-highlights {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin: 28px 0 0;
}
.et-hl {
	background: var(--et-card);
	border: 1px solid var(--et-tint-e);
	border-radius: var(--et-r-md);
	padding: 20px;
}
.et-hl__ic {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 34px;
	margin-bottom: 12px;
	border-radius: 9px;
	background: var(--et-tint);
	color: var(--et-vio);
}
.et-hl__ic svg { width: 19px; height: 19px; }
.et-hl b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 4px; }
.et-hl span { font-size: 14px; line-height: 1.5; color: var(--et-ink-2); }
@media (max-width: 700px) { .et-highlights { grid-template-columns: 1fr; } }

/* the signup block, centred like the refer form */
.et-signup { max-width: 480px; margin: 32px auto 0; }
.et-form-intro { margin: 0 0 18px; font-size: 14px; line-height: 1.55; color: var(--et-mut); }

/* account type as two selectable cards */
.et-typepick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.et-type {
	text-align: left;
	border: 1px solid var(--et-line);
	border-radius: var(--et-r-md);
	padding: 12px 14px;
	background: var(--et-card);
	font-family: inherit;
	cursor: pointer;
}
.et-type b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--et-ink); }
.et-type span { display: block; font-size: 12.5px; color: var(--et-mut); margin-top: 2px; }
.et-type.is-active { border-color: var(--et-vio-deep); background: var(--et-tint); }
.et-type.is-active span { color: var(--et-ink-2); }

/* ---------------------------------------------------------------------- cards */
.et-card {
	background: var(--et-card);
	border: 1px solid var(--et-line);
	border-radius: var(--et-r-md);
	padding: 22px;
}
.et-card + .et-card { margin-top: 16px; }

/* --------------------------------------------------------------------- tabs */
.et-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	max-width: 460px;
	margin: 0 0 16px;
	padding: 5px;
	background: var(--et-sunk);
	border: 1px solid var(--et-line);
	border-radius: var(--et-r-md);
}
.et-tab {
	min-height: 44px;
	border: 0;
	border-radius: var(--et-r-sm);
	background: none;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	color: var(--et-mut);
	cursor: pointer;
}
.et-tab:hover { color: var(--et-ink); }
.et-tab.is-active {
	background: var(--et-card);
	color: var(--et-ink);
	font-weight: 700;
	box-shadow: 0 1px 3px rgba(17,12,34,.08);
}

/* --------------------------------------------------------------------- forms */
.et-form { max-width: 460px; }
.et-field { margin-bottom: 16px; }
.et-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--et-ink-2);
}
.et-account input[type="text"],
.et-account input[type="tel"],
.et-account input[type="email"],
.et-account input[type="password"],
.et-account input[type="search"],
.et-account input[type="number"],
.et-account select {
	width: 100%;
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid var(--et-line);
	border-radius: var(--et-r-sm);
	background: var(--et-card);
	font-family: inherit;
	font-size: 16px;
	color: var(--et-ink);
}
.et-account input:focus,
.et-account select:focus { border-color: var(--et-vio); }
.et-help { display: block; margin-top: 6px; font-size: 13px; color: var(--et-mut); }

/* -------------------------------------------------------------------- buttons */
.et-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	padding: 0 26px;
	border: 1px solid transparent;
	border-radius: var(--et-r-md);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
}
.et-btn--full { width: 100%; }
.et-btn--sm { min-height: 40px; font-size: 14px; padding: 0 16px; }
.et-btn--primary { background: var(--et-vio); color: #fff; box-shadow: 0 8px 22px rgba(109,40,217,.22); }
.et-btn--primary:hover { background: var(--et-vio-hover); }
.et-btn--primary:disabled { background: var(--et-sunk); color: var(--et-mut); box-shadow: none; cursor: not-allowed; border-color: var(--et-line); }
.et-btn--outline { background: var(--et-card); border-color: var(--et-line); color: var(--et-ink); }
.et-btn--outline:hover { border-color: var(--et-ink); }

/* ------------------------------------------------------------------ messages */
.et-form-msg,
.et-grid__msg { margin: 14px 0 0; font-size: 14px; line-height: 1.5; }
.et-form-msg:empty,
.et-grid__msg:empty { margin: 0; }
.et-form-msg.is-err,
.et-grid__msg.is-err { color: var(--et-err); }
.et-form-msg.is-ok,
.et-grid__msg.is-ok { color: var(--et-ok); }

/* -------------------------------------------------------------------- notice */
.et-notice__title { margin: 0 0 12px; font-size: 26px; font-weight: 900; letter-spacing: -0.03em; }
.et-notice__body { margin: 0 0 20px; font-size: 16px; line-height: 1.55; color: var(--et-ink-2); max-width: 60ch; }

/* ---------------------------------------------------------------- dash header */
.et-dash__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 6px;
}
.et-dash__title { margin: 0; font-size: 30px; font-weight: 900; letter-spacing: -0.035em; line-height: 1.05; }
.et-dash__lede { margin: 0 0 20px; font-size: 15px; line-height: 1.55; color: var(--et-mut); max-width: 64ch; }

/* two-page nav: Overview / Quick order */
.et-nav {
	display: flex;
	gap: 6px;
	width: max-content;
	max-width: 100%;
	margin: 0 0 20px;
	padding: 5px;
	background: var(--et-sunk);
	border: 1px solid var(--et-line);
	border-radius: var(--et-r-md);
	/* Six tabs never fit a phone: the bar scrolls sideways instead of squashing. */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	box-sizing: border-box;
}
.et-nav::-webkit-scrollbar { display: none; }
.et-nav__item {
	flex: 0 0 auto;
	min-height: 42px;
	padding: 0 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	border-radius: var(--et-r-sm);
	font-size: 14px;
	font-weight: 600;
	color: var(--et-mut);
	text-decoration: none;
}
.et-nav__item:hover { color: var(--et-ink); }
.et-nav__item.is-active {
	background: var(--et-card);
	color: var(--et-ink);
	font-weight: 700;
	box-shadow: 0 1px 3px rgba(17,12,34,.08);
}

/* quick order: category rail beside the grid */
.et-order-shell { display: flex; gap: 20px; align-items: flex-start; }
.et-cat-rail { width: 200px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 16px; }
.et-cat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 12px;
	border-radius: var(--et-r-sm);
	font-size: 14px;
	color: var(--et-ink-2);
	text-decoration: none;
	/* Rendered as a <button> now (client-side category filter), so reset the
	   native button chrome and let it fill the rail like the old links did. */
	width: 100%;
	border: 0;
	background: transparent;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}
.et-cat:hover { background: var(--et-sunk); }
.et-cat.is-active { background: var(--et-tint); color: var(--et-vio); font-weight: 700; }
.et-cat__n { font-size: 12px; color: var(--et-mut); font-weight: 500; }
.et-cat.is-active .et-cat__n { color: var(--et-vio); }
.et-order-main { flex: 1; min-width: 0; }

.et-balance__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.et-balance__head h2 { margin: 0; }

.et-lockbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 16px;
	padding: 14px 18px;
	background: var(--et-warn-bg);
	border: 1px solid #EDDFB6;
	border-left: 3px solid var(--et-warn);
	border-radius: var(--et-r-md);
	font-size: 14px;
	color: var(--et-ink-2);
}

/* ---------------------------------------------------------------------- grid */
.et-grid__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}
.et-grid__head h2 { margin: 0; font-size: 19px; font-weight: 900; letter-spacing: -0.03em; }
.et-grid__search { flex: 0 1 260px; }
.et-grid__search input { min-height: 42px; }

.et-grid__list { display: flex; flex-direction: column; }
.et-line {
	display: grid;
	grid-template-columns: 56px minmax(0,1fr) 92px 108px 84px 100px;
	align-items: center;
	gap: 14px;
	padding: 12px 4px;
	border-top: 1px solid var(--et-line-2);
}
.et-line:first-child { border-top: 0; }
.et-line.is-oos { opacity: 0.6; }
.et-line__img {
	width: 56px; height: 56px; object-fit: cover;
	border-radius: var(--et-r-sm);
	border: 1px solid var(--et-line-2);
	background: var(--et-sunk);
}
.et-line__id { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.et-line__name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.et-line__sku { font-size: 12px; color: var(--et-mut); }
.et-line__price { font-size: 15px; font-weight: 600; }
.et-line__avail { font-size: 13px; color: var(--et-mut); }
.et-oos-tag { color: var(--et-err); font-weight: 600; }
.et-qty { text-align: right; min-height: 42px; }
.et-line__dash { color: var(--et-mut); }
.et-line__total { text-align: right; font-size: 15px; font-weight: 700; }

.et-grid__foot {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--et-line);
}
.et-grid__empty { margin-right: auto; color: var(--et-mut); font-size: 14px; }
.et-grid__count { margin-right: auto; color: var(--et-vio); font-size: 13px; font-weight: 600; }
.et-grid__count:empty { margin-right: auto; }
.et-grid__label { color: var(--et-mut); font-size: 14px; }
.et-grid__total { font-size: 26px; font-weight: 900; letter-spacing: -0.03em; }

/* ------------------------------------------------------------------ balance */
.et-balance h2 { margin: 0 0 16px; font-size: 19px; font-weight: 900; letter-spacing: -0.03em; }
.et-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 12px; margin-bottom: 18px; }
.et-stat { padding: 16px 18px; border: 1px solid var(--et-line); border-radius: var(--et-r-md); }
.et-stat--danger { border-left: 3px solid var(--et-err); }
.et-stat__v { display: block; font-size: 26px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.05; }
.et-stat--danger .et-stat__v { color: var(--et-err); }
.et-stat__k { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--et-mut); }

.et-ledger { display: flex; flex-direction: column; }
.et-ledger__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 4px;
	border-top: 1px solid var(--et-line-2);
	flex-wrap: wrap;
}
.et-ledger__row:first-child { border-top: 0; }
.et-ledger__main { display: flex; flex-direction: column; gap: 2px; }
.et-ledger__label { font-size: 15px; font-weight: 600; }
.et-ledger__date { font-size: 13px; color: var(--et-mut); }
.et-ledger__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.et-track { font-size: 13px; color: var(--et-ds); }
.et-ledger__amt { font-size: 15px; font-weight: 700; }
.et-ledger__amt.is-pay { color: var(--et-ok); }

/* ------------------------------------------------------------------- pills */
.et-pill { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: var(--et-r-full); letter-spacing: -0.01em; }
.et-pill--outstanding { background: var(--et-err-bg); color: var(--et-err); }
.et-pill--cancelled { background: var(--et-sunk); color: var(--et-mut); }
.et-pill--open { background: var(--et-ds-bg); color: var(--et-ds); }
.et-pill--settled,
.et-pill--paid { background: var(--et-ok-bg); color: var(--et-ok); }

.et-empty { color: var(--et-mut); font-size: 14px; padding: 8px 0; }

/* amend page */
.et-amend__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.et-amend__top .et-dash__lede { margin: 4px 0 0; }
.et-ship h2 { margin: 0 0 16px; font-size: 19px; font-weight: 900; letter-spacing: -0.03em; }
.et-ship__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.et-ship__address_1, .et-ship__address_2 { grid-column: 1 / -1; }
.et-amend__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
@media (max-width: 640px) { .et-ship__grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------- mobile */
@media (max-width: 640px) {
	.et-hero__title { font-size: 28px; }
	.et-order-shell { flex-direction: column; }
	.et-cat-rail {
		width: 100%;
		position: static;
		flex-direction: row;
		overflow-x: auto;
		gap: 6px;
		padding-bottom: 10px;
		border-bottom: 1px solid var(--et-line);
	}
	.et-cat { white-space: nowrap; }
	.et-line {
		grid-template-columns: 44px minmax(0,1fr) 96px;
		grid-template-areas:
			"img id price"
			"img avail qty"
			"total total total";
		gap: 4px 10px;
	}
	.et-line__name { font-size: 14px; line-height: 1.25; }
	.et-line__qty .et-qty, .et-qty { width: 96px; max-width: 100%; box-sizing: border-box; }
	.et-line__img { width: 44px; height: 44px; grid-area: img; }
	.et-line__id { grid-area: id; }
	.et-line__price { grid-area: price; text-align: right; }
	.et-line__avail { grid-area: avail; }
	.et-line__qty { grid-area: qty; justify-self: end; }
	.et-qty { width: 84px; }
	.et-line__total { grid-area: total; text-align: right; padding-top: 6px; border-top: 1px dashed var(--et-line-2); margin-top: 4px; }
	.et-dash__head { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
	.et-account * { transition: none !important; }
}

/* Wholesale minimum order: grid badge + product-page notice. */
.et-line__min {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 7px;
	border-radius: 10px;
	background: var(--et-tint);
	color: var(--et-vio);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .2px;
	vertical-align: middle;
}
.et-min-notice {
	margin: .5em 0 1em;
	padding: 8px 12px;
	border-radius: 8px;
	background: var(--et-tint, #F3EDFF);
	color: var(--et-ink, #1A1030);
	font-size: 14px;
	font-weight: 600;
}
.et-min-notice strong { color: var(--et-vio, #6D28D9); }

/* Products not priced for this trade account: greyed and locked in the grid. */
.et-line.is-untraded { opacity: .5; }
.et-line.is-untraded .et-line__img { filter: grayscale( 1 ); }
.et-untraded-tag { display: inline-flex; align-items: center; gap: 5px; color: var(--et-mut, #6B6280); font-weight: 600; }
.et-line__lock { color: var(--et-mut, #6B6280); display: inline-flex; }
.et-lock, .et-lock-inline { flex: none; }
.et-min-notice--lock { color: var(--et-mut, #6B6280); }
.et-min-notice--lock .et-lock-inline { vertical-align: middle; margin-right: 4px; }

/* Delivery address on the quick order page (place-order checkout step). */
.et-ship__note { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--et-mut); }
.et-field.is-required label::after { content: " *"; color: var(--et-err); }
.et-checkout { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-top: 18px; }
.et-checkout .et-btn { min-width: 200px; }
.et-checkout .et-grid__msg { align-self: stretch; text-align: right; margin: 0; }

/* ------------------------------------------------ cart bar + checkout review */
.et-cartbar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 12px 20px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	background: var(--et-ink); color: #fff;
	box-shadow: 0 -4px 24px rgba(26,16,48,0.22);
}
.et-cartbar__info { display: flex; flex-direction: column; line-height: 1.2; }
.et-cartbar__count { font-size: 12.5px; opacity: .8; }
.et-cartbar__total { font-size: 20px; font-weight: 900; letter-spacing: -0.02em; }
.et-cartbar__btn { min-width: 160px; }
/* Room so the fixed bar never hides the last product row. */
.et-order-shell { padding-bottom: 84px; }

.et-review__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.et-review__head h2 { margin: 0; font-size: 19px; font-weight: 900; letter-spacing: -0.03em; }
.et-review__list { display: flex; flex-direction: column; }
.et-review__row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--et-line); }
.et-review__name { font-weight: 600; }
.et-review__qty { color: var(--et-mut); font-size: 13.5px; }
.et-review__amt { min-width: 84px; text-align: right; font-weight: 700; }
.et-review__foot { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin: 14px 0 4px; }
.et-review__label { color: var(--et-mut); font-size: 14px; }
.et-review__total { font-size: 24px; font-weight: 900; letter-spacing: -0.03em; }
.et-review .et-ship { margin-top: 18px; }
.et-review .et-ship h3 { margin: 0 0 6px; font-size: 16px; font-weight: 800; }

/* ------------------------------------------------------------ placed summary */
.et-placed__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 8px; }
.et-placed__tick { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--et-ok); color: #fff; }
.et-placed__head h2 { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: -0.03em; }
.et-placed__sub { margin: 4px 0 0; color: var(--et-mut); font-size: 14px; line-height: 1.5; }
.et-placed__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.et-placed__block h3 { margin: 0 0 6px; font-size: 15px; font-weight: 800; }
.et-placed__addr { font-style: normal; color: var(--et-ink-2); line-height: 1.6; font-size: 14px; }
.et-placed__bal { font-size: 22px; font-weight: 900; letter-spacing: -0.02em; color: var(--et-err); margin: 0; }
.et-placed__bal span { display: block; font-size: 12.5px; font-weight: 600; color: var(--et-mut); letter-spacing: 0; }
.et-placed__note { margin: 10px 0 0; color: var(--et-mut); font-size: 13px; line-height: 1.5; }
.et-placed__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
@media (max-width: 640px) {
	.et-placed__cols { grid-template-columns: 1fr; }
	.et-cartbar__btn { min-width: 120px; }
}

/* ------------------------------------------------------ affiliate free items */
.et-free-tag { display: inline-block; padding: 2px 8px; border-radius: var(--et-r-full); background: var(--et-ok-bg); color: var(--et-ok); font-size: 12px; font-weight: 700; }
.et-line__worth { display: block; margin-top: 2px; font-size: 12px; color: var(--et-mut); }
.et-cartbar__sub { font-size: 12px; font-weight: 600; opacity: .8; letter-spacing: 0; }
.eprm-dash-logout .et-freebie-nav { margin-right: 8px; }

/* ------------------------------------------------------------ notifications */
.et-nav__item { position: relative; }
.et-nav__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: var(--et-r-full); background: var(--et-err); color: #fff; font-size: 11.5px; font-weight: 800; vertical-align: middle; }
.et-nav__dot { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--et-err); vertical-align: middle; }
.et-notes-card__actions { display: flex; gap: 8px; }
.et-notes { display: flex; flex-direction: column; gap: 8px; }
.et-notes__empty { margin: 0; }
.et-note { display: grid; grid-template-columns: 12px 1fr auto auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--et-line); border-radius: var(--et-r-md); background: var(--et-card); }
.et-note--low { border-left: 4px solid var(--et-warn); }
.et-note--out { border-left: 4px solid var(--et-err); }
.et-note__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--et-warn); }
.et-note--out .et-note__dot { background: var(--et-err); }
.et-note__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.et-note__name { font-weight: 700; letter-spacing: -0.01em; }
.et-note__sku { font-size: 12px; font-weight: 500; color: var(--et-mut); margin-left: 4px; }
.et-note__msg { font-size: 13.5px; color: var(--et-ink-2); }
.et-note--out .et-note__msg { color: var(--et-err); font-weight: 600; }
.et-note__time { font-size: 12px; color: var(--et-mut); text-align: right; white-space: nowrap; }
.et-note__x { width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--et-sunk); color: var(--et-mut); font-size: 18px; line-height: 1; cursor: pointer; }
.et-note__x:hover { background: var(--et-err-bg); color: var(--et-err); }
.et-note.is-read { opacity: .6; }
.et-note.is-leaving { opacity: 0; transform: translateX(12px); transition: opacity .18s, transform .18s; }
.et-notes--history .et-note { grid-template-columns: 12px 1fr auto; }

/* ---------------------------------------------------------- balance / tracking */
.et-stat--ok { border-left: 3px solid var(--et-ok); }
.et-stat--ok .et-stat__v { color: var(--et-ok); }
.et-h2 { margin: 0 0 14px; font-size: 19px; font-weight: 900; letter-spacing: -0.03em; }
.et-pill--unpaid { background: var(--et-err-bg); color: var(--et-err); }
.et-pill--cancelled { background: var(--et-sunk); color: var(--et-mut); }
.et-ledger__note { display: block; font-size: 12.5px; color: var(--et-mut); }
.et-track__day { margin: 0; font-size: 14px; font-weight: 800; color: var(--et-ink-2); }
.et-track__dayhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 8px; }
.et-track__dayhead:first-of-type { margin-top: 6px; }
.et-track__n { margin-left: 8px; font-size: 12px; font-weight: 700; color: var(--et-mut); }
.et-track__list { display: flex; flex-direction: column; border: 1px solid var(--et-line-2); border-radius: 12px; overflow: hidden; }
.et-track__row {
	display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
	padding: 12px 14px; border-top: 1px solid var(--et-line-2); background: var(--et-card, #fff);
}
.et-track__row:first-child { border-top: 0; }
.et-track__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 320px; }
.et-track__name { font-weight: 600; color: var(--et-ink-2); }
.et-track__addr { font-size: 13px; color: var(--et-ink-2); }
.et-track__items { font-size: 12.5px; color: var(--et-mut); }
.et-track__num { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.et-track__code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; font-weight: 700; letter-spacing: .4px;
	padding: 6px 10px; border-radius: 8px; background: var(--et-tint, #F3EDFF); color: var(--et-vio, #6D28D9);
}
.et-copy.is-copied { background: var(--et-ok, #15803D) !important; border-color: var(--et-ok, #15803D) !important; color: #fff !important; }

/* Storefront: wholesale minimum badge next to the trade price. */
.et-min-badge {
	display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px; vertical-align: middle;
	background: #F3EDFF; color: #6D28D9; font-size: 11px; font-weight: 700; letter-spacing: .2px; white-space: nowrap;
}
.et-overview__link { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }

/* ------------------------------------------------------------- paste-to-map */
.et-paste { margin: 0 0 16px; padding: 14px; border: 1px dashed var(--et-tint-e); border-radius: var(--et-r-md); background: var(--et-tint); }
.et-paste label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; color: var(--et-ink-2); }
.et-account .et-paste__box { width: 100%; min-height: 76px; padding: 10px 14px; border: 1px solid var(--et-line); border-radius: var(--et-r-sm); background: var(--et-card); font-family: inherit; font-size: 15px; color: var(--et-ink); resize: vertical; }
.et-paste .et-help { margin-top: 6px; }

/* activity rows on the Notifications tab + "on order" marker in amend */
.et-note--act { border-left: 4px solid var(--et-tint-e); }
.et-note--act-placed, .et-note--act-payment, .et-note--act-tracking { border-left-color: var(--et-ok); }
.et-note--act-released, .et-note--act-label { border-left-color: var(--et-vio); }
.et-note--act-cancelled { border-left-color: var(--et-mut); }
.et-note__icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--et-sunk); color: var(--et-ink-2); font-size: 12px; font-weight: 800; }
.et-notes--history .et-note--act { grid-template-columns: 22px 1fr auto; }
.et-line__onorder { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--et-r-full); background: var(--et-tint); color: var(--et-vio); font-size: 11px; font-weight: 700; vertical-align: middle; }
.et-line.is-on-order { background: var(--et-tint); border-radius: var(--et-r-sm); }
.et-amend__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }

/* payment received */
.et-placed__tick--wait { background: var(--et-warn); font-size: 22px; font-weight: 900; }
.et-paid-banner { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--et-ok); border-left-width: 4px; border-radius: var(--et-r-md); background: var(--et-ok-bg); color: var(--et-ink); }
.et-paid-banner__tick { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--et-ok); color: #fff; font-weight: 900; flex-shrink: 0; }
.et-paid-banner > div { flex: 1; font-size: 14.5px; line-height: 1.45; }

/* Balance: crypto top-up panel. */
.et-topup__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; }
@media (max-width: 720px) { .et-topup__grid { grid-template-columns: 1fr; } }
.et-topup__field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--et-ink-2); }
.et-topup__field input, .et-topup__field select { min-height: 42px; padding: 0 12px; border: 1px solid var(--et-line); border-radius: 10px; font: inherit; font-size: 15px; }
.et-topup__wallet { grid-column: 1 / -1; padding: 12px 14px; border-radius: 12px; background: var(--et-tint, #F3EDFF); font-size: 13px; }
.et-topup__wallet code { display: block; margin-top: 4px; font-size: 14px; font-weight: 700; word-break: break-all; color: var(--et-vio, #6D28D9); }
.et-topup__steps { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--et-mut); }
.et-topup__actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Nothing squashes sideways on a phone: the page clips, rows wrap, bars scroll. */
.et-account { overflow-x: hidden; max-width: 100%; }
.et-account img, .et-account svg { max-width: 100%; }
.et-account .et-card { min-width: 0; }
.et-balance__head, .et-grid__head, .et-grid__foot, .et-review__head, .et-placed__actions, .et-notes-card__actions { flex-wrap: wrap; }
@media (max-width: 640px) {
	.et-nav { width: 100%; }
	.et-nav__item { padding: 0 13px; font-size: 13.5px; }
	.et-dash__title { font-size: 24px; }
	.et-stats { grid-template-columns: 1fr 1fr; }
	.et-stat__v { font-size: 20px; }
	.et-note { grid-template-columns: 12px 1fr auto; }
	.et-note__time { grid-column: 2; font-size: 12px; }
	.et-note__x { grid-column: 3; grid-row: 1; }
	.et-track__code { flex: 1 1 auto; text-align: center; }
	.et-review__row { grid-template-columns: 1fr auto; }
	.et-review__qty { grid-column: 1; font-size: 12.5px; color: var(--et-mut); }
	.et-cartbar { left: 0; right: 0; }
}

/* Sign-up: business address block. */
.et-reg-addr { border: 1px solid var(--et-line); border-radius: var(--et-r-md); padding: 14px 14px 4px; margin: 0 0 16px; min-width: 0; }
.et-reg-addr legend { padding: 0 6px; font-size: 14px; font-weight: 700; color: var(--et-ink-2); }
.et-reg-addr > .et-help { display: block; margin: 0 0 12px; }
.et-reg-addr .et-ship__grid label { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--et-ink-2); }
.et-reg-addr .et-ship__grid input { margin-top: 6px; }

/* Placed / paid boards: figures stay on one line, buttons stack full width on phones. */
.et-placed__bal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; }
.et-placed__bal .woocommerce-Price-amount, .et-placed__bal bdi { white-space: nowrap; }
.et-placed__bal .woocommerce-Price-amount, .et-placed__bal .woocommerce-Price-currencySymbol { display: inline; font-size: inherit; font-weight: inherit; color: inherit; }
@media (max-width: 640px) {
	.et-placed__actions, .et-paid__actions { flex-direction: column; align-items: stretch; }
	.et-placed__actions .et-btn, .et-paid__actions .et-btn { width: 100%; }
}

/* =====================================================================
   Compact list style, used by every list in the portal (orders, charges,
   payments, top-ups, tracking, notifications). One row per item: what it
   is on the left, its state and amount on the right. Tight on desktop,
   tighter on phones, always inside a card with a side gutter.
   ===================================================================== */
.et-card { padding: 18px 20px; }
.et-card + .et-card { margin-top: 12px; }
.et-h2 { font-size: 17px; margin-bottom: 10px; }
.et-balance__head { margin-bottom: 10px; }
.et-balance__head h2 { font-size: 18px; margin: 0; }
.et-dash__lede { font-size: 14px; margin-bottom: 14px; }
.et-help { font-size: 12.5px; }
.et-empty { font-size: 13.5px; padding: 6px 0; }

.et-ledger__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 2px 12px;
	padding: 9px 0;
	border-top: 1px solid var(--et-line-2);
}
.et-ledger__main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.et-ledger__label { font-size: 14px; font-weight: 700; line-height: 1.25; }
.et-ledger__date { font-size: 12.5px; color: var(--et-mut); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.et-ledger__note { font-size: 12px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.et-ledger__meta { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: nowrap; }
.et-ledger__amt { font-size: 14px; font-weight: 800; white-space: nowrap; }
.et-ledger__meta .et-track { font-size: 11.5px; }
.et-ledger__meta .et-btn--sm { min-height: 30px; padding: 0 10px; font-size: 12.5px; }
.et-pill { font-size: 11px; padding: 2px 8px; white-space: nowrap; }
.et-track__row { padding: 10px 12px; gap: 6px 12px; }
.et-track__list { border-radius: 10px; }
.et-track__code { font-size: 13px; padding: 5px 9px; }
.et-track__num .et-btn--sm { min-height: 32px; padding: 0 12px; font-size: 12.5px; }
.et-track__dayhead { margin: 14px 0 6px; }
.et-note { padding: 9px 12px; gap: 8px 10px; }
.et-note__name { font-size: 14px; }
.et-note__msg { font-size: 12.5px; }
.et-note__time { font-size: 11.5px; }
.et-notes { gap: 6px; }
.et-stats { gap: 8px; margin-bottom: 12px; }
.et-stat { padding: 11px 13px; }
.et-stat__v { font-size: 21px; }
.et-stat__k { font-size: 12px; margin-top: 2px; }
.et-lockbar { padding: 10px 14px; font-size: 13.5px; }

@media (max-width: 640px) {
	.et-account { padding-left: 12px; padding-right: 12px; }
	.et-card { padding: 14px; border-radius: 12px; }
	.et-card + .et-card { margin-top: 10px; }
	.et-dash__title { font-size: 22px; }
	.et-nav { margin-bottom: 14px; }
	.et-ledger__row { padding: 8px 0; gap: 1px 8px; }
	.et-ledger__label { font-size: 13.5px; }
	.et-ledger__date, .et-ledger__note { font-size: 12px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	.et-ledger__amt { font-size: 13.5px; }
	/* A row with Amend / Cancel puts its actions under the summary line. */
	.et-ledger__row.has-actions .et-ledger__meta { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; padding-top: 4px; }
	.et-ledger__meta .et-track { display: none; }
	.et-stats { grid-template-columns: 1fr 1fr; gap: 6px; }
	.et-stat { padding: 9px 11px; }
	.et-stat__v { font-size: 18px; }
	.et-track__who { flex-basis: 100%; }
	.et-track__num { width: 100%; justify-content: space-between; }
	.et-track__code { flex: 1 1 auto; text-align: center; }
	.et-note { grid-template-columns: 12px 1fr auto; padding: 8px 10px; }
	.et-note__time { grid-column: 2; }
	.et-note__x { grid-column: 3; grid-row: 1; }
	.et-review__row { grid-template-columns: 1fr auto; }
	.et-review__qty { grid-column: 1; font-size: 12.5px; color: var(--et-mut); }
	.et-placed__actions, .et-paid__actions { flex-direction: column; align-items: stretch; }
	.et-placed__actions .et-btn, .et-paid__actions .et-btn { width: 100%; }
}

/* Crypto top-up: branded coin picker. */
.et-coins { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 6px; }
.et-coin { position: relative; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px 12px; border: 1.5px solid var(--et-line); border-radius: 12px; background: var(--et-card); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.et-coin input { position: absolute; opacity: 0; width: 0; height: 0; }
.et-coin__logo { grid-row: 1 / 3; width: 34px; height: 34px; }
.et-coin__logo svg { width: 34px; height: 34px; display: block; }
.et-coin__name { font-size: 14px; font-weight: 800; color: var(--et-ink); }
.et-coin__net { font-size: 11.5px; font-weight: 600; color: var(--et-mut); }
.et-coin.is-on { border-color: var(--et-vio); box-shadow: 0 0 0 3px var(--et-tint); }
.et-coin:focus-within { outline: 2px solid var(--et-vio); outline-offset: 2px; }


/* UI RULE (2026-09-26): controls are one line; stacks on phones. */
.et-account .et-btn, .et-account .et-pill, .et-account .et-badge, .et-account .et-nav__item { white-space: nowrap; }
.et-account .et-btn { flex-shrink: 0; }
@media (max-width: 480px) {
	.et-account .et-typepick { grid-template-columns: 1fr; }
	.et-account .et-btn:not(.et-btn--sm):not(.et-btn--inline) { width: 100%; }
}


/* ===========================================================================
   UI RULE 2026-09-26: Payouts page (figures as a ledger, transaction cards),
   the category rail as a scroll row at the top, and the quick-order rows
   rebuilt for phones with a quantity stepper.
   =========================================================================== */
.et-c-vio { color: var(--et-vio) !important; }
.et-c-ok { color: var(--et-ok) !important; }
.et-c-warn { color: var(--et-warn) !important; }
.et-figures { border: 1px solid var(--et-line); border-radius: var(--et-r-lg); overflow: hidden; background: var(--et-card); margin-bottom: 8px; }
.et-figures__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--et-line); font-size: 14px; font-weight: 600; color: var(--et-ink-2); min-width: 0; }
.et-figures__row:last-child { border-bottom: 0; }
.et-figures__row > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.et-figures__row > b { flex: 0 0 auto; font-size: 17px; font-weight: 900; letter-spacing: -0.02em; color: var(--et-ink); white-space: nowrap; }
.et-figures__row.is-lead { background: var(--et-tint); }
.et-figures__note { margin: 0 0 16px; }
@media (min-width: 700px) {
	.et-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.et-figures__row:nth-child(odd) { border-right: 1px solid var(--et-line); }
	.et-figures__row:nth-last-child(-n+2) { border-bottom: 0; }
}

.et-wallet__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.et-wallet__head .et-h2 { margin: 0; }
.et-wallet__addr { display: block; font-size: 13px; color: var(--et-vio); background: var(--et-tint); padding: 8px 10px; border-radius: var(--et-r-sm); word-break: break-all; margin: 0 0 8px; }
.et-fold { margin-top: 8px; }
.et-fold > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--et-line); border-radius: var(--et-r-md); font-size: 14px; font-weight: 700; color: var(--et-ink); white-space: nowrap; }
.et-fold > summary::-webkit-details-marker { display: none; }
.et-fold > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--et-mut); border-bottom: 2px solid var(--et-mut); transform: rotate(45deg); margin-top: -3px; }
.et-fold[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.et-fold > form { margin-top: 12px; }

.et-txs { display: flex; flex-direction: column; gap: 10px; }
.et-tx { border: 1px solid var(--et-line); border-radius: var(--et-r-lg); padding: 12px 14px; background: var(--et-card); }
.et-tx__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: var(--et-mut); font-weight: 600; }
.et-tx__when { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.et-tx__mid { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 6px; min-width: 0; }
.et-tx__crypto { font-size: 16px; font-weight: 700; color: var(--et-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.et-tx__gbp { flex: 0 0 auto; font-size: 22px; font-weight: 900; letter-spacing: -0.02em; color: var(--et-ok); white-space: nowrap; }
.et-tx.is-sending .et-tx__gbp, .et-tx.is-sending .et-tx__bot b { color: var(--et-ds); }
.et-tx.is-skipped .et-tx__gbp, .et-tx.is-skipped .et-tx__bot b, .et-tx.is-skipped .et-tx__crypto { color: var(--et-mut); }
.et-tx__bot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--et-line); font-size: 13px; color: var(--et-mut); }
.et-tx__bot a { color: var(--et-vio); font-weight: 700; text-decoration: none; white-space: nowrap; }
.et-tx__bot b { color: var(--et-ink); font-weight: 800; white-space: nowrap; }
.et-pill--warn { background: var(--et-warn-bg); color: var(--et-warn); }
@media (min-width: 700px) { .et-txs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- category rail: one row at the top that scrolls, pills, never wraps --- */
.et-order-shell { flex-direction: column; }
.et-cat-rail {
	width: 100%; position: sticky; top: 0; z-index: 5;
	flex-direction: row; gap: 6px;
	overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
	padding: 8px 0 10px; margin: 0;
	background: var(--et-bg);
	border-bottom: 1px solid var(--et-line);
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
	mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.et-cat-rail::-webkit-scrollbar { display: none; }
.et-cat {
	flex: 0 0 auto; width: auto; min-height: 36px;
	padding: 0 12px; gap: 6px;
	border: 1px solid var(--et-line); border-radius: var(--et-r-full);
	background: var(--et-card); color: var(--et-ink-2);
	font-size: 14px; font-weight: 600; white-space: nowrap;
}
.et-cat:hover { background: var(--et-sunk); }
.et-cat.is-active { background: var(--et-ink); border-color: var(--et-ink); color: #fff; font-weight: 700; }
.et-cat__n { font-size: 12px; font-weight: 600; color: var(--et-mut); }
.et-cat.is-active .et-cat__n { color: rgba(255,255,255,.75); }
.et-order-main { width: 100%; }
.et-grid__head { margin-top: 4px; }
.et-grid__search { flex: 1 1 220px; }

/* --- quantity stepper --- */
.et-stepper { display: inline-flex; align-items: stretch; height: 40px; border: 1px solid var(--et-line); border-radius: var(--et-r-md); overflow: hidden; background: var(--et-card); }
.et-step { width: 36px; border: 0; background: transparent; font: inherit; font-size: 20px; line-height: 1; color: var(--et-ink); cursor: pointer; padding: 0; flex: 0 0 auto; }
.et-step:hover { background: var(--et-sunk); }
.et-step:disabled { color: var(--et-line); cursor: default; }
.et-stepper .et-qty { width: 44px; min-height: 0; height: 100%; border: 0; border-left: 1px solid var(--et-line); border-right: 1px solid var(--et-line); border-radius: 0; text-align: center; font-weight: 700; padding: 0; -moz-appearance: textfield; }
.et-stepper .et-qty::-webkit-outer-spin-button, .et-stepper .et-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.et-line.has-qty { background: var(--et-tint); margin: 0 -4px; padding-left: 8px; padding-right: 8px; border-radius: var(--et-r-sm); }
.et-line.has-qty + .et-line { border-top-color: transparent; }
.et-line { grid-template-columns: 56px minmax(0,1fr) 92px 108px auto 100px; }

@media (max-width: 640px) {
	.et-dash__head { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 10px; }
	.et-dash__head .et-btn--sm { flex: 0 0 auto; }
	.et-dash__lede { font-size: 14px; }
	.et-cat-rail { padding-bottom: 8px; border-bottom: 0; }
	.et-grid__head h2 { font-size: 17px; }
	.et-line {
		grid-template-columns: 48px minmax(0,1fr) auto;
		grid-template-areas:
			"img id qty"
			"img meta meta";
		gap: 2px 10px;
		padding: 10px 0;
		align-items: start;
	}
	.et-line__img { width: 48px; height: 48px; grid-area: img; }
	.et-line__id { grid-area: id; align-self: center; min-height: 40px; justify-content: center; }
	.et-line__name { font-size: 14px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	.et-line__sku { display: none; }
	.et-line__price { grid-area: meta; font-size: 12.5px; font-weight: 600; color: var(--et-mut); text-align: left; }
	.et-line__price .et-free-tag { display: none; }
	.et-line__avail { grid-area: meta; justify-self: end; font-size: 12.5px; }
	.et-line__qty { grid-area: qty; justify-self: end; align-self: center; }
	.et-line__total { display: none; }
	.et-stepper { height: 36px; }
	.et-step { width: 32px; font-size: 18px; }
	.et-stepper .et-qty { width: 38px; }
	.et-line.has-qty { margin: 0; padding-left: 6px; padding-right: 6px; }
	.et-grid__foot { flex-wrap: wrap; justify-content: space-between; }
	.et-cartbar { padding: 10px 16px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
	.et-cartbar__total { font-size: 18px; }
}

/* Stepper input: a number box in a flex row keeps its intrinsic width unless told otherwise. */
.et-stepper .et-qty { flex: 0 0 44px; min-width: 0; width: 44px; }
.et-figures--one { grid-template-columns: 1fr; }
.et-figures--one .et-figures__row { border-right: 0; }
.et-figures__row > b small { font-size: 12px; font-weight: 600; color: var(--et-mut); letter-spacing: 0; }
@media (max-width: 640px) {
	.et-stepper .et-qty { flex: 0 0 38px; width: 38px; }
	.et-dash__head { flex-direction: column; align-items: flex-start; gap: 8px; }
	.et-dash__title { font-size: 28px; }
}

@media (max-width: 640px) {
	.et-review__foot { flex-direction: column; align-items: flex-end; gap: 2px; }
	.et-review__row { grid-template-columns: 1fr auto; }
	.et-review__row .et-review__name { grid-column: 1 / -1; }
}

/* Stepper number sits on the centre line: no theme padding, no inherited line-height. */
.et-stepper .et-qty { padding: 0 !important; margin: 0; line-height: 1 !important; height: 100%; min-height: 0 !important; box-sizing: border-box; display: block; font-size: 15px; -webkit-appearance: none; appearance: none; }

/* Coin icons (USDT, TRX): inline, on the text's centre line, never scaled by the theme. */
.et-coinic { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: 5px; border-radius: 50%; flex: none; }
.et-coinword { white-space: nowrap; }
.et-tx__crypto .et-coinic { width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; }

/* The portal styles every img as a framed thumbnail; the coin icons are not thumbnails. */
.et-account img.et-coinic, .et-account .et-coinic { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; width: 16px !important; height: 16px !important; box-sizing: content-box; }
.et-account .et-tx__crypto img.et-coinic { width: 18px !important; height: 18px !important; }


/* ===========================================================================
   Payouts page 2026-09-26 (Option C): transactions as rows, an Orders tab
   for self-serve requests as cards, pills to switch.
   =========================================================================== */
/* The Transactions / Orders switch: a bare row of pills, 24px of air above, 16px below, no box. */
.et-switch { display: flex; gap: 8px; margin: 24px 0 16px; padding: 0; overflow-x: auto; scrollbar-width: none; background: none; border: 0; }
.et-switch::-webkit-scrollbar { display: none; }
.et-switch .et-cat { flex: 0 0 auto; min-height: 40px; padding: 0 16px; }
.et-switch + .et-card { margin-top: 0; }
.et-txrows { display: flex; flex-direction: column; border: 1px solid var(--et-line); border-radius: var(--et-r-lg); overflow: hidden; }
.et-txrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--et-line); }
.et-txrow:last-child { border-bottom: 0; }
.et-txrow__l1 { font-size: 15px; font-weight: 700; color: var(--et-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.et-txrow__amt { font-size: 17px; font-weight: 900; letter-spacing: -0.02em; color: var(--et-ok); white-space: nowrap; text-align: right; }
.et-txrow__l2 { grid-column: 1; font-size: 12.5px; color: var(--et-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.et-txrow__l2 a { color: var(--et-vio); font-weight: 700; text-decoration: none; }
.et-txrow__after { grid-column: 2; font-size: 12.5px; color: var(--et-mut); white-space: nowrap; text-align: right; }
.et-txrow__after b { color: var(--et-ink); font-weight: 800; }
.et-txrow.is-sending .et-txrow__amt, .et-txrow.is-sending .et-txrow__after b { color: var(--et-ds); }
.et-txrow.is-skipped .et-txrow__amt, .et-txrow.is-skipped .et-txrow__after b, .et-txrow.is-skipped .et-txrow__l1 { color: var(--et-mut); }
.et-txrow .et-pill { height: 20px; padding: 0 8px; font-size: 11.5px; }
.et-account .et-txrow__l1 img.et-coinic { width: 18px !important; height: 18px !important; margin-right: 0; }

.et-ocards { display: flex; flex-direction: column; gap: 10px; }
.et-ocard { border: 1px solid var(--et-line); border-radius: var(--et-r-lg); padding: 12px 14px; background: var(--et-card); }
.et-ocard__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.et-ocard__id { font-size: 15px; font-weight: 800; color: var(--et-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.et-ocard__when { font-size: 12.5px; font-weight: 600; color: var(--et-mut); margin-left: 6px; }
.et-ocard__sum { margin-top: 6px; font-size: 13.5px; color: var(--et-ink-2); }
.et-ocard__sum b { color: var(--et-ink); font-weight: 800; }
.et-ocard__items { list-style: none; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px dashed var(--et-line); display: flex; flex-direction: column; gap: 4px; }
.et-ocard__items li { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--et-ink-2); }
.et-ocard__items li span:first-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.et-ocard__items li span:last-child { flex: 0 0 auto; color: var(--et-mut); }
.et-ocard__more { color: var(--et-mut); font-size: 12.5px; }
.et-ocard__bot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--et-line); font-size: 12.5px; color: var(--et-mut); }
.et-ocard__to { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.et-ocard__track { flex: 0 0 auto; color: var(--et-vio); font-weight: 700; text-decoration: none; white-space: nowrap; }
.et-ocard__track.is-none { color: var(--et-mut); font-weight: 600; }
@media (min-width: 700px) { .et-ocards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===========================================================================
   Basket bar 2026-09-26: floats inset from the screen edges, always in view on
   the shop step, one height everywhere; count and total left, Checkout right.
   =========================================================================== */
.et-cartbar {
	left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	max-width: 720px; margin: 0 auto; min-height: 64px; height: 64px;
	padding: 10px 10px 10px 18px; gap: 12px; border-radius: 16px;
	box-shadow: 0 12px 32px rgba(26, 16, 48, 0.32);
}
.et-cartbar__info { min-width: 0; }
.et-cartbar__count { font-size: 12px; white-space: nowrap; }
.et-cartbar__total { font-size: 18px; white-space: nowrap; }
.et-cartbar__sub { display: none; }
.et-cartbar .et-cartbar__btn { flex: 0 0 auto; min-width: 0; height: 44px; min-height: 44px; padding: 0 22px; border-radius: 12px; font-size: 15px; white-space: nowrap; }
.et-cartbar .et-cartbar__btn:disabled { background: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.55); box-shadow: none; cursor: default; border-color: transparent; }
.et-cartbar.is-empty .et-cartbar__total { opacity: 0.6; }
.et-order-shell { padding-bottom: 100px; }
@media (max-width: 640px) {
	.et-cartbar { padding: 10px 10px 10px 16px; }
	.et-cartbar__total { font-size: 18px; }
}

/* The portal makes every button full width under 480px; the basket bar's Checkout is the exception. */
.et-account .et-cartbar .et-cartbar__btn, .et-cartbar .et-cartbar__btn { width: auto !important; flex: 0 0 auto; }

/* Picked rows are tinted without touching padding or margin, so the stepper never moves (2026-09-26). */
.et-line.has-qty, .et-line.has-qty:first-child { margin: 0 !important; padding-left: 4px !important; padding-right: 4px !important; background: var(--et-tint); box-shadow: 0 0 0 4px var(--et-tint); border-radius: 6px; }
@media (max-width: 640px) {
	.et-line, .et-line.has-qty { padding-left: 0 !important; padding-right: 0 !important; }
	.et-stepper { height: 34px; }
	.et-step { width: 30px; font-size: 17px; }
	.et-stepper .et-qty { flex: 0 0 34px; width: 34px; font-size: 14px; }
}
@media (max-width: 640px) { .et-line.has-qty:first-child { padding-left: 0 !important; padding-right: 0 !important; } }

/* Primary link-buttons keep white text even where the page styles links violet (Request more on /refer/). */
.et-account a.et-btn--primary, .et-account a.et-btn--primary:visited, .et-account a.et-btn--primary:hover { color: #fff !important; }

/* ===========================================================================
   Account card 2026-09-27: dropship (then credit / wholesale) overview in the
   affiliate dashboard's shape. Purple card = what they owe or hold, in £ and
   in USDT / TRX; their Tron wallet beside it; figures; transactions.
   =========================================================================== */
.et-bcard-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; margin: 8px 0 24px; }
@media (min-width: 700px) { .et-bcard-wrap { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 32px; } }
.et-bcard {
	position: relative; display: flex; flex-direction: column; justify-content: space-between;
	aspect-ratio: 1.586 / 1; width: 100%; box-sizing: border-box; padding: clamp(16px, 4.5vw, 24px);
	border-radius: 18px; color: #FFFFFF; overflow: hidden; isolation: isolate;
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(168, 85, 247, 0.45) 0%, rgba(168, 85, 247, 0) 55%),
		radial-gradient(90% 80% at 0% 100%, rgba(109, 40, 217, 0.55) 0%, rgba(109, 40, 217, 0) 60%),
		linear-gradient(135deg, #1A1030 0%, #2A1454 48%, #3B1A78 100%);
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 24px 48px rgba(26, 16, 48, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.et-bcard::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
	background:
		repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.035) 0 1px, rgba(255, 255, 255, 0) 1px 3px),
		linear-gradient(110deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 32%, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.06) 78%, rgba(255, 255, 255, 0) 100%);
}
.et-bcard__top, .et-bcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.et-account img.et-bcard__logo { display: block; width: auto !important; height: clamp(14px, 3.6vw, 18px) !important; flex: 0 0 auto; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
.et-bcard__logo-text { font-weight: 900; letter-spacing: -0.02em; }
.et-bcard__kicker { font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.72); white-space: nowrap; }
.et-bcard__mid { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.et-bcard__label { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.66); }
.et-bcard__amt { font-size: clamp(30px, 8vw, 40px); font-weight: 900; letter-spacing: -0.02em; line-height: 1.05; white-space: nowrap; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
.et-bcard__amt .woocommerce-Price-amount, .et-bcard__amt bdi { color: #FFFFFF; }
.et-bcard__coins { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.86); }
.et-bcard__coins > span { white-space: nowrap; display: inline-flex; align-items: center; }
.et-bcard__name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.et-bcard__terms { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.78); white-space: nowrap; flex: 0 0 auto; }
.et-bcard__actions { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.et-bcard__link-label { font-size: 13px; font-weight: 600; color: var(--et-mut); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.et-bcard__link { width: 100%; box-sizing: border-box; min-height: 52px; padding: 0 16px; border: 1px solid var(--et-line); border-radius: var(--et-r-sm); background: var(--et-sunk); font-size: 15px; color: var(--et-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.et-bcard__buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.et-bcard__buttons .et-btn { flex: 1 1 140px; white-space: nowrap; min-height: 52px; font-size: 15px; justify-content: center; }
.et-bcard__hint { margin: 0; font-size: 13px; color: var(--et-mut); }
.et-txrow.is-out .et-txrow__amt { color: var(--et-ink); }
.et-txrow.is-in .et-txrow__amt { color: var(--et-ok); }
@media (max-width: 560px) { .et-bcard__buttons { flex-direction: column; } .et-bcard__buttons .et-btn { flex: 0 0 auto; width: 100%; } }

.et-txpanel { margin: 0 0 24px; }
.et-txrow__l1 { min-width: 0; }
.et-txrow__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.et-txrow__l1 .et-pill, .et-txrow__l1 img.et-coinic { flex: 0 0 auto; }
/* Phones: the order number never truncates; the word "Order" goes instead (2026-10-01). */
@media (max-width: 420px) { .et-txrow__w { display: none; } }
.et-acards__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.et-acards__head .et-help { margin: 0; flex: 1 1 200px; }
.et-acards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 700px) { .et-acards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.et-acard { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border: 1px solid var(--et-line); border-radius: var(--et-r-lg); background: var(--et-card); min-height: 68px; box-sizing: border-box; }
.et-acard[hidden] { display: none; }
.et-acard__img { width: 48px; height: 48px; aspect-ratio: 1 / 1; border-radius: var(--et-r-sm); background: var(--et-sunk); overflow: hidden; display: block; }
.et-account .et-acard__img img { width: 48px !important; height: 48px !important; object-fit: contain; padding: 0 !important; border: 0 !important; margin: 0 !important; box-shadow: none !important; background: none !important; display: block; }
.et-acard__main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.et-acard__name { font-size: 14px; font-weight: 700; color: var(--et-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.et-acard__meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--et-mut); white-space: nowrap; }
.et-acard__meta .et-pill { height: 20px; padding: 0 8px; font-size: 11.5px; flex: 0 0 auto; }
.et-acards__more { margin: 12px 0 0; }

/* Trade header + menu: the Inner Circle pills (2026-09-27). */
.et-dash .et-back { margin: 12px 0 8px; font-size: 14px; }
.et-dash .et-back a { color: var(--et-mut); text-decoration: none; font-weight: 600; }
.et-dash .et-dash__head { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.et-dash .et-dash__head > div { min-width: 0; }
.et-dash .et-dash__title { font-size: clamp(24px, 6.4vw, 32px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.et-dash .et-dash__head .et-btn { flex: 0 0 auto; }
.et-dash .et-nav.ea-pills { display: flex; gap: 8px; padding: 0 28px 0 0; margin: 0 0 20px; background: none; border: 0; border-radius: 0; box-shadow: none; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.et-dash .et-nav.ea-pills .et-nav__item { flex: 0 0 auto; min-height: 38px; padding: 0 14px; border: 1px solid var(--et-line); border-radius: var(--et-r-full); background: var(--et-card); color: var(--et-ink-2); font-size: 14px; font-weight: 600; box-shadow: none; white-space: nowrap; }
.et-dash .et-nav.ea-pills .et-nav__item.is-active { background: var(--et-ink); border-color: var(--et-ink); color: #fff; font-weight: 700; }
@media (max-width: 640px) { .et-dash .et-dash__head { flex-direction: row; align-items: center; } }
/* Same content width and gutters as the Inner Circle account page (theme container 1008px, 16px gutter on phones). */
.et-account.et-dash { max-width: 1008px; margin-left: auto; margin-right: auto; box-sizing: border-box; padding-left: 16px; padding-right: 16px; }
@media (min-width: 1041px) { .et-account.et-dash { padding-left: 0; padding-right: 0; } }
.et-switch .et-cat { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; white-space: nowrap; }
.et-switch .et-cat > span { white-space: nowrap; }
@media (max-width: 560px) { .et-acards__head .et-help { flex: 1 1 100%; } }