* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
}

a { color: var(--accent); }

.container { max-width: var(--container-width, 1280px); margin: 0 auto; padding: 0 20px; }

/* ---------- sticky header (topbar + ticker only stay visible while scrolling — the search bar now scrolls away normally with the page, since on a small phone screen it used to take up half the visible area) ---------- */
.sticky-header-zone {
    position: sticky; top: 0; z-index: 60; background: var(--bg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.sticky-bottom-padding { height: 0.5em; }

/* ---------- header ---------- */
.topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.topbar .container { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; flex-wrap: wrap; }
.logo { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--ink); text-decoration: none; letter-spacing: -0.02em; }
.brand { display: flex; flex-direction: column; line-height: 1.1; }
.version-tag { font-size: 11px; color: var(--muted); font-family: var(--font-mono); }
.nav { display: flex; align-items: center; font-size: 14px; flex-wrap: wrap; }
.nav > * { margin-left: 18px; margin-bottom: 8px; }
.nav > *:first-child { margin-left: 0; }
.nav-toggle {
    display: none; flex-direction: column; justify-content: space-around;
    width: 32px; height: 28px; padding: 0; margin-left: auto;
    background: none; border: none; cursor: pointer;
}
.nav-toggle span { display: block; width: 100%; height: 2px; background: var(--ink); border-radius: 2px; }

/* Mobile nav — collapses behind the hamburger button (#nav-toggle/
   .nav-toggle above) below 720px. These rules are placed *after* the
   base .topbar/.nav rules just above deliberately: two selectors of
   equal specificity resolve by source order regardless of a media
   query, so putting the override earlier (as an initial version of
   this did) would have silently lost to the later, unconditional
   base rule on every matching viewport. */
@media (max-width: 720px) {
    .topbar .container { position: relative; }
    .nav-toggle { display: flex; }
    .nav {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; margin: 0;
        background: var(--bg); border-top: 1px solid var(--border);
        box-shadow: 0 4px 10px rgba(0,0,0,0.08);
        padding: 14px 20px; z-index: 70;
    }
    .nav.nav-open { display: flex; }
    .nav > * { margin-left: 0; margin-bottom: 14px; }
}

@media (max-width: 480px) {
    .topbar { padding: 10px 16px; }
    .version-tag { display: none; }
}

.link-button {
    background: none; border: none; padding: 0; margin: 0; font: inherit;
    color: var(--accent); cursor: pointer; text-decoration: none;
}
.link-button:hover { text-decoration: underline; }
.nav .link-button {
    background: none; border: none; padding: 0; margin: 0; font: inherit;
    color: var(--muted); cursor: pointer; text-decoration: none;
}
.nav .link-button:hover { color: var(--ink); }
.country-picker { display: inline-flex; align-items: center; }
.country-picker .flag { font-size: 16px; margin-right: 4px; }
.country-picker select {
    border: none; background: transparent; color: var(--muted); font-size: 13px;
    width: 78px; margin: 0; padding: 0 4px 0 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.country-lock {
    display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted);
    margin-left: 4px; cursor: pointer;
}
.country-lock input[type="checkbox"] { margin: 0; }
.lang-picker { display: inline-flex; align-items: center; }
.lang-picker select {
    border: none; background: transparent; color: var(--muted); font-size: 13px;
    width: auto; margin: 0; padding: 0 4px 0 0;
}
.nav a { color: var(--muted); text-decoration: none; }
.nav a:hover { color: var(--ink); }

/* ---------- hero ---------- */
.hero { padding: 34px 0 22px; background: var(--hero-bg); }
.hero h1 {
    font-family: var(--font-display); font-weight: var(--display-weight, 700);
    font-size: 30px; margin: 0 0 16px; color: var(--hero-ink, var(--ink)); max-width: 520px; line-height: 1.15;
}

/* ---------- form controls ---------- */
input, select, textarea {
    font: inherit; padding: 10px 12px; border-radius: var(--control-radius, 10px);
    border: 1px solid var(--border-strong); background: var(--field-bg); color: var(--ink);
    width: 100%; margin: 4px 0 12px;
}
/* Checkboxes/radios opt out of the width:100% above — without this, the
   input becomes a full-width box and the browser centers the small
   native checkbox glyph inside it, floating it away from its own label
   instead of sitting right next to it at its normal small size. */
input[type="checkbox"], input[type="radio"] {
    width: auto; padding: 0; margin: 4px 6px 12px 0; vertical-align: middle;
}
label { font-size: 13px; color: var(--muted); }
.helptext {
    display: block; font-style: italic; font-size: 12px; color: var(--muted); margin-top: 4px;
}

/* Form validation errors — Django's own default ul.errorlist output
   (used by {{ form.as_p }} and {{ field.errors }} across every form
   site-wide: registration, login, posting a listing, etc.) rendered
   as plain, easy-to-miss text with no styling at all before this —
   requested directly after someone couldn't tell why their
   registration hadn't gone through. Bold, colored text on a tinted
   background with a left accent bar — deliberately not relying on
   color alone (bold weight + the background box carry the same
   "pay attention" signal), and using the same red already
   established elsewhere in this file for delete/destructive actions
   rather than introducing a new one-off color. */
ul.errorlist {
    list-style: none; margin: 6px 0; padding: 10px 14px;
    background: #FBE7E4; border-left: 4px solid #C0392B; border-radius: 4px;
    color: #C0392B; font-weight: 700; font-size: 13px;
}
ul.errorlist li { margin: 0; }
ul.errorlist li + li { margin-top: 4px; }

button, .btn {
    font: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
    padding: 10px 18px; border-radius: var(--control-radius, 10px); border: 1px solid transparent;
    background: var(--accent); color: var(--on-accent);
    text-decoration: none; display: inline-block;
}
button.secondary, .btn.secondary {
    background: transparent; color: var(--ink); border-color: var(--border-strong);
}

form p { margin: 0 0 10px; }

/* A primary action button paired with a secondary one (e.g. "Verify"
   next to "Resend code") — requested directly after two separate,
   unrelated <form> elements sitting back to back with no spacing
   between them rendered as an overlapping, badly stacked mess. Kept
   as one single <form> with two submit buttons where possible
   (simplest and most robust — see verify_2fa.html/
   verify_registration_phone.html for the formaction trick that lets
   the second button post somewhere else entirely without a second
   <form>); this class just lays out whatever buttons/forms end up
   inside it in a clean row with real spacing between them. */
.button-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.button-row form { display: contents; }

/* ---------- messages / toasts ---------- */
/* Django's messages framework (post-redirect flash messages — "Display
   name updated.", a failed save's error text, etc.). First fix
   (colored, bold, tinted backgrounds instead of a passive "chip"
   look) wasn't the whole story — requested directly as a follow-up:
   floating toast notifications instead of an inline block sitting
   wherever the page's own layout happened to put it (easy to miss if
   that spot isn't where someone's actually looking right after
   clicking Save). Fixed position, top-right, stacking multiple
   messages vertically; entrance/exit animation and the auto-dismiss
   timer live in static/js/toasts.js — this file only positions and
   colors them, and works identically (just without the animation or
   auto-dismiss) if that JS fails to load, since the underlying
   markup is unchanged either way. */
ul.messages {
    position: fixed; top: 16px; right: 16px; z-index: 1000;
    width: min(380px, calc(100vw - 32px));
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
}
ul.messages li {
    position: relative; padding: 12px 36px 12px 14px;
    border-radius: var(--control-radius, 10px);
    background: var(--chip-bg); color: var(--chip-ink); font-size: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    animation: toast-in 0.25s ease-out;
}
ul.messages li.toast-out { animation: toast-out 0.2s ease-in forwards; }
@keyframes toast-in {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
    to { opacity: 0; transform: translateX(24px); }
}
ul.messages li.success {
    background: #E5F5EA; border-left: 4px solid #1E8E3E; color: #1E8E3E; font-weight: 700;
}
ul.messages li.error {
    background: #FBE7E4; border-left: 4px solid #C0392B; color: #C0392B; font-weight: 700;
}
ul.messages li.warning {
    background: #FEF3E0; border-left: 4px solid #B8860B; color: #8A6408; font-weight: 700;
}
ul.messages li .toast-close {
    position: absolute; top: 6px; right: 6px; width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer;
    font-size: 18px; line-height: 1; color: inherit; opacity: 0.55; padding: 0;
}
ul.messages li .toast-close:hover { opacity: 1; }
@media (max-width: 480px) {
    ul.messages { top: 8px; right: 8px; left: 8px; width: auto; }
}

/* ---------- chips ---------- */
.chips { display: flex; padding: 18px 0 6px; flex-wrap: wrap; }
.chips > * { margin: 0 8px 8px 0; }
.chip, a.chip {
    padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 500;
    background: var(--chip-bg); color: var(--chip-ink); border: 1px solid var(--chip-border);
    text-decoration: none; display: inline-block;
}

/* ---------- section label ---------- */
.section-label {
    padding: 22px 0 6px; font-family: var(--font-display); font-weight: 700;
    font-size: 16px; color: var(--ink); text-transform: var(--label-case, none);
    letter-spacing: var(--label-tracking, normal);
}

/* ---------- listing grid & cards ---------- */
.grid { display: flex; flex-wrap: wrap; padding: 10px 0 30px; list-style: none; margin: 0; }
.grid > * { flex: 1 1 220px; margin: 0 16px 16px 0; max-width: 100%; }
@media (min-width: 600px) { .grid > * { max-width: calc(50% - 8px); } }
@media (min-width: 900px) { .grid > * { max-width: calc(33.333% - 11px); } }
@media (min-width: 1200px) { .grid > * { max-width: calc(25% - 12px); } }
.card {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--radius-card, 14px); overflow: hidden; position: relative;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); border-color: var(--border-strong); }
.card .fav-btn {
    position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255,255,255,0.9); color: #666; display: flex; align-items: center; justify-content: center;
    font-size: 15px; border: none; cursor: pointer; text-decoration: none; z-index: 2;
}
.card .fav-btn.favorited { color: #d6316b; }
.card > a { display: block; color: inherit; text-decoration: none; }
.card .photo {
    /* aspect-ratio, not a fixed height — a fixed pixel height meant a
       fixed 220px-wide mobile card (below the 600px breakpoint, .grid
       has no max-width constraint at all, so a card is nearly the
       full viewport width) got the *same* 160px-tall photo box as a
       ~280px desktop card, cropping proportionally far more off the
       top/bottom on a narrow phone specifically — reported directly.
       16/9 keeps roughly the same look this already had at the
       existing 3-4-column desktop widths (where 280px : 160px was
       already close to that ratio), just scaling correctly with the
       card's own actual width at every breakpoint instead of only
       that one. */
    aspect-ratio: 16 / 9; background: var(--photo-bg);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: 11px; color: var(--muted);
    overflow: hidden;
}
.no-photo-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted); }
.no-photo-emblem { width: 34px; height: 34px; opacity: 0.7; color: var(--border-strong); }
.no-photo-label { font-family: var(--font-mono); font-size: 11px; }
.main-photo-frame .no-photo-emblem { width: 56px; height: 56px; }
.main-photo-frame .no-photo-label { font-size: 13px; }
.card .body { padding: 12px 14px 14px; position: relative; }
.card .title { font-size: 14px; font-weight: 600; margin: 0 0 4px; }
.card .meta { font-size: 12px; color: var(--muted); margin: 0 0 10px; }
.card .specs { display: flex; flex-wrap: wrap; margin-bottom: 10px; }
.card .specs > * { margin: 0 6px 6px 0; }
.card .specs span {
    font-family: var(--font-mono); font-size: 10.5px; padding: 3px 7px;
    background: var(--spec-bg); color: var(--spec-ink); border-radius: var(--spec-radius, 5px);
}
.card .foot { display: flex; align-items: center; justify-content: space-between; }
.card .foot > *:first-child { margin-right: 8px; }
.my-listing-status {
    font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em;
}
.my-listing-status.status-active { color: #1E8E5A; }
.my-listing-status.status-expired { color: #B8590A; }
.my-listing-status.status-draft { color: var(--muted); }
.my-listing-status.status-paused { color: #A6740F; }
.card-manage {
    padding: 10px 14px 14px; border-top: 1px solid var(--border);
}
.card-manage-meta { font-size: 12px; color: var(--muted); margin: 0 0 8px; }
.card-manage-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.card-manage-actions a, .card-manage-actions button, .card-manage-actions form {
    font-size: 13px; color: var(--accent); background: none; border: none; padding: 0;
    cursor: pointer; text-decoration: none; font-family: inherit; margin-right: 10px;
}
.card-manage-actions a:hover, .card-manage-actions button:hover { text-decoration: underline; }
.card-manage-actions .card-manage-delete { color: #C0392B; }
.price-tag {
    font-family: var(--font-mono); font-weight: 700; font-size: 14px;
    color: var(--price-ink); background: var(--price-bg); padding: 4px 10px;
    border-radius: var(--price-radius, 6px); position: relative; white-space: nowrap;
}
.card .seller { font-size: 11px; color: var(--muted); }

/* Theme signature: swing-tag price with a punched hole — shared by all
   the light, paper-toned themes (Daylight Market and the newer palette
   candidates), since it reads well against any of their light card backgrounds. */
[data-theme="daylight"] .price-tag,
[data-theme="harbor"] .price-tag,
[data-theme="meadow"] .price-tag,
[data-theme="zest"] .price-tag,
[data-theme="clay"] .price-tag {
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%); padding-left: 16px;
}
[data-theme="daylight"] .price-tag::before,
[data-theme="harbor"] .price-tag::before,
[data-theme="meadow"] .price-tag::before,
[data-theme="zest"] .price-tag::before,
[data-theme="clay"] .price-tag::before {
    content: ""; position: absolute; left: 5px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 3px; border-radius: 50%; background: var(--price-ink); opacity: 0.5;
}

/* Theme signature: Spec Sheet — perforated ticket-stub edge on cards */
[data-theme="specsheet"] .card .body::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background-image: repeating-linear-gradient(90deg, var(--border-strong) 0 5px, transparent 5px 10px);
}
[data-theme="specsheet"] .card { border-radius: 4px; }

/* ---------- ticker → decorative accent line (Night Exchange signature) ---------- */
.ticker { display: none; height: 3px; background: var(--ticker-ink); opacity: 0.7; }
[data-theme="night"] .ticker, [data-theme="midnight"] .ticker, [data-theme="obsidian"] .ticker, [data-theme="carbon"] .ticker { display: block; }

/* ---------- theme switcher ---------- */
.theme-switcher { display: flex; align-items: center; flex-wrap: wrap; }
.theme-switcher > * { margin-right: 6px; margin-bottom: 6px; }
.theme-switcher button {
    background: var(--chip-bg); color: var(--chip-ink); border: 1px solid var(--chip-border);
    font-size: 12px; font-weight: 500; padding: 6px 10px;
}
.theme-switcher button[aria-current="true"] { border-color: var(--accent); color: var(--ink); }

/* ---------- footer ---------- */
.site-footer { padding: 20px 0 30px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); margin-top: 20px; }

/* ---------- plain lists (chat, ratings, generic) ---------- */
.plain-list { list-style: none; padding: 0; margin: 0; }
.plain-list li { padding: 10px 0; border-bottom: 1px solid var(--border); }
.conversation-last-date { color: var(--muted); font-size: 12px; margin-left: 8px; }

/* ---------- pagination ---------- */
.pagination { display: flex; align-items: center; padding: 16px 0; font-size: 13px; color: var(--muted); }
.pagination > * { margin-right: 10px; }
.pagination a { color: var(--accent); text-decoration: none; }
.load-more-link {
    display: inline-block; padding: 10px 20px; border: 1px solid var(--border-strong);
    border-radius: var(--control-radius, 10px); font-weight: 500;
}

/* ================= Homepage ================= */

.cta-button {
    background: #E8891F; color: #fff; font-weight: 700;
    padding: 10px 18px; border-radius: var(--control-radius, 10px); text-decoration: none;
    display: inline-flex; align-items: center; white-space: nowrap;
}
.cta-button:hover { background: #D67A15; }

/* Empty-category fallback (no listings yet, or none matching the
   current filters) — "be the first to post" + related categories
   that do have listings, instead of a bare "no results" dead end.
   Particularly relevant for a brand-new site where this is the
   common case, not the exception. */
.empty-category-state {
    list-style: none; text-align: center; padding: 40px 20px;
    background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--control-radius, 10px);
}
.related-categories-list {
    list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
    gap: 8px; padding: 0; margin: 12px 0 0;
}
.related-categories-list li a {
    display: inline-block; padding: 6px 14px; border: 1px solid var(--border);
    border-radius: 999px; text-decoration: none; color: var(--ink); font-size: 13px;
}
.related-categories-list li a:hover { background: var(--card-bg-hover, var(--card-bg)); }
.promote-nudge {
    border: 1px solid #F0B429; box-shadow: 0 0 0 3px rgba(240,180,41,0.15);
}
.promote-nudge-hint { text-align: center; font-size: 12px; color: var(--muted); margin: 6px 0 0; }

.search-row {
    display: flex; flex-wrap: wrap; background: var(--card-bg); border: 1px solid var(--border-strong);
    border-radius: var(--control-radius, 10px); overflow: hidden; margin: 18px 0;
}
.header-spacer { height: 1.2em; }
.search-row input, .search-row select {
    border: none; border-radius: 0; margin: 0; background: transparent;
    border-right: 1px solid var(--border); flex: 1 1 160px;
}
.search-row input:focus, .search-row select:focus { outline: none; }
.search-row .kw { flex: 2 1 220px; }
.search-row .cat { flex: 1 1 160px; }
.search-row .loc { flex: 1 1 120px; border-right: none; }
.search-row button { border-radius: 0; flex: 1 1 100px; }

.category-nav { display: flex; justify-content: center; padding: 6px 0 18px; overflow-x: auto; border-bottom: 1px solid var(--border); }
.category-nav a {
    display: flex; flex-direction: column; align-items: center;
    color: var(--muted); text-decoration: none; font-size: 12px; white-space: nowrap; flex-shrink: 0;
    margin-right: 24px;
}
.category-nav a:last-child { margin-right: 0; }
.category-nav a svg { margin-bottom: 4px; }
.category-nav a:hover, .category-nav a.active { color: var(--ink); }
.category-nav svg { color: var(--accent); }

.home-tabs { display: flex; border-bottom: 1px solid var(--border); margin-top: 18px; }
.home-tabs a { margin-right: 26px; }
.home-tabs a {
    padding: 10px 2px 12px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px;
    border-bottom: 2px solid transparent;
}
.home-tabs a.active { color: var(--ink); border-bottom-color: var(--accent); }

.sidebar-layout { display: flex; align-items: flex-start; }
.sidebar-layout .sidebar { flex: 0 0 240px; margin-right: 32px; }
.sidebar-layout .main { flex: 1 1 auto; min-width: 0; }
@media (max-width: 720px) { .sidebar-layout { flex-direction: column; } .sidebar-layout .sidebar { flex-basis: auto; margin-right: 0; margin-bottom: 24px; width: 100%; } }

.filter-form h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 10px; }
.filter-form label { display: block; margin-top: 12px; }
.filter-form input, .filter-form select { margin: 4px 0 0; }
.filter-form button { width: 100%; margin-top: 14px; }

