@view-transition { navigation: auto; }

/* ============================================================================
   Naijack.com - global stylesheet
   Adaptive automotive marketplace theme: Naijack green for ordinary
   actions, restrained gold for premium value, and paired daylight/dark
   surfaces. One
   shared stylesheet for every public page. Fraunces (a characterful serif)
   carries headings and prices; Inter carries body copy.
   ============================================================================ */

:root {
    color-scheme: dark;
    --bg: #07100C;
    --surface: #0D1712;
    --surface-2: #142019;
    --surface-hover: #1A2A21;
    --border: rgba(41, 201, 121, 0.16);
    --border-strong: rgba(41, 201, 121, 0.34);
    --text-primary: #F2F6F3;
    --text-secondary: #AAB7B0;
    --text-muted: #829087;
    --primary: #29C979;
    --primary-hover: #45D990;
    --primary-rgb: 41 201 121;
    --premium: #D6B45F;
    --premium-bright: #E5CA82;
    /* Compatibility aliases while components migrate to semantic names. */
    --gold: var(--primary);
    --gold-bright: var(--primary-hover);
    --gold-glow: rgba(0, 0, 0, 0.35);
    --blue: #3FA9F5;
    --blue-bright: #7cc4f8;
    --blue-glow: rgba(0, 0, 0, 0.35);
    --success: #3FAE6A;
    --danger: #E0554A;
    --danger-surface: #B83A32;
    --radius: 8px;
    --radius-sm: 6px;
    --bg-glow-1: transparent;
    --bg-glow-2: transparent;
    --on-accent: #04130B;
    --tier-starter: #8C93A6;
    --tier-pro: var(--premium);
    --tier-elite: #8A3540;
    --tier-enterprise: #7C5CC7;
    --tier-boost: #4C7A5E;
    --tier-spotlight: var(--blue);
    --shadow-card: 0 14px 34px rgba(0, 0, 0, .18);
    --shadow-card-hover: 0 22px 48px rgba(0, 0, 0, .26);

    /* Shared motion language: every new transition/animation in this file
       references these instead of inventing its own duration/easing, so
       hover states, entrances, and loads all feel like one coordinated
       system rather than isolated effects. */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --motion-fast: 0.18s;
    --motion-base: 0.3s;
    --motion-slow: 0.5s;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================================
   Interaction layer: scroll-reveal, native page-transition polish, custom
   scrollbar/focus ring, and toast feedback. Everything here is progressive
   enhancement — .reveal is only ever added by JS (see main.js), so a page
   with JS disabled or failing never ends up with hidden content, and the
   reduced-motion override above already neutralizes all of it for anyone
   who asked for that.
   ============================================================================ */

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out);
}
.reveal.reveal-in { opacity: 1; transform: none; }

::view-transition-old(root) {
    animation: naijack-fade-out var(--motion-base) var(--ease-out) both;
}
::view-transition-new(root) {
    animation: naijack-fade-in var(--motion-base) var(--ease-out) both;
}
@keyframes naijack-fade-out {
    to { opacity: 0; transform: scale(0.99) translateY(6px); }
}
@keyframes naijack-fade-in {
    from { opacity: 0; transform: scale(0.99) translateY(-6px); }
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
    background: var(--surface-2);
    border: 2px solid var(--bg);
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
html { scrollbar-color: var(--surface-2) var(--bg); scrollbar-width: thin; }

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 2px;
}

.naijack-toast-stack {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    pointer-events: none;
    width: 100%;
    padding: 0 20px;
}
.naijack-toast {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
    font-size: 13.5px;
    font-weight: 500;
    padding: 10px 16px;
    border-radius: 999px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.5);
    opacity: 0;
    transform: translateY(10px) scale(0.97);
    transition: opacity var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out);
    max-width: 420px;
    text-align: center;
}
.naijack-toast.is-visible { opacity: 1; transform: none; }
.naijack-toast-success { border-color: rgba(63, 174, 106, 0.4); }
.naijack-toast-success::before { content: '\2713  '; color: var(--success); }

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background:
        radial-gradient(circle at 12% 0%, var(--bg-glow-1), transparent 30%),
        radial-gradient(circle at 90% 8%, var(--bg-glow-2), transparent 25%),
        var(--bg);
    color: var(--text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Fraunces', 'Georgia', serif;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 0.5em 0;
}

/* Plain, un-classed h1/h2/h3 (page titles like "Support Tickets", a listing's
   own title, "Welcome back, Chidi") otherwise fall through to the browser's
   own default sizing — 2em/1.5em/1.17em, i.e. ~32px/24px/19px at the 16px
   base — which reads oversized and heavy on a phone, especially a long
   listing title wrapping to two or three lines. This only touches the bare
   element selector (specificity 0,0,1), so every existing more-specific
   override already in this file (.hero h1, .section-head h2, .auth-card h1,
   etc.) still wins regardless of source order and continues to size itself
   exactly as already tuned. */
@media (max-width: 480px) {
    h1 { font-size: 22px; }
    h2 { font-size: 18px; }
    h3 { font-size: 16px; }
}

p { margin: 0 0 1em 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

.container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }

/* ---------------------------------------------------------------------- */
/* Buttons                                                                  */
/* ---------------------------------------------------------------------- */

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 3px;
    border: 1px solid transparent;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14.5px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }

/* A single light sheen sweeps across a filled CTA on hover, the kind of
   detail that reads as "considered" rather than a stock button. Confined to
   filled buttons only (gold/blue/whatsapp) — ghost/outline buttons have no
   fill for a sheen to play against. */
.btn-gold::before, .btn-blue::before, .btn-whatsapp::before, .btn-enterprise::before {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 40%; height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-20deg);
    transition: left var(--motion-slow) var(--ease-out);
    pointer-events: none;
}
.btn-gold:hover::before, .btn-blue:hover::before, .btn-whatsapp:hover::before, .btn-enterprise:hover::before { left: 130%; }

.btn-gold {
    background: linear-gradient(135deg, var(--gold), var(--gold-bright));
    color: var(--on-accent);
    box-shadow: 0 12px 30px var(--gold-glow);
}
.btn-gold:hover { box-shadow: 0 16px 36px var(--gold-glow); }

.btn-blue {
    background: linear-gradient(135deg, var(--blue), var(--blue-bright));
    color: var(--on-accent);
    box-shadow: 0 12px 30px var(--blue-glow);
}
.btn-blue:hover { box-shadow: 0 16px 36px var(--blue-glow); }

.btn-enterprise {
    background: linear-gradient(135deg, var(--tier-enterprise), #A688E8);
    color: #fff;
    box-shadow: 0 12px 30px rgba(124, 92, 199, 0.4);
}
.btn-enterprise:hover { box-shadow: 0 16px 36px rgba(124, 92, 199, 0.5); }

.btn-outline {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text-primary);
}
.btn-outline:hover { border-color: var(--gold); background: rgba(201, 165, 92, 0.06); }

.btn-ghost {
    background: var(--surface-2);
    color: var(--text-secondary);
}
.btn-ghost:hover { color: var(--text-primary); background: var(--surface-hover); }

.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-block { width: 100%; }

.btn-whatsapp {
    background: linear-gradient(135deg, #22c35e, #1da851);
    color: #fff;
    box-shadow: 0 12px 30px rgba(34, 195, 94, 0.28);
}
.btn-whatsapp:hover { box-shadow: 0 16px 36px rgba(34, 195, 94, 0.36); }

/* ---------------------------------------------------------------------- */
/* Site-wide announcement bar (CPI-C2 minimal CMS)                         */
/* ---------------------------------------------------------------------- */

.site-announcement-bar {
    background: var(--gold);
    color: #14100A;
    font-size: 0.85rem;
    text-align: center;
    padding: 8px 16px;
}
.site-announcement-bar-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    max-width: 1100px;
    margin: 0 auto;
}
.site-announcement-bar-item + .site-announcement-bar-item {
    margin-top: 6px;
}
.site-announcement-bar-item a {
    color: #14100A;
    text-decoration: underline;
    font-weight: 600;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------- */
/* Header / nav                                                            */
/* ---------------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(7, 8, 13, 0.82);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    padding-top: env(safe-area-inset-top);
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
    gap: 24px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Fraunces', 'Georgia', serif;
    font-weight: 700;
    font-size: 21px;
    letter-spacing: -0.01em;
}
.brand .brand-mark {
    width: 34px; height: 34px;
    border-radius: 3px;
    background: linear-gradient(135deg, var(--gold), var(--gold-bright));
    display: flex; align-items: center; justify-content: center;
    color: var(--on-accent); font-weight: 800; font-size: 16px;
}
.brand .brand-jack { color: var(--gold); }

.main-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 0 0 auto;
}
.main-nav a {
    position: relative;
    color: var(--text-secondary);
    font-size: 14.5px;
    font-weight: 500;
    transition: color 0.2s ease;
    padding-bottom: 3px;
}
.main-nav a:hover, .main-nav a.active { color: var(--text-primary); }
.main-nav a::after {
    content: '';
    position: absolute;
    left: 0; right: 100%;
    bottom: 0;
    height: 1.5px;
    background: linear-gradient(90deg, var(--gold), var(--gold-bright));
    transition: right var(--motion-base) var(--ease-out);
}
.main-nav a:hover::after, .main-nav a.active::after { right: 0; }

/* Homepage only: the header's search box normally hides entirely here
   (the hero has its own), but hiding it for the WHOLE page means a
   visitor who scrolls past the hero loses search access until they
   scroll back up. Instead it starts hidden and fades in the moment
   .site-header gets .search-revealed (main.js, comparing scroll position
   against #homeHeroSearch). The header's category nav (.main-nav) shares
   this exact same class/trigger (see includes/header.php) - both are
   hidden while the hero and its own category directory are in view, and
   fade in together once scrolled past it, for guests and logged-in users
   alike. */
.header-search-scroll-reveal { opacity: 1; visibility: visible; pointer-events: auto; }

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Dashboard pages render no shared top header bar at all: the sidebar
   (.dash-nav, brand box at its own top via .dash-nav-brand) and this
   topbar are siblings placed side by side by .dash-layout's grid, so the
   logo and the page title sit at the same visual row instead of the
   title floating alone in a full-width bar disconnected from the sidebar
   below it. */
.dash-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 6px 0 16px;
    border-bottom: 1px solid var(--border);
    box-sizing: border-box;
}
.dash-topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.dash-topbar-heading {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
/* P1.9 (feedback:8/9/10): dashboard content's own top-level <h1>
   ("Welcome back, {name}") had no explicit size, falling through to the
   browser's ~32px h1 default while .dash-topbar-title sat right above it
   at a deliberate 24px - two very differently-sized "h1"s stacked on one
   page. Defines a clear 3-tier scale instead: 26px page h1 > 24px topbar
   title/.section-head h2 (unchanged) > 15px .dash-panel/.focus-panel h3
   (unchanged) - .dash-layout scoping keeps this off every non-dashboard
   page's own h1 sizing. */
.dash-layout h1 { font-size: 26px; }
/* Owner direction (live): mobile fonts across the dashboard shell
   generally read too large, carried straight over from desktop sizing
   instead of stepping down the way .section-head h2/.storefront-name
   already do. This h1 is the single biggest offender by reach - it's
   the page heading on every one of the ~30 dashboard-shell pages this
   session gave the sidebar (Post an Ad, Post a Request, My Ads,
   Financing Inquiries, Verification, ...), not just the dashboard
   itself. */
@media (max-width: 480px) {
    .dash-layout h1 { font-size: 21px; }
}
.dash-topbar-title {
    font-family: 'Fraunces', 'Georgia', serif;
    font-weight: 600;
    font-size: 24px;
    color: var(--text-primary);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* .header-search-form (shared with includes/header.php) already sets
   flex:1 1 260px/max-width:420px/height:40px - just needs order:2 so it
   sits between .dash-topbar-left and .dash-topbar-right regardless of
   how .dash-topbar-left's own width varies (with vs. without a title). */
.dash-topbar-search { order: 2; }
.dash-topbar-left { order: 1; }
.dash-topbar-right { order: 3; }
.dash-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-left: auto;
}

:root[data-theme="light"] {
    color-scheme: light;
    --bg: #E7ECE9;
    --surface: #FFFFFF;
    --surface-2: #F4F7F5;
    --surface-hover: #EAF1ED;
    --border: rgba(20, 52, 36, 0.12);
    --border-strong: rgba(8, 122, 69, 0.36);
    --text-primary: #142019;
    --text-secondary: #526159;
    --text-muted: #69776F;
    --primary: #087A45;
    --primary-hover: #06663A;
    --primary-rgb: 8 122 69;
    --premium: #916817;
    --premium-bright: #765311;
    --gold-glow: rgba(8, 122, 69, 0.16);
    --blue: #1769AA;
    --blue-bright: #0D568F;
    --success: #087A45;
    --danger: #B42318;
    --danger-surface: #A1261D;
    --on-accent: #FFFFFF;
    --bg-glow-1: rgba(8, 122, 69, 0.055);
    --bg-glow-2: rgba(8, 122, 69, 0.035);
    --shadow-card: 0 1px 2px rgba(20, 32, 25, .06), 0 12px 30px rgba(20, 32, 25, .09);
    --shadow-card-hover: 0 2px 5px rgba(20, 32, 25, .07), 0 20px 42px rgba(20, 32, 25, .14);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        color-scheme: light;
        --bg: #E7ECE9; --surface: #FFFFFF; --surface-2: #F4F7F5; --surface-hover: #EAF1ED;
        --border: rgba(20, 52, 36, 0.12); --border-strong: rgba(8, 122, 69, 0.36);
        --text-primary: #142019; --text-secondary: #526159; --text-muted: #69776F;
        --primary: #087A45; --primary-hover: #06663A; --primary-rgb: 8 122 69;
        --premium: #916817; --premium-bright: #765311; --gold-glow: rgba(8, 122, 69, 0.16);
        --blue: #1769AA; --blue-bright: #0D568F; --success: #087A45;
        --danger: #B42318; --danger-surface: #A1261D; --on-accent: #FFFFFF;
        --shadow-card: 0 1px 2px rgba(20, 32, 25, .06), 0 12px 30px rgba(20, 32, 25, .09);
        --shadow-card-hover: 0 2px 5px rgba(20, 32, 25, .07), 0 20px 42px rgba(20, 32, 25, .14);
    }
}

.skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 10000;
    padding: 10px 14px;
    border: 2px solid var(--gold);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-primary);
    font-weight: 700;
    transform: translateY(-160%);
    transition: transform var(--motion-fast) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }
.impersonation-banner{position:fixed;inset:0 0 auto;z-index:1200;height:44px;display:flex;align-items:center;justify-content:center;gap:12px;padding:7px 16px;background:#8b5a12;color:#fff7df;border-bottom:1px solid #e1b85f;font-size:12px}.impersonation-banner strong{letter-spacing:.06em;text-transform:uppercase}.impersonation-banner form{margin:0}.impersonation-banner button{border:1px solid rgba(255,255,255,.45);border-radius:5px;background:#fff7df;color:#2b1b05;padding:6px 10px;font:inherit;font-weight:800;cursor:pointer}body.is-impersonating{padding-top:44px}body.is-impersonating .site-header,body.is-impersonating .dash-topbar-wrap{top:44px}body.is-impersonating .dash-nav{top:44px}@media(max-width:560px){.impersonation-banner{justify-content:space-between}.impersonation-banner span{display:none}}
/* Top padding + matching top/bottom padding and a border-bottom on
   .dash-topbar (below) line this row's bottom border up with
   .dash-nav-brand's own border-bottom (owner direction, docs/Daily
   Ideas.md: "the demarcation border line after the logo should be the
   same line" as the topbar's) - both sit .dash-nav's own 12px padding
   down from the shared grid row's top edge (align-items:start on
   .dash-layout), then use the same 6px/16px top/bottom spacing so the
   two borders land at the same height even though the sidebar's brand
   box and the page-title row are otherwise very different content. */
/* Sticky (owner caught this live): the classic .site-header this replaced
   for logged-in users was always sticky, keeping the account menu/
   profile icon reachable while scrolling - dash-shell pages lost that
   when they stopped rendering that header at all. z-index above the
   feed content but below the fixed sidebar's own overlay/drawer z-index
   range (998-999) so the mobile drawer still draws on top of it. */
.dash-topbar-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 12px;
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
/* Owner direction (live): once logged in, the non-mobile dashboard
   header shows no page title/breadcrumb - the sidebar's own active-
   item highlight already says where you are, so repeating it here was
   redundant. Mobile is untouched pending the owner's separate mobile
   header design (still promised, not yet given), so .dash-topbar-left
   only disappears at the same >860px breakpoint the hamburger toggle
   button itself already uses.
   Search stays, and now grows to fill the gap that hiding the title
   left behind (owner caught live: hiding both left a large dead strip
   of empty header). Answering the owner's own question directly -
   search over a static title, since it's useful from every dashboard
   page, not just decorative context the sidebar already provides.
   max-width:none overrides .header-search-form's own 420px cap
   (shared with the public site-header's search, which keeps its cap
   unchanged) so this specific instance's existing flex:1 1 260px can
   actually grow into the freed space instead of stopping at 420px. */
.dash-topbar-search { max-width: none; }
@media (min-width: 861px) {
    .dash-topbar-left { display: none; }
}
/* Owner direction (live, two mobile screenshots now - flexbox's own
   line-wrapping heuristics were fought twice and still weren't
   producing the guaranteed [title+icons] / [search] two-row split, so
   this stops trying to coax flex-wrap into the right shape and just
   grid-places every row explicitly instead - deterministic row/column
   assignment, no dependency on hypothetical-size wrap calculations at
   all. 1fr auto gives .dash-topbar-left only whatever's left after
   .dash-topbar-right (icons + button) takes its own natural width, on
   both rows regardless of phone size or title length - title/icon
   cluster ALWAYS share row one, search ALWAYS gets its own row two. */
@media (max-width: 860px) {
    .dash-topbar {
        display: grid;
        grid-template-columns: 1fr auto;
        column-gap: 10px;
        row-gap: 10px;
    }
    .dash-topbar-left {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        overflow: hidden;
    }
    .dash-topbar-right {
        grid-column: 2;
        grid-row: 1;
        margin-left: 0;
    }
    .dash-topbar-search {
        grid-column: 1 / -1;
        grid-row: 2;
        order: initial;
        max-width: none;
    }
    /* Owner direction (live): matched exactly to .dash-nav-link's own
       14px - the same size the page title's own sidebar menu items use
       inside the hamburger drawer - rather than an arbitrarily chosen
       size, so the title reads as visually consistent with the rest of
       the mobile nav chrome it sits next to. Tightened gaps on either
       side so more of the available column-1 width goes to the text
       itself rather than whitespace. Long titles still fall back to
       the existing ellipsis - this only buys more room before that
       kicks in, it doesn't remove the safety net. */
    .dash-topbar-title { font-size: 14px; }
    .dash-topbar-left { gap: 8px; }
    .dash-topbar-right { gap: 8px; }
    .dash-topbar #dashNavToggle,
    .dash-topbar .admin-topbar-action,
    .dash-topbar .admin-notification-btn,
    .dash-topbar .user-menu-btn,
    .dash-topbar-right .btn,
    .dash-topbar .qs-submit {
        min-width: 44px;
        min-height: 44px;
    }
}
@media (min-width: 720px) and (max-width: 860px) {
    .dash-topbar {
        grid-template-columns: auto minmax(0, 1fr) auto;
        row-gap: 0;
    }
    .dash-topbar-left { grid-column: 1; grid-row: 1; }
    .dash-topbar-search { grid-column: 2; grid-row: 1; min-width: 0; }
    .dash-topbar-right { grid-column: 3; grid-row: 1; }
}
@media (max-width: 480px) {
    .dash-topbar {
        grid-template-columns: auto minmax(0, 1fr) auto;
        column-gap: 8px;
        row-gap: 0;
        min-height: 52px;
        padding-top: 4px;
        padding-bottom: 4px;
    }
    .dash-topbar-left { grid-column: 1; grid-row: 1; overflow: visible; }
    .dash-topbar-title { display: none; }
    .dash-topbar-search {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        height: 44px;
        flex-basis: 0;
    }
    .dash-topbar-search .qs-location,
    .dash-topbar-search .qs-divider { display: none; }
    .dash-topbar-right { grid-column: 3; grid-row: 1; }
    .ackin-shell .admin-topbar-action { display: none; }
}
.brand-hide-dash { display: none; }
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
@media (max-width: 860px) {
    .dash-mobile-hide { display: none; }
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 24px;
    cursor: pointer;
}

.notif-bell-wrap { position: relative; }
.notif-bell {
    position: relative;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.notif-bell:hover { color: var(--text-primary); border-color: var(--border-strong); }

.header-dash-toggle {
    display: none;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    width: 38px;
    height: 38px;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
.header-dash-toggle:hover { color: var(--text-primary); border-color: var(--border-strong); }
@media (max-width: 860px) {
    .header-dash-toggle { display: flex; }
}

.notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--gold);
    color: var(--on-accent);
    font-size: 10.5px;
    font-weight: 700;
    min-width: 17px;
    height: 17px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}
.notif-panel { top: calc(100% + 10px); }

/* ---------------------------------------------------------------------- */
/* Header user menu: avatar button + account dropdown panel               */
/* ---------------------------------------------------------------------- */

.user-menu-wrap { position: relative; }
.user-menu-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
}
.user-menu-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fraunces', 'Georgia', serif;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
    transition: border-color 0.2s ease;
}
.user-menu-btn:hover .user-menu-avatar { border-color: var(--gold); }
.user-menu-avatar-lg { width: 44px; height: 44px; font-size: 17px; }
.user-menu-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--border);
}
.user-menu-name { font-weight: 600; font-size: 14px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-role { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.workspace-switch-form { margin: 0; flex: 0 0 auto; }
.workspace-switch {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text-primary);
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.workspace-switch:hover { border-color: var(--gold); background: var(--surface-hover); }
.workspace-switch:active { transform: translateY(1px); }
.workspace-switch-status { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(48, 191, 113, .12); }
.workspace-switch span:not(.workspace-switch-status) { display: grid; line-height: 1.05; }
.workspace-switch small { color: var(--text-muted); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; }
.workspace-switch strong { margin-top: 3px; font-size: 12px; }
.workspace-switch svg { color: var(--gold); }
.workspace-switch-mobile { display: none; color: var(--gold-bright); font: 700 13px/1 Inter, sans-serif; }
.workspace-preview-chip { padding: 7px 10px; border: 1px solid #e1b85f; border-radius: 999px; color: var(--gold-bright); font-size: 11px; font-weight: 700; white-space: nowrap; }
@media (max-width: 620px) {
    .workspace-switch { width: auto; min-width: 72px; height: 40px; justify-content: center; gap: 6px; padding: 0 9px; border-radius: 10px; }
    .workspace-switch span { display: grid; }
    .workspace-switch span small { display: none; }
    .workspace-switch span strong { margin: 0; font-size: 11.5px; }
    .workspace-switch svg { display: block; width: 13px; height: 13px; }
    .workspace-switch-mobile { display: none; }
    .workspace-preview-chip { display: none; }
}
.user-menu-items { padding: 6px; }
.user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
}
.user-menu-item svg { flex-shrink: 0; opacity: 0.75; }
.user-menu-item:hover { background: var(--surface-hover); color: var(--text-primary); }
.user-menu-sep { height: 1px; background: var(--border); margin: 6px 4px; }
.user-menu-danger { color: var(--danger); }
.user-menu-danger:hover { background: rgba(224, 85, 74, 0.08); color: var(--danger); }
.user-menu-item-btn {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}
.user-menu-theme { padding: 10px 12px 8px; }
.user-menu-theme-label {
    display: block;
    margin-bottom: 7px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.theme-choice-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
}
.theme-choice-group button {
    min-height: 34px;
    padding: 6px 7px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font: 600 11px/1.1 'Inter', sans-serif;
}
.theme-choice-group button:hover { color: var(--text-primary); background: var(--surface-hover); }
.theme-choice-group button.is-active,
.theme-choice-group button[aria-pressed="true"] { color: var(--on-accent); background: var(--primary); }
.theme-cycle-btn {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
}
.theme-cycle-btn:hover { color: var(--primary); border-color: var(--border-strong); background: var(--surface-hover); }
.signed-in-theme-toggle { display: inline-grid; }
@media (max-width: 860px) {
    .signed-in-theme-toggle,
    .admin-theme-toggle { display: none; }
}

/* feedback:11 §13: the mobile nav dropdown previously closed only on
   outside-click, with no visible scrim behind it and no way to tell at
   a glance that page content below was inert while it was open - the
   same overlay pattern .dash-nav-overlay already uses. */
.main-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(4, 5, 8, 0.65);
    z-index: 997;
}
.main-nav-overlay.open { display: block; }
@media (max-width: 860px) {
    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--surface);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border-strong);
        box-shadow: 0 24px 40px rgba(0, 0, 0, 0.45);
        z-index: 998;
    }
    .main-nav.open { display: flex; }
    .main-nav a {
        padding: 14px 24px;
        border-bottom: 1px solid var(--border);
        font-size: 15px;
    }
    .main-nav a:last-child { border-bottom: none; }
    .nav-guest-trust, .nav-guest-browse { flex-direction: column; align-items: stretch; gap: 0; }
    .nav-guest-trust a:last-child, .nav-guest-browse a:last-child { border-bottom: none; }
    .nav-toggle { display: block; }
    .header-actions .btn-outline { display: none; }

    /* Not enough room for logo + search + nav-toggle + actions on one
       line, so the search box wraps to a full-width second row instead of
       being cramped or dropped — still the same single search box, just
       repositioned, never a second one appearing elsewhere on the page.
       (The actual .header-search-form sizing override lives further down,
       positioned after the unconditional desktop rule it needs to beat —
       same specificity, so source order decides the winner regardless of
       which media query is narrower.) */
    .site-header .container { flex-wrap: wrap; height: auto; padding: 12px 20px; row-gap: 10px; }
    .brand { order: 1; }
    .header-actions { order: 2; margin-left: auto; }
}

/* ---------------------------------------------------------------------- */
/* Persistent quick search — lives inline in .site-header itself on every */
/* page except the homepage (which keeps its own larger hero search, see  */
/* index.php), so there is exactly one search box per page, never two.    */
/* .header-search-form below re-sizes this same form/markup to fit a      */
/* single header row instead of the old full-width band underneath it.    */
/* ---------------------------------------------------------------------- */

.quick-search-form {
    display: flex;
    align-items: center;
    height: 54px;
    max-width: 720px;
    margin: 0 auto;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 3px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}
.quick-search-form:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-glow);
}

/* Compact, in-header sizing — same form, same fields, just fitted into a
   68px-tall header row alongside the logo/nav/actions instead of its own
   full-width band. flex:1 lets it take up the header's free space, capped
   by max-width so it doesn't crowd out the nav links next to it. (A fixed-
   width version of this was tried and reverted - it broke responsiveness
   on narrower windows since the box could no longer shrink; the owner's
   actual "match the guest's width" request was about the hero search box,
   not this one - see .home-search-view .quick-search-form above.) */
.header-search-form {
    flex: 1 1 260px;
    min-width: 0;
    max-width: 420px;
    height: 40px;
    margin: 0;
}
.header-search-form .qs-location,
.header-search-form select.qs-location { max-width: 96px; font-size: 13px; padding: 0 10px; }
.header-search-form .qs-input { font-size: 13.5px; padding: 0 10px; }
.header-search-form .qs-submit { width: 32px; height: 32px; margin: 4px 5px 4px 2px; }

/* Must come after the desktop .header-search-form rule above: same
   specificity, so whichever is later in the file wins regardless of the
   media query, and this one needs to win on narrow screens. */
@media (max-width: 860px) {
    .header-search-form {
        order: 3;
        flex: 1 1 100%;
        width: 100%;
        max-width: none;
        height: 44px;
    }
}

/* Element-scoped (select.qs-location, not just .qs-location) so this
   never accidentally styles the wrapper div the JS enhancer builds
   around it, which also carries the same class name. */
select.qs-location {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    padding: 0 16px;
    max-width: 150px;
    appearance: none;
    cursor: pointer;
}
/* feedback:11 accessibility sweep: no separate focus ring needed here -
   the parent .quick-search-form already gets a visible gold border +
   glow via :focus-within (below) whenever this select or the adjacent
   .qs-input receives focus, so removing the native outline doesn't
   leave keyboard users without any focus indicator. */
.qs-location:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------------------------------------------------------------------- */
/* Custom-styled dropdowns (replaces the browser's native option list,    */
/* which ignores all theme styling and can't be themed with CSS alone)    */
/* ---------------------------------------------------------------------- */

.custom-select { position: relative; }
.custom-select select { display: none; }

.cs-inline { flex-shrink: 0; max-width: 180px; min-width: 0; height: 100%; }
.cs-inline .cs-trigger { height: 100%; width: 100%; }

.cs-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    padding: 0 16px;
    cursor: pointer;
    white-space: nowrap;
    text-align: left;
}
.cs-trigger svg { flex-shrink: 0; opacity: 0.6; }
.cs-trigger-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-trigger-pin { color: var(--gold); opacity: 1; }
.cs-trigger-pin-pulse { animation: csPinPulse 0.9s ease-out 2; }
@keyframes csPinPulse {
    0% { transform: scale(1); }
    30% { transform: scale(1.35); }
    60% { transform: scale(1); }
    100% { transform: scale(1); }
}

