/* ==========================================================================
   EXABYTE — storefront design system
   Light canvas · navy brand · royal-blue accent
   Theme: clean, colorful, professional gaming marketplace
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
    --bg:            #F4F6FA;
    --bg-soft:       #EDF0F6;
    --surface:       #FFFFFF;
    --surface-2:     #FAFBFD;
    --surface-3:     #EDF0F6;
    --line:          #E1E6F0;
    --line-soft:     #EAEDF4;
    --line-strong:   #CCD4E3;
    --text:          #0B1220;
    --text-2:        #47536B;
    --text-3:        #8492AC;
    --neon:          #1856E8;
    --neon-bright:   #4B85FF;
    --neon-dim:      #123FB0;
    --neon-deep:     #14305A;
    --neon-soft:     rgba(24,86,232,.14);
    --neon-glow:     rgba(24,86,232,.35);
    --neon-faint:    rgba(24,86,232,.08);
    --grad:          #1856E8;
    --grad-soft:     rgba(24,86,232,.14);
    --violet:        #7C5CFF;
    --violet-soft:   #EAE5FF;
    --cyan:          #0FA7A0;
    --ok:            #0E7C4A;
    --warn:          #9A6B10;
    --danger:        #C8323F;
    --amber:         #C9860E;
    --sh-1:          0 1px 2px rgba(11,18,32,.05);
    --sh-2:          0 10px 26px -12px rgba(11,18,32,.18);
    --sh-3:          0 26px 60px -22px rgba(11,18,32,.30);
    --glow:          0 0 0 1px rgba(24,86,232,.35), 0 0 22px -4px rgba(24,86,232,.28);
    --r-xs:          7px;
    --r-sm:          9px;
    --r:             12px;
    --r-lg:          16px;
    --r-xl:          20px;
    --r-pill:        999px;
    --cut:           10px;
    --cut-sm:        6px;
    --cut-lg:        14px;
    --t-fast:        140ms cubic-bezier(.4,0,.2,1);
    --t:             220ms cubic-bezier(.4,0,.2,1);
    --t-slow:        380ms cubic-bezier(.22,1,.36,1);
    --shell:         1200px;
    --nav-h:         64px;
    --font-ui:       'Barlow', 'Noto Sans Myanmar', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display:  'Chakra Petch', 'Noto Sans Myanmar', var(--font-ui);
    --font-mm:       'Noto Sans Myanmar', 'Padauk', 'Myanmar Text', var(--font-ui);
    --font-mono:     'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* corner language — the logo's sheared bars, echoed on every solid/interactive shape */
.cut     { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.cut-sm  { clip-path: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, var(--cut-sm) 100%, 0 calc(100% - var(--cut-sm))); }
.cut-lg  { clip-path: polygon(0 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg), 100% 100%, var(--cut-lg) 100%, 0 calc(100% - var(--cut-lg))); }