/* "Notify me" category toggle, in the sidebar right under the filter
   form — moved here and shortened (was a long-text pill sitting above
   the filters entirely) after direct feedback that its original
   position/shape looked out of place. Full-width to match the
   filter's own Search button above it, rather than pinning a specific
   border-radius here — this site's several themes each set their own
   --control-radius, and a hardcoded override would only look
   consistent in whichever theme it was eyeballed against. */
.notify-toggle { margin-top: 14px; }
.notify-toggle form button { width: 100%; }
.notify-toggle p { margin: 0; }

.sidebar-block { margin-bottom: 26px; }
.sidebar-block h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 10px; }
.sidebar-block ul { list-style: none; margin: 0; padding: 0; }
.sidebar-block li { margin-bottom: 9px; font-size: 14px; }
.sidebar-block a { color: var(--ink); text-decoration: none; }
.sidebar-block a:hover { color: var(--accent); }
.sidebar-block .hint { display: block; font-size: 12px; color: var(--muted); }

.home-section { margin: 26px 0; }
.home-section .section-head { display: flex; align-items: baseline; justify-content: space-between; }
.home-section .section-head a { font-size: 13px; color: var(--accent); text-decoration: none; }

.carousel { display: flex; flex-wrap: wrap; }
.carousel > * { flex: 1 1 180px; margin: 0 14px 14px 0; max-width: 100%; }
@media (min-width: 600px) { .carousel > * { max-width: calc(50% - 7px); } }
@media (min-width: 900px) { .carousel > * { max-width: calc(33.333% - 10px); } }
@media (min-width: 1200px) { .carousel > * { max-width: calc(25% - 11px); } }
.mini-card {
    display: block; background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--radius-card, 14px); overflow: hidden; text-decoration: none; color: inherit; position: relative;
}
.mini-card .photo { aspect-ratio: 16 / 9; }
.mini-card .fav-btn {
    position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255,255,255,0.9); color: #666; display: flex; align-items: center; justify-content: center;
    font-size: 15px; border: none; cursor: pointer; text-decoration: none; z-index: 2;
}
.mini-card .fav-btn.favorited { color: #d6316b; }
.mini-card .body { padding: 10px 12px 12px; }
.mini-card .title { font-size: 13px; font-weight: 600; margin: 0 0 4px; color: var(--ink); line-height: 1.3; }
.mini-card .meta { font-size: 11px; color: var(--muted); margin: 0 0 6px; }
.mini-card .price-tag { font-size: 13px; }

/* ---------- listing detail: breadcrumb + two-column layout ---------- */
.breadcrumb-bar { display: flex; align-items: center; margin: 16px 0; }
.back-btn {
    border: 1px solid var(--border-strong); border-radius: var(--control-radius, 10px);
    padding: 8px 16px; margin-right: 18px; color: var(--ink); text-decoration: none; font-size: 14px;
    background: var(--card-bg); flex-shrink: 0;
}
.breadcrumb { font-size: 13px; color: var(--muted); }
.breadcrumb a { color: var(--accent); text-decoration: none; margin-right: 4px; }
.breadcrumb span { margin-left: 4px; }

.listing-layout { display: flex; flex-wrap: wrap; align-items: flex-start; }
.listing-media { flex: 2 1 480px; margin-right: 32px; min-width: 0; }
.listing-side { flex: 1 1 260px; min-width: 260px; }

.main-photo-frame {
    position: relative; height: 420px; background: var(--photo-bg);
    border-radius: var(--radius-card, 14px); overflow: hidden; cursor: zoom-in;
    display: flex; align-items: center; justify-content: center;
}
.main-photo-frame.empty { color: var(--muted); font-size: 14px; cursor: default; }
.main-photo-frame img { width: 100%; height: 100%; object-fit: contain; }
.media-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,0.35); color: #fff; border: none; width: 38px; height: 38px;
    border-radius: 50%; font-size: 20px; cursor: pointer;
}
.media-nav:hover { background: rgba(0,0,0,0.55); }
.media-prev { left: 12px; }
.media-next { right: 12px; }
.media-counter {
    position: absolute; bottom: 10px; left: 10px; background: rgba(0,0,0,0.55); color: #fff;
    font-size: 12px; padding: 3px 10px; border-radius: 999px;
}
.thumb-strip { display: flex; flex-wrap: wrap; margin-top: 10px; }
.thumb-strip .thumb {
    width: 80px; height: 60px; object-fit: cover; margin: 0 8px 8px 0; cursor: pointer;
    border-radius: 8px; border: 2px solid transparent; opacity: 0.75;
}
.thumb-strip .thumb.active { border-color: var(--accent); opacity: 1; }

