` under ?preview=1.
BOTTOM-LEFT, which is the only free corner on every page: the top edge is the
ticker followed by `header.site` (sticky, top: 0, z-40), so a top-corner mark
lands on the logo or the cart pill at some scroll position; `.to-top` (z-40)
holds bottom-right and `.toast` (z-120) the bottom centre. The offsets are
`.to-top`'s exactly, so the two fixed corner marks share one spacing rhythm.
z-index 30 clears `main` (2) and the grain overlay (1) and stays under the
header and `.to-top` (40) and `.toast` (120), all of which are root-level like
the marker itself; pointer-events: none keeps every control beneath it
clickable. The overlay is a separate problem — see below the rule.
Built from this theme's own status-chip devices rather than a ribbon shape:
`.heat`'s blurred near-black capsule and hairline, the logo's glowing acid
dot, and the word in Anton — the display face, and the one no other theme's
marker uses. The label is `--ink`, not the brand-filled slab the other themes
fill their marker with: drop-shop's brand slot IS the accent on a near-black
canvas, so a pale operator brand would leave that pattern white-on-white.
Here the operator colour rides the dot and the glow ring, where legibility
does not depend on it.
Near-opaque where `.heat` sits at .7: `.heat` floats over product imagery,
while this parks over the footer's copyright line at the foot of every page,
and a .7 chip ghosted that line through the label.
The only motion is the opacity fade below, which answers opening the image
viewer; reduced motion drops it. */
.preview-ribbon {
position: fixed; left: clamp(16px, 3vw, 30px); bottom: clamp(16px, 3vw, 30px);
z-index: 30; pointer-events: none;
display: flex; align-items: center; gap: 9px;
padding: 9px 18px 9px 15px; border-radius: 100px;
background: rgba(10,11,9,.93); backdrop-filter: blur(10px);
border: 1px solid var(--line-2);
box-shadow: 0 18px 40px -20px rgba(0,0,0,.8), var(--glow);
font-family: "Anton", "Arial Narrow", sans-serif; font-weight: 400;
font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
line-height: 1; color: var(--ink);
transition: opacity .3s ease;
}
.preview-ribbon::before {
content: ""; width: 8px; height: 8px; border-radius: 50%;
background: var(--acid); box-shadow: 0 0 12px var(--acid);
}
/* …and steps aside for the one overlay this theme has. The marker is genuinely
underneath it now — the lightbox renders in the layout's `overlays` block,
outside `main`, so its z-index 200 is scored against the root and beats this
30 (t-0dv0n8; before that move `main`'s own stacking context trapped it and
the marker painted ON TOP of the open viewer). But the overlay's film is
rgba(6,7,5,.94), not opaque: at full opacity the chip still ghosts through it
at the bottom-left, as the header does. Fading it out keeps the viewer clean,
returns the marker the moment the viewer closes, and runs on the lightbox's
own timing so it reads as part of that one interaction. */
body:has(.lightbox.open) .preview-ribbon { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .preview-ribbon { transition: none; } }
/* flash toast (server-rendered one-shot) */
.toast {
position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 120;
background: var(--acid); color: var(--canvas); font-weight: 700; font-size: 13.5px;
letter-spacing: .02em; padding: 13px 22px; border-radius: 100px;
box-shadow: 0 20px 60px -20px rgba(0,0,0,.7), var(--glow); max-width: min(92vw, 460px); text-align: center;
}
.toast--error { background: #ff6b6b; color: #160606; box-shadow: 0 20px 60px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,107,107,.4), 0 0 30px rgba(255,107,107,.3); }
/* mobile nav drawer (burger-toggled) */
@media (max-width: 720px) {
.nav-links.open {
display: flex; flex-direction: column; gap: 0;
position: absolute; left: 0; right: 0; top: 100%;
background: rgba(10,11,9,.96); backdrop-filter: blur(14px);
border-bottom: 1px solid var(--line); padding: 8px 0;
}
.nav-links.open a { padding: 14px clamp(16px, 3vw, 40px); }
}
/* responsive */
@media (max-width: 1000px) {
.drops { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
.nav-links { display: none; }
.burger { display: block; }
.cart-pill span.lbl { display: none; }
.coverflow { height: clamp(300px, 70vw, 380px); }
.cf-card { width: clamp(170px, 56vw, 220px); }
}
@media (max-width: 520px) {
.drops { grid-template-columns: 1fr 1fr; gap: 10px; }
.hero h1 { font-size: clamp(52px, 18vw, 90px); }
}
/* =====================================================================
INNER PAGES — shared scaffolding (Nightfall / drop-shop)
Carries the homepage DNA: Anton display, acid accent, grain, glow,
pill buttons, hard contrast, tabular numerics.
===================================================================== */
/* footer brand block */
.foot-brand { max-width: 360px; }
.foot-brand p { margin: 16px 0 18px; color: var(--ink-soft); font-size: 14px; line-height: 1.6; }
.foot-social { display: flex; gap: 10px; }
.foot-social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--ink-soft); transition: border-color .2s, color .2s, transform .2s; }
.foot-social a:hover { border-color: var(--acid); color: var(--acid); transform: translateY(-2px); }
.foot-social svg { width: 18px; height: 18px; stroke: currentColor; }
@media (max-width: 720px) { .foot-brand { max-width: 100%; } }
/* generic main spacing on inner pages.
This z-index lifts the page off the fixed film-grain layer (`body::before`,
z-index 1) and is therefore load-bearing for the theme's texture — but it also
makes `main` a stacking context, so anything nested in it meets root-level
fixed chrome at 2, not at its own z-index. Full-screen overlays consequently
render in the layout's `overlays` block, outside `main`; ThemeOverlayStackingTest
holds that. */
main { position: relative; z-index: 2; }
.btn-block { width: 100%; justify-content: center; }
.btn-sm { padding: 10px 18px; font-size: 12.5px; }
/* page sub-hero / banner ------------------------------------------------ */
.page-head { position: relative; padding-block: clamp(50px, 8vw, 96px) clamp(28px, 4vw, 44px); overflow: hidden; border-bottom: 1px solid var(--line); }
.page-head::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(70% 130% at 18% -10%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 55%), radial-gradient(60% 120% at 92% -10%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 55%); }
.page-head .wrap { position: relative; z-index: 2; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 22px; }
.crumbs a { color: var(--ink-soft); transition: color .2s; }
.crumbs a:hover { color: var(--acid); }
.crumbs .sep { color: var(--ink-faint); }
.crumbs .cur { color: var(--ink); }
.page-eye { font-size: 12.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--acid); display: block; margin-bottom: 14px; }
.page-title { font-family: "Anton", sans-serif; text-transform: uppercase; font-size: clamp(42px, 8vw, 110px); line-height: .96; letter-spacing: -.01em; }
.page-title .stroke { color: transparent; -webkit-text-stroke: 1.5px var(--ink-soft); }
.page-title .acid { color: var(--acid); text-shadow: 0 0 50px color-mix(in srgb, var(--brand) 35%, transparent); }
.page-lead { max-width: 56ch; margin-top: 20px; color: var(--ink-soft); font-size: clamp(14px, 1.3vw, 16px); }
/* surfaces / cards reused widely */
.panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px; }
.panel-pad { padding: clamp(20px, 3vw, 32px); }
/* form controls (dark, premium) --------------------------------------- */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label, .lbl-up { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.input, .select, .textarea { width: 100%; background: #0d0f0c; border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 16px; color: var(--ink); font-family: inherit; font-size: 15px; outline: none; transition: border-color .2s, box-shadow .2s, background .2s; }
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--acid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); background: #101310; }
.textarea { resize: vertical; min-height: 130px; line-height: 1.55; }
.select { appearance: none; background-image: url("data:image/svg+xml;utf8,
"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; cursor: pointer; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-row-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; }
.form-grid { display: grid; gap: 16px; }
.help { font-size: 12.5px; color: var(--ink-faint); }
.help a { color: var(--acid); }
@media (max-width: 560px) { .field-row, .field-row-3 { grid-template-columns: 1fr; } }
/* ===================== PRODUCTS LISTING =============================== */
.shop-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: clamp(22px, 3vw, 36px); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line-2); background: transparent; color: var(--ink-soft); border-radius: 100px; padding: 9px 18px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: all .2s; }
.chip:hover { color: var(--ink); border-color: var(--ink-soft); }
.chip.is-active { background: var(--acid); color: var(--canvas); border-color: var(--acid); box-shadow: 0 0 24px color-mix(in srgb, var(--brand) 30%, transparent); }
.shop-tools { display: flex; align-items: center; gap: 14px; }
.shop-count { font-size: 13px; color: var(--ink-faint); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.shop-tools .select { width: auto; min-width: 168px; padding-block: 11px; }
.grid-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.pcard { position: relative; background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .35s; }
.pcard:hover { transform: translateY(-8px); border-color: var(--acid); box-shadow: 0 24px 60px -28px color-mix(in srgb, var(--brand) 30%, transparent); }
.pcard-media { position: relative; aspect-ratio: 1/1.12; overflow: hidden; background: #000; display: block; }
.pcard-media img { width: 100%; height: 100%; object-fit: cover; opacity: .92; transition: transform .6s, opacity .4s; }
.pcard:hover .pcard-media img { transform: scale(1.06); opacity: 1; }
.pcard .badge-sale { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--acid); color: var(--canvas); font-size: 11px; font-weight: 800; letter-spacing: .04em; padding: 5px 10px; border-radius: 100px; }
.pcard-body { padding: 15px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.pcard-cat { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.pcard-name { font-family: "Anton", sans-serif; text-transform: uppercase; font-size: 19px; line-height: 1.04; margin: 6px 0 4px; }
.pcard-name a:hover { color: var(--acid); }
.pcard-desc { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; margin-bottom: 14px; flex: 1; }
.pcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.price { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.price .was { color: var(--ink-faint); text-decoration: line-through; font-weight: 500; font-size: 13px; margin-right: 7px; }
.add-mini { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line-2); background: transparent; color: var(--ink); border-radius: 100px; padding: 8px 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: all .2s; }
.add-mini:hover { background: var(--acid); color: var(--canvas); border-color: var(--acid); }
.add-mini svg { width: 15px; height: 15px; stroke: currentColor; }
/* ===================== PRODUCT DETAIL ================================= */
.pdp { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 60px); align-items: start; padding-block: clamp(34px, 5vw, 60px); }
.gallery { position: sticky; top: 92px; }
.gallery-main { position: relative; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; aspect-ratio: 1/1.12; background: #000; cursor: zoom-in; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-main .zoom-hint { position: absolute; bottom: 14px; right: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; background: rgba(10,11,9,.7); backdrop-filter: blur(6px); border: 1px solid var(--line-2); color: var(--ink-soft); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 7px 12px; border-radius: 100px; }
.gallery-main .zoom-hint svg { width: 14px; height: 14px; stroke: currentColor; }
.thumbs { display: flex; gap: 12px; margin-top: 14px; }
.thumb { width: 84px; height: 84px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2); cursor: pointer; padding: 0; background: #000; opacity: .6; transition: opacity .2s, border-color .2s, transform .2s; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb:hover { opacity: .9; transform: translateY(-2px); }
.thumb.is-active { opacity: 1; border-color: var(--acid); box-shadow: var(--glow); }
.pdp-info .pdp-cat { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--acid); font-weight: 700; }
.pdp-info h1 { font-family: "Anton", sans-serif; text-transform: uppercase; font-size: clamp(36px, 5vw, 64px); line-height: .98; margin: 10px 0 14px; }
.pdp-tagline { color: var(--ink-soft); font-size: 16px; max-width: 46ch; }
.pdp-price { display: flex; align-items: baseline; gap: 12px; margin: 22px 0 6px; }
.pdp-price .now { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pdp-price .was { font-size: 18px; color: var(--ink-faint); text-decoration: line-through; }
.pdp-price .off { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: var(--acid); color: var(--canvas); padding: 4px 9px; border-radius: 100px; }
.variant { margin-top: 22px; }
.variant .v-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.variant .v-head .lbl-up { color: var(--ink-soft); }
.variant .v-head .sel { font-size: 13px; color: var(--ink); font-weight: 600; }
/* Colour picker: always a dropdown (t-0dzech) — the theme's own dark .select
(acid focus ring, drawn chevron), set in the pills' display face. */
.variant .opt-select { max-width: 320px; font-family: "Space Grotesk", sans-serif; font-weight: 700; }
.sizes { display: flex; gap: 10px; flex-wrap: wrap; }
.size { min-width: 50px; height: 46px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line-2); background: transparent; color: var(--ink); font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 14px; cursor: pointer; transition: all .2s; }
.size:hover:not(:disabled) { border-color: var(--ink-soft); }
.size.is-active { background: var(--acid); color: var(--canvas); border-color: var(--acid); }
.size:disabled { color: var(--ink-faint); cursor: not-allowed; position: relative; opacity: .55; }
.size:disabled::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top left, transparent calc(50% - .5px), var(--line-2) calc(50% - .5px), var(--line-2) calc(50% + .5px), transparent calc(50% + .5px)); }
.size-guide { margin-left: auto; font-size: 12px; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
/* Combination sold-out notice + disabled buy state for the dynamic picker. */
.combo-oos { margin: 16px 0 0; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #ff6a6a; }
.buy-row .btn:disabled, .summary .btn:disabled { background: transparent; color: var(--ink-faint); border: 1px solid var(--line-2); cursor: not-allowed; transform: none; box-shadow: none; }
.buy-row .btn:disabled:hover, .summary .btn:disabled:hover { transform: none; box-shadow: none; border-color: var(--line-2); color: var(--ink-faint); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; }
.qty button { width: 44px; height: 48px; background: transparent; border: 0; color: var(--ink); font-size: 20px; cursor: pointer; transition: background .2s, color .2s; }
.qty button:hover { background: var(--acid); color: var(--canvas); }
.qty input { width: 48px; height: 48px; text-align: center; background: transparent; border: 0; color: var(--ink); font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.buy-row { display: flex; gap: 14px; align-items: stretch; margin-top: 26px; flex-wrap: wrap; }
.buy-row .qty { height: 54px; }
.buy-row .qty button, .buy-row .qty input { height: 54px; }
.buy-row .btn { flex: 1; min-width: 160px; }
.assurance { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.assurance .a-item { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-soft); }
.assurance svg { width: 17px; height: 17px; stroke: var(--acid); }
/* accordion (details / FAQ / order rows) */
.accordion { border-top: 1px solid var(--line); margin-top: 30px; }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; background: none; border: 0; color: var(--ink); padding: 20px 2px; cursor: pointer; text-align: left; font-family: "Anton", sans-serif; text-transform: uppercase; font-size: 18px; letter-spacing: .02em; }
.acc-head:hover { color: var(--acid); }
.acc-head .ico { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; flex: none; transition: transform .3s, border-color .2s, background .2s; }
.acc-head .ico svg { width: 14px; height: 14px; stroke: currentColor; }
.acc-item.open .acc-head .ico { transform: rotate(45deg); border-color: var(--acid); color: var(--acid); }
.acc-panel { overflow: hidden; max-height: 0; transition: max-height .4s cubic-bezier(.2,.8,.2,1); }
.acc-panel-inner { padding: 0 2px 22px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.7; }
.acc-panel-inner p + p { margin-top: 12px; }
.spec-list { list-style: none; display: grid; gap: 10px; }
.spec-list li { display: flex; gap: 12px; }
.spec-list .k { min-width: 90px; color: var(--ink-faint); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding-top: 2px; }
.related { padding-block: clamp(40px, 6vw, 80px); border-top: 1px solid var(--line); }
/* fullscreen lightbox -------------------------------------------------- */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(6,7,5,.94); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s; }
.lightbox.open { display: flex; opacity: 1; }
.lb-stage { position: relative; width: min(92vw, 1000px); height: min(88vh, 1000px); }
.lb-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .35s; pointer-events: none; }
.lb-slide.active { opacity: 1; pointer-events: auto; }
.lb-slide img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 14px; box-shadow: 0 40px 120px -30px rgba(0,0,0,.8); }
.lb-close { position: absolute; top: 22px; right: 22px; z-index: 5; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(20,22,18,.7); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: all .2s; }
.lb-close:hover { background: var(--acid); color: var(--canvas); border-color: var(--acid); }
.lb-close svg { width: 22px; height: 22px; stroke: currentColor; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(20,22,18,.7); backdrop-filter: blur(6px); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: all .2s; }
.lb-nav:hover { background: var(--acid); color: var(--canvas); border-color: var(--acid); }
.lb-nav svg { width: 26px; height: 26px; stroke: currentColor; }
.lb-prev { left: 16px; } .lb-next { right: 16px; }
.lb-count { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 5; font-size: 13px; letter-spacing: .1em; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.lb-count b { color: var(--acid); }
/* ===================== CART ========================================== */
.cart-layout { display: grid; grid-template-columns: 1.6fr .9fr; gap: clamp(24px, 3vw, 44px); align-items: start; padding-block: clamp(30px, 4vw, 56px); }
.cart-list { display: grid; gap: 14px; }
.cart-item { display: grid; grid-template-columns: 96px 1fr auto; gap: 18px; align-items: center; background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 14px; transition: border-color .3s; }
.cart-item:hover { border-color: var(--line-2); }
.cart-thumb { width: 96px; height: 96px; border-radius: 12px; overflow: hidden; background: #000; }
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ci-name { font-family: "Anton", sans-serif; text-transform: uppercase; font-size: 19px; line-height: 1.05; }
.ci-name a:hover { color: var(--acid); }
.ci-variant { font-size: 12.5px; color: var(--ink-soft); margin: 5px 0 12px; letter-spacing: .03em; }
.ci-controls { display: flex; align-items: center; gap: 14px; }
.ci-right { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; height: 100%; justify-content: space-between; }
.ci-total { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ci-remove { background: none; border: 0; color: var(--ink-faint); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; transition: color .2s; }
.ci-remove:hover { color: var(--acid); }
.ci-remove svg { width: 15px; height: 15px; stroke: currentColor; }
.summary { position: sticky; top: 92px; }
.summary h3 { font-family: "Anton", sans-serif; text-transform: uppercase; font-size: 24px; margin-bottom: 18px; }
.sum-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; font-size: 14.5px; color: var(--ink-soft); border-bottom: 1px dashed var(--line); }
.sum-row .v { color: var(--ink); font-variant-numeric: tabular-nums; }
.sum-row.discount .v { color: var(--acid); }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 18px; margin-top: 6px; }
.sum-total .t-lbl { font-family: "Anton", sans-serif; text-transform: uppercase; font-size: 20px; }
.sum-total .t-val { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.promo-msg { font-size: 12.5px; margin-top: -6px; margin-bottom: 14px; min-height: 16px; }
.promo-msg.ok { color: var(--acid); }
.continue-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); transition: color .2s; }
.continue-link:hover { color: var(--acid); }
.empty-state { text-align: center; padding: clamp(50px, 9vw, 110px) 20px; }
.empty-state .e-ico { width: 80px; height: 80px; margin: 0 auto 24px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--acid); }
.empty-state .e-ico svg { width: 36px; height: 36px; stroke: currentColor; }
.empty-state h2 { font-family: "Anton", sans-serif; text-transform: uppercase; font-size: clamp(30px, 5vw, 52px); }
.empty-state p { color: var(--ink-soft); margin: 12px auto 26px; max-width: 40ch; }
/* ===================== CHECKOUT ====================================== */
.checkout-layout { display: grid; grid-template-columns: 1.45fr .9fr; gap: clamp(24px, 3.5vw, 50px); align-items: start; padding-block: clamp(30px, 4vw, 56px); }
.steps { display: grid; gap: 14px; }
.step { background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.step.active { border-color: var(--acid); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 25%, transparent), 0 24px 60px -30px color-mix(in srgb, var(--brand) 25%, transparent); }
.step.done { border-color: var(--line-2); }
.step-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px; cursor: pointer; }
.step-num { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font-family: "Anton", sans-serif; font-size: 16px; color: var(--ink-soft); transition: all .25s; }
.step.active .step-num { background: var(--acid); color: var(--canvas); border-color: var(--acid); }
.step.done .step-num { border-color: var(--acid); color: var(--acid); }
.step.done .step-num::after { content: "✓"; }
.step.done .step-num .n { display: none; }
.step-title { font-family: "Anton", sans-serif; text-transform: uppercase; font-size: 20px; flex: 1; }
/* Edit is a real