/* Evopure trade (evopure-trade.php), v4 design (web mock-up v3, Haseeb 19 Oct 2026), clean-up pass after his live review:
   one hero block that fits the first screen, horizontal product cards (two across on desktop), hairline price steps and quantity, the site's own
   buttons (.evo-btn from chrome.css: square at rest, corner + arrow on hover), a slim order bar, section links flush under the header.
   Every product photo sets its card's colour (--panel, --ink from the B2B content set). Scoped to .et so theme rules stay out. No shadows. */
body.evo-trade-surface { background: var(--evo-page, #FAF9F6); }
body.evo-trade-surface .site-main, body.evo-trade-surface .page-content { max-width: none; margin: 0; padding: 0; }
body.evo-trade-surface .page-header { display: none; }
body.evo-trade-surface .evo-wa-float { bottom: 76px !important; }
html.et-lock, html.et-lock body { overflow: hidden; }
.et { --ns: var(--e-global-typography-h1-font-family), "New Spirit", serif; --nh: var(--e-global-typography-subheadcaps-font-family), "Neue Haas Grotesk Display", sans-serif; --dm: var(--e-global-typography-body-font-family), "DM Sans", sans-serif;
	--navy: var(--evo-navy, #1D293B); --page: var(--evo-page, #FAF9F6); --slate: var(--evo-slate, #596C74); --line: rgba(29,41,59,.14); --coral: #EE6C4D; --money: #D8573A; --g: clamp(20px, 4.2vw, 60px); --bar: 60px;
	font-family: var(--dm); font-weight: 300; font-size: 16px; line-height: 1.6; color: var(--navy); padding-bottom: var(--bar); }
.et *, .et *::before, .et *::after { box-sizing: border-box; }
.et img { display: block; max-width: 100%; height: auto; }
.et a { color: inherit; text-decoration: none; }
.et p { margin: 0; }
/* the theme paints buttons pink on hover: every plain button here keeps its own colours */
.et :where(button:not(.evo-btn)) { font: inherit; color: inherit; cursor: pointer; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; text-transform: none; letter-spacing: normal; line-height: inherit; box-shadow: none; }
.et :where(button:not(.evo-btn):is(:hover, :focus, :active)) { background-color: transparent; color: inherit; box-shadow: none; outline: none; }      /* :where keeps these at the lowest weight, so each control's own style wins */
.et :is(button, a, input):focus-visible { outline: 1px solid var(--navy); outline-offset: 2px; }
.et-w { max-width: 1440px; margin: 0 auto; padding-left: var(--g); padding-right: var(--g); }
.et-eyb, .et-lbl { display: block; font: 600 10.5px/1.4 var(--nh); letter-spacing: .18em; text-transform: uppercase; }
.et-eyb { margin: 0 0 14px !important; }
.et-lbl { margin: 0 0 5px; font-size: 9.5px; opacity: .7; }
.et-h2 { margin: 0 0 12px; font: 300 italic clamp(30px, 3vw, 42px)/1.04 var(--ns); letter-spacing: -.005em; color: inherit; }
.et-h2 b { font-weight: 700; }
.et-sub { font-size: 16.5px; max-width: 32em; }
.et-lnk { font: 600 11px/1.2 var(--nh); letter-spacing: .16em; text-transform: uppercase; padding-bottom: 4px; border-bottom: 1px solid currentColor; }

/* the site's buttons, as chrome.css draws them; here: the ghost, a pair that never swaps fill, full width */
.et .evo-btn { --evo-cta-h: 50px; white-space: nowrap; }
.et .evo-btn--ghost { background: transparent !important; color: var(--navy) !important; border-color: var(--navy) !important; }
.et .evo-btn--ghost:is(:hover, :focus-visible, :active) { background: var(--navy) !important; color: #fff !important; }
.et-cta .evo-btn:is(:hover, :focus-visible, :active) { background: var(--navy) !important; color: #fff !important; border-color: var(--navy) !important; }
.et-cta .evo-btn--ghost:is(:hover, :focus-visible, :active) { background: transparent !important; color: var(--navy) !important; }
.et .et-full { width: 100%; --evo-cta-h: 54px; }
.et .evo-btn[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* hero: the photo, and one left-aligned block beside it (title, lede, seals, buttons, proof), fitted to the first screen */
.et-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: var(--et-hero-h, 680px); background: var(--panel); }
.et-hero__ph { position: relative; overflow: hidden; }
.et-hero__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.et-hero__ph::after { content: ""; position: absolute; inset: 0 0 0 auto; width: 18%; background: linear-gradient(90deg, transparent, var(--panel)); }
.et-hero__pn { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 32px var(--g) 32px clamp(32px, 4vw, 64px); max-width: 700px; }
.et-ttl { margin: 0 0 18px; font-family: var(--ns); font-style: italic; line-height: .92; letter-spacing: -.01em; color: var(--navy); }
.et-ttl span { display: block; font-weight: 300; }
.et-ttl b { display: block; font-weight: 700; }
.et-hero .et-ttl { font-size: clamp(54px, 5.6vw, 88px); }
.et-hero .et-ttl span { font-size: .72em; }
.et-ttl--in span, .et-ttl--in b { display: inline; }
.et-lede { margin: 0 0 26px !important; max-width: 30em; font: 300 clamp(17px, 1.35vw, 20px)/1.45 var(--dm); }
.et-seals { display: flex; gap: clamp(14px, 1.6vw, 26px); margin: 0 0 30px; }
.et-seal { display: flex; flex-direction: column; align-items: center; justify-content: center; width: clamp(96px, 8.4vw, 120px); aspect-ratio: 1; border-radius: 50%; text-align: center; }
.et-seal b { font: 700 italic clamp(26px, 2.3vw, 34px)/1 var(--ns); }
.et-seal small { margin-top: 5px; font: 600 8.5px/1.35 var(--nh); letter-spacing: .14em; text-transform: uppercase; }
.et-seal--n { background: var(--navy); color: #fff; }
.et-seal--c { background: #FAF4EA; color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.et-seal--r { background: var(--coral); color: #fff; }
.et-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin: 0 0 16px !important; }
.et-proof { font-size: 13px; opacity: .85; }
.et-proof a { border-bottom: 1px solid currentColor; }
.et-status, .et-notice { max-width: 34em; padding: 14px 18px; border: 1px solid var(--navy); background: rgba(255,255,255,.6); font-size: 15px; }
.et-notice { margin-top: 16px !important; }

/* section links: the site's caps nav, flush under the header's white bar */
.et-jump { position: sticky; top: var(--et-top, 0px); z-index: 40; background: var(--page); border-bottom: 1px solid var(--line); }
.et-jump .et-w { display: flex; align-items: center; gap: 34px; height: 52px; overflow-x: auto; scrollbar-width: none; }
.et-jump .et-w::-webkit-scrollbar { display: none; }
.et-jump a { position: relative; flex: none; padding: 19px 0; font: 600 10.5px/1 var(--nh); letter-spacing: .16em; text-transform: uppercase; color: var(--slate); }
.et-jump a.is-on, .et-jump a:hover { color: var(--navy); }
.et-jump a.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--navy); }
.et-jump__r { margin-left: auto; flex: none; font-size: 12.5px; color: var(--slate); }
.et-card, .et-kits, .et-terms, .et-split, #range { scroll-margin-top: calc(var(--et-top, 0px) + 64px); }

/* the range: horizontal cards, two across, photo beside the details */
.et-range { padding: 72px 0 0; }
.et-sech { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 40px; margin: 0 0 32px; }
.et-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.et-card { display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); background: var(--panel); color: var(--ink); border-radius: 0 20px 0 0; overflow: hidden; }
.et-card__ph { position: relative; min-height: 100%; overflow: hidden; }
.et-card__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.et-card__pn { display: flex; flex-direction: column; padding: 22px 24px 20px; min-width: 0; }
.et-card__head { margin: 0 0 6px; }
.et-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px !important; }
.et-tag { display: inline-block; padding: 5px 9px 4px; font: 600 9px/1 var(--nh); letter-spacing: .16em; text-transform: uppercase; box-shadow: inset 0 0 0 1px currentColor; }
.et-tag--f { background: var(--navy); color: #fff; box-shadow: none; }
.et-nm { margin: 0; font-family: var(--ns); font-style: italic; letter-spacing: -.01em; line-height: 1.02; color: inherit; }
.et-nm b { font-weight: 700; font-size: clamp(26px, 2.1vw, 32px); }
.et-nm i { display: block; font-weight: 300; font-size: clamp(19px, 1.5vw, 23px); }
.et-card__ln { margin: 0 0 14px !important; font-size: 14.5px; line-height: 1.4; min-height: 2.8em; opacity: .9; }
.et-pills { display: flex; gap: 6px; margin: 0 0 12px; overflow-x: auto; scrollbar-width: none; }
.et .et-pl { flex: none; display: inline-flex; align-items: center; height: 30px; padding: 0 11px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 28%, transparent); font-size: 13px; white-space: nowrap; color: var(--ink); transition: box-shadow var(--evo-t-hover, .2s); }
.et .et-pl:hover, .et .et-pl.is-on { box-shadow: inset 0 0 0 1px var(--ink); }
.et .et-pl i, .et .et-seg i { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; margin-left: 7px; padding: 0 5px; border-radius: 9px; background: var(--navy); color: #fff; font: 500 10.5px/1 var(--dm); font-style: normal; }
.et .et-pl i[hidden] { display: none; }
/* each control states its own colours at rest and on hover, so the theme's pink button hover can never show through */
.et :is(.et-pl, .et-seg button, .et-chip, .et-x, .et-lines__r button, .et-q button) { background-color: transparent; padding-top: 0; padding-bottom: 0; border-radius: 0; text-decoration: none; }
.et :is(.et-pl, .et-seg button, .et-chip, .et-x, .et-lines__r button):is(:hover, :focus, :active) { background-color: transparent; color: inherit; }
.et .et-pl { padding: 0 11px; }
.et .et-seg button { padding: 0 8px; }
.et .et-chip { padding: 0 2px; }
/* price: pack and RRP on the left, the 5+ trade price large on the right */
.et-pb { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 18px; align-items: end; padding: 12px 0 10px; border-top: 1px solid var(--ink); }
.et-pb__r { text-align: right; }
.et-pk { display: block; font-size: 13.5px; line-height: 1.3; }
.et-rr { font-size: 14px; opacity: .72; }
.et-tp { display: block; font: 700 italic clamp(26px, 2.1vw, 30px)/1 var(--ns); }
.et-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.et .et-seg button { display: inline-flex; align-items: center; height: 26px; padding: 0 8px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 28%, transparent); font-size: 12px; color: var(--ink); }
.et .et-seg button.is-on, .et .et-seg button:hover { box-shadow: inset 0 0 0 1px var(--ink); }
/* the three price steps: one hairline row, the 5+ step marked, the step you are on underlined in coral */
.et-lad { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 12px; border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.et-tr { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 8px 10px 7px 0; font-variant-numeric: tabular-nums; }
.et-tr + .et-tr { padding-left: 10px; border-left: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.et-tr small { font: 600 8.5px/1.3 var(--nh); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.et-tr b { font: 400 14px var(--dm); }
.et-tr--base small { opacity: 1; }
.et-tr--base b { font-weight: 500; }
.et-tr.is-cur::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--coral); }
.et-tr + .et-tr.is-cur::after { left: 10px; }
.et-tr.is-cur b { font-weight: 500; }
/* quantity: one hairline group, then +5 / +10 as quiet text buttons, the line total on the right */
.et-qrow { display: flex; align-items: center; gap: 14px; min-height: 36px; margin: 0 0 12px; }
.et-q { display: inline-grid; grid-template-columns: 34px 38px 34px; align-items: center; height: 36px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 40%, transparent); color: var(--ink); }
.et .et-q button { height: 36px; padding: 0; font: 300 18px/1 var(--dm); color: inherit; }
.et .et-q button:is(:hover, :focus, :active) { background: color-mix(in srgb, var(--ink) 8%, transparent); color: inherit; }
.et-q input { width: 38px; height: 36px; margin: 0; padding: 0 !important; border: 0 !important; background: transparent !important; text-align: center; font: 500 14px var(--dm); color: inherit; -moz-appearance: textfield; appearance: textfield; box-shadow: none !important; }
.et-q input::-webkit-outer-spin-button, .et-q input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.et-q.is-on { background: var(--navy); color: #fff; box-shadow: none; }
.et .et-q.is-on button:is(:hover, :focus, :active) { background: rgba(255,255,255,.12); color: #fff; }
.et .et-chip { height: 36px; padding: 0 2px; font: 600 10.5px/1 var(--nh); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid transparent; }
.et .et-chip:hover { border-bottom-color: currentColor; }
.et .et-chip--apply { display: inline-flex; align-items: center; height: auto; padding: 0 0 4px; border-bottom: 1px solid currentColor; }
.et-lsub { margin-left: auto; font: 700 italic 20px var(--ns); white-space: nowrap; }
.et-mg { display: flex; align-items: center; gap: 10px; margin: auto 0 0 !important; }
.et-pill { display: inline-block; padding: 5px 9px 4px; background: var(--coral); color: #fff; font: 600 9px/1 var(--nh); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.et-ean { font-size: 11.5px; opacity: .68; }

/* splits: photo beside copy, held to a sensible height */
.et-split { display: grid; grid-template-columns: 1fr 1fr; margin-top: 72px; background: var(--panel); color: var(--ink, var(--navy)); }
.et-split--flush { margin-top: 0; }
.et-split__ph { position: relative; min-height: 460px; overflow: hidden; }
.et-split__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.et-split__b { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 64px var(--g) 64px clamp(32px, 4vw, 64px); max-width: 720px; }
.et-bod { margin: 0 0 24px !important; font-size: 16.5px; max-width: 32em; }
.et-quote { margin: 0 0 24px; padding: 0; border: 0; font: 300 italic clamp(26px, 2.6vw, 38px)/1.14 var(--ns); color: inherit; }
.et-quote cite { display: block; margin-top: 16px; font: 600 10.5px var(--nh); font-style: normal; letter-spacing: .18em; text-transform: uppercase; }

/* kits on navy */
.et-kits { background: var(--navy); color: #fff; padding: 72px 0; }
.et-kits .et-ttl { margin: 0; color: #fff; font-size: clamp(48px, 5vw, 76px); }
.et-kits__h { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 40px; margin: 0 0 36px; }
.et-kits__h p { font-size: 17px; max-width: 28em; opacity: .9; }
.et-kits__g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.et-kit { display: flex; flex-direction: column; background: var(--page); color: var(--navy); border-radius: 0 20px 0 0; overflow: hidden; }
.et-kit__ph { aspect-ratio: 5 / 4; overflow: hidden; }
.et-kit__ph img { width: 100%; height: 100%; object-fit: cover; }
.et-kit__b { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.et-kit .et-eyb { margin: 0 0 6px !important; min-height: 2.8em; font-size: 9px; color: var(--slate); }
.et-nm--kit { white-space: nowrap; }
.et-nm--kit b, .et-nm--kit i { display: inline; }
.et-nm--kit b { font-size: clamp(22px, 1.9vw, 27px); }
.et-nm--kit i { margin-left: 4px; font-size: clamp(18px, 1.5vw, 22px); }
.et-pf { margin: 12px 0 10px; padding: 12px 0 10px; border-top: 1px solid var(--navy); border-bottom: 1px solid var(--line); }
.et-pf > b { display: block; font: 700 italic clamp(36px, 3.2vw, 48px)/1 var(--ns); color: var(--money); letter-spacing: -.02em; }
.et-pf dl { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; margin: 10px 0 0; font-size: 12.5px; }
.et-pf dt { font: 600 8.5px var(--nh); letter-spacing: .14em; text-transform: uppercase; color: var(--slate); }
.et-pf dd { margin: 2px 0 0; font-variant-numeric: tabular-nums; }
.et-free { margin: 6px 0 0 !important; font: 600 9px var(--nh); letter-spacing: .16em; text-transform: uppercase; color: var(--money); }
.et-kl { list-style: none; margin: 0 0 14px; padding: 0; }
.et-kl li { display: grid; grid-template-columns: 26px 1fr auto; align-items: baseline; margin: 0; padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.et-kl b { font: 700 italic 18px var(--ns); }
.et-kl em { font-style: normal; font-size: 12px; color: var(--slate); }
.et-kit__f { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: auto 0 0 !important; font-size: 11.5px; color: var(--slate); }
.et-kit__f .evo-btn { --evo-cta-h: 44px; }

/* terms, talk, legal */
.et-terms { padding: 72px 0; }
.et-terms .et-w { display: grid; grid-template-columns: 5fr 7fr; gap: 72px; }
.et-ledger { margin: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--navy); }
.et-ledger div { padding: 18px 24px 20px 0; border-bottom: 1px solid var(--line); }
.et-ledger dt { margin: 0 0 6px; font: 600 10px var(--nh); letter-spacing: .16em; text-transform: uppercase; }
.et-ledger dd { margin: 0; font-size: 15px; }
.et-ledger a, .et-talk a, .evo-trade__check a { border-bottom: 1px solid currentColor; }
.et-cat { margin-top: 22px !important; }
.et-talk { padding: 72px 0 56px; }
.et-talk p { max-width: 34em; font-size: 16.5px; }
.et-contact { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 14px !important; }
.et-legal .et-w { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding-top: 18px; padding-bottom: 24px; border-top: 1px solid var(--line); font-size: 12px; color: var(--slate); }
.et-legal img { width: 24px; flex: none; }

/* apply: the form on the intro photo's panel */
.et-split--apply .et-split__ph { min-height: 100%; }
.et-split--apply .evo-trade__apply { padding: 0; width: 100%; }
.et-split--apply .evo-trade__applyhead { margin: 0 0 22px; }
.et-split--apply .evo-trade__applyhead .evo-trade__eyebrow { font: 600 10.5px/1.4 var(--nh); letter-spacing: .18em; text-transform: uppercase; margin: 0 0 12px; }
.et-split--apply .evo-trade__h2 { margin: 0 0 10px; font: 700 italic clamp(28px, 2.6vw, 38px)/1.05 var(--ns); }
.et-split--apply .evo-trade__applyhead p:not(.evo-trade__eyebrow) { font-size: 15.5px; }
.et .evo-trade__form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.et .evo-trade__form label { display: block; font: 600 9.5px var(--nh); letter-spacing: .14em; text-transform: uppercase; color: var(--navy); }
.et .evo-trade__form label small { margin-left: 4px; font: 300 12px var(--dm); letter-spacing: 0; text-transform: none; opacity: .8; }
.et input:not([type="radio"]):not([type="checkbox"]):not([data-et-qty]), .et select, .et textarea { display: block; width: 100%; margin: 6px 0 0; padding: 11px 12px; border: 1px solid rgba(29,41,59,.3); border-radius: 0; background: rgba(255,255,255,.75); font: 300 16px var(--dm); letter-spacing: 0; text-transform: none; color: var(--navy); box-shadow: none; }
.et input:focus, .et select:focus, .et textarea:focus { outline: none; border-color: var(--navy); }
.et input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #fff inset; -webkit-text-fill-color: var(--navy); }
.et .evo-trade__f2 { grid-column: 1 / -1; }
.et .evo-trade__check { display: flex !important; gap: 10px; align-items: flex-start; font: 300 13.5px/1.45 var(--dm) !important; letter-spacing: 0 !important; text-transform: none !important; cursor: pointer; }
.et .evo-trade__check input, .et-pay input { accent-color: var(--navy); margin-top: 3px; }
.et .evo-trade__help { display: block; margin-top: 6px; font: 300 12.5px var(--dm); letter-spacing: 0; text-transform: none; }
.et .evo-trade__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.et .evo-trade__small { font-size: 13.5px; }
.et .evo-trade__small a { border-bottom: 1px solid currentColor; }

/* order bar (slim) + review-and-pay panel */
.et-bar { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; background: var(--navy); color: #fff; padding-bottom: env(safe-area-inset-bottom, 0px); }
.et-bar .et-w { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: var(--bar); }
.et-bar__l { display: flex; align-items: center; gap: 16px; min-width: 0; font-size: 14px; }
.et-bar__l b { font-weight: 500; white-space: nowrap; }
.et-bar__l span { white-space: nowrap; }
.et-bar__hint { overflow: hidden; text-overflow: ellipsis; opacity: .8; font-size: 13px; }
.et-bar__hint.is-warn { color: #F6B3A0; opacity: 1; }
.et-bar__r { display: flex; align-items: center; gap: 20px; flex: none; }
.et-bar__t { display: flex; align-items: baseline; gap: 10px; font: 700 italic 22px/1 var(--ns); }
.et-bar__t small { font: 600 9px var(--nh); font-style: normal; letter-spacing: .16em; text-transform: uppercase; opacity: .75; }
.et-bar .evo-btn { --evo-cta-h: 40px; padding: 0 40px !important; font-size: 11px !important; }
.et-bar.is-empty .et-bar__t, .et-bar.is-empty [data-et-open] { opacity: .5; }
.et-bar.is-pulse { animation: et-pulse .6s ease; }
@keyframes et-pulse { 30% { background: #2A3A52; } }
.et-bar--out .et-bar__l span { opacity: .8; }
.et-drawer { position: fixed; inset: 0; z-index: 100; margin: 0; background: rgba(29,41,59,0); transition: background .22s ease; }
.et-drawer.is-open { background: rgba(29,41,59,.38); }
.et-drawer[hidden] { display: none; }
.et-dr { position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100%); overflow-y: auto; padding: 28px 30px 36px; background: #fff; transform: translateX(100%); transition: transform .22s ease; }
.et-drawer.is-open .et-dr { transform: none; }
.admin-bar .et-dr { top: 32px; }
.et-dr__h { display: flex; align-items: center; justify-content: space-between; }
.et-dr__h .et-eyb { margin: 0 !important; }
.et .et-x { width: 40px; height: 40px; font: 300 28px/1 var(--dm); color: var(--navy); }
.et-lines { list-style: none; margin: 8px 0 14px; padding: 0; }
.et-lines li { display: flex; justify-content: space-between; gap: 14px; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.et-lines li b { display: block; font-weight: 500; }
.et-lines small { display: block; color: var(--slate); font-size: 12.5px; }
.et-lines__r { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.et-lines__r em { font-style: normal; font-weight: 500; white-space: nowrap; }
.et .et-lines__r button { padding: 0; font-size: 11.5px; color: var(--slate); text-decoration: underline; }
.et-lines__empty { color: var(--slate); }
.et-tot { margin: 0 0 12px; }
.et-tot div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.et-tot div[hidden] { display: none; }
.et-tot dt { color: var(--slate); }
.et-tot dd { margin: 0; }
.et-tot__g { margin-top: 8px; padding-top: 12px !important; border-top: 1px solid var(--navy); }
.et-tot__g dt, .et-tot__g dd { font: 700 italic 24px var(--ns) !important; color: var(--navy) !important; }
.et-note { margin: 0 0 18px !important; padding: 11px 13px; background: #FCEFE9; font-size: 13px; }
.et-note:empty { display: none; }
.et-note.is-warn { background: #FBE1D8; }
.et-addr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin: 0 0 16px; padding: 14px 0 0; border: 0; border-top: 1px solid var(--line); }
.et-addr legend { padding: 0; margin: 0 0 6px; font: 600 9.5px var(--nh); letter-spacing: .16em; text-transform: uppercase; color: var(--slate); }
.et-addr label { display: block; font: 600 9.5px var(--nh); letter-spacing: .14em; text-transform: uppercase; color: var(--navy); }
.et-addr label small { margin-left: 4px; font: 300 12px var(--dm); letter-spacing: 0; text-transform: none; color: var(--slate); }
.et-addr input, .et-addr textarea { background: var(--page) !important; }
.et-f2 { grid-column: 1 / -1; }
.et-pay { display: grid; gap: 8px; margin: 0 0 18px; padding: 0; border: 0; }
.et-pay label { display: flex; align-items: center; gap: 12px; padding: 13px 15px; box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; cursor: pointer; }
.et-pay label:has(input:checked) { box-shadow: inset 0 0 0 1px var(--navy); }
.et-pay b { font-weight: 500; margin-right: 6px; }
.et-fine { margin: 12px 0 0 !important; font-size: 12px; color: var(--slate); }


/* short screens (laptops with the browser not full height): the hero tightens so the whole block fits above the bar */
@media (min-width: 761px) and (max-height: 820px) {
	.et-hero .et-ttl { font-size: clamp(46px, 4.6vw, 70px); margin-bottom: 12px; }
	.et-hero .et-eyb { margin-bottom: 10px !important; }
	.et-lede { margin-bottom: 18px !important; font-size: 17px; }
	.et-seals { margin-bottom: 20px; }
	.et-seal { width: 92px; }
	.et-seal b { font-size: 26px; }
	.et-hero .evo-btn { --evo-cta-h: 44px; }
	.et-cta { margin-bottom: 10px !important; }
}
@media (min-width: 761px) and (max-height: 680px) {
	.et-hero .et-ttl { font-size: 48px; }
	.et-lede { font-size: 15.5px; margin-bottom: 14px !important; }
	.et-seal { width: 80px; }
	.et-seal b { font-size: 22px; }
	.et-seal small { font-size: 7.5px; }
	.et-seals { margin-bottom: 16px; }
}
@media (max-width: 1180px) {
	.et-grid { grid-template-columns: 1fr; }
	.et-card { grid-template-columns: minmax(0, 34fr) minmax(0, 66fr); }
	.et-kits__g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 782px) { .admin-bar .et-dr { top: 46px; } }
@media (max-width: 760px) {
	.et-hero { grid-template-columns: 1fr; height: auto; }
	.et-hero__ph { aspect-ratio: 5 / 4; }
	.et-hero__ph::after { inset: auto 0 0 0; width: auto; height: 22%; background: linear-gradient(transparent, var(--panel)); }
	.et-hero__pn { padding: 8px var(--g) 36px; }
	.et-hero .et-ttl { font-size: 56px; }
	.et-seals { gap: 12px; }
	.et-cta .evo-btn { flex: 1 1 100%; }
	.et-split, .et-sech, .et-kits__h, .et-terms .et-w { grid-template-columns: 1fr; }
	.et-jump__r { display: none; }
	.et-jump .et-w { gap: 22px; }
	.et-range { padding-top: 48px; }
	.et-sech { gap: 10px; margin-bottom: 22px; }
	.et-card { grid-template-columns: 1fr; }
	.et-card__ph { aspect-ratio: 4 / 3; min-height: 0; }
	.et-card__pn { padding: 18px 18px 18px; }
	.et-kits__g { grid-template-columns: 1fr; gap: 16px; }
	.et-split { margin-top: 48px; }
	.et-split--flush { margin-top: 0; }
	.et-split__ph { min-height: 0; aspect-ratio: 4 / 3; }
	.et-split__b { padding: 36px var(--g); }
	.et-kits { padding: 56px 0; }
	.et-terms { padding: 56px 0; }
	.et-terms .et-w { gap: 22px; }
	.et-ledger { grid-template-columns: 1fr; }
	.et .evo-trade__form, .et-addr { grid-template-columns: 1fr; }
	.et-bar__l { flex-direction: column; align-items: flex-start; gap: 0; }
	.et-bar__l span, .et-bar__hint, .et-bar__t small { display: none; }
	.et-bar__t { font-size: 20px; }
	.et-bar .evo-btn { padding: 0 34px !important; }
	.et-dr { padding: 20px 18px 30px; }
	.et-legal .et-w { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .et *, .et-drawer, .et-dr { transition: none !important; animation: none !important; } }