.cs-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 200px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: 3px;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5);
    padding: 6px;
    z-index: 200;
    text-align: left;
}
.cs-option {
    padding: 9px 14px;
    border-radius: 3px;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}
.cs-option:hover { background: var(--surface-hover); color: var(--text-primary); }
.cs-option.selected { color: var(--gold); font-weight: 600; background: rgba(201, 165, 92, 0.08); }

/* Must come after .cs-panel: overrides its default left-anchored position
   to hang from the right edge of the avatar button instead, so it never
   runs off the right side of narrow viewports. */
.user-menu-panel {
    top: calc(100% + 10px);
    right: 0;
    left: auto;
    width: 260px;
    max-width: calc(100vw - 24px);
    padding: 0;
}

/* Boxed variant: any select living inside a standard form field, as
   opposed to the inline pill in the quick-search bar above. */
.form-group .custom-select,
.field .custom-select,
.filter-group .custom-select {
    width: 100%;
}
.form-group .cs-trigger,
.field .cs-trigger,
.filter-group .cs-trigger {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-primary);
    justify-content: space-between;
}
.form-group .cs-trigger:hover,
.field .cs-trigger:hover,
.filter-group .cs-trigger:hover { border-color: var(--border-strong); }
.form-group .custom-select .cs-panel,
.field .custom-select .cs-panel,
.filter-group .custom-select .cs-panel {
    width: 100%;
    left: 0;
}

/* Boxed dropdown sized to its content rather than stretched full-width,
   for selects that live outside a form-group/field/filter-group wrapper
   (browse-page sort control, buyer-requests filter bar, and similar). */
.custom-select.inline-select .cs-trigger {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-primary);
    justify-content: space-between;
    gap: 10px;
}
.custom-select.inline-select .cs-trigger:hover { border-color: var(--border-strong); }
.custom-select.inline-select .cs-panel { left: 0; }
.custom-select.align-right .cs-panel { left: auto; right: 0; }

.qs-divider {
    width: 1px;
    align-self: center;
    height: 22px;
    background: var(--border);
}

.qs-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 14.5px;
    font-family: inherit;
    padding: 0 16px;
}
/* Same reasoning as .qs-location:focus above - .quick-search-form's own
   :focus-within already supplies the visible indicator. */
.qs-input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.qs-input::placeholder { color: var(--text-muted); }

.qs-submit {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    margin: 7px 8px 7px 4px;
    border: none;
    background: none;
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s ease;
}
.qs-submit:hover { color: var(--gold-bright); }
.qs-submit-searching svg { animation: qsMagnifierSearch 1.3s ease-in-out infinite; }
@keyframes qsMagnifierSearch {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-10deg) scale(1.08); }
    75% { transform: rotate(10deg) scale(1.08); }
}

@media (max-width: 560px) {
    .qs-location { max-width: 92px; font-size: 13px; padding: 0 10px; }
    .qs-input { font-size: 14px; padding: 0 10px; }
}

/* ---------------------------------------------------------------------- */
/* Smart search suggestions: recent searches (device-local) + trending    */
/* terms, shown under any .js-smart-search form on focus.                 */
/* ---------------------------------------------------------------------- */

.search-suggest-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5);
    padding: 14px;
    z-index: 150;
    text-align: left;
}
.search-suggest-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 10px 0 8px;
}
.search-suggest-head:first-child { margin-top: 0; }
.search-suggest-sponsored-head {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.search-suggest-sponsored-head small {
    color: var(--text-muted);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: none;
}
.search-suggest-clear {
    background: none;
    border: none;
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    padding: 0;
}
.search-suggest-list { display: flex; flex-direction: column; }
.search-suggest-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 13.5px;
    font-family: inherit;
    text-align: left;
    padding: 8px 6px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.search-suggest-row:hover { background: var(--surface-hover); color: var(--text-primary); }
.search-suggest-row svg { flex-shrink: 0; opacity: 0.6; }
.search-suggest-row span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-suggest-remove {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1;
    padding: 2px 4px;
}
.search-suggest-remove:hover { color: var(--danger); }
.search-suggest-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.search-suggest-pill {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 500;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
}
.search-suggest-pill:hover { border-color: var(--gold); color: var(--gold-bright); }

/* Live as-you-type listing results (feedback:6 item 7) — a real Ad card
   reduced to its essentials for a dropdown row, not the full .ad-card
   component (no room for its gallery/tier-seal chrome at this size). */
.search-suggest-results { display: flex; flex-direction: column; gap: 2px; }
.search-suggest-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: inherit;
}
.search-suggest-result:hover { background: var(--surface-hover); }
.search-suggest-result:focus-visible,
.search-suggest-row:focus-visible,
.search-suggest-pill:focus-visible {
    background: var(--surface-hover);
    outline: 2px solid var(--gold);
    outline-offset: -2px;
}
.search-suggest-sponsored .search-suggest-result {
    background: linear-gradient(90deg, rgba(201,165,92,.055), transparent 75%);
    border: 1px solid transparent;
}
.search-suggest-sponsored .search-suggest-result:hover { border-color: var(--border-strong); }
.search-suggest-result-img {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface);
}
.search-suggest-result-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.search-suggest-result-noimg { display: block; width: 100%; height: 100%; }
.search-suggest-result-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.search-suggest-result-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.search-suggest-result-price {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--gold);
}
/* Muted, not a colored badge — same "context, not urgency" reasoning as
   .ad-card-price-status: a sponsored search result should read as a
   quiet disclosure, not compete visually with genuinely relevant results. */
.search-suggest-result-tier {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}
.search-suggest-empty {
    padding: 16px 6px;
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
}

/* ---------------------------------------------------------------------- */
/* Hero / search                                                           */
/* ---------------------------------------------------------------------- */

.hero {
    padding: 64px 0 40px;
    text-align: center;
    position: relative;
}
.hero h1 {
    font-size: clamp(28px, 3.2vw, 42px);
    max-width: 680px;
    margin: 0 auto 32px;
    text-wrap: balance;
}

.home-search-view {
    padding: 32px 0 40px;
    text-align: center;
}
.home-search-view-inline { padding-top: 56px; }
.home-search-view-head { margin-bottom: 24px; }
.home-search-view-head h1 { font-size: clamp(24px, 3vw, 32px); max-width: 480px; margin: 0 auto 8px; text-wrap: balance; }
/* Matches the guest hero's search box width exactly (the base
   .quick-search-form rule's 720px, unrestricted) - owner explicitly
   asked for logged-in and guest to look identical here; this used to
   cap it narrower at 480px, which was the actual mismatch (a different,
   header-level search box was mistakenly resized instead, since
   reverted). */
.home-search-view .quick-search-form { margin: 0 auto; }
.hero h1 .accent { color: var(--gold); }

/* Always one line, on every device, no wrap fallback: font-size tracks
   the container's actual available width (100vw minus the .container's
   20px side padding) divided by a conservative per-character width
   budget for the headline, so the text can never outgrow its box.
   Capped at 27px so it stays narrower than the 720px search bar it
   sits above once there's room to spare. Divisor recalibrated for the
   current 49-character headline ("Find Trusted Vehicles, Auto Parts &
   Auto Services") — 26 was tuned for the previous 40-character string;
   scaled proportionally (26 * 49/40 ≈ 32) so a future headline-copy
   change just needs the same ratio applied, not a guess.
   Selector is ".hero h1.hero-h1-tight" (not just the class alone) so its
   specificity beats the plain ".hero h1" rule above/below it, including
   its two font-size media queries and the text-wrap:balance that would
   otherwise force this onto two lines regardless of white-space. */
.hero h1.hero-h1-tight {
    font-size: clamp(9px, calc((100vw - 40px) / 32), 27px);
    white-space: nowrap;
    text-wrap: nowrap;
    max-width: none;
}

@media (max-width: 480px) {
    .hero h1 { font-size: 20px; }
}
@media (min-width: 481px) and (max-width: 700px) {
    .hero h1 { font-size: 26px; }
}
.hero-sub {
    color: var(--text-secondary);
    font-size: 17px;
    max-width: 560px;
    margin: 0 auto 36px;
}

.quick-tiles {
    max-width: 720px;
    margin: 18px auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    overflow: hidden;
}
@media (max-width: 700px) {
    .quick-tiles { grid-template-columns: repeat(2, 1fr); }
}
.quick-tile {
    background: var(--surface);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px;
    font-size: 12.5px;
    font-weight: 600;
    transition: background 0.25s ease, color 0.25s ease;
}
.quick-tile span:last-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.quick-tile-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(201, 165, 92, 0.08);
    border: 1px solid var(--border);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, border-color 0.25s ease;
}
.quick-tile-icon svg { width: 15px; height: 15px; }
.quick-tile:hover { background: var(--surface-hover); color: var(--text-primary); }
.quick-tile:hover .quick-tile-icon { background: rgba(201, 165, 92, 0.16); border-color: var(--gold); }

.storefront-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
}
.storefront-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    padding: 12px 4px;
    cursor: pointer;
    margin-right: 20px;
}
.storefront-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
.hero-pill { margin: 0 auto; }

/* Storefront Grid/List toggle (feedback:6 item 2, adapted from the NEW
   project's own toggle — same interaction pattern, OLD's own tokens). */
.storefront-listings-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 16px;
}
.storefront-sort-form { margin: 0; }
.view-toggle {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    flex-shrink: 0;
}
.view-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--surface);
    color: var(--text-muted);
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.view-toggle-btn + .view-toggle-btn { border-left: 1px solid var(--border); }
.view-toggle-btn:hover { background: var(--surface-hover); color: var(--text-secondary); }
.view-toggle-btn.is-active { background: var(--surface-2); color: var(--gold); }
/* Same .listing-grid/.ad-card the grid view already uses — list mode is a
   pure CSS reflow (grid -> flex row), not a second card component, so
   both views always show identical data and never drift out of sync. */
.listing-grid.is-list-view {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.listing-grid.is-list-view .ad-card { flex-direction: row; }
.listing-grid.is-list-view .ad-card-media-wrap { width: 200px; flex-shrink: 0; }
.listing-grid.is-list-view .ad-card-body { justify-content: center; }
/* The avatar's "overlap the photo's bottom edge" offset (see
   .ad-card-seller-avatar-ring) only makes sense when the photo sits
   ABOVE the body — in row layout the photo is beside it instead, so the
   offset is reset to avoid a floating, disconnected-looking avatar. */
.listing-grid.is-list-view .ad-card-seller-avatar-ring { top: 0; margin-bottom: 0; }
@media (max-width: 700px) {
    .listing-grid.is-list-view .ad-card-media-wrap { width: 130px; }
}
@media (max-width: 480px) {
    .listing-grid.is-list-view .ad-card-media-wrap { width: 100px; }
    .listing-grid.is-list-view .ad-card-body { padding: 10px 12px; }
}

select {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-size: 14px;
    font-family: inherit;
    appearance: none;
    cursor: pointer;
}
select:focus { border-color: var(--gold); }
select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.field select, .field input:not([type="checkbox"]):not([type="radio"]) {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-size: 14px;
    font-family: inherit;
    appearance: none;
}
.field select:focus, .field input:focus {
    border-color: var(--gold);
}
.field select:focus-visible, .field input:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}
.field input[type="checkbox"], .field input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--gold);
    cursor: pointer;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------- */
/* Section headings                                                        */
/* ---------------------------------------------------------------------- */

.section { padding: 48px 0; }
.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}
.section-head h2 { font-size: 24px; margin: 0; }
.section-head .see-all { color: var(--gold); font-size: 14px; font-weight: 600; }
/* feedback:11: section headers ("Similar Vehicles", "Seller Leaderboard",
   home page section titles) stayed a fixed 24px from desktop down to a
   360px phone - the one class-based heading override in the codebase
   with no mobile step, unlike every other tuned h1/h2/h3 override. */
@media (max-width: 480px) {
    .section-head h2 { font-size: 19px; }
}

.feed-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 22px;
}
.feed-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    padding: 10px 6px;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color 0.25s ease, border-color 0.25s ease;
}
.feed-tab:hover { color: var(--text-primary); }
.feed-tab.active { color: var(--gold); border-bottom-color: var(--gold); }

.feed-location-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.feed-state-picker {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.feed-state-picker label {
    font-size: 13.5px;
    color: var(--text-secondary);
}

/* ---------------------------------------------------------------------- */
/* Homepage buyer-request demo strip                                     */
/* ---------------------------------------------------------------------- */

.request-demo {
    padding: 56px 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.request-demo-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    margin-top: 36px;
}
.request-demo-step {
    flex: 1;
    max-width: 260px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 24px 20px;
    text-align: center;
}
.request-demo-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), var(--gold-bright));
    color: var(--on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    margin: 0 auto 14px;
}
.request-demo-step h3 {
    font-size: 15.5px;
    margin-bottom: 8px;
    color: var(--text-primary);
}
.request-demo-step p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}
.request-demo-arrow {
    color: var(--border-strong);
    margin-top: 44px;
    flex-shrink: 0;
}
@media (max-width: 900px) {
    .request-demo-steps { flex-direction: column; align-items: center; gap: 0; }
    .request-demo-step { max-width: 360px; width: 100%; }
    .request-demo-arrow { transform: rotate(90deg); margin: 4px 0; }
}
@media (max-width: 480px) {
    .request-demo { padding: 40px 0; }
    .request-demo-step { padding: 20px 16px; }
}

/* ---------------------------------------------------------------------- */
/* Ad card, the flagship component                                       */
/* ---------------------------------------------------------------------- */

.listing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 22px;
}

/* Two cards side by side across the whole mobile/tablet range, matching
   how Jiji's own grid behaves rather than the single-column collapse the
   auto-fill minmax above would otherwise produce between roughly
   480-860px. Only drop to a single column on genuinely small/old devices. */
@media (max-width: 860px) {
    .listing-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 480px) {
    .ad-card-body { padding: 12px 12px 14px; gap: 4px; }
    .ad-card-price { font-size: 17px; }
    .ad-card-title { font-size: 12.5px; }
    .ad-card-meta { font-size: 10.5px; }
    /* Smaller ring on a narrow phone (2-up grid down to ~180px cards) needs
       a proportionally smaller overlap offset too, or the ring visually
       detaches from the photo edge instead of sitting on it. Name keeps its
       existing flex:1/min-width:0/ellipsis (unchanged below) so it's
       already the first thing to shrink/truncate on a very small screen —
       avatar and verification badge (both flex-shrink:0) never disappear. */
    .ad-card-seller-avatar-ring { width: 26px; height: 26px; top: -12px; margin-bottom: -12px; }
    .ad-card-seller-avatar { font-size: 10px; }
    .ad-card-seller-name { font-size: 11px; }
    .ad-card-price-status { font-size: 10px; }
    .ad-card-fav { width: 26px; height: 26px; }
    .ad-card-compare { font-size: 10px; padding: 4px 8px; bottom: 8px; left: 8px; gap: 4px; }
}
@media (max-width: 360px) {
    .listing-grid { grid-template-columns: 1fr; }
}
/* Owner direction (live): the buyer dashboard's "Recommended for You"
   grid should be a fixed 4-across on non-mobile, not .listing-grid's
   default auto-fill (2 or 3 depending on the content column's exact
   width once the sidebar takes 248px). Same precedent as .home-main's
   own 4-column override below - scoped to this one section only, not
   every .listing-grid on the site, since My Ads/Favorites/etc. have
   their own real estate constraints. Mobile is untouched: .listing-grid's
   own <=860px/<=360px rules above still win there since this only
   applies at the same >860px breakpoint every other desktop-only
   dashboard rule in this file uses. */
@media (min-width: 861px) {
    .dash-recommended-grid { grid-template-columns: repeat(4, 1fr); }
}

.ad-card {
    position: relative;
    background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.28s cubic-bezier(.2,.8,.2,1), box-shadow 0.28s ease, border-color 0.28s ease;
    display: flex;
    flex-direction: column;
}
.ad-card:hover {
    transform: translateY(-5px) scale(1.012);
    border-color: var(--border-strong);
    box-shadow: 0 24px 50px rgba(0,0,0,0.45), 0 0 0 1px rgba(201,165,92,0.1);
}

/* Wraps the image plus every overlay badge (verified/fav/compare/seal) so
   their position:absolute top/bottom/left/right resolve against the image
   area specifically. Before this wrapper existed, those badges were direct
   children of .ad-card (which spans the image AND the price/title/seller
   body below it), so a "bottom:12px" badge like the tier seal landed 12px
   from the bottom of the WHOLE card — squarely on top of the seller name
   row — instead of the bottom of the photo. The wrapper takes its height
   from .ad-card-media's aspect-ratio (its only non-absolutely-positioned
   child), so it's always exactly the image's height, regardless of how
   tall the card body below grows. */
.ad-card-media-wrap { position: relative; }


.ad-card-media {
    /* This is an <a> tag, not a <div> — anchors default to display:inline,
       which ignores aspect-ratio/width/height. Without this, a real photo
       still forced the box tall (the <img>'s own rendered size did the
       job by accident), but the "No Photo Yet" placeholder had nothing to
       force it, so it collapsed to wrap just that one line of text —
       same class, two different shapes. display:block makes the box
       respect its own aspect-ratio regardless of what's inside it. */
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #1b1f2b, #10131c);
    overflow: hidden;
}

/* Swipeable photo strip right on the card — a buyer flicks through a car's
   real photos without ever opening the ad, the same instant, no-loading
   feel as flicking to the next video, not a static classifieds thumbnail.
   Pure CSS scroll-snap, no JS required to swipe; main.js only listens to
   update which dot is lit. */
.ad-card-gallery {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.ad-card-gallery::-webkit-scrollbar { display: none; }
.ad-card-gallery img {
    flex: 0 0 100%;
    scroll-snap-align: start;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--motion-slow) ease;
}
.ad-card:hover .ad-card-gallery img { animation: none; transform: scale(1.06); }

/* A very slow, subtle ambient zoom once a photo has actually loaded (never
   on the flat placeholder), so a card feels alive at rest instead of a
   frozen thumbnail — the "living poster" feel, not a gimmick loop. Each
   card's animation naturally starts at a different real moment (whenever
   that image finishes downloading), so a grid of cards never all breathe
   in mechanical unison. */
.ad-card-gallery img.img-loaded { animation: adCardKenBurns 16s ease-in-out infinite alternate; }
@keyframes adCardKenBurns {
    from { transform: scale(1); }
    to { transform: scale(1.045); }
}

.ad-card-gallery-dots {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    gap: 4px;
    pointer-events: none;
}
.ad-card-gallery-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    transition: background var(--motion-fast) ease, width var(--motion-fast) ease;
}
.ad-card-gallery-dot.active { background: var(--gold-bright); width: 14px; border-radius: 3px; }

.ad-card-facts {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
    margin-top: 2px;
}

/* Shared photo-load pattern: a soft shimmer sweeps the placeholder while
   an image decodes, then the image fades in over it (main.js toggles
   .img-loaded on the load event). Applied to every content photo, not
   just ad cards, so the whole site's images reveal the same way instead
   of popping in against a flat gradient. */
.js-fade-img {
    opacity: 0;
    transition: opacity var(--motion-slow) var(--ease-out);
}
.js-fade-img.img-loaded { opacity: 1; }
.js-fade-parent {
    position: relative;
    background: linear-gradient(100deg, #14171f 30%, #1c202c 50%, #14171f 70%);
    background-size: 250% 100%;
    animation: fadeImgShimmer 1.6s ease-in-out infinite;
}
.js-fade-parent:has(.img-loaded) { animation: none; background: none; }
@keyframes fadeImgShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -50% 0; }
}

.ad-card-media .no-photo {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted);
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Lives on the price line now, not floating over the photo — sitting on
   the swipeable gallery meant a tap meant to swipe photos could land on
   the heart instead, and the price is the more natural place for a
   "save this" action to sit anyway. */
.ad-card-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ad-card-fav {
    position: relative;
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.ad-card-fav::before {
    content: '';
    position: absolute;
    inset: -7px;
}
.ad-card-fav:hover { color: var(--gold); border-color: var(--border-strong); }
.ad-card-fav:focus-visible,
.ad-card-title:focus-visible,
.ad-card-media:focus-visible,
.ad-card-seller-link:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}
.ad-card-fav:active { transform: scale(0.88); }
.ad-card:active { transform: scale(0.99); }

/* Paid/VIP tier marking: a static, tier-colored border plus a soft glow in
   that same color, and a small corner seal. Deliberately never animated —
   a blinking border reads as a bargain-site urgency trick, which this
   brand still isn't — but the color itself is now the tier's real hue at
   full strength, with a matching glow, so a paid card is unmistakable in
   the grid at a glance rather than only on hover. */
.ad-card-tier {
    border-color: var(--tier-color);
    box-shadow: 0 0 0 1px var(--tier-glow-1), 0 10px 28px var(--tier-glow-2);
}
.ad-card-tier:hover {
    box-shadow: 0 0 0 1px var(--tier-color), 0 14px 34px var(--tier-glow-hover);
}
/* Precomputed rgba glow steps per tier instead of color-mix(): color-mix()
   is unsupported on older mobile browsers, and when a browser can't parse
   one function inside a box-shadow shorthand it drops the ENTIRE
   declaration, not just that layer — so the glow silently vanished
   everywhere while border-color (a separate, valid property) kept working.
   rgba() has no such failure mode. */
.ad-card-tier-starter { --tier-color: var(--tier-starter); --tier-glow-1: rgba(140,147,166,0.45); --tier-glow-2: rgba(140,147,166,0.22); --tier-glow-hover: rgba(140,147,166,0.32); }
.ad-card-tier-pro { --tier-color: var(--tier-pro); --tier-glow-1: rgba(201,165,92,0.45); --tier-glow-2: rgba(201,165,92,0.22); --tier-glow-hover: rgba(201,165,92,0.32); }
.ad-card-tier-elite { --tier-color: var(--tier-elite); --tier-glow-1: rgba(138,53,64,0.45); --tier-glow-2: rgba(138,53,64,0.22); --tier-glow-hover: rgba(138,53,64,0.32); }
.ad-card-tier-enterprise { --tier-color: var(--tier-enterprise); --tier-glow-1: rgba(124,92,199,0.5); --tier-glow-2: rgba(124,92,199,0.25); --tier-glow-hover: rgba(124,92,199,0.36); }
.ad-card-tier-boost { --tier-color: var(--tier-boost); --tier-glow-1: rgba(76,122,94,0.45); --tier-glow-2: rgba(76,122,94,0.22); --tier-glow-hover: rgba(76,122,94,0.32); }
.ad-card-tier-spotlight { --tier-color: var(--tier-spotlight); --tier-glow-1: rgba(63,169,245,0.45); --tier-glow-2: rgba(63,169,245,0.22); --tier-glow-hover: rgba(63,169,245,0.32); }

/* Flush against the card's own top-left corner — a corner ribbon/flag,
   not a floating pill — matching the universal paid-placement convention
   (Google Ads' "Ad", Facebook/Instagram's "Sponsored", Amazon's
   "Sponsored"): seen before price or title register at all, and kept off
   the price line so it never reads like a discount sticker on a
   ₦-figure. Only the outward corner is rounded, echoing the card's own
   corner radius, since the other two edges sit flush against it. */
.ad-card-seal {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    background: rgba(8, 9, 13, 0.82);
    backdrop-filter: blur(6px);
    border: none;
    border-right: 1px solid var(--tier-color);
    border-bottom: 1px solid var(--tier-color);
    color: var(--tier-color);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.07em;
    line-height: 1;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 0 0 4px 0;
}
.ad-card-seal-icon { display: inline-block; vertical-align: -1px; margin-right: 3px; }
/* Enterprise's seal additionally gets a solid fill (every other tier is
   translucent over the photo) since it's the one tier meant to visually
   outrank all the others at a glance, a literal trophy, not just another
   colored corner flag. */
.ad-card-seal-enterprise {
    background: linear-gradient(135deg, #2B1F47, #1A1229);
    border-right-color: var(--tier-enterprise);
    border-bottom-color: var(--tier-enterprise);
    color: #C9AFFA;
}

.ad-card-compare {
    position: absolute;
    bottom: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(8, 9, 13, 0.72);
    backdrop-filter: blur(6px);
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
    font-size: 11.5px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
    z-index: 2;
}
.ad-card-compare input { width: 13px; height: 13px; margin: 0; accent-color: var(--gold); }
.ad-card-compare:has(input:checked) { color: var(--gold); border-color: var(--gold); }
.ad-card-compare:active { transform: scale(0.95); }

/* ---------------------------------------------------------------------- */
/* Compare bar + comparison table                                        */
/* ---------------------------------------------------------------------- */

.compare-bar, .bulk-moderation-bar {
    position: sticky;
    top: 68px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 3px;
    padding: 12px 18px;
    margin-bottom: 18px;
    flex-wrap: wrap;
    box-shadow: 0 12px 30px rgba(0,0,0,0.3);
}

.compare-table-wrap { overflow-x: auto; }
.compare-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
}
.compare-table th {
    padding: 12px 16px;
    vertical-align: top;
    text-align: left;
    border-bottom: 1px solid var(--border);
    min-width: 180px;
}
.compare-table th a { text-decoration: none; display: block; }
.compare-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 13.5px;
    color: var(--text-secondary);
}
.compare-row-label {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    white-space: nowrap;
}
.compare-thumb {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: 3px;
    margin-bottom: 8px;
}
.compare-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    display: block;
}

.ad-card-body {
    padding: 12px 11px 13px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.ad-card-price {
    /* Not Fraunces: the Naira sign (₦) is literally an "N" with a
       horizontal crossbar built into the glyph, and that crossbar renders
       unusually bold/long in this display serif — on some devices it
       reads as a line struck through the whole number, with no dependency
       on which digits follow (confirmed on "₦45K", no zero involved, so
       this isn't the WONK/slashed-zero axis — it's the currency glyph
       itself). Inter (already loaded site-wide) renders ₦ cleanly, so
       every dedicated price display uses it instead of Fraunces now. */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.ad-card-title {
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--text-primary);
    display: block;
    min-width: 0;
    min-height: 1.35em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ad-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
}
.ad-card-meta span:not(.dot) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ad-card-meta .dot { flex-shrink: 0; width: 3px; height: 3px; border-radius: 50%; background: var(--text-muted); }
.ad-card-meta > span:first-child { flex: 0 0 auto; overflow: visible; text-overflow: clip; }
.ad-card-meta > span:last-child { min-width: 0; }
/* .ad-card-meta's nowrap+ellipsis is correct on a narrow ad card (one
   line, gracefully truncated) but breaks when the same class is reused
   somewhere wider with more items, like the storefront sidebar's
   "Lagos State / Member since ... / 8 ads / 5.0 (1)" line; each span
   ellipsis-truncates itself independently, producing broken mid-word
   fragments ("Lago...", "Member sinc...") instead of one clean line.
   This modifier lets that specific usage wrap onto multiple lines
   instead of fighting for space on one. */
.storefront-header-meta { flex-wrap: wrap; white-space: normal; overflow: visible; row-gap: 4px; }
.storefront-header-meta span:not(.dot) { overflow: visible; text-overflow: clip; white-space: normal; }
.ad-card-location { display: inline-flex; align-items: center; gap: 3px; }
.ad-card-location svg { flex-shrink: 0; opacity: 0.7; }

/* Seller row now sits at the TOP of the card body, avatar slightly
   overlapping the photo's bottom edge (feedback:6 item 6's ad-card
   hierarchy). Two siblings — .ad-card-seller-link (avatar+name+badge,
   clickable to the storefront) and .ad-card-fav (bookmark) — rather than
   one big anchor, since a <button> can't legally nest inside an <a>. */
.ad-card-seller-top-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ad-card-seller-link {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
    text-decoration: none;
    transition: opacity 0.15s ease;
}
.ad-card-seller-link:hover { opacity: 0.8; }
/* top/margin-bottom (not a plain negative margin-top) so the avatar paints
   higher than its flex position without dragging the row's own box-model
   height up with it — the name/badge/bookmark stay exactly where they'd
   sit if the avatar were unmoved. Opaque background + box-shadow ring
   (rather than a border) so the overlapping edge reads cleanly against
   the photo behind it instead of a hairline getting lost in a busy image. */
.ad-card-seller-avatar-ring {
    position: relative;
    top: -16px;
    margin-bottom: -16px;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--surface);
    box-shadow: 0 0 0 1px var(--border-strong), 0 2px 6px rgba(0,0,0,0.4);
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.25s ease;
}
.ad-card-seller-link:hover .ad-card-seller-avatar-ring { box-shadow: 0 0 0 1px var(--gold), 0 2px 6px rgba(0,0,0,0.4); }
/* Online sellers get the same green ripple as their small presence-dot,
   just around the whole ring — the dot alone is easy to miss in a busy
   grid; the ring pulsing too makes "seller is online right now" register
   at a glance instead of on close inspection. */
