/* eddy — design system.
   One family (Plus Jakarta Sans), one saturated purple, a lime accent for money and "yes" moments.
   Light and dark are both first-class: every color is a token, nothing is hardcoded below :root. */
:root {
  --bg: #FBFAFF; --bg-2: #F4F1FC; --card: #FFFFFF; --card-2: #FFFFFF;
  --ink: #17112E; --ink-2: #3A3352; --muted: #6E6786; --faint: #A39DB5;
  --line: #E7E2F3; --line-2: #D6CFEA;
  --p: #6D3BEB; --p-hover: #5B2BD6; --p-deep: #371098; --p-soft: #F0EBFD; --p-tint: #E2D9FB; --p-ink: #4B1FC7; --p-glow: rgba(109,59,235,.55);
  --lime: #C9F26B; --lime-ink: #2F4A00;
  --ok: #1F9D62; --ok-soft: #E4F7EC; --warn: #C77C0B; --warn-soft: #FFF3DB; --bad: #D93B4B; --bad-soft: #FDE8EA; --info: #2F5FD6; --info-soft: #E6EDFD;
  --on-media: rgba(255,255,255,.94); --on-media-ink: #17112E; --topbar: rgba(251,250,255,.86); --tile-shade: rgba(17,5,46,.85); --media-border: #fff;
  --flag-row: #FFF8F0; --banner-warn-line: #F3D9A4; --banner-warn-ink: #6E4405;
  --r: 14px; --r-sm: 10px; --r-btn: 10px; --r-pill: 999px; --r-chip: 8px;
  --shadow: 0 1px 2px rgba(23,17,46,.05), 0 8px 24px -12px rgba(77,44,168,.18);
  --shadow-lg: 0 2px 4px rgba(23,17,46,.06), 0 24px 48px -16px rgba(77,44,168,.28);
  --font: "Plus Jakarta Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font); --font-body: var(--font);
  --wrap: 1200px;        /* reading-width pages: forms, settings, help, checkout, cart */
  --wrap-wide: 1760px;   /* storefront: header, strip, home, catalog, product, footer */
  --stick: 82px; /* sticky offset below the header; the home page adds the category strip (see body.is-home) */
  color-scheme: light;
}
html[data-theme="dark"] {
  --bg: #100D1C; --bg-2: #181430; --card: #1A1630; --card-2: #211C3B;
  --ink: #F1EEFA; --ink-2: #CFC9E3; --muted: #9A93B3; --faint: #6C6588;
  --line: #2A2444; --line-2: #3A3258;
  --p: #8B63F5; --p-hover: #9C7AF7; --p-deep: #C4ACFF; --p-soft: #251C46; --p-tint: #33285C; --p-ink: #B9A3FF; --p-glow: rgba(139,99,245,.45);
  --lime: #C9F26B; --lime-ink: #2F4A00;
  --ok: #4CC98A; --ok-soft: #12301F; --warn: #E9A23B; --warn-soft: #3A2A0D; --bad: #F2647A; --bad-soft: #3B1520; --info: #6F94F0; --info-soft: #17213D;
  --on-media: rgba(26,22,48,.92); --on-media-ink: #F1EEFA; --topbar: rgba(16,13,28,.82); --tile-shade: rgba(8,4,20,.9); --media-border: #1A1630;
  --flag-row: #2A1E14; --banner-warn-line: #5A4116; --banner-warn-ink: #F0C97E;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.5), 0 24px 48px -16px rgba(0,0,0,.7);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --bg: #100D1C; --bg-2: #181430; --card: #1A1630; --card-2: #211C3B;
    --ink: #F1EEFA; --ink-2: #CFC9E3; --muted: #9A93B3; --faint: #6C6588;
    --line: #2A2444; --line-2: #3A3258;
    --p: #8B63F5; --p-hover: #9C7AF7; --p-deep: #C4ACFF; --p-soft: #251C46; --p-tint: #33285C; --p-ink: #B9A3FF; --p-glow: rgba(139,99,245,.45);
    --ok: #4CC98A; --ok-soft: #12301F; --warn: #E9A23B; --warn-soft: #3A2A0D; --bad: #F2647A; --bad-soft: #3B1520; --info: #6F94F0; --info-soft: #17213D;
    --on-media: rgba(26,22,48,.92); --on-media-ink: #F1EEFA; --topbar: rgba(16,13,28,.82); --tile-shade: rgba(8,4,20,.9); --media-border: #1A1630;
    --flag-row: #2A1E14; --banner-warn-line: #5A4116; --banner-warn-ink: #F0C97E;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-lg: 0 2px 4px rgba(0,0,0,.5), 0 24px 48px -16px rgba(0,0,0,.7);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.5; color: var(--ink); background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background:
  radial-gradient(60% 40% at 100% 0%, rgba(109,59,235,.08), transparent 60%),
  radial-gradient(40% 30% at 0% 100%, rgba(201,242,107,.10), transparent 60%); }
img { max-width: 100%; display: block; }
a { color: var(--p-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 0; color: var(--ink); }
h1 { font-size: clamp(28px, 3.2vw, 38px); }
h2 { font-size: clamp(20px, 2.1vw, 25px); }
h3 { font-size: 17px; }
p { margin: 0 0 1em; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em; background: var(--bg-2); padding: 1px 6px; border-radius: 5px; }
small { color: var(--muted); }
abbr { text-decoration: none; border-bottom: 1px dotted var(--faint); cursor: help; }
::selection { background: var(--lime); color: var(--lime-ink); }
:focus-visible { outline: 2px solid var(--p); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.i { width: 20px; height: 20px; flex: none; vertical-align: -5px; }
.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
.wrap-wide { width: min(var(--wrap-wide), 100% - 48px); margin-inline: auto; }
@media (max-width: 899px) { .wrap, .wrap-wide { width: calc(100% - 32px); } }
.main { flex: 1; padding: 22px 0 64px; }
.h-sub { font-size: 18px; margin: 30px 0 12px; }
.h-sub.danger { color: var(--bad); }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--p-ink); background: var(--p-soft); padding: 5px 11px; border-radius: 7px; }
.eyebrow .i { width: 16px; height: 16px; }
.is-hidden { display: none !important; }
select, input, textarea, button { font-family: inherit; }
/* Native <select> popups paint with the OS scheme, so give every option explicit theme colours —
   otherwise dark mode shows light text on a white popup. */
select, input, textarea { color-scheme: inherit; }
select option { background: var(--card); color: var(--ink); }
select option:checked { background: var(--p-soft); color: var(--p-ink); }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 700; font-size: 14.5px; padding: 10px 18px; border-radius: var(--r-btn); border: 1.5px solid transparent; cursor: pointer; text-decoration: none !important; white-space: nowrap; transition: transform .12s ease, background .15s ease, box-shadow .15s ease, border-color .15s; line-height: 1.2; }
.btn:active { transform: translateY(1px); }
.btn .i { width: 18px; height: 18px; }
.btn-primary { background: var(--p); color: #fff; box-shadow: 0 6px 16px -8px var(--p-glow); }
.btn-primary:hover { background: var(--p-hover); }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--p); color: var(--p-ink); background: var(--p-soft); }
.btn-danger { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.btn-danger:hover { background: var(--bad); color: #fff; }
.btn-social { background: var(--card); color: var(--ink); border-color: var(--line-2); width: 100%; }
.btn-social:hover { border-color: var(--ink); }
.btn-sm { padding: 6px 12px; font-size: 13.5px; border-radius: 8px; }
.btn-lg { padding: 14px 24px; font-size: 16px; border-radius: 12px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn-row form { display: contents; }

/* ---------------------------------------------------------------- header */
.topbar { position: sticky; top: 0; z-index: 60; background: var(--topbar); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.topbar-in { display: flex; align-items: center; gap: 18px; height: 66px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -.04em; color: var(--ink); text-decoration: none !important; }
.brand-word { transform: translateY(-1px); }
.logo-mark { border-radius: 9px; box-shadow: 0 4px 10px -4px var(--p-glow); }
.search { flex: 1; display: flex; align-items: center; gap: 10px; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; padding: 0 14px; height: 44px; max-width: 820px; transition: border-color .15s, box-shadow .15s; }
.search:focus-within { border-color: var(--p); box-shadow: 0 0 0 4px var(--p-soft); }
.search-i { color: var(--muted); }
.search input { flex: 1; border: 0; background: none; font: inherit; font-size: 15px; color: var(--ink); outline: none; min-width: 0; }
.search input::placeholder { color: var(--faint); }
.search-img { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-right: -4px; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 8px; transition: .12s; }
.search-img:hover { color: var(--p); background: var(--p-soft); }
.search-img .i { width: 19px; height: 19px; }
.search-img.is-busy { opacity: .5; pointer-events: none; }
.topnav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.topnav-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; color: var(--ink-2); }
.topnav-btn:hover, .topnav-btn.is-active { background: var(--p-soft); color: var(--p-ink); text-decoration: none; }
.topnav-btn .i { width: 22px; height: 22px; }
.dot { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--p); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--bg); }
.btn-sell { margin-left: 8px; }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu-btn { width: auto; padding: 0 6px 0 3px; gap: 2px; }
.menu-chev { width: 16px; height: 16px; }
.menu-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 250px; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: 0 20px 48px -14px rgba(8,4,20,.6), 0 6px 16px -8px rgba(8,4,20,.45); padding: 6px; z-index: 70; animation: pop .15s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.menu-head { display: flex; gap: 10px; align-items: center; padding: 10px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.menu-head div { display: flex; flex-direction: column; min-width: 0; }
.menu-head small { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-pop a, .menu-pop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 8px; color: var(--ink); font: inherit; background: none; border: 0; cursor: pointer; text-align: left; }
.menu-pop a:hover, .menu-pop button:hover { background: var(--p-soft); color: var(--p-ink); text-decoration: none; }
.menu-pop .i { width: 18px; height: 18px; color: var(--muted); }
.menu-pop form { margin: 0; }
/* Compact overflow (⋯) menu — e.g. "Sell similar" on a listing. Reuses .menu / .menu-pop. */
.more-pop { width: auto; min-width: 190px; }
.more-menu > summary.more-btn { padding: 0 8px; }
/* Icon-over-label category strip. */
.catnav { border-top: 1px solid var(--line); background: var(--card); }
.catnav-in { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 5px 0; }
.catnav-in::-webkit-scrollbar { display: none; }
.catnav a { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 96px; padding: 8px 18px 7px; border-radius: 10px; font-weight: 600; font-size: 12.5px; line-height: 1.2; color: var(--ink-2); white-space: nowrap; transition: background .15s, color .15s; }
.catnav a .i { width: 24px; height: 24px; color: var(--muted); transition: color .15s, transform .15s; }
@media (max-width: 899px) { .catnav-in { gap: 0; } .catnav a { min-width: 74px; padding: 7px 10px 6px; font-size: 12px; } .catnav a .i { width: 22px; height: 22px; } }
.catnav a:hover { background: var(--p-soft); color: var(--p-ink); text-decoration: none; }
.catnav a:hover .i { color: var(--p); transform: translateY(-1px); }
.catnav a.is-active { background: var(--p-soft); color: var(--p-ink); }
.catnav a.is-active .i { color: var(--p); }
.catnav-help { margin-left: auto; }

/* ------------------------------------------------------------- flashes */
.flashes { position: fixed; top: 76px; right: 20px; z-index: 60; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100% - 40px)); }
.flash { display: flex; align-items: flex-start; gap: 10px; background: var(--ink); color: var(--bg); padding: 12px 12px 12px 14px; border-radius: 12px; box-shadow: var(--shadow-lg); animation: slide .25s ease; font-size: 14px; }
@keyframes slide { from { opacity: 0; transform: translateX(16px); } }
.flash .i { color: var(--lime); margin-top: 1px; }
.flash-error { background: #3B1017; color: #fff; }
.flash-error .i { color: #FF8A96; }
.flash span { flex: 1; }
.flash-x { background: none; border: 0; color: inherit; opacity: .7; cursor: pointer; padding: 0; margin-top: 1px; }
.flash-x .i { color: inherit; width: 16px; height: 16px; }
.flash.is-out { opacity: 0; transform: translateX(16px); transition: .25s; }

/* --------------------------------------------------------------- footer */
.footer { border-top: 1px solid var(--line); background: var(--card); padding: 44px 0 110px; margin-top: auto; }
.footer-top { display: grid; grid-template-columns: 1.5fr repeat(5, 1fr); gap: 26px; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) and (max-width: 1200px) { .footer-top { grid-template-columns: repeat(3, 1fr); gap: 20px 28px; } .footer-brand { grid-column: 1 / -1; } }
.footer-brand p { color: var(--muted); font-size: 14px; max-width: 320px; margin: 14px 0; }
.footer-social { display: flex; gap: 6px; }
.footer-social a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line); color: var(--ink-2); }
.footer-social a:hover { border-color: var(--p); color: var(--p-ink); }
.footer-social .i { width: 18px; height: 18px; }
.footer-col summary { list-style: none; display: flex; align-items: center; justify-content: space-between; cursor: default; pointer-events: none; }
.footer-col summary::-webkit-details-marker { display: none; }
.footer-col summary .i { display: none; }
.footer h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 12px; }
.footer-col div { display: flex; flex-direction: column; }
.footer-col a, .footer-linkbtn { display: block; color: var(--ink-2); padding: 4px 0; font-size: 14px; background: none; border: 0; text-align: left; cursor: pointer; font: inherit; font-size: 14px; }
.footer-col a:hover, .footer-linkbtn:hover { color: var(--p-ink); text-decoration: underline; }
.footer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding-top: 22px; }
.footer-copy { margin-left: auto; font-size: 13px; }
.footer-lang { display: flex; align-items: center; gap: 8px; margin: 0; }
.footer-lang label { position: relative; display: inline-flex; align-items: center; gap: 8px; background: var(--bg); border: 1.5px solid var(--line-2); border-radius: 9px; padding: 0 10px; height: 38px; color: var(--muted); }
.footer-lang label:focus-within { border-color: var(--p); }
.footer-lang select { appearance: none; -webkit-appearance: none; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); padding-right: 22px; cursor: pointer; outline: none; }
.footer-lang .sel-chev { position: absolute; right: 8px; width: 16px; height: 16px; pointer-events: none; }
.js .footer-apply { display: none; }
.theme-switch { display: inline-flex; gap: 2px; margin: 0; background: var(--bg); border: 1.5px solid var(--line-2); border-radius: 9px; padding: 3px; }
.theme-switch button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); padding: 5px 10px; border-radius: 6px; cursor: pointer; }
.theme-switch button .i { width: 16px; height: 16px; }
.theme-switch button:hover { color: var(--ink); }
.theme-switch button.is-on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
@media (min-width: 900px) { .footer { padding-bottom: 44px; } }
@media (max-width: 899px) {
  .footer { padding: 30px 0 100px; }
  .footer-top { grid-template-columns: 1fr; gap: 0; padding-bottom: 6px; }
  .footer-brand { padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
  .footer-col { border-bottom: 1px solid var(--line); }
  .footer-col summary { pointer-events: auto; cursor: pointer; padding: 13px 0; }
  .footer-col summary .i { display: block; width: 18px; height: 18px; color: var(--muted); transition: transform .2s; }
  .footer-col[open] summary .i { transform: rotate(180deg); }
  .footer h4 { margin: 0; }
  .footer-col div { padding: 0 0 12px; }
  .footer-col a, .footer-linkbtn { padding: 8px 0; font-size: 15px; }
  .footer-bar { flex-direction: column; align-items: stretch; gap: 12px; padding-top: 18px; }
  .footer-lang label { flex: 1; height: 44px; }
  .footer-lang select { flex: 1; }
  .theme-switch { justify-content: stretch; }
  .theme-switch button { flex: 1; justify-content: center; padding: 9px 8px; }
  .footer-copy { margin: 4px 0 0; text-align: center; }
}

/* --------------------------------------------------------------- cookie */
.cookie { position: fixed; left: 20px; bottom: 20px; z-index: 70; width: min(440px, calc(100% - 40px)); background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 16px; display: flex; flex-direction: column; gap: 12px; animation: pop .3s ease; }
.cookie[hidden] { display: none; }
.cookie p { margin: 0; font-size: 14px; }
.cookie div { display: flex; gap: 8px; justify-content: flex-end; }
@media (max-width: 899px) { .cookie { bottom: 76px; } }

/* --------------------------------------------------------------- tabbar */
.tabbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--topbar); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
.tabbar a { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 600; color: var(--muted); padding: 4px 0; }
.tabbar a.is-active { color: var(--p-ink); }
.tabbar .i { width: 23px; height: 23px; }
.tab-dot { position: absolute; top: 3px; left: calc(50% + 6px); width: 8px; height: 8px; border-radius: 50%; background: var(--bad); border: 2px solid var(--bg); }
.tabbar-sell .i { width: 44px; height: 44px; padding: 10px; background: var(--p); color: #fff; border-radius: 13px; margin-top: -20px; box-shadow: 0 6px 16px -4px var(--p-glow); }
@media (max-width: 899px) { .tabbar { display: flex; } .main { padding-bottom: 90px; } }

/* ----------------------------------------------------------------- hero */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 96px); align-items: center; padding: 30px 0 20px; min-height: 480px; }
.hero h1 { font-size: clamp(42px, 5.4vw, 92px); font-weight: 800; letter-spacing: -.045em; line-height: .98; margin: 18px 0 20px; }
.hero h1 em { font-style: normal; color: var(--p); position: relative; display: inline-block; }
.hero h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: .04em; height: .14em; background: var(--lime); z-index: -1; border-radius: 4px; transform: rotate(-1.2deg); }
.hero p { font-size: clamp(17px, 1.2vw, 20px); color: var(--ink-2); max-width: 560px; }
.hero-search { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1.5px solid var(--line-2); border-radius: 14px; padding: 6px 6px 6px 16px; max-width: 640px; box-shadow: var(--shadow); margin: 8px 0 26px; }
.hero-search:focus-within { border-color: var(--p); box-shadow: 0 0 0 4px var(--p-soft); }
.hero-search .i { color: var(--muted); }
.hero-search input { flex: 1; border: 0; background: none; font: inherit; font-size: 16px; color: var(--ink); outline: none; min-width: 0; }
.hero-stats { display: flex; gap: 32px; }
.hero-stats strong { display: block; font-family: var(--font-display); font-size: 26px; letter-spacing: -.03em; }
.hero-stats span { font-size: 13px; color: var(--muted); }
.hero-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin: -12px 0 22px; }
.hero-links a { padding: 4px 10px; border: 1px solid var(--line-2); border-radius: var(--r-chip); color: var(--ink-2); font-weight: 600; background: var(--card); }
.hero-links a:hover { border-color: var(--p); color: var(--p-ink); text-decoration: none; }
.hero-collage { position: relative; height: clamp(440px, 34vw, 640px); }
.hero-collage img { position: absolute; object-fit: cover; border-radius: 22px; box-shadow: var(--shadow-lg); background: var(--bg-2); }
.hc-main { left: 14%; top: 0; width: 58%; height: 84%; }
.hc-a { left: 0; bottom: 4%; width: 34%; height: 46%; border: 5px solid var(--media-border); animation: float 8s ease-in-out infinite; }
.hc-b { right: 0; top: 10%; width: 34%; height: 44%; border: 5px solid var(--media-border); animation: float 9s ease-in-out -3s infinite; }
.hero-chip { position: absolute; display: inline-flex; align-items: center; gap: 6px; background: var(--card); color: var(--ink); font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 10px; box-shadow: var(--shadow-lg); animation: float 7s ease-in-out infinite; white-space: nowrap; }
.hero-chip .i { width: 16px; height: 16px; color: var(--p); }
.hero-chip b { font-family: var(--font-display); color: var(--p-ink); }
.hero-chip-1 { left: 8%; top: 8%; animation-delay: -1s; }
.hero-chip-1 .i { color: #E4A11B; }
.hero-chip-2 { right: 4%; bottom: 20%; animation-delay: -4s; }
.hero-chip-3 { left: 40%; bottom: 0; animation-delay: -2.5s; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@media (max-width: 899px) { .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 10px; } .hero-collage { height: 360px; margin-top: 10px; } .hero-stats { gap: 20px; } }
.perks-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 10px 0 20px; }
.perks-strip div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.perks-strip .i { grid-row: 1 / 3; width: 26px; height: 26px; color: var(--p); background: var(--p-soft); padding: 6px; border-radius: 10px; box-sizing: content-box; }
.perks-strip strong { font-family: var(--font-display); font-size: 15px; }
.perks-strip span { font-size: 12.5px; color: var(--muted); }
@media (max-width: 899px) { .perks-strip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .perks-strip { grid-template-columns: 1fr; } }
.banner { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 40px; background: #17112E; color: #fff; border-radius: 24px; overflow: hidden; margin: 44px 0 20px; min-height: 420px; }
.banner > img { width: 100%; height: 100%; object-fit: cover; min-height: 420px; }
.banner-copy { padding: 40px 48px 40px 0; }
.banner-copy .eyebrow { background: rgba(255,255,255,.1); color: var(--lime); }
.banner-copy h2 { color: #fff; font-size: clamp(28px, 3.2vw, 42px); margin: 16px 0 14px; }
.banner-copy p { color: rgba(255,255,255,.75); max-width: 480px; margin-bottom: 22px; }
.banner-copy .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.banner-copy .btn-ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.banner-steps { list-style: none; margin: 26px 0 0; padding: 0; display: flex; gap: 22px; flex-wrap: wrap; font-size: 14px; color: rgba(255,255,255,.8); }
.banner-steps b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--lime); color: var(--lime-ink); font-family: var(--font-display); margin-right: 6px; }
@media (max-width: 899px) { .banner { grid-template-columns: 1fr; min-height: 0; } .banner > img { min-height: 220px; max-height: 260px; } .banner-copy { padding: 0 24px 28px; } }
.brand-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 18px 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); margin: 10px 0 6px; }
.brand-row > span { font-weight: 700; font-family: var(--font-display); margin-right: 6px; }
.brand-row a { padding: 6px 14px; border-radius: var(--r-chip); border: 1.5px solid var(--line-2); color: var(--ink); font-weight: 600; font-size: 13.5px; }
.brand-row a:hover { border-color: var(--p); color: var(--p-ink); text-decoration: none; }
.brand-row-all { margin-left: auto; border: 0 !important; color: var(--p-ink) !important; display: inline-flex; align-items: center; gap: 4px; }
.brand-row-all .i { width: 16px; height: 16px; }
.sellers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.seller { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 14px; color: var(--ink); transition: .2s; }
.seller:hover { border-color: var(--p); transform: translateY(-3px); box-shadow: var(--shadow-lg); text-decoration: none; }
.seller strong { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-display); font-size: 16px; margin-top: 4px; }
.seller small { font-size: 12.5px; }
@media (max-width: 899px) { .sellers { grid-template-columns: repeat(2, 1fr); } }