.listing-side h1 { font-size: 22px; margin: 0 0 10px; }
.detail-title-row { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.detail-title-row h1 { flex: 1 1 auto; margin-right: 12px; }
.detail-title-row .promoted-badge {
    position: static; display: inline-block; align-self: center;
}
.detail-fav .fav-btn {
    position: static; width: 36px; height: 36px; background: var(--card-bg);
    border: 1px solid var(--border-strong); font-size: 18px; flex-shrink: 0;
}
.price-tag.big { font-size: 22px; padding: 8px 16px; display: inline-block; margin-bottom: 16px; }
.seller-box { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 14px 0; margin-bottom: 16px; }
.seller-name { font-weight: 600; }
.seller-meta { display: block; font-size: 13px; color: var(--muted); text-decoration: none; margin-top: 2px; }
.views-count { font-size: 12px; color: var(--muted); margin-top: 14px; }
.listing-description { margin-top: 26px; max-width: 720px; }
.translation-note { font-size: 12px; color: var(--muted); font-style: italic; }
.ad-slot { margin: 20px 0; text-align: center; }
.promoted-badge {
    position: absolute; top: 8px; left: 8px; background: var(--accent); color: var(--on-accent);
    font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; z-index: 2;
}
.verified-badge {
    display: inline-block; background: #1E8E5A; color: #fff; font-size: 11px; font-weight: 700;
    padding: 2px 8px; border-radius: 999px; vertical-align: middle;
}
.unread-badge {
    display: inline-block; background: #d6316b; color: #fff; font-size: 11px; font-weight: 700;
    min-width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 999px; padding: 0 4px;
}
.car-fields {
    border: 1px solid var(--border-strong); border-radius: var(--radius-card, 14px);
    padding: 4px 16px 16px; margin: 16px 0; background: var(--card-bg);
}
.local-only-badge {
    display: inline-block; font-size: 12px; color: var(--muted); margin-top: 6px;
}
.car-fields legend { font-weight: 700; font-size: 15px; padding: 0 6px; }
.spec-badges { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 8px; }
.spec-badges span {
    font-size: 11px; color: var(--muted); background: var(--hero-bg); border-radius: 999px;
    padding: 2px 8px; margin: 0 4px 4px 0;
}
.specs-table { border-collapse: collapse; margin: 12px 0; }
.specs-table td { padding: 4px 16px 4px 0; font-size: 14px; }
.specs-table td:first-child { color: var(--muted); }

.data-table { border-collapse: collapse; margin: 12px 0; width: 100%; max-width: 720px; }
.data-table th, .data-table td { padding: 8px 16px 8px 0; font-size: 14px; text-align: left; border-bottom: 1px solid var(--border-strong); }
.data-table th { color: var(--muted); font-weight: 600; }

/* ---------- social login buttons ---------- */
.social-login { display: flex; flex-wrap: wrap; margin: 16px 0; }
.social-login form { flex: 1 1 200px; margin: 0 10px 10px 0; }
.social-btn {
    display: block; width: 100%; text-align: center; padding: 10px 16px;
    border-radius: var(--control-radius, 10px); border: 1px solid var(--border-strong);
    font-weight: 600; font-size: 14px; color: var(--ink); background: var(--card-bg); cursor: pointer;
}
.social-btn:hover { border-color: var(--accent); }
.or-divider { color: var(--muted); font-size: 13px; margin: 4px 0 16px; }

/* ---------- photo upload dropzone + previews ---------- */
.photo-dropzone {
    display: block; border: 2px dashed var(--border-strong); border-radius: var(--radius-card, 14px);
    padding: 24px 16px; text-align: center; color: var(--muted); font-size: 14px;
    cursor: pointer; margin: 8px 0; background: var(--card-bg);
}
.photo-dropzone.dragover { border-color: var(--accent); color: var(--ink); background: var(--hero-bg); }
.photo-count-hint { display: block; font-size: 13px; color: var(--muted); margin: 6px 0; }
.photo-preview-grid { display: flex; flex-wrap: wrap; margin: 10px 0; }
.photo-preview-item {
    position: relative; width: 90px; height: 90px; margin: 0 8px 8px 0;
    border-radius: 8px; overflow: hidden; border: 1px solid var(--border);
}
.photo-preview-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-remove-btn {
    position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%;
    background: rgba(0,0,0,0.6); color: #fff; border: none; font-size: 14px; line-height: 1; cursor: pointer;
}
.photo-remove-btn:hover { background: rgba(0,0,0,0.85); }

@media (max-width: 720px) {
    .listing-layout { flex-direction: column; }
    .listing-media, .listing-side { flex-basis: auto; margin-right: 0; min-width: 0; }
}

.gallery-overlay {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.92); z-index: 1000;
    display: flex; align-items: center; justify-content: center;
}
.gallery-overlay img {
    max-width: 85vw; max-height: 85vh; object-fit: contain; border-radius: 6px;
}
.gallery-back {
    position: absolute; top: 18px; left: 18px; z-index: 1001;
    background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.3);
    padding: 8px 16px; border-radius: 999px; font-size: 14px; cursor: pointer;
}
.gallery-back:hover { background: rgba(255,255,255,0.25); }
.gallery-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 1001;
    background: rgba(255,255,255,0.15); color: #fff; border: none; width: 48px; height: 48px;
    border-radius: 50%; font-size: 26px; line-height: 1; cursor: pointer;
}
.gallery-nav:hover { background: rgba(255,255,255,0.3); }
.gallery-prev { left: 18px; }
.gallery-next { right: 18px; }
.gallery-counter {
    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
    color: #fff; font-size: 13px; background: rgba(0,0,0,0.4); padding: 4px 12px; border-radius: 999px;
}