.ad-card-seller-avatar-ring.is-online {
    box-shadow: 0 0 0 1px var(--success), 0 2px 6px rgba(0,0,0,0.4);
    animation: presencePulse 2s infinite;
}
.ad-card-seller-link:hover .ad-card-seller-avatar-ring.is-online { box-shadow: 0 0 0 1px var(--gold), 0 2px 6px rgba(0,0,0,0.4); }
.ad-card-seller-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--gold);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ad-card-seller-name {
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* No flex:1 here (deliberately — was a real bug): with flex-grow, the
       name's own BOX stretched to fill all available space even when its
       text was short, leaving the verification badge — the next flex
       sibling — sitting after that stretched invisible box instead of
       right next to the visible text. .ad-card-seller-link (the parent)
       already carries flex:1 to claim the row's available width; the name
       just needs to be allowed to shrink (min-width:0) so a genuinely
       long name can still ellipsis-truncate. */
    min-width: 0;
}
.verified-seal { flex: 0 0 auto; color: #20a765; overflow: visible; vertical-align: -0.12em; }
.verified-seal .verified-seal-shape { fill: currentColor; }
.verified-seal .verified-seal-check { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ad-card-seller-verified { flex-shrink: 0; }
.verified-inline { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; color: #20a765; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ad-card-seller-unverified { flex-shrink: 0; color: var(--text-muted); }
/* Fixed/Negotiable status, sibling to the price at the card's bottom edge
   (feedback:6 item 6). Muted, not a colored badge — this is context, not
   an urgency/promo signal competing with the price for attention. */
.ad-card-price-status {
    flex-shrink: 0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    align-self: flex-end;
    padding-bottom: 2px;
}

/* ---------------------------------------------------------------------- */
/* Filters / browse layout                                                 */
/* ---------------------------------------------------------------------- */

.browse-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 28px;
    align-items: start;
}
@media (max-width: 900px) {
    .browse-layout { grid-template-columns: 1fr; }
    .filter-panel { position: static; }
    .filter-group-keyword { display: none; }
}

.filter-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    position: sticky;
    top: 88px;
}
/* On mobile, showing the full filter form inline pushes the actual
   results grid far down the screen before a visitor sees a single ad —
   collapsed behind a toggle instead, same "hidden until asked for"
   pattern used elsewhere on the site. The [hidden] attribute is always
   present in the markup; this override just forces it back to visible
   on desktop regardless of that attribute, so JS never needs to know
   about viewport size, only whether the button was tapped. */
.filter-toggle-btn {
    display: none;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    padding: 12px 16px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    cursor: pointer;
}
.filter-toggle-btn[aria-expanded="true"] { border-color: var(--gold); color: var(--gold); }
@media (max-width: 900px) {
    .filter-toggle-btn { display: flex; }
    .filter-panel[hidden] { display: none; }
    .filter-panel:not([hidden]) { display: block; margin-bottom: 20px; }
}
@media (min-width: 901px) {
    .filter-panel[hidden] { display: block; }
}
.filter-group { margin-bottom: 18px; }
.filter-group:last-child { margin-bottom: 0; }
.filter-group label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
.filter-group input[type="text"], .filter-group input[type="number"] {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-size: 14.5px;
    font-family: inherit;
}
.filter-group input[type="text"]::placeholder, .filter-group input[type="number"]::placeholder { color: var(--text-muted); }
.filter-group input[type="text"]:focus, .filter-group input[type="number"]:focus { border-color: var(--gold); }
.filter-group input[type="text"]:focus-visible, .filter-group input[type="number"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.filter-row { display: flex; gap: 8px; }
.filter-row input { min-width: 0; }

.results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}
.results-count { color: var(--text-secondary); font-size: 14.5px; }

.map-view {
    height: 560px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.map-view .leaflet-popup-content-wrapper,
.map-view .leaflet-popup-tip {
    background: var(--surface);
    color: var(--text-primary);
}
@media (max-width: 700px) {
    .map-view { height: 420px; }
}

.empty-state {
    text-align: center;
    padding: 56px 24px;
    color: var(--text-secondary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    line-height: 1.6;
    animation: emptyStateIn var(--motion-slow) var(--ease-out);
}
@keyframes emptyStateIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    color: var(--gold);
    margin-bottom: 18px;
    background: rgba(201, 165, 92, 0.06);
    animation: emptyStateIconBreathe 3s var(--ease-out) infinite;
}
@keyframes emptyStateIconBreathe {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201, 165, 92, 0.12); }
    50% { box-shadow: 0 0 0 8px rgba(201, 165, 92, 0); }
}
.empty-state-title {
    font-family: 'Fraunces', 'Georgia', serif;
    font-size: 19px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.empty-state-text {
    max-width: 380px;
    margin: 0 auto;
    font-size: 14px;
}
.empty-state-cta { margin-top: 20px; }

.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
}
.pagination a, .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
}
.pagination a:hover { border-color: var(--gold); color: var(--gold-bright); }
.pagination .current { background: var(--gold); color: var(--on-accent); border-color: var(--gold); }

/* ---------------------------------------------------------------------- */
/* Listing detail                                                          */
/* ---------------------------------------------------------------------- */

.detail-layout {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 32px;
    align-items: start;
}
@media (max-width: 900px) {
    .detail-layout { grid-template-columns: 1fr; }
    .listing-contact-panel { position: static; }
}
@media (max-width: 360px) {
    .seller-actions-row { grid-template-columns: 1fr; }
}

.gallery-main {
    aspect-ratio: 16 / 10;
    background: var(--surface-2);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    margin-bottom: 10px;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.gallery-thumb {
    position: relative;
    cursor: pointer;
    /* Was a <div onclick>, not reachable by keyboard — now a real <button>,
       reset to look identical to the old div (no default button chrome). */
    background: none;
    border: none;
    padding: 0;
    display: inline-block;
    font: inherit;
}
.gallery-thumbs img, .gallery-thumb img {
    width: 72px; height: 56px; object-fit: cover;
    border-radius: 3px; border: 1px solid var(--border);
    cursor: pointer;
    display: block;
}
.gallery-thumb-more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(7, 8, 13, 0.72);
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    border-radius: 3px;
}

.spec-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin: 24px 0;
}
.spec-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
}
.spec-item .label { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.spec-item .value { font-size: 15px; font-weight: 600; margin-top: 2px; word-break: break-word; }

/* Most specs are short ("Make: Lexus") and stay paired 2-up even on a
   phone — collapsing the whole grid to 1 column wasted half the screen
   width on those. Only the genuinely long values (delivery fee/coverage
   sentences, VIN, Fits Model) need the full row, via .spec-item-wide. */
.spec-item-wide { grid-column: 1 / -1; }

/* Naijack Vehicle Record: real listing history for this VIN, honestly
   scoped to "activity on Naijack" (see the copy itself), never claiming to
   be an independent/government vehicle history report. Small text
   throughout on purpose — this is supporting evidence under the main
   specs, not a second hero section, and needs to hold up on a narrow
   phone without wrapping awkwardly. */
.vehicle-record-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin: 20px 0;
}
.vehicle-record-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--gold);
    margin-bottom: 14px;
}
.vehicle-record-head svg { flex-shrink: 0; margin-top: 2px; }
.vehicle-record-list { display: flex; flex-direction: column; gap: 10px; }
.vehicle-record-item {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12.5px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.vehicle-record-item:last-child { border-bottom: none; padding-bottom: 0; }
.vehicle-record-date {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--gold-bright);
    font-family: 'Fraunces', serif;
    min-width: 56px;
}
.vehicle-record-desc { flex: 1; min-width: 180px; color: var(--text-secondary); }
.vehicle-record-fresh {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-muted);
    margin: 16px 0;
}
.vehicle-record-fresh svg { color: var(--success); flex-shrink: 0; }

.seller-avatar-ring {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    padding: 2px;
    transition: border-color var(--motion-fast) var(--ease-out);
}
.seller-identity-row:hover .seller-avatar-ring { border-color: var(--gold); }
.seller-avatar-ring.is-online { border-color: var(--success); animation: presencePulse 2s infinite; }
.seller-identity-row:hover .seller-avatar-ring.is-online { border-color: var(--gold); }
.seller-avatar {
    position: relative; /* anchors presence-dot when used without a -ring wrapper (storefront.php) */
    width: 100%; height: 100%; border-radius: 50%;
    background: var(--surface-2);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; color: var(--gold);
    font-family: 'Fraunces', 'Georgia', serif;
    font-size: 16px;
}
.seller-avatar.is-online { animation: presencePulse 2s infinite; }

/* feedback:12 Phase 1: dashboard-home business/profile greeting strip -
   avatar + business name + verification + plan, replacing the plain
   "Welcome back" text line with something that reads as a real business
   identity strip, same visual language as storefront.php's own header. */
.dash-profile-strip {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.dash-profile-avatar {
    width: 52px;
    height: 52px;
    font-size: 20px;
    flex-shrink: 0;
}
.dash-profile-strip h1 { margin-bottom: 4px; }
/* Owner direction (live, mobile screenshot): the whole "Welcome back,
   {name}"/business-strip greeting block is dropped on mobile entirely
   - not shrunk, gone - so the page opens straight on "Needs Your
   Attention" (or the seller's equivalent focus panel), one less thing
   to scroll past on a small screen. Matches the same >860px boundary
   the sidebar itself uses to switch into mobile mode, not a separate
   breakpoint. */
@media (max-width: 860px) {
    .dash-profile-strip { display: none; }
}

/* feedback:11 §7/§17: was an inline style="font-size:24px" on the
   storefront's own h1, which (being inline) beat the bare h1's 480px
   responsive clamp outright - a long business name stayed oversized on
   a phone. Moved to a real class so it participates in the same
   pattern as .auth-card h1/.hero h1, plus its own mobile step-down for
   the long-name case, since a storefront's own business name is one of
   the more likely candidates for real length variance. */
.storefront-name { margin-bottom: 4px; font-size: 24px; }
@media (max-width: 480px) {
    .storefront-name { font-size: 20px; }
}

/* ---------------------------------------------------------------------- */
/* Online presence dot, sits on any avatar's bottom-right corner          */
/* ---------------------------------------------------------------------- */

.presence-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--surface);
    background: var(--text-muted);
}
.presence-dot.online {
    background: var(--success);
    animation: presencePulse 2s infinite;
}
.presence-dot.sm { width: 9px; height: 9px; border-width: 1.5px; }

@keyframes presencePulse {
    0% { box-shadow: 0 0 0 0 rgba(63, 174, 106, 0.55); }
    70% { box-shadow: 0 0 0 6px rgba(63, 174, 106, 0); }
    100% { box-shadow: 0 0 0 0 rgba(63, 174, 106, 0); }
}
/* Owner direction (live): the header's own avatar (not the larger copy
   inside the open account panel) needs its own slow "live" ring around
   the whole circle, separate from - and in addition to - the small
   corner presence-dot above. Same green/online color language as that
   dot's own pulse so the two read as one signal, just applied to the
   avatar's full boundary instead of a single corner. Scoped to the
   topbar trigger button only (.user-menu-btn), not the dropdown
   panel's larger avatar, which already has the open panel's own name/
   role text doing that job. */
.user-menu-btn .user-menu-avatar {
    animation: avatarOnlineRing 2.4s ease-in-out infinite;
}
@keyframes avatarOnlineRing {
    0% { box-shadow: 0 0 0 0 rgba(63, 174, 106, 0.45); }
    70% { box-shadow: 0 0 0 5px rgba(63, 174, 106, 0); }
    100% { box-shadow: 0 0 0 0 rgba(63, 174, 106, 0); }
}

/* ---------------------------------------------------------------------- */
/* Listing detail: the sticky contact panel                                */
/* One continuous surface (price + seller + actions), not two separate    */
/* cards — they used to be visually stacked to look like one panel while  */
/* only the price half actually stuck on scroll, so the buttons that      */
/* matter (Message, WhatsApp, Offer, Escrow) scrolled out of view first.  */
/* Now the whole panel sticks together as one plain sticky box — no       */
/* internal scrollbar of its own (that produced a confusing second        */
/* scrollbar sitting right next to the page's own one). Reaching Safety   */
/* Tips on a short screen instead goes through #safetyJumpBtn's           */
/* scrollIntoView() call below: since this box has no overflow of its     */
/* own, that call scrolls the actual page, which is what lets the panel   */
/* naturally release from being stuck and bring Safety Tips into view.    */
/* ---------------------------------------------------------------------- */

.listing-contact-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 16px;
    position: sticky;
    top: 88px;
    animation: contactPanelRise 0.5s var(--ease-out) both;
}
.listing-contact-panel::before {
    content: '';
    display: block;
    height: 2px;
    border-radius: var(--radius) var(--radius) 0 0;
    background: linear-gradient(90deg, transparent, var(--gold), var(--gold-bright), var(--gold), transparent);
}
.listing-contact-panel:focus-within { border-color: var(--border-strong); }

@keyframes contactPanelRise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.panel-section { padding: 20px; }
.panel-section-seller { padding-top: 18px; }
.panel-divider {
    height: 1px;
    margin: 0 20px;
    background: linear-gradient(90deg, transparent, var(--border-strong) 15%, var(--border-strong) 85%, transparent);
}
/* Without this, scrollIntoView() lands the divider at the very top pixel
   of the viewport, which the site's own sticky header (68px + a little
   breathing room, matching .listing-contact-panel's own top:88px offset)
   then sits on top of — cutting off the heading and even the first line
   of the safety tips underneath it. scroll-margin-top tells the browser
   to stop short of that, the same way top:88px already does for sticky. */
#panelSafetyTips { scroll-margin-top: 88px; }

.price-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}
.ad-ref {
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}
.price-card-icons { display: flex; gap: 8px; }
.icon-circle-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.icon-circle-btn:hover { color: var(--gold); border-color: var(--border-strong); }
.icon-circle-btn.active { color: var(--gold); border-color: var(--border-strong); background: rgba(201, 165, 92, 0.1); }

/* Conversation header overflow menu: keeps the sticky header down to just
   back + identity + one icon on every device, instead of a row of icon
   buttons (storefront/pin/block) that could crowd or wrap on a narrow
   phone. position:relative here is load-bearing for the same reason it
   was missing on .chat-composer earlier — .conv-menu is position:absolute
   and needs this as its containing block. */
.conv-menu-wrap { position: relative; flex-shrink: 0; }
.conv-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 190px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 6px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.4);
    z-index: 20;
}
.conv-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
}
.conv-menu-item:hover { background: var(--surface-hover); }
.conv-menu-item-btn { background: none; border: none; font-family: inherit; text-align: left; }
.conv-menu-item-danger { color: var(--danger); }

.price-tag {
    /* See .ad-card-price: the ₦ glyph's own crossbar renders too bold in
       Fraunces and can read as a strikethrough. Inter instead. */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--gold-bright);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    margin-bottom: 4px;
}
/* Audit finding (owner-directed full-platform pass): the listing detail
   page's hero price had no mobile step at all, unlike .ad-card-price's
   own already-tuned 17px mobile size - same desktop-sized number on a
   360px phone as on a monitor. */
@media (max-width: 480px) {
    .price-tag { font-size: 25px; }
}

.price-fairness-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 3px;
    margin-top: 8px;
    cursor: help;
}
.price-fairness-badge.tier-great { background: rgba(63, 174, 106, 0.12); color: var(--success); }
.price-fairness-badge.tier-fair { background: rgba(201, 165, 92, 0.12); color: var(--gold); }
.price-fairness-badge.tier-high { background: rgba(224, 85, 74, 0.12); color: var(--danger); }
.price-fairness-badge.tier-high svg { transform: scaleY(-1); }

.trust-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}
.trust-ribbon {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(201, 165, 92, 0.12);
    border: 1px solid var(--border-strong);
    color: var(--gold-bright);
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 3px;
}
/* Shown instead of .trust-ribbon when the seller has not completed
   identity/business verification — not an error state (muted, not red),
   just an honest absence of the positive signal, which is itself real
   information a buyer should have and an incentive for the seller to
   verify. */
.trust-ribbon-unverified {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 3px;
}
/* Jumps straight to the safety tips at the bottom of this same panel
   (see #panelSafetyTips) — a blinking beacon rather than a static link
   since it's pointing at the platform's single most important piece of
   advice, not just another nav item. */
.safety-jump-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(201, 165, 92, 0.1);
    border: 1px solid var(--border-strong);
    color: var(--gold-bright);
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px 4px 8px;
    border-radius: 3px;
    cursor: pointer;
    transition: background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}
.safety-jump-btn:hover { background: rgba(201, 165, 92, 0.18); border-color: var(--gold); transform: translateY(-1px); }
.safety-jump-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    flex-shrink: 0;
    animation: safetyBlink 1.4s infinite;
}
@keyframes safetyBlink {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(201, 165, 92, 0.5); }
    50% { opacity: 0.4; box-shadow: 0 0 0 4px rgba(201, 165, 92, 0); }
}

.seller-identity-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    text-decoration: none;
    color: inherit;
}
.seller-rating-line {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    color: var(--gold-bright);
    margin-top: 2px;
}
.seller-rating-line svg { color: var(--gold); }

.response-time-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--success);
    background: rgba(63, 174, 106, 0.1);
    border-radius: 3px;
    padding: 8px 12px;
    margin-bottom: 14px;
}

.seller-actions-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.seller-actions-row .btn {
    padding: 11px 10px;
    font-size: 13.5px;
    min-height: 44px;
}

/* ---------------------------------------------------------------------- */
/* Star ratings (storefront reviews)                                       */
/* ---------------------------------------------------------------------- */

.star-rating-input { display: flex; gap: 4px; margin-bottom: 16px; }
.star-input-btn {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: var(--border-strong);
    cursor: pointer;
    padding: 2px;
    transition: color 0.15s ease, transform 0.15s ease;
}
.star-input-btn:hover, .star-input-btn.hovered { color: var(--gold-bright); transform: scale(1.1); }
.star-input-btn.active { color: var(--gold); }

.star-display { display: flex; gap: 2px; color: var(--gold); }

/* ---------------------------------------------------------------------- */
/* Make an Offer modal, bottom sheet on mobile, centered on desktop        */
/* ---------------------------------------------------------------------- */

.offer-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4, 5, 8, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}
.offer-modal-overlay[hidden] { display: none; }

.offer-modal {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 3px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

.offer-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}
.offer-modal-header h3 { margin: 0; font-size: 17px; }
.offer-modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.offer-modal-body { padding: 20px; }

.offer-presets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}
.offer-preset-btn {
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    color: var(--gold-bright);
    border-radius: 3px;
    padding: 10px 4px;
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
}
.offer-preset-btn:hover, .offer-preset-btn.active {
    background: rgba(201, 165, 92, 0.14);
    border-color: var(--gold);
    color: var(--gold);
}

@media (max-width: 560px) {
    .offer-modal-overlay { align-items: flex-end; padding: 0; }
    .offer-modal {
        max-width: 100%;
        border-radius: 3px 20px 0 0;
        animation: offerSheetUp 0.25s ease;
    }
    .offer-presets { gap: 6px; }
    .offer-preset-btn { font-size: 11.5px; padding: 10px 2px; }
}

@keyframes offerSheetUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* Generic modal, same visual language as .offer-modal-overlay/.offer-modal
   above but not offer-specific, for Mark Sold / bulk-edit style dialogs. */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4, 5, 8, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}
.modal-overlay[hidden] { display: none; }
.modal-card {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 3px;
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 22px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
    box-sizing: border-box;
}
@media (max-width: 560px) {
    .modal-overlay { align-items: flex-end; padding: 0; }
    /* feedback:11 §23: the bottom sheet had no height cap or internal
       scroll - a tall form (e.g. a validation error appearing, or a
       multi-field bulk-edit modal) could push its own submit button
       below the viewport with no way to reach it. */
    .modal-card { max-width: 100%; max-height: calc(100vh - env(safe-area-inset-top) - 24px); border-radius: 3px 20px 0 0; animation: offerSheetUp 0.25s ease; }
}

/* Cookie consent banner. Only rendered at all when an analytics/pixel ID
   is actually configured (see includes/footer.php) — no tracking means
   nothing to ask consent for. [hidden] gets its own explicit override
   from the start here, not as an afterthought: a bare [hidden] rule
   loses to any same-specificity class rule that sets display, including
   this one's own position:fixed/display:flex, if that class rule is
   declared later in the cascade — the exact bug the pricing cards hit
   three times before this was written. */
.cookie-consent {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 1200;
    max-width: 640px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    justify-content: space-between;
}
.cookie-consent[hidden] { display: none; }
.cookie-consent p { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.5; flex: 1; min-width: 240px; }
.cookie-consent p a { color: var(--gold); }
.cookie-consent-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ---------------------------------------------------------------------- */
/* Footer                                                                  */
/* ---------------------------------------------------------------------- */

.site-footer {
    border-top: 1px solid var(--border);
    padding: 40px 0 28px;
    margin-top: 60px;
    color: var(--text-muted);
    font-size: 13.5px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 24px;
    margin-bottom: 28px;
}
@media (max-width: 700px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
/* feedback:11 §12: two columns of link lists is workable down to ~400px,
   but narrower than that each column is too tight to stay readable -
   full single-column stacking below this width. */
@media (max-width: 400px) {
    .footer-grid { grid-template-columns: 1fr; }
}
.footer-grid .footer-column-heading { color: var(--text-secondary); font-size: 13px; margin-bottom: 12px; }
.footer-grid a { display: block; padding: 4px 0; color: var(--text-muted); }
.footer-grid a:hover { color: var(--gold); }
.footer-bottom {
    border-top: 1px solid var(--border);
    padding-top: 18px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

/* ---------------------------------------------------------------------- */
/* Mobile bottom tab bar (phones only; desktop uses the header nav)        */
/* ---------------------------------------------------------------------- */

.mobile-tabbar {
    display: none;
}
@media (max-width: 860px) {
    /* 60px bar + the floating post button's ~34px protrusion above it
       (plus a little breathing room for its shadow) — without this, the
       last piece of real content at the bottom of any page (a button, a
       final card) could end up permanently stuck behind the floating
       button with no way to scroll it into view. */
    body { padding-bottom: calc(98px + env(safe-area-inset-bottom)); }
    .mobile-tabbar {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: center;
        justify-content: space-around;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
        height: 60px;
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--surface);
        border-top: 1px solid var(--border);
    }
}
.mobile-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 100%;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.mobile-tab.active { color: var(--gold); }
.mobile-tab-icon-wrap { position: relative; display: flex; }
.mobile-tab-badge {
    position: absolute;
    top: -4px;
    right: -7px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--bg);
    font-size: 9.5px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
}
/* An empty flex:1 slot the same width as the other 5 tabs, so they stay
   evenly spaced — the actual visible button is absolutely positioned out
   of this slot entirely and floats clear above the bar, not inline
   within its 60px row alongside Home/Favorites/Requests/Inbox/Account. */
/* Taken out of the flex row entirely (not a 6th slot) and centered on
   the bar's own full width instead — with 5 real tabs (Home, Favorites,
   Requests, Inbox, Account) evenly splitting that same width, the bar's
   horizontal center already lands exactly on Requests, the 3rd of 5, so
   this sits precisely above it rather than between two tabs. */
.mobile-create-trigger {
    align-self: center;
    justify-self: center;
    width: 52px;
    height: 52px;
    margin-top: -30px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 4px solid var(--bg);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    z-index: 2;
}
.mobile-create-trigger[aria-expanded="true"] svg { transform: rotate(45deg); }
.mobile-create-trigger svg { transition: transform .18s ease; }
.mobile-create-backdrop { position: fixed; inset: 0; z-index: 108; background: rgba(0,0,0,.62); }
.mobile-create-backdrop[hidden], .mobile-create-sheet[hidden] { display: none; }
.mobile-create-sheet { position: fixed; z-index: 109; left: 12px; right: 12px; bottom: calc(70px + env(safe-area-inset-bottom)); max-width: 440px; margin-inline: auto; padding: 8px 10px 12px; border: 1px solid var(--border-strong); border-radius: 18px; background: var(--surface); box-shadow: 0 18px 48px rgba(0,0,0,.55); }
.mobile-create-handle { width: 38px; height: 4px; margin: 2px auto 8px; border-radius: 999px; background: var(--border-strong); }
.mobile-create-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 8px; color: var(--text-primary); }
.mobile-create-head button { width: 44px; height: 44px; margin: -8px -6px -8px 0; border: 0; background: transparent; color: var(--text-secondary); font-size: 26px; cursor: pointer; }
.mobile-create-option { width: 100%; min-height: 64px; display: flex; align-items: center; gap: 12px; margin-top: 7px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-2); color: var(--text-primary); text-decoration: none; text-align: left; font: inherit; cursor: pointer; }
.mobile-create-option > svg { color: var(--gold); flex: 0 0 auto; }
.mobile-create-option > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mobile-create-option strong { font-size: 14px; }
.mobile-create-option small { margin-top: 2px; color: var(--text-secondary); font-size: 11.5px; }
.mobile-create-option > span:last-child { color: var(--text-muted); font-size: 24px; }
.mobile-create-option:hover, .mobile-create-option:focus-visible { border-color: var(--gold); background: var(--surface-hover); }
.mobile-create-option:focus-visible, .mobile-create-trigger:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mobile-create-switch-form { margin: 0; }
.mobile-create-signin { margin: 10px 4px 0; text-align: center; color: var(--text-muted); font-size: 11.5px; }

/* ---------------------------------------------------------------------- */
/* Forms / auth / dashboard shells                                        */
/* ---------------------------------------------------------------------- */

.auth-page {
    display: flex;
    justify-content: center;
    padding: 56px 20px 80px;
}
.auth-card {
    background: linear-gradient(160deg, var(--surface), var(--surface-2));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 36px;
    max-width: 460px;
    width: 100%;
    box-shadow: 0 30px 60px rgba(0,0,0,0.3);
}
.auth-card h1 { font-size: 24px; margin-bottom: 6px; }
.auth-intro { margin-bottom: 22px; }
.auth-mode-tabs,
.auth-dialog-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    margin-bottom: 24px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
}
.auth-mode-tabs a,
.auth-dialog-tabs button {
    min-height: 44px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary);
    font: 700 13px/1 'Inter', sans-serif;
    cursor: pointer;
}
.auth-mode-tabs a.active,
.auth-dialog-tabs button.active,
.auth-dialog-tabs button[aria-selected="true"] { background: var(--surface); color: var(--primary); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.auth-dialog {
    width: min(560px, calc(100vw - 32px));
    max-width: none;
    max-height: min(820px, calc(100dvh - 32px));
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    background: var(--surface);
    color: var(--text-primary);
    box-shadow: 0 34px 100px rgba(0,0,0,.42);
}
.auth-dialog::backdrop { background: rgba(3, 10, 7, .72); backdrop-filter: blur(8px); }
.auth-dialog-shell { display: flex; flex-direction: column; max-height: inherit; }
.auth-dialog-head { position: absolute; top: 12px; right: 14px; z-index: 2; }
.auth-dialog-close { width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 50%; background: var(--surface-2); color: var(--text-secondary); cursor: pointer; font: 300 26px/1 sans-serif; }
.auth-dialog-close:hover { color: var(--text-primary); border-color: var(--border-strong); }
.auth-dialog-tabs { margin: 20px 76px 8px 22px; }
.auth-dialog-body { min-height: 270px; max-height: min(680px, calc(100dvh - 112px)); overflow-y: auto; background: var(--bg); }
.auth-dialog-body .auth-card { max-width: none; padding: 16px 22px 24px; border: 0; background: transparent; box-shadow: none; }
.auth-dialog-body .auth-card h1 { font-size: 21px; }
.auth-dialog-loading { min-height: 320px; display: grid; place-items: center; color: var(--text-secondary); font-size: 13px; }
.auth-dialog-error { min-height: 320px; display: grid; place-items: center; align-content: center; gap: 18px; padding: 30px; text-align: center; }
body:has(.auth-dialog[open]) { overflow: hidden; }

/* Embedded auth pages retain the real form and security widgets but shed
   duplicate site chrome and heavy outer framing inside the dialog. */
.auth-embed { min-height: 100%; background: var(--bg); }
.auth-embed .skip-link { display: none; }
.auth-embed .auth-page { min-height: 100%; align-items: flex-start; padding: 16px 18px 28px; }
.auth-embed .auth-card { max-width: 500px; padding: 12px 18px 24px; border: 0; background: transparent; box-shadow: none; }
.auth-embed .auth-card h1 { font-size: 21px; }
.auth-embed .auth-intro { margin-bottom: 18px; }
@media (max-width: 860px) {
    .header-post-ad { display: none !important; }
}
@media (max-width: 560px) {
    .auth-page { padding: 24px 14px 92px; }
    .auth-card { padding: 24px 18px; }
    .auth-card h1 { font-size: 22px; }
    .auth-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 14px; }
    .auth-dialog-tabs { margin: 12px 64px 6px 12px; }
    .auth-dialog-body { max-height: calc(100dvh - 82px); }
    .auth-dialog-body .auth-card { padding: 14px 12px 20px; }
    .auth-dialog-head { top: 7px; right: 8px; }
}

/* Honeypot: present in the DOM for bots that fill every field, invisible
   and unreachable by keyboard for real visitors. Never display:none, a
   lot of scrapers specifically skip fields hidden that way. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-group { margin-bottom: 16px; }
.form-group label, .form-group-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 7px;
}
.form-group input:not([type="checkbox"]):not([type="radio"]), .form-group select, .form-group textarea {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-size: 14.5px;
    font-family: inherit;
    appearance: none;
}
.form-group textarea { resize: vertical; min-height: 110px; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--gold);
}
.form-group input:focus-visible, .form-group select:focus-visible, .form-group textarea:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}
.form-group input[type="checkbox"], .form-group input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--gold);
    cursor: pointer;
    flex-shrink: 0;
}
.form-row { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; min-width: 0; }
/* A 3-field row (Make/Model/Year) had no stacking rule at all below this
   width, squeezing every field into an unusably narrow column on a phone.
   Two fields still fit side by side down to 480px; three or more need the
   narrower breakpoint too, hence two steps. */