/* -------------------------------------------------------------- sections */
.section { padding: 34px 0 6px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.section-head a { font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.section-head a .i { width: 16px; height: 16px; }
.tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.tile { position: relative; display: block; aspect-ratio: 4/5; border-radius: 16px; overflow: hidden; background: var(--bg-2); color: #fff; transition: transform .25s, box-shadow .25s; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--tile-shade) 0%, rgba(17,5,46,.25) 45%, transparent 70%); }
.tile-body { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 1; display: flex; flex-direction: column; }
.tile strong { font-family: var(--font-display); font-size: 21px; letter-spacing: -.02em; }
.tile small { color: rgba(255,255,255,.8); font-size: 12.5px; }
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); text-decoration: none; }
.tile:hover img { transform: scale(1.06); }
@media (max-width: 1000px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .tiles { grid-template-columns: repeat(2, 1fr); gap: 8px; } .tile { aspect-ratio: 1; border-radius: 12px; } .tile strong { font-size: 17px; } }
.split { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; align-items: start; }
.split-promo { background: linear-gradient(160deg, var(--p-soft), var(--card)); border: 1px solid var(--p-tint); border-radius: 20px; padding: 28px; position: sticky; top: var(--stick); }
.split-promo h2 { margin: 14px 0 10px; }
.split-promo p { color: var(--ink-2); }
@media (max-width: 899px) { .split { grid-template-columns: 1fr; } .split-promo { position: static; } }

/* ---------------------------------------------------- why eddy (trust block) */
.section-head-center { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.section-head-center h2 { font-size: clamp(22px, 2.4vw, 30px); }
.section-head-center p { color: var(--muted); max-width: 580px; margin: 0; }
.why-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 4px; }
.why-card { display: flex; flex-direction: column; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 20px; text-align: left; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }
a.why-card:hover { border-color: var(--p-tint); box-shadow: var(--shadow); transform: translateY(-2px); }
.why-card .i { width: 24px; height: 24px; color: var(--p); background: var(--p-soft); padding: 9px; border-radius: 12px; box-sizing: content-box; }
.why-card strong { font-family: var(--font-display); font-size: 15.5px; }
.why-card span { font-size: 13px; color: var(--muted); line-height: 1.55; }
@media (max-width: 1100px) { .why-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .why-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px 16px; }
@media (max-width: 560px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; } }
/* horizontal scroll rows (home carousels) */
.grid-scroll { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 208px; gap: 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; padding: 2px 2px 12px; margin: 0 -2px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; overscroll-behavior-x: contain; }
.grid-scroll > * { scroll-snap-align: start; }
.grid-scroll::-webkit-scrollbar { height: 8px; }
.grid-scroll::-webkit-scrollbar-track { background: transparent; }
.grid-scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }
@media (max-width: 560px) { .grid-scroll { grid-auto-columns: 44%; gap: 10px; } }
.card { position: relative; display: flex; flex-direction: column; min-width: 0; animation: rise .4s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.card:nth-child(2) { animation-delay: .03s } .card:nth-child(3) { animation-delay: .06s } .card:nth-child(4) { animation-delay: .09s } .card:nth-child(5) { animation-delay: .12s } .card:nth-child(6) { animation-delay: .15s } .card:nth-child(7) { animation-delay: .18s } .card:nth-child(8) { animation-delay: .21s }
.card-media { display: block; aspect-ratio: 4/5; border-radius: 12px; overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); position: relative; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.2,.8,.2,1); background: var(--bg-2); }
.card:hover .card-media img { transform: scale(1.04); }
.card-sold { position: absolute; left: 8px; top: 8px; background: var(--ink); color: var(--bg); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 4px 8px; border-radius: 6px; }
.is-sold .card-media img { filter: grayscale(.6); opacity: .8; }
.fav { position: absolute; right: 8px; top: 8px; display: inline-flex; align-items: center; gap: 3px; background: var(--on-media); border: 0; border-radius: 9px; padding: 6px 8px 6px 7px; cursor: pointer; color: var(--on-media-ink); font: inherit; font-size: 12px; font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,.12); transition: transform .15s; z-index: 2; }
.fav:hover { transform: scale(1.08); }
.fav .i { width: 18px; height: 18px; }
.fav .i-on { display: none; color: var(--bad); }
.fav.is-on .i-on { display: block; animation: beat .3s ease; }
.fav.is-on .i-off { display: none; }
@keyframes beat { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.fav-n:empty { display: none; }
.fav-lg { position: static; padding: 9px 13px 9px 11px; font-size: 14px; background: var(--card); border: 1.5px solid var(--line-2); box-shadow: none; color: var(--ink); }
.card-body { padding: 8px 2px 0; display: flex; flex-direction: column; gap: 1px; }
.card-title { color: var(--ink); font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-meta { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-price { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin-top: 3px; }
.card-incl { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--p-ink); font-weight: 600; }
.card-incl span { color: var(--muted); font-weight: 500; }
.card-incl .i { width: 13px; height: 13px; }

/* ------------------------------------------------------------- catalog */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.crumbs a { color: var(--muted); }
.crumbs i { font-style: normal; color: var(--faint); }
.crumbs span { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-sub { color: var(--muted); margin: 6px 0 0; }
.page-actions { display: flex; gap: 8px; }
.catalog { display: grid; grid-template-columns: 250px 1fr; gap: 28px; align-items: start; }
.filters { position: sticky; top: var(--stick); background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.filters-head { display: flex; justify-content: space-between; align-items: center; }
.filters-head strong { display: inline-flex; align-items: center; gap: 6px; }
.filters-head a { font-size: 13px; }
.filters label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.filters select, .filters input { font: inherit; font-size: 14px; color: var(--ink); padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--card); width: 100%; }
.price-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filters-toggle { display: none; }
.sortbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; min-width: 0; }
.catalog-main { min-width: 0; }
.sortbar-n { color: var(--muted); font-size: 14px; margin-right: auto; }
.sortsel { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); font-weight: 600; margin: 0; }
.sortsel label { display: inline-flex; align-items: center; gap: 8px; }
.sortsel select { font: inherit; font-size: 14px; color: var(--ink); padding: 7px 10px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--card); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chips-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.chips-scroll::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px; border-radius: var(--r-chip); border: 1.5px solid var(--line-2); background: var(--card); color: var(--ink); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.chip b { color: var(--faint); font-weight: 600; }
.chip .i { width: 14px; height: 14px; }
.chip:hover { border-color: var(--p); color: var(--p-ink); text-decoration: none; }
.chip.is-on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip.is-on b { color: inherit; opacity: .6; }
.pager { display: flex; justify-content: center; gap: 6px; margin: 30px 0 0; }
.pg { display: inline-flex; align-items: center; gap: 4px; min-width: 38px; height: 38px; padding: 0 12px; border-radius: 9px; border: 1.5px solid var(--line-2); background: var(--card); color: var(--ink); font-weight: 600; justify-content: center; }
.pg .i { width: 16px; height: 16px; }
.pg.is-cur { background: var(--p); color: #fff; border-color: var(--p); }
.empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty-i { width: 44px; height: 44px; color: var(--p-tint); margin-bottom: 10px; }
.empty h3 { color: var(--ink); margin-bottom: 6px; }
.empty .btn { margin-top: 12px; }
@media (max-width: 899px) {
  .catalog { grid-template-columns: 1fr; }
  .filters { position: fixed; inset: 0; z-index: 80; border-radius: 0; overflow: auto; display: none; padding: 20px; padding-bottom: 40px; }
  .filters.is-open { display: flex; }
  .filters-toggle { display: inline-flex; }
}
.hub { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding: 32px 32px 28px; border-radius: 22px; margin-bottom: 18px; background: linear-gradient(120deg, var(--hub-a, var(--p-soft)), var(--card)); border: 1px solid var(--line); }
.hub h1 { font-size: clamp(34px, 4.5vw, 54px); margin: 10px 0 6px; letter-spacing: -.04em; }
.hub p { color: var(--ink-2); margin: 0; font-size: 16px; }
.hub-n { text-align: right; color: var(--muted); font-size: 13px; }
.hub-n strong { display: block; font-family: var(--font-display); font-size: 34px; color: var(--ink); letter-spacing: -.03em; }
.hub-women { --hub-a: #FBE3F0; } .hub-men { --hub-a: #E2E8FB; } .hub-kids { --hub-a: #FDEBD1; } .hub-designer { --hub-a: #E9DDFB; } .hub-home { --hub-a: #DDF5E9; } .hub-electronics { --hub-a: #DDEEFA; }
html[data-theme="dark"] .hub, html:not([data-theme]) .hub { --hub-a: var(--p-soft); }
@media (prefers-color-scheme: light) { html:not([data-theme]) .hub-women { --hub-a: #FBE3F0; } html:not([data-theme]) .hub-men { --hub-a: #E2E8FB; } html:not([data-theme]) .hub-kids { --hub-a: #FDEBD1; } html:not([data-theme]) .hub-designer { --hub-a: #E9DDFB; } html:not([data-theme]) .hub-home { --hub-a: #DDF5E9; } html:not([data-theme]) .hub-electronics { --hub-a: #DDEEFA; } }
html[data-theme="light"] .hub-women { --hub-a: #FBE3F0; } html[data-theme="light"] .hub-men { --hub-a: #E2E8FB; } html[data-theme="light"] .hub-kids { --hub-a: #FDEBD1; } html[data-theme="light"] .hub-designer { --hub-a: #E9DDFB; } html[data-theme="light"] .hub-home { --hub-a: #DDF5E9; } html[data-theme="light"] .hub-electronics { --hub-a: #DDEEFA; }
.brand-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 13.5px; }
.brand-strip span { color: var(--muted); font-weight: 600; margin-right: 4px; }
.brand-strip a { padding: 4px 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-chip); color: var(--ink); font-weight: 600; }
.brand-strip a:hover { border-color: var(--p); color: var(--p-ink); text-decoration: none; }

/* brands */
.brand-top { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 28px; }
.brand-top-card { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; color: var(--ink); transition: .2s; }
.brand-top-card strong { font-family: var(--font-display); font-size: 18px; }
.brand-top-card span { font-size: 13px; color: var(--muted); grid-column: 1; }
.brand-top-card .i { grid-column: 2; grid-row: 1 / 3; color: var(--p); }
.brand-top-card:hover { border-color: var(--p); transform: translateY(-2px); box-shadow: var(--shadow); text-decoration: none; }
.az { display: flex; flex-wrap: wrap; gap: 4px; position: sticky; top: calc(var(--stick) - 20px); background: var(--bg); padding: 10px 0; z-index: 5; margin-bottom: 10px; }
.az a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; font-family: var(--font-display); font-weight: 700; color: var(--ink); background: var(--card); border: 1px solid var(--line); }
.az a:hover { background: var(--p); color: #fff; border-color: var(--p); text-decoration: none; }
.brand-cols { columns: 4 200px; column-gap: 32px; }
.brand-group { break-inside: avoid; margin-bottom: 26px; }
.brand-group h2 { font-size: 30px; color: var(--p); padding-bottom: 4px; border-bottom: 2px solid var(--line); margin-bottom: 8px; scroll-margin-top: calc(var(--stick) + 40px); }
.brand-group ul { list-style: none; margin: 0; padding: 0; }
.brand-group li { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px dashed var(--line); }
.brand-group li a { color: var(--ink); font-weight: 500; }
.brand-group li span { color: var(--faint); font-size: 13px; }

/* ------------------------------------------------------------- detail */
.detail { display: grid; grid-template-columns: minmax(0, 640px) minmax(340px, 520px); gap: 40px; align-items: start; justify-content: center; }
@media (max-width: 899px) { .detail { grid-template-columns: 1fr; gap: 20px; } }
.gallery { position: sticky; top: var(--stick); }
@media (max-width: 899px) { .gallery { position: static; } }
.gallery-main { position: relative; border-radius: 18px; overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); aspect-ratio: 1/1; }
.gallery-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-slide { flex: none; width: 100%; height: 100%; margin: 0; scroll-snap-align: start; }
.gallery-slide img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 10px; border: 0; background: var(--on-media); color: var(--on-media-ink); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow); opacity: 0; transition: opacity .15s; }
.gallery-main:hover .gallery-nav, .gallery-nav:focus-visible { opacity: 1; }
.gallery-prev { left: 12px; } .gallery-next { right: 12px; }
.gallery-count { position: absolute; right: 12px; bottom: 12px; background: rgba(23,17,46,.75); color: #fff; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 7px; }
.gallery-fav { position: absolute; left: 12px; top: 12px; z-index: 2; }
.gallery-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.gallery-thumbs button { flex: none; width: 66px; aspect-ratio: 1/1; border-radius: 10px; overflow: hidden; border: 2px solid transparent; padding: 0; background: var(--bg-2); cursor: pointer; opacity: .7; transition: .15s; }
.gallery-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs button.is-on { border-color: var(--p); opacity: 1; }
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(12,8,24,.92); display: grid; place-items: center; padding: 20px; animation: fade .2s; }
.lightbox[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; cursor: zoom-out; }
.lightbox-x { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 12px; border: 0; background: rgba(255,255,255,.15); color: #fff; display: grid; place-items: center; cursor: pointer; }
.detail-info { display: flex; flex-direction: column; gap: 18px; }
.detail-top { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.detail-top h1 { font-size: clamp(22px, 2.3vw, 29px); }
.detail-top-actions { display: flex; gap: 6px; flex: none; }
.detail-meta { color: var(--muted); margin-top: 6px; font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px 0; }
.detail-meta i { font-style: normal; color: var(--faint); margin: 0 6px; }
.buybox { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow); }
.buybox-price { display: flex; flex-direction: column; gap: 4px; }
.buybox-price strong { font-family: var(--font-display); font-size: 24px; letter-spacing: -.03em; line-height: 1; }
.buybox-price span { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; color: var(--p-ink); font-weight: 600; }
.buybox-price .i { width: 16px; height: 16px; }
.buybox-line { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.buybox-line .i { width: 17px; height: 17px; color: var(--muted); }
.buybox .btn-row .btn { flex: 1; }
.buybox-safe { display: flex; gap: 10px; align-items: flex-start; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.buybox-safe .i { color: var(--ok); flex: none; width: 18px; height: 18px; }
.buybox-safe strong { color: var(--ink); display: block; font-size: 13.5px; }
.detail-owner { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); }
.notice { display: flex; align-items: flex-start; gap: 10px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; font-size: 14px; color: var(--ink-2); }
.notice .i { color: var(--p); flex: none; }
.notice-ok { background: var(--ok-soft); border-color: transparent; }
.notice-ok .i { color: var(--ok); }
.specs { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.specs div { display: flex; flex-direction: column; gap: 2px; }
.specs dt { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.specs dd { margin: 0; font-weight: 500; }
.specs dd small { display: block; font-weight: 400; font-size: 12.5px; }
.detail-desc h2 { font-size: 16px; margin-bottom: 8px; }
.detail-desc p { color: var(--ink-2); line-height: 1.6; }
.protect { display: flex; gap: 12px; align-items: flex-start; background: var(--p-soft); border-radius: var(--r); padding: 14px 16px; }
.protect .i { color: var(--p); width: 24px; height: 24px; flex: none; }
.protect strong { display: block; font-family: var(--font-display); }
.protect span { font-size: 13.5px; color: var(--ink-2); }
.protect-sm { padding: 10px 14px; font-size: 13.5px; font-weight: 600; align-items: center; }
.seller-card { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; color: var(--ink); transition: .15s; }
.seller-card:hover { border-color: var(--p); box-shadow: var(--shadow); text-decoration: none; }
.seller-card div { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.seller-card strong { display: inline-flex; align-items: center; gap: 4px; font-size: 16px; }
.seller-card small { font-size: 12.5px; }
/* seller identity chip — Private / Professional + country flag (profile + item page) */
.seller-id { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 3px 0; }
.si-type { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--muted); background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
.si-type.is-pro { color: var(--p-ink); background: var(--p-soft); border-color: var(--p-tint); }
.si-type .i { width: 14px; height: 14px; }
.si-loc { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); }
.si-flag { font-size: 15px; line-height: 1; }
.profile .seller-id { margin: 2px 0 6px; }
.seller-lg { flex-wrap: wrap; align-items: flex-start; }
.seller-lg > .i { align-self: center; }
.seller-card .seller-badges { flex: 0 0 100%; flex-direction: row; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); margin-top: 4px; }
.sbadge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--bg-2); border-radius: 7px; padding: 4px 9px; }
.sbadge .i { width: 14px; height: 14px; color: var(--p); }
.sbadge-ok .i { color: var(--ok); }
.verified { color: var(--info); width: 16px; height: 16px; }
.report summary { cursor: pointer; font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; list-style: none; }
.report summary::-webkit-details-marker { display: none; }
.report summary .i { width: 15px; height: 15px; }
.report form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.report select, .report input { font: inherit; font-size: 13.5px; padding: 7px 10px; border: 1.5px solid var(--line); border-radius: 8px; flex: 1; min-width: 140px; background: var(--card); color: var(--ink); }
.detail-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 46; background: var(--card); border-top: 1px solid var(--line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); align-items: center; gap: 12px; box-shadow: 0 -8px 24px -12px rgba(0,0,0,.2); }
.detail-bar strong { font-family: var(--font-display); font-size: 20px; letter-spacing: -.02em; }
.detail-bar small { display: block; font-size: 11.5px; }
.detail-bar .btn { margin-left: auto; }
@media (max-width: 899px) { .is-item .tabbar { display: none; } .detail-bar { display: flex; } .is-item .main { padding-bottom: 100px; } .is-item .support-fab { bottom: 90px; } .is-item .cookie { bottom: 90px; } }

/* avatar / stars / badges */
.avatar { width: var(--s, 40px); height: var(--s, 40px); border-radius: 50%; object-fit: cover; flex: none; background: var(--bg-2); }
.avatar-text { display: inline-grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: calc(var(--s, 40px) * .42); color: hsl(var(--h, 260), 50%, 30%); background: hsl(var(--h, 260), 55%, 88%); }
.stars { display: inline-flex; align-items: center; gap: 1px; font-size: 13px; color: var(--muted); }
.star { width: 15px; height: 15px; color: #F2B33D; }
.stars-n { margin-left: 6px; }
.badge { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 7px; white-space: nowrap; }
.badge-ok { background: var(--ok-soft); color: var(--ok); } .badge-warn { background: var(--warn-soft); color: var(--warn); } .badge-bad { background: var(--bad-soft); color: var(--bad); } .badge-info { background: var(--info-soft); color: var(--info); } .badge-muted { background: var(--bg-2); color: var(--muted); }
.mini-user { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.mini-user span { display: flex; flex-direction: column; line-height: 1.2; }
.mini-user small { font-size: 12px; }
.mini-item { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.mini-item img { width: 40px; height: 50px; object-fit: cover; border-radius: 6px; }
.mini-item span { display: flex; flex-direction: column; line-height: 1.25; }

/* ---------------------------------------------------------------- forms */
.form { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .form-2, .form-3 { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 5px; }
.field-label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.field-label em { font-style: normal; font-weight: 400; color: var(--faint); font-size: 12px; }
.field input, .field select, .field textarea, .money-in input, .card-in input { font: inherit; font-size: 15px; color: var(--ink); padding: 11px 13px; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); background: var(--card); width: 100%; transition: border-color .15s, box-shadow .15s; }
.field input:focus, .field select:focus, .field textarea:focus, .money-in:focus-within, .card-in:focus-within { outline: none; border-color: var(--p); box-shadow: 0 0 0 4px var(--p-soft); }
/* Native selects render shorter than inputs — reset appearance + add a chevron so the padding applies and the height matches the other filled fields (Richard, Sep 24). */
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239A93B3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; padding-right: 38px; }
.field textarea { resize: vertical; line-height: 1.5; }
.field-help { font-size: 12.5px; color: var(--muted); }
.form-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--p); margin: 0; }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.toggle > span { display: flex; flex-direction: column; gap: 2px; }
.toggle small { font-size: 13px; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle i { flex: none; width: 46px; height: 26px; border-radius: 13px; background: var(--line-2); position: relative; transition: .2s; }
.toggle i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: .2s; }
.toggle input:checked + i { background: var(--p); }
.toggle input:checked + i::after { left: 23px; }
.toggle input:focus-visible + i { outline: 2px solid var(--p); outline-offset: 2px; }
.money-in, .card-in, .pct-in { display: flex; align-items: center; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); background: var(--card); overflow: hidden; }
.money-in b { padding: 0 0 0 13px; color: var(--muted); font-weight: 600; }
.money-in input, .card-in input, .pct-in input { border: 0 !important; box-shadow: none !important; }
.pct-in b { padding-right: 13px; color: var(--muted); font-weight: 700; }
.pct-in:focus-within { border-color: var(--p); box-shadow: 0 0 0 4px var(--p-soft); }
.card-in .i { margin-left: 12px; color: var(--muted); }
.card-in b { padding-right: 12px; font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.test-banner { display: flex; gap: 10px; align-items: flex-start; background: var(--warn-soft); border: 1px solid var(--banner-warn-line); color: var(--banner-warn-ink); border-radius: var(--r-sm); padding: 12px 14px; font-size: 14px; margin-bottom: 20px; }
.test-banner .i { color: var(--warn); flex: none; }
.demo-hint { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--muted); background: var(--bg-2); border-radius: var(--r-sm); padding: 10px 12px; margin-top: 16px; }
.demo-hint .i { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.pref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pref-opt { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); cursor: pointer; background: var(--card); font-weight: 600; position: relative; }
.pref-opt input { position: absolute; opacity: 0; }
.pref-opt:has(input:checked) { border-color: var(--p); background: var(--p-soft); color: var(--p-ink); }
.pref-opt .i { width: 18px; height: 18px; color: var(--muted); }
.pref-opt:has(input:checked) .i { color: var(--p); }
.connected { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.connected div { flex: 1; display: flex; flex-direction: column; }
.connected span { font-size: 13px; color: var(--muted); }

/* --------------------------------------------------------------- auth */
.is-auth .catnav { display: none; }
.auth { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 980px; margin: 20px auto; align-items: stretch; }
.auth-side { background: #17112E; color: #fff; border-radius: 24px; padding: 40px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.auth-side::after { content: ""; position: absolute; right: -100px; bottom: -100px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(closest-side, rgba(109,59,235,.8), transparent); }
.auth-side .brand { color: #fff; }
.auth-side h2 { color: #fff; font-size: clamp(30px, 3.4vw, 44px); margin: auto 0 24px; letter-spacing: -.04em; }
.auth-side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 1; }
.auth-side li { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.85); }
.auth-side li .i { color: var(--lime); width: 18px; height: 18px; }
.auth-card { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 36px; box-shadow: var(--shadow); }
.auth-card h1 { font-size: 30px; }
.auth-card .page-sub { margin-bottom: 22px; }
.auth-card .form { max-width: none; }
.auth-alt { text-align: center; margin: 20px 0 0; font-size: 14px; color: var(--muted); }
.social { display: flex; flex-direction: column; gap: 10px; }
.g-btn { min-height: 44px; display: flex; justify-content: center; }
.or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--faint); font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
@media (max-width: 899px) { .auth { grid-template-columns: 1fr; } .auth-side { display: none; } .auth-card { padding: 26px 20px; } }

/* --------------------------------------------------------- listing form */
.listing-form { display: flex; flex-direction: column; gap: 22px; max-width: 760px; }
.lf-section { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.lf-section h2 { font-size: 18px; display: flex; align-items: center; gap: 8px; }
.lf-section h2 .i { color: var(--p); }
.lf-section .page-sub { margin: -6px 0 0; font-size: 14px; }
.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 30px; border: 2px dashed var(--line-2); border-radius: var(--r); background: var(--bg); cursor: pointer; text-align: center; transition: .15s; color: var(--muted); position: relative; }
.dropzone:hover, .dropzone.is-over { border-color: var(--p); background: var(--p-soft); color: var(--p-ink); }
.dropzone input { position: absolute; opacity: 0; width: 0; height: 0; }
.dz-i { width: 32px; height: 32px; color: var(--p); background: var(--p-soft); border-radius: 10px; padding: 6px; }
.dropzone strong { color: var(--ink); }
.dropzone span { font-size: 13px; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.photo-grid:empty { display: none; }
.photo-tile { position: relative; aspect-ratio: 4/5; border-radius: 10px; overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; }
.photo-tile b { position: absolute; left: 6px; top: 6px; background: var(--p); color: #fff; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 4px; }
.photo-del { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(23,17,46,.8); color: #fff; font-size: 12px; padding: 5px 8px; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.photo-del input { accent-color: var(--bad); margin: 0; }
.photo-tile:has(.photo-del input:checked) img { opacity: .3; }
.photo-tile button { position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; border-radius: 7px; border: 0; background: rgba(23,17,46,.8); color: #fff; cursor: pointer; display: grid; place-items: center; }
.photo-tile button .i { width: 14px; height: 14px; }
.cond-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cond { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); cursor: pointer; background: var(--card); transition: .15s; position: relative; }
.cond input { position: absolute; opacity: 0; }
.cond strong { font-size: 14px; }
.cond span { font-size: 12px; color: var(--muted); line-height: 1.35; }
.cond:has(input:checked) { border-color: var(--p); background: var(--p-soft); }
.cond:has(input:focus-visible) { outline: 2px solid var(--p); outline-offset: 2px; }
.price-field { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; align-items: start; }
@media (max-width: 560px) { .price-field { grid-template-columns: 1fr; } }
.price-preview { background: var(--bg-2); border-radius: var(--r-sm); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.price-preview span { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.price-preview strong { font-family: var(--font-display); font-size: 26px; letter-spacing: -.03em; }
.price-preview small { font-size: 12.5px; }
.lf-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* Smart auto-fill banner + price intelligence (Richard, Sep 19) */
.autofill-note[hidden], .price-insight[hidden] { display: none !important; }
/* Seller price preview: Buyer pays + You'll get (net of the seller fee) */
.price-preview .pp-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.price-preview .pp-line + .pp-line { margin-top: 6px; }
.price-preview .pp-line span { margin: 0; }
.price-preview .pp-line strong { font-size: 22px; }
.price-preview .pp-you strong { color: var(--ok); }
.price-preview small { display: block; margin-top: 8px; }
.autofill-note { display: flex; align-items: flex-start; gap: 8px; background: var(--p-soft); color: var(--p-ink); border: 1px solid var(--p-tint); border-radius: var(--r-sm); padding: 10px 13px; font-size: 13px; line-height: 1.45; }
.price-insight { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--muted); border-radius: var(--r-sm); padding: 10px 13px; font-size: 13px; line-height: 1.45; }
.price-insight b { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.price-insight.pi-great, .price-insight.pi-good { border-left-color: var(--ok); }
.price-insight.pi-great b, .price-insight.pi-good b { color: var(--ok); }
.price-insight.pi-fair { border-left-color: var(--p); }
.price-insight.pi-fair b { color: var(--p-ink); }
.price-insight.pi-high { border-left-color: var(--warn, #c98a00); }
.price-insight.pi-high b { color: var(--warn, #c98a00); }
/* Buyer-facing deal badge on the item page */
.deal-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.deal-badge.pi-great, .deal-badge.pi-good { background: var(--ok-soft); color: var(--ok); }
.deal-badge .i { width: 14px; height: 14px; }

/* Sell page: gradient hero, one form card, seller tips at the side. */
.sell-hero { position: relative; overflow: hidden; background: linear-gradient(115deg, #6D3BEB 0%, #4A22C4 55%, #2E1490 100%); color: #fff; border-radius: 22px; padding: 42px 46px; margin-bottom: 24px; }
.sell-hero::after { content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(closest-side, rgba(201,242,107,.35), transparent); pointer-events: none; }
.sell-hero .eyebrow { background: rgba(255,255,255,.14); color: #fff; }
.sell-hero h1 { color: #fff; font-size: clamp(30px, 4.2vw, 48px); margin: 14px 0 10px; letter-spacing: -.04em; max-width: 14ch; }
.sell-hero p { color: rgba(255,255,255,.82); max-width: 54ch; margin: 0; font-size: 16px; }
.sell-hero .btn-danger { position: absolute; right: 24px; top: 24px; background: rgba(255,255,255,.12); color: #fff; }
.sell-hero .btn-danger:hover { background: var(--bad); }
.sell-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.sell-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 26px 28px; display: flex; flex-direction: column; gap: 18px; box-shadow: var(--shadow); }
.sell-card > h2 { font-size: 20px; }
.sell-group { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.sell-group h3 { display: flex; align-items: center; gap: 6px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.sell-group h3 .i { width: 16px; height: 16px; color: var(--p); }
.sell-card .dropzone { padding: 34px 20px; }
.sell-card .dz-i { width: 40px; height: 40px; padding: 8px; }
.sell-card .lf-actions { border-top: 1px solid var(--line); padding-top: 18px; }
.sell-tips { position: sticky; top: var(--stick); background: var(--p-soft); border: 1px solid var(--p-tint); border-radius: 20px; padding: 24px; }
.sell-tips .tips-i { width: 28px; height: 28px; color: var(--p); margin-bottom: 10px; }
.sell-tips h3 { margin-bottom: 10px; }
.sell-tips ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--ink-2); }
.sell-tips li { display: flex; gap: 8px; align-items: flex-start; }
.sell-tips li .i { width: 16px; height: 16px; color: var(--ok); flex: none; margin-top: 2px; }
.sell-fee { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--p-tint); font-size: 13px; color: var(--ink-2); display: flex; gap: 8px; align-items: flex-start; }
.sell-fee .i { width: 16px; height: 16px; color: var(--p); flex: none; margin-top: 2px; }
.sell-fee strong { color: var(--ink); }
@media (max-width: 899px) {
  .sell-grid { grid-template-columns: 1fr; }
  .sell-tips { position: static; }
  .sell-hero { padding: 26px 22px; border-radius: 16px; }
  .sell-hero .btn-danger { position: static; margin-top: 16px; }
  .sell-card { padding: 20px 18px; border-radius: 16px; }
}

/* ------------------------------------------------------------- checkout */
.checkout { display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start; }
@media (max-width: 899px) { .checkout { grid-template-columns: 1fr; } .checkout-side { position: static !important; } }
.checkout-main { display: flex; flex-direction: column; gap: 18px; }
.co-section { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.co-section h2 { font-size: 18px; display: flex; align-items: center; gap: 10px; }
.co-section h2 span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--ink); color: var(--bg); font-size: 13px; }
.addr-list, .ship-list { display: flex; flex-direction: column; gap: 8px; }
.addr, .ship { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); cursor: pointer; transition: .15s; background: var(--card); }
.addr input, .ship input { margin-top: 3px; accent-color: var(--p); flex: none; }
.addr div, .ship div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.addr strong em, .addr-static strong em { font-style: normal; font-size: 11px; background: var(--p-soft); color: var(--p-ink); padding: 1px 7px; border-radius: 4px; margin-left: 6px; font-weight: 700; }
.addr span, .ship span { font-size: 13.5px; color: var(--muted); }
.ship b { font-family: var(--font-display); }
.addr:has(input:checked), .ship:has(input:checked) { border-color: var(--p); background: var(--p-soft); }
.addr-static { cursor: default; align-items: center; }
.addr-static > .i { color: var(--p); }
.addr-static .btn-row { margin-left: auto; }
.addr-new strong { display: inline-flex; align-items: center; gap: 6px; color: var(--p-ink); }
.addr-form { display: flex; flex-direction: column; gap: 12px; padding-top: 6px; }
.pay-tabs { display: flex; gap: 8px; }
.pay-tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1.5px solid var(--line-2); border-radius: var(--r-btn); font-weight: 600; cursor: pointer; font-size: 14px; }
.pay-tab input { position: absolute; opacity: 0; }
.pay-tab:has(input:checked), .pay-tab.is-on { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.card-form { display: flex; flex-direction: column; gap: 12px; padding: 18px 16px 16px; border: 1.5px solid var(--line-2); border-radius: 16px; background: linear-gradient(160deg, var(--p-tint) 0%, var(--card) 58%); box-shadow: var(--shadow); position: relative; }
.card-form .field-label { font-weight: 600; }
.card-form .card-in, .card-form .field input { background: var(--card); }
.stripe-next { padding: 18px 16px 16px; border: 1.5px solid var(--line-2); border-radius: 16px; background: linear-gradient(160deg, var(--p-tint) 0%, var(--card) 58%); box-shadow: var(--shadow); }
.apple-pay { display: flex; gap: 10px; align-items: center; background: var(--bg-2); border-radius: var(--r-sm); padding: 14px; font-size: 14px; color: var(--ink-2); }
.apple-pay .i { color: var(--ok); }
.checkout-side { position: sticky; top: var(--stick); background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--shadow); }
.order-item { display: flex; gap: 12px; align-items: center; color: var(--ink); }
.order-item > img { width: 64px; height: 80px; object-fit: cover; border-radius: 8px; flex: none; background: var(--bg-2); }
.order-item div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.order-item strong { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.order-item span, .order-item small { font-size: 13px; color: var(--muted); }
.order-item small { display: inline-flex; align-items: center; gap: 5px; }
.totals { margin: 0; display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.totals div { display: flex; justify-content: space-between; font-size: 14px; }
.totals dt { color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.totals dt em { font-style: normal; color: var(--ok); font-size: 12px; }
.totals dt .i { width: 14px; height: 14px; }
.totals dd { margin: 0; font-weight: 600; }
.totals-total { font-size: 17px !important; padding-top: 8px; border-top: 1px dashed var(--line); }
.totals-total dt { color: var(--ink); font-weight: 700; }
.totals-total dd { font-family: var(--font-display); font-size: 20px; }
.fineprint { font-size: 12px; color: var(--muted); margin: 0; }

/* ---------------------------------------------------------- orders / tx */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.tabs a { padding: 10px 14px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a b { color: var(--faint); font-weight: 600; margin-left: 4px; }
.tabs a.is-on { color: var(--p-ink); border-bottom-color: var(--p); }
.tabs a:hover { text-decoration: none; color: var(--ink); }
.order-list { display: flex; flex-direction: column; gap: 8px; }
.order-row { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px 12px 12px; color: var(--ink); transition: .15s; }
.order-row:hover { border-color: var(--p); text-decoration: none; box-shadow: var(--shadow); }
.order-row img { width: 56px; height: 70px; object-fit: cover; border-radius: 8px; background: var(--bg-2); }
.order-row > div:not(.order-right) { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.order-row span { font-size: 13px; color: var(--muted); }
.order-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.order-right b { font-family: var(--font-display); font-size: 17px; }
.tx { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; }
@media (max-width: 899px) { .tx { grid-template-columns: 1fr; } }
.tx-main { display: flex; flex-direction: column; gap: 18px; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; }
.timeline li { display: flex; flex-direction: column; gap: 8px; position: relative; }
.timeline li::before { content: ""; position: absolute; left: 32px; right: -8px; top: 15px; height: 2px; background: var(--line); }
.timeline li:last-child::before { display: none; }
.timeline li.is-done::before { background: var(--p); }
.timeline i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-2); border: 2px solid var(--line-2); font-style: normal; font-weight: 700; font-size: 13px; color: var(--muted); position: relative; z-index: 1; }
.timeline i .i { width: 16px; height: 16px; }
.timeline .is-done i { background: var(--p); border-color: var(--p); color: #fff; }
.timeline .is-next i { border-color: var(--p); color: var(--p-ink); animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(109,59,235,.35); } 50% { box-shadow: 0 0 0 8px rgba(109,59,235,0); } }
.timeline li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.timeline strong { font-size: 14px; }
.timeline span { font-size: 12px; color: var(--muted); line-height: 1.35; }
@media (max-width: 560px) { .timeline { grid-template-columns: 1fr; } .timeline li { flex-direction: row; align-items: center; } .timeline li::before { display: none; } }
.tracking { display: flex; gap: 12px; align-items: center; background: var(--info-soft); border-radius: var(--r-sm); padding: 12px 16px; }
.tracking .i { color: var(--info); }
.tracking div { display: flex; flex-direction: column; }
.tracking span { font-size: 13px; color: var(--muted); }
.action-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.action-card h3 { display: flex; align-items: center; gap: 8px; }
.action-card h3 .i { color: var(--p); }
.action-card p { margin: 0; color: var(--ink-2); font-size: 14px; }
.action-card textarea { font: inherit; padding: 10px 12px; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); resize: vertical; background: var(--card); color: var(--ink); }
.action-primary { border-color: var(--p-tint); background: linear-gradient(160deg, var(--p-soft), var(--card)); }
.rate { display: flex; gap: 2px; }
.rate label { cursor: pointer; }
.rate input { position: absolute; opacity: 0; }
.rate .i { width: 30px; height: 30px; color: var(--line-2); transition: .1s; }
.rate label .i.is-lit { color: #F2B33D; }
.tx-side { display: flex; flex-direction: column; gap: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; }
.tx-block h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 6px; }
.tx-block p { margin: 0; font-size: 14px; line-height: 1.5; }

/* ------------------------------------------------------------ profile */
.profile { display: flex; gap: 22px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 26px; margin-bottom: 20px; }
.profile-avatar { border: 4px solid var(--p-soft); }
.profile-info { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.profile-info h1 { display: inline-flex; align-items: center; gap: 6px; font-size: 28px; }
.profile-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--muted); }
.profile-meta span { display: inline-flex; align-items: center; gap: 4px; }
.profile-meta .i { width: 15px; height: 15px; }
.profile-bio { margin: 4px 0 0; color: var(--ink-2); max-width: 600px; }
.profile-actions { display: flex; gap: 8px; }
@media (max-width: 640px) { .profile { flex-wrap: wrap; } .profile-actions { width: 100%; } }
.reviews { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.review { display: flex; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.review > div { flex: 1; }
.review-top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.review-top time { margin-left: auto; font-size: 12px; color: var(--muted); }
.review p { margin: 0 0 4px; }
.review small { font-size: 12.5px; }

/* --------------------------------------------------------------- inbox */
.thread-list { display: flex; flex-direction: column; gap: 6px; }
.thread-row { position: relative; display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; color: var(--ink); transition: .15s; }
.thread-row:hover { border-color: var(--p); text-decoration: none; }
.thread-row.is-unread { border-left: 3px solid var(--p); }
.thread-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.thread-top { display: flex; align-items: center; gap: 8px; }
.thread-top time { margin-left: auto; font-size: 12px; color: var(--muted); }
.thread-role { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--p-ink); background: var(--p-soft); padding: 1px 7px; border-radius: 4px; }
.thread-item { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-preview { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.is-unread .thread-preview { font-weight: 600; color: var(--ink); }
.thread-thumb { width: 44px; height: 54px; object-fit: cover; border-radius: 6px; background: var(--bg-2); }
.thread-row .dot { position: static; }
.is-chat .main { padding-top: 12px; padding-bottom: 12px; }
.is-chat .footer, .is-chat .catnav, .is-chat .support { display: none; }
.chat { display: flex; flex-direction: column; height: calc(100vh - 66px - 24px); max-width: 860px; margin: 0 auto; background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); }
@media (max-width: 899px) { .chat { height: calc(100vh - 58px - 24px - 70px); border-radius: 14px; } }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.chat-head .mini-user { flex: 1; }
.chat-menu { margin-left: auto; }
.chat-menu .menu-pop { width: 220px; }
.chat-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--bg-2); border-bottom: 1px solid var(--line); color: var(--ink); }
.chat-item:hover { text-decoration: none; background: var(--p-soft); }
.chat-item img { width: 44px; height: 54px; object-fit: cover; border-radius: 6px; }
.chat-item > div:not(.chat-item-right) { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item span { font-size: 12.5px; color: var(--muted); }
.chat-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.chat-item-right b { font-family: var(--font-display); }
.chat-log { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; background: var(--bg); }
.msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 78%; }
.msg.is-mine { align-self: flex-end; align-items: flex-end; }
.bubble { background: var(--card); border: 1px solid var(--line); border-radius: 18px 18px 18px 4px; padding: 10px 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.is-mine .bubble { background: var(--p); color: #fff; border-color: var(--p); border-radius: 18px 18px 4px 18px; }
.msg time { font-size: 11px; color: var(--faint); margin: 3px 6px 0; }
.msg-system { align-self: center; align-items: center; max-width: 90%; text-align: center; }
.msg-system span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); background: var(--bg-2); padding: 6px 12px; border-radius: 8px; }
.msg-system .i { width: 14px; height: 14px; }
.offer-card { background: var(--card); border: 1.5px solid var(--p-tint); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
.is-mine .offer-card { border-color: var(--p); }
.offer-kind { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--p-ink); }
.offer-kind .i { width: 14px; height: 14px; }
.offer-card strong { font-family: var(--font-display); font-size: 26px; letter-spacing: -.03em; }
.offer-by { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.offer-card .btn-row { margin-top: 6px; }
.chat-compose { border-top: 1px solid var(--line); background: var(--card); }
.offer-box { border-bottom: 1px solid var(--line); }
.offer-box summary { cursor: pointer; padding: 10px 16px; font-size: 13.5px; font-weight: 600; color: var(--p-ink); display: flex; align-items: center; gap: 6px; list-style: none; }
.offer-box summary::-webkit-details-marker { display: none; }
.offer-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 16px 12px; }
.offer-form .money-in { width: 150px; }
.offer-form small { flex-basis: 100%; }
.compose { display: flex; gap: 10px; padding: 12px 14px; align-items: flex-end; }
.compose textarea { flex: 1; font: inherit; padding: 11px 14px; border: 1.5px solid var(--line-2); border-radius: 14px; resize: none; max-height: 140px; line-height: 1.4; background: var(--card); color: var(--ink); }
.compose textarea:focus { outline: none; border-color: var(--p); }
.compose .btn { width: 44px; height: 44px; padding: 0; border-radius: 12px; }
.chat-blocked { padding: 14px 16px; border-top: 1px solid var(--line); background: var(--bad-soft); color: var(--bad); font-size: 14px; display: flex; align-items: center; gap: 8px; }

/* --------------------------------------------------------------- balance */
.bal-cards { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 12px; margin-bottom: 8px; }
@media (max-width: 899px) { .bal-cards { grid-template-columns: 1fr 1fr; } }
.bal-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.bal-card span { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.bal-card strong { font-family: var(--font-display); font-size: 28px; letter-spacing: -.03em; }
.bal-card small { font-size: 12.5px; }
.bal-card form, .bal-card .btn { margin-top: 8px; }
.bal-main { background: #17112E; color: #fff; border-color: #17112E; }
.bal-main span { color: rgba(255,255,255,.6); } .bal-main strong { color: var(--lime); font-size: 36px; } .bal-main small { color: rgba(255,255,255,.6); }
.table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; font-size: 14px; }
.table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 10px 14px; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.table td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table td small { display: block; font-size: 12px; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.is-pos { color: var(--ok); } .is-neg { color: var(--bad); }
.pm-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.pm { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; }
.pm.is-default { border-color: var(--p-tint); background: var(--p-soft); }
.pm > .i { color: var(--p); }
.pm div { flex: 1; display: flex; flex-direction: column; }
.pm span { font-size: 13px; color: var(--muted); }

/* -------------------------------------------------------------- settings */
.settings { display: grid; grid-template-columns: 240px 1fr; gap: 32px; align-items: start; }
.settings-nav { position: sticky; top: var(--stick); display: flex; flex-direction: column; gap: 2px; }
.settings-nav h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 0 12px 10px; }
.settings-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-sm); color: var(--ink-2); font-weight: 500; }
.settings-nav a .i { width: 18px; height: 18px; color: var(--muted); }
.settings-nav a:hover { background: var(--card); text-decoration: none; }
.settings-nav a.is-active { background: var(--p-soft); color: var(--p-ink); font-weight: 600; }
.settings-nav a.is-active .i { color: var(--p); }
.settings-body { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 28px 32px; min-width: 0; }
.settings-body h1 { font-size: 26px; margin-bottom: 16px; }
.settings-body .form { margin-top: 4px; }
/* More breathing room between sections, buttons and the text that follows (Richard, Sep 19) */
.settings-body .h-sub { margin-top: 42px; }
.settings-body form { margin-top: 14px; margin-bottom: 26px; }
.settings-body form:not(.form):not(.form-2) .field { margin-bottom: 16px; }
@media (max-width: 899px) {
  .settings { grid-template-columns: 1fr; }
  /* One tidy swipeable row of section chips instead of an 11-link block that pushed the content down. */
  .settings-nav { position: static; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 4px; margin-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-nav h2 { display: none; }
  .settings-nav a { white-space: nowrap; flex: none; border: 1px solid var(--line); padding: 8px 12px; }
  .settings-nav a.is-active { border-color: var(--p); }
  .settings-body { padding: 20px; }
}
.me-card { display: flex; align-items: center; gap: 14px; background: var(--bg-2); border-radius: var(--r); padding: 16px; margin-bottom: 16px; }
.me-card div { flex: 1; display: flex; flex-direction: column; }
.me-card span { font-size: 14px; color: var(--muted); }
.settings-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .settings-cards { grid-template-columns: 1fr; } }
.settings-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); transition: .15s; }
.settings-card:hover { border-color: var(--p); text-decoration: none; background: var(--p-soft); }
.settings-card > .i:first-child { color: var(--p); width: 22px; height: 22px; }
.settings-card div { flex: 1; display: flex; flex-direction: column; }
.settings-card span { font-size: 13px; color: var(--muted); }
.avatar-edit { display: flex; align-items: center; gap: 14px; }
.avatar-edit .btn { cursor: pointer; }
.block-list { display: flex; flex-direction: column; gap: 8px; }
.block-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.block-row div { flex: 1; display: flex; flex-direction: column; }
.block-row span { font-size: 12.5px; color: var(--muted); }

/* ------------------------------------------------------------------ help */
.help-search { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1.5px solid var(--line-2); border-radius: 14px; padding: 6px 6px 6px 16px; max-width: 640px; margin-bottom: 24px; }
.help-search .i { color: var(--muted); }
.help-search input { flex: 1; border: 0; font: inherit; font-size: 15px; outline: none; min-width: 0; background: none; color: var(--ink); }
.help-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 30px; }
.help-tile { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); transition: .15s; }
.help-tile .i { color: var(--p); width: 24px; height: 24px; }
.help-tile span { font-size: 12.5px; color: var(--muted); }
.help-tile:hover { border-color: var(--p); transform: translateY(-2px); text-decoration: none; box-shadow: var(--shadow); }
.faq { margin-bottom: 30px; max-width: 820px; scroll-margin-top: var(--stick); }
.faq h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.faq h2 .i { color: var(--p); }
.faq-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: 8px; }
.faq-item summary { cursor: pointer; padding: 13px 16px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--font-display); font-size: 20px; color: var(--p); flex: none; transition: transform .2s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 16px 14px; margin: 0; color: var(--ink-2); line-height: 1.6; }
.help-cta { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; background: var(--p-soft); border-radius: 20px; padding: 28px 30px; }
.help-cta p { margin: 4px 0 0; color: var(--ink-2); max-width: 520px; }
.ticket-form { max-width: 680px; }
.ticket-list { display: flex; flex-direction: column; gap: 12px; max-width: 860px; }
.ticket { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.ticket-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ticket > span { font-size: 13px; color: var(--muted); }
.ticket p { margin: 6px 0 0; color: var(--ink-2); white-space: pre-wrap; }
.ticket-reply { display: flex; gap: 10px; background: var(--p-soft); border-radius: var(--r-sm); padding: 12px 14px; margin-top: 8px; }
.ticket-reply .i { color: var(--p); flex: none; }
.ticket-reply p { margin: 2px 0 0; }
.ticket-actions { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.ticket-actions textarea { font: inherit; padding: 10px 12px; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); resize: vertical; background: var(--card); color: var(--ink); }

/* ----------------------------------------------------------------- legal */
.legal { max-width: 800px; margin: 0 auto; }
.legal header { margin-bottom: 26px; }
.legal header h1 { margin: 12px 0 8px; }
.legal-intro { font-size: 17px; color: var(--ink-2); margin-top: 14px; }
.legal-toc { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 22px; margin-bottom: 30px; }
.legal-toc ol { columns: 2 260px; margin: 8px 0 0; padding-left: 20px; font-size: 14px; }
.legal-toc li { padding: 2px 0; }
.legal section { margin-bottom: 28px; scroll-margin-top: var(--stick); }
.legal section h2 { font-size: 21px; margin-bottom: 8px; }
.legal section p, .legal section li { color: var(--ink-2); line-height: 1.65; }
.legal ul { padding-left: 22px; }
.legal-foot { border-top: 1px solid var(--line); padding-top: 20px; color: var(--muted); }

/* --------------------------------------------------------------- company */
.story { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 44px; }
.story-hero { text-align: center; padding: 20px 0 0; }
.story-hero h1 { font-size: clamp(34px, 5vw, 60px); letter-spacing: -.045em; max-width: 800px; margin: 16px auto 16px; }
.story-hero p { font-size: 18px; color: var(--ink-2); max-width: 620px; margin: 0 auto; }
.story-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; }
.story-grid h2 { margin-bottom: 10px; }
.story-grid p { color: var(--ink-2); line-height: 1.65; }
.story-stats { display: grid; gap: 10px; }
.story-stats div { background: #17112E; color: #fff; border-radius: 16px; padding: 18px 22px; }
.story-stats strong { display: block; font-family: var(--font-display); font-size: 34px; color: var(--lime); letter-spacing: -.03em; }
.story-stats span { color: rgba(255,255,255,.7); font-size: 14px; }
.story-values h2 { text-align: center; margin-bottom: 20px; }
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.values div { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.values .i { width: 26px; height: 26px; color: var(--p); margin-bottom: 10px; }
.values strong { display: block; font-family: var(--font-display); font-size: 17px; margin-bottom: 6px; }
.values p { margin: 0; font-size: 14px; color: var(--muted); }
.story-cta { text-align: center; background: var(--p-soft); border-radius: 24px; padding: 40px; }
.story-cta h2 { margin-bottom: 16px; }
.story-cta .btn-row { justify-content: center; }
.perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.perks div { display: flex; flex-direction: column; gap: 2px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; }
.perks .i { color: var(--p); margin-bottom: 6px; }
.perks span { font-size: 13px; color: var(--muted); }
.roles { display: flex; flex-direction: column; gap: 10px; }
.role { display: flex; align-items: center; gap: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 22px; color: var(--ink); transition: .15s; }
.role:hover { border-color: var(--p); text-decoration: none; box-shadow: var(--shadow); }
.role div { flex: 1; }
.role strong { font-family: var(--font-display); font-size: 17px; }
.role span { display: block; font-size: 13px; color: var(--p-ink); font-weight: 600; margin: 2px 0 6px; }
.role p { margin: 0; font-size: 14px; color: var(--muted); }
.role .i { color: var(--p); }
.press-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: start; }
.press-list { display: flex; flex-direction: column; gap: 14px; }
.press-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; }
.press-item time { font-size: 12.5px; color: var(--p-ink); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.press-item h2 { font-size: 20px; margin: 6px 0 8px; }
.press-item p { margin: 0; color: var(--ink-2); }
.press-kit { background: var(--bg-2); border-radius: var(--r); padding: 22px; display: flex; flex-direction: column; gap: 10px; position: sticky; top: var(--stick); }
.press-kit h3 { margin-top: 8px; }
.press-kit ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 14px; }
.swatch { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.swatch i { width: 26px; height: 26px; border-radius: 6px; }
@media (max-width: 899px) { .story-grid, .press-grid { grid-template-columns: 1fr; } .values, .perks { grid-template-columns: 1fr 1fr; } .press-kit { position: static; } }
@media (max-width: 560px) { .values, .perks { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- admin */
.admin { display: grid; grid-template-columns: 210px 1fr; gap: 28px; align-items: start; }
.admin-nav { position: sticky; top: var(--stick); display: flex; flex-direction: column; gap: 2px; background: #17112E; border-radius: var(--r); padding: 10px; }
.admin-brand { display: flex; align-items: center; gap: 8px; color: var(--lime); font-family: var(--font-display); font-weight: 700; padding: 8px 10px 14px; }
.admin-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: rgba(255,255,255,.75); font-weight: 500; }
.admin-nav a .i { width: 18px; height: 18px; }
.admin-nav a b { margin-left: auto; background: var(--bad); color: #fff; font-size: 11px; padding: 1px 7px; border-radius: 10px; }
.admin-nav a:hover { background: rgba(255,255,255,.08); text-decoration: none; color: #fff; }
.admin-nav a.is-active { background: #6D3BEB; color: #fff; }
@media (max-width: 899px) { .admin { grid-template-columns: 1fr; } .admin-nav { position: static; flex-direction: row; flex-wrap: wrap; } .admin-brand { width: 100%; padding-bottom: 6px; } }
.admin-body { min-width: 0; }
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 18px; }
@media (max-width: 899px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; }
.stat span { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.stat strong { font-family: var(--font-display); font-size: 26px; letter-spacing: -.03em; }
.stat small { font-size: 12px; }
.admin-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 899px) { .admin-2 { grid-template-columns: 1fr; } }
.admin-3 { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin-bottom: 14px; align-items: start; }
@media (max-width: 899px) { .admin-3 { grid-template-columns: 1fr; } }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; min-width: 0; overflow-x: auto; }
.panel h2 { font-size: 16px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.panel h2 .i { color: var(--p); width: 18px; height: 18px; }
.panel .table { border: 0; }
.attn { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.attn a { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: var(--r-sm); background: var(--bg-2); color: var(--ink); font-size: 13.5px; }
.attn a .i { color: var(--warn); }
.attn a strong { font-family: var(--font-display); font-size: 20px; }
.attn a:hover { background: var(--p-soft); text-decoration: none; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 140px; }
.bars div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; }
.bars i { display: block; width: 100%; background: var(--p); border-radius: 4px 4px 0 0; min-height: 3px; }
.bars span { font-size: 10px; color: var(--faint); }
.audit { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.audit li { padding: 8px 0; border-bottom: 1px solid var(--line); display: flex; gap: 6px; flex-wrap: wrap; }
.audit span { color: var(--muted); }
.audit time { margin-left: auto; color: var(--faint); font-size: 12px; }
.admin-search { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1.5px solid var(--line-2); border-radius: 10px; padding: 4px 4px 4px 14px; max-width: 460px; }
.admin-search .i { color: var(--muted); }
.admin-search input { flex: 1; border: 0; font: inherit; outline: none; background: none; min-width: 0; color: var(--ink); }
.admin-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 14px; }
.admin-toolbar .chips { margin: 0; }
.admin-body .table { display: block; overflow-x: auto; }
.admin-body .table thead, .admin-body .table tbody { display: table; width: 100%; }
.row-actions { white-space: nowrap; }
.row-actions form { display: inline; }
.row-actions .btn { margin: 2px; }
tr.is-banned td { opacity: .55; }
tr.is-flagged td { background: var(--flag-row); }
.report-reason { max-width: 200px; white-space: normal; }
.ticket-admin { border-left: 3px solid var(--warn); }
.user-head { display: flex; gap: 18px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; margin-bottom: 14px; flex-wrap: wrap; }
.user-head > div { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 4px; }
.user-head h2 { font-size: 22px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.user-head .btn-row { flex: none; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13.5px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; word-break: break-word; }
.kv dd code { font-size: 12px; }
.mini-log { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; padding-right: 4px; }
.mini-msg { font-size: 13.5px; padding: 8px 10px; border-radius: 8px; background: var(--bg-2); }
.mini-msg.is-them { background: var(--p-soft); }
.mini-msg small { display: block; font-size: 11.5px; margin-bottom: 2px; }
.reset-link { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--ok-soft); border-radius: var(--r-sm); padding: 10px 12px; font-size: 13px; word-break: break-all; }
.reset-link code { background: var(--card); }
.sup-list { display: flex; flex-direction: column; gap: 8px; }
.sup-row { display: flex; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; color: var(--ink); }
.sup-row:hover { border-color: var(--p); text-decoration: none; }
.sup-row.is-waiting { border-left: 3px solid var(--warn); }
.sup-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sup-row span { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-row time { font-size: 12px; color: var(--faint); }
.sup-thread { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.sup-thread .sup-msg { max-width: 85%; }

/* ------------------------------------------------------------- support widget */
.support { position: fixed; right: 18px; bottom: 18px; z-index: 65; font-size: 14px; }
.support-fab { width: 56px; height: 56px; border-radius: 18px; border: 0; background: var(--p); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 10px 24px -8px var(--p-glow); transition: transform .15s, background .15s; position: relative; }
.support-fab:hover { transform: translateY(-2px); background: var(--p-hover); }
.support-fab .i { width: 26px; height: 26px; grid-area: 1 / 1; transition: opacity .15s, transform .2s; }
.support-fab .i-x { opacity: 0; transform: rotate(-90deg) scale(.6); }
.support.is-open .support-fab .i:not(.i-x) { opacity: 0; transform: rotate(90deg) scale(.6); }
.support.is-open .support-fab .i-x { opacity: 1; transform: none; }
.support-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--bg); }
.support-badge:empty, .support-badge[hidden] { display: none; }
.support-panel { position: absolute; right: 0; bottom: 70px; width: min(380px, calc(100vw - 36px)); height: min(560px, calc(100vh - 120px)); background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; animation: pop .2s ease; }
.support-panel[hidden] { display: none; }
.support-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #17112E; color: #fff; }
.support-ava { border-radius: 10px; overflow: hidden; display: grid; }
.support-head div { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.support-head small { color: rgba(255,255,255,.65); font-size: 12px; }
.support-x { border: 0; background: rgba(255,255,255,.1); color: #fff; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; cursor: pointer; }
.support-x .i { width: 18px; height: 18px; }
.support-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--bg); }
.sup-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 88%; }
.sup-msg.is-user { align-self: flex-end; align-items: flex-end; }
.sup-msg small { font-size: 11px; color: var(--faint); margin: 0 6px 3px; }
.sup-bubble { background: var(--card); border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; padding: 9px 13px; line-height: 1.45; word-break: break-word; }
.sup-bubble a { font-weight: 600; }
.is-user .sup-bubble { background: var(--p); color: #fff; border-color: var(--p); border-radius: 16px 16px 4px 16px; }
.is-user .sup-bubble a { color: #fff; }
.is-agent .sup-bubble { border-color: var(--lime); border-left: 3px solid var(--lime); }
.sup-quicks { display: flex; flex-wrap: wrap; gap: 6px; }
.sup-quick { font: inherit; font-size: 13px; font-weight: 600; color: var(--p-ink); background: var(--p-soft); border: 1px solid var(--p-tint); border-radius: 9px; padding: 7px 11px; cursor: pointer; text-align: left; }
.sup-quick:hover { background: var(--p-tint); }
.sup-typing { display: inline-flex; gap: 4px; padding: 10px 12px; }
.sup-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); animation: blink 1s infinite; }
.sup-typing i:nth-child(2) { animation-delay: .2s; } .sup-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
.support-compose { border-top: 1px solid var(--line); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--card); margin: 0; }
.support-email { font: inherit; font-size: 13px; padding: 8px 11px; border: 1.5px solid var(--line-2); border-radius: 9px; background: var(--card); color: var(--ink); }
.support-row { display: flex; gap: 8px; }
.support-row input { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 10px 12px; border: 1.5px solid var(--line-2); border-radius: 10px; background: var(--card); color: var(--ink); }
.support-row input:focus, .support-email:focus { outline: none; border-color: var(--p); }
.support-send { width: 42px; height: 42px; padding: 0; flex: none; }
.support-foot { display: flex; justify-content: space-between; gap: 8px; }
.support-link { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 2px 0; }
.support-link .i { width: 15px; height: 15px; }
.support-link:hover { color: var(--p-ink); }
@media (max-width: 899px) {
  .support { right: 14px; bottom: 82px; }
  .support-fab { width: 52px; height: 52px; }
  .support-panel { position: fixed; inset: 0; width: auto; height: auto; border-radius: 0; bottom: 0; }
  .support.is-open .support-fab { display: none; }
}

/* ------------------------------------------------------------------ errors */
.errpage { text-align: center; padding: 60px 20px; max-width: 520px; margin: 0 auto; }
.errpage-i { width: 56px; height: 56px; color: var(--p-tint); }
.errpage h1 { margin: 14px 0 8px; }
.errpage p { color: var(--muted); margin-bottom: 20px; }
.errpage .btn-row { justify-content: center; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (max-width: 899px) { .topbar-in { height: 58px; gap: 8px; } .brand-word { font-size: 22px; } .search { height: 40px; } .btn-sell span, .topnav .btn-ghost { display: none; } .btn-sell { padding: 0; width: 40px; height: 40px; border-radius: 10px; } }


/* ================================================================ v3 ==== */
/* ------------------------------------------------------------ wordmark */
.brand-word { font-family: "Outfit", var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: -.045em; color: #7B5CF5; line-height: 1; transform: translateY(-2px); }
.brand-word.sm { font-size: 24px; }
.brand-word.on-dark { color: #fff; }
html[data-theme="dark"] .brand-word { color: #9C7AF7; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .brand-word { color: #9C7AF7; } }
body.is-home { --stick: 156px; }

/* --------------------------------------------------------- main nav + burger */
.mainnav { display: flex; align-items: center; gap: 2px; }
.mainnav a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 9px; font-weight: 600; font-size: 14.5px; color: var(--ink-2); white-space: nowrap; }
.mainnav a .i { width: 17px; height: 17px; color: var(--muted); }
.mainnav a:hover, .mainnav a.is-active { background: var(--p-soft); color: var(--p-ink); text-decoration: none; }
.mainnav a.is-active .i, .mainnav a:hover .i { color: var(--p); }
.burger { display: none; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: none; color: var(--ink); cursor: pointer; flex: none; }
.burger .i { width: 24px; height: 24px; }
.burger:hover { background: var(--p-soft); color: var(--p-ink); }
@media (max-width: 1240px) { .mainnav { display: none; } .burger { display: grid; } }
.drawer { position: fixed; inset: 0; z-index: 90; }
.drawer[hidden] { display: none; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(10,6,26,.5); backdrop-filter: blur(2px); animation: fade .2s ease; }
@keyframes fade { from { opacity: 0; } }
.drawer-panel { position: absolute; left: 0; top: 0; bottom: 0; width: min(360px, 88vw); background: var(--card); box-shadow: var(--shadow-lg); overflow-y: auto; padding: 14px 18px 40px; display: flex; flex-direction: column; gap: 18px; animation: slidein .25s cubic-bezier(.2,.8,.2,1); }
@keyframes slidein { from { transform: translateX(-30px); opacity: 0; } }
.drawer-head { display: flex; align-items: center; justify-content: space-between; }
.drawer-user { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--p-soft); border-radius: var(--r); color: var(--ink); }
.drawer-user span { display: flex; flex-direction: column; }
.drawer-user small { color: var(--muted); font-size: 12.5px; }
.drawer-auth { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.drawer-group { display: flex; flex-direction: column; gap: 2px; }
.drawer-group h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 8px; }
.drawer-group > a { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 9px; color: var(--ink); font-weight: 500; }
.drawer-group > a .i { width: 19px; height: 19px; color: var(--muted); }
.drawer-group > a:hover { background: var(--p-soft); color: var(--p-ink); text-decoration: none; }
.drawer-group > a b { margin-left: auto; background: var(--p); color: #fff; font-size: 11px; padding: 1px 7px; border-radius: 10px; }
.drawer-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.drawer-cats a { display: flex; align-items: center; gap: 8px; padding: 9px 8px; border-radius: 9px; color: var(--ink); font-size: 14px; }
.drawer-cats a .i { width: 18px; height: 18px; color: var(--p); }
.drawer-cats a:hover { background: var(--p-soft); text-decoration: none; }
.drawer-group form button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 8px; border: 0; background: none; font: inherit; font-weight: 500; color: var(--ink); cursor: pointer; border-radius: 9px; text-align: left; }
.drawer-group form button:hover { background: var(--p-soft); color: var(--p-ink); }
body.drawer-open { overflow: hidden; }

/* ------------------------------------------------------------- announce */
.announce { background: var(--p-soft); color: var(--p-ink); border-bottom: 1px solid var(--p-tint); font-size: 14px; font-weight: 600; }
.announce > div { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 0; text-align: center; }
.announce .i { width: 18px; height: 18px; flex: none; }
.announce-ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.announce-warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }

/* ---------------------------------------------------- footer extras + trust bar */
.footer-addr { display: flex; align-items: center; gap: 8px; padding-top: 16px; font-size: 13px; color: var(--muted); }
.footer-addr .i { width: 16px; height: 16px; color: var(--p); flex: none; }
.footer-addr a { color: var(--ink-2); text-decoration: underline; }
.trustbar { margin-top: 30px; background: linear-gradient(90deg, #4B1FC7, #6D3BEB); color: #fff; }
.trustbar > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 36px; padding: 13px 0; font-size: 13.5px; font-weight: 600; }
.trustbar span { display: inline-flex; align-items: center; gap: 7px; }
.trustbar .i { width: 17px; height: 17px; color: var(--lime); }
@media (max-width: 899px) { .footer { padding-bottom: 0; } .trustbar { margin-bottom: 76px; } .trustbar > div { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 0; } }

/* -------------------------------------------------------- home tiles (18) */
.tiles-many { grid-template-columns: repeat(6, 1fr); gap: 12px; }
.tiles-many .tile { aspect-ratio: 1.05; }
@media (max-width: 1240px) { .tiles-many { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px) { .tiles-many { grid-template-columns: repeat(3, 1fr); gap: 8px; } }
@media (max-width: 480px) { .tiles-many { grid-template-columns: repeat(2, 1fr); } }
.tile-icon { background: linear-gradient(160deg, var(--p-soft), var(--card)); border: 1px solid var(--p-tint); color: var(--ink); display: flex; flex-direction: column; }
.tile-icon::after { display: none; }
.tile-glyph { flex: 1; display: grid; place-items: center; }
.tile-glyph .i { width: clamp(34px, 3.2vw, 48px); height: clamp(34px, 3.2vw, 48px); color: var(--p); transition: transform .25s; }
.tile-icon:hover .tile-glyph .i { transform: scale(1.1) translateY(-2px); }
.tile-icon .tile-body { position: static; padding: 0 14px 14px; }
.tile-icon strong { font-size: 18px; color: var(--ink); }
.tile-icon small { color: var(--muted); }
.seller { position: relative; }
.seller-rank { position: absolute; top: 10px; left: 10px; font-size: 11.5px; font-weight: 800; color: var(--p-ink); background: var(--p-soft); padding: 2px 8px; border-radius: 7px; }

/* --------------------------------------------------------------- auctions */
.card-auction { background: #17112E !important; color: var(--lime) !important; display: inline-flex !important; align-items: center; gap: 4px; }
.card-auction .i { width: 13px; height: 13px; }
.auction-box { display: flex; flex-direction: column; gap: 14px; background: var(--card); border: 1.5px solid var(--p-tint); border-radius: 18px; padding: 18px; box-shadow: var(--shadow); }
.auction-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.auction-timer { display: inline-flex; align-items: center; gap: 6px; background: var(--warn-soft); color: var(--warn); font-weight: 700; font-size: 13px; padding: 5px 10px; border-radius: 8px; font-variant-numeric: tabular-nums; }
.auction-timer .i { width: 15px; height: 15px; }
.auction-timer.is-over { background: var(--bg-2); color: var(--muted); }
.auction-timer.is-urgent { background: var(--bad-soft); color: var(--bad); }
.auction-price { display: flex; flex-direction: column; gap: 2px; }
.auction-price span { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.auction-price strong { font-family: var(--font-display); font-size: 32px; letter-spacing: -.03em; line-height: 1.05; }
.auction-price small { color: var(--muted); }
.bid-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.bid-form .money-in { height: 48px; }
.bid-form .money-in input { height: 100%; font-size: 17px; font-weight: 700; }
.bid-form small { grid-column: 1 / -1; color: var(--muted); font-size: 12.5px; }
.bid-history summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--ink-2); }
.bid-history summary::-webkit-details-marker { display: none; }
.bid-history summary .i { width: 16px; height: 16px; color: var(--muted); }
.bid-history ol { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; }
.bid-history li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.bid-history li:first-child b { color: var(--ok); }
.bid-history li span { color: var(--muted); }
.bid-history time { color: var(--faint); font-size: 12.5px; }
.cart-form { margin-top: 8px; }
.cart-form .btn.is-on { border-color: var(--ok); color: var(--ok); background: var(--ok-soft); }

/* -------------------------------------------------------------------- cart */
.cart { display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start; }
.cart-list { display: flex; flex-direction: column; gap: 10px; }
.cart-row { display: grid; grid-template-columns: 92px 1fr auto; gap: 16px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; }
.cart-row img { width: 92px; height: 92px; object-fit: cover; border-radius: 10px; background: var(--bg-2); display: block; }
.cart-row > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cart-row > div > span { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.cart-title { font-weight: 700; font-size: 15px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-row em { color: var(--bad); font-style: normal; font-size: 13px; font-weight: 600; }
.cart-right { text-align: right; align-items: flex-end; }
.cart-right b { font-family: var(--font-display); font-size: 17px; }
.cart-right small { font-size: 12px; color: var(--muted); }
.cart-row.is-dead { opacity: .6; }
.cart-row.is-dead img { filter: grayscale(1); }
@media (max-width: 899px) { .cart { grid-template-columns: 1fr; } .cart-row { grid-template-columns: 72px 1fr; } .cart-row img { width: 72px; height: 72px; } .cart-right { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; text-align: left; } }

/* ---------------------------------------------------------- verification */
.verified-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 14px; }
.vrow { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 8px; background: var(--bg-2); color: var(--muted); border: 1px solid var(--line); }
.vrow .i { width: 14px; height: 14px; }
.vrow.is-ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.verify-list { display: flex; flex-direction: column; gap: 10px; }
.verify-row { display: flex; gap: 14px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.verify-row > .i { width: 26px; height: 26px; color: var(--muted); flex: none; margin-top: 2px; }
.verify-row.is-ok > .i { color: var(--ok); }
.verify-row > div { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.verify-row strong { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.verify-row > div > span { font-size: 13.5px; color: var(--muted); }
.verify-row form { margin-top: 6px; }
.biz-card { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; background: var(--bg-2); border-radius: var(--r-sm); padding: 12px 14px; }

/* ------------------------------------------------------------ leaderboard */
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; align-items: end; }
.podium-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 24px 16px 20px; color: var(--ink); position: relative; transition: .15s; }
.podium-card:hover { border-color: var(--p); box-shadow: var(--shadow-lg); text-decoration: none; transform: translateY(-3px); }
.podium-card.p1 { order: 2; padding-top: 34px; border-color: #E9C46A; background: linear-gradient(180deg, rgba(233,196,106,.16), var(--card) 60%); }
.podium-card.p2 { order: 1; }
.podium-card.p3 { order: 3; }
.podium-card strong { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-display); font-size: 17px; margin-top: 6px; }
.podium-card b { font-family: var(--font-display); font-size: 30px; letter-spacing: -.03em; line-height: 1; color: var(--p-ink); }
.podium-card > span { font-size: 12.5px; color: var(--muted); }
.medal { width: 30px; height: 30px; }
.medal.gold { color: #D9A400; } .medal.silver { color: #9AA3B2; } .medal.bronze { color: #B87333; }
.podium-card .medal { position: absolute; top: 12px; left: 14px; }
.rank-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bg-2); font-weight: 800; font-size: 12.5px; color: var(--ink-2); }
.lb-table td:first-child { width: 60px; }
.lb-table .medal { width: 24px; height: 24px; }
.lb-table .seller-cell { display: flex; align-items: center; gap: 10px; font-weight: 600; }
@media (max-width: 700px) { .podium { grid-template-columns: 1fr; } .podium-card.p1, .podium-card.p2, .podium-card.p3 { order: initial; } }
.brand-search { margin-bottom: 18px; }

/* ---------------------------------------------------------- notifications */
.notif-list { display: flex; flex-direction: column; gap: 6px; }
.notif { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); }
.notif:hover { border-color: var(--p); text-decoration: none; }
.notif > .i { width: 22px; height: 22px; color: var(--p); flex: none; margin-top: 2px; }
.notif > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif span { font-size: 13.5px; color: var(--muted); }
.notif time { font-size: 12px; color: var(--faint); }
.notif.is-unread { background: var(--p-soft); border-color: var(--p-tint); }
.todo { display: flex; flex-direction: column; gap: 4px; }
.todo a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bg-2); color: var(--ink); font-weight: 500; font-size: 14px; }
.todo a .i { width: 18px; height: 18px; color: var(--p); flex: none; }
.todo a .i:last-child { margin-left: auto; color: var(--faint); }
.todo a:hover { background: var(--p-soft); text-decoration: none; }
.contact-grid { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.contact-side { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 899px) { .contact-grid { grid-template-columns: 1fr; } }
.receipt { max-width: 760px; }
.legal.receipt .table { min-width: 0; width: 100%; table-layout: fixed; }
.legal.receipt .table td, .legal.receipt .table th { word-break: break-word; }
.legal.receipt .table .num { width: 96px; white-space: nowrap; }
.receipt .btn-row { margin-top: 28px; gap: 12px; }
.receipt .fineprint { margin-top: 18px; }
/* Invoice: eddy logo + purchased-item image (Richard, Sep 19) */
.receipt-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.receipt-item { display: flex; align-items: center; gap: 12px; margin: 8px 0 18px; padding: 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); }
.receipt-item strong { display: block; }
.receipt-item span { color: var(--muted); font-size: 13.5px; }
.receipt-thumb { width: 60px; height: 74px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); flex: none; }
@media (max-width: 560px) {
  .receipt .admin-2 { grid-template-columns: 1fr; gap: 12px; }
  .receipt .table { font-size: 13px; }
  .receipt .table td, .receipt .table th { padding: 8px 9px; }
  .receipt .btn-row { flex-direction: column; align-items: stretch; }
  .receipt .btn-row .btn { width: 100%; }
}
@media print {
  /* Print ONLY the receipt, forced to a clean black-on-white invoice regardless of the on-screen theme
     (dark-mode backgrounds were otherwise printing as black bars). */
  html, body { background: #fff !important; }
  body * { visibility: hidden !important; }
  .receipt, .receipt * { visibility: visible !important; }
  .receipt *, .receipt *::before, .receipt *::after { background: #fff !important; background-image: none !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
  .receipt { position: absolute; top: 0; left: 0; width: 100%; max-width: none; margin: 0; padding: 0; }
  .receipt .panel { border: 0 !important; padding: 0 !important; }
  .receipt .table, .receipt .table td, .receipt .table th { border: 1px solid #bbb !important; }
  .receipt .btn-row, .receipt .page-actions { display: none !important; }
  .receipt .eyebrow, .receipt [class*="badge"], .receipt .statusBadge { border: 1px solid #000 !important; padding: 1px 6px; border-radius: 4px; }
  .receipt .table, .receipt .admin-2, .receipt-item { page-break-inside: avoid; }
  .receipt-item { border: 1px solid #bbb !important; }
  .receipt-thumb { width: 54px !important; height: 66px !important; }
  @page { margin: 14mm; }
}

/* ---------------------------------------------------------------- admin v3 */
.admin-global { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; background: rgba(255,255,255,.08); border-radius: 9px; padding: 0 10px; }
.admin-global .i { width: 16px; height: 16px; color: rgba(255,255,255,.6); }
.admin-global input { flex: 1; min-width: 0; border: 0; background: none; color: #fff; font: inherit; font-size: 13.5px; padding: 8px 0; outline: none; }
.admin-global input::placeholder { color: rgba(255,255,255,.45); }
.admin-nav small { display: block; padding: 6px 10px 0; color: rgba(255,255,255,.45); font-size: 11.5px; }
.admin-tabs .tabs { position: sticky; top: var(--stick); background: var(--bg); z-index: 4; }
.js .tab-panel { display: none; }
.js .tab-panel.is-on { display: block; }
.tab-panel { animation: fade .2s ease; }
.bulk-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; background: var(--card); border: 1.5px solid var(--p-tint); border-radius: var(--r); padding: 10px 14px; position: sticky; bottom: 12px; box-shadow: var(--shadow-lg); z-index: 6; }
.bulk-bar > span { font-weight: 700; font-size: 13.5px; }
.bulk-bar .field { flex: 1; min-width: 200px; margin: 0; }
.bulk-bar .field-label { display: none; }
.js .bulk-bar { display: none; }
.js .bulk-bar.is-on { display: flex; }
.badge-risk { background: var(--bad-soft); color: var(--bad); }
.badge-info { background: var(--info-soft); color: var(--info); }
.badge-muted { background: var(--bg-2); color: var(--muted); }
.table tr.is-flagged td { background: var(--flag-row); }
.table tr.is-banned td { opacity: .55; }
.ticket.is-high { border-left: 3px solid var(--bad); }
.vcell { display: inline-flex; gap: 3px; }
.vcell .i { width: 14px; height: 14px; color: var(--ok); }
.vcell .i.dim { color: var(--line-2); }
.i.ok { color: var(--ok); }
.muted { color: var(--muted); }
.mbar { display: inline-block; height: 8px; min-width: 2px; background: var(--p); border-radius: 4px; vertical-align: middle; }
.macro-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.macro-row .chip { padding: 5px 10px; font-size: 12.5px; }
.tl { list-style: none; margin: 0; padding: 0 0 0 8px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.tl li { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding-left: 14px; font-size: 13.5px; }
.tl li::before { content: ""; position: absolute; left: -13px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.tl li.is-bad::before { background: var(--bad); }
.tl li.is-ok::before { background: var(--ok); }
.tl li.is-warn::before { background: var(--warn); }
.tl li > .i { width: 16px; height: 16px; color: var(--muted); margin-top: 1px; }
.tl time { color: var(--faint); font-size: 12px; white-space: nowrap; }
.funnel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.funnel li { display: grid; grid-template-columns: 130px 1fr 40px; align-items: center; gap: 10px; font-size: 13.5px; }
.funnel i { display: block; height: 14px; background: var(--p); border-radius: 4px; min-width: 3px; }
.funnel b { text-align: right; }
.perm-matrix th small { font-size: 10px; letter-spacing: 0; text-transform: none; writing-mode: vertical-rl; transform: rotate(180deg); }
.perm-matrix td { text-align: center; }
.perm-matrix td .i { width: 16px; height: 16px; }
.admin-2 .form { margin: 0; }
/* Moderation queue cards: small thumbnail | details | stacked actions (Richard, Sep 24 — images were full-size). */
.mod-list { display: flex; flex-direction: column; gap: 10px; }
.mod-card { display: flex; gap: 14px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.mod-card.is-dsa { border-color: var(--warn); }
.mod-card > img { width: 64px; height: 80px; object-fit: cover; border-radius: 8px; flex: none; }
.mod-card > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mod-card > div p { font-size: 13.5px; color: var(--ink-2); }
.mod-card .btn-row { flex: none; flex-direction: column; align-items: stretch; min-width: 150px; }
.mod-card .btn-row form { margin: 0; }
@media (max-width: 640px) { .mod-card { flex-wrap: wrap; } .mod-card .btn-row { flex-direction: row; min-width: 0; width: 100%; } }
.sortsel label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.sortsel select { padding: 6px 10px; border-radius: 8px; border: 1.5px solid var(--line-2); background: var(--card); color: var(--ink); font: inherit; font-size: 13.5px; }
@media (max-width: 899px) { .admin-tabs .tabs { top: 58px; } }


/* ============================================================ widths ==== */
/* Reading pages stop at 1200px; content that is a single column stops earlier so lines, inputs and buttons
   never run the full width of a big monitor. Storefront pages (home, catalog, product) keep the wide container. */
.narrow { max-width: 680px; }
.form .btn-lg:not(.btn-block) { align-self: flex-start; min-width: 220px; }
.ticket-form .btn-primary { align-self: flex-start; min-width: 220px; }
.page-head .page-sub, .page-sub { max-width: 72ch; }
.checkout { max-width: 1080px; margin: 0 auto; }
.cart { max-width: 1080px; margin: 0 auto; }
.cart-row img { width: auto; height: auto; border-radius: 0; background: none; }
.cart-row > a > img { width: 92px; height: 92px; object-fit: cover; border-radius: 10px; background: var(--bg-2); display: block; }
.cart-row .avatar { width: var(--s, 18px); height: var(--s, 18px); border-radius: 50%; }
.contact-grid { max-width: 1040px; }
.sell-hero, .sell-grid { max-width: 1120px; margin-left: auto; margin-right: auto; }
.tx { max-width: 1080px; margin: 0 auto; }
.seller-hub-wrap, .stats + .admin-2 { max-width: 1120px; }
.hub-auctions, .hub-leaderboard { max-width: 1200px; margin-left: auto; margin-right: auto; }
.help-cta { max-width: 900px; }
.notif-list, .verify-list, .todo { max-width: 760px; }
.legal { max-width: 760px; }
@media (max-width: 899px) { .cart-row > a > img { width: 72px; height: 72px; } }

/* Header search never grows past a comfortable width on big monitors. */
.search { max-width: 640px; }
.hero-search { max-width: 640px; }

/* Admin: dashboards and tables get more room than reading pages, but never the full storefront width. */
.admin { max-width: 1400px; margin: 0 auto; }
.admin .form { max-width: 640px; }

/* Category strip: on desktop all entries share the row so nothing is cut off; below that it scrolls with a fade hinting at more. */
@media (min-width: 1200px) { .catnav-in { gap: 2px; overflow: visible; } .catnav a { flex: 1 1 0; min-width: 0; padding: 8px 6px 7px; } }
@media (max-width: 1199px) { .catnav { position: relative; } .catnav::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 56px; background: linear-gradient(to right, transparent, var(--card)); pointer-events: none; } }

/* Empty states sit centred at reading width even inside wide grids. */
.empty { max-width: 560px; margin: 0 auto; }

/* Phone header: burger, wordmark, search, cart and the account avatar. Everything else lives in the drawer and the bottom tab bar,
   so the row never overflows the screen (which used to make the whole page scroll sideways). */
@media (max-width: 899px) {
  /* Clip horizontally to stop the header row causing sideways page scroll, but let the search
     suggestions dropdown overflow downward (overflow:hidden used to clip it under the header). */
  .topbar-in { overflow-x: clip; overflow-y: visible; }
  .search { min-width: 0; }
  .topnav { gap: 0; flex: none; }
  .topnav .topnav-btn:not(.menu-btn):not([href="/cart"]) { display: none; }
  .topnav .btn-sell, .topnav .btn-login { display: none; }
  .topnav .menu-btn { padding: 0 2px 0 2px; }
  .menu-chev { display: none; }
}

/* Phones: tables scroll inside their card, payout tabs wrap, admin stacks its nav above the content. */
@media (max-width: 899px) {
  .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table thead, .table tbody { display: table; width: 100%; min-width: 520px; }
  .pay-tabs { flex-wrap: wrap; }
  .pay-tab { flex: 1 1 auto; justify-content: center; }
  .admin { grid-template-columns: 1fr; gap: 14px; }
  .admin-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .admin-nav a { padding: 7px 9px; font-size: 13px; }
  .admin-brand { flex: 0 0 100%; padding-bottom: 6px; }
  .admin-global { flex: 0 0 100%; }
  .stats { grid-template-columns: 1fr 1fr; }
  .admin-2, .admin-3 { grid-template-columns: 1fr; }
  .form-2, .form-3 { grid-template-columns: 1fr; }
}

/* Phone: 30-day bar charts squeeze instead of overflowing; day labels drop, the bars keep their tooltips. */
@media (max-width: 899px) {
  .bars { gap: 2px; }
  .bars div { min-width: 0; }
  .bars span { display: none; }
  .funnel li { grid-template-columns: 110px 1fr 36px; }
}

/* Grid panels may never force their column wider than the screen; wide tables scroll inside the panel instead. */
.admin-2 > *, .admin-3 > * { min-width: 0; max-width: 100%; }


/* ================================================================ v3.1 ==== */
/* Richard's round: heart pill, sold / unavailable states, verified pills, no tab bar, minimal phone header,
   cart with selection + codes, gift cards, recently sold. */

/* heart on the product gallery is a small pill, not a bar */
.gallery-fav { right: auto; left: 12px; top: 12px; width: auto; border-radius: 999px; padding: 6px 11px 6px 9px; font-weight: 700; font-size: 13px; background: var(--on-media); color: var(--on-media-ink); box-shadow: var(--shadow); }
.gallery-fav .i { width: 18px; height: 18px; }

/* sold / reserved on the gallery */
.gallery-main.is-sold img { filter: grayscale(.7); opacity: .75; }
.gallery-state { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg); z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: 12px; font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: .04em; text-transform: uppercase; background: var(--ink); color: var(--bg); box-shadow: var(--shadow-lg); pointer-events: none; }
.gallery-state .i { width: 24px; height: 24px; }
.gallery-state.is-reserved { background: var(--warn); color: #fff; transform: translate(-50%, -50%); font-size: 16px; }

/* unavailable listing */
.gone { display: grid; grid-template-columns: 200px 1fr; gap: 32px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 36px; max-width: 900px; margin: 10px auto 30px; }
.gone-art { display: grid; place-items: center; width: 200px; height: 200px; border-radius: 22px; background: var(--bg-2); }
.gone-art .i { width: 72px; height: 72px; color: var(--p-tint); }
.gone h1 { font-size: clamp(26px, 3vw, 36px); margin: 12px 0 8px; }
.gone p { color: var(--muted); margin-bottom: 18px; max-width: 60ch; }
@media (max-width: 700px) { .gone { grid-template-columns: 1fr; text-align: center; padding: 26px 20px; } .gone-art { margin: 0 auto; width: 140px; height: 140px; } .gone .btn-row { justify-content: center; } }

/* verified badges inside the seller card: small pills in a row */
.seller-card .verified-row { flex: 0 0 100%; flex-direction: row; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding-top: 10px; border-top: 1px solid var(--line); }
.seller-card .vrow { flex: 0 0 auto; width: auto; font-size: 12px; padding: 3px 9px; }
.profile .verified-row { margin: 8px 0 10px; }

/* category page header (the big banner is gone) */
.cat-head h1 { display: flex; align-items: center; gap: 10px; }
.cat-head h1 .i { width: 30px; height: 30px; color: var(--p); }

/* no bottom tab bar on the mobile site */
.tabbar, .tabbar[hidden] { display: none !important; }
@media (max-width: 899px) { .main { padding-bottom: 40px; } .trustbar { margin-bottom: 0; } .cookie { bottom: 16px; } .is-item .main { padding-bottom: 100px; } }

/* minimal phone header: row 1 burger · wordmark · cart · avatar, row 2 the search */
@media (max-width: 899px) {
  .topbar-in { flex-wrap: wrap; height: auto; padding: 8px 0 8px; gap: 8px 6px; }
  .topbar .brand { margin-right: auto; }
  .search { order: 10; flex: 1 1 100%; max-width: none; height: 42px; }
  .topnav { margin-left: 0; }
}

/* ---------------------------------------------------------------- cart 2 */
.cart-selectall { margin: 0 0 6px; font-weight: 600; }
.cart-selectall span { color: var(--muted); font-weight: 500; font-size: 13px; }
.cart-row { grid-template-columns: auto 92px 1fr; gap: 12px 14px; align-items: start; }
.cart-check { display: flex; align-items: center; padding-top: 34px; }
.cart-check input { width: 20px; height: 20px; }
.cart-thumb img { width: 92px; height: 92px; object-fit: cover; border-radius: 10px; background: var(--bg-2); display: block; }
.cart-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; text-align: left; }
.cart-meta { font-size: 13px; color: var(--muted); }
.cart-seller { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.cart-price { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; margin-top: 6px; }
.cart-price b { font-family: var(--font-display); font-size: 17px; white-space: nowrap; }
.cart-price small { font-size: 12px; color: var(--muted); }
.cart-remove { margin-top: 2px; }
.cart-remove .footer-linkbtn { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; padding: 0; }
.cart-remove .footer-linkbtn .i { width: 14px; height: 14px; }
.cart-remove .footer-linkbtn:hover { color: var(--bad); }
.cart-row.is-unselected { opacity: .55; }
.cart-row.is-dead .cart-check { visibility: hidden; }
@media (max-width: 899px) { .cart-row { grid-template-columns: auto 72px 1fr; } .cart-thumb img { width: 72px; height: 72px; } .cart-check { padding-top: 26px; } }
.cart-codes { margin-top: 18px; }
.cart-codes h2 { margin-bottom: 10px; }
.code-form { display: flex; gap: 8px; }
.code-form input { flex: 1; font: inherit; font-size: 15px; padding: 10px 13px; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); text-transform: uppercase; letter-spacing: .04em; min-width: 0; }
.code-form input:focus { outline: none; border-color: var(--p); box-shadow: 0 0 0 4px var(--p-soft); }
.code-applied { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--ok-soft); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 10px; font-size: 14px; color: var(--ok); }
.code-applied span { display: inline-flex; align-items: center; gap: 6px; }
.code-applied .i { width: 16px; height: 16px; }
.code-applied form { margin: 0; }
.code-applied .footer-linkbtn { color: var(--muted); font-size: 13px; padding: 0; }
.totals-discount dd, .totals-discount dt em { color: var(--ok); font-weight: 700; }
.totals-discount dt em { font-size: 11.5px; }
.saved { display: flex; align-items: center; gap: 6px; background: var(--ok-soft); color: var(--ok); border-radius: var(--r-sm); padding: 9px 12px; font-size: 14px; margin: 0; }
.saved .i { width: 16px; height: 16px; }

/* ---------------------------------------------------------- gift cards */
.gcard { position: relative; aspect-ratio: 1.6; border-radius: 16px; background: var(--gc-bg); color: var(--gc-ink); padding: 18px 20px; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); overflow: hidden; }
.gcard::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.12); }
.gcard-brand { font-family: "Outfit", var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -.04em; }
.gcard-kind { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; margin-top: 2px; }
.gcard-val { margin-top: auto; font-family: var(--font-display); font-size: 34px; letter-spacing: -.03em; }
.gcard-foot { font-size: 11px; letter-spacing: .18em; opacity: .8; }
.gcard-sm { padding: 10px 12px; border-radius: 10px; box-shadow: none; }
.gcard-sm .gcard-brand { font-size: 16px; } .gcard-sm .gcard-kind { font-size: 8.5px; } .gcard-sm .gcard-foot { font-size: 7px; } .gcard-sm .gcard-val { font-size: 14px; }
.gcard-xs { width: 96px; padding: 8px 10px; border-radius: 8px; box-shadow: none; flex: none; }
.gcard-xs .gcard-brand { font-size: 13px; } .gcard-xs .gcard-kind, .gcard-xs .gcard-foot { display: none; } .gcard-xs .gcard-val { font-size: 12px; }
.gift { display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start; }
.gift-main { display: flex; flex-direction: column; gap: 14px; }
.gift-step h2 { display: flex; align-items: center; gap: 10px; font-size: 17px; margin-bottom: 14px; }
.gift-step h2 b { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--p); color: #fff; font-size: 13px; }
.gift-designs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gift-design { display: flex; flex-direction: column; gap: 6px; cursor: pointer; border: 2px solid transparent; border-radius: 14px; padding: 4px; font-size: 13px; font-weight: 600; color: var(--muted); text-align: center; }
.gift-design input { position: absolute; opacity: 0; }
.gift-design.is-on, .gift-design:has(input:checked) { border-color: var(--p); color: var(--p-ink); }
.gift-values { display: flex; flex-wrap: wrap; gap: 8px; }
.gift-value { display: inline-flex; align-items: center; justify-content: center; min-width: 90px; padding: 11px 16px; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); font-weight: 700; cursor: pointer; background: var(--card); }
.gift-value input { position: absolute; opacity: 0; }
.gift-value.is-on, .gift-value:has(input:checked) { border-color: var(--p); background: var(--p-soft); color: var(--p-ink); }
.gift-custom-field { margin-top: 10px; max-width: 260px; }
.gift-side { position: sticky; top: var(--stick); }
.gift-receipt { display: grid; grid-template-columns: 360px 1fr; gap: 24px; align-items: start; max-width: 900px; }
.gift-code { font-family: var(--font-display); font-size: 26px; letter-spacing: .06em; background: var(--bg-2); border-radius: var(--r-sm); padding: 12px 16px; margin: 0 0 14px; user-select: all; }
.gift-list { display: flex; flex-direction: column; gap: 8px; }
.gift-row { display: flex; gap: 14px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; color: var(--ink); }
.gift-row:hover { border-color: var(--p); text-decoration: none; }
.gift-row > div { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gift-row span { font-size: 13px; color: var(--muted); }
.gift-row code { font-size: 12px; }
@media (max-width: 899px) { .gift, .gift-receipt { grid-template-columns: 1fr; } .gift-side { position: static; } .gift-designs { grid-template-columns: repeat(2, 1fr); } }


/* ================================================================ v3.2 polish ==== */
/* Category strip: the "everything fits" mode only where labels really fit (1400px+); below that it scrolls with the fade. */
@media (min-width: 1200px) and (max-width: 1399px) { .catnav-in { gap: 6px; overflow-x: auto; } .catnav a { flex: none; min-width: 84px; padding: 8px 12px 7px; } .catnav { position: relative; } .catnav::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 56px; background: linear-gradient(to right, transparent, var(--card)); pointer-events: none; } }
/* main nav: text only, consistent weight */
.mainnav a .i { display: none; }
/* hero eyebrow stays one line on phones */
@media (max-width: 899px) { .hero .eyebrow { font-size: 11px; letter-spacing: .06em; padding: 5px 10px; } .hero-stats { gap: 22px; } }
/* section headings: no leading icons, consistent size */
.section-head h2 .i { display: none; }
/* business seller card reads as one block with the seller card above it */
.biz-card { display: flex; gap: 12px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin-top: -6px; }
.biz-card > .i { color: var(--p); width: 20px; height: 20px; flex: none; margin-top: 2px; }
.biz-card strong { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.biz-card span { display: block; font-size: 14px; color: var(--ink); margin: 2px 0 4px; }
.biz-card small { font-size: 12.5px; color: var(--muted); }
/* icon tiles carry the same dark gradient footer as photo tiles so the row reads as one set */
.tile-icon { background: linear-gradient(160deg, var(--p-soft) 0%, var(--card) 70%); }
.tile-icon .tile-body strong { font-size: 19px; }


/* ============================================================ promotions ==== */
.code-chip { font-family: var(--font-display); font-weight: 700; letter-spacing: .06em; background: var(--p-soft); color: var(--p-ink); padding: 3px 8px; border-radius: 7px; font-size: 13px; }
.code-in { display: flex; gap: 8px; align-items: stretch; }
.code-in input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.code-applied.is-bad { background: var(--bad-soft); color: var(--bad); }
.rules { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--ink-2); display: flex; flex-direction: column; gap: 6px; }
.stat-big { font-family: var(--font-display); font-size: 32px; letter-spacing: -.03em; margin: 0 0 6px; color: var(--ink); }
.totals-total dd small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }
.admin .form .toggle { max-width: 640px; }
.stats .stat strong { font-size: 22px; }

.gift-row em { font-style: normal; font-size: 13px; color: var(--ink-2); }

/* Phone: header actions and admin toolbars wrap instead of poking past the screen; bar charts never widen a panel. */
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; }
.page-actions .btn { max-width: 100%; white-space: normal; text-align: center; }
.admin-search { max-width: 100%; flex-wrap: wrap; }
.admin-search input { min-width: 0; }
.bars div { min-width: 0; }
@media (max-width: 1200px) { .bars span { display: none; } .bars { gap: 3px; } }
@media (max-width: 899px) { .page-head { flex-direction: column; align-items: stretch; } .page-actions .btn { flex: 1 1 auto; } .admin-search input[name="user"] { flex: 1 1 100% !important; max-width: none !important; border-left: 0 !important; padding-left: 0 !important; } .admin-toolbar, .admin-toolbar > * { max-width: 100%; } }

/* Phone: the settings identity card wraps its button under the name instead of overflowing. */
.me-card > div { min-width: 0; }
@media (max-width: 899px) { .me-card { flex-wrap: wrap; } .me-card > .btn { flex: 1 1 100%; } }

/* Phone: balance cards stack two-up, the main card full width. */
.bal-card { min-width: 0; }
@media (max-width: 899px) { .bal-cards { grid-template-columns: 1fr 1fr; } .bal-card.bal-main { grid-column: 1 / -1; } .bal-main strong { font-size: 30px; } }


/* ---- Growth features (Sep 2026): follows & feed, saved searches, bundles, offers to likers, smart pricing, proxy bids, authentication, fees. */
.price-was { color: var(--muted); font-weight: 500; font-size: .62em; margin-left: 8px; text-decoration-color: var(--muted); }
.card-price .price-was { font-size: 12.5px; margin-left: 4px; }
.card-auth { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; background: var(--card); color: var(--ink); font-size: 11px; font-weight: 700; padding: 5px 9px; border-radius: 999px; box-shadow: var(--shadow); }
.card-auth .i { width: 13px; height: 13px; color: var(--p); }
.auth-badge { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--p-ink); background: var(--p-tint); padding: 5px 10px; border-radius: 999px; }
.auth-badge .i { width: 14px; height: 14px; }
.offer-banner { display: flex; gap: 10px; align-items: flex-start; background: var(--ok-soft); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; color: var(--ink); line-height: 1.45; }
.offer-banner .i { width: 18px; height: 18px; color: var(--ok); flex: none; margin-top: 1px; }
.bundle-line { background: var(--bg-2); border-radius: 10px; padding: 8px 10px; }
.bundle-line .i { color: var(--p); }
.bundle-hint { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--p-tint); color: var(--p-ink); font-size: 13.5px; text-decoration: none; line-height: 1.4; }
.bundle-hint .i { width: 18px; height: 18px; flex: none; }
.owner-tools { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.likers-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; }
.likers-form label { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; }
.likers-form label .i { width: 15px; height: 15px; color: var(--bad); flex: none; }
.likers-form select { padding: 7px 10px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font: inherit; min-width: 0; flex: 1 1 140px; }
.smart-box { margin-top: 12px; border: 1.5px dashed var(--line); border-radius: 12px; padding: 0 14px; }
.smart-box summary { cursor: pointer; padding: 11px 0; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; list-style: none; }
.smart-box summary::-webkit-details-marker { display: none; }
.smart-box summary small { font-weight: 500; color: var(--muted); }
.smart-box summary .i { width: 16px; height: 16px; color: var(--p); }
.smart-box[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.smart-box .field-help { padding-bottom: 12px; }
.save-search { display: inline-flex; }
.follow-strip { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; margin-bottom: 8px; scrollbar-width: none; }
.follow-strip::-webkit-scrollbar { display: none; }
.follow-chip { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--card); border: 1.5px solid var(--line); color: var(--ink); text-decoration: none; font-size: 13.5px; font-weight: 600; }
.follow-chip small { color: var(--muted); font-weight: 500; }
.follow-chip:hover { border-color: var(--p); }
.search-list { display: flex; flex-direction: column; gap: 10px; }
.search-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); flex-wrap: wrap; }
.search-row > div { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.search-row > div span { font-size: 12.5px; color: var(--muted); }
.search-title { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); text-decoration: none; }
.search-title .i { width: 15px; height: 15px; color: var(--p); }
.search-row form { display: inline-flex; }
[data-follow-btn].is-on { border-color: var(--line); }
.profile-meta [data-follow-count] { color: var(--ink); }
.fee-list { display: flex; flex-direction: column; gap: 0; margin: 0; border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden; }
.fee-list > div { display: grid; grid-template-columns: 180px 1fr; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.fee-list > div:last-child { border-bottom: 0; }
.fee-list dt { font-weight: 700; color: var(--ink); }
.fee-list dd { margin: 0; color: var(--ink-2); line-height: 1.55; }
@media (max-width: 560px) { .fee-list > div { grid-template-columns: 1fr; gap: 4px; } }
.fees-table th { text-align: left; white-space: nowrap; }
.fees-table td { vertical-align: top; font-size: 13.5px; line-height: 1.45; }
.fees-table tr.is-us td { background: var(--p-tint); }
.legal .table-wrap { overflow-x: auto; margin: 10px 0; border: 1.5px solid var(--line); border-radius: 12px; }
.legal .table { margin: 0; min-width: 640px; }

/* Phone: the profile heading wraps instead of pushing the seller badge off-screen. */
.profile-info h1 { flex-wrap: wrap; }


/* ---------------------------------------------------------------- status page (/status) --- */
.status-page { max-width: 1100px; margin: 0 auto; }
.status-hero { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg, 18px); padding: 28px 28px 24px; margin-bottom: 26px; background: var(--card); }
.status-hero::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--ok); }
.status-hero-warn::before { background: var(--warn); } .status-hero-bad::before { background: var(--bad); } .status-hero-info::before { background: var(--info); }
.status-hero h1 { margin: 12px 0 6px; font-size: clamp(26px, 4vw, 38px); letter-spacing: -.03em; display: flex; align-items: center; gap: 12px; }
.status-hero h1::before { content: ''; width: 14px; height: 14px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 5px var(--ok-soft); animation: status-pulse 2.2s ease-in-out infinite; }
.status-hero-warn h1::before { background: var(--warn); box-shadow: 0 0 0 5px var(--warn-soft); } .status-hero-bad h1::before { background: var(--bad); box-shadow: 0 0 0 5px var(--bad-soft); } .status-hero-info h1::before { background: var(--info); box-shadow: 0 0 0 5px var(--info-soft); }
@keyframes status-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.status-since { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
.status-group { margin-bottom: 30px; }
.status-group > h2 { display: flex; align-items: center; gap: 8px; font-size: 19px; margin-bottom: 12px; }
.status-group > h2 .i { width: 20px; height: 20px; color: var(--p); }
.status-group > h2 small { font-weight: 500; font-size: 13px; color: var(--muted); margin-left: 2px; }
.status-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.status-sys { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.status-sys-head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; }
.status-sys-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--p-soft); color: var(--p-ink); }
.status-sys-icon .i { width: 20px; height: 20px; }
.status-sys-title h3 { font-size: 16px; margin: 0 0 3px; }
.status-sys-title p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.status-badge { align-self: start; }
.status-note { margin: 0; font-size: 13px; color: var(--ink-2); display: flex; gap: 6px; align-items: flex-start; background: var(--bg-2); border-radius: 9px; padding: 8px 10px; }
.status-note .i { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--warn); }
.status-fn { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.status-fn li { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-2); border: 1px solid var(--line); border-radius: 7px; padding: 3px 8px; }
.status-fn .i { width: 13px; height: 13px; color: var(--ok); }
.status-bars { display: flex; gap: 2px; height: 30px; align-items: stretch; }
.status-bars i { flex: 1; border-radius: 2px; background: var(--bg-2); min-width: 0; }
.status-bars i.is-ok { background: var(--ok); } .status-bars i.is-warn { background: var(--warn); } .status-bars i.is-bad { background: var(--bad); } .status-bars i.is-none { background: var(--line); }
.status-bars i:hover { opacity: .75; }
.status-bars-cap { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: -6px; }
.status-bars-cap span:nth-child(2) { font-weight: 700; color: var(--ink-2); }
.status-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 2px 0 0; border-top: 1px solid var(--line); padding-top: 12px; }
.status-note[hidden] { display: none; }
.status-meta div { min-width: 0; }
.status-meta dt { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.status-meta dd { margin: 2px 0 0; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-you { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.status-you .stat strong { font-size: 22px; }
.status-you .stat.is-ok strong { color: var(--ok); } .status-you .stat.is-warn strong { color: var(--warn); } .status-you .stat.is-bad strong { color: var(--bad); }
.status-incidents { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.status-incidents li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.status-incidents li strong { display: block; font-size: 14px; }
.status-incidents li p { margin: 3px 0 0; font-size: 13px; color: var(--ink-2); }
.status-incidents li small { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.status-empty { display: flex; align-items: center; gap: 8px; color: var(--ink-2); background: var(--ok-soft); border-radius: var(--r); padding: 12px 14px; margin: 0; }
.status-empty .i { width: 18px; height: 18px; color: var(--ok); }
.status-page .legal-foot { margin-top: 10px; }
@media (max-width: 899px) { .status-you { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .status-hero { padding: 20px 18px; } .status-grid { grid-template-columns: 1fr; } .status-sys-head { grid-template-columns: auto 1fr; } .status-badge { grid-column: 2; justify-self: start; } .status-bars { height: 22px; } .status-bars i:nth-child(-n+45) { display: none; } }
.status-cap-45 { display: none; } @media (max-width: 599px) { .status-cap-90 { display: none; } .status-cap-45 { display: inline; } }


/* ---------------------------------------------------------------- round 3 (Sep 14): cards, 404, offer sheet, boost, balance, live board --- */
.card-incl { font-size: 11px; gap: 3px; white-space: nowrap; min-width: 0; }
.card-incl span { font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; }
.card-incl .i { width: 12px; height: 12px; flex: none; }
@media (max-width: 599px) { .card-incl { font-size: 10.5px; } .card-incl span { font-size: 10px; } }
.card-boost { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; background: var(--p); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 7px; }
.card-boost .i { width: 12px; height: 12px; }
.catnav-all .i { color: var(--p) !important; }

/* 404 */
.errpage-404 { max-width: 640px; padding: 48px 20px 60px; }
.errpage-404 .err-code { font-family: var(--font-display); font-size: clamp(72px, 16vw, 128px); line-height: 1; letter-spacing: -.06em; font-weight: 800; color: var(--p); background: linear-gradient(135deg, var(--p), var(--p-deep)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.errpage-404 h1 { font-size: clamp(22px, 4vw, 30px); margin: 6px 0 8px; }
.errpage-404 code { background: var(--bg-2); padding: 2px 7px; border-radius: 6px; font-size: 13px; word-break: break-all; }
.errpage-404 .btn-row { margin: 22px 0 26px; }
.err-search { display: flex; gap: 8px; max-width: 460px; margin: 0 auto 22px; }
.err-search input { flex: 1; min-width: 0; height: 44px; border: 1px solid var(--line); border-radius: 11px; padding: 0 14px; background: var(--card); color: var(--ink); font: inherit; }
.err-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.err-cats a { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 11px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.err-cats a .i { width: 15px; height: 15px; color: var(--p); }

/* offer sheet */
.sheet[hidden] { display: none; }
.sheet { position: fixed; inset: 0; z-index: 90; display: grid; align-items: end; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(10, 8, 22, .55); backdrop-filter: blur(2px); }
.sheet-panel { position: relative; background: var(--card); color: var(--ink); border-radius: 22px 22px 0 0; padding: 14px 18px calc(18px + env(safe-area-inset-bottom)); max-height: 94vh; overflow-y: auto; animation: sheet-up .28s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 -12px 40px rgba(0, 0, 0, .25); }
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 700px) { .sheet { align-items: center; justify-items: center; } .sheet-panel { width: 440px; border-radius: 22px; padding-bottom: 18px; } }
.sheet-head { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; margin-bottom: 8px; }
.sheet-head h2 { text-align: center; font-size: 19px; margin: 0; }
.sheet-x, .sheet-help { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--bg-2); color: var(--ink); cursor: pointer; }
.sheet-x .i, .sheet-help .i { width: 18px; height: 18px; }

/* cancel-order window (order page) */
.tx-cancel { display: flex; }
.sheet-form { display: grid; gap: 12px; margin-top: 4px; }
.sheet-form p { margin: 0; color: var(--ink-2); font-size: 14px; }
.sheet-form .btn-row { margin-top: 2px; }
.sheet-form .btn-row .btn { flex: 1; justify-content: center; }
.offer-bin { text-align: center; margin: 4px 0 14px; font-size: 14px; }
.offer-bin small { color: var(--muted); display: block; margin-top: 2px; }
.offer-label { text-align: center; font-weight: 700; margin: 0 0 2px; }
.offer-amount { display: flex; justify-content: center; align-items: flex-start; gap: 2px; font-family: var(--font-display); font-weight: 800; letter-spacing: -.04em; font-size: 56px; line-height: 1.1; min-height: 62px; }
.offer-amount sup { font-size: 24px; margin-top: 8px; color: var(--muted); }
.offer-amount output { color: var(--ink); }
.offer-amount output.is-empty { color: var(--muted); }
.offer-amount output.is-bad { color: var(--bad); }
.offer-err { text-align: center; color: var(--bad); font-size: 12.5px; min-height: 18px; margin: 4px 0 6px; }
.offer-chips { display: flex; gap: 8px; margin: 6px 0 10px; }
.offer-chips .chip { flex: 1; text-align: center; justify-content: center; align-items: center; border: 1.5px solid var(--p); color: var(--p-ink); border-radius: 999px; padding: 9px 0; font-weight: 700; background: transparent; cursor: pointer; font: inherit; }
.offer-chips .chip.is-on { background: var(--p); color: #fff; }
.offer-msg input { width: 100%; height: 42px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; background: var(--bg); color: var(--ink); font: inherit; margin-bottom: 10px; }
.offer-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.offer-keys button { height: 50px; border: 0; border-radius: 12px; background: var(--bg-2); color: var(--ink); font: inherit; font-size: 22px; font-weight: 600; cursor: pointer; display: grid; place-items: center; }
.offer-keys button:active { background: var(--p-soft); }
.offer-keys button .i { width: 22px; height: 22px; }
.offer-review .order-item { margin-bottom: 12px; }
.offer-review .totals { margin-bottom: 10px; }
.offer-review .btn-row { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; margin-top: 12px; }
body.has-sheet { overflow: hidden; }

/* boost */
.boost-why { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 18px; }
.boost-why span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--p-soft); border-radius: 9px; padding: 7px 11px; }
.boost-why .i { width: 16px; height: 16px; color: var(--p); }
.boost-plans { display: flex; gap: 8px; margin-bottom: 14px; }
.boost-plans .pay-tab { flex: 1; }
.boost-list { display: grid; gap: 6px; max-height: 420px; overflow-y: auto; padding-right: 2px; }
.boost-item { display: grid; grid-template-columns: auto 52px 1fr; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; cursor: pointer; }
.boost-item.is-on { border-color: var(--p); background: var(--p-soft); }
.boost-item img { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; }
.boost-item strong { display: block; font-size: 14px; }
.boost-item small { color: var(--muted); display: flex; align-items: center; gap: 4px; }
.boost-item small .i { width: 12px; height: 12px; color: var(--p); }
.boost-all { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.pay-tab small { display: block; font-weight: 500; font-size: 11.5px; color: var(--muted); }
.totals-promo dt b { color: var(--ok); }

/* seller hub growth + bundle quick set + listing form notes */
.seller-growth { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin-bottom: 14px; }
.bundle-set { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bundle-set label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13.5px; }
.bundle-set label .i { width: 16px; height: 16px; color: var(--p); }
.bundle-set select { height: 34px; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; background: var(--bg); color: var(--ink); font: inherit; }
.bundle-set small { flex-basis: 100%; color: var(--muted); font-size: 12px; }
.auto-fee-note, .bundle-hint { display: flex; gap: 8px; align-items: flex-start; background: var(--p-soft); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--ink-2); margin: 0 0 12px; }
.auto-fee-note .i, .bundle-hint .i { width: 18px; height: 18px; color: var(--p-ink); flex: none; margin-top: 1px; }
.auto-fee-note[hidden] { display: none; }
.notice-warn { background: var(--warn-soft); color: var(--warn); }

/* balance: credits + activity */
.bal-credit { border-color: var(--p-tint); background: var(--p-soft); }
.bal-credit strong { color: var(--p-ink); }
.act-ref { font-size: 12px; background: var(--bg-2); padding: 2px 6px; border-radius: 6px; }
.act-row .is-pos { color: var(--ok); font-weight: 700; }
.act-row .is-neg { font-weight: 700; }
/* Balance activity: on phones the 4-column table overflowed (had to scroll to see the amount).
   Restack each entry as a card — Description + Amount on top, Date + Reference below. */
@media (max-width: 560px) {
  .act-table thead { display: none; }
  .act-table, .act-table tbody { display: block; }
  .act-table .act-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 2px; border-bottom: 1px solid var(--line); align-items: baseline; }
  .act-table .act-row td { display: block; border: 0; padding: 0; }
  .act-table .act-row td:nth-child(2) { grid-column: 1; grid-row: 1; font-weight: 600; }
  .act-table .act-row td.num { grid-column: 2; grid-row: 1; text-align: right; white-space: nowrap; }
  .act-table .act-row td:nth-child(1) { grid-column: 1; grid-row: 2; color: var(--muted); font-size: 12.5px; }
  .act-table .act-row td:nth-child(3) { grid-column: 2; grid-row: 2; text-align: right; }
}
.use-credits { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--p-tint); background: var(--p-soft); border-radius: 10px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.use-credits .i { width: 16px; height: 16px; color: var(--p-ink); }
.use-credits small { flex-basis: 100%; font-weight: 500; color: var(--muted); }

/* admin live board (big screen) */
body.is-tv .topbar, body.is-tv .header, body.is-tv .footer, body.is-tv .cookie, body.is-tv .announce, body.is-tv .drawer, body.is-tv .catnav, body.is-tv .geobar, body.is-tv .reveal { display: none !important; }
body.is-tv { background: #0b0a14; color: #f4f1ff; }
body.is-tv .main { max-width: none; padding: 0; margin: 0; }
.tv { --tv-card: #15132a; --tv-line: #2a2748; --tv-muted: #9a94c2; padding: 18px 22px 30px; min-height: 100vh; font-size: 15px; }
.tv-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 16px; }
.tv-brand { display: flex; align-items: center; gap: 8px; font-size: 18px; color: #fff; }
.tv-brand .i { width: 22px; height: 22px; color: #b9a3ff; }
.tv-brand b { color: #b9a3ff; font-family: var(--font-display); font-weight: 800; }
.tv-clock { color: var(--tv-muted); font-variant-numeric: tabular-nums; margin-left: 8px; }
.tv-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tv-actions .btn { border-color: var(--tv-line); color: #f4f1ff; }
.tv-sys { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--tv-card); font-weight: 700; font-size: 13px; }
.tv-sys i { width: 10px; height: 10px; border-radius: 50%; background: #4cc98a; box-shadow: 0 0 0 4px rgba(76, 201, 138, .25); }
.tv-sys.is-warn i { background: #e9a23b; box-shadow: 0 0 0 4px rgba(233, 162, 59, .25); } .tv-sys.is-bad i { background: #f2647a; box-shadow: 0 0 0 4px rgba(242, 100, 122, .25); } .tv-sys.is-info i { background: #6f94f0; }
.tv-hero { display: grid; grid-template-columns: 3fr 2fr; gap: 14px; margin-bottom: 18px; }
.tv-tile { background: var(--tv-card); border: 1px solid var(--tv-line); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; transition: box-shadow .3s; }
.tv-tile span { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--tv-muted); font-weight: 700; }
.tv-tile strong { font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; font-size: 34px; line-height: 1.1; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-tile small { color: var(--tv-muted); font-size: 12.5px; }
.tv-tile small b.is-ok { color: #4cc98a; } .tv-tile small b.is-bad { color: #f2647a; }
.tv-tile.is-ok strong { color: #4cc98a; } .tv-tile.is-warn strong { color: #e9a23b; } .tv-tile.is-bad strong { color: #f2647a; } .tv-tile.is-info strong { color: #6f94f0; } .tv-tile.is-p strong { color: #b9a3ff; }
.tv-huge { padding: 22px 26px; }
.tv-huge strong { font-size: clamp(56px, 9vw, 128px); }
.tv-huge span { font-size: 15px; }
.tv-huge small { font-size: 15px; }
.tv-row { margin-bottom: 18px; }
.tv-row h2 { display: flex; align-items: center; gap: 8px; font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: var(--tv-muted); margin-bottom: 10px; }
.tv-row h2 .i { width: 18px; height: 18px; color: #b9a3ff; }
.tv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.tv-chart { display: flex; align-items: flex-end; gap: 3px; height: 70px; margin-top: 10px; position: relative; padding-bottom: 16px; }
.tv-chart i { flex: 1; background: #b9a3ff; border-radius: 3px 3px 0 0; height: calc(var(--v, 0) * 54px + 2px); opacity: .85; }
.tv-chart span { position: absolute; left: 0; bottom: 0; font-size: 11px; color: var(--tv-muted); }
.tv-mini { display: flex; align-items: flex-end; gap: 4px; height: 44px; margin-top: 6px; }
.tv-mini i { flex: 1; background: #6f94f0; border-radius: 3px 3px 0 0; height: calc(var(--v, 0) * 40px + 3px); }
.tv-ticker { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.tv-ticker li { background: var(--tv-card); border: 1px solid var(--tv-line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; }
.tv-ticker b { color: #4cc98a; font-size: 18px; }
.tv-ticker span { color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
.tv-ticker small { color: var(--tv-muted); font-size: 12px; }
.tv-foot { color: var(--tv-muted); font-size: 12px; margin-top: 8px; }
.tv.is-stale .tv-head::after { content: 'Feed paused — retrying'; color: #e9a23b; font-size: 12px; font-weight: 700; }
.tv.is-sale .tv-hero .tv-tile:first-child { box-shadow: 0 0 0 3px #4cc98a, 0 0 40px rgba(76, 201, 138, .5); }
@media (max-width: 899px) { .tv-hero { grid-template-columns: 1fr; } .tv { padding: 14px; } .tv-huge strong { font-size: 56px; } }
.offer-chips .chip { font-size: 13px; padding: 9px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* one-tap demo logins on /login (DEMO_LOGINS) */
.demo-panel { margin: 0 0 18px; border: 1px dashed var(--p-tint); background: var(--p-soft); border-radius: 14px; padding: 14px 14px 12px; }
.demo-panel h3 { display: flex; align-items: center; gap: 6px; font-size: 14px; margin: 0 0 10px; color: var(--p-ink); }
.demo-panel h3 .i { width: 16px; height: 16px; }
.demo-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.demo-btns form { display: contents; }
.demo-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; width: 100%; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 11px; padding: 10px 11px; cursor: pointer; font: inherit; transition: border-color .15s, transform .15s; }
.demo-btn:hover { border-color: var(--p); transform: translateY(-1px); }
.demo-btn .i { width: 18px; height: 18px; color: var(--p); margin-bottom: 2px; }
.demo-btn strong { font-size: 14px; }
.demo-btn small { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.demo-creds { margin: 10px 0 0; font-size: 12px; color: var(--muted); line-height: 1.6; }
.demo-creds code { background: var(--card); padding: 1px 5px; border-radius: 5px; font-size: 11.5px; }
@media (max-width: 599px) { .demo-btns { grid-template-columns: 1fr; } .demo-btn { flex-direction: row; align-items: center; gap: 10px; } .demo-btn .i { margin: 0; } .demo-btn small { display: block; } }

/* chat: photo messages, attach button, moderation warning, safety line (Sep 15) */
.msg-image .bubble-img { display: block; padding: 4px; max-width: min(72%, 320px); border-radius: 16px; overflow: hidden; }
.msg-image .bubble-img img { display: block; width: 100%; height: auto; border-radius: 12px; }
.compose .attach { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); color: var(--ink-2); cursor: pointer; flex: none; }
.compose .attach:hover { border-color: var(--p); color: var(--p-ink); }
.compose .attach .i { width: 18px; height: 18px; }
.compose-warn { margin: 0 0 8px; padding: 10px 12px; border-radius: 12px; background: var(--warn-soft); color: var(--ink); font-size: 13px; line-height: 1.5; border: 1px solid var(--warn); }
.compose-warn[hidden] { display: none; }
.compose-warn b { color: var(--warn); }
.compose-warn-btns { display: inline-flex; gap: 6px; margin-left: 6px; vertical-align: middle; }
.compose-safety { display: flex; align-items: flex-start; gap: 6px; margin: 8px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.compose-safety .i { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--ok); }

/* Pre-launch a11y & mobile polish (Sep 16) */
.pay-tab:has(input:focus-visible), .gift-design:has(input:focus-visible), .gift-value:has(input:focus-visible), .rate:has(input:focus-visible), .pref-opt:has(input:focus-visible), .cond:has(input:focus-visible) { outline: 2px solid var(--p); outline-offset: 2px; border-radius: 10px; }
.flashes { z-index: 200; }
.flash-x { min-width: 32px; min-height: 32px; }
@media (max-width: 680px) { .flashes { top: 8px; } .chat { height: calc(100dvh - 118px); } }

/* ================================================ logo reveal + geo bar (Sep 16, Richard) === */
/* A one-per-session splash: "eddy" draws on, fills in, an accent underline sweeps, then it fades to
   reveal the site. Pure CSS drives it (so it clears even without JS); app.js removes the node and lets
   an impatient tap skip it. The head gate adds html.rv-skip on repeat visits and for reduced-motion. */
/* Bright, happy splash: colourful pieces fly in and assemble the mark (transformer-style), sparkles pop,
   then the "eddy" wordmark writes on in a purple→pink gradient and underlines. Always light for a cheerful feel. */
.reveal { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: #FFFFFF; overflow: hidden; }
.reveal.reveal-svg { animation: rv-out .65s ease 3.6s forwards; }
.reveal.reveal-vid { animation: rv-out .6s ease 9s forwards; }   /* video normally fades on 'ended' via app.js; this is a stall fallback */
.reveal::after { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(38% 30% at 50% 32%, rgba(245,71,142,.13), transparent 70%),
  radial-gradient(48% 42% at 72% 72%, rgba(201,242,107,.20), transparent 70%),
  radial-gradient(42% 38% at 26% 74%, rgba(124,58,237,.12), transparent 70%); }
.reveal-vid::after { display: none; }
.reveal-in { position: relative; width: min(78vw, 470px); animation: rv-in .7s ease both; }
@keyframes rv-in { from { opacity: 0; } to { opacity: 1; } }
.reveal-svg-el { width: 100%; height: auto; overflow: visible; display: block; }

.rv-mark { transform-box: view-box; transform-origin: 360px 132px; transform: scale(0) rotate(-30deg); opacity: 0;
  animation: rv-pop 1s cubic-bezier(.2,1.18,.35,1) .2s forwards; filter: drop-shadow(0 12px 26px rgba(193,58,214,.35)); }
@keyframes rv-pop { 0% { transform: scale(0) rotate(-30deg); opacity: 0; } 55% { opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }

.rv-pc { transform-box: view-box; opacity: 0; }
.rv-pc1 { fill: #C9F26B; animation: rv-pc1 .68s cubic-bezier(.3,.9,.3,1) .04s forwards; }
.rv-pc2 { fill: #F5478E; animation: rv-pc2 .68s cubic-bezier(.3,.9,.3,1) .12s forwards; }
.rv-pc3 { fill: #7C3AED; animation: rv-pc3 .68s cubic-bezier(.3,.9,.3,1) 0s forwards; }
.rv-pc4 { fill: #FBBF24; animation: rv-pc4 .68s cubic-bezier(.3,.9,.3,1) .18s forwards; }
@keyframes rv-pc1 { 0% { transform: translate(-150px,-110px) scale(.5); opacity: 0; } 35% { opacity: 1; } 100% { transform: translate(0,0) scale(1); opacity: 0; } }
@keyframes rv-pc2 { 0% { transform: translate(165px,-95px) scale(.5); opacity: 0; } 35% { opacity: 1; } 100% { transform: translate(0,0) scale(1); opacity: 0; } }
@keyframes rv-pc3 { 0% { transform: translate(-140px,120px) scale(.5); opacity: 0; } 35% { opacity: 1; } 100% { transform: translate(0,0) scale(1); opacity: 0; } }
@keyframes rv-pc4 { 0% { transform: translate(155px,125px) scale(.5); opacity: 0; } 35% { opacity: 1; } 100% { transform: translate(0,0) scale(1); opacity: 0; } }

.rv-spark { transform-box: view-box; opacity: 0; transform: scale(0); }
.rv-spark1 { fill: #C9F26B; transform-origin: 300px 96px; animation: rv-spark .6s ease .82s forwards; }
.rv-spark2 { fill: #F5478E; transform-origin: 426px 170px; animation: rv-spark .6s ease .96s forwards; }
.rv-spark3 { fill: #FBBF24; transform-origin: 408px 86px; animation: rv-spark .6s ease 1.06s forwards; }
@keyframes rv-spark { 0% { opacity: 0; transform: scale(0); } 45% { opacity: 1; transform: scale(1.25); } 100% { opacity: 0; transform: scale(.5); } }

.rv-word { font-family: "Outfit", var(--font-display); font-weight: 800; font-size: 132px; letter-spacing: -.045em; }
.rv-nib { fill: var(--lime); transform-box: view-box; opacity: 0; filter: drop-shadow(0 1px 6px rgba(201,242,107,.8));
  animation: rv-nib 1.5s cubic-bezier(.62,0,.2,1) 1.15s forwards; }
@keyframes rv-nib { 0% { transform: translate(198px,386px); opacity: 0; } 12% { opacity: 1; } 84% { opacity: 1; } 100% { transform: translate(520px,386px); opacity: 0; } }
.rv-line { fill: none; stroke: url(#rvGrad); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 320; stroke-dashoffset: 320; animation: rv-line .6s cubic-bezier(.68,0,.16,1) 2.75s forwards; }
@keyframes rv-line { to { stroke-dashoffset: 0; } }
@keyframes rv-out { to { opacity: 0; visibility: hidden; pointer-events: none; } }
/* Drop a Higgsfield (or any) reveal clip into public/reveal.mp4 (or reveal.webm) and it plays instead of the SVG. */
.reveal-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #FFFFFF; }
html.rv-skip .reveal { display: none !important; }

/* Settings → Notifications: browser-notification enable card */
.notif-enable { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--p-soft); border: 1px solid var(--p-tint); border-radius: var(--r); padding: 14px 16px; margin: 0 0 18px; }
.notif-enable > div { flex: 1 1 260px; min-width: 0; }
.notif-enable strong { display: flex; align-items: center; gap: 7px; font-size: 15px; }
.notif-enable strong .i { width: 18px; height: 18px; color: var(--p-ink); }
.notif-enable small { display: block; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.notif-status { flex-basis: 100%; font-size: 12.5px; color: var(--muted); }

/* ============================================ Part A features (Sep 16) === */
/* Ratings breakdown on profiles */
.rating-breakdown { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; margin-bottom: 16px; }
.rb-score { text-align: center; }
.rb-score strong { display: block; font-family: var(--font-display); font-size: 40px; line-height: 1; letter-spacing: -.03em; }
.rb-score small { display: block; color: var(--muted); margin-top: 4px; }
.rb-bars { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rb-row { display: grid; grid-template-columns: 26px 1fr 28px; gap: 8px; align-items: center; font-size: 12.5px; color: var(--muted); }
.rb-row i { display: block; height: 8px; background: var(--bg-2); border-radius: 999px; overflow: hidden; }
.rb-row i b { display: block; height: 100%; background: var(--p); border-radius: 999px; }
.rb-row em { font-style: normal; text-align: right; }
@media (max-width: 480px) { .rating-breakdown { grid-template-columns: 1fr; gap: 12px; } }

/* Vacation note on the product page */
.vacation-line { background: var(--warn-soft); border-radius: 10px; padding: 8px 10px; color: var(--ink); }
.vacation-line .i { color: var(--warn); }

/* Counter-offer control in chat */
.offer-counter { margin-top: 6px; }
.offer-counter summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--p-ink); display: inline-flex; align-items: center; gap: 5px; list-style: none; }
.offer-counter summary::-webkit-details-marker { display: none; }
.offer-counter summary .i { width: 14px; height: 14px; }
.offer-counter-form { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.offer-counter-form .money-in { flex: 1; }

/* Invite / referral page */
.invite-card { background: var(--p-soft); border: 1px solid var(--p-tint); border-radius: var(--r); padding: 18px; max-width: 620px; margin-bottom: 8px; }
.invite-card .code-in input { background: var(--card); }
.invite-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 620px; }
.invite-list li { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.invite-list li .i { color: var(--ok); width: 18px; height: 18px; }
.invite-list time { margin-left: auto; color: var(--muted); font-size: 12.5px; }

/* Ship-by countdown */
.ship-by { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--bg-2); border-radius: 9px; padding: 6px 10px; margin: 0 0 10px; }
.ship-by .i { width: 15px; height: 15px; color: var(--p); }
.ship-by.is-late { background: var(--bad-soft); color: var(--bad); }
.ship-by.is-late .i { color: var(--bad); }

/* Search autocomplete dropdown */
.search { position: relative; }
.suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); overflow: hidden; z-index: 120; max-height: 60vh; overflow-y: auto; }
.suggest-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; color: var(--ink); font-size: 14px; border-bottom: 1px solid var(--line); }
.suggest-row:last-child { border-bottom: 0; }
.suggest-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggest-row small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; flex: none; }
.suggest-row:hover, .suggest-row.is-active { background: var(--p-soft); text-decoration: none; }

/* ============================================ Part B prep batch (Sep 17) === */
/* Chat: pinned safety note as the first message (checkmark aligned to the top of the text) */
.msg-safety { align-self: center; max-width: 94%; }
.msg-safety span { display: block; text-align: center; background: var(--ok-soft); color: var(--ink-2); border-radius: 12px; padding: 10px 14px; font-size: 12.5px; line-height: 1.5; }
.msg-safety .i { width: 16px; height: 16px; color: var(--ok); vertical-align: -3px; margin-right: 5px; }
/* buybox social-proof / vacation lines */
.offers-line { background: var(--p-soft); border-radius: 10px; padding: 8px 10px; }
.offers-line .i { color: var(--p); }
/* authenticity explainer */
.auth-explain { margin-top: 8px; }
.auth-explain summary { list-style: none; cursor: pointer; display: inline-flex; }
.auth-explain summary::-webkit-details-marker { display: none; }
.auth-explain .auth-explain-body { display: flex; align-items: flex-start; gap: 7px; margin-top: 8px; padding: 10px 12px; background: var(--p-soft); border-radius: 10px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.auth-explain .auth-explain-body .i { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--p-ink); }
.buybox-safe { align-items: flex-start; }
/* seller settings: bundle tiers + KYC */
.bundle-tiers[hidden] { display: none; }
.kyc-form { margin-top: 8px; }
.kyc-uploads { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.kyc-up { display: flex; flex-direction: column; gap: 6px; border: 1.5px dashed var(--line-2); border-radius: 12px; padding: 12px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.kyc-up .i { width: 20px; height: 20px; color: var(--p); }
.kyc-up input[type=file] { font-size: 12px; font-weight: 400; }
.kyc-note { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; color: var(--muted); line-height: 1.5; margin: 0 0 10px; }
.kyc-note .i { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--ok); }
@media (max-width: 480px) { .kyc-uploads { grid-template-columns: 1fr; } }
/* badges page */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 20px; }
.badge-card { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.badge-card.is-locked { opacity: .72; }
.badge-card > div { flex: 1; min-width: 0; }
.badge-card strong { display: block; font-size: 14px; }
.badge-card small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.badge-ic { width: 26px; height: 26px; color: var(--p); flex: none; }
.badge-card.is-earned .badge-ic { color: var(--ok); }
.badge-tick { width: 18px; height: 18px; color: var(--ok); flex: none; }
.badge-lock { width: 16px; height: 16px; color: var(--faint); flex: none; }

.geobar { border-bottom: 1px solid var(--line); background: var(--bg-2); }
.geobar-in { display: flex; align-items: center; gap: 8px 22px; min-height: 40px; padding: 5px 0; flex-wrap: wrap; }
.geo-field { display: inline-flex; margin: 0; }
.geo-field label { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.geo-field label > .i { width: 16px; height: 16px; color: var(--p); flex: none; }
.geo-lbl { color: var(--muted); font-weight: 600; }
.geo-field select { border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; border-radius: var(--r-pill); padding: 5px 12px; cursor: pointer; max-width: 220px; }
.geo-field select:hover { border-color: var(--p); }
@media (max-width: 560px) { .geo-lbl { display: none; } .geobar-in { gap: 8px 12px; } .geo-field select { max-width: 150px; font-size: 12.5px; } }

/* ============================================ Stripe + Apple Pay / Google Pay preview (Sep 16) === */
.pay-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.pay-m { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; border: 1.5px solid var(--line-2); border-radius: 12px; padding: 12px 8px; cursor: pointer; background: var(--card); transition: border-color .15s, background .15s; min-height: 68px; }
.pay-m input { position: absolute; opacity: 0; pointer-events: none; }
.pay-m.is-on { border-color: var(--p); background: var(--p-soft); box-shadow: 0 0 0 1px var(--p); }
.pay-m-in { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--ink); }
.pay-m-in .i { width: 18px; height: 18px; }
.pay-m-by { font-size: 11px; color: var(--muted); font-weight: 600; }
.applelogo { width: 16px; height: 16px; vertical-align: -2px; }
.gmark { width: 16px; height: 16px; vertical-align: -3px; flex: none; }
.card-brands .gmark { width: 18px; height: 18px; }
.stripe-mark { font-style: normal; font-weight: 800; letter-spacing: -.02em; color: #635BFF; }
html[data-theme="dark"] .stripe-mark { color: #A8A5FF; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .stripe-mark { color: #A8A5FF; } }
.gpay-g { font-weight: 800; color: #4285F4; font-family: var(--font-display); }
.gpay-g-lg { font-size: 18px; }

.stripe-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.stripe-bar .i { width: 14px; height: 14px; vertical-align: -2px; }
.card-brands { display: inline-flex; align-items: center; gap: 5px; }
.cardlogo { height: 22px; width: auto; display: block; }
/* Footer "we accept" payment strip (Richard, Sep 23 — moved from checkout to the footer). */
.footer-pay { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; padding: 18px 0 2px; }
.paymark { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 8px; border-radius: 4px; background: #fff; border: 1px solid #e6e6ee; color: #111; font-weight: 700; font-size: 11px; }
.paymark svg { height: 13px; width: auto; }
.paymark-dark { background: #000; border-color: #000; color: #fff; }
/* Boxed wallet acceptance marks in the payment picker (Apple Pay / Google Pay) */
.wallet-badge { display: inline-flex; align-items: center; gap: 3px; background: #fff; border: 1px solid #dcdce5; border-radius: 6px; padding: 4px 8px; box-shadow: 0 1px 1px rgba(0,0,0,.04); }
.wallet-badge b { color: #111; font-weight: 600; font-size: 14px; line-height: 1; }
.wallet-badge .applelogo { width: 14px; height: 14px; color: #000; }
.wallet-badge .gmark { width: 15px; height: 15px; }
/* Carrier chip in the shipping picker */
/* Carrier logo tile in the shipping picker + order card (real logos, Richard Sep 20) */
.ship-logo { flex: none; width: 56px; height: 38px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; padding: 3px; }
.ship-logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.ship-logo b { font-size: 11px; font-weight: 800; }
/* Compact shipping rows (were too tall/stretched) + collapsible extra carriers */
.ship { align-items: center; padding: 9px 11px; }
.ship > div { gap: 1px; }
.ship > div strong { font-size: 14px; }
.ship > div span { font-size: 12px; }
.ship-more { margin-top: 8px; }
.ship-more > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--p-ink); list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 2px; }
.ship-more > summary::-webkit-details-marker { display: none; }
.ship-more > summary .i { width: 15px; height: 15px; }
.ship-more .ship-list { margin-top: 8px; }
.cbrand { display: inline-flex; align-items: center; justify-content: center; height: 20px; min-width: 30px; padding: 0 5px; border-radius: 4px; font-size: 10px; font-weight: 800; letter-spacing: .04em; color: #fff; }
.cb-visa { background: #1434CB; font-style: italic; }
.cb-amex { background: #2E77BC; }
.cb-mc { background: #1A1A1A; gap: 0; padding: 0 6px; }
.cb-mc i { width: 12px; height: 12px; border-radius: 50%; }
.cb-mc i:first-child { background: #EB001B; }
.cb-mc i:last-child { background: #F79E1B; margin-left: -5px; mix-blend-mode: screen; }

.wallet-pay { display: flex; flex-direction: column; gap: 10px; }
.applepay-btn, .gpay-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 50px; border: 0; border-radius: 10px; background: #000; color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 19px; cursor: default; width: 100%; }
.applepay-btn .applelogo { width: 20px; height: 20px; }
.gpay-btn .gmark { width: 22px; height: 22px; }
.applepay-btn .walletmark, .gpay-btn .walletmark { height: 24px; width: auto; display: block; }
.pay-m-in .walletmark { height: 17px; width: auto; display: block; color: var(--ink, #14121f); }
.gpay-btn { background: #000; }
.gpay-btn .gpay-g { color: #fff; font-size: 20px; }
.pay-fine { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.pay-fine .i { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--p); }
.card-form .pay-fine { margin-top: 10px; }
.btn.is-disabled, .btn-primary.is-disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 480px) { .pay-methods { grid-template-columns: 1fr; } .pay-m { flex-direction: row; justify-content: flex-start; gap: 10px; min-height: 0; } .pay-m-by { margin-left: auto; } }

/* Admin → Integrations cockpit (Part B) */
.intg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.intg { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.intg.is-on { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.intg-head { display: flex; align-items: center; gap: 8px; }
.intg-head .i { width: 20px; height: 20px; color: var(--p); flex: none; }
.intg-head strong { font-size: 15px; }
.intg-pill { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--bg-2); color: var(--muted); }
.intg-pill .i { width: 13px; height: 13px; }
.intg.is-on .intg-pill { background: var(--ok-soft); color: var(--ok); }
.intg.is-skip .intg-pill { background: var(--warn-soft); color: var(--warn); }
.intg-what { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.intg-note { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.intg-note .i { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--p); }
.intg-note.intg-block { color: var(--warn); } .intg-note.intg-block .i { color: var(--warn); }
.intg-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--line); }
.intg-keys-l { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); margin-right: 2px; }
.intg-keys code { font-size: 11.5px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 2px 6px; }
.intg-get { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.intg-get .i { width: 15px; height: 15px; color: var(--muted); }

/* Authenticator (TOTP) setup */
.totp-setup { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); max-width: 460px; }
.totp-add { align-self: flex-start; }
.totp-key { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.totp-key code { font-size: 16px; letter-spacing: .12em; font-weight: 600; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; word-break: break-all; }

/* Order delivery / tracking (eBay-style projected arrival) */
.delivery { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin: 14px 0; }
.delivery-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.delivery-row + .delivery-row { border-top: 1px solid var(--line); }
.delivery-row .i { width: 22px; height: 22px; color: var(--p); flex: none; }
.delivery-row > div { display: flex; flex-direction: column; }
.delivery-row span { font-size: 12px; color: var(--muted); }
.delivery-row strong { font-size: 15px; }
.delivery-row em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 600; color: var(--p); background: var(--p-soft); padding: 3px 9px; border-radius: 999px; }
.order-track { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 12.5px; color: var(--p-ink); }
.order-track .i { width: 14px; height: 14px; color: var(--p); }

/* Invite: totals */
.invite-stats { display: flex; gap: 12px; margin-bottom: 16px; }
.invite-stat { flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.invite-stat span { display: block; font-size: 12.5px; color: var(--muted); }
.invite-stat strong { font-family: var(--font-display); font-size: 24px; }

/* Seller ownership-verification steps (held listings) */
.verify-steps { margin: 0 0 18px; padding-left: 22px; }
.verify-steps li { margin: 8px 0; color: var(--ink-2); line-height: 1.55; }

/* Post-checkout celebration: a quick eddy logo reveal, then the receipt "prints" in */
.celebrate { position: fixed; inset: 0; z-index: 9998; display: grid; place-items: center; padding: 24px; background: radial-gradient(120% 90% at 50% 30%, var(--p-soft), var(--bg) 72%); animation: fade .3s ease; }
.celebrate-in { width: min(92vw, 372px); display: flex; flex-direction: column; align-items: center; }
.cel-logo { position: relative; z-index: 2; }
.cel-logo .logo-mark { width: 64px; height: 64px; display: block; animation: cel-pop .7s cubic-bezier(.2,.9,.3,1.5) both; }
.cel-logo::after { content: ""; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 20px; border: 2px solid var(--p); opacity: 0; animation: cel-ring 1s ease .18s 1; }
@keyframes cel-pop { 0% { transform: scale(0) rotate(-25deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes cel-ring { 0% { opacity: .5; transform: scale(.9); } 100% { opacity: 0; transform: scale(2); } }
.cel-receipt { margin-top: -14px; width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 30px 22px 22px; text-align: center; clip-path: inset(0 0 100% 0); animation: cel-print .8s cubic-bezier(.2,.7,.2,1) .55s forwards; }
@keyframes cel-print { 0% { clip-path: inset(0 0 100% 0); transform: translateY(-8px); } 100% { clip-path: inset(0 0 0 0); transform: translateY(0); } }
.cel-head { display: flex; align-items: center; justify-content: center; gap: 10px; }
.cel-word { font-size: 26px; }
.cel-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ok); background: var(--ok-soft); padding: 4px 9px; border-radius: 999px; }
.cel-badge .i { width: 14px; height: 14px; }
.cel-order { font-family: var(--font-display); letter-spacing: .04em; color: var(--muted); font-size: 13px; margin: 4px 0 14px; }
.cel-item { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 0; border-top: 1px dashed var(--line-2); border-bottom: 1px dashed var(--line-2); }
.cel-item img { width: 48px; height: 60px; object-fit: cover; border-radius: 8px; flex: none; }
.cel-item strong { display: block; font-size: 14px; }
.cel-item span { color: var(--muted); font-size: 12.5px; }
.cel-lines { margin: 14px 0; display: flex; flex-direction: column; gap: 7px; }
.cel-lines > div { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--ink-2); }
.cel-lines dt, .cel-lines dd { margin: 0; }
.cel-total { margin-top: 6px; padding-top: 9px; border-top: 1px solid var(--line); font-weight: 800; font-size: 15px !important; color: var(--ink) !important; }
.cel-total dd { font-family: var(--font-display); }
.cel-eta { display: flex; align-items: center; justify-content: center; gap: 8px; text-align: left; font-size: 12.5px; color: var(--muted); background: var(--p-soft); border-radius: 10px; padding: 9px 12px; margin-bottom: 14px; }
.cel-eta .i { width: 16px; height: 16px; color: var(--p); flex: none; }
.cel-eta strong { color: var(--ink); }
.cel-actions { display: flex; flex-direction: column; gap: 8px; }
@media (prefers-reduced-motion: reduce) { .cel-logo .logo-mark, .cel-logo::after { animation: none; } .cel-receipt { animation: none; clip-path: none; } }

/* Scroll-reveal: home sections rise in (class added by JS, so no-JS users are unaffected) */
.will-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.will-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .will-reveal { opacity: 1; transform: none; transition: none; } }

/* announcement icon picker (admin) */
.icon-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; max-height: 184px; overflow-y: auto; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-2); }
.icon-opt { display: grid; place-items: center; aspect-ratio: 1; border-radius: 8px; cursor: pointer; color: var(--muted); border: 1px solid transparent; transition: .12s; }
.icon-opt:hover { background: var(--card); color: var(--ink); }
.icon-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.icon-opt:has(input:checked) { background: var(--p); color: #fff; border-color: var(--p); }
.icon-opt .i { width: 20px; height: 20px; }

/* ============================================ Search panel (Richard, Sep 27) === */
/* Empty search box → recent searches (removable) + trending / personalised brand chips, Mercari-style. */
.suggest.is-panel { padding: 6px 0 14px; }
.sp-row { display: flex; align-items: center; gap: 4px; padding: 0 8px 0 6px; }
.sp-row:hover { background: var(--p-soft); }
.sp-q { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px 8px; color: var(--ink); font-size: 15px; text-decoration: none; }
.sp-q:hover { text-decoration: none; }
.sp-q span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-q .i { width: 17px; height: 17px; color: var(--faint); flex: none; }
.sp-x { flex: none; width: 34px; height: 34px; border: 0; background: none; color: var(--muted); font-size: 20px; line-height: 1; border-radius: 8px; cursor: pointer; }
.sp-x:hover { color: var(--ink); background: var(--line); }
.sp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 10px; }
.sp-head strong { font-size: 17px; letter-spacing: -.01em; }
.sp-head a { color: var(--p); font-weight: 600; font-size: 14px; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px; }
.sp-chips .chip { background: var(--bg-2); border-color: transparent; padding: 9px 16px; font-size: 14px; }
.sp-chips .chip:hover { background: var(--p-soft); color: var(--p-ink); text-decoration: none; }
@media (max-width: 899px) { .suggest.is-panel { max-height: 72vh; } }

/* ============================================ Launch-day empty marketplace (Sep 27) === */
/* A fresh production database has no listings: the promo column stands alone and the homepage invites the first seller. */
.split:has(> :only-child) { grid-template-columns: 1fr; }
.split:has(> :only-child) .split-promo { position: static; max-width: 760px; margin: 0 auto; text-align: center; }
.launch-empty { border: 1.5px dashed var(--line-2); border-radius: 20px; background: var(--card); padding: 48px 20px; }
.launch-empty p { max-width: 520px; margin: 0 auto; }

/* ============================================ Buyer Protection checklist (Richard, Sep 28) === */
.bp-checklist { list-style: none; padding: 0; margin: 0 0 12px; }
.bp-checklist li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; }
.bp-checklist .i { color: var(--ok); flex: none; width: 20px; height: 20px; margin-top: 2px; }

/* ============================================ Help centre: collapsible categories + inline search (Richard, Sep 28) === */
.js .faq:not(.is-open) .faq-body { display: none; }
.js .faq:not(.is-open) { margin-bottom: 10px; }
.faq-head { margin: 0 0 8px; }
.faq-toggle { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 16px; font: inherit; font-weight: 700; font-size: 17px; color: var(--ink); cursor: pointer; transition: border-color .15s; }
.faq-toggle:hover { border-color: var(--p); }
.faq-toggle > .i:first-child { color: var(--p); flex: none; }
.faq-toggle small { color: var(--muted); font-weight: 500; font-size: 13px; }
.faq-toggle .faq-chev { margin-left: auto; color: var(--muted); flex: none; transition: transform .2s; }
.faq.is-open .faq-toggle { border-color: var(--p); box-shadow: 0 0 0 3px var(--p-soft); }
.faq.is-open .faq-chev { transform: rotate(180deg); }
.faq-body { padding-top: 8px; }
.help-tile.is-active { border-color: var(--p); background: var(--p-soft); box-shadow: var(--shadow); }
.help-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -14px 0 22px; }
.help-suggest > span { font-size: 13px; color: var(--muted); }
.help-suggest .chip { cursor: pointer; font-weight: 500; padding: 5px 11px; font-size: 13px; }
.help-results { max-width: 820px; margin-bottom: 26px; }
.help-group { margin-bottom: 16px; }
.help-group h3 { font-size: 12.5px; color: var(--muted); margin: 0 0 6px; text-transform: uppercase; letter-spacing: .05em; }
.help-group h3 small { color: var(--faint); font-weight: 600; }
.help-hit { display: block; padding: 11px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: 6px; color: var(--ink); font-weight: 600; }
.help-hit:hover { border-color: var(--p); text-decoration: none; }
.help-none { padding: 34px 16px; }
.help-none .btn-row { justify-content: center; margin-top: 14px; }

/* ============================================ Price slider in the visitor's currency (Richard, Sep 28) === */
.price-range { display: block; }
.price-range-label { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.price-range-label small { color: var(--muted); font-weight: 500; }
.range-track { position: relative; height: 30px; margin: 0 6px 4px; }
.range-track::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 4px; border-radius: 2px; background: var(--line-2); }
.range-fill { position: absolute; top: 13px; height: 4px; border-radius: 2px; background: var(--p); }
.range-track input[type=range] { position: absolute; left: -6px; right: -6px; top: 0; width: calc(100% + 12px); height: 30px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.range-track input[type=range]::-webkit-slider-runnable-track { height: 4px; background: transparent; }
.range-track input[type=range]::-moz-range-track { height: 4px; background: transparent; }
.range-track input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--p); border: 2px solid var(--card); box-shadow: 0 1px 4px rgba(8, 4, 20, .35); margin-top: -7px; cursor: pointer; }
.range-track input[type=range]::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--p); border: 2px solid var(--card); box-shadow: 0 1px 4px rgba(8, 4, 20, .35); cursor: pointer; }
.range-track input[type=range]:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--p-soft); }
.price-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sbadge.is-auth { color: var(--ok); }

/* ============================================ Shoe size scale toggle (Richard, Sep 28) === */
.field-shoes { display: flex; flex-direction: column; gap: 6px; }
.shoe-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; background: var(--card); color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; padding: 4px 9px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line-2); }
.seg button.is-on { background: var(--p); color: #fff; }