/* ---------- support chat widget ---------- */
.support-chat-toggle {
    position: fixed; right: 20px; bottom: 20px; z-index: 1000;
    width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--accent); color: var(--on-accent); font-size: 22px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}
.scroll-to-top {
    position: fixed; left: 20px; bottom: 20px; z-index: 1000;
    width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--card-bg); color: var(--ink); border: 1px solid var(--border-strong);
    font-size: 20px; line-height: 1; box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}
.support-chat-panel {
    position: fixed; right: 20px; bottom: 84px; z-index: 1000;
    width: 320px; max-height: 440px; display: none; flex-direction: column;
    background: var(--card-bg); border: 1px solid var(--border-strong); border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.22); overflow: hidden;
}
.support-chat-panel.open { display: flex; }
.support-chat-header {
    padding: 10px 14px; font-weight: 600; font-size: 14px; color: var(--on-accent);
    background: var(--accent);
}
.support-chat-messages { flex: 1; overflow-y: auto; padding: 10px 12px; font-size: 13px; }
.support-chat-msg { margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; max-width: 85%; line-height: 1.4; }
.support-chat-msg-visitor { background: var(--accent); color: var(--on-accent); margin-left: auto; }
.support-chat-msg-assistant { background: var(--hero-bg); color: var(--ink); margin-right: auto; }
.support-chat-typing { opacity: 0.6; }
.support-chat-form { display: flex; border-top: 1px solid var(--border-strong); }
.support-chat-form input {
    flex: 1; border: none; padding: 10px 12px; font-size: 13px; background: var(--field-bg); color: var(--ink);
}
.support-chat-form button {
    border: none; background: var(--accent); color: var(--on-accent); padding: 0 16px; cursor: pointer; font-size: 13px;
}