@media (max-width: 560px) {
    .form-row { flex-wrap: wrap; }
    .form-row .form-group { flex: 1 1 100%; }
}
.form-hint { font-size: 12.5px; color: var(--text-muted); margin-top: 6px; }

.role-toggle { display: grid; grid-template-columns: 1fr 36px 1fr; align-items: center; gap: 8px; margin: 0 0 18px; padding: 0; border: 0; }
.role-option {
    flex: 1;
    min-width: 68px;
    text-align: center;
    padding: 16px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.role-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.role-option .role-title { font-weight: 600; font-size: 14.5px; }
.role-option .role-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.role-option.active { border-color: var(--gold); background: rgba(201, 165, 92, 0.08); }
.role-option:has(input:checked) { border-color: var(--gold); background: rgba(201, 165, 92, 0.08); }
.role-switch-mark { display: grid; place-items: center; color: var(--text-muted); }
.registration-step[hidden] { display: none !important; }
.wizard-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--text-muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.wizard-progress-bar { flex: 1; height: 3px; overflow: hidden; border-radius: 999px; background: var(--border); }
.wizard-progress-bar > span { display: block; width: 50%; height: 100%; background: var(--primary); transition: width var(--motion-base) var(--ease-out); }
.registration-location { margin: -5px 0 14px; color: var(--text-muted); font-size: 11.5px; }
.registration-actions { display: grid; grid-template-columns: .42fr 1fr; gap: 10px; }
.registration-actions .btn { min-height: 46px; }
@media (max-width: 420px) {
    .role-option { padding: 13px 8px; }
    .auth-mode-tabs { margin-bottom: 18px; }
}

/* Post-ad wizard */
.wizard-step:not([hidden]) {
    animation: wizardStepIn var(--motion-base) var(--ease-out);
}
@keyframes wizardStepIn {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
}
.wizard-steps {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 26px;
}
.wizard-step-dot {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}
.wizard-step-dot span {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.wizard-step-dot.active { color: var(--text-primary); }
.wizard-step-dot.active span { background: var(--gold); border-color: var(--gold); color: var(--on-accent); }
.wizard-step-dot.done span { background: rgba(63, 174, 106, 0.16); border-color: var(--success); color: var(--success); }
.wizard-step-line { flex: 1; height: 1px; background: var(--border-strong); min-width: 12px; }
@media (max-width: 480px) {
    .wizard-step-dot span { width: 20px; height: 20px; }
    .wizard-step-dot { font-size: 0; gap: 0; }
    .wizard-step-dot span { font-size: 11px; }
}

.wizard-nav-row { display: flex; gap: 10px; margin-top: 8px; }
.wizard-nav-row .btn { flex: 1; }

.wizard-step-heading {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.wizard-step-heading > span {
    display: block;
    margin-bottom: 5px;
    color: var(--gold);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.wizard-step-heading h2 { margin: 0; font-size: clamp(20px, 2.4vw, 26px); }
.wizard-step-heading p {
    max-width: 620px;
    margin: 6px 0 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.55;
}

.wizard-review-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
}
.wizard-review-title { font-family: 'Fraunces', 'Georgia', serif; font-size: 18px; margin-bottom: 6px; }
.wizard-review-line { font-size: 13.5px; color: var(--text-secondary); margin-top: 2px; }
.wizard-review-line:last-child { color: var(--gold); font-weight: 600; margin-top: 8px; }

.alert {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    margin-bottom: 20px;
}
.alert-danger { background: rgba(224, 85, 74, 0.12); border: 1px solid rgba(224, 85, 74, 0.3); color: #ff9d94; }
.alert-success { background: rgba(63, 174, 106, 0.12); border: 1px solid rgba(63, 174, 106, 0.3); color: #7be0a0; }
.alert-info { background: rgba(201, 165, 92, 0.1); border: 1px solid var(--border-strong); color: var(--text-secondary); }
.alert-info strong { color: var(--gold); }
.auth-foot { text-align: center; margin-top: 20px; font-size: 14px; color: var(--text-secondary); }
.auth-foot a { color: var(--gold); font-weight: 600; }

/* Dashboard shell. Owner direction: match new Naijack's dashboard
   sidebar exactly - fixed to the true edges of the browser window (top:0,
   bottom:0), not a bordered card sitting with a gap/margin around it.
   Since the sidebar is now position:fixed (out of grid flow entirely),
   .dash-layout no longer reserves a grid column for it - margin-left
   makes room for it instead. */
.ackin-shell {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 24px;
}
.ackin-shell .dash-layout { margin-left: 244px; }
.ackin-shell .dash-nav { padding-top: 0; }
.ackin-shell .dash-topbar {
    position: sticky;
    top: 0;
    z-index: 45;
    padding-top: 5px;
    padding-bottom: 7px;
    background: rgba(6, 7, 11, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.dash-layout {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 28px;
    row-gap: 20px;
    align-items: start;
    margin-left: 248px;
}
/* Grid items get an implicit min-width:auto, meaning a track can never
   shrink below its content's own natural minimum width unless told
   otherwise — the 1fr content column was measuring out at ~500px on a
   390px phone (confirmed via getComputedStyle().gridTemplateColumns)
   because something inside it (a stat grid, a focus-list, ...) couldn't
   shrink below that, and with only one column the WHOLE grid — sidebar,
   topbar, everything — got dragged wider than the viewport to match.
   Same root cause as the minmax(0,1fr) fix elsewhere on this site, one
   level up: at the grid-track level instead of inside a single grid's
   own minmax(). */
.dash-layout > * { min-width: 0; }
@media (max-width: 860px) {
    .dash-layout { grid-template-columns: 1fr; margin-left: 0; }
    .ackin-shell {
        padding-left: 16px;
        padding-right: 16px;
    }
    .ackin-shell .dash-layout { margin-left: 0; }
    .ackin-shell .dash-topbar { top: 0; }
    .ackin-shell .dash-nav-brand { height: 51px; }
}
@media (max-width: 480px) {
    .ackin-shell {
        padding-left: 12px;
        padding-right: 12px;
    }
}
/* includes/footer.php: same 248px offset as .dash-layout above, on the
   same breakpoint, so the footer's left edge lines up with the dashboard
   content column instead of running full-width underneath the fixed
   sidebar. See the comment in footer.php for why this is scoped via
   $showDashNavToggle rather than a new flag. */
.dash-shell-footer-container {
    max-width: none;
    margin-inline: 0;
    padding-inline: 0 24px;
}
.dash-shell-footer-inner { margin-left: 248px; }
@media (max-width: 860px) {
    .dash-shell-footer-container { padding-inline: 14px; }
    .dash-shell-footer-inner { margin-left: 0; }
}
/* The minimal dash-shell footer (copyright + legal links only, no
   .footer-grid) has no existing link styling to inherit - the global
   `a { color: inherit; }` reset would otherwise render these links
   indistinguishable from the plain copyright text next to them. */
.dash-shell-footer-inner .footer-bottom a { color: var(--text-secondary); }
.dash-shell-footer-inner .footer-bottom a:hover { color: var(--gold); }
/* messages.php's own real 2-column split (thread list beside the open
   conversation), sitting inside the same real fixed sidebar + margin-
   left offset every other dash-shell page uses (owner direction, live:
   the sidebar was missing here entirely before - this page used to
   hand-roll its own one-off topbar with no nav links at all). The
   thread-list pane gets its own border/padding styling directly (see
   .messages-thread-pane below) rather than reusing .dash-nav, which
   would now collide with the real fixed sidebar sharing that class. */
.messages-shell { grid-template-columns: 300px 1fr; margin-left: 248px; }
@media (max-width: 860px) {
    .messages-shell { grid-template-columns: 1fr; margin-left: 0; }
}
/* Real bug, caught live via owner screenshot: dash-nav.php's own tail
   include of dash-topbar.php renders .dash-topbar-wrap as a normal
   in-flow div - on every other dash-shell page that's fine, since
   .dash-layout there is a single 1fr column and everything just stacks
   in it. .messages-shell is the one .dash-layout with TWO real grid
   columns (300px thread list + 1fr conversation), so without this the
   topbar itself was landing in column 1 - squeezed into the 300px
   track, overlapping the email-verification banner instead of sitting
   in its own full-width row above both panes. */
.messages-shell .dash-topbar-wrap { grid-column: 1 / -1; }
.dash-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(4, 5, 8, 0.65);
    z-index: 998;
}
.dash-nav-overlay.open { display: block; }
.dash-nav {
    background: var(--surface);
    border: none;
    border-right: 1px solid var(--border);
    border-radius: 0;
    padding: 0 12px 12px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 220px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 50;
}
.dash-nav-bottom { padding-top: 8px; }
/* messages.php's thread-list pane - a normal in-flow grid item (the
   .messages-shell column above is what sizes it), styled to match
   .dash-nav's own border/radius look without sharing that class, which
   now belongs to the real fixed sidebar rendered alongside it. */
.messages-thread-pane {
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
/* Owner direction (live, explicit): the admin/moderator panel's
   sidebar/header must look and behave exactly like the rest of the
   dashboard, not a visually different variant of it - "that is the
   same way you're supposed to do this admin dashboard, also for
   moderator." Admin/moderator (ackin/_header.php) used to run its own
   special-cased layout here: a real two-column CSS Grid with the
   sidebar as position:sticky and grid-row:span 2, kept deliberately
   different from the buyer/seller fixed-sidebar/margin-left system
   after an earlier accidental-inheritance incident. That divergence is
   also what caused two separate real bugs fixed earlier this session
   (a blank gap on mobile, then a second blank gap on desktop) - both
   were symptoms of the same root cause: a sidebar/topbar pairing that
   behaves differently from every other dashboard page sharing the same
   class names. Removed the .ackin-shell-specific .dash-layout/.dash-nav
   overrides entirely - admin now inherits the exact same fixed,
   edge-to-edge sidebar + margin-left content column as buyer/seller,
   with zero special-casing left to drift out of sync again. */
.dash-nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Fraunces', 'Georgia', serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.01em;
    padding: 6px 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
/* Owner (live, caught again after the icon-cluster/search-form sizes
   changed): the brand box's border-bottom and .dash-topbar's border-
   bottom are meant to read as one continuous straight line across the
   top of the page. Matching padding alone (see .dash-topbar's own
   comment) isn't enough on its own once the two rows hold different-
   height content - the brand row's tallest child is the 28px logo
   mark, while the topbar row's tallest child is the 40px search box.
   Pinning both boxes to the same explicit border-box height removes
   that dependency entirely so the line stays aligned regardless of
   which icons/search form happen to render on a given page. Scoped to
   the same >860px breakpoint the topbar search already uses - mobile
   keeps its own auto-height/wrap behavior untouched (separate design,
   still pending from the owner). */
@media (min-width: 861px) {
    /* Now applies identically to admin/moderator too, now that
       .ackin-shell no longer runs a different grid-based layout (see
       the removed .ackin-shell .dash-layout/.dash-nav overrides above)
       - .dash-nav-brand and .dash-topbar are genuine siblings in the
       same single-column flex layout everywhere now, so this border-
       alignment trick just works the same way for every dashboard
       instead of needing its own admin-specific override. */
    .dash-nav-brand,
    .dash-topbar,
    .ackin-shell .dash-nav-brand,
    .ackin-shell .dash-topbar {
        height: 60px;
        min-height: 60px;
    }
}
.dash-nav-brand .brand-mark {
    width: 28px;
    height: 28px;
    border-radius: 3px;
    background: linear-gradient(135deg, var(--gold), var(--gold-bright));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--on-accent);
    font-weight: 800;
    font-size: 13px;
    flex-shrink: 0;
}
.dash-nav-brand .brand-jack { color: var(--gold); }
/* Fills the remaining space between the brand box and .dash-nav-bottom,
   scrolling internally if a role's own link set is taller than that
   (owner direction: match new Naijack's sidebar exactly - it scrolls the
   nav list in place rather than a separate collapse/expand button). */
.dash-nav-links { flex: 1; overflow-y: auto; }
@media (max-width: 860px) {
    .dash-nav {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 999;
        width: 280px;
        max-width: 82vw;
    }
    .dash-nav.open { transform: translateX(0); }
}
.dash-nav a,
.dash-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
    margin-bottom: 2px;
    position: relative;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
/* Elite rebuild (AckinGlobal reference, owner-approved): a thin gold
   accent bar that grows in from the middle on hover/active, rather than
   a flat background swap being the only signal - same micro-interaction
   language the reference's own sidebar uses. */
.dash-nav a::before,
.dash-nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 999px;
    background: transparent;
    transform: scaleY(0.5);
    transition: background 0.25s ease, transform 0.25s ease;
}
.dash-nav a:hover,
.dash-nav-link:hover { background: var(--surface-hover); color: var(--text-primary); transform: translateX(1px); }
.dash-nav a:hover::before,
.dash-nav-link:hover::before { background: var(--border-strong); transform: scaleY(1); }
.dash-nav a.active,
.dash-nav-link.active { background: rgba(201, 165, 92, 0.1); color: var(--gold-bright); }
.dash-nav a.active::before,
.dash-nav-link.active::before { background: var(--gold); transform: scaleY(1); }
.dash-nav-link-btn {
    background: none;
    border: none;
    width: 100%;
    font-family: inherit;
    cursor: pointer;
}
.dash-nav-badge {
    margin-left: auto;
    background: var(--gold);
    color: var(--on-accent);
    font-size: 10px;
    font-weight: 700;
    min-width: 17px;
    height: 17px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    flex-shrink: 0;
}
.dash-nav-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 14px 14px 6px;
}
.dash-nav-label:first-child { padding-top: 4px; }

/* ---------------------------------------------------------------------- */
/* Storefront                                                              */
/* ---------------------------------------------------------------------- */

.storefront-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
}

/* Desktop/laptop: the seller's own identity, stats and credentials pin in
   place on the left while their ads and reviews scroll independently on
   the right — a buyer never loses track of who they're dealing with
   while browsing a large catalog. Below the breakpoint this collapses
   back to a single stacked column with nothing sticky, same as always —
   a phone screen has no spare width for a sidebar to make sense in. */
.storefront-layout {
    display: grid;
    grid-template-columns: minmax(260px, 300px) 1fr;
    align-items: start;
    gap: 28px;
}
.storefront-sidebar {
    position: sticky;
    /* .site-header is itself sticky at 68px tall (see .site-header
       .container); this offset seats the sidebar just below it rather
       than overlapping. */
    top: 88px;
}
.storefront-main { min-width: 0; }
@media (max-width: 960px) {
    .storefront-layout { display: block; }
    .storefront-sidebar { position: static; top: auto; }
}

/* Reputation score: built entirely from real, already-tracked signals
   (see getSellerReputationScore()) — never a made-up starting number, so
   a seller with no reviews/deals yet gets the honest .reputation-pill-new
   state instead of a misleading percentage. */
.reputation-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: help; margin-bottom: 8px; }
.reputation-score { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 26px; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
/* Audit finding (owner-directed full-platform pass): no mobile step on
   the storefront's own reputation number. */
@media (max-width: 480px) {
    .reputation-score { font-size: 21px; }
}
.reputation-pill {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.reputation-pill-excellent { background: rgba(63, 174, 106, 0.12); color: var(--success); border: 1px solid rgba(63, 174, 106, 0.3); }
.reputation-pill-good { background: rgba(201, 165, 92, 0.12); color: var(--gold); border: 1px solid var(--border-strong); }
.reputation-pill-fair, .reputation-pill-building-trust, .reputation-pill-new { background: rgba(140, 147, 166, 0.1); color: var(--text-muted); border: 1px solid var(--border); }
.reputation-bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.reputation-bar-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.reputation-bar-fill-excellent { background: var(--success); }
.reputation-bar-fill-good { background: var(--gold); }
.reputation-bar-fill-fair, .reputation-bar-fill-building-trust { background: var(--text-muted); }
.reputation-breakdown { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 10px; font-size: 12px; color: var(--text-secondary); }
.panel-section-safety {
    background: rgba(201, 165, 92, 0.04);
    border-radius: 0 0 var(--radius) var(--radius);
    transition: background-color 0.6s var(--ease-out);
}
.panel-section-safety.safety-highlight { background-color: rgba(201, 165, 92, 0.16); }
.panel-safety-heading {
    margin-bottom: 12px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.panel-safety-list { margin: 0; padding: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.6; }
.panel-safety-list li { position: relative; padding-left: 18px; margin-bottom: 10px; }
.panel-safety-list li:last-child { margin-bottom: 0; }
.panel-safety-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    background: var(--gold);
    border-radius: 1px;
}
.panel-safety-more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gold);
    transition: gap var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.panel-safety-more:hover { color: var(--gold-bright); gap: 8px; }

.report-ad-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--danger);
    opacity: 0.85;
    font-size: 13px;
    margin-top: 12px;
    transition: opacity var(--motion-fast) var(--ease-out);
}
.report-ad-link:hover { opacity: 1; }
.storefront-header-avatar {
    padding: 3px;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    flex-shrink: 0;
}
.storefront-verification-list { display: flex; flex-direction: column; gap: 2px; }
.storefront-verification-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}
.storefront-verification-row:last-child { border-bottom: none; }
.storefront-verification-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 11px;
}
.storefront-verification-icon.pass { background: rgba(63, 174, 106, 0.14); color: var(--success); }
.storefront-verification-icon.gold-pass { background: rgba(201, 165, 92, 0.14); color: var(--gold); }
.storefront-verification-icon.fail { background: var(--surface-2); color: var(--text-muted); }

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}
.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.stat-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.stat-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(201, 165, 92, 0.08);
    border: 1px solid var(--border-strong);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.stat-card.stat-card-attention .stat-card-icon {
    background: rgba(224, 85, 74, 0.08);
    border-color: rgba(224, 85, 74, 0.35);
    color: var(--danger);
}
.stat-card-body { min-width: 0; }
.stat-card .stat-value {
    font-family: 'Fraunces', 'Georgia', serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.15;
}
/* Audit finding (owner-directed full-platform pass): this one rule is
   shared by .stat-card grids across admin, moderator, the buyer request
   pipeline, Refer & Earn, and seller-analytics - none of them had a
   mobile step. The grid's own repeat(auto-fit, minmax(160px,1fr))
   already collapses to fewer columns on a phone so nothing overflows,
   but the number itself stayed desktop-sized inside a full-width card. */
@media (max-width: 480px) {
    .stat-card .stat-value { font-size: 21px; }
}
/* Only for the handful of .stat-value instances holding a ₦ amount (see
   .ad-card-price for why Fraunces + the Naira glyph don't mix) — every
   other .stat-value (counts, ratings, percentages) keeps the serif. */
.stat-card .stat-value.stat-value-money {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-variant-numeric: tabular-nums;
}
.stat-card .stat-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 4px;
}

/* ---------------------------------------------------------------------- */
/* Seller dashboard: trend chart, lead inbox, insight panels             */
/* ---------------------------------------------------------------------- */

.dash-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 22px;
    margin-bottom: 24px;
}
.dash-panel h3 { font-size: 15px; margin: 0; }
/* Logged-in workspaces are application shells, not centred marketing-page
   containers. Keeping the generic .container 1240px cap here created an
   extra 95px outer margin on a 1440px display, on top of the 248px space
   already reserved for the fixed sidebar. The result was a measured 143px
   dead strip between navigation and working content. Let the dashboard use
   the viewport and retain only the intentional 24px content gutter. */
.user-dashboard {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: 24px 24px 48px 0;
}
.dashboard-identity {
    padding: 18px 20px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: linear-gradient(145deg, var(--surface), rgba(201,165,92,.035));
}
.storefront-cover {
    width: 100%;
    aspect-ratio: 4 / 1;
    min-height: 170px;
    max-height: 300px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--surface);
    background-position: center;
    background-size: cover;
}
.seller-cover-editor {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.account-avatar-editor {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 16px 0 20px;
}
.account-avatar-editor form,
.account-avatar-editor .form-group { margin: 0; }
.account-avatar-preview {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--gold);
    background: var(--surface-2);
}
.account-avatar-fallback {
    display: grid;
    place-items: center;
    color: var(--gold);
    font-size: 30px;
    font-weight: 700;
}
@media (max-width: 480px) {
    .account-avatar-editor { grid-template-columns: 1fr; }
}
.seller-cover-editor h3 { margin: 0 0 6px; }
.seller-cover-preview {
    width: 100%;
    aspect-ratio: 4 / 1;
    min-height: 110px;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin: 14px 0;
}
@media (max-width: 560px) {
    .storefront-cover { min-height: 120px; aspect-ratio: 2.4 / 1; border-radius: var(--radius-sm); }
    .seller-cover-preview { min-height: 96px; aspect-ratio: 2.4 / 1; }
}
.ad-card-price-row { margin-top: auto; padding-top: 4px; }
@media (max-width: 560px) {
    .search-suggest-panel {
        position: fixed;
        top: 72px;
        left: 10px;
        right: 10px;
        max-height: calc(100dvh - 88px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .search-suggest-result { padding: 8px 6px; }
    .search-suggest-result-img { width: 46px; height: 46px; }
}
.dashboard-identity-copy { min-width: 0; }
.dash-page-intro { margin-bottom: 22px; }
.dash-page-intro h1 { margin-bottom: 6px; }
.dash-page-intro p { max-width: 760px; margin: 0; }
.garage-add-panel { padding: 22px; }
.garage-add-panel h2,
.garage-section h2 { margin: 0 0 5px; font-size: 20px; }
.garage-add-panel .text-secondary,
.garage-section .text-secondary { margin: 0; }
.garage-form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.garage-section { margin-top: 28px; }
.garage-vehicle-grid,
.garage-match-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.garage-vehicle-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 17px 18px;
}
.garage-vehicle-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    color: var(--gold);
    background: rgba(201, 165, 92, .1);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
}
.garage-vehicle-copy { flex: 1; min-width: 0; }
.garage-vehicle-copy h3 { margin: 0 0 3px; font-size: 15px; overflow-wrap: anywhere; }
.garage-vehicle-copy p { margin: 0; color: var(--text-secondary); font-size: 13px; }
.garage-match-card {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    padding: 18px;
    text-decoration: none;
}
.garage-match-card strong { overflow-wrap: anywhere; }
.garage-match-link { margin-top: 4px; color: var(--gold); font-size: 13px; font-weight: 600; }
@media (max-width: 1100px) {
    .garage-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .garage-add-panel { padding: 17px; }
    .garage-form-grid,
    .garage-vehicle-grid,
    .garage-match-grid { grid-template-columns: 1fr; }
    .garage-vehicle-card { align-items: flex-start; }
}
.dashboard-identity-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 5px;
    overflow-wrap: anywhere;
}
.dashboard-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 24px;
    align-items: stretch;
}
.dashboard-action-panel { margin-bottom: 0 !important; min-width: 0; height: 100%; }
.dash-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}
.dash-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}
.dash-two-col > * { min-width: 0; }
.dash-two-col > .dash-panel { height: 100%; }
.dash-two-col.dashboard-balanced-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}
.dashboard-balanced-row > .dash-panel { height: 100%; min-width: 0; }
@media (max-width: 900px) {
    .dash-two-col,
    .dash-two-col.dashboard-balanced-row { grid-template-columns: 1fr; }
    .dashboard-action-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .user-dashboard { padding-top: 14px; padding-left: 14px; padding-right: 14px; }
    .dashboard-identity { padding: 15px; align-items: flex-start; }
    .dashboard-identity .dash-profile-avatar { width: 42px; height: 42px; }
    .dashboard-action-grid { gap: 14px; margin-bottom: 18px; }
}

/* "Today's Focus": one glanceable checklist of everything across the
   platform waiting on a seller, so they never have to remember to check
   five separate pages. Deliberately styled with a stronger gold-tinted
   border than a plain .dash-panel — it's meant to read as the first thing
   you look at, not one panel among many. */
.focus-panel {
    background: linear-gradient(160deg, var(--surface) 0%, rgba(201,165,92,0.04) 100%);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 20px 22px;
}
.focus-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}
.focus-panel-head h3 { font-size: 15px; margin: 0; }
.focus-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}
/* minmax(240px, ...) with 2+ items demands 480px+ of row width — on a
   real phone that forces the WHOLE page wider than the viewport, not
   just this grid, the same "fixed minimum width drags the entire
   viewport wider" bug already hit and fixed elsewhere on this site
   (see .plan-grid-tiers). Single column below the point where two real
   240px tracks can no longer both fit. */
@media (max-width: 520px) {
    .focus-list { grid-template-columns: 1fr; }
}
.focus-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    text-decoration: none;
    color: var(--text-primary);
    transition: border-color var(--motion-fast) ease, transform var(--motion-fast) ease, background var(--motion-fast) ease;
}
.focus-item:hover { border-color: var(--gold); background: var(--surface-hover); transform: translateY(-1px); }
.focus-item-count {
    flex-shrink: 0;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(201, 165, 92, 0.16);
    color: var(--gold);
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.focus-item-label { flex: 1; font-size: 13.5px; font-weight: 500; }
.focus-item-arrow { flex-shrink: 0; color: var(--text-muted); transition: transform var(--motion-fast) ease; }
.focus-item:hover .focus-item-arrow { transform: translateX(2px); color: var(--gold); }
.focus-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 13.5px;
    padding: 6px 0;
}
.focus-empty svg { color: var(--success); flex-shrink: 0; }

.chart-legend { display: flex; gap: 16px; }
.chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}
.chart-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.chart-legend-dash { border-radius: 2px; height: 3px; width: 12px; }