/* ---------- 2. Reset ----------------------------------------------------- */
/* The `hidden` attribute must always win — otherwise any component class
   that sets its own `display` (`.btn`, `.auth-screen`, flex/grid layouts…)
   silently outranks the UA's `[hidden]` rule and the element never hides. */
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: light; }
body {
    min-height: 100vh; background: var(--bg); color: var(--text);
    font-family: var(--font-ui); font-size: 15px; line-height: 1.6;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility; overflow-x: hidden;
}
body::before {
    content: ''; position: fixed; inset: 0; z-index: -2;
    background:
        radial-gradient(ellipse 900px 500px at 90% -10%, rgba(24,86,232,.07), transparent 60%),
        radial-gradient(ellipse 700px 500px at -10% 20%, rgba(20,48,90,.05), transparent 60%),
        var(--bg);
    pointer-events: none;
}
::selection { background: var(--neon); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--neon-deep); }
@keyframes boot-blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
/* ---------- 3. Typography ------------------------------------------------ */
h1, h2, h3, h4 {
    font-family: var(--font-display); font-weight: 700;
    letter-spacing: -0.01em; line-height: 1.18; color: var(--neon-deep);
}
h1 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); }
h3 { font-size: 1.06rem; }
h4 { font-size: .96rem; }
p  { color: var(--text-2); }
a  { color: var(--neon); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--neon-dim); }
.display { font-family: var(--font-display); letter-spacing: -0.02em; color: var(--neon-deep); }
.eyebrow {
    display: inline-block; font-family: var(--font-ui);
    font-size: .68rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--neon); margin-bottom: 8px;
}
.dim { color: var(--text-3); } .muted { color: var(--text-2); }
.text-grad {
    background: var(--neon);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
code, pre, kbd, samp { font-family: var(--font-mono); }

/* ---------- Myanmar (Burmese) text -------------------------------------
   Myanmar glyphs ship with a taller cap height, wider per-character
   advance, and combining marks that stack above the consonant. Rendered
   at the same px as Latin it looks visually larger and looser, so mixed
   EN/MM rows look broken. Fix: render slightly smaller with more leading.

   NEGATIVE letter-spacing is dangerous here and was removed — Myanmar
   combining marks are positioned relative to the base consonant's advance
   width, so tightening tracking pulls neighbouring clusters into each
   other and letters visually fuse. Real Myanmar sites (e.g. shop.com.mm)
   use normal tracking with generous line-height instead, which is what
   this now matches.

   Translated strings are swapped in as plain text via applyTranslations(),
   which only ever touches elements carrying data-i18n/-ph/-aria — so that
   attribute is the precise hook for "this text is Myanmar right now".
   Do NOT key this off `body.lang-mm` + a broad tag list: that also caught
   things that are never translated (the "EXABYTE" brand name, prices,
   dates) and shrank them too. Dynamic MM content that has no data-i18n
   hook (listing titles, seller bios) opts in explicitly via `.mm`/[lang]
   instead, applied by the page's own JS. */
.mm,
[lang="my"],
body.lang-mm [data-i18n] {
    font-family: var(--font-mm);
    font-size: .84em;
    line-height: 1.5;
    letter-spacing: normal;
    font-optical-sizing: none;
    text-justify: inter-cluster;
}
/* Inside small components (buttons/inputs/labels) opt out of the size
   shrink so control dimensions stay stable across languages — only the
   font-family changes there, so Myanmar glyphs still render correctly. */
.mm.btn, .mm.input, .mm label,
.btn .mm, .input .mm, label .mm,
body.lang-mm .btn[data-i18n], body.lang-mm .btn [data-i18n],
body.lang-mm label[data-i18n], body.lang-mm label [data-i18n],
body.lang-mm select[data-i18n], body.lang-mm option[data-i18n],
body.lang-mm input[data-i18n-ph] {
    font-size: inherit;
    line-height: inherit;
}

/* ---------- 4. Layout ---------------------------------------------------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: 22px; }
.section { padding-block: 34px; }
.section-sm { padding-block: 22px; }
.section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 20px; margin-bottom: 20px; flex-wrap: wrap;
}
.section-head h2 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); }
.section-head p { color: var(--text-2); font-size: .9rem; margin-top: 4px; }
.section-title-sm {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(1.15rem, 2vw, 1.4rem); color: var(--neon-deep);
    margin-bottom: 14px;
}
.section-head-sm {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; margin-bottom: 14px; flex-wrap: wrap;
}
.section-head-sm .section-title-sm { margin-bottom: 0; }
.divider { height: 1px; background: var(--line); }

/* ---------- 5. Header ---------------------------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: 60;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    background: rgba(244, 246, 250, .88);
    border-bottom: 1px solid var(--line);
    transition: border-color var(--t), background var(--t);
}
.site-header.is-stuck { background: rgba(244, 246, 250, .97); border-bottom-color: var(--line-strong); box-shadow: var(--sh-1); }
.nav { height: var(--nav-h); display: flex; align-items: center; gap: 18px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; flex-shrink: 0; }
.brand-mark {
    width: 36px; height: 36px;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    display: grid; place-items: center; background: var(--neon-deep);
    font-family: var(--font-display); font-weight: 700; font-size: 1rem;
    color: #fff; flex-shrink: 0;
}
.brand-div { width: 1px; height: 26px; background: var(--line-strong); flex-shrink: 0; }
.brand-name { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.brand-name b {
    font-family: var(--font-display); font-size: 1.02rem; font-weight: 700;
    letter-spacing: .01em; white-space: nowrap; color: var(--neon-deep);
    overflow: hidden; text-overflow: ellipsis;
}
.brand-name span {
    font-size: .66rem; color: var(--text-3);
    letter-spacing: .06em; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-spacer { flex: 1 1 auto; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
    padding: 8px 14px; border-radius: var(--r-sm);
    font-size: .87rem; font-weight: 600; color: var(--text-2);
    transition: color var(--t-fast), background var(--t-fast);
}
.nav-links a:hover { color: var(--neon); background: var(--neon-faint); }
.nav-links a.active { color: var(--neon); background: var(--neon-faint); }
.nav-tools { display: flex; align-items: center; gap: 10px; }
/* Language toggle — a single cut-corner HUD button: globe + current
   language name + chevron. Clicking flips straight to the other language. */
.lang-trigger {
    position: relative;
    display: inline-flex; align-items: center; gap: 7px;
    height: 38px; padding: 0 13px 0 11px;
    background: linear-gradient(160deg, #12294B, #0A1830);
    color: #DCE6FF;
    border: none;
    clip-path: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, var(--cut-sm) 100%, 0 calc(100% - var(--cut-sm)));
    box-shadow: 0 0 10px -4px var(--neon), inset 0 0 0 1px rgba(24,86,232,.35);
    font-family: var(--font-display);
    font-size: .78rem; font-weight: 600; letter-spacing: .01em;
    cursor: pointer;
    transition: box-shadow var(--t-fast), color var(--t-fast);
}
.lang-trigger:hover { box-shadow: 0 0 14px -2px var(--neon), inset 0 0 0 1px rgba(24,86,232,.6); }
.lang-trigger .ico { display: flex; color: var(--neon); }
.lang-trigger .lang-cur { min-width: 58px; text-align: left; }
.lang-trigger.is-mm .lang-full { font-family: var(--font-mm); font-size: .74rem; letter-spacing: normal; }
.lang-trigger .lang-abbr { display: none; }
.lang-trigger .chev { display: flex; color: #7C90B4; transition: transform var(--t-fast); }
.lang-trigger:hover .chev { transform: translateY(1px); }
/* ---------- 6. Buttons --------------------------------------------------- */
.btn {
    --btn-bg: var(--surface);
    --btn-fg: var(--text);
    --btn-bd: var(--line-strong);
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; padding: 10px 18px;
    border: 1px solid var(--btn-bd);
    clip-path: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, var(--cut-sm) 100%, 0 calc(100% - var(--cut-sm)));
    background: var(--btn-bg); color: var(--btn-fg);
    font-family: var(--font-display); font-size: .85rem; font-weight: 600;
    line-height: 1.2; white-space: nowrap; cursor: pointer;
    transition: transform var(--t-fast), box-shadow var(--t), background var(--t-fast),
                border-color var(--t-fast), color var(--t-fast);
}
.btn:hover { transform: translateY(-1px); border-color: var(--neon); color: var(--neon-deep); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-sm  { padding: 7px 13px;  font-size: .78rem; }
.btn-lg  { padding: 13px 22px; font-size: .93rem; }
.btn-block { width: 100%; }
.btn-icon { padding: 8px; width: 36px; height: 36px; }
.nav-burger {
    --btn-bg: linear-gradient(160deg, #12294B, #0A1830);
    --btn-fg: #fff; --btn-bd: rgba(24,86,232,.4);
    box-shadow: 0 0 10px -4px var(--neon);
}
.nav-burger:hover { --btn-fg: #fff; box-shadow: 0 0 14px -2px var(--neon); border-color: var(--neon); }
.btn-primary {
    --btn-bd: transparent;
    background: var(--neon); color: #fff;
    box-shadow: 0 6px 16px -6px var(--neon-glow);
}
.btn-primary:hover {
    background: var(--neon-dim); color: #fff;
    box-shadow: 0 8px 20px -4px var(--neon-glow);
}
.btn-outline {
    --btn-bd: var(--neon);
    --btn-fg: var(--neon);
    --btn-bg: var(--neon-faint);
}
.btn-outline:hover {
    --btn-bd: var(--neon-deep);
    --btn-fg: #fff;
    --btn-bg: var(--neon-deep);
}
.btn-ghost {
    --btn-bd: transparent;
    --btn-bg: transparent;
    --btn-fg: var(--text-2);
}
.btn-ghost:hover { --btn-fg: var(--neon); --btn-bg: var(--neon-faint); }
.btn-danger {
    --btn-bd: transparent;
    --btn-bg: var(--danger);
    --btn-fg: #fff;
}
.btn-danger:hover { --btn-bg: #A8232F; }

/* ---------- 7. Hero ------------------------------------------------------ */
.hero { position: relative; padding-block: 44px 30px; overflow: hidden; }
.hero::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, var(--neon-faint), transparent 70%);
    border-bottom: 1px solid var(--line);
    z-index: -1;
}
.hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 34px; align-items: center;
}
.hero-copy { max-width: 580px; }
.hero h1 { font-size: clamp(1.9rem, 4vw, 2.85rem); line-height: 1.1; margin-bottom: 12px; }
.hero h1 .accent { color: var(--neon); }
.hero-sub { color: var(--text-2); font-size: 1rem; max-width: 54ch; margin-bottom: 20px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 0; margin-top: 22px; }
.stat-chip {
    display: inline-flex; flex-direction: column;
    padding: 0 20px 0 0; margin-right: 20px; border-right: 1px solid var(--line-strong);
    min-width: 0;
}
.stat-chip:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.stat-chip b {
    font-family: var(--font-display); font-size: 1.3rem; font-weight: 700;
    color: var(--neon-deep); line-height: 1.15;
}
.stat-chip span { font-size: .68rem; color: var(--text-3); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }

/* Hero visual: trusted-sellers HUD (real data, dark panel for contrast) */
.hero-visual { position: relative; min-height: 300px; }
.hud {
    background: linear-gradient(160deg, #12294B, #0A1830); color: #fff;
    padding: 14px; box-shadow: var(--sh-3); position: relative; overflow: hidden;
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.hud::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 26px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 26px);
}
.hud-top { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 11px; }
.hud-top b { font-family: var(--font-ui); font-size: .64rem; font-weight: 700; letter-spacing: .14em; color: #7C90B4; }
.hud-live { display: flex; align-items: center; gap: 6px; font-size: .64rem; font-weight: 700; letter-spacing: .06em; color: #4ADE80; }
.hud-live .dot { width: 6px; height: 6px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 3px rgba(74,222,128,.22); animation: boot-blink 1.6s steps(2,end) infinite; }
.hud-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.hud-sel {
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
    padding: 11px; transition: background .14s, border-color .14s, transform .14s; cursor: pointer;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.hud-sel:hover { background: rgba(75,133,255,.16); border-color: rgba(75,133,255,.42); transform: translateY(-2px); }
.hud-sel-top { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.hud-sel .hud-av {
    width: 32px; height: 32px; flex: none;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: .85rem; color: #fff; overflow: hidden;
}
.hud-sel .hud-av img { width: 100%; height: 100%; object-fit: cover; }
.hud-sel .hud-name { font-family: var(--font-display); font-weight: 600; font-size: .8rem; display: flex; align-items: center; gap: 4px; line-height: 1.2; }
.hud-sel .hud-game { font-size: .64rem; color: #8FA2C4; margin-top: 2px; }
.hud-sel-bot { display: flex; align-items: center; justify-content: space-between; font-size: .64rem; color: #8FA2C4; }
.hud-sel-bot b { color: #fff; font-family: var(--font-mono); }
.hud-sel-bot .go { color: #6FA0FF; font-weight: 700; }
.hud-foot { position: relative; margin-top: 10px; padding: 9px 6px 2px; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: space-between; font-size: .62rem; letter-spacing: .04em; color: #7C90B4; }
.hud-empty { padding: 30px 14px; text-align: center; color: #8FA2C4; font-size: .84rem; position: relative; }

#listings { scroll-margin-top: var(--nav-h); }

/* ---------- 8. Toolbar (search + filters) -------------------------------- */
.toolbar {
    position: sticky; top: var(--nav-h); z-index: 40;
    padding: 12px 0; background: rgba(244, 246, 250, .9);
    backdrop-filter: blur(10px);
}
.toolbar-inner {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 11px; border: 1px solid var(--line);
    clip-path: polygon(0 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg), 100% 100%, var(--cut-lg) 100%, 0 calc(100% - var(--cut-lg)));
    background: var(--surface); box-shadow: var(--sh-1);
}
.search { position: relative; flex: 1 1 260px; min-width: 200px; display: flex; align-items: center; }
.search .ico {
    position: absolute; left: 14px; color: var(--text-3);
    pointer-events: none; display: grid; place-items: center;
}
.search input {
    width: 100%; padding: 10px 38px 10px 40px;
    border: 1px solid var(--line);
    background: var(--bg-soft); color: var(--text); font-size: .88rem;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.search input::placeholder { color: var(--text-3); }
.search input:focus { outline: none; border-color: var(--neon); box-shadow: 0 0 0 3px var(--neon-soft); }
.search .clear {
    position: absolute; right: 10px; width: 22px; height: 22px; border-radius: 50%;
    display: none; place-items: center; color: var(--text-3); background: var(--surface-3);
}
.search .clear:hover { color: var(--neon); }
.search.has-value .clear { display: grid; }
.price-range {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 6px; border: 1px solid var(--line);
    background: var(--bg-soft);
}
.price-range input {
    width: 68px; padding: 6px 4px; text-align: center;
    border: 0; background: transparent; color: var(--text); font-size: .84rem;
    font-variant-numeric: tabular-nums;
}
.price-range input::placeholder { color: var(--text-3); }
.price-range input:focus { outline: none; }
.price-range input::-webkit-outer-spin-button, .price-range input::-webkit-inner-spin-button { margin: 0; }
.price-range .to { color: var(--text-3); font-size: .8rem; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
#homeGameChips { margin-top: 18px; }
.chip {
    padding: 8px 14px; border: 1px solid var(--line);
    background: var(--bg-soft);
    color: var(--text-2); font-size: .8rem; font-weight: 600;
    transition: all var(--t-fast); cursor: pointer;
}
.chip:hover { color: var(--neon); border-color: var(--neon); }
.chip.active { color: #fff; background: var(--neon-deep); border-color: var(--neon-deep); }
.select-wrap { position: relative; display: inline-flex; }
.select-wrap::after {
    content: ''; position: absolute; right: 14px; top: 50%;
    width: 7px; height: 7px;
    border-right: 2px solid var(--text-3);
    border-bottom: 2px solid var(--text-3);
    transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
select {
    appearance: none; -webkit-appearance: none;
    padding: 9px 36px 9px 14px; border: 1px solid var(--line);
    background: var(--bg-soft);
    color: var(--text); font-size: .82rem; font-weight: 600;
    cursor: pointer; transition: border-color var(--t-fast);
}
select:hover { border-color: var(--neon); }
select:focus { outline: none; border-color: var(--neon); box-shadow: 0 0 0 3px var(--neon-soft); }
select option { background: var(--surface); color: var(--text); }
.result-count { font-size: .8rem; color: var(--text-3); margin-left: auto; padding-right: 4px; }
/* ---------- 9. Product grid + cards -------------------------------------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 18px; }
.listings-more { display: flex; justify-content: center; margin-top: 24px; }
/* Full browse page: two wide columns instead of many small ones. */
.browse-grid { grid-template-columns: 1fr; }
@media (min-width: 680px) { .browse-grid { grid-template-columns: repeat(2, 1fr); } }
.card {
    position: relative; display: flex; flex-direction: column;
    border: 1px solid var(--line);
    clip-path: polygon(0 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg), 100% 100%, var(--cut-lg) 100%, 0 calc(100% - var(--cut-lg)));
    background: var(--surface); overflow: hidden; cursor: pointer;
    isolation: isolate;
    transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--line-strong); }
.card-media { position: relative; aspect-ratio: 16 / 9; background: var(--surface-3); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow), filter var(--t); }
.card:hover .card-media img { transform: scale(1.06); }
.card-media .fallback {
    width: 100%; height: 100%; display: grid; place-items: center;
    font-size: 2.2rem; opacity: .3; background: var(--surface-3);
}
.media-top { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; z-index: 2; }
.media-bottom { position: absolute; left: 12px; right: 12px; bottom: 11px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; z-index: 2; }
.pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: var(--r-xs);
    font-size: .66rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; line-height: 1.5;
    backdrop-filter: blur(8px); border: 1px solid transparent;
    white-space: nowrap;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-available { background: rgba(255,255,255,.94); color: var(--ok); border-color: transparent; }
.pill-reserved  { background: rgba(255,255,255,.94); color: var(--warn); border-color: transparent; }
.pill-sold      { background: rgba(255,255,255,.9); color: var(--danger); border-color: transparent; }
.pill-hot       { background: var(--neon); color: #fff; border-color: transparent; }
.pill-count     { background: rgba(11,18,32,.55); color: #fff; border-color: transparent; text-transform: none; letter-spacing: 0; }
.price-tag {
    font-family: var(--font-display); font-size: 1.25rem; font-weight: 700;
    letter-spacing: -0.01em; color: #fff;
    text-shadow: 0 2px 14px rgba(0,0,0,.5); line-height: 1.1;
}
.price-tag small {
    display: block; font-family: var(--font-ui); font-size: .62rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); text-shadow: none;
}
.card-body { padding: 13px 14px 14px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.card-title {
    font-family: var(--font-display); font-size: .96rem; font-weight: 600; line-height: 1.3; color: var(--neon-deep);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-title-mm {
    font-size: .8rem; line-height: 1.4; color: var(--text-2);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.spec-row { display: flex; flex-wrap: wrap; gap: 6px; }
.spec {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px; border: 1px solid var(--line);
    border-radius: var(--r-xs); background: var(--bg-soft);
    font-size: .72rem; font-weight: 600; color: var(--text-2);
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.spec i { font-style: normal; opacity: .9; }
.spec b { color: var(--neon-deep); font-weight: 700; }
.card-foot {
    margin-top: auto; padding-top: 10px;
    border-top: 1px solid var(--line-soft);
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 6px 10px;
}
.card-cta {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    font-size: .8rem; font-weight: 700; color: var(--neon);
    transition: gap var(--t-fast), color var(--t-fast);
}
.card:hover .card-cta { gap: 10px; color: var(--neon-dim); }
.card.is-sold .card-media img { filter: grayscale(.75) brightness(.85); }

/* Skeletons */
.skeleton { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.sk-media { aspect-ratio: 16/9; background: var(--surface-3); }
.sk-line { height: 12px; border-radius: 6px; margin: 12px 16px; background: var(--surface-3); }
.sk-line.short { width: 45%; }
.sk-media, .sk-line { animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { 0%{opacity:.5} 50%{opacity:1} 100%{opacity:.5} }
/* ---------- 10. Empty state --------------------------------------------- */
.empty { padding: 46px 20px; text-align: center; border: 1px dashed var(--line-strong); clip-path: polygon(0 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg), 100% 100%, var(--cut-lg) 100%, 0 calc(100% - var(--cut-lg))); background: var(--surface); }
.empty .glyph { font-size: 2rem; margin-bottom: 12px; opacity: .7; }
.empty h3 { font-size: 1.05rem; margin-bottom: 6px; }
.empty p { color: var(--text-3); font-size: .88rem; max-width: 42ch; margin-inline: auto; }

/* ---------- 11. Pagination ----------------------------------------------- */
.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 26px; }
.pg {
    min-width: 36px; height: 36px; padding: 0 11px;
    display: inline-grid; place-items: center;
    border: 1px solid var(--line);
    clip-path: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, var(--cut-sm) 100%, 0 calc(100% - var(--cut-sm)));
    background: var(--surface); color: var(--text-2);
    font-size: .83rem; font-weight: 600;
    transition: all var(--t-fast);
}
.pg:hover:not(:disabled) { color: var(--neon); border-color: var(--neon); transform: translateY(-1px); }
.pg:disabled { opacity: .35; cursor: not-allowed; }
.pg.active { background: var(--neon-deep); border-color: var(--neon-deep); color: #fff; }
.pg-gap { color: var(--text-3); padding: 0 4px; }

/* ---------- 12. Detail page ---------------------------------------------- */
.crumbs { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--text-3); padding-block: 18px 6px; }
.crumbs a:hover { color: var(--neon); }
.crumbs .sep { opacity: .5; }
.detail { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 26px; align-items: start; padding-bottom: 46px; }
.gallery { display: flex; flex-direction: column; gap: 10px; }
.gallery-stage {
    position: relative; aspect-ratio: 16 / 9;
    border: 1px solid var(--line);
    clip-path: polygon(0 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg), 100% 100%, var(--cut-lg) 100%, 0 calc(100% - var(--cut-lg)));
    background: var(--surface-2); overflow: hidden; box-shadow: var(--sh-1);
}
.gallery-stage img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.gallery-stage .fallback { width: 100%; height: 100%; display: grid; place-items: center; font-size: 2.6rem; opacity: .3; }
.gallery-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(11,18,32,.55); border: 1px solid rgba(255,255,255,.2);
    backdrop-filter: blur(8px); color: #fff; font-size: 1.15rem;
    transition: background var(--t-fast), transform var(--t-fast);
}
.gallery-nav:hover { background: var(--neon); border-color: var(--neon); transform: translateY(-50%) scale(1.06); }
.gallery-nav.prev { left: 12px; }
.gallery-nav.next { right: 12px; }
.gallery-index {
    position: absolute; right: 12px; bottom: 12px;
    padding: 5px 11px; border-radius: var(--r-xs);
    background: rgba(11,18,32,.6); color: #fff;
    font-size: .72rem; font-weight: 600;
    font-variant-numeric: tabular-nums; backdrop-filter: blur(8px);
}
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 9px; }
.thumb {
    aspect-ratio: 16/9; border: 1px solid var(--line);
    border-radius: var(--r-sm); overflow: hidden; cursor: pointer; opacity: .6;
    transition: opacity var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb:hover { opacity: .85; transform: translateY(-2px); }
.thumb.active { opacity: 1; border-color: var(--neon); box-shadow: 0 0 0 2px var(--neon-soft); }
/* Info panel */
.panel { border: 1px solid var(--line); clip-path: polygon(0 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg), 100% 100%, var(--cut-lg) 100%, 0 calc(100% - var(--cut-lg))); background: var(--surface); padding: 18px; }
.panel + .panel { margin-top: 14px; }
.panel h3 { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--neon); font-weight: 700; margin-bottom: 12px; }
.buy-panel { position: sticky; top: calc(var(--nav-h) + 16px); }
.detail-title { font-size: clamp(1.35rem, 3vw, 1.85rem); letter-spacing: -0.02em; margin-bottom: 5px; }
.detail-title-mm { font-size: .92rem; line-height: 1.4; color: var(--text-2); margin-bottom: 12px; }
.price-block { display: flex; align-items: baseline; gap: 10px; padding: 14px 0; margin: 14px 0; border-block: 1px solid var(--line-soft); }
.price-block .amount { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.35rem); font-weight: 700; letter-spacing: -0.03em; color: var(--neon-deep); }
.price-block .cur { font-size: .78rem; font-weight: 700; color: var(--text-3); letter-spacing: .08em; }
.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 9px; }
.spec-card { padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-soft); }
.spec-card label { display: block; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 700; margin-bottom: 4px; }
.spec-card .val { font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; letter-spacing: -0.01em; color: var(--neon-deep); }
.players { display: flex; flex-wrap: wrap; gap: 7px; }
.player-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border: 1px solid var(--neon);
    border-radius: var(--r-xs); background: var(--neon-faint);
    font-size: .78rem; font-weight: 600; color: var(--neon-deep);
}
.player-tag::before { content: '★'; color: var(--neon); font-size: .72rem; }
.prose { color: var(--text-2); font-size: .91rem; white-space: pre-wrap; }
.prose.mm { line-height: 1.6; }
.lang-tag { display: inline-block; padding: 1px 7px; margin-left: 8px; border: 1px solid var(--line-strong); border-radius: 5px; font-family: var(--font-ui); font-size: .58rem; font-weight: 700; letter-spacing: .1em; color: var(--text-3); vertical-align: middle; }

/* Contact channels */
.channels { display: flex; flex-direction: column; gap: 8px; }
.channel {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 13px; border: 1px solid var(--line);
    border-radius: var(--r); background: var(--bg-soft);
    transition: border-color var(--t-fast), transform var(--t-fast), background var(--t-fast);
}
.channel:hover { border-color: var(--ch, var(--neon)); transform: translateX(3px); background: var(--surface); }
.channel .ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--ch, var(--neon)) 15%, transparent); color: var(--ch, var(--neon)); flex-shrink: 0; }
.channel .ico svg { width: 18px; height: 18px; }
.channel .meta { min-width: 0; flex: 1; }
.channel .meta b { display: block; font-size: .85rem; font-weight: 600; color: var(--neon-deep); }
.channel .meta span { display: block; font-size: .75rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel .go { color: var(--text-3); flex-shrink: 0; transition: color var(--t-fast); }
.channel:hover .go { color: var(--neon); }
.ch-telegram { --ch: #229ED9; }
.ch-facebook { --ch: #1877F2; }
.ch-email    { --ch: #C8323F; }
.ch-phone    { --ch: #0E7C4A; }
.ch-viber    { --ch: #7360F2; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; padding: 4vw; background: rgba(6,10,20,.94); backdrop-filter: blur(8px); animation: fade var(--t) both; }
.lightbox.open { display: grid; }
.lightbox img { max-width: 100%; max-height: 88vh; border-radius: var(--r); box-shadow: var(--sh-3); }
.lightbox .close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #fff; font-size: 1.4rem; cursor: pointer; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
/* ---------- 13. Footer --------------------------------------------------- */
.site-footer { margin-top: 30px; border-top: 1px solid var(--line); background: var(--surface); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 26px; padding-block: 36px 26px; }
.footer-about p { color: var(--text-2); font-size: .86rem; max-width: 38ch; margin-top: 9px; }
.footer-grid h4 { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); margin-bottom: 12px; font-weight: 700; }
.footer-list { display: flex; flex-direction: column; gap: 8px; }
.footer-list a, .footer-list span { color: var(--text-2); font-size: .86rem; transition: color var(--t-fast); }
.footer-list a:hover { color: var(--neon); }
.footer-bottom { border-top: 1px solid var(--line); padding-block: 16px; color: var(--text-3); font-size: .78rem; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.footer-bottom b { color: var(--neon-deep); }

/* ---------- 14. Toast notifications -------------------------------------- */
.toast-stack { position: fixed; bottom: 22px; right: 22px; z-index: 300; display: flex; flex-direction: column-reverse; gap: 10px; max-width: min(380px, calc(100vw - 32px)); }
.toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 15px; border: 1px solid var(--line); border-left: 3px solid var(--neon); border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-3); font-size: .86rem; animation: toast-in var(--t-slow) both; }
.toast.success { border-left-color: var(--ok); }
.toast.error   { border-left-color: var(--danger); }
.toast.info    { border-left-color: var(--neon); }
.toast .glyph { flex-shrink: 0; }
@keyframes toast-in { from { opacity: 0; transform: translateX(24px) scale(.96); } to { opacity: 1; transform: none; } }
.toast.leaving { animation: toast-out var(--t) both; }
@keyframes toast-out { to { opacity: 0; transform: translateX(24px); } }
/* ---------- 15. Forms (shared with admin) ------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .77rem; font-weight: 600; color: var(--text-2); letter-spacing: .01em; display: flex; align-items: center; gap: 6px; }
.field input, .field textarea, .field select {
    width: 100%; padding: 10px 13px;
    border: 1px solid var(--line-strong);
    background: var(--surface); color: var(--text); font-size: .88rem;
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.field textarea { resize: vertical; min-height: 84px; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field input.mm, .field textarea.mm { line-height: 1.4; }
.field input:focus, .field textarea:focus, .field select:focus {
    outline: none; border-color: var(--neon); background: var(--surface);
    box-shadow: 0 0 0 3px var(--neon-soft);
}
.field .hint { font-size: .73rem; color: var(--text-3); line-height: 1.45; }
.field input[type="number"] { font-variant-numeric: tabular-nums; }
.input-prefix { position: relative; display: flex; align-items: center; }
.input-prefix span { position: absolute; left: 13px; font-size: .86rem; color: var(--neon-deep); pointer-events: none; font-weight: 600; }
.input-prefix input { padding-left: 30px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.switch input { display: none; }
.switch .track { width: 40px; height: 23px; border-radius: 99px; background: var(--line-strong); border: 1px solid var(--line-strong); position: relative; transition: background var(--t-fast); }
.switch .track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: transform var(--t-fast), background var(--t-fast); }
.switch input:checked + .track { background: var(--neon); border-color: var(--neon); }
.switch input:checked + .track::after { transform: translateX(17px); }

/* ---------- Avatar upload (seller portal profile) ------------------------ */
.avatar-upload { display: flex; align-items: center; gap: 14px; }
.avatar-upload .preview {
    width: 68px; height: 68px; border-radius: 18px; flex-shrink: 0;
    background: var(--neon-deep); color: #fff; display: grid; place-items: center;
    font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
    overflow: hidden; border: 1px solid var(--line);
}
.avatar-upload .preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-upload .acts { display: flex; flex-direction: column; gap: 6px; }
.avatar-upload input[type="file"] { display: none; }
.avatar-upload .hint { font-size: .73rem; color: var(--text-3); }

/* ---------- 16. Utilities ----------------------------------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hidden { display: none !important; }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.tabular { font-variant-numeric: tabular-nums; }
.fade-up { animation: fadeUp var(--t-slow) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- 16b. Mobile tab bar ------------------------------------------ */
.mtabbar {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px));
    background: rgba(244, 246, 250, .96); backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
}
.mtabbar a {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 4px 2px; color: var(--text-3); font-size: .6rem; font-weight: 600;
    --tab: var(--neon);
}
.mtabbar a .ico { display: grid; place-items: center; width: 18px; height: 18px; margin: 0 auto; transition: filter var(--t-fast); }
.mtabbar a .ico svg { width: 17px; height: 17px; }
.mtabbar a.active { color: var(--tab); }
.mtabbar a.active .ico { color: var(--tab); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--tab) 65%, transparent)); }
.mtabbar a:nth-child(1) { --tab: #1856E8; }
.mtabbar a:nth-child(2) { --tab: #7C5CFF; }
.mtabbar a:nth-child(3) { --tab: #0FA7A0; }
.mtabbar a:nth-child(4) { --tab: #E0961B; }

/* ---------- 17. Responsive ----------------------------------------------- */
@media (max-width: 980px) {
    .hero-inner { grid-template-columns: 1fr; }
    .hero-visual { max-width: 460px; min-height: 0; }
    .detail { grid-template-columns: 1fr; gap: 22px; }
    .buy-panel { position: static; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    /* The about blurb runs much taller than a link column once space is
       tight — pairing it with one column locks the whole row to its height
       and strands the other links with a dead gap below them. Give it its
       own full-width row so the link columns align on their own rhythm. */
    .footer-about { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
    :root { --nav-h: 58px; }
    .shell { padding-inline: 14px; }
    .section { padding-block: 28px; }
    .section-sm { padding-block: 18px; }
    .nav-links { display: none; }
    .brand-name span { display: none; }
    .lang-trigger { height: 32px; padding: 0 9px 0 8px; gap: 5px; }
    .lang-trigger .ico svg { width: 13px; height: 13px; }
    .lang-trigger .chev svg { width: 10px; height: 10px; }
    .lang-trigger .lang-cur { min-width: 20px; font-size: .72rem; }
    .lang-trigger .lang-full { display: none; }
    .lang-trigger .lang-abbr { display: inline; }
    .lang-trigger.is-mm .lang-abbr { font-family: var(--font-mm); }
    .grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .page-head .actions { flex-wrap: nowrap; gap: 8px; }
    .page-head .actions .btn { flex: 1 1 0; min-width: 0; padding: 10px 8px; font-size: .76rem; white-space: normal; line-height: 1.25; text-align: center; }
    .empty { padding: 26px 16px; }
    .empty .glyph { font-size: 1.5rem; margin-bottom: 8px; }
    .empty h3 { font-size: .92rem; }
    .empty p { font-size: .8rem; }
    .toolbar { top: var(--nav-h); }
    .toolbar-inner { padding: 9px; gap: 8px; }
    .search { flex: 1 1 100%; }
    .price-range, .select-wrap { flex: 1 1 calc(50% - 4px); min-width: 0; }
    .price-range input { width: auto; flex: 1 1 0; min-width: 0; }
    .select-wrap select { width: 100%; }
    .result-count { margin-left: 0; width: 100%; }
    .chips { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
    .chips::-webkit-scrollbar { display: none; }
    /* Minimalist dark "gaming" footer on mobile — brand + condensed link
       row + copyright only; the full 3-column link lists stay for desktop. */
    .site-footer {
        background: linear-gradient(160deg, #12294B, #0A1830);
        border-top: 1px solid rgba(255,255,255,.1);
    }
    .footer-grid { grid-template-columns: 1fr; gap: 14px; padding-block: 22px 14px; }
    .footer-about .brand-name b { color: #fff; }
    .footer-about .brand-div { background: rgba(255,255,255,.22); }
    .footer-about p { display: none; }
    .footer-grid > div:not(.footer-about) h4 { display: none; }
    .footer-grid > div:not(.footer-about) { display: contents; }
    .footer-list { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 12px 16px; }
    .footer-list a, .footer-list span { color: #A9BBDD; font-size: .8rem; }
    .footer-list a:hover { color: var(--neon); }
    .footer-bottom {
        flex-direction: column; align-items: flex-start; gap: 4px;
        border-top-color: rgba(255,255,255,.1); color: #7C90B4;
    }
    .footer-bottom span { color: #7C90B4; }
    .toast-stack { left: 16px; right: 16px; bottom: calc(58px + env(safe-area-inset-bottom, 0px)); max-width: none; }
    .hero-actions .btn { flex: 1 1 auto; }
    .hero-stats {
        display: grid; grid-template-columns: repeat(3, 1fr);
        gap: 0; margin-top: 18px;
    }
    .stat-chip {
        padding: 0 8px 0 0; margin-right: 8px; min-width: 0;
    }
    .stat-chip b { font-size: 1.1rem; }
    .stat-chip span { font-size: .58rem; letter-spacing: .03em; white-space: normal; line-height: 1.25; }
    .card-body { padding: 8px 8px 9px; gap: 6px; }
    .card-title { font-size: .74rem; }
    .card-title-mm { font-size: .74rem; }
    .price-tag { font-size: .78rem; }
    .media-bottom { flex-direction: column; align-items: flex-start; gap: 4px; bottom: 8px; left: 8px; right: 8px; }
    .media-top { left: 8px; right: 8px; top: 8px; }
    .pill { font-size: .56rem; padding: 3px 7px; }
    .spec { font-size: .6rem; padding: 3px 6px; }
    .card-seller { font-size: .66rem; }
    .card-cta { font-size: .66rem; }
    .card-foot { padding-top: 7px; }

    .mtabbar { display: grid; grid-template-columns: repeat(4, 1fr); }
    body { padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)); }
    .site-footer { margin-bottom: 0; }
}
@media (max-width: 420px) {
    .footer-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}
@media print {
    body::before, .site-header, .toolbar, .site-footer, .toast-stack { display: none !important; }
    body { background: #fff; color: #000; }
}