.funnel { display: flex; flex-direction: column; gap: 14px; padding: 6px 0; }
.funnel-row {
    display: grid;
    grid-template-columns: 68px 1fr 64px 44px;
    align-items: center;
    gap: 12px;
}
.funnel-label { font-size: 12.5px; color: var(--text-secondary); font-weight: 600; }
.funnel-bar-track {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    height: 12px;
    overflow: hidden;
}
.funnel-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--gold) 0%, var(--gold-bright) 100%);
    border-radius: var(--radius-sm);
    transition: width 0.4s ease;
}
.funnel-value { font-size: 13.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.funnel-conv { font-size: 11px; color: var(--text-muted); text-align: right; }
@media (max-width: 480px) {
    .funnel-row { grid-template-columns: 56px 1fr 50px 36px; gap: 8px; }
    .funnel-label { font-size: 11.5px; }
}

.trend-chart { width: 100%; height: auto; overflow: visible; }
.trend-gridline { stroke: var(--border); stroke-width: 1; }
.trend-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.trend-line-views { stroke: var(--gold); }
.trend-line-contacts { stroke: var(--blue); stroke-dasharray: 5 4; }
.trend-hover-dot { fill: transparent; }
.trend-hover-dot:hover { fill: rgba(255, 255, 255, 0.06); }
.trend-end-ring { fill: var(--surface); }
.trend-end-marker { }
.trend-end-views { fill: var(--gold); }
.trend-end-contacts { fill: var(--blue); }
.trend-end-label {
    font-size: 11px;
    font-weight: 600;
    fill: var(--text-primary);
    font-family: 'Inter', sans-serif;
}
.trend-axis-label {
    font-size: 10.5px;
    fill: var(--text-muted);
    font-family: 'Inter', sans-serif;
}

.lead-inbox { display: flex; flex-direction: column; gap: 2px; }
.lead-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: 10px;
    padding: 10px 8px;
    border-radius: 3px;
    border-left: 3px solid var(--border-strong);
    text-decoration: none;
}
.lead-item:hover { background: var(--surface-2); }
.lead-item.lead-offer { border-left-color: var(--gold); }
.lead-item.lead-message { border-left-color: var(--blue); }
.lead-item.lead-financing { border-left-color: var(--gold); }
.lead-item.lead-escrow { border-left-color: var(--success); }
.lead-item.lead-escrow_dispute { border-left-color: var(--danger); }
.lead-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    white-space: nowrap;
}
.lead-text {
    font-size: 13px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lead-time { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
@media (max-width: 560px) {
    .lead-item { grid-template-columns: 1fr; gap: 2px; }
}

.insight-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    font-size: 13px;
    color: var(--text-primary);
}
.insight-row:last-child { border-bottom: none; }
.insight-row:hover span:first-child { color: var(--gold); }

.bar-list { display: flex; flex-direction: column; gap: 10px; }
.bar-list-row {
    display: grid;
    grid-template-columns: 90px 1fr 34px;
    align-items: center;
    gap: 10px;
}
.bar-list-label {
    font-size: 12.5px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bar-list-track {
    background: var(--surface-2);
    border-radius: 3px;
    height: 8px;
    overflow: hidden;
}
.bar-list-fill {
    background: var(--gold);
    height: 100%;
    border-radius: 3px;
}
.bar-list-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
}
@media (max-width: 480px) {
    .bar-list-row { grid-template-columns: 70px 1fr 28px; }
}

/* feedback:12 rebuild: real CSS-only donut for Inventory Status - no
   canvas/JS chart library, the conic-gradient stops are computed in PHP
   from each status's real share of the seller's actual listing count. */
.donut-chart-row { display: flex; align-items: center; gap: 20px; }
.donut-chart {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}
.donut-chart-hole {
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.donut-chart-hole-value { font-size: 22px; font-weight: 700; font-family: 'Fraunces', serif; line-height: 1; }
.donut-chart-hole-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.donut-legend { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.donut-legend-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.donut-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.donut-legend-label { color: var(--text-secondary); flex: 1; }
.donut-legend-value { font-weight: 600; color: var(--text-primary); }
@media (max-width: 480px) {
    .donut-chart-row { flex-direction: column; align-items: flex-start; gap: 16px; }
    .donut-chart-hole-value { font-size: 18px; }
}

/* KPI card with a real trend/context line under the number - used by the
   top-of-dashboard 4-card row (Inventory/Leads/Opportunities/Offers) and
   the Performance Overview row (Views/Contacts), both fed real computed
   values, never a fabricated delta. */
.kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.kpi-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.kpi-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.kpi-card-label { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.kpi-card-icon {
    width: 26px; height: 26px; border-radius: 7px;
    background: rgba(201, 165, 92, 0.12); color: var(--gold);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.kpi-card-value { font-size: 26px; font-weight: 700; font-family: 'Fraunces', serif; line-height: 1.1; }
.kpi-card-context { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.kpi-card-context.is-positive { color: var(--success); }
.kpi-card-context.is-attention { color: var(--gold); }

/* Admin command centre: priority work stays compact and actionable while
   secondary marketplace-health metrics live in one scan-friendly strip. */
.admin-command-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin: 4px 0 22px;
}
.admin-command-head h1 { margin: 5px 0 6px; }
.admin-command-head p { color: var(--text-secondary); max-width: 720px; margin: 0; line-height: 1.55; }
.admin-command-eyebrow {
    color: var(--gold);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.admin-command-actions { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
.admin-priority-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 14px; }
.admin-kpi-link { color: inherit; text-decoration: none; min-width: 0; }
.admin-kpi-link.is-attention { border-color: rgba(224, 169, 59, .34); background: linear-gradient(145deg, var(--surface), rgba(201,165,92,.045)); }
.admin-health-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    margin-bottom: 24px;
    overflow: hidden;
}
.admin-health-strip > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 13px 16px;
    border-right: 1px solid var(--border);
}
.admin-health-strip > div:last-child { border-right: 0; }
.admin-health-strip span { color: var(--text-muted); font-size: 11.5px; }
.admin-health-strip strong { color: var(--text-primary); font-size: 16px; font-variant-numeric: tabular-nums; }
.admin-insights-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, .85fr);
    gap: 20px;
    align-items: stretch;
}
.admin-insights-grid > .dash-panel { min-width: 0; height: calc(100% - 24px); }
.admin-insights-grid > .dash-panel:only-child { grid-column: 1 / -1; }
.admin-market-panel { height: calc(100% - 24px); }
.admin-operations-grid { align-items: stretch; }
.admin-operations-grid > .dash-panel {
    height: calc(100% - 24px);
    min-width: 0;
}
.admin-risk-queue-panel {
    display: flex;
    flex-direction: column;
}
.admin-risk-queue-empty {
    flex: 1;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.admin-market-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}
.admin-market-split section { min-width: 0; }
.admin-market-split section + section { border-left: 1px solid var(--border); padding-left: 22px; }
.admin-empty-compact { padding: 26px 18px; min-height: 0; }
.admin-notification-btn,
.admin-topbar-action {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    background: var(--surface);
}
.admin-notification-btn:hover,
.admin-topbar-action:hover { color: var(--gold); border-color: var(--border-strong); background: var(--surface-hover); }
.admin-notification-btn:focus-visible,
.admin-topbar-action:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.admin-compose-announcement {
    color: var(--bg);
    background: var(--gold);
    border-color: var(--gold);
}
.admin-compose-announcement:hover { color: var(--bg); background: var(--gold-bright); border-color: var(--gold-bright); }
.admin-notification-count {
    position: absolute;
    top: -5px;
    right: -6px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--danger-surface);
    color: #fff;
    border: 2px solid var(--bg);
    font-size: 9px;
    font-weight: 700;
}
@media (max-width: 1080px) {
    .admin-priority-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-health-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-health-strip > div:nth-child(2) { border-right: 0; }
    .admin-health-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
    .admin-insights-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .admin-command-head { align-items: flex-start; flex-direction: column; }
    .admin-command-actions { width: 100%; }
    .admin-command-actions .btn { flex: 1; justify-content: center; }
    .admin-priority-grid { grid-template-columns: 1fr; }
    .admin-health-strip { grid-template-columns: 1fr; }
    .admin-health-strip > div { border-right: 0; border-bottom: 1px solid var(--border); }
    .admin-health-strip > div:last-child { border-bottom: 0; }
    .admin-market-split { grid-template-columns: 1fr; }
    .admin-market-split section + section { border-left: 0; border-top: 1px solid var(--border); padding: 18px 0 0; }
}
@media (max-width: 560px) {
    .ackin-shell .dash-topbar-title { display: none; }
    .ackin-shell .dash-topbar-left { flex: 0 0 auto; }
    .ackin-shell .dash-topbar-right { gap: 6px; }
    .admin-notification-btn,
    .admin-topbar-action { width: 34px; height: 34px; }
}
/* .stat-grid's own repeat(auto-fit, minmax(160px, 1fr)) technically still
   fits 2 columns from ~391px up (2*160 + 16px gap = 336px), but a
   .kpi-card's richer content (icon + 26px Fraunces number + label +
   context line) reads cramped/wrapped in a ~170px column - the plainer
   .stat-card this grid was originally sized for doesn't carry that much
   content. Single column through the same 480/560px range the rest of
   the dashboard already treats as "small mobile," on the .stat-grid-kpi
   marker class only, so the existing admin/moderator/buyer-pipeline
   .stat-card grids elsewhere are untouched. */
@media (max-width: 560px) {
    .stat-grid-kpi:not(.buyer-kpi-rail) { grid-template-columns: 1fr; }
    /* Owner direction (live): mobile fonts generally read too large
       across the dashboard, not styled down from desktop the way the
       rest of the site already is - .kpi-card-value's 26px Fraunces
       number was one of the more prominent offenders (4+ of these per
       dashboard). */
    .kpi-card-value { font-size: 21px; }
}

/* Elite rebuild: "Performance Overview" as one dense panel of inline
   metric columns (owner's reference: Views/Contacts/Leads/Sales side
   by side inside a single bordered box, directly above its own trend
   chart) rather than three separate full .kpi-card boxes competing
   visually with the top KPI row. */
.performance-metrics-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}
.performance-metric { flex: 1; min-width: 120px; }
.performance-metric-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.performance-metric-value { font-size: 24px; font-weight: 700; font-family: 'Fraunces', serif; line-height: 1.1; }
.performance-metric-delta { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
.performance-metric-delta.is-positive { color: var(--success); }
@media (max-width: 560px) {
    .performance-metrics-row { gap: 16px 20px; }
    .performance-metric { min-width: 45%; }
    .performance-metric-value { font-size: 19px; }
}

/* ---------------------------------------------------------------------- */
/* Buyer dashboard: request pipeline                                     */
/* ---------------------------------------------------------------------- */

.pipeline-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 8px;
}
@media (max-width: 900px) {
    .pipeline-board { grid-template-columns: 1fr; }
}
.pipeline-col {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    min-height: 80px;
}
.pipeline-col-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.pipeline-col-count {
    background: var(--surface-2);
    color: var(--text-secondary);
    border-radius: 3px;
    padding: 1px 8px;
    font-size: 11px;
}
.pipeline-col-count-active { background: rgba(201, 165, 92, 0.14); color: var(--gold); }
.pipeline-card {
    display: block;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border-strong);
    border-radius: 3px;
    padding: 10px 12px;
    margin-bottom: 8px;
    text-decoration: none;
}
.pipeline-card:hover { border-color: var(--gold); }
.pipeline-card-active { border-left-color: var(--gold); }
.pipeline-card-closed { opacity: 0.65; border-left-color: var(--text-muted); }
.pipeline-card-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; }
.pipeline-card-meta { font-size: 11.5px; color: var(--text-muted); }
.pipeline-empty { font-size: 12.5px; color: var(--text-muted); padding: 10px 0; }

.seller-reply-box {
    margin-top: 10px;
    padding: 10px 14px;
    background: var(--surface-2);
    border-left: 3px solid var(--gold);
    border-radius: 3px;
    font-size: 13px;
    color: var(--text-secondary);
}
.seller-reply-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gold);
}
.seller-reply-form {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.seller-reply-form textarea {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: 3px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
}

/* Sentiment summary bar: a quick-glance breakdown derived from the real
   1-5 star ratings already collected (4-5 positive, 3 neutral, 1-2
   negative), not a separate lower-fidelity vote of its own. .stat-value
   inside each pill gets the sitewide animated count-up for free. */
.sentiment-bar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.sentiment-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 20px;
    flex: 1 1 160px;
}
.sentiment-pill .stat-value { font-size: 20px; font-weight: 700; font-family: 'Fraunces', serif; }
.sentiment-label { font-size: 12px; color: var(--text-secondary); }
.sentiment-positive { color: var(--success); }
.sentiment-positive .stat-value { color: var(--success); }
.sentiment-neutral { color: #e0a93b; }
.sentiment-neutral .stat-value { color: #e0a93b; }
.sentiment-negative { color: var(--danger); }
.sentiment-negative .stat-value { color: var(--danger); }

.helpful-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: border-color var(--motion-fast) ease, color var(--motion-fast) ease, background var(--motion-fast) ease;
}
.helpful-btn:hover { border-color: var(--border-strong); color: var(--text-primary); }
.helpful-btn.active {
    color: var(--gold);
    border-color: var(--border-strong);
    background: rgba(201, 165, 92, 0.08);
}
.helpful-btn-count { font-variant-numeric: tabular-nums; }

.bulk-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.bulk-toolbar input[type="number"] {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
}
.bulk-toolbar input[type="number"]:focus { border-color: var(--gold); }
.bulk-toolbar input[type="number"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
    text-align: left;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}
.data-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--surface-hover); }

/* Below 640px, .data-table-responsive tables (Recent Ads, Seller
   Leaderboard, Ads Awaiting Review) collapse from a horizontally-scrolled
   grid into stacked cards, one per row, with each cell's column name
   restored via its data-label attribute. */
@media (max-width: 640px) {
    .data-table-responsive thead { display: none; }
    .data-table-responsive, .data-table-responsive tbody, .data-table-responsive tr, .data-table-responsive td {
        display: block;
        width: 100%;
    }
    .data-table-responsive tr {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        margin-bottom: 12px;
        overflow: hidden;
    }
    .data-table-responsive tr:last-child { margin-bottom: 0; }
    .data-table-responsive td {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px 12px;
        text-align: right;
        border-bottom: 1px solid var(--border);
    }
    /* feedback:11 §22/§14: an action cell can hold several buttons
       (my-listings.php's Renew/Edit/Boost/Sponsor/Mark Sold/Auto-Renew/
       Delete) - without wrap, a nowrap flex row of that many buttons
       would overflow its own card horizontally on a narrow phone. */
    .data-table-responsive td > * { flex-shrink: 0; }
    .data-table-responsive tr:last-child td:last-child { border-bottom: none; }
    .data-table-responsive td::before {
        content: attr(data-label);
        font-size: 11.5px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-muted);
        text-align: left;
    }
    .data-table-responsive td[data-label=""]::before { display: none; }
    .data-table-responsive td[data-label=""] { justify-content: flex-end; }
    /* A colspan cell is an expanded detail/sub-form row (e.g. escrow.php's
       dispute-resolution panel), not a single field - it needs its own
       normal block layout, not the field-row flex treatment above. */
    .data-table-responsive td[colspan] {
        display: block;
        text-align: left;
    }
    .data-table-responsive td[colspan]::before { display: none; }
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.badge-pending { background: rgba(224, 169, 59, 0.14); color: #e0a93b; }
.badge-approved { background: rgba(63, 174, 106, 0.14); color: #5fd18a; }
.badge-rejected { background: rgba(224, 85, 74, 0.14); color: #ff9d94; }
.badge-sold { background: rgba(63, 169, 245, 0.14); color: #7cc4f8; }
.badge-open { background: rgba(63, 169, 245, 0.14); color: #7cc4f8; }
.badge-closed { background: rgba(130, 140, 158, 0.14); color: #9ca1b0; }
.badge-gold { background: rgba(201, 165, 92, 0.14); color: var(--gold); }

/* ---------------------------------------------------------------------- */
/* Escrow order progress                                                  */
/* ---------------------------------------------------------------------- */

.escrow-steps {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.escrow-step {
    flex: 1;
    min-width: 140px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    padding: 10px 8px;
    border-radius: 3px;
    background: var(--surface-2);
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.escrow-step.done {
    background: rgba(63, 174, 106, 0.12);
    color: var(--success);
    border-color: rgba(63, 174, 106, 0.3);
}
@media (max-width: 480px) {
    .escrow-step { min-width: 100%; }
}

.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px;
}
.plan-card {
    background: linear-gradient(160deg, var(--surface), var(--surface-2));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 20px;
    text-align: center;
}
.plan-card.featured { border-color: var(--border-strong); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.4); }
.plan-card .plan-name { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.plan-card .plan-price {
    /* See .ad-card-price: Fraunces renders the ₦ glyph's crossbar too
       bold, reading as a strikethrough. Inter instead. */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: var(--gold);
    margin: 4px 0 2px;
    font-variant-numeric: tabular-nums;
}
/* Audit finding (owner-directed full-platform pass): no mobile step on
   the pricing page's own plan price - the one number most likely to be
   read on a phone, right before a real purchase decision. */
@media (max-width: 480px) {
    .plan-card .plan-price { font-size: 24px; }
}
.plan-card .plan-period { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
.plan-card ul { text-align: left; margin-bottom: 14px; }
.plan-card li {
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13.5px;
    color: var(--text-secondary);
}
.plan-card li:last-child { border-bottom: none; }

/* Cards in the pricing grid are stretched to the row's tallest card (so
   every button lines up, see .plan-card > .btn above) — a tier with
   fewer features than its row-mate would otherwise leave one large dead
   gap sitting right above the button. Making the feature list itself the
   flexible element, and spreading its own <li> rows evenly across
   whatever space it's given, turns that dead gap into generous, even
   breathing room between features instead — every card reads as
   deliberately spaced, not like it ran out of content. */
.plan-grid-tiers .plan-card ul {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-bottom: 12px;
}
/* Deliberately not styled like .btn — a plain text-style toggle so it
   never reads as a second call-to-action competing with the real one
   pinned below it. */
.plan-features-toggle {
    display: block;
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 16px;
    color: var(--gold-bright);
    font-size: 12.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.plan-features-toggle:hover { text-decoration: underline; }
/* Same [hidden]-vs-class-display cascade fight as .plan-price-compare
   and the earlier .plan-save-badge — a plain [hidden] rule loses to any
   same-specificity class rule setting display, no matter which sets it,
   if the class rule is declared later. Codifying the fix everywhere a
   new class sets its own display avoids re-discovering this by accident
   a fourth time. */
.plan-features-toggle[hidden] { display: none; }

/* Billing-cycle toggle above the pricing grid, plus the per-card additions
   (tagline, ribbon, savings badge, current-plan tag, Enterprise treatment)
   introduced when Starter/Pro/Elite/Enterprise each grew from one flat row
   into 4 billing-cycle variants sharing a card. */
.pricing-toggle-wrap { text-align: center; margin: 28px 0 8px; }
.pricing-toggle {
    display: inline-flex;
    gap: 2px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px;
}
.pricing-toggle-btn {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13.5px;
    padding: 9px 18px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.pricing-toggle-btn:hover { color: var(--text-primary); }
.pricing-toggle-btn.active {
    background: linear-gradient(135deg, var(--gold), var(--gold-bright));
    color: var(--on-accent);
}
@media (max-width: 400px) {
    .pricing-toggle-wrap { padding-inline: 14px; }
    .pricing-toggle {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        max-width: 330px;
        border-radius: 10px;
    }
    .pricing-toggle-btn {
        min-width: 0;
        min-height: 44px;
        padding: 8px 10px;
        border-radius: 7px;
    }
}

/* Desktop has no persistent bottom navigation, so Messages remains in the
   header there. Phones use the Inbox tab and must not show a duplicate. */
.global-header-messages-shortcut { display: block; }
@media (max-width: 860px) {
    .global-header-messages-shortcut { display: none !important; }
}

.signed-in-site-header .container {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 0;
    padding-block: 9px;
}
.signed-in-site-header .signed-in-nav-toggle {
    display: none;
    grid-column: 1;
    grid-row: 1;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
}
@media (max-width: 860px) {
    .signed-in-site-header .signed-in-nav-toggle { display: flex; }
}
.signed-in-page-title {
    align-self: center;
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(15px, 2vw, 20px);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.signed-in-site-header .header-actions { grid-column: 3; grid-row: 1; }
.signed-in-site-header .header-search-form {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    max-width: none;
}
.signed-in-site-header .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1001;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 0;
    border-block: 1px solid var(--border-strong);
    background: var(--surface);
    box-shadow: 0 24px 40px rgba(0, 0, 0, .45);
}
.signed-in-site-header .main-nav.open { display: flex; }
.signed-in-site-header .main-nav a { padding: 13px 24px; }

/* Global workspace header: navigation/title first, account controls last,
   with the marketplace search on a stable second row. */
.dash-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px;
    row-gap: 10px;
}
.dash-topbar-left { display: flex !important; grid-column: 1; grid-row: 1; min-width: 0; overflow: hidden; }
.dash-topbar-right { grid-column: 2; grid-row: 1; margin-left: 0; }
.dash-topbar-search { grid-column: 1 / -1; grid-row: 2; width: 100%; max-width: none; }
.header-dash-toggle { display: flex; }

@media (max-width: 480px) {
    .dash-topbar {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 8px;
        padding-block: 6px 9px;
    }
    .dash-topbar-left { grid-column: 1; grid-row: 1; overflow: hidden; }
    .dash-topbar-title { display: block; font-size: 14px; }
    .dash-topbar-search { grid-column: 1 / -1; grid-row: 2; height: 44px; }
    .dash-topbar-search .qs-location { display: block; max-width: 42%; }
    .dash-topbar-search .qs-divider { display: block; }
    .dash-topbar-right { grid-column: 2; grid-row: 1; }
}
.pricing-toggle-hint { margin-top: 12px; font-size: 13px; color: var(--text-muted); }
.pricing-trust-strip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 14px auto 0;
    max-width: 560px;
    font-size: 12.5px;
    color: var(--text-secondary);
    padding: 8px 16px;
    background: rgba(76, 122, 94, 0.08);
    border: 1px solid rgba(76, 122, 94, 0.25);
    border-radius: 999px;
}
.pricing-trust-strip svg { flex-shrink: 0; color: #7FBF98; }

/* All 5 tiers in one row on a wide desktop (matches the reference layout
   the owner asked to match), stepping down to fewer columns rather than
   the generic auto-fit/minmax used by every other .plan-grid on the site
   — that grid wraps Enterprise onto its own lonely second row the moment
   5 cards don't quite fit 240px-minimum columns, which is exactly the
   "two rooms instead of one room" problem flagged and fixed here. */
/* minmax(0, 1fr), not a bare 1fr: an implicit 1fr track has an automatic
   MINIMUM size equal to its content's min-content width, not zero. Every
   .btn is white-space:nowrap, so a label like "Sign Up to Subscribe"
   refused to shrink below its own text width — at a narrow phone width
   that forced both grid tracks (and the whole page's mobile layout
   viewport along with them) wider than the real screen, which is why the
   page rendered zoomed-out/tiny instead of a clean 2-column mobile
   layout. minmax(0, 1fr) lets the track actually shrink to the
   available space; the button text wraps instead, which is fine. */
/* Single column below 480px on purpose: a real 5-tier price/feature card
   (long button labels like "Sign Up to Subscribe", a bold 34px price)
   was still clipping inside a ~170px-wide 2-up column even after the
   minmax(0,1fr) fix below — two narrow columns just isn't enough room
   for this card's real content on an actual phone. One full-width column
   gives every element the space it needs; .plan-card .btn's white-space
   override below is a second safety net in case a future longer label
   or plan name gets tight again at any width. */
.plan-grid-tiers { margin-top: 12px; grid-template-columns: repeat(1, minmax(0, 1fr)); align-items: stretch; }
@media (min-width: 480px) { .plan-grid-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 640px) { .plan-grid-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .plan-grid-tiers { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* Shortening every CTA label (Sign Up Now / Sign Up Free / Choose Plan /
   Talk to Sales) so none of them wrap is the primary fix — but a fixed
   min-height is the actual guarantee: even if a future label is longer
   than expected and does wrap to 2 lines, every button in the row still
   occupies the exact same box, so the row never looks jagged again. */
.plan-card .btn { white-space: normal; min-height: 48px; }

/* Every card in a row stretches to the row's tallest card (grid's default
   align-items:stretch already does this), then flex-column + margin-top:
   auto on the CTA pins every plan's button to the exact same baseline
   regardless of how many features that tier lists — this is what was
   broken when Enterprise's longer feature list pushed its button lower
   than Free's. */
.plan-card { position: relative; display: flex; flex-direction: column; border-top: 3px solid transparent; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.plan-card:hover { transform: translateY(-3px); }
.plan-card > .btn { margin-top: auto; }
.plan-card-starter { border-top-color: var(--tier-starter); }
.plan-card-pro { border-top-color: var(--tier-pro); }
.plan-card-elite { border-top-color: var(--tier-elite); }
.plan-card-enterprise { border-top-color: var(--tier-enterprise); }
.plan-card-starter:hover { box-shadow: 0 16px 36px rgba(140,147,166,0.16); }
.plan-card-pro:hover { box-shadow: 0 16px 36px var(--gold-glow); }
.plan-card-elite:hover { box-shadow: 0 16px 36px rgba(138,53,64,0.22); }
/* No fixed min-height here on purpose, unlike the first version of this
   card — the whole row already stretches every card to equal height via
   .plan-grid-tiers's align-items:stretch, and the CTA is bottom-pinned
   via .plan-card > .btn's margin-top:auto, so a 1-line vs 2-line
   headline can't misalign anything below it. Reserving fixed space here
   too would just add dead height back in on top of that, working
   against making these cards as compact as possible. */
.plan-headline { font-size: 12px; font-weight: 700; color: var(--gold-bright); margin: -2px 0 2px; line-height: 1.3; }
.plan-card-pro .plan-headline { color: var(--premium-bright); }
.plan-headline-muted { color: var(--text-muted); font-weight: 600; }
.plan-card-enterprise .plan-headline { color: #C9AFFA; }
.plan-ribbon {
    position: absolute;
    top: -12px; left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--premium), var(--premium-bright));
    color: #171006;
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.plan-ribbon-enterprise {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, var(--tier-enterprise), #A688E8);
    color: #fff;
}
.plan-current-tag {
    position: absolute;
    top: 14px; right: 14px;
    background: rgba(76, 122, 94, 0.16);
    color: #7FBF98;
    border: 1px solid rgba(76, 122, 94, 0.4);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 3px 9px;
    border-radius: 999px;
}
/* Compact "-25% ₦180,000" strip above the real price, matching the
   reference layout's pill+strikethrough placement (was previously a
   standalone badge below the price, in its own row). */
.plan-price-compare { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.plan-save-pill {
    background: var(--danger-surface);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
}
.plan-price-original { font-size: 13.5px; color: var(--text-muted); text-decoration: line-through; font-variant-numeric: tabular-nums; }
/* [hidden] and .plan-price-compare are equal specificity (0,1,0), so
   without this the class rule's display:flex wins the cascade purely by
   being declared later in the file, regardless of the attribute — same
   bug class as the old .plan-save-badge had, fixed the same way. */
.plan-price-compare[hidden] { display: none; }

/* Enterprise is the one tier meant to visually outrank the rest of the
   grid — a violet border/glow instead of the neutral card background,
   distinct from Pro's gold "Most Popular" treatment so the two premium
   signals never compete for the same visual language. */
.plan-card-enterprise {
    background: linear-gradient(160deg, #1C1530, #12101E);
    border: 1px solid rgba(124, 92, 199, 0.5);
    box-shadow: 0 20px 44px rgba(124, 92, 199, 0.18);
}
.plan-card-enterprise .plan-price { color: #C9AFFA; }

/* Enterprise "Talk to Sales" lead form (views/enterprise/contact.php) */
.enterprise-contact-head { text-align: center; margin-bottom: 32px; }
.enterprise-contact-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(124, 92, 199, 0.14);
    color: #C9AFFA;
    border: 1px solid rgba(124, 92, 199, 0.4);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 5px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
}
.enterprise-contact-head h1 { margin-bottom: 10px; }
.enterprise-contact-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; }
.enterprise-plan-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 6px; }
.enterprise-plan-option {
    display: flex;
    flex-direction: column;
    gap: 3px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.enterprise-plan-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.enterprise-plan-option:hover { border-color: var(--border-strong); }
.enterprise-plan-option.active, .enterprise-plan-option:has(input:checked) { border-color: var(--tier-enterprise); background: rgba(124, 92, 199, 0.1); }
.enterprise-plan-option-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.enterprise-plan-option-price { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.enterprise-contact-success { text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 48px 28px; }
.enterprise-contact-success svg { color: #7FBF98; margin-bottom: 16px; }
.enterprise-contact-success h2 { margin-bottom: 8px; }
.enterprise-contact-success .btn { margin-top: 20px; }

/* Messages / chat
   ------------------------------------------------------------------------
   .messages-shell extends .dash-layout's two-column grid. On mobile
   (<=860px, matching .dash-layout's own breakpoint) only one pane shows
   at a time: the thread list by default, or the open conversation once
   .conversation-open is present (set server-side from whether a thread is
   selected) — .messages-back-btn returns to the list via a normal link,
   no client routing needed. This replaces an inline
   style="grid-template-columns:280px 1fr" that used to permanently defeat
   the responsive collapse and left ~27px for the conversation on a phone. */
.messages-thread-pane, .messages-conversation-pane { min-width: 0; }
.messages-pane-head {
    padding: 16px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
}
.thread-filter-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
}
.thread-filter-tabs::-webkit-scrollbar { display: none; }
.thread-filter-tab {
    flex: 1 0 auto;
    min-height: 44px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-right: 1px solid var(--border);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}
.thread-filter-tab:last-child { border-right: 0; }
.thread-filter-tab span { min-width: 19px; height: 19px; padding-inline: 5px; border-radius: 999px; background: var(--surface); color: var(--text-muted); font-size: 10px; line-height: 19px; text-align: center; }
.thread-filter-tab.active { background: color-mix(in srgb, var(--gold) 18%, var(--surface-2)); color: var(--gold-bright); }
.thread-filter-tab.active span { color: var(--text-primary); }
.thread-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px;
    padding: 9px 13px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface-2);
    color: var(--text-muted);
    box-shadow: inset 0 -1px 0 transparent;
    transition: box-shadow 0.15s ease;
}
/* feedback:11 accessibility sweep: unlike .quick-search-form, this one
   had no :focus-within treatment at all - the input's own outline:none
   below left keyboard users with zero visible focus indicator. */
.thread-search-wrap:focus-within { box-shadow: inset 0 -2px 0 var(--gold); }
.thread-search-wrap input {
    flex: 1;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 13.5px;
    padding: 4px 0;
}
.thread-search-wrap input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.thread-listing-chip-closed { color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.thread-closed-tag {
    flex-shrink: 0;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 6px;
    border-radius: 999px;
}
@media (max-width: 860px) {
    .messages-shell.conversation-open .messages-thread-pane { display: none; }
    .messages-shell:not(.conversation-open) .messages-conversation-pane { display: none; }
}

.messages-thread-pane { display: flex; flex-direction: column; }
.thread-list { display: flex; flex-direction: column; padding: 0 14px 8px; flex: 1; overflow-y: auto; min-height: 0; }
.thread-date-heading { padding: 14px 0 8px; border-bottom: 1px solid var(--border); color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.thread-search-empty { padding: 32px 16px; color: var(--text-muted); font-size: 13px; text-align: center; }
.thread-search-empty[hidden] { display: none; }
.thread-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 88px;
    padding: 14px 2px;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}
.thread-item:hover, .thread-item.active { background: var(--surface-hover); }
.thread-preview {
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.thread-unread {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--on-accent);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.thread-listing-chip {
    margin-top: 3px;
    font-size: 11px;
    color: var(--gold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.thread-listing-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    text-decoration: none;
    transition: background 0.2s ease;
}
.thread-listing-banner:hover { background: var(--surface-hover); }
.thread-listing-banner img, .thread-listing-banner-noimg {
    width: 64px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--surface);
    flex-shrink: 0;
}
.thread-listing-banner-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.thread-visual { position: relative; width: 76px; height: 76px; flex: 0 0 76px; }
.thread-listing-thumb { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 10px; background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); }
.thread-listing-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.thread-avatar { position: absolute; right: 0; bottom: -2px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--surface); border-radius: 50%; background: var(--surface-2); color: var(--gold); font-size: 11px; font-weight: 700; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.thread-visual.no-listing { width: 52px; height: 52px; flex-basis: 52px; }
.thread-visual.no-listing .thread-avatar { inset: 0; width: 52px; height: 52px; font-size: 15px; border-width: 1px; box-shadow: none; }
.thread-avatar img { width: 100%; height: 100%; object-fit: cover; }
.thread-item-copy { flex: 1; min-width: 0; }
.thread-item-heading { display: flex; align-items: center; gap: 5px; min-width: 0; }
.thread-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); font-size: 14px; font-weight: 700; }
.thread-item-heading time { margin-left: auto; flex: 0 0 auto; color: var(--text-muted); font-size: 10.5px; }
.thread-verified { flex: 0 0 auto; }
.thread-pin { flex: 0 0 auto; color: var(--gold); }
.thread-preview { margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: 12.5px; }
.thread-preview.is-unread { color: var(--text-primary); font-weight: 600; }
.thread-market-context { min-width: 0; margin-top: 4px; display: flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.thread-market-context span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-market-context strong { flex: 0 0 auto; color: var(--gold-bright); font-size: 10px; }
.thread-market-context strong::before { content: '\00b7'; margin-right: 7px; color: var(--text-muted); }
.thread-market-context.is-closed, .thread-market-context.is-closed strong { color: var(--text-muted); }
.thread-market-context.is-closed span { text-decoration: line-through; text-decoration-thickness: 1px; }
@media (max-width: 480px) {
    .thread-list { padding-inline: 10px; }
    .thread-item { gap: 10px; padding-block: 12px; }
    .thread-visual { width: 66px; height: 66px; flex-basis: 66px; }
    .thread-listing-thumb { width: 62px; height: 62px; }
}
.thread-unread { align-self: center; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 999px; background: var(--gold); color: var(--bg); font-size: 10px; font-weight: 800; line-height: 21px; text-align: center; }
.thread-listing-banner-copy { min-width: 0; }
.thread-listing-banner-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 320px;
}
.thread-listing-banner-price {
    margin-left: auto;
    /* See .ad-card-price: Fraunces renders the ₦ glyph's crossbar too
       bold, reading as a strikethrough. Inter instead. */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--gold);
    flex-shrink: 0;
}
.thread-listing-status {
    display: inline-flex;
    margin-top: 3px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(63, 174, 106, .12);
    color: var(--success);
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.4;
}
.thread-listing-status.is-closed { background: var(--surface); color: var(--text-muted); }
.thread-listing-banner-view {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 8px;
    padding-left: 14px;
    min-height: 44px;
    border-left: 1px solid var(--border);
    color: var(--gold-bright);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
@media (max-width: 560px) {
    .thread-listing-banner-title { max-width: 140px; }
}

.messages-conv-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
}
.messages-back-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--text-secondary);
    flex-shrink: 0;
}
@media (max-width: 860px) {
    .messages-back-btn { display: flex; }
}
.messages-conv-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    text-decoration: none;
}
.messages-conv-name-block {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    gap: 1px;
}
.messages-conv-name {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    font-size: 15px;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
}
.messages-conv-name-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.messages-conv-verified { flex: 0 0 auto; }
.messages-conv-status { overflow: hidden; font-size: 12px; font-weight: 400; color: var(--text-muted); text-overflow: ellipsis; white-space: nowrap; }

.messages-scroll {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    scroll-behavior: smooth;
    min-height: 0;
}
/* Only the message history itself scrolls, like WhatsApp — the header
   (who you're talking to) and the composer (where you type) stay fixed
   in place. This works by giving the pane itself a bounded height so
   .messages-scroll's flex:1 + overflow-y:auto becomes the one internal
   scroll region, rather than the whole page scrolling past a header and
   composer that were never actually anchored to anything. min-height:0
   above is required — a flex item's default min-height:auto would
   otherwise let its content (the full message history) force the item
   taller than the bounded pane, defeating the internal scroll entirely,
   the same "won't shrink below its own content" trap documented
   elsewhere in this stylesheet, just on the vertical axis this time. */
/* overflow is intentionally NOT hidden here: .emoji-picker (and the
   quick-reply chip row) are position:absolute popups anchored to
   .chat-composer that pop up ABOVE the composer, past this pane's own
   box. overflow:hidden on the pane clips them invisible even though
   they render fine in the DOM. The actual scroll-bounding this pane
   needs is already handled by .messages-scroll/.thread-list's own
   flex:1 + overflow-y:auto + min-height:0, so clipping the outer pane
   too is redundant defense that broke real popups — height/max-height
   alone already stop the pane itself from growing past the viewport. */
.messages-conversation-pane, .messages-thread-pane {
    height: calc(100vh - 132px);
    max-height: calc(100vh - 132px);
    /* 100vh on real mobile browsers is the viewport with the address bar
       collapsed, taller than what's actually visible while it's showing —
       so a pane sized with vh alone can extend past the real visible
       area, pushing the composer/emoji picker partly under the browser's
       own UI chrome where taps land on nothing. dvh tracks the actual
       visible viewport as the chrome shows/hides. Declared after vh, not
       instead of it: browsers without dvh support just drop this line and
       keep the vh value above, so this is a pure progressive enhancement.
       Desktop browsers don't have this dynamic-chrome behavior, but the
       rule is harmless there too. */
    height: calc(100dvh - 132px);
    max-height: calc(100dvh - 132px);
}
@media (max-width: 860px) {
    /* Owner direction (live, caught again via screenshot): the bottom
       tab bar now stays visible and sticky with a conversation open
       too (it used to hide itself there), so both panes need to
       reserve real space for it. First attempt at this only subtracted
       the tab bar's own 60px, but the bar isn't the only thing fixed
       at the bottom - its own floating center "+" button protrudes
       ~34px above the bar itself (see body's own
       padding-bottom:calc(98px + ...) a few lines up, the site's one
       existing reference value for this exact clearance), so 60px
       alone still left the composer sitting right under that button.
       98px matches the number already proven correct everywhere else
       on the site, not a second guess. */
    .messages-conversation-pane, .messages-thread-pane {
        height: calc(100vh - 96px - 98px - env(safe-area-inset-bottom));
        max-height: calc(100vh - 96px - 98px - env(safe-area-inset-bottom));
        height: calc(100dvh - 96px - 98px - env(safe-area-inset-bottom));
        max-height: calc(100dvh - 96px - 98px - env(safe-area-inset-bottom));
    }
    /* The thread-list pane already gets the reserved height above from
       its own bounded box, but its LAST ROW still needs the same
       clearance so it doesn't scroll up to, but stay hidden behind,
       the tab bar/floating post button inside that already-bounded
       scroll area. */
    .thread-list { padding-bottom: calc(98px + env(safe-area-inset-bottom)); }
}

.msg-listing-tag {
    align-self: center;
    font-size: 11px;
    color: var(--text-muted);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    padding: 4px 12px;
    margin: 10px 0;
}

/* Deal-timeline markers: real offer/escrow milestones interleaved into the
   conversation itself, in the platform's own gold accent rather than a
   generic grey system-message style, so the chat still reads as Naijack
   even at the moment it's showing you money events, not just text. */
.deal-timeline-event {
    align-self: center;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--gold-bright);
    background: rgba(201, 165, 92, 0.08);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    padding: 6px 14px;
    margin: 14px 0;
    max-width: 90%;
    text-align: center;
}
.deal-timeline-event svg { flex-shrink: 0; }
.deal-timeline-time { color: var(--text-muted); font-weight: 500; flex-shrink: 0; }

.msg-bubble {
    max-width: 72%;
    padding: 10px 16px;
    border-radius: 3px;
    font-size: 14.5px;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.msg-row { display: flex; align-items: flex-end; gap: 8px; width: 100%; }
.msg-row.mine { justify-content: flex-end; }
.msg-row.theirs { justify-content: flex-start; }
.msg-sender-avatar {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--gold-bright);
    font-size: 12px;
    font-weight: 700;
}
.msg-sender-avatar.is-placeholder { visibility: hidden; }
.msg-sender-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.msg-bubble.mine { background: var(--gold); color: var(--on-accent); border-bottom-right-radius: 4px; position: relative; }
.msg-bubble.theirs { background: var(--surface-2); border-bottom-left-radius: 4px; position: relative; }
/* Owner direction (live, WhatsApp reference): a small directional tail
   on each bubble showing who it's from, not just position/color alone.
   Only the last bubble in a consecutive run gets one (.msg-group-end -
   every bubble is either that or .msg-group-mid, so a standalone
   message still qualifies), matching how WhatsApp itself only tails
   the final message of a burst rather than every line. Drawn with
   clip-path rather than the classic border-triangle trick so it can
   share the bubble's own background color/variable directly. */
.msg-bubble.mine.msg-group-end::after {
    content: '';
    position: absolute;
    right: -6px;
    bottom: 0;
    width: 10px;
    height: 12px;
    background: var(--gold);
    clip-path: polygon(0 0, 0 100%, 100% 100%);
}
.msg-bubble.theirs.msg-group-end::after {
    content: '';
    position: absolute;
    left: -6px;
    bottom: 0;
    width: 10px;
    height: 12px;
    background: var(--surface-2);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
/* Consecutive bubbles from the same sender (within 3 minutes, same
   listing context) stack tightly; only the last bubble in the run gets
   bottom margin + a timestamp, so a burst of messages doesn't repeat
   metadata after every line the way the old one-bubble-per-message
   layout did. */
.msg-bubble.msg-group-mid { margin-bottom: 2px; }
.msg-bubble.msg-group-end { margin-bottom: 4px; }
.msg-bubble-text { white-space: pre-wrap; word-break: break-word; }
.msg-bubble.msg-emoji-only {
    background: none;
    padding: 4px 2px;
    font-size: 34px;
    line-height: 1.2;
}
.msg-channel-tag {
    display: block;
    font-size: 10px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-top: 3px;
}
.msg-attachment { display: block; }
.msg-attachment img {
    max-width: 220px;
    max-height: 220px;
    border-radius: var(--radius-sm);
    display: block;
    object-fit: cover;
}
.msg-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.msg-meta.mine { text-align: right; }
.msg-meta.theirs { padding-left: 42px; }
.msg-seen { color: var(--gold); }

.msg-typing-indicator {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 0 20px 8px;
}
.msg-typing-indicator[hidden] { display: none; }
.msg-typing-label { margin-right: 2px; color: var(--text-secondary); font-size: 12px; }
.msg-typing-indicator .msg-typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    animation: typingBounce 1.2s infinite ease-in-out;
}
.msg-typing-indicator .msg-typing-dot:nth-last-child(2) { animation-delay: 0.15s; }
.msg-typing-indicator .msg-typing-dot:nth-last-child(1) { animation-delay: 0.3s; }
@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* position:relative here is load-bearing for .chat-attach-preview's own
   remove button (position:absolute, top/right offsets). */
.chat-composer { position: relative; border-top: 1px solid var(--border); padding: 12px 16px; }
.chat-privacy-note {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    color: var(--text-muted);
    font-size: 10.5px;
}
.chat-attach-preview {
    position: relative;
    display: inline-flex;
    margin-bottom: 10px;
}
/* Same [hidden]-vs-class-display fight as .plan-price-compare and
   .plan-features-toggle: the class above always sets display, so a bare
   [hidden] attribute (UA-stylesheet priority, always loses to any author
   rule) can't hide it without this explicit override. Without this, the
   empty preview box + its remove button rendered permanently visible
   above the composer even with no attachment selected. */
.chat-attach-preview[hidden] { display: none; }
.chat-attach-preview img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
}
.chat-attach-preview button {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--danger-surface);
    color: #fff;
    border: none;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}
/* position:relative here is load-bearing for .emoji-picker (position:
   absolute, bottom:100%) - it's a child of this row specifically (not
   .chat-composer as a whole) so it anchors right above the emoji
   button that opens it, regardless of whether the quick-replies row
   above happens to be rendered. */
.chat-input-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    position: relative;
}
.chat-icon-btn {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease, color 0.2s ease;
}
.chat-icon-btn:hover { background: var(--surface-hover); color: var(--gold); }
#chatTextarea {
    flex: 1;
    resize: none;
    max-height: 120px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: 18px;
    padding: 10px 16px;
    font-size: 14.5px;
    font-family: inherit;
    line-height: 1.4;
}
#chatTextarea:focus { border-color: var(--gold); }
#chatTextarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.chat-send-btn {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--on-accent);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}
.chat-send-btn:hover { background: var(--gold-bright); }
.chat-send-btn[hidden], .chat-icon-btn[hidden], .chat-input-row[hidden] { display: none; }
.chat-voice-btn { background: var(--surface-2); color: var(--text-primary); border: 1px solid var(--border-strong); }
.chat-voice-btn:hover { color: var(--gold); background: var(--surface-hover); }

.voice-recording-panel,
.voice-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    background: var(--surface-2);
    padding: 6px 8px;
}
.voice-recording-panel[hidden], .voice-preview[hidden] { display: none; }
.voice-recording-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); animation: voicePulse 1.1s ease-in-out infinite; }
.voice-recording-label { flex: 1; min-width: 0; color: var(--text-secondary); font-size: 12px; }
.voice-cancel-btn { color: var(--danger); }
.voice-preview { margin-bottom: 8px; }
.voice-preview audio { flex: 1; min-width: 0; height: 36px; }
.msg-voice-note { display: block; width: min(280px, 100%); height: 40px; }
@keyframes voicePulse { 50% { opacity: .35; transform: scale(.8); } }

.conversation-suggestion-rail {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    margin-bottom: 6px;
    padding-block: 2px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
    touch-action: pan-x;
}
.conversation-suggestion-label { margin: 0 2px 5px; color: var(--text-muted); font-size: 11.5px; font-weight: 600; line-height: 1.3; }
.conversation-suggestion-rail::-webkit-scrollbar { display: none; }
.conversation-suggestion-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 6px 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-secondary);
    background: var(--surface-2);
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    scroll-snap-align: start;
    touch-action: manipulation;
    position: relative;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.conversation-suggestion-action::after { content: ''; position: absolute; inset: -2px 0; }
.conversation-suggestion-action svg { flex: 0 0 auto; color: currentColor; }
.conversation-suggestion-action.is-message { font-weight: 600; }
.conversation-suggestion-action:hover,
.conversation-suggestion-action:focus-visible { border-color: var(--gold); background: var(--surface-hover); color: var(--gold-bright); }
.conversation-suggestion-action:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Wide screens retain marketplace context: dashboard navigation, inbox list,
   and the selected conversation. The immersive full-screen conversation is
   reserved for phones, where three columns would reduce legibility. */
body.conversation-workspace { padding-bottom: 0; overflow: hidden; }
body.conversation-workspace .messages-shell.conversation-open {
    grid-template-columns: minmax(270px, 320px) minmax(0, 900px);
    align-items: start;
    justify-content: start;
}
body.conversation-workspace .messages-conversation-pane {
    width: 100%;
    max-width: 900px;
}
body.conversation-workspace .messages-conv-head { flex: 0 0 auto; padding-block: 12px; background: var(--surface); }
body.conversation-workspace .messages-conv-head .seller-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
body.conversation-workspace .messages-back-btn { display: flex; width: 44px; height: 44px; border-radius: 50%; }
body.conversation-workspace .messages-scroll { overscroll-behavior: contain; }

@media (min-width: 861px) and (max-width: 1180px) {
    body.conversation-workspace .messages-thread-pane { display: none; }
    body.conversation-workspace .messages-shell.conversation-open { grid-template-columns: minmax(0, 900px); }
}

@media (max-width: 860px) {
    body.conversation-workspace #main-content { min-height: 100dvh; }
    body.conversation-workspace .user-dashboard { width: 100%; max-width: none; padding: 0; }
    body.conversation-workspace .dash-nav,
    body.conversation-workspace .dash-nav-overlay,
    body.conversation-workspace .dash-topbar,
    body.conversation-workspace .messages-thread-pane { display: none !important; }
    body.conversation-workspace .messages-shell.conversation-open {
        display: block;
        margin: 0;
        min-height: 100dvh;
    }
    body.conversation-workspace .messages-conversation-pane {
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        border: 0;
        border-radius: 0;
    }
}

@media (max-width: 700px) {
    body.conversation-workspace .messages-conversation-pane { border-inline: 0; }
    body.conversation-workspace .messages-conv-head { gap: 6px; padding: 8px 10px; }
    body.conversation-workspace .messages-conv-head .seller-avatar { width: 38px; height: 38px; }
    body.conversation-workspace .messages-conv-name { font-size: 14px; }
    body.conversation-workspace .messages-conv-status { font-size: 11px; }
    body.conversation-workspace .icon-circle-btn { width: 44px; height: 44px; }
    body.conversation-workspace .thread-listing-banner { padding: 9px 12px; gap: 9px; }
    body.conversation-workspace .thread-listing-banner-title { max-width: 42vw; font-size: 12.5px; }
    body.conversation-workspace .thread-listing-banner-price { font-size: 12.5px; }
    body.conversation-workspace .thread-listing-banner-view { min-height: 40px; padding-left: 9px; font-size: 11px; }
    body.conversation-workspace .conversation-safety-notice { margin-inline: 10px; }
    body.conversation-workspace .messages-scroll { padding: 14px 12px; }
    body.conversation-workspace .msg-bubble { max-width: 84%; padding: 9px 12px; font-size: clamp(13.5px, 3.8vw, 14.5px); }
    body.conversation-workspace .chat-composer { padding: 8px 10px calc(7px + env(safe-area-inset-bottom)); }
    body.conversation-workspace .chat-icon-btn,
    body.conversation-workspace .chat-send-btn { width: 44px; height: 44px; }
    body.conversation-workspace #chatTextarea { min-width: 0; min-height: 44px; padding: 11px 13px; font-size: 16px; }
}
@media (max-width: 390px) {
    body.conversation-workspace .chat-input-row { gap: 2px; }
    body.conversation-workspace .chat-icon-btn,
    body.conversation-workspace .chat-send-btn { width: 42px; height: 42px; }
    body.conversation-workspace .messages-back-btn { width: 40px; height: 40px; }
    body.conversation-workspace .thread-listing-banner-label { display: none; }
    body.conversation-workspace .thread-listing-banner-title { max-width: 38vw; }
    body.conversation-workspace .thread-listing-banner img,
    body.conversation-workspace .thread-listing-banner-noimg { width: 54px; height: 42px; }
    body.conversation-workspace .thread-listing-banner-price { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .voice-recording-pulse, .msg-typing-indicator .msg-typing-dot { animation: none; }
}

/* Owner caught live: with repeat(8, 1fr) a couple of the wider emoji
   glyphs (multi-codepoint ones like the vehicle/shield icons) forced
   their grid track past its 1fr share - buttons have no intrinsic
   min-width:0, so the browser grows the column to fit the content
   instead of the content shrinking to fit the column, pushing that
   last column visibly past the box's right edge. Fixed width (not
   just max-width) plus min-width:0 on the buttons below makes every
   column a deterministic, equal share no glyph can force wider - 6
   columns × 38px reads as a comfortably "balanced" grid rather than
   8 cramped ones, at the cost of one short trailing row for the 26th
   curated emoji, same as any picker with a non-multiple-of-6 count. */
.emoji-picker {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    /* Clamped to the viewport, not just a fixed width: anchored at
       left:0 against an input row that can itself be nearly full-width
       on a phone, a flat cap could run past the right edge. */
    width: min(240px, calc(100vw - 40px));
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    z-index: 20;
    /* Drop-in open/close instead of the instant [hidden] snap the
       owner flagged as feeling "stuck" - overriding [hidden]'s own
       display:none (author styles always beat the UA stylesheet, no
       specificity trick needed) keeps it in normal flow so opacity/
       transform can actually animate between the two states. */
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transform-origin: bottom left;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0s;
}
.emoji-picker[hidden] {
    display: grid;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px) scale(0.97);
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0s linear 0.14s;
}
.emoji-picker button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 36px;
    min-width: 0;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    line-height: 1;
    overflow: hidden;
}
.emoji-picker button:hover { background: var(--surface-hover); }

.messages-say-hello, .messages-empty-selection { flex: 1; display: flex; align-items: center; justify-content: center; }

/* ---------------------------------------------------------------------- */
/* Homepage: sticky sponsor rail + category strip + stacked feed sections  */
/* ---------------------------------------------------------------------- */

.home-hero-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
    opacity: 0.55;
}

.home-layout-container { padding-top: 32px; }

.home-sponsor-rail {
    flex: 0 0 260px;
    max-width: 260px;
}

.home-sponsor-rail-inner {
    position: sticky;
    top: 84px;
}

.home-sponsor-rail.is-stacked .home-sponsor-rail-inner { position: static; }

.sponsor-rail-stack { position: relative; }

.sponsor-rail-card { opacity: 0; }
.sponsor-rail-card.is-visible { opacity: 1; transition: opacity 0.5s ease; }
.sponsor-rail-card + .sponsor-rail-card { margin-top: 16px; }

/* A single sponsor never fades or stacks — it just sits there. */
.home-sponsor-rail.single .sponsor-rail-card,
.home-sponsor-rail.single .sponsor-rail-card.is-visible {
    opacity: 1;
    transition: none;
}

/* Homepage right column only: a fixed 4 columns instead of .listing-grid's
   site-wide auto-fill(minmax(260px,1fr)) behavior — scoped here so the
   browse page, storefront, and every other page using .listing-grid keep
   their existing responsive column count untouched. */
.home-main .listing-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) {
    .home-main .listing-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Homepage layout: three independently-positioned blocks - the quick-link
   rail (How to Buy/Sell/Safety/Request), the category directory (Vehicles/
   Auto Parts/Auto Services), and the main feed column - arranged with CSS
   Grid so each block's position can differ completely between mobile and
   desktop without duplicating any markup. Mobile stacks them in reading
   order (categories, then quick links, then feed, via named grid-template-
   areas); desktop reassigns those same areas to put the quick-link rail as
   a sticky left column and the category directory as a row above the feed.
   Owner's own explicit instruction (2026-08-15): swap the two blocks'
   desktop positions from the previous build. */
.home-layout {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "categories" "trust" "main";
    gap: 20px;
}
.home-main { grid-area: main; min-width: 0; }
@media (min-width: 860px) {
    .home-layout {
        grid-template-columns: 260px 1fr;
        gap: 24px 32px;
        grid-template-areas:
            "trust categories"
            "trust main";
    }
}
/* Logged-in variant (owner direction, docs/Daily Ideas.md): the "trust"
   area/rail isn't rendered at all here any more - the sticky dashboard
   sidebar wrapping the whole page now does that job - so there's no 260px
   column left to reserve. Single column at every width, not just mobile. */
.home-layout.home-layout-solo,
.home-layout.home-layout-solo .home-main {
    grid-column: 1;
}
.home-layout.home-layout-solo {
    grid-template-areas: "categories" "main";
}
@media (min-width: 860px) {
    .home-layout.home-layout-solo {
        grid-template-columns: 1fr;
        grid-template-areas: "categories" "main";
    }
}

/* Category directory (Vehicles/Auto Parts/Auto Services). Mobile: 3-column
   grid, icon above label only - the owner's own diagnosis was that adding
   the description text is exactly what breaks responsiveness at narrow
   widths, so it's hidden below 860px rather than shrunk to fit. Desktop:
   still 3 columns side by side (owner confirmed, not stacked), each one a
   mini-card with icon+title+description, sitting above the feed instead of
   where it used to be sticky on the side. */
.home-category-directory {
    grid-area: categories;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.home-category-directory-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 16px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.home-category-directory-item:hover { border-color: var(--gold); background: var(--surface-hover); }
.home-category-directory-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(201, 165, 92, 0.12);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
}
.home-category-directory-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.home-category-directory-title {
    font-family: 'Fraunces', 'Georgia', serif;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-primary);
}
.home-category-directory-desc {
    display: none;
    font-size: 11.5px;
    color: var(--text-secondary);
}
@media (min-width: 860px) {
    .home-category-directory-item {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        gap: 14px;
        padding: 18px 20px;
    }
    .home-category-directory-icon { width: 40px; height: 40px; margin-top: 2px; }
    .home-category-directory-desc { display: block; }
}

/* Quick links: How to Buy / How to Sell / Safety Tips / How to Request.
   Mobile: 4-column grid, icon above label, no description/arrow (no room
   for either at that width) - .home-trust-links-inner is display:contents
   so its 4 <a> children become direct grid items of .home-trust-links
   itself, same as if the wrapper weren't there at all.

   Desktop: two-element sticky rail, same split .home-sponsor-rail already
   proved - .home-trust-links (the "trust" grid area, spanning both rows)
   is the tall, invisible shell that gets stretched by the grid's default
   align-items:stretch, which is what actually gives position:sticky room
   to travel for the full height of the page beside it (the owner's own
   "the box should fill" note - the shell now genuinely fills that whole
   column, not just wrap its own short content). .home-trust-links-inner
   is the compact visible card - bordered box, row divider, bottom fade,
   description under each title, trailing arrow - and is what's actually
   position:sticky, so it stays a normal short card rather than every
   border/background pixel of the tall shell painting down the page. */
.home-trust-links {
    grid-area: trust;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.home-trust-links-inner { display: contents; }
.home-trust-links a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 12px 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.home-trust-links a svg { flex-shrink: 0; width: 22px; height: 22px; opacity: 0.9; }
.home-trust-links a:hover { border-color: var(--gold); color: var(--gold); }
.home-trust-links-desc, .home-trust-links-arrow, .home-trust-links-badge { display: none; }
@media (min-width: 860px) {
    /* The outer shell's grid-template-columns is mobile-only (it's what
       lays the 4 tiles out in a row there) - left un-reset here, it would
       keep dividing the 260px rail into 4 slivers and squeeze
       .home-trust-links-inner into the first one, exactly the bug the
       owner caught live (a near-empty sidebar showing one icon). Desktop
       needs the shell to just be a single-column box so the inner sticky
       card gets the full rail width and height. */
    .home-trust-links { display: block; }
    .home-trust-links-inner {
        display: flex;
        flex-direction: column;
        position: sticky;
        top: 84px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        overflow: hidden;
    }
    /* Soft fade at the bottom edge (owner's Jiji reference) - a finish
       touch, not a "scroll for more" affordance, since all 4 links are
       always fully visible; pointer-events:none so it never blocks a
       click on the last row underneath it. */
    .home-trust-links-inner::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 28px;
        background: linear-gradient(180deg, transparent, var(--surface));
        pointer-events: none;
    }
    .home-trust-links a {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 12px;
        padding: 16px 18px;
        border: none;
        border-radius: 0;
        font-size: 13.5px;
        font-weight: 500;
    }
    /* Divider inset from both edges (not full-bleed) for a sleeker line
       between rows - a plain edge-to-edge border-top read as too heavy. */
    .home-trust-links a + a { position: relative; }
    .home-trust-links a + a::before {
        content: '';
        position: absolute;
        top: 0;
        left: 18px;
        right: 18px;
        height: 1px;
        background: var(--border);
    }
    .home-trust-links a svg {
        width: 36px;
        height: 36px;
        padding: 8px;
        box-sizing: border-box;
        border-radius: 10px;
        background: rgba(201, 165, 92, 0.12);
        color: var(--gold);
        opacity: 1;
        flex-shrink: 0;
    }
    .home-trust-links-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .home-trust-links-title { color: var(--text-primary); }
    .home-trust-links-desc {
        display: block;
        font-size: 11.5px;
        font-weight: 400;
        color: var(--text-secondary);
    }
    .home-trust-links-arrow {
        display: block;
        flex-shrink: 0;
        margin-left: auto;
        color: var(--gold);
        font-weight: 600;
    }
    /* Unread-message count, logged-in rail only (dash-nav.php's own
       .dash-nav-badge styling, reused for visual continuity with the real
       dashboard). Sits on the auto-margin instead of the arrow when
       present, so the two travel to the right edge together as a pair
       rather than leaving a gap between the badge and a separately
       right-pinned arrow. */
    .home-trust-links-badge {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        background: var(--gold);
        color: var(--on-accent);
        font-size: 10px;
        font-weight: 700;
        min-width: 17px;
        height: 17px;
        border-radius: 999px;
        padding: 0 4px;
        flex-shrink: 0;
    }
    .home-trust-links-badge + .home-trust-links-arrow { margin-left: 6px; }
}

.category-strip {
    display: flex;
    gap: 14px;
    margin-bottom: 28px;
}

.category-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 1;
    padding: 18px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
    transition: border-color var(--motion-fast) ease, background var(--motion-fast) ease, transform var(--motion-fast) ease;
}

.category-tile:hover {
    border-color: var(--gold);
    background: var(--surface-hover);
    color: var(--text-primary);
    transform: translateY(-2px);
}

.category-tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(201, 165, 92, 0.12);
    color: var(--gold);
}

.home-feed-tabs {
    display: flex;
    gap: 22px;
    align-items: baseline;
}

.home-feed-tabs .feed-tab {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-family: 'Fraunces', 'Georgia', serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--text-muted);
    transition: color var(--motion-fast) ease;
}

.home-feed-tabs .feed-tab:hover { color: var(--text-secondary); }
.home-feed-tabs .feed-tab.active { color: var(--text-primary); }

/* Sticks directly below .site-header while scrolling, on every viewport
   size — not just mobile, since there's no reason the same "keep the
   category switcher reachable" behavior shouldn't hold on desktop too.
   --sticky-header-h is set by JS to the header's real rendered height
   (it varies: shorter before the header's own search box reveals on
   scroll, taller again once it does, and taller still on narrow phones
   where the header wraps to two lines) rather than a guessed fixed
   number, so this stays correct across every device and scroll state. */
.feed-tabs-head {
    position: sticky;
    top: var(--sticky-header-h, 68px);
    z-index: 40;
    background: var(--bg);
    padding-top: 14px;
    padding-bottom: 14px;
}

.home-feed-section { margin-bottom: 40px; }
.home-feed-section:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
    .home-sponsor-rail {
        flex: 1 1 auto;
        max-width: none;
        width: 100%;
    }
    .home-sponsor-rail-inner { position: static; }
    /* Sticky/stacked scroll behavior needs a narrow side rail to make
       sense visually; below the point the rail would have to span the
       full width anyway, so it just renders as a normal stacked section
       and the JS becomes a no-op (still-correct markup either way). */
    .home-sponsor-rail.is-stacked .sponsor-rail-stack,
    .home-sponsor-rail .sponsor-rail-card {
        display: block !important;
        opacity: 1 !important;
    }
}
.deal-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 20px;
  align-items: start;
}

.deal-terms-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 760px) {
  .deal-workspace-grid,
  .deal-terms-grid {
    grid-template-columns: 1fr;
  }
}
.compatibility-builder { margin-top: 1rem; }
.compatibility-summary { margin-top:1.25rem; padding:1rem; border:1px solid var(--border-color,rgba(255,255,255,.12)); border-radius:.85rem; }
.compatibility-summary h2 { margin:0 0 .35rem; font-size:1.05rem; }
.compatibility-summary-list { margin:.75rem 0 0; padding-left:1.2rem; display:grid; gap:.35rem; }
.section-heading-row { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.compatibility-rows { display:grid; gap:.75rem; margin-top:.75rem; }
.compatibility-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) minmax(7rem,.65fr) minmax(7rem,.65fr) auto; gap:.6rem; align-items:center; padding:.75rem; border:1px solid var(--border-color,rgba(255,255,255,.12)); border-radius:.75rem; }
@media (max-width: 768px) { .compatibility-row { grid-template-columns:1fr 1fr; } .compatibility-row .compat-remove { grid-column:1 / -1; } }
@media (max-width: 430px) { .section-heading-row { flex-direction:column; } .compatibility-row { grid-template-columns:1fr; } .compatibility-row .compat-remove { grid-column:auto; width:100%; } }
.offer-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 10px 0;
}

.offer-facts span {
    background: var(--surface-2, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 12px;
    padding: 5px 9px;
}

.offer-edit-panel {
    border-top: 1px solid var(--border);
    margin-top: 16px;
    padding-top: 14px;
}

.offer-edit-panel summary {
    color: var(--gold);
    cursor: pointer;
    font-weight: 600;
}
.conversation-safety-notice {
    display: block;
    background: rgba(201, 165, 92, 0.075);
    border-bottom: 1px solid rgba(201, 165, 92, 0.22);
    color: var(--text-secondary);
    font-size: 11.5px;
    line-height: 1.4;
}
.conversation-safety-notice summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 6px 16px;
    cursor: pointer;
    list-style: none;
}
.conversation-safety-notice summary::-webkit-details-marker { display: none; }
.conversation-safety-notice summary > svg:first-child {
    color: var(--gold);
    flex-shrink: 0;
}
.conversation-safety-notice strong { color: var(--text-primary); }
.conversation-safety-notice summary > span,
.conversation-safety-notice a {
    color: var(--gold-bright);
    font-weight: 650;
    white-space: nowrap;
}
.conversation-safety-chevron { color: var(--gold); transition: transform var(--motion-fast) var(--ease-out); }
.conversation-safety-notice[open] .conversation-safety-chevron { transform: rotate(90deg); }
.conversation-safety-details { padding: 0 16px 11px 41px; max-width: 920px; }
.conversation-safety-details a { display: inline-block; margin-left: 6px; }
@media (max-width: 560px) {
    .conversation-safety-notice summary { padding: 5px 10px; gap: 6px; font-size: 10.5px; }
    .conversation-safety-notice summary > span { font-size: 10px; }
    .conversation-safety-details { padding: 0 10px 10px 33px; }
}
@media (max-width: 390px) {
    .conversation-safety-notice summary { grid-template-columns: auto minmax(0, 1fr) auto; }
    .conversation-safety-notice summary > span { display: none; }
}

.offer-comparison-section {
    margin: 16px 0 28px;
}

.offer-comparison-heading {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 12px;
}

.offer-comparison-heading h3,
.offer-comparison-heading p {
    margin: 0;
}

.offer-comparison-heading p {
    font-size: 13px;
    margin-top: 4px;
}

.offer-comparison-scroll {
    border-radius: 16px;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 2px 2px 12px;
    scrollbar-color: var(--gold) transparent;
}

.offer-comparison-scroll:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

.offer-comparison-grid {
    display: grid;
    gap: 12px;
    grid-auto-columns: minmax(250px, 1fr);
    grid-auto-flow: column;
    min-width: min-content;
}

.offer-comparison-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 250px;
    padding: 18px;
}

.offer-comparison-card.is-top-match {
    border-color: color-mix(in srgb, var(--gold) 58%, var(--border));
}

.offer-comparison-seller {
    align-items: center;
    display: flex;
    gap: 7px;
    justify-content: space-between;
}

.offer-verified {
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.offer-comparison-terms {
    margin: 0;
}

.offer-comparison-terms div {
    border-top: 1px solid var(--border);
    display: grid;
    font-size: 12px;
    gap: 8px;
    grid-template-columns: minmax(76px, 0.8fr) 1.2fr;
    padding: 8px 0;
}

.offer-comparison-terms dt {
    color: var(--text-secondary);
}

.offer-comparison-terms dd {
    margin: 0;
    text-align: right;
}

.offer-match-reasons,
.offer-linked-ad {
    color: var(--text-secondary);
    font-size: 12px;
    margin: 0;
}

.offer-linked-ad {
    color: var(--gold);
}

.offer-comparison-card form {
    margin-top: auto;
}

.offer-details-heading {
    font-size: 15px;
    margin: 0 0 12px;
}

@media (max-width: 640px) {
    .offer-comparison-grid {
        grid-auto-columns: minmax(82vw, 82vw);
    }

    .offer-comparison-card {
        min-width: 0;
    }
}
.recommendation-reason {
    color: var(--gold);
    font-size: 11px;
    font-weight: 600;
    margin: 0 0 7px;
    min-height: 14px;
}
.deal-files {
    border-top: 1px solid var(--border);
    margin-top: 22px;
    padding-top: 20px;
}

.deal-files h3,
.deal-files p {
    margin: 0;
}

.deal-file-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill,minmax(125px,1fr));
    margin-top: 14px;
}

.deal-file-card {
    background: var(--surface-2,rgba(255,255,255,.04));
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 10px;
    overflow: hidden;
}

.deal-file-card img {
    aspect-ratio: 4/3;
    display: block;
    object-fit: cover;
    width: 100%;
}

.deal-file-card span {
    display: block;
    padding: 7px;
}

.ads-directory-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}
.ads-directory-header h1 { margin: 2px 0 8px; }
.ads-directory-eyebrow { margin: 0; color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ads-directory-description { max-width: 720px; margin: 0; color: var(--text-secondary); line-height: 1.6; }
.ads-pillar-nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-bottom: 28px; }
.ads-pillar-link { display: grid; gap: 4px; min-width: 0; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text-primary); text-decoration: none; transition: border-color .18s ease,background .18s ease,transform .18s ease; }
.ads-pillar-link:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.ads-pillar-link.active { border-color: var(--gold); background: rgba(209,170,92,.09); }
.ads-pillar-link strong { font-size: 14px; }
.ads-pillar-link span { color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
@media (max-width:700px) {
    .ads-directory-header { align-items: flex-start; flex-direction: column; gap: 16px; }
    .ads-directory-header .btn { width: 100%; }
    .ads-pillar-nav { grid-template-columns: 1fr; gap: 8px; }
    .ads-pillar-link { padding: 13px 15px; }
}

/* ---------------------------------------------------------------------- */
/* Naijack command-centre shell — shared buyer, seller and staff standard */
/* ---------------------------------------------------------------------- */
.brand-mark-shield {
    width: 34px !important;
    height: 38px !important;
    border: 2px solid var(--gold) !important;
    border-radius: 8px 8px 12px 12px !important;
    background: rgba(201,165,92,.08) !important;
    color: var(--gold-bright) !important;
    font-family: Inter, sans-serif;
    font-size: 11px !important;
    letter-spacing: -.05em;
    box-shadow: inset 0 0 0 2px rgba(201,165,92,.06);
    clip-path: polygon(50% 0, 96% 14%, 90% 78%, 50% 100%, 10% 78%, 4% 14%);
}
.dash-nav-brand {
    min-height: 60px;
    font-family: Inter, sans-serif;
    font-size: 15px;
    letter-spacing: .14em;
    color: var(--gold-bright) !important;
}
.dashboard-command-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin: 4px 0 18px;
}
.dashboard-command-head h1 {
    margin: 5px 0 5px;
    font-family: Inter, sans-serif;
    font-size: clamp(24px, 2.2vw, 32px);
    letter-spacing: -.035em;
}
.dashboard-command-head p {
    max-width: 760px;
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.55;
}
.dashboard-command-eyebrow {
    color: var(--gold);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.dashboard-mobile-copy { display: none; }
.dashboard-command-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.dashboard-home-content { display: flex; flex-direction: column; min-width: 0; }
.dashboard-home-content > * { order: 10; }
.dashboard-home-content > .dashboard-command-head { order: 1; }
.dashboard-home-content > .alert { order: 2; }
.dashboard-home-content > .stat-grid-kpi { order: 3; }
.dashboard-home-content > .dashboard-action-grid,
.dashboard-home-content > .focus-panel { order: 4; }
.dashboard-plan-chip {
    padding: 7px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    background: var(--surface);
    font-size: 11px;
    font-weight: 700;
}
.user-dashboard { padding-top: 0 !important; }
.user-dashboard .dash-topbar-wrap { padding-top: 0; }
.user-dashboard .dash-layout,
.ackin-shell .dash-layout { row-gap: 16px; }
.dash-topbar-wrap,
.ackin-shell .dash-topbar {
    background: var(--bg);
}
@media (min-width: 861px) {
    .dash-topbar,
    .ackin-shell .dash-topbar { height: 60px; min-height: 60px; padding: 10px 0; }
    .dash-topbar-search { flex: 1 1 520px; max-width: 720px; height: 40px; }
    .ackin-shell .dash-topbar-search { flex: 1 1 420px; max-width: 720px; margin-right: auto; }
    .ackin-shell .dash-topbar-left { display: none; }
}
.kpi-card,
.dash-panel,
.focus-panel {
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
.stat-grid-kpi { gap: 12px; margin-bottom: 18px; }
.kpi-card { min-height: 104px; padding: 16px 17px; }
.kpi-card-value { font-family: Inter, sans-serif; font-size: 28px; letter-spacing: -.035em; }
.kpi-card-label { font-size: 12px; }
.kpi-card-context { font-size: 10.5px; }
.dashboard-action-grid { gap: 12px; margin-bottom: 18px; }
.dashboard-action-grid .dash-panel,
.dashboard-action-grid .focus-panel { padding: 16px 17px; }
.admin-command-head { margin-top: 2px; margin-bottom: 16px; }
.admin-command-head h1 { font-family: Inter, sans-serif; letter-spacing: -.035em; }
.admin-priority-grid { gap: 12px; }
.admin-insights-grid,
.admin-operations-grid { gap: 12px; }
.dashboard-promo-list { display: grid; }
.dashboard-promo-row {
    display: grid;
    grid-template-columns: 68px minmax(0,1fr) auto;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
}
.dashboard-promo-row:last-child { border-bottom: 0; }
.dashboard-promo-thumb {
    width: 68px;
    height: 48px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--gold);
    background: var(--surface-2);
}
.dashboard-promo-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.dashboard-promo-thumb svg { width: 18px; height: 18px; }
.dashboard-promo-copy { min-width: 0; display: grid; gap: 4px; }
.dashboard-promo-copy strong { overflow: hidden; color: var(--text-primary); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-promo-copy small { color: var(--text-muted); font-size: 10px; }
.dashboard-promo-status { display: grid; justify-items: end; gap: 3px; }
.dashboard-promo-status b { padding: 3px 7px; border: 1px solid rgba(63,174,106,.3); border-radius: 999px; color: var(--success); background: rgba(63,174,106,.07); font-size: 9px; }
.dashboard-promo-status small { color: var(--text-muted); font-size: 9px; }

.dashboard-secondary-details {
    margin: 0 0 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: linear-gradient(145deg, var(--surface), rgba(201,165,92,.025));
    overflow: hidden;
}
.dashboard-secondary-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 72px;
    padding: 15px 18px;
    cursor: pointer;
    list-style: none;
}
.dashboard-secondary-details > summary::-webkit-details-marker { display: none; }
.dashboard-secondary-details > summary strong { display: block; color: var(--text-primary); font-size: 14px; }
.dashboard-secondary-details > summary small { display: block; margin-top: 3px; color: var(--text-muted); font-size: 11px; }
.dashboard-secondary-toggle {
    flex: 0 0 auto;
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
}
.dashboard-secondary-details[open] .dashboard-secondary-toggle::before { content: 'Hide analytics'; }
.dashboard-secondary-details[open] .dashboard-secondary-toggle { font-size: 0; }
.dashboard-secondary-details[open] .dashboard-secondary-toggle::before { font-size: 11px; }
.dashboard-secondary-body { padding: 0 18px 2px; border-top: 1px solid var(--border); }
.dashboard-secondary-body > .section-head:first-child { margin-top: 18px; }

@media (max-width: 600px) {
    .dashboard-secondary-details > summary {
        align-items: flex-start;
        min-height: 0;
        padding: 14px;
    }
    .dashboard-secondary-details > summary small { max-width: 250px; }
    .dashboard-secondary-body { padding-inline: 12px; }
}

@media (max-width: 1100px) {
    .dashboard-command-head { align-items: flex-start; }
    .dashboard-command-actions { max-width: 280px; }
}
@media (max-width: 860px) {
    .dashboard-command-head { margin-top: 0; }
    .dash-nav-brand { min-height: 52px; }
    .brand-mark-shield { width: 30px !important; height: 32px !important; }
    .ackin-shell .dash-topbar-search { grid-column: 1 / -1; grid-row: 2; width: 100%; }
}
@media (max-width: 640px) {
    .dashboard-command-head { align-items: stretch; flex-direction: column; gap: 14px; }
    .dashboard-command-actions { max-width: none; justify-content: flex-start; }
    .dashboard-command-actions .btn { flex: 1; justify-content: center; }
    .dashboard-command-head h1 { font-size: 23px; }
    .dashboard-command-head p { font-size: 12.5px; }
    .dashboard-promo-row { grid-template-columns: 58px minmax(0,1fr) auto; gap: 9px; }
    .dashboard-promo-thumb { width: 58px; height: 44px; }
    .dashboard-command-head,
    .admin-command-head { margin-block: 0 14px; }
    .dashboard-command-head h1,
    .admin-command-head h1 { margin: 3px 0 2px; font-size: 20px; line-height: 1.25; }
    .dashboard-command-head p,
    .admin-command-head p { font-size: 12px; line-height: 1.4; }
    .dashboard-desktop-copy { display: none; }
    .dashboard-mobile-copy { display: inline; }
    .admin-command-actions { display: none; }
}
@media (max-width: 420px) {
    .dashboard-command-actions .trust-ribbon,
    .dashboard-command-actions .dashboard-plan-chip { display: none; }
    .dashboard-promo-row { grid-template-columns: 52px minmax(0,1fr); }
    .dashboard-promo-thumb { width: 52px; height: 42px; }
    .dashboard-promo-status { display: none; }
}
.account-settings-card {
    max-width: 720px;
    margin-top: 24px;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.settings-section-heading { margin-bottom: 20px; }
.settings-section-heading h2 { margin: 2px 0 6px; font-size: clamp(20px, 2vw, 26px); }
.settings-section-heading p:last-child { max-width: 64ch; margin: 0; color: var(--text-secondary); line-height: 1.6; }
.settings-eyebrow { margin: 0; color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.settings-fieldset { margin: 0 0 20px; padding: 0; border: 0; }
.settings-fieldset legend { margin-bottom: 10px; color: var(--text-primary); font-size: 14px; font-weight: 700; }
.settings-toggle-row {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
    cursor: pointer;
}
.settings-toggle-row span { min-width: 0; }
.settings-toggle-row strong, .settings-toggle-row small { display: block; }
.settings-toggle-row small { margin-top: 4px; color: var(--text-secondary); line-height: 1.5; }
.settings-toggle-row input[type="checkbox"] { width: 22px; height: 22px; flex: 0 0 22px; accent-color: var(--gold); }
.quiet-hours-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 180px)); gap: 16px; margin-top: 14px; }
.quiet-hours-grid .form-group { margin: 0; }
@media (max-width: 560px) {
    .account-settings-card { padding: 18px 16px; }
    .settings-toggle-row { align-items: flex-start; gap: 14px; }
    .quiet-hours-grid { grid-template-columns: 1fr 1fr; }
    .quiet-hours-grid input { min-height: 44px; font-size: 16px; }
}
.call-request-menu { position: relative; flex: 0 0 auto; margin-left: auto; }
.call-request-menu > summary { display: grid; list-style: none; cursor: pointer; }
.call-request-menu > summary::-webkit-details-marker { display: none; }
.call-request-menu[open] > summary { color: var(--gold); border-color: var(--gold); }
.call-request-popover {
    position: absolute;
    z-index: 40;
    top: calc(100% + 10px);
    right: 0;
    width: min(390px, calc(100vw - 32px));
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .32);
}
.call-request-popover-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.call-request-popover-head span { color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.call-request-popover > p { margin: 0 0 16px; color: var(--text-secondary); font-size: 13px; line-height: 1.55; }
.call-request-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.call-request-fields .form-group { min-width: 0; }
.conversation-call-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin: 12px 20px 0;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
}
.conversation-call-card.status-accepted { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); }
.conversation-call-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: var(--gold); background: rgba(201, 165, 92, .1); }
.conversation-call-copy { min-width: 0; }
.conversation-call-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.conversation-call-title span { color: var(--gold); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.conversation-call-copy p { margin: 3px 0; color: var(--text-primary); font-size: 13px; }
.conversation-call-copy small { display: block; color: var(--text-secondary); line-height: 1.45; overflow-wrap: anywhere; }
.conversation-call-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 700px) {
    .call-request-popover { position: fixed; top: auto; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); left: 12px; width: auto; max-height: calc(100dvh - 24px); overflow-y: auto; }
    .conversation-call-card { grid-template-columns: auto minmax(0, 1fr); margin-inline: 12px; }
    .conversation-call-actions { grid-column: 1 / -1; justify-content: stretch; }
    .conversation-call-actions .btn { flex: 1; min-height: 44px; }
}
@media (max-width: 420px) {
    .call-request-fields { grid-template-columns: 1fr; gap: 0; }
    .call-request-popover { padding: 18px 16px; }
}

.password-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    border-radius: var(--radius);
    overflow: hidden;
}
.password-field:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(201, 165, 92, 0.18);
}
.password-field input {
    border: 0 !important;
    background: transparent !important;
    min-width: 0;
}
.password-toggle {
    min-width: 56px;
    border: 0;
    border-left: 1px solid var(--border);
    background: rgba(201, 165, 92, 0.06);
    color: var(--text-secondary);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.password-toggle:hover,
.password-toggle:focus-visible {
    color: var(--gold-bright);
    background: rgba(201, 165, 92, 0.12);
}
.password-strength {
    margin-top: 8px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 12px;
}
.password-strength span {
    display: block;
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--danger) 0 25%, var(--border) 25% 100%);
    overflow: hidden;
}
.password-strength.is-fair span { background: linear-gradient(90deg, var(--gold) 0 50%, var(--border) 50% 100%); }
.password-strength.is-good span { background: linear-gradient(90deg, var(--blue) 0 75%, var(--border) 75% 100%); }
.password-strength.is-strong span { background: linear-gradient(90deg, var(--success) 0 100%, var(--border) 100% 100%); }
.password-strength strong { font-weight: 600; color: inherit; }
.security-source-list { display: grid; gap: 10px; }
.security-source-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: var(--radius);
}
.security-source-row div { min-width: 0; display: grid; gap: 3px; }
.security-source-row span { color: var(--text-secondary); font-size: 12px; }
.security-source-row small { color: var(--text-muted); white-space: nowrap; }
.security-source-row code { overflow-wrap: anywhere; }
.maintenance-admin-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0 0 12px;
    padding: 9px 12px;
    border: 1px solid rgba(201,165,92,.36);
    border-radius: 8px;
    background: rgba(201,165,92,.1);
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.4;
}
.maintenance-admin-banner strong { color: var(--gold); letter-spacing: .05em; text-transform: uppercase; }
.maintenance-admin-banner a { margin-left: auto; color: var(--gold); font-weight: 800; text-decoration: none; }
.maintenance-admin-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(201,165,92,.12); flex: 0 0 auto; }
@media (max-width: 640px) {
    .maintenance-admin-banner { align-items: flex-start; flex-wrap: wrap; }
    .maintenance-admin-banner a { width: 100%; margin-left: 18px; }
}
.admin-cache-clear-form{margin:0;display:inline-flex}.admin-cache-clear-form button{font:inherit;cursor:pointer}

/* Naijack enterprise homepage v2 */
.home-enterprise { background: var(--bg); }
.home-system-message { padding-top: 16px; }
.home-announcements { display: grid; gap: 10px; padding-top: 16px; }
.home-announcement { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.home-announcement p { margin: 3px 0 0; color: var(--text-secondary); font-size: 13px; }
.home-enterprise-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); background: radial-gradient(circle at 78% 40%, rgba(201,165,92,.09), transparent 34%), #080a0e; }
.home-enterprise-hero-grid { position: relative; min-height: 500px; display: block; }
.home-enterprise-hero-copy { position: relative; z-index: 2; width: min(55%, 670px); min-height: 500px; display: flex; flex-direction: column; justify-content: center; padding: 54px 28px 46px 0; }
.home-eyebrow { display: inline-block; margin-bottom: 13px; color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.home-enterprise-hero h1 { max-width: 670px; margin: 0; color: var(--text-primary); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: clamp(38px, 3.45vw, 52px); font-weight: 780; letter-spacing: -.04em; line-height: 1.06; }
.home-hero-line { display: block; white-space: nowrap; }
.home-hero-line-accent { color: var(--gold-bright); }
.home-enterprise-hero-copy > p { max-width: 610px; margin: 20px 0 0; color: var(--text-secondary); font-size: 16px; line-height: 1.65; }
.home-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.home-hero-actions .btn { min-height: 46px; }
.home-trust-markers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 34px; }
.home-trust-markers > span { display: grid; grid-template-columns: 34px minmax(0,1fr); column-gap: 10px; padding-right: 16px; }
.home-trust-markers > span + span { border-left: 1px solid var(--border); padding-left: 16px; }
.home-trust-markers svg { grid-row: 1 / 3; width: 32px; height: 32px; padding: 7px; border: 1px solid rgba(67,201,112,.45); border-radius: 50%; color: var(--success); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.home-trust-markers b { color: var(--text-primary); font-size: 11.5px; }
.home-trust-markers small { margin-top: 2px; color: var(--text-muted); font-size: 9.5px; line-height: 1.3; }
.home-enterprise-hero-visual { position: absolute; z-index: 0; inset: 0 calc((100vw - min(100vw - 40px, 1200px)) / -2) 0 0; overflow: hidden; }
.home-enterprise-hero-visual::after { content: ''; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, #080a0e 0%, rgba(8,10,14,.94) 25%, rgba(8,10,14,.56) 47%, rgba(8,10,14,.06) 72%), linear-gradient(0deg, rgba(8,10,14,.62), transparent 34%); pointer-events: none; }
.home-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 57% 50%; }
.home-category-rail { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; padding-top: 16px; }
.home-category-rail > a { min-width: 0; min-height: 78px; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 13px 16px; color: var(--text-secondary); text-decoration: none; background: linear-gradient(145deg, var(--surface), var(--surface-2)); border: 1px solid var(--border); border-radius: 6px; transition: border-color .18s ease, background .18s ease; }
.home-category-rail > a:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.home-category-icon { width: 42px; height: 42px; display: grid; place-items: center; color: var(--gold); background: rgba(201,165,92,.08); border: 1px solid rgba(201,165,92,.16); border-radius: 8px; }
.home-category-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.home-category-rail b, .home-category-rail small { display: block; }
.home-category-rail b { color: var(--text-primary); font-size: 13px; }
.home-category-rail small { margin-top: 3px; color: var(--text-muted); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-category-rail i { color: var(--text-muted); font-size: 22px; font-style: normal; }
.home-safety-strip { min-height: 44px; display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 9px 14px; color: var(--text-secondary); background: rgba(201,165,92,.055); border: 1px solid rgba(201,165,92,.28); border-radius: 5px; font-size: 12px; }
.home-safety-strip svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--gold); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.home-safety-strip strong { color: var(--gold-bright); }
.home-safety-strip a { margin-left: auto; color: var(--gold-bright); font-weight: 700; white-space: nowrap; }
.home-marketplace-content { padding-top: 28px; padding-bottom: 48px; }
.home-feed-section { margin-bottom: 46px; }
.home-feed-heading-row, .home-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.home-feed-heading-row > p { max-width: 460px; margin: 0; color: var(--text-muted); font-size: 11px; text-align: right; }
.home-feed-tabs { display: flex; align-items: center; gap: 26px; }
.home-feed-tabs .feed-tab { position: relative; min-height: 40px; padding: 0 1px 9px; color: var(--text-muted); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 15px; font-weight: 700; }
.home-feed-tabs .feed-tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -11px; height: 2px; background: transparent; }
.home-feed-tabs .feed-tab.active { color: var(--text-primary); }
.home-feed-tabs .feed-tab.active::after { background: var(--gold); }
.home-section-heading h2 { margin: 0; color: var(--text-primary); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 23px; letter-spacing: -.02em; }
.home-section-heading p { margin: 3px 0 0; color: var(--text-secondary); font-size: 12px; }
.home-section-heading > a { color: var(--gold-bright); font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.home-card-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.home-loading-grid { display: none; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.marketplace-loading .home-loading-grid { display: grid; }
.marketplace-loading .home-loading-target { display: none !important; }
.home-loading-card { min-width: 0; overflow: hidden; padding-bottom: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.home-loading-media,
.home-loading-line,
.home-loading-seller i { display: block; background: linear-gradient(100deg,var(--surface-2) 24%,var(--surface-hover) 42%,var(--surface-2) 60%); background-size: 300% 100%; animation: homeSkeleton 1.25s ease-in-out infinite; }
.home-loading-media { aspect-ratio: 4 / 3; width: 100%; }
.home-loading-line { height: 10px; margin: 10px 12px 0; border-radius: 999px; }
.home-loading-title { width: calc(78% - 24px); height: 13px; }
.home-loading-price { width: calc(48% - 24px); height: 14px; }
.home-loading-meta { width: calc(68% - 24px); height: 9px; }
.home-loading-seller { display: flex; align-items: center; gap: 8px; margin: 12px 12px 0; padding-top: 10px; border-top: 1px solid var(--border); }
.home-loading-seller i { width: 25px; height: 25px; flex: 0 0 auto; border-radius: 50%; }
.home-loading-seller .home-loading-line { width: 58%; margin: 0; }
@keyframes homeSkeleton { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .home-loading-media,.home-loading-line,.home-loading-seller i { animation: none; } }
.home-enterprise .ad-card { container-type: inline-size; border-radius: 6px; background: linear-gradient(160deg, #11151d, #0d1118); }
.home-enterprise .ad-card-tier { border-color: var(--border-strong); box-shadow: none; }
.home-enterprise .ad-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0,0,0,.3); }
.ad-card-media-wrap > .ad-card-fav { position: absolute; z-index: 5; top: 7px; right: 7px; width: 30px; height: 30px; border-radius: 4px; color: #f4f5f7; background: rgba(7,9,13,.82); border-color: rgba(255,255,255,.24); backdrop-filter: blur(5px); }
.ad-card-media-wrap > .ad-card-fav:hover { color: var(--gold-bright); border-color: var(--gold); }
.ad-card-price-row { align-items: center; }
.ad-card-details-cta { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; padding: 6px 9px; color: var(--text-secondary); background: rgba(255,255,255,.018); border: 1px solid var(--border); border-radius: 4px; font-size: 10.5px; font-weight: 650; line-height: 1; text-decoration: none; transition: color .15s ease, border-color .15s ease, background .15s ease; }
.ad-card-details-cta:hover { color: var(--gold-bright); border-color: var(--border-strong); background: var(--surface-hover); }
.ad-card-details-cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@container (max-width: 210px) { .ad-card-details-label { display: none; } .ad-card-details-cta { width: 32px; padding-inline: 7px; } }
.home-seller-growth { display: grid; grid-template-columns: 1.05fr 1fr 280px; min-height: 285px; margin: 2px 0 14px; overflow: hidden; background: linear-gradient(135deg, #121720, #090c11); border: 1px solid rgba(201,165,92,.45); border-radius: 7px; }
.home-seller-growth-copy { align-self: center; padding: 30px 34px; }
.home-seller-growth h2 { margin: 0; color: var(--text-primary); font-family: 'Inter', sans-serif; font-size: 27px; line-height: 1.15; letter-spacing: -.025em; }
.home-seller-growth p { margin: 12px 0 22px; color: var(--text-secondary); font-size: 13px; line-height: 1.6; }
.home-seller-benefits { display: grid; align-content: center; gap: 20px; padding: 26px; border-left: 1px solid var(--border); }
.home-seller-benefits span { display: grid; gap: 4px; }
.home-seller-benefits b { color: var(--gold-bright); font-size: 12px; }
.home-seller-benefits small { color: var(--text-secondary); font-size: 10.5px; line-height: 1.45; }
.home-seller-growth > img { width: 100%; height: 100%; object-fit: cover; mask-image: linear-gradient(90deg, transparent 0, #000 24%); }
.home-request-panel { display: grid; grid-template-columns: minmax(270px,1.1fr) minmax(430px,1.5fr) auto; align-items: center; gap: 24px; margin: 14px 0; padding: 20px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; }
.home-request-panel > div { display: flex; align-items: center; gap: 12px; }
.home-request-icon { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; color: var(--gold); background: rgba(201,165,92,.09); border-radius: 50%; }
.home-request-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.home-request-panel h2, .home-confidence-panel h2 { margin: 0; color: var(--text-primary); font-family: 'Inter', sans-serif; font-size: 16px; }
.home-request-panel p, .home-confidence-panel p { margin: 4px 0 0; color: var(--text-secondary); font-size: 10.5px; line-height: 1.45; }
.home-request-panel ol { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.home-request-panel li { display: flex; align-items: center; gap: 8px; }
.home-request-panel li > b { width: 24px; height: 24px; flex: 0 0 auto; display: grid; place-items: center; color: #111; background: var(--gold); border-radius: 50%; font-size: 10px; }
.home-request-panel li span, .home-request-panel li strong, .home-request-panel li small { display: block; }
.home-request-panel li strong { color: var(--text-primary); font-size: 10px; }
.home-request-panel li small { margin-top: 2px; color: var(--text-muted); font-size: 8.5px; line-height: 1.3; }
.home-confidence-panel { display: grid; grid-template-columns: 1.15fr repeat(3,1fr); gap: 10px; padding: 16px; background: rgba(13,17,24,.72); border: 1px solid var(--border); border-radius: 7px; }
.home-confidence-panel > div { align-self: center; padding: 4px 10px; }
.home-confidence-panel > a { display: grid; gap: 4px; padding: 12px 14px; color: inherit; text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-radius: 5px; }
.home-confidence-panel > a:hover { border-color: var(--border-strong); }
.home-confidence-panel > a b { color: var(--text-primary); font-size: 11px; }
.home-confidence-panel > a small { color: var(--text-secondary); font-size: 9px; line-height: 1.4; }
@media (max-width: 1050px) {
    .home-enterprise-hero-grid { grid-template-columns: minmax(0,1fr) minmax(410px,.9fr); }
    .home-enterprise-hero-copy { padding-right: 24px; }
    .home-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .home-loading-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .home-seller-growth { grid-template-columns: 1fr 1fr; }
    .home-seller-growth > img { display: none; }
    .home-request-panel { grid-template-columns: 1fr auto; }
    .home-request-panel ol { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 760px) {
    .home-enterprise-hero-grid { min-height: auto; }
    .home-enterprise-hero-copy { width: 100%; min-height: auto; padding: 38px 0 26px; }
    .home-enterprise-hero h1 { max-width: 620px; font-size: clamp(34px, 8.8vw, 48px); }
    .home-hero-line { white-space: normal; }
    .home-enterprise-hero-visual { position: relative; inset: auto; min-height: 300px; margin: 0 -20px; }
    .home-enterprise-hero-visual::after { background: linear-gradient(180deg, #080a0e, transparent 24%, rgba(8,10,14,.48)); }
    .home-hero-photo { object-position: 63% center; }
    .home-category-rail { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .home-safety-strip { align-items: flex-start; flex-wrap: wrap; }
    .home-safety-strip a { width: 100%; margin-left: 29px; }
    .home-feed-heading-row, .home-section-heading { align-items: flex-start; }
    .home-feed-heading-row > p { display: none; }
    .home-seller-growth { grid-template-columns: 1fr; }
    .home-seller-benefits { border-left: 0; border-top: 1px solid var(--border); }
    .home-request-panel { grid-template-columns: 1fr; }
    .home-request-panel ol { grid-column: auto; grid-row: auto; }
    .home-request-panel > .btn { justify-self: stretch; }
    .home-confidence-panel { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .home-enterprise-hero-copy { padding-top: 32px; }
    .home-enterprise-hero-copy > p { font-size: 14px; }
    .home-trust-markers { grid-template-columns: 1fr; gap: 12px; }
    .home-trust-markers > span + span { border-left: 0; padding-left: 0; }
    .home-category-rail > a { min-height: 68px; grid-template-columns: 36px minmax(0,1fr); padding: 10px; }
    .home-category-rail i, .home-category-rail small { display: none; }
    .home-category-icon { width: 36px; height: 36px; }
    .home-marketplace-content { padding-top: 22px; }
    .home-feed-section { margin-bottom: 34px; }
    .home-section-heading h2 { font-size: 19px; }
    .home-section-heading p { font-size: 10.5px; }
    .home-section-heading > a { font-size: 10px; }
    .home-card-grid { gap: 10px; }
    .home-seller-growth-copy, .home-seller-benefits { padding: 22px 18px; }
    .home-request-panel { padding: 18px 14px; }
    .home-request-panel ol { grid-template-columns: 1fr; }
}

/* Naijack compact mobile hero correction */
@media (max-width: 600px) {
    .site-header .container { padding-inline: 14px; }
    .site-header .brand { gap: 8px; font-size: 18px; }
    .site-header .brand .brand-mark { width: 30px; height: 30px; }
    .site-header .header-actions { gap: 6px; }
    .site-header .header-actions .btn { min-height: 36px; padding: 8px 11px; font-size: 12px; }
    .home-enterprise-hero-copy { overflow: hidden; }
    .home-enterprise-hero h1 { max-width: 100%; font-size: clamp(30px, 8.4vw, 40px); letter-spacing: -.035em; }
    .home-enterprise .home-hero-line { max-width: 100%; white-space: normal; overflow-wrap: normal; }
    .home-hero-actions { flex-wrap: nowrap; gap: 8px; }
    .home-hero-actions .btn { min-width: 0; padding-inline: 12px; font-size: 12px; white-space: nowrap; }
    .home-trust-markers { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
    .home-trust-markers > span { min-width: 0; grid-template-columns: 27px minmax(0, 1fr); column-gap: 6px; padding-right: 6px; }
    .home-trust-markers > span + span { padding-left: 7px; }
    .home-trust-markers svg { width: 26px; height: 26px; padding: 6px; }
    .home-trust-markers b { font-size: 9px; line-height: 1.2; overflow-wrap: anywhere; }
    .home-trust-markers small { font-size: 7.5px; line-height: 1.25; overflow-wrap: anywhere; }
}

/* Naijack mobile marketplace app shell */
@media (max-width: 760px) {
    .home-enterprise-hero,
    .home-category-rail,
    .home-safety-strip { display: none; }
    .home-marketplace-content { padding-top: 0; padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
    .home-discovery-section { margin-top: 0; }
    .home-discovery-section .home-feed-heading-row {
        position: sticky;
        top: var(--sticky-header-h, 108px);
        z-index: 45;
        min-height: 50px;
        margin: 0 -20px 12px;
        padding: 10px 20px 0;
        align-items: flex-end;
        background: rgba(7, 8, 13, .98);
        border-bottom: 1px solid var(--border);
        box-shadow: 0 7px 18px rgba(0, 0, 0, .2);
    }
    .home-discovery-section .home-feed-tabs { gap: 28px; }
    .home-discovery-section .home-feed-tabs .feed-tab { min-height: 39px; padding-bottom: 10px; font-size: 13px; }
    .home-discovery-section .home-feed-tabs .feed-tab::after { bottom: -1px; }
}

/* Naijack enterprise ad-card hierarchy v3 */
.ad-card { container-type: inline-size; }
.ad-card-seller-top-row { min-width: 0; gap: 6px; padding-top: 3px; }
.ad-card-seller-link,
.ad-card-seller-link:visited { color: var(--text-secondary); background: transparent; }
.ad-card-seller-link:hover { opacity: 1; }
.ad-card-seller-avatar-ring,
.listing-grid.is-list-view .ad-card-seller-avatar-ring {
    top: 0;
    width: 24px;
    height: 24px;
    margin-bottom: 0;
    padding: 1px;
    border-width: 1px;
    animation: none;
}
.ad-card-seller-avatar-ring.is-online { animation: none; }
.ad-card-seller-avatar { font-size: 10px; }
.ad-card-seller-name { font-size: 11.5px; }
.ad-card-seller-name-short { display: none; min-width: 0; color: var(--text-secondary); font-size: 10.5px; font-weight: 600; white-space: nowrap; }
@container (max-width: 210px) {
    .ad-card-seller-name { display: none; }
    .ad-card-seller-name-short { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
    .home-enterprise *, .home-enterprise *::before, .home-enterprise *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.footer-link-button{appearance:none;border:0;background:none;padding:0;color:inherit;font:inherit;cursor:pointer;text-align:left}.footer-link-button:hover,.footer-link-button:focus-visible{color:var(--gold)}

.consent-check{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.55;color:var(--text-secondary)}.consent-check input{width:18px;height:18px;flex:0 0 auto;margin-top:2px}.consent-check a{color:var(--gold);font-weight:600}

/* Marketplace card hierarchy: image, title, complete price, listing facts,
   then seller identity and the independent save action. */
.ad-card-body > .ad-card-price-row { margin-top: 0; padding-top: 0; }
.ad-card-body > .ad-card-price-row .ad-card-price {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(16px, 1.45vw, 19px);
    font-weight: 750;
}
.ad-card-body > .ad-card-price-row .ad-card-price-status {
    align-self: center;
    padding: 3px 7px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 9.5px;
    line-height: 1.2;
}
.ad-card-seller-top-row { margin-top: auto; padding-top: 5px; border-top: 1px solid var(--border); }
.ad-card-seller-link { overflow: hidden; }
.ad-card-seller-name { max-width: 100%; }
.ad-card-seller-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.ad-card-seller-top-row > .ad-card-fav { width: 34px; height: 34px; border-radius: 7px; }

.home-showcase-rail {
    --showcase-gap: clamp(18px, 1.6vw, 24px);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--showcase-gap) * 3)) / 4);
    column-gap: var(--showcase-gap) !important;
    margin: 2px 0 24px;
    padding: 0 1px 10px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}
.home-showcase-rail .ad-card { min-width: 0; scroll-snap-align: start; }

/* Marketplace inventory is useful content, not decorative entrance motion.
   Keep it painted immediately and let images decode progressively without a
   blank-card phase while JavaScript or the network catches up. */
.ad-card .js-fade-img { opacity: 1; transition: none; }

/* Showcase cards are cinematic image tiles, not ordinary cards made larger.
   Every text element is layered over a controlled contrast gradient. */
.ad-card-showcase {
    position: relative;
    min-width: 0;
    min-height: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    isolation: isolate;
    border-color: rgba(255,255,255,.2);
    background: #0b100d;
}
.ad-card-showcase .ad-card-media-wrap,
.ad-card-showcase .ad-card-media,
.ad-card-showcase .ad-card-gallery { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.ad-card-showcase .ad-card-media-wrap { z-index: 0; }
.ad-card-showcase .ad-card-seal,
.ad-card-showcase .ad-card-gallery-dots,
.ad-card-showcase .ad-card-compare { z-index: 6; }
.ad-card-showcase .ad-card-media-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(4,9,6,.02) 0%, rgba(4,9,6,.03) 48%, rgba(4,9,6,.34) 67%, rgba(4,9,6,.78) 86%, rgba(4,9,6,.94) 100%);
}
.ad-card-showcase .ad-card-gallery img { object-position: center center; }
.ad-card-showcase .ad-card-body {
    position: absolute;
    inset: 0;
    z-index: 4;
    justify-content: flex-end;
    gap: 5px;
    padding: 76px 14px 13px;
    pointer-events: none;
}
.ad-card-showcase .ad-card-body a,
.ad-card-showcase .ad-card-body button { pointer-events: auto; }
.ad-card-showcase .ad-card-title {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-shadow: 0 1px 8px rgba(0,0,0,.72);
}
.ad-card-showcase .ad-card-price-row { order: initial; }
.ad-card-showcase .ad-card-price { color: #fff; font-size: 17px; text-shadow: 0 1px 8px rgba(0,0,0,.72); }
.ad-card-showcase .ad-card-price-status { color: rgba(255,255,255,.88); border-color: rgba(255,255,255,.32); background: rgba(4,9,6,.44); }
.ad-card-showcase .ad-card-facts,
.ad-card-showcase .ad-card-meta { color: rgba(255,255,255,.82); font-size: 10.5px; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.ad-card-showcase .ad-card-meta .dot { background: rgba(255,255,255,.58); }
.ad-card-showcase .ad-card-seller-top-row { margin-top: 3px; padding-top: 7px; border-color: rgba(255,255,255,.18); }
.ad-card-showcase .ad-card-seller-link,
.ad-card-showcase .ad-card-seller-link:visited,
.ad-card-showcase .ad-card-seller-name,
.ad-card-showcase .ad-card-seller-name-short { color: rgba(255,255,255,.9); }
.ad-card-showcase .ad-card-seller-avatar-ring { background: rgba(4,9,6,.72); border-color: rgba(255,255,255,.7); box-shadow: none; }
.ad-card-showcase .ad-card-seller-avatar { background: rgba(4,9,6,.72); color: #fff; }
.ad-card-showcase .ad-card-seller-top-row > .ad-card-fav {
    position: static;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    margin-left: auto;
    color: #fff;
    border-color: rgba(255,255,255,.38);
    background: rgba(4,9,6,.58);
    backdrop-filter: blur(7px);
}
.ad-card-showcase.ad-card-tier { box-shadow: 0 0 0 1px var(--tier-color), 0 12px 28px var(--tier-glow-2); }
.ad-card-showcase.ad-card-tier:hover { box-shadow: 0 0 0 1px var(--tier-color), 0 18px 38px var(--tier-glow-hover); }

/* Standard cards transition from photography into their surface without a
   harsh image/body seam in either theme. */
.ad-card:not(.ad-card-showcase) .ad-card-media-wrap::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    z-index: 3;
    height: 22px;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, var(--surface));
}
.ad-card:not(.ad-card-showcase) .ad-card-body { position: relative; z-index: 4; margin-top: -5px; }
@media (max-width: 1050px) {
    .home-showcase-rail {
        --showcase-gap: 18px;
        grid-auto-columns: calc((100% - var(--showcase-gap)) / 2);
    }
    .ad-card-showcase { aspect-ratio: 4 / 3; }
}
@media (max-width: 600px) {
    .home-showcase-rail {
        --showcase-gap: 10px;
        grid-auto-columns: calc(66.6667% - 6.667px);
    }
    .ad-card-showcase { min-height: 238px; aspect-ratio: 4 / 5; }
    .ad-card-showcase .ad-card-body { padding: 62px 10px 10px; }
    .ad-card-showcase .ad-card-title { font-size: 12.5px; }
    .ad-card-showcase .ad-card-price { font-size: 14px; }
    .ad-card-showcase .ad-card-price-status { padding: 2px 5px; font-size: 8px; }
    .ad-card-showcase .ad-card-facts,
    .ad-card-showcase .ad-card-meta { font-size: 9px; }
    .ad-card-showcase .ad-card-seller-name { font-size: 9.5px; }
}

/* The discovery tabs belong to the active theme; they must never retain a
   dark strip when the rest of the homepage is in light mode. */
:root[data-theme="light"] .home-discovery-section .home-feed-heading-row {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: 0 6px 18px rgba(15, 43, 31, .07);
}

/* The tab strip starts cleanly beneath the header; only the selected-tab
   indicator remains, never an extra horizontal rule above the tabs. */
.home-discovery-section,
.home-discovery-section .home-feed-heading-row { border-top: 0 !important; }

/* Discovery switcher: a compact, self-contained control with deliberate
   edge padding. For You owns the cinematic Spotlight rail; Trending owns
   the regular comparison grid, so one section never mixes card languages. */
.home-discovery-section .home-feed-heading-row {
    min-height: 52px;
    align-items: center;
    margin: 0 0 16px;
    padding: 6px 10px;
    border: 0 !important;
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 1px 0 var(--border), 0 8px 24px rgba(15, 43, 31, .05);
}
.home-discovery-section .home-feed-tabs { gap: 4px; }
.home-discovery-section .home-feed-tabs .feed-tab {
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 9px;
    line-height: 1;
}
.home-discovery-section .home-feed-tabs .feed-tab.active {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 9%, transparent);
}
.home-discovery-section .home-feed-tabs .feed-tab::after {
    left: 14px;
    right: 14px;
    bottom: 3px;
    height: 2px;
    border-radius: 999px;
}
@media (max-width: 760px) {
    /* On the homepage the sticky discovery switcher begins exactly where the
       mobile header ends. Suppress the header rule here so it cannot appear as
       an unrelated extra line above For You / Trending. */
    .marketplace-home .site-header { border-bottom: 0; }
    .home-discovery-section .home-feed-heading-row {
        min-height: 50px;
        margin: 0 0 12px;
        padding: 5px 8px;
        border-radius: 0 0 12px 12px;
    }
    .home-discovery-section .home-feed-tabs { gap: 2px; }
    .home-discovery-section .home-feed-tabs .feed-tab { min-height: 40px; padding-inline: 13px; }
}

/* For You uses the same comparison-friendly card geometry as every other
   marketplace section. Spotlight value comes from ranking and restrained
   premium styling, not a different image crop or an oversized card. */
.home-showcase-rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 14px !important;
    overflow: visible;
    padding: 0;
    scrollbar-width: none;
}
.ad-card-showcase {
    width: auto;
    min-height: 0;
    aspect-ratio: auto;
    background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%);
}
.ad-card-showcase .ad-card-media-wrap {
    position: relative;
    inset: auto;
    z-index: auto;
    width: auto;
    height: auto;
}
.ad-card-showcase .ad-card-media {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
}
.ad-card-showcase .ad-card-gallery {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.ad-card-showcase .ad-card-media-wrap::after {
    inset: auto 0 -1px;
    height: 26px;
    background: linear-gradient(180deg, transparent, var(--surface));
}
.ad-card-showcase .ad-card-body {
    position: relative;
    inset: auto;
    z-index: 4;
    justify-content: flex-start;
    gap: 6px;
    margin-top: -5px;
    padding: 12px 11px 13px;
    pointer-events: auto;
}
.ad-card-showcase .ad-card-title {
    color: var(--text-primary);
    font-size: 14.5px;
    text-shadow: none;
}
.ad-card-showcase .ad-card-price { color: var(--primary); font-size: clamp(16px, 1.45vw, 19px); text-shadow: none; }
.ad-card-showcase .ad-card-price-status { color: var(--text-secondary); border-color: var(--border); background: var(--surface-2); }
.ad-card-showcase .ad-card-meta { color: var(--text-secondary); font-size: 11px; text-shadow: none; }
.ad-card-showcase .ad-card-meta .dot { background: var(--text-muted); }
.ad-card-showcase .ad-card-seller-top-row { margin-top: auto; padding-top: 5px; border-color: var(--border); }
.ad-card-showcase .ad-card-seller-link,
.ad-card-showcase .ad-card-seller-link:visited,
.ad-card-showcase .ad-card-seller-name,
.ad-card-showcase .ad-card-seller-name-short { color: var(--text-secondary); }
.ad-card-showcase .ad-card-seller-avatar-ring { background: var(--surface-2); border-color: var(--border-strong); }
.ad-card-showcase .ad-card-seller-avatar { background: var(--surface-2); color: var(--primary); }
.ad-card-showcase .ad-card-seller-top-row > .ad-card-fav {
    color: var(--text-secondary);
    border-color: var(--border);
    background: var(--surface-2);
    backdrop-filter: none;
}
.ad-card-showcase.ad-card-tier {
    border-color: color-mix(in srgb, var(--tier-color) 58%, var(--border));
    box-shadow: 0 7px 22px var(--tier-glow-2);
}
.ad-card-showcase.ad-card-tier:hover { box-shadow: 0 12px 30px var(--tier-glow-hover); }

@media (max-width: 1050px) {
    .home-showcase-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ad-card-showcase { aspect-ratio: auto; }
}
@media (max-width: 600px) {
    .home-showcase-rail {
        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: calc(66.6667% - 6.667px);
        gap: 10px !important;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline mandatory;
        padding: 0 1px 10px;
    }
    .ad-card-showcase { min-height: 0; aspect-ratio: auto; }
    .ad-card-showcase .ad-card-body { gap: 4px; padding: 12px 10px 13px; }
    .ad-card-showcase .ad-card-title { font-size: 12.5px; }
    .ad-card-showcase .ad-card-price { font-size: 16px; }
    .ad-card-showcase .ad-card-price-status { padding: 2px 5px; font-size: 8px; }
    .ad-card-showcase .ad-card-meta { font-size: 9px; }
    .ad-card-showcase .ad-card-seller-name { font-size: 9.5px; }
}

/* Canonical dashboard chrome. This final layer deliberately wins over
   legacy buyer/seller/admin media-query exceptions so every authenticated
   role receives the same two-row header contract. */
.dash-topbar,
.ackin-shell .dash-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px;
    row-gap: 10px;
    height: auto;
    min-height: 0;
    padding-block: 9px;
}
.dash-topbar-left,
.ackin-shell .dash-topbar-left {
    display: flex !important;
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
}
.dash-topbar-right,
.ackin-shell .dash-topbar-right {
    grid-column: 2;
    grid-row: 1;
    margin-left: 0;
}
.dash-topbar-search,
.ackin-shell .dash-topbar-search {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    max-width: none;
    margin-right: 0;
}
.dash-topbar .header-dash-toggle,
.ackin-shell .dash-topbar .header-dash-toggle { display: flex; }
.ackin-shell .admin-maintenance-toggle-form,
.ackin-shell .admin-cache-clear-form,
.ackin-shell .admin-compose-announcement,
.ackin-shell .admin-topbar-action { display: none !important; }

/* Adaptive-theme finishing layer. Legacy gold-tinted interaction states are
   normalized here to Naijack green; gold remains reserved for paid tiers. */
.btn-outline:hover,
.cs-option.selected,
.role-option.active,
.role-option:has(input:checked),
.dash-nav-link.active,
.icon-circle-btn.active,
.conversation-call-icon,
.home-category-icon,
.home-request-icon {
    background-color: rgb(var(--primary-rgb) / .1);
}
.alert-info,
.reputation-pill-good,
.price-fairness-badge.tier-fair,
.badge-gold { background: rgb(var(--primary-rgb) / .11); }

/* Light mode uses true daylight surfaces. The photographic homepage hero
   intentionally remains dark for legibility, while content cards do not. */
:root[data-theme="light"] .ad-card-skeleton {
    background: linear-gradient(100deg, #E7ECE9 30%, #F5F7F6 50%, #E7ECE9 70%);
}
:root[data-theme="light"] .home-enterprise .ad-card {
    background: linear-gradient(160deg, var(--surface), var(--surface-2));
}
:root[data-theme="light"] .home-seller-growth {
    background: linear-gradient(135deg, var(--surface), var(--surface-2));
    border-color: var(--border-strong);
}
:root[data-theme="light"] .cs-panel,
:root[data-theme="light"] .user-menu-panel,
:root[data-theme="light"] .notif-panel {
    box-shadow: 0 18px 46px rgba(20, 32, 25, .14);
}
:root[data-theme="light"] .ad-card,
:root[data-theme="light"] .stat-card,
:root[data-theme="light"] .kpi-card,
:root[data-theme="light"] .dash-panel,
:root[data-theme="light"] .focus-panel,
:root[data-theme="light"] .auth-card,
:root[data-theme="light"] .plan-card {
    background: #FFFFFF;
    border-color: rgba(20, 52, 36, .11);
    box-shadow: var(--shadow-card);
}
:root[data-theme="light"] .ad-card:hover,
:root[data-theme="light"] .stat-card:hover,
:root[data-theme="light"] .kpi-card:hover,
:root[data-theme="light"] .plan-card:hover {
    border-color: rgba(8, 122, 69, .28);
    box-shadow: var(--shadow-card-hover);
}
:root[data-theme="light"] .dash-topbar-wrap,
:root[data-theme="light"] .ackin-shell .dash-topbar {
    background: rgb(231 236 233 / .94);
}

@media (max-width: 480px) {
    .theme-cycle-btn { width: 38px; height: 38px; }
}

/* Shared chrome contract: daylight header and footer use the same slightly
   deeper mineral surface, while search remains a distinct white tool. */
:root[data-theme="light"] .site-header,
:root[data-theme="light"] .site-footer {
    background: rgb(215 222 218 / .96);
}
:root[data-theme="light"] .dash-topbar-wrap,
:root[data-theme="light"] .ackin-shell .dash-topbar {
    background: rgb(215 222 218 / .96);
}
:root[data-theme="light"] .quick-search-form {
    background: #FFFFFF;
    border-color: rgba(20, 52, 36, .14);
    box-shadow: 0 1px 2px rgba(20, 32, 25, .05), 0 7px 18px rgba(20, 32, 25, .06);
}
.quick-search-form { border-radius: 8px; }
.dash-topbar-right { min-width: 0; }

@media (max-width: 620px) {
    .dash-topbar-right { gap: 6px; }
    .dash-topbar-search .cs-inline,
    .ackin-shell .dash-topbar-search .cs-inline {
        flex: 0 1 36%;
        max-width: 36%;
    }
    .dash-topbar-search .cs-trigger,
    .ackin-shell .dash-topbar-search .cs-trigger { padding-inline: 9px; gap: 5px; }
    .dash-topbar-search .qs-input,
    .ackin-shell .dash-topbar-search .qs-input { padding-inline: 9px; font-size: 13px; }
    .dash-topbar-search .qs-submit,
    .ackin-shell .dash-topbar-search .qs-submit { flex: 0 0 38px; width: 38px; margin-inline: 0 3px; }
}
@media (max-width: 380px) {
    .workspace-switch { min-width: 64px; padding-inline: 7px; }
    .workspace-switch-status { width: 7px; height: 7px; }
    .dash-topbar-title,
    .ackin-shell .dash-topbar-title { max-width: 29vw; }
    .dash-topbar-search .cs-inline,
    .ackin-shell .dash-topbar-search .cs-inline { flex-basis: 34%; max-width: 34%; }
    .dash-topbar-search .cs-trigger,
    .ackin-shell .dash-topbar-search .cs-trigger { padding-inline: 7px; font-size: 12px; }
}
.ackin-shell .admin-notification-btn {
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text-secondary);
}
@media (max-width: 860px) {
    .ackin-shell .admin-message-btn { display: none; }
}
@media (max-width: 480px) {
    .dash-topbar,
    .ackin-shell .dash-topbar { row-gap: 8px; padding-block: 6px 9px; }
    .dash-topbar-title,
    .ackin-shell .dash-topbar-title { display: block; max-width: 48vw; font-size: 14px; }
    .dash-topbar-search .qs-location,
    .dash-topbar-search .qs-divider,
    .ackin-shell .dash-topbar-search .qs-location,
    .ackin-shell .dash-topbar-search .qs-divider { display: block; }
    .dash-topbar-search .qs-location,
    .ackin-shell .dash-topbar-search .qs-location { max-width: 42%; }
}

/* Canonical mobile dashboard contract: both buyer and seller dashboards
   use the same four-up summary row. The persistent centre action in the
   bottom navigation is the sole mobile create control. */
@media (max-width: 640px) {
    .dashboard-command-actions > .btn { display: none; }
    .stat-grid.stat-grid-kpi.dashboard-kpi-row {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
        margin-inline: 0;
        padding: 0;
        overflow: visible;
    }
    .dashboard-kpi-row .kpi-card {
        min-width: 0;
        min-height: 82px;
        padding: 10px 7px;
    }
    .dashboard-kpi-row .kpi-card-top { display: block; }
    .dashboard-kpi-row .kpi-card-icon,
    .dashboard-kpi-row .kpi-card-context { display: none; }
    .dashboard-kpi-row .kpi-card-label {
        display: block;
        min-height: 2.5em;
        font-size: 9px;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }
    .dashboard-kpi-row .kpi-card-value { margin-top: 5px; font-size: 20px; }
}

/* The enhanced location control replaces the native select. A legacy
   mobile rule was re-displaying the hidden select and duplicated the
   "All Nigeria" label. */
.dash-topbar-search select.qs-location,
.ackin-shell .dash-topbar-search select.qs-location { display: none !important; }
@media (max-width: 480px) {
    .dash-topbar-search .cs-inline,
    .ackin-shell .dash-topbar-search .cs-inline {
        display: block;
        flex: 0 1 36%;
        max-width: 36%;
    }
}
@media (max-width: 380px) {
    .dash-topbar-title,
    .ackin-shell .dash-topbar-title { max-width: 29vw; }
    .dash-topbar-search .cs-inline,
    .ackin-shell .dash-topbar-search .cs-inline { flex-basis: 34%; max-width: 34%; }
}
@media (max-width: 860px) {
    .site-header .header-search-form .cs-inline { flex: 0 1 36%; max-width: 36%; }
    .site-header .header-search-form .cs-trigger { padding-inline: 9px; }
    .site-header .header-search-form .qs-input { padding-inline: 9px; min-width: 0; }
    .site-header .header-search-form .qs-submit { flex: 0 0 38px; width: 38px; margin-inline: 0 3px; }
}
@media (max-width: 380px) {
    .site-header .header-search-form .cs-inline { flex-basis: 34%; max-width: 34%; }
    .site-header .header-search-form .cs-trigger,
    .site-header .header-search-form .qs-input { padding-inline: 7px; font-size: 12px; }
}