/* =========================================================
   tondomarket V2 — Modern Design System (May 2026)
   Sleek, glassy, modern. Built on top of CSS variables.
   ========================================================= */

:root {
    /* Brand — Ghanaian green + gold, now richer */
    --green-900: #062818;
    --green-800: #0a3a26;
    --green-700: #0b6b34;
    --green-600: #0e8d44;
    --green-500: #15a44b;
    --green-400: #2bc364;
    --green-300: #6ee08e;
    --green-100: #d4f5dd;
    --green-50:  #ecf9ef;

    --gold-700: #8a6207;
    --gold-600: #b8870c;
    --gold-500: #d4a017;
    --gold-400: #e9bd44;
    --gold-100: #fbf2d7;
    --gold-50:  #fdf9ec;

    /* Accents */
    --violet-500: #7c3aed;
    --pink-500:   #ec4899;
    --blue-500:   #2563eb;
    --teal-500:   #0d9488;
    --orange-500: #f97316;

    /* Neutrals */
    --ink:       #0d1411;
    --ink-2:     #232c28;
    --ink-3:     #45524d;
    --muted:     #6b7570;
    --muted-2:   #94a09a;
    --line:      #e6e9e7;
    --line-2:    #eef0ee;
    --line-3:    #f4f6f4;
    --bg:        #f7f9f7;
    --bg-2:      #ffffff;
    --bg-3:      #fbfcfb;
    --bg-dark:   #08110d;
    --bg-darker: #050a08;

    /* Status */
    --ok:    #0b7a3a;
    --bad:   #d23223;
    --warn:  #d18904;
    --info:  #2563eb;

    /* Layout */
    --radius:    16px;
    --radius-sm: 10px;
    --radius-md: 12px;
    --radius-lg: 22px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(7, 19, 13, .06);
    --shadow-sm: 0 2px 6px rgba(7, 19, 13, .06), 0 1px 2px rgba(7, 19, 13, .04);
    --shadow:    0 8px 26px rgba(7, 19, 13, .08), 0 2px 6px rgba(7, 19, 13, .04);
    --shadow-lg: 0 18px 50px rgba(7, 19, 13, .14), 0 4px 14px rgba(7, 19, 13, .06);
    --shadow-xl: 0 30px 70px rgba(7, 19, 13, .22);
    --shadow-glow: 0 0 0 4px rgba(21, 164, 75, .18);
    --shadow-glow-gold: 0 0 0 4px rgba(212, 160, 23, .22);

    /* Gradients */
    --grad-primary:  linear-gradient(135deg, #15a44b 0%, #0b6b34 50%, #062818 100%);
    --grad-gold:     linear-gradient(135deg, #e9bd44 0%, #b8870c 100%);
    --grad-premium:  linear-gradient(135deg, #d4a017 0%, #ec4899 60%, #7c3aed 100%);

    --container: 1240px;
    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Motion */
    --ease-out: cubic-bezier(.2, .8, .2, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* Reset & base */
* { box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.55;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
img, video, svg { max-width: 100%; display: block; }
a { color: var(--green-700); text-decoration: none; transition: color .2s var(--ease-out); }
a:hover { color: var(--green-900); }

h1, h2, h3, h4, h5 { color: var(--ink); margin: 0 0 .5em; line-height: 1.18; font-weight: 800; letter-spacing: -.01em; }
h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.45rem, 3vw, 2.05rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1rem; }
p  { margin: 0 0 1em; }

::selection { background: var(--green-300); color: var(--ink); }

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

/* Sections */
.section { padding: 56px 0; }
.section-tight { padding: 32px 0; }
.section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    flex-wrap: wrap; gap: 12px; margin-bottom: 22px;
}
.section-head h2 { margin: 0; }
.lnk { color: var(--green-700); font-weight: 600; }

/* Header */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid rgba(7, 19, 13, .06);
}
.header-inner { display: flex; align-items: center; gap: 16px; padding: 12px 0; }
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand img { height: 38px; width: auto; }
.brand-text {
    font-weight: 800; font-size: 1.18rem;
    background: var(--grad-primary); color: transparent;
    -webkit-background-clip: text; background-clip: text;
}
.search-wrap { flex: 1; max-width: 560px; position: relative; }
.search-wrap form { position: relative; display: block; }
/*
 * IMPORTANT: this selector is `input.search-input` (not just `.search-input`) to
 * give it higher specificity than the generic `input[type=search]` form rule
 * defined further down in this file. Without the tag prefix, the later rule
 * wins on specificity tie-break and wipes out the left padding, which causes
 * the icon to overlap the placeholder text. Don't downgrade this selector.
 */
input.search-input,
.search-wrap input[type="search"] {
    width: 100%;
    padding: 12px 16px 12px 46px !important;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .92);
    font: inherit; font-size: .95rem;
    color: var(--ink);
    transition: border-color .2s var(--ease-out), box-shadow .2s, background .2s;
    /* Strip the WebKit search-field defaults (the rounded native control + clear button)
       that some browsers still inject for input[type=search]. */
    -webkit-appearance: none;
    appearance: none;
}
input.search-input:focus,
.search-wrap input[type="search"]:focus {
    outline: none;
    border-color: var(--green-500);
    background: #fff;
    box-shadow: var(--shadow-glow);
}
/* Hide the native "x" clear button some browsers show inside type=search */
input.search-input::-webkit-search-cancel-button,
input.search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px; height: 18px;
    min-width: 18px; min-height: 18px;
    flex-shrink: 0;
    color: var(--muted);
    pointer-events: none;
    z-index: 2;
}
.search-suggest {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 6px; max-height: 360px; overflow: auto;
    display: none; z-index: 40;
}
.search-suggest.open {
    display: block;
    animation: drop-in .18s var(--ease-out);
}
.search-suggest a {
    display: block; padding: 10px 12px; border-radius: 10px;
    color: var(--ink); font-size: .94rem;
}
.search-suggest a:hover { background: var(--green-50); color: var(--green-900); }

.nav { display: flex; align-items: center; gap: 6px; }
.nav a, .nav .nav-link {
    padding: 8px 14px; border-radius: var(--radius-pill);
    color: var(--ink-2); font-weight: 500; font-size: .93rem;
    transition: all .15s var(--ease-out);
}
.nav a:hover, .nav .nav-link:hover { background: var(--green-50); color: var(--green-900); }
/* Exception: button-styled nav links keep their own hover colors. */
.nav a.btn { padding: 7px 14px; }
.nav a.btn-primary,
.nav a.btn-primary:hover,
.nav a.btn-primary:focus { color: #fff; background: var(--grad-primary); }
.nav a.btn-primary:hover { box-shadow: 0 10px 26px rgba(11, 107, 52, .38); transform: translateY(-1px); }
.nav a.btn-outline:hover { color: var(--green-900); background: rgba(255,255,255,.9); }
.nav a.btn-ghost:hover   { color: var(--ink); background: var(--green-50); }
.nav .nav-bell { position: relative; padding: 8px; border-radius: 999px; }
.nav .nav-bell .badge-dot {
    position: absolute; top: 4px; right: 4px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--bad); border: 2px solid #fff;
}

.btn-mobile { display: none; background: none; border: none; padding: 8px; cursor: pointer; }
.btn-mobile svg { width: 26px; height: 26px; color: var(--ink); }

@media (max-width: 880px) {
    .nav { display: none; position: absolute; top: 100%; left: 0; right: 0;
        background: #fff; flex-direction: column; align-items: stretch;
        padding: 14px 18px; border-bottom: 1px solid var(--line); gap: 4px;
        box-shadow: var(--shadow); }
    .nav.open { display: flex; animation: drop-in .2s var(--ease-out); }
    .btn-mobile { display: inline-flex; margin-left: auto; }
    .search-wrap { display: none; }
}

/* Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 18px; border-radius: var(--radius-pill);
    font: inherit; font-weight: 600; font-size: .94rem;
    border: 1px solid transparent; cursor: pointer;
    transition: transform .12s var(--ease-out), background .15s, box-shadow .15s, border-color .15s, color .15s;
    white-space: nowrap; user-select: none;
    position: relative; overflow: hidden;
}
.btn:active { transform: translateY(1px) scale(.98); }
.btn-primary {
    background: var(--grad-primary); color: #fff; box-shadow: 0 6px 18px rgba(11, 107, 52, .28);
}
.btn-primary:hover { color: #fff; box-shadow: 0 10px 26px rgba(11, 107, 52, .38); transform: translateY(-1px); }
.btn-gold {
    background: var(--grad-gold); color: #2a1c00; box-shadow: 0 6px 18px rgba(184, 135, 12, .28);
}
.btn-gold:hover { color: #2a1c00; box-shadow: 0 10px 26px rgba(184, 135, 12, .38); transform: translateY(-1px); }
.btn-premium {
    background: var(--grad-premium); color: #fff; box-shadow: 0 6px 18px rgba(124, 58, 237, .35);
}
.btn-outline { background: rgba(255,255,255,.7); color: var(--green-900); border-color: var(--line); backdrop-filter: blur(8px); }
.btn-outline:hover { border-color: var(--green-500); color: var(--green-900); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--green-50); }
.btn-danger { background: linear-gradient(135deg, #ef4444, #b91c1c); color: #fff; box-shadow: 0 6px 18px rgba(220, 38, 38, .25); }
.btn-block { width: 100%; }
.btn-sm { padding: 7px 14px; font-size: .85rem; }
.btn-xs { padding: 5px 10px; font-size: .78rem; }
.btn-lg { padding: 14px 24px; font-size: 1rem; }
.btn[disabled], .btn.disabled { opacity: .55; cursor: not-allowed; transform: none !important; }
.btn-icon { width: 38px; height: 38px; padding: 0; border-radius: 50%; }
.btn-icon svg { width: 18px; height: 18px; }

/* Hero */
.hero {
    color: #fff;
    padding: 64px 0 72px;
    position: relative; overflow: hidden;
    background:
        radial-gradient(at 20% 0%, rgba(212, 160, 23, .25), transparent 50%),
        radial-gradient(at 90% 100%, rgba(124, 58, 237, .18), transparent 50%),
        linear-gradient(135deg, var(--green-700) 0%, var(--green-900) 100%);
}
.hero::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        radial-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: 999px;
    background: rgba(255, 255, 255, .14); color: #fff;
    font-size: .82rem; font-weight: 600; letter-spacing: .02em;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .2);
    margin-bottom: 18px;
}
.hero-eyebrow .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--gold-400); animation: pulse-glow 1.6s infinite;
}
.hero h1 { color: #fff; margin-bottom: .35em; }
.hero p { color: rgba(255, 255, 255, .92); font-size: 1.08rem; max-width: 580px; }
.hero-search {
    display: flex; gap: 8px; max-width: 600px;
    margin-top: 26px; background: rgba(255, 255, 255, .98);
    padding: 7px;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(12px);
}
.hero-search input {
    flex: 1; border: 0; outline: 0; background: transparent;
    padding: 12px 18px; font: inherit; font-size: 1rem; color: var(--ink);
}
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.chip {
    padding: 7px 14px; border-radius: 999px;
    background: rgba(255, 255, 255, .14); color: #fff;
    font-size: .84rem; font-weight: 500;
    border: 1px solid rgba(255, 255, 255, .2);
    backdrop-filter: blur(6px);
    transition: all .15s var(--ease-out);
}
.chip:hover { background: rgba(255, 255, 255, .28); color: #fff; transform: translateY(-1px); }
.hero-stats {
    display: flex; flex-wrap: wrap; gap: 32px;
    margin-top: 26px; color: rgba(255, 255, 255, .85);
}
.hero-stat strong { color: #fff; font-size: 1.4rem; font-weight: 800; }

/* Cards / Grids */
.grid { display: grid; gap: 18px; }
.grid-products { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 700px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.card {
    background: var(--bg-2); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 20px;
    box-shadow: var(--shadow-xs);
    transition: transform .2s var(--ease-out), box-shadow .2s, border-color .2s;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-2); }

.glass-card {
    background: rgba(255, 255, 255, .7);
    backdrop-filter: saturate(160%) blur(12px);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* Product card */
.product-card {
    display: flex; flex-direction: column;
    background: var(--bg-2); border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow-xs);
    transition: transform .25s var(--ease-out), box-shadow .25s, border-color .25s;
    color: var(--ink);
    position: relative;
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: var(--line-2);
    color: var(--ink);
}
.product-card .product-thumb {
    position: relative; aspect-ratio: 4 / 5;
    background: linear-gradient(135deg, #0b7a3a 0%, #062818 100%);
    overflow: hidden;
}
.product-card .product-thumb video,
.product-card .product-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .35s var(--ease-out);
}
.product-card:hover .product-thumb video,
.product-card:hover .product-thumb img { transform: scale(1.04); }
.play-overlay {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: linear-gradient(0deg, rgba(0,0,0,.4), transparent 50%);
    opacity: 0; transition: opacity .2s;
    pointer-events: none;
}
.product-card:hover .play-overlay { opacity: 1; }
.play-overlay svg {
    width: 48px; height: 48px; color: #fff;
    background: rgba(11, 61, 46, .85); border-radius: 50%;
    padding: 12px;
}
.badges {
    position: absolute; top: 10px; left: 10px; right: 10px;
    display: flex; gap: 6px; flex-wrap: wrap;
    pointer-events: none;
}
.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 999px;
    font-size: .7rem; font-weight: 700; letter-spacing: .02em;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    backdrop-filter: blur(6px);
}
.badge-new      { background: rgba(21, 164, 75, .92); color: #fff; }
.badge-used     { background: rgba(255, 255, 255, .92); color: var(--ink); }
.badge-service  { background: rgba(124, 58, 237, .92); color: #fff; }
.badge-refurb   { background: rgba(245, 158, 11, .92); color: #fff; }
.badge-openbox  { background: rgba(13, 148, 136, .92); color: #fff; }
.badge-featured { background: var(--grad-gold); color: #2a1c00; }
.badge-boosted  { background: linear-gradient(135deg, #f97316, #b91c1c); color: #fff; }
.badge-sponsor  { background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff; }
.badge-premium  { background: var(--grad-premium); color: #fff; }
.badge-verified { background: var(--green-500); color: #fff; }

.fav-btn {
    position: absolute; top: 10px; right: 10px;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(6px);
    border: 0; cursor: pointer; display: grid; place-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    transition: all .2s var(--ease-out);
}
.fav-btn:hover { transform: scale(1.08); }
.fav-btn svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-2); stroke-width: 2; }
.fav-btn.is-fav svg { fill: #e11d48; stroke: #e11d48; animation: pop .35s var(--ease-spring); }

.product-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; }
.product-title {
    font-size: .96rem; font-weight: 600; line-height: 1.35;
    margin: 0 0 6px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--ink);
}
.product-price {
    font-size: 1.05rem; font-weight: 800; color: var(--green-900);
    margin-bottom: 6px;
}
.product-old-price {
    font-size: .82rem; color: var(--muted); text-decoration: line-through;
    margin-left: 6px; font-weight: 500;
}
.negotiable { font-size: .8rem; color: var(--gold-600); font-weight: 600; }
.product-seller {
    margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--line-2);
    display: flex; align-items: center; gap: 6px;
    font-size: .82rem; color: var(--muted);
}
.product-seller .verified { color: var(--green-500); font-weight: 800; }
.product-stats {
    display: flex; gap: 12px; margin-top: 6px;
    font-size: .76rem; color: var(--muted);
}
.product-stats span { display: inline-flex; align-items: center; gap: 3px; }

/* Forms */
.form-group { margin-bottom: 16px; }
.form-label, label.form-label, .form-row label {
    display: block; margin-bottom: 6px;
    font-weight: 600; font-size: .88rem; color: var(--ink-2);
    letter-spacing: .01em;
}
.form-label .req { color: var(--bad); margin-left: 2px; }
.form-control, input[type=text], input[type=email], input[type=tel],
input[type=number], input[type=password], input[type=search]:not(.search-input),
input[type=url], input[type=date], input[type=datetime-local],
input[type=time], select, textarea {
    width: 100%; padding: 11px 14px;
    border: 1px solid var(--line); border-radius: var(--radius-md);
    font: inherit; font-size: .95rem;
    background: #fff; color: var(--ink);
    transition: border-color .15s var(--ease-out), box-shadow .15s, background .15s;
}
.form-control:focus, input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--green-500);
    box-shadow: var(--shadow-glow);
    background: #fff;
}
textarea { min-height: 110px; resize: vertical; }
.form-help { font-size: .82rem; color: var(--muted); margin-top: 4px; }
.form-error { font-size: .85rem; color: var(--bad); margin-top: 4px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 600px) { .form-row, .form-row-3 { grid-template-columns: 1fr; } }

.form-card {
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius); padding: 26px;
    box-shadow: var(--shadow-xs);
}
.form-card.lg { padding: 32px; }
.input-pwd { position: relative; }
.input-pwd .form-control { padding-right: 44px; }
.input-pwd .toggle {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; cursor: pointer;
    color: var(--muted); border-radius: 8px;
    transition: background .15s var(--ease-out), color .15s;
}
.input-pwd .toggle:hover  { background: var(--green-50); color: var(--green-700); }
.input-pwd .toggle:focus  { outline: 2px solid var(--green-400); outline-offset: 1px; }
.input-pwd .toggle .ico-eye,
.input-pwd .toggle .ico-eye-off { display: block; }
.input-pwd .toggle .ico-eye-off { display: none; }
.input-pwd .toggle[aria-pressed="true"] .ico-eye     { display: none; }
.input-pwd .toggle[aria-pressed="true"] .ico-eye-off { display: block; }

.checkbox, .radio {
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer; user-select: none; font-size: .92rem; color: var(--ink-2);
}
.checkbox input, .radio input { width: 18px; height: 18px; accent-color: var(--green-600); }

.switch {
    position: relative; display: inline-block;
    width: 44px; height: 24px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
    position: absolute; cursor: pointer; inset: 0;
    background: var(--line); border-radius: 999px;
    transition: .25s var(--ease-out);
}
.switch .slider::before {
    content: ''; position: absolute; height: 18px; width: 18px;
    left: 3px; top: 3px; background: #fff; border-radius: 50%;
    transition: .25s var(--ease-out); box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
.switch input:checked + .slider { background: var(--green-600); }
.switch input:checked + .slider::before { transform: translateX(20px); }

/* Upload zone */
.upload-zone {
    border: 2px dashed var(--line);
    border-radius: var(--radius);
    padding: 36px; text-align: center;
    background: #fff;
    transition: all .2s var(--ease-out);
    cursor: pointer; position: relative;
}
.upload-zone:hover, .upload-zone.dragover {
    border-color: var(--green-500);
    background: var(--green-50);
    transform: translateY(-1px);
}
.upload-zone svg { width: 48px; height: 48px; color: var(--muted); margin: 0 auto 12px; }
.upload-zone p { margin: 0; color: var(--ink-2); }
.upload-zone .small { color: var(--muted); font-size: .85rem; margin-top: 6px; }
.upload-progress { height: 8px; background: var(--line-2); border-radius: 4px; overflow: hidden; margin-top: 10px; }
.upload-progress-bar { height: 100%; background: var(--grad-primary); width: 0; transition: width .3s var(--ease-out); }

/* Toast */
.toast-container {
    position: fixed; top: 20px; right: 20px;
    z-index: 1000; display: flex; flex-direction: column; gap: 10px;
    max-width: calc(100vw - 40px); pointer-events: none;
}
.toast {
    pointer-events: auto;
    background: rgba(255, 255, 255, .98);
    backdrop-filter: blur(10px);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 14px 18px;
    border-left: 4px solid var(--info);
    min-width: 300px; max-width: 400px;
    display: flex; align-items: flex-start; gap: 12px;
    animation: toast-in .3s var(--ease-spring);
    position: relative; overflow: hidden;
}
.toast.out { animation: toast-out .25s forwards; }
.toast.success { border-left-color: var(--ok); }
.toast.error   { border-left-color: var(--bad); }
.toast.warning { border-left-color: var(--warn); }
.toast.info    { border-left-color: var(--info); }
.toast.loading { border-left-color: var(--gold-500); }
.toast-icon { flex-shrink: 0; width: 24px; height: 24px; }
.toast.success .toast-icon { color: var(--ok); }
.toast.error   .toast-icon { color: var(--bad); }
.toast.warning .toast-icon { color: var(--warn); }
.toast.info    .toast-icon { color: var(--info); }
.toast-body { flex: 1; }
.toast-title { font-weight: 700; font-size: .94rem; margin-bottom: 2px; color: var(--ink); }
.toast-message { font-size: .88rem; color: var(--ink-2); }
.toast-close { background: none; border: 0; cursor: pointer; color: var(--muted); padding: 2px; }
.toast-progress {
    position: absolute; bottom: 0; left: 0; height: 3px;
    background: var(--info); transition: width linear;
}
.toast.success .toast-progress { background: var(--ok); }
.toast.error   .toast-progress { background: var(--bad); }
.toast.warning .toast-progress { background: var(--warn); }

/* Footer */
.site-footer {
    background: var(--bg-dark); color: rgba(255,255,255,.78);
    padding: 56px 0 28px; margin-top: 70px;
    position: relative; overflow: hidden;
}
.site-footer::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--green-500), var(--gold-500), transparent);
}
.footer-grid {
    display: grid; gap: 32px;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    margin-bottom: 36px;
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 14px; }
.site-footer a { color: rgba(255,255,255,.78); display: block; padding: 4px 0; font-size: .92rem; transition: color .15s; }
.site-footer a:hover { color: var(--gold-400); }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top: 20px; text-align: center; font-size: .85rem;
}

/* Alerts */
.alert {
    padding: 14px 18px; border-radius: var(--radius-md);
    margin-bottom: 14px; font-size: .92rem;
    border-left: 4px solid;
    display: flex; align-items: flex-start; gap: 10px;
    animation: drop-in .25s var(--ease-out);
}
.alert-success { background: #e6f6ec; color: #0b5c2e; border-color: var(--ok); }
.alert-error   { background: #fdecea; color: #8b1a0e; border-color: var(--bad); }
.alert-warning { background: #fff4e0; color: #7a4d05; border-color: var(--warn); }
.alert-info    { background: #e6f0fa; color: #1a4571; border-color: var(--info); }

/* Dashboard */
.dash {
    display: grid; grid-template-columns: 260px 1fr;
    gap: 22px; padding: 24px 0; min-height: calc(100vh - 80px);
}
.dash-side {
    background: rgba(255, 255, 255, .8);
    backdrop-filter: saturate(160%) blur(10px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 12px;
    height: fit-content;
    position: sticky; top: 88px;
    box-shadow: var(--shadow-xs);
}
.dash-side-title {
    padding: 4px 12px 10px;
    font-size: .72rem; font-weight: 700;
    letter-spacing: .12em; color: var(--muted);
    text-transform: uppercase;
    border-bottom: 1px solid var(--line-2);
    margin-bottom: 10px;
}
.dash-side h4 {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--muted); padding: 0 12px; margin: 14px 0 4px;
}
.dash-side h4:first-child { margin-top: 0; }
.dash-side a, .dash-side .menu-item {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px; border-radius: var(--radius-sm); color: var(--ink-2);
    font-size: .92rem; font-weight: 500;
    margin: 2px 0;
    transition: all .15s var(--ease-out);
    position: relative;
}
.dash-side a:hover { background: var(--green-50); color: var(--green-900); transform: translateX(2px); }
.dash-side a.active, .dash-side a.on {
    background: var(--grad-primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(11, 107, 52, .25);
}
.dash-side a.active:hover { transform: translateX(0); }
.dash-side a svg { width: 18px; height: 18px; flex-shrink: 0; }
.dash-side .pro-badge {
    margin-left: auto; padding: 2px 8px;
    border-radius: 999px; font-size: .65rem; font-weight: 700;
    background: var(--grad-gold); color: #2a1c00;
}
.dash-main { min-width: 0; }
@media (max-width: 880px) { .dash { grid-template-columns: 1fr; } .dash-side { position: static; } }

/* Page header */
.page-head {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px; margin-bottom: 22px;
}
.page-head h1 { margin: 0; }
.page-head .subtitle { color: var(--muted); margin-top: 2px; font-size: .92rem; }

/* Stats */
.stats, .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 26px;
}
.stat-tile {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
    position: relative; overflow: hidden;
    transition: transform .2s var(--ease-out), box-shadow .2s, border-color .2s;
}
.stat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-2); }
.stat-tile::before {
    content: ''; position: absolute; right: -30px; top: -30px;
    width: 100px; height: 100px; border-radius: 50%;
    background: radial-gradient(circle, rgba(21, 164, 75, .08) 0%, transparent 70%);
}
.stat-tile.tile-gold::before { background: radial-gradient(circle, rgba(212, 160, 23, .12) 0%, transparent 70%); }
.stat-tile.tile-violet::before { background: radial-gradient(circle, rgba(124, 58, 237, .12) 0%, transparent 70%); }
.stat-tile.tile-pink::before { background: radial-gradient(circle, rgba(236, 72, 153, .12) 0%, transparent 70%); }
.stat-tile.tile-blue::before { background: radial-gradient(circle, rgba(37, 99, 235, .12) 0%, transparent 70%); }
.stat-icon {
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--green-50); color: var(--green-700);
    display: grid; place-items: center; margin-bottom: 10px;
}
.stat-icon svg { width: 20px; height: 20px; }
.stat-tile.tile-gold .stat-icon { background: var(--gold-50); color: var(--gold-600); }
.stat-tile.tile-violet .stat-icon { background: rgba(124, 58, 237, .1); color: #7c3aed; }
.stat-tile.tile-pink .stat-icon { background: rgba(236, 72, 153, .1); color: #ec4899; }
.stat-tile.tile-blue .stat-icon { background: rgba(37, 99, 235, .1); color: var(--blue-500); }
.stat-label {
    color: var(--muted); font-size: .82rem; margin-bottom: 4px;
    text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}
.stat-value {
    font-size: 1.7rem; font-weight: 800; color: var(--ink);
    line-height: 1; letter-spacing: -.02em;
}
.stat-trend { font-size: .8rem; margin-top: 6px; color: var(--muted); }
.stat-trend.up { color: var(--ok); }
.stat-trend.down { color: var(--bad); }

/* Tables */
.table-wrap {
    background: var(--bg-2); border: 1px solid var(--line);
    border-radius: var(--radius); overflow: auto;
    box-shadow: var(--shadow-xs);
}
.table { width: 100%; border-collapse: collapse; min-width: 620px; }
.table th, .table td {
    padding: 14px 16px; text-align: left;
    border-bottom: 1px solid var(--line-2); font-size: .92rem;
}
.table th {
    background: var(--bg-3); font-weight: 700; color: var(--ink-2);
    font-size: .76rem; text-transform: uppercase; letter-spacing: .04em;
    position: sticky; top: 0;
}
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: var(--bg-3); }
.table tbody tr:last-child td { border-bottom: 0; }

.status-badge, .status {
    display: inline-block; padding: 4px 12px; border-radius: 999px;
    font-size: .74rem; font-weight: 700; letter-spacing: .03em;
    text-transform: uppercase;
}
.s-pending,    .status-pending     { background: #fff4e0; color: #7a4d05; }
.s-approved,   .status-approved    { background: #e6f6ec; color: #0b5c2e; }
.s-rejected,   .status-rejected    { background: #fdecea; color: #8b1a0e; }
.s-draft,      .status-draft       { background: #eef0ee; color: var(--muted); }
.s-suspended,  .status-suspended   { background: #f5e0e0; color: #5c1414; }
.s-sold,       .status-sold        { background: #e6f0fa; color: #1a4571; }
.s-expired,    .status-expired     { background: #eee; color: #555; }
.s-processing, .status-processing  { background: #e3e8fa; color: #2e3a8b; }
.s-completed,  .status-completed   { background: #e6f6ec; color: #0b5c2e; }
.s-failed,     .status-failed      { background: #fdecea; color: #8b1a0e; }
.s-active,     .status-active      { background: #d4f5dd; color: #054d20; }
.s-paused,     .status-paused      { background: #fff4e0; color: #7a4d05; }
.s-banned,     .status-banned      { background: #fdecea; color: #8b1a0e; }

/* Tabs */
.tabs {
    display: flex; gap: 4px; padding: 4px;
    background: var(--bg-3); border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    margin-bottom: 22px; overflow-x: auto;
}
.tab {
    padding: 8px 16px; border-radius: var(--radius-pill);
    font-weight: 600; font-size: .9rem; color: var(--ink-2);
    cursor: pointer; border: 0; background: transparent;
    transition: all .18s var(--ease-out); white-space: nowrap;
}
.tab:hover { color: var(--green-900); background: rgba(255,255,255,.8); }
.tab.active {
    background: #fff; color: var(--green-900);
    box-shadow: var(--shadow-xs);
}
.tab-panel { display: block; }
.tab-panel[hidden] { display: none !important; }
/* Legacy: also support `.active`-class-based toggling used elsewhere. */
.tabs + .tab-panels .tab-panel:not(.active) { display: none; }
.tabs + .tab-panels .tab-panel.active { display: block; animation: drop-in .2s var(--ease-out); }

/* Pagination */
.pagination {
    display: flex; gap: 6px; justify-content: center; margin: 30px 0;
}
.pagination .page {
    padding: 8px 14px; border: 1px solid var(--line);
    border-radius: var(--radius-md); color: var(--ink-2); font-size: .9rem;
    background: #fff; transition: all .15s;
}
.pagination .page.on {
    background: var(--grad-primary); color: #fff; border-color: transparent;
    box-shadow: 0 4px 12px rgba(11, 107, 52, .25);
}
.pagination .page:hover:not(.on):not(.disabled) { background: var(--green-50); border-color: var(--green-300); }
.pagination .page.disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.pagination .page-ellipsis { padding: 8px 6px; color: var(--muted); font-size: .9rem; }

/* Comments */
.comment-list { display: flex; flex-direction: column; gap: 10px; }
.comment {
    display: flex; gap: 10px; padding: 12px;
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius-md);
    transition: border-color .15s;
}
.comment:hover { border-color: var(--green-300); }
.comment-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--grad-primary); color: #fff;
    display: grid; place-items: center; font-weight: 700; font-size: .85rem;
    flex-shrink: 0;
}
.comment-body { flex: 1; min-width: 0; }
.comment-head {
    display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
    font-size: .82rem;
}
.comment-name { font-weight: 700; color: var(--ink); }
.comment-time { color: var(--muted); }
.comment-text { font-size: .92rem; color: var(--ink-2); margin: 0; }
.comment-actions {
    display: flex; gap: 14px; margin-top: 6px;
    font-size: .8rem;
}
.comment-actions button {
    background: 0; border: 0; color: var(--muted); cursor: pointer;
    padding: 0; font-weight: 600; font-size: .8rem;
    transition: color .15s;
}
.comment-actions button:hover { color: var(--green-700); }
.comment-replies {
    margin-top: 8px; padding-left: 14px;
    border-left: 2px solid var(--line-2);
    display: flex; flex-direction: column; gap: 8px;
}
.comment.is-seller .comment-name::after {
    content: 'Seller'; margin-left: 6px;
    padding: 1px 6px; border-radius: 999px;
    background: var(--grad-gold); color: #2a1c00;
    font-size: .65rem; font-weight: 700;
}
.comment-locked {
    padding: 14px; text-align: center;
    background: var(--green-50); border: 1px dashed var(--green-300);
    border-radius: var(--radius-md); color: var(--green-900);
    font-size: .9rem;
}

/* Chat */
.chat-shell {
    display: grid; grid-template-columns: 320px 1fr;
    height: calc(100vh - 220px); min-height: 540px;
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow-xs);
}
/*
 * 2026-05-16 — the previous mobile media query in this older block
 * has been removed. It used a `.has-active` class on .chat-shell
 * that the current messaging view (app/views/messages/inbox.php)
 * has never set — the view uses `.is-open` on `.chat-thread`
 * instead, which the NEWER media query down at the bottom of the
 * file handles correctly.
 *
 * The legacy rule `.chat-shell:not(.has-active) .chat-thread
 * { display: none }` matched on every page load (since `.has-active`
 * is never set) and had specificity (0,3,0) — higher than the new
 * rule `.chat-thread.is-open { display: flex }` at (0,2,0). The
 * older rule won the cascade and the thread stayed hidden on
 * phones even after opening a conversation, causing the "blank
 * page" symptom in the reported screenshot.
 *
 * Other rules in this older block are also obsolete but dormant
 * (no DOM references), so we leave them in place to limit the
 * blast radius. The conflicting media query is the only one that
 * actively interferes.
 */
.chat-list {
    border-right: 1px solid var(--line);
    display: flex; flex-direction: column;
    background: var(--bg-3);
}
.chat-list-head {
    padding: 14px 16px; border-bottom: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between;
}
.chat-list-head h3 { margin: 0; font-size: 1rem; }
.chat-search { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.chat-search input { padding: 8px 12px; font-size: .88rem; }
.chat-list-items { flex: 1; overflow-y: auto; }
.chat-list-item {
    display: flex; gap: 10px; padding: 12px 14px;
    cursor: pointer; border-bottom: 1px solid var(--line-2);
    transition: background .12s;
    text-decoration: none; color: var(--ink);
}
.chat-list-item:hover { background: rgba(255,255,255,.7); color: var(--ink); }
.chat-list-item.active { background: var(--green-50); color: var(--ink); }
.chat-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--grad-primary); color: #fff;
    display: grid; place-items: center;
    font-weight: 700; font-size: .9rem; flex-shrink: 0;
}
.chat-list-info { flex: 1; min-width: 0; }
.chat-list-head-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 6px;
}
.chat-list-name { font-weight: 600; font-size: .92rem; color: var(--ink); }
.chat-list-time { font-size: .72rem; color: var(--muted); }
.chat-list-preview {
    margin-top: 2px; font-size: .82rem; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-list-item.unread .chat-list-name { font-weight: 800; }
.chat-list-item.unread .chat-list-preview { color: var(--ink-2); font-weight: 600; }
.chat-unread-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--green-500); margin-left: auto;
}

.chat-thread { display: flex; flex-direction: column; }
.chat-thread-head {
    padding: 14px 18px; border-bottom: 1px solid var(--line);
    display: flex; align-items: center; gap: 10px; background: #fff;
}
.chat-thread-head .chat-avatar { width: 36px; height: 36px; }
.chat-messages {
    flex: 1; padding: 16px; overflow-y: auto;
    background: linear-gradient(to bottom, var(--bg-3), #fff);
    display: flex; flex-direction: column; gap: 6px;
}
.msg {
    max-width: 78%; padding: 10px 14px;
    border-radius: 18px; font-size: .92rem;
    line-height: 1.4; word-wrap: break-word;
    animation: bubble-in .25s var(--ease-spring);
}
.msg.in { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.msg.out {
    align-self: flex-end;
    background: var(--grad-primary);
    color: #fff;
    border-bottom-right-radius: 6px;
    box-shadow: 0 2px 8px rgba(11, 107, 52, .25);
}
.msg-time { font-size: .68rem; opacity: .6; margin-top: 2px; }
.msg.out .msg-time { text-align: right; }

.chat-compose {
    padding: 12px; border-top: 1px solid var(--line);
    display: flex; gap: 8px; align-items: flex-end; background: #fff;
}
.chat-compose textarea {
    flex: 1; min-height: 42px; max-height: 140px;
    padding: 10px 14px; resize: none;
    border-radius: var(--radius-pill);
    font-size: .94rem; border: 1px solid var(--line);
}
.chat-compose .btn-send {
    width: 42px; height: 42px; padding: 0; border-radius: 50%;
    background: var(--grad-primary); color: #fff;
    border: 0; cursor: pointer; display: grid; place-items: center;
    box-shadow: 0 4px 12px rgba(11, 107, 52, .3);
    transition: transform .15s;
}
.chat-compose .btn-send:hover { transform: scale(1.06); }
.chat-empty {
    margin: auto; padding: 40px 20px; text-align: center; color: var(--muted);
}
.chat-empty svg { width: 64px; height: 64px; margin: 0 auto 16px; opacity: .4; }

/* Premium banner */
.premium-banner {
    background: var(--grad-premium);
    color: #fff;
    padding: 26px 28px;
    border-radius: var(--radius-lg);
    position: relative; overflow: hidden;
    box-shadow: 0 12px 30px rgba(124, 58, 237, .25);
}
.premium-banner::before {
    content: ''; position: absolute; right: -50px; top: -50px;
    width: 200px; height: 200px; border-radius: 50%;
    background: rgba(255, 255, 255, .15);
}
.premium-banner h2 { color: #fff; margin: 0 0 6px; font-size: 1.4rem; }
.premium-banner p { color: rgba(255, 255, 255, .9); margin: 0 0 14px; }
.premium-banner .btn { background: #fff; color: var(--violet-500); }
.premium-banner .btn:hover { background: rgba(255, 255, 255, .92); color: var(--violet-500); }

.plan-card {
    background: #fff; border: 2px solid var(--line);
    border-radius: var(--radius-lg); padding: 28px;
    position: relative; transition: all .25s var(--ease-out);
}
.plan-card.recommended {
    border-color: transparent;
    background-image: linear-gradient(#fff, #fff), var(--grad-premium);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 12px 30px rgba(124, 58, 237, .15);
}
.plan-card.recommended::before {
    content: 'RECOMMENDED'; position: absolute; top: -12px; left: 50%;
    transform: translateX(-50%);
    padding: 4px 14px; border-radius: 999px;
    background: var(--grad-premium); color: #fff;
    font-size: .7rem; font-weight: 700; letter-spacing: .1em;
}
.plan-name { font-size: 1.1rem; font-weight: 700; margin-bottom: 6px; }
.plan-price { font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--ink); }
.plan-price .currency { font-size: 1rem; color: var(--muted); }
.plan-price .period { font-size: .9rem; color: var(--muted); font-weight: 500; }
.plan-features { list-style: none; padding: 0; margin: 18px 0; }
.plan-features li {
    padding: 7px 0; display: flex; align-items: center; gap: 10px;
    font-size: .92rem; color: var(--ink-2);
}
.plan-features .check { color: var(--green-600); flex-shrink: 0; }
.plan-features .x { color: var(--muted-2); flex-shrink: 0; }

/* Ads */
.ad-target-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ad-target-card {
    background: var(--bg-3); border: 1px solid var(--line);
    border-radius: var(--radius-md); padding: 14px;
    display: flex; align-items: center; justify-content: space-between;
}
.ad-target-card strong { font-size: .85rem; }
.ad-target-card .num { font-size: 1.3rem; font-weight: 800; color: var(--green-700); }

/* Animations */
@keyframes drop-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
    50%      { box-shadow: 0 0 0 6px transparent; opacity: .6; }
}
@keyframes toast-in {
    from { transform: translateX(110%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
@keyframes toast-out {
    to { transform: translateX(110%); opacity: 0; }
}
@keyframes bubble-in {
    from { transform: scale(.9); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
@keyframes shimmer {
    0%   { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}
@keyframes float-up {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
@keyframes heart-burst {
    0%   { transform: scale(0); opacity: 0; }
    25%  { transform: scale(1.4); opacity: 1; }
    100% { transform: scale(1); opacity: 0; }
}

.anim-float-up { animation: float-up .5s var(--ease-spring) both; }
.anim-drop-in  { animation: drop-in .3s var(--ease-out) both; }

.skeleton {
    background: linear-gradient(90deg, var(--line-2) 0%, var(--line-3) 50%, var(--line-2) 100%);
    background-size: 1000px 100%;
    animation: shimmer 1.6s linear infinite;
    border-radius: var(--radius-sm);
}

.spinner {
    width: 18px; height: 18px;
    border: 2px solid var(--line);
    border-top-color: var(--green-700);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
.spinner-lg { width: 36px; height: 36px; border-width: 3px; }

.heart-burst {
    position: absolute;
    pointer-events: none;
    color: #ec4899;
    animation: heart-burst .8s var(--ease-spring) forwards;
    z-index: 100;
}
.heart-burst svg { width: 100px; height: 100px; }

/* Utilities */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted  { color: var(--muted); }
.text-bold { font-weight: 700; }
.text-sm { font-size: .85rem; }
.text-xs { font-size: .75rem; }
.text-lg { font-size: 1.1rem; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; } .mt-5 { margin-top: 48px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } .mb-4 { margin-bottom: 32px; } .mb-5 { margin-bottom: 48px; }
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-end { display: flex; justify-content: flex-end; }
.gap-1 { gap: 8px; } .gap-2 { gap: 16px; } .gap-3 { gap: 24px; }
.hidden { display: none !important; }
.tag {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    background: var(--green-50); color: var(--green-900);
    font-size: .76rem; font-weight: 600;
}
.tag-gold   { background: var(--gold-50); color: var(--gold-700); }
.tag-violet { background: rgba(124, 58, 237, .1); color: #6d28d9; }
.tag-pink   { background: rgba(236, 72, 153, .1); color: #be185d; }
.tag-blue   { background: rgba(37, 99, 235, .1); color: #1d4ed8; }
.tag-red    { background: #fdecea; color: #8b1a0e; }

.empty-state {
    text-align: center; padding: 60px 20px;
    color: var(--muted);
}
.empty-state svg { width: 64px; height: 64px; margin: 0 auto 14px; opacity: .35; }
.empty-state h3 { color: var(--ink-2); margin-bottom: 6px; }

@media (max-width: 600px) {
    .hide-sm { display: none !important; }
    .section { padding: 36px 0; }
    .form-card { padding: 18px; }
}

@media print {
    .site-header, .site-footer, .dash-side, .toast-container, .btn { display: none !important; }
    body { background: #fff; }
}

/* ============================================================
   V2 SUPPLEMENTS — additional component styles for V2 features
   ============================================================ */

/* Page heads & section titles */
.page-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.page-title {
    margin: 0 0 .25rem; font-size: 1.75rem; font-weight: 800;
    background: var(--grad-primary, linear-gradient(135deg,#0b9d6e,#0b3d2e));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section-title {
    margin: 0 0 1rem; font-size: 1.15rem; font-weight: 700;
    display: flex; align-items: center; gap: .5rem;
}
.eyebrow {
    display: inline-block; padding: .25rem .75rem; border-radius: 999px;
    background: rgba(212, 160, 23, 0.15); color: #b8830a; font-size: .75rem;
    font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.lede { font-size: 1.05rem; line-height: 1.6; color: var(--ink-2, #475569); margin: .5rem 0; }
.code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .9rem; }
.small { font-size: .82rem; }
.muted { color: var(--ink-3, #64748b); }

/* Grid helpers */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.grid-2-span { grid-column: 1 / -1; }
@media (max-width: 720px) {
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* Stat tiles */
.stats-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem; margin-bottom: 1.25rem;
}
.stats-grid.two-cols { grid-template-columns: repeat(2, 1fr); }
.tile {
    position: relative; overflow: hidden; padding: 1.1rem 1.25rem;
    border-radius: var(--radius-lg, 14px); background: #fff;
    box-shadow: 0 4px 16px -4px rgba(15, 23, 42, .08);
    transition: transform .2s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)), box-shadow .2s;
    text-decoration: none; color: inherit; cursor: pointer;
    display: flex; flex-direction: column; gap: .25rem;
}
.tile:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -8px rgba(15,23,42,.16); }
.tile::before {
    content: ''; position: absolute; top: -40px; right: -40px; width: 140px; height: 140px;
    border-radius: 50%; opacity: .15; pointer-events: none;
}
.tile-icon { font-size: 1.35rem; line-height: 1; opacity: .55; }
.tile-num { font-size: 2rem; font-weight: 800; line-height: 1.1; }
.tile-label { color: var(--ink-3, #64748b); font-size: .9rem; font-weight: 500; }
.tile-gold::before   { background: radial-gradient(circle, #d4a017, transparent 70%); }
.tile-violet::before { background: radial-gradient(circle, #7c3aed, transparent 70%); }
.tile-pink::before   { background: radial-gradient(circle, #e02d6f, transparent 70%); }
.tile-blue::before   { background: radial-gradient(circle, #3b82f6, transparent 70%); }
.tile-gold .tile-icon   { color: #d4a017; opacity: 1; }
.tile-violet .tile-icon { color: #7c3aed; opacity: 1; }
.tile-pink .tile-icon   { color: #e02d6f; opacity: 1; }
.tile-blue .tile-icon   { color: #3b82f6; opacity: 1; }

.big-num { font-size: 1.6rem; font-weight: 800; display: block; line-height: 1.1; }

/* Sidebar links (V2) */
.dash-side { position: sticky; top: 80px; }
.dash-side-title {
    font-size: .72rem; font-weight: 800; letter-spacing: .15em; color: var(--ink-3, #64748b);
    margin: 0 0 .5rem .25rem; padding: 0 0 .5rem; display: flex; align-items: center; justify-content: space-between;
}
.side-link {
    display: flex; align-items: center; gap: .65rem; padding: .55rem .85rem;
    border-radius: 10px; color: var(--ink-2, #334155); text-decoration: none; font-weight: 500;
    transition: background .15s, color .15s, transform .15s; margin-bottom: 2px;
    position: relative;
}
.side-link:hover { background: rgba(11, 157, 110, .07); color: var(--green-700, #0b3d2e); }
.side-link.active, .side-link.on {
    background: var(--grad-primary, linear-gradient(135deg, #0b9d6e, #0b3d2e));
    color: #fff;
    box-shadow: 0 6px 16px -6px rgba(11, 157, 110, .55);
}
.side-link.active .side-icon, .side-link.on .side-icon { filter: drop-shadow(0 0 4px rgba(255,255,255,.3)); }
.side-link.is-highlight {
    background: linear-gradient(135deg, rgba(212,160,23,.12), rgba(212,160,23,.02));
    border: 1px solid rgba(212,160,23,.25);
}
.side-icon { font-size: 1.05rem; width: 22px; text-align: center; }
.side-label { flex: 1; }
.side-badge {
    background: #e02d6f; color: #fff; font-size: .68rem; font-weight: 700;
    padding: .1rem .45rem; border-radius: 999px; min-width: 18px; text-align: center;
}
.pro-badge {
    background: linear-gradient(135deg, #d4a017, #b8830a); color: #fff;
    font-size: .65rem; font-weight: 800; letter-spacing: .08em;
    padding: .12rem .45rem; border-radius: 999px;
}

/* Header icon buttons */
.header-icon-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%; color: var(--ink-2, #334155);
    transition: background .2s, color .2s;
}
.header-icon-btn:hover { background: rgba(11, 157, 110, .08); color: var(--green-700, #0b3d2e); }
.header-icon-btn svg { width: 19px; height: 19px; }
.header-dot {
    position: absolute; top: 2px; right: 2px;
    background: #e02d6f; color: #fff; font-size: .6rem; font-weight: 700;
    padding: .1rem .35rem; border-radius: 999px; min-width: 16px; text-align: center;
    box-shadow: 0 0 0 2px #fff;
}

/* Tables */
.table-wrap { overflow-x: auto; margin: 0 -.5rem; padding: 0 .5rem; }
.data-table {
    width: 100%; border-collapse: collapse; font-size: .92rem;
}
.data-table thead th {
    text-align: left; padding: .65rem .75rem;
    font-size: .75rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink-3, #64748b);
    background: rgba(11, 61, 46, .04); position: sticky; top: 0;
}
.data-table tbody td { padding: .8rem .75rem; border-top: 1px solid rgba(15, 23, 42, .06); vertical-align: top; }
.data-table tbody tr:hover { background: rgba(11, 157, 110, .03); }
.row-actions { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }

/* Inline lists (profile-list etc.) */
.profile-list { list-style: none; padding: 0; margin: 0; }
.profile-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: .85rem; border-bottom: 1px solid rgba(15, 23, 42, .06);
    flex-wrap: wrap;
}
.profile-row:last-child { border-bottom: 0; }

/* Permission grid */
.perm-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .5rem; padding: .75rem; border: 1px solid rgba(15, 23, 42, .08);
    border-radius: var(--radius, 12px); margin: 0;
}
.perm-grid legend { padding: 0 .5rem; font-weight: 600; font-size: .9rem; }
.perm-pill {
    display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem;
    background: rgba(11, 157, 110, .04); border: 1px solid rgba(11, 157, 110, .12);
    border-radius: 8px; cursor: pointer; transition: background .15s, transform .15s;
    font-size: .9rem;
}
.perm-pill:hover { background: rgba(11, 157, 110, .08); transform: translateY(-1px); }
.perm-pill input:checked + span { font-weight: 600; }
.perm-pill.is-super { background: rgba(212, 160, 23, .08); border-color: rgba(212, 160, 23, .25); }

/* Weight input */
.weight-input {
    display: flex; flex-direction: column; gap: .25rem;
    background: rgba(11, 157, 110, .04); padding: .5rem .75rem;
    border-radius: 8px; border: 1px solid rgba(11, 157, 110, .12);
}
.weight-input span { font-size: .82rem; font-weight: 600; color: var(--ink-2, #334155); }
.weight-input input { font-weight: 700; font-size: 1.05rem; }

/* Switch */
.switch-row { display: flex; align-items: center; justify-content: space-between; padding: .5rem 0; }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
    position: absolute; cursor: pointer; inset: 0;
    background: #cbd5e1; border-radius: 24px;
    transition: .25s var(--ease-out, ease-out);
}
.switch .slider::before {
    content: ''; position: absolute; height: 18px; width: 18px;
    left: 3px; bottom: 3px; background: #fff; border-radius: 50%;
    transition: .25s var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.switch input:checked + .slider { background: var(--green-600, #0b9d6e); }
.switch input:checked + .slider::before { transform: translateX(20px); }

/* Tabs (settings page) */
.tabs {
    display: flex; gap: .25rem; flex-wrap: wrap;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    margin-bottom: 1rem;
}
.tab {
    padding: .55rem 1rem; border: 0; background: transparent;
    cursor: pointer; font-weight: 600; color: var(--ink-3, #64748b);
    border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0;
    transition: color .15s, border-color .15s, background .15s;
}
.tab:hover { color: var(--green-700, #0b3d2e); background: rgba(11, 157, 110, .05); }
.tab.on {
    color: var(--green-700, #0b3d2e); border-bottom-color: var(--green-600, #0b9d6e);
    background: rgba(11, 157, 110, .07);
}
.tab-panel { padding: .75rem 0; }

/* Empty state */
.empty-state {
    text-align: center; padding: 2.5rem 1rem;
    border: 2px dashed rgba(15, 23, 42, .12);
    border-radius: var(--radius, 12px); background: rgba(15, 23, 42, .02);
    color: var(--ink-3, #64748b);
}
.empty-state h3 { margin: 0 0 .5rem; color: var(--ink-1, #0f172a); }

/* Subscription / Promo cards */
.subscription-card {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem; flex-wrap: wrap;
}
.subscription-card.is-active {
    background: linear-gradient(135deg, rgba(212,160,23,.08), rgba(212,160,23,.02));
    border-left: 4px solid #d4a017;
}
.promo-card {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem; flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(11,157,110,.06), rgba(11,61,46,.02));
    border-left: 4px solid var(--green-600, #0b9d6e);
}

/* Key-value lists */
.kv-list { list-style: none; padding: 0; margin: 0; }
.kv-list li {
    display: flex; justify-content: space-between; padding: .55rem 0;
    border-bottom: 1px dashed rgba(15, 23, 42, .08);
}
.kv-list li:last-child { border-bottom: 0; }
.kv-list span { color: var(--ink-3, #64748b); }

/* Ads grid (seller list) */
.ads-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}
.ad-card {
    text-decoration: none; color: inherit;
    transition: transform .2s, box-shadow .2s; overflow: hidden;
    display: flex; flex-direction: column;
}
.ad-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -8px rgba(15,23,42,.16); }
.ad-thumb {
    aspect-ratio: 16/9; background: linear-gradient(135deg, #0b3d2e, #0b9d6e) center/cover;
    position: relative; padding: .6rem;
}
.ad-thumb .badge { position: absolute; top: .6rem; left: .6rem; }
.ad-card-body { padding: .9rem; flex: 1; }
.ad-card-body h3 { margin: 0 0 .25rem; font-size: 1rem; }
.ad-stats { display: flex; gap: 1.25rem; margin-top: .65rem; }
.ad-stats > div { display: flex; flex-direction: column; }
.ad-stats .big-num { font-size: 1.2rem; }

/* Ads form (placement, region, product pickers) */
.ad-product-picker {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .5rem; max-height: 360px; overflow-y: auto;
}
.ad-product-pick input { position: absolute; opacity: 0; pointer-events: none; }
.ad-product-tile {
    aspect-ratio: 1/1; background: #0b3d2e center/cover; color: #fff;
    border-radius: 8px; position: relative; cursor: pointer;
    border: 2px solid transparent; transition: border-color .15s, transform .15s;
    display: flex; align-items: flex-end; padding: .5rem;
}
.ad-product-tile span {
    background: rgba(0, 0, 0, .55); padding: .25rem .5rem; border-radius: 6px;
    font-size: .8rem; line-height: 1.2; max-width: 100%; word-break: break-word;
}
.ad-product-pick input:checked + .ad-product-tile {
    border-color: #d4a017; transform: scale(1.03);
    box-shadow: 0 0 0 4px rgba(212, 160, 23, .25);
}
.ad-placement-picker {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .5rem;
}
.placement-pill {
    display: flex; align-items: center; gap: .5rem; padding: .85rem;
    border: 2px solid rgba(15, 23, 42, .08); border-radius: 10px;
    cursor: pointer; transition: border-color .15s, background .15s;
}
.placement-pill:hover { border-color: var(--green-600, #0b9d6e); }
.placement-pill input { margin: 0; }
.placement-pill:has(input:checked) {
    border-color: var(--green-600, #0b9d6e);
    background: rgba(11, 157, 110, .06);
}
.placement-pill div { display: flex; flex-direction: column; gap: .15rem; }
.ad-target-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .35rem; padding: .75rem; border: 1px solid rgba(15, 23, 42, .08);
    border-radius: var(--radius, 12px); margin-top: 1rem;
}
.ad-target-grid legend { padding: 0 .5rem; font-weight: 600; font-size: .9rem; }
.region-pill {
    display: flex; align-items: center; gap: .5rem; padding: .35rem .65rem;
    background: rgba(11, 157, 110, .04); border: 1px solid rgba(11, 157, 110, .12);
    border-radius: 999px; cursor: pointer; font-size: .85rem;
}
.region-pill:has(input:checked) { background: rgba(11, 157, 110, .15); border-color: var(--green-600, #0b9d6e); font-weight: 600; }
.cost-summary {
    display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(11,157,110,.08), rgba(212,160,23,.04));
    padding: 1rem 1.25rem; border-radius: var(--radius-lg, 14px); margin-top: 1rem;
}
.cost-summary > div { display: flex; flex-direction: column; }
.cost-summary .form-actions { margin-left: auto; }
.reach-tile {
    background: rgba(11, 157, 110, .06); padding: .75rem 1rem; border-radius: 10px;
    display: flex; flex-direction: column; gap: .15rem;
}

/* Daily upload usage strip */
.usage-strip {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: .75rem 1rem; border-radius: 10px;
    background: rgba(11, 157, 110, .05); border: 1px solid rgba(11, 157, 110, .12);
    margin-bottom: 1rem; flex-wrap: wrap;
}
.usage-left { display: flex; align-items: center; gap: .75rem; flex: 1; min-width: 200px; }
.usage-bar {
    flex: 1; height: 8px; border-radius: 999px; background: rgba(15, 23, 42, .08);
    overflow: hidden;
}
.usage-fill {
    height: 100%; background: var(--grad-primary, linear-gradient(90deg, #0b9d6e, #0b3d2e));
    border-radius: 999px; transition: width .4s ease-out;
}

/* Engagement bar (product details) */
.engagement-bar {
    display: flex; gap: .5rem; margin-top: 12px; flex-wrap: wrap;
}
.eng-btn {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .5rem .75rem; border-radius: 999px;
    background: rgba(11, 61, 46, .06); border: 1px solid rgba(11, 61, 46, .1);
    cursor: pointer; transition: background .15s, transform .15s, border-color .15s;
    font-size: .85rem; font-weight: 600; color: var(--ink-2, #334155);
    text-decoration: none;
}
.eng-btn:hover { background: rgba(11, 157, 110, .12); transform: translateY(-1px); }
.eng-btn.on {
    background: rgba(224, 45, 111, .12); border-color: rgba(224, 45, 111, .35);
    color: #b91c5c;
}
.eng-btn.follow-btn.on {
    background: rgba(212, 160, 23, .15); border-color: #d4a017; color: #b8830a;
}
.eng-icon { font-size: 1rem; }
.eng-count { font-weight: 800; }

/* Comments */
.comments-block { padding: 1.25rem; }
.comments-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.comments-head h3 { margin: 0; }
.comment-form {
    display: flex; gap: .5rem; align-items: flex-start;
    padding: .75rem; border: 1px solid rgba(15, 23, 42, .08);
    border-radius: var(--radius, 12px); margin-bottom: 1rem;
    background: rgba(15, 23, 42, .02);
}
.comment-form textarea { flex: 1; resize: vertical; min-height: 38px; }
.comment-list { list-style: none; padding: 0; margin: 0; }
.comment {
    display: flex; gap: .65rem; padding: .85rem 0;
    border-top: 1px solid rgba(15, 23, 42, .06);
}
.comment:first-child { border-top: 0; }
.comment-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--grad-primary, linear-gradient(135deg, #0b9d6e, #0b3d2e));
    color: #fff; display: grid; place-items: center;
    font-weight: 700; flex-shrink: 0;
}
.comment-body { flex: 1; }
.comment-meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .25rem; }
.comment-body p { margin: .25rem 0; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.comment-actions {
    display: flex; gap: 1rem; margin-top: .35rem;
    font-size: .85rem; color: var(--ink-3, #64748b);
}
.comment-like, .comment-reply-btn {
    background: none; border: 0; cursor: pointer; color: inherit;
    padding: 0; font-size: inherit; transition: color .15s;
}
.comment-like:hover { color: #e02d6f; }
.comment-reply-btn:hover { color: var(--green-600, #0b9d6e); }
.comment-reply-locked {
    font-size: .85rem; color: #d4a017; text-decoration: none;
    border: 1px dashed rgba(212, 160, 23, .35); padding: .15rem .5rem; border-radius: 999px;
}
.reply-form {
    display: flex; gap: .5rem; align-items: flex-start;
    margin-top: .5rem; padding: .65rem;
    background: rgba(11, 157, 110, .04); border-radius: 8px;
}
.reply-form textarea { flex: 1; resize: vertical; min-height: 36px; }
.comment-replies { list-style: none; padding-left: 2.5rem; margin: 0; }
.comment.is-reply { padding: .55rem 0; }
.comment.is-seller > .comment-avatar {
    background: linear-gradient(135deg, #d4a017, #b8830a);
}

/* ------------------------------------------------------------------
 * Comment system update (2026-05-16 — comment chunk)
 * (Re-bundled here so deploying this single main.css doesn't
 *  regress the comment styles shipped earlier in this update cycle.)
 * ------------------------------------------------------------------ */
.comment-avatar { overflow: hidden; }
.comment-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.comment-avatar .comment-avatar-letter {
    display: block;
    line-height: 1;
}

.badge.badge-buyer-tag {
    background: rgba(11, 157, 110, .15);
    color: var(--green-700, #066d4d);
    font-weight: 600;
}
.badge.badge-seller-tag {
    background: rgba(139, 92, 246, .15);
    color: #5b21b6;
    font-weight: 600;
}

.comment-like .heart {
    display: inline-block;
    margin-right: 2px;
    font-size: 1.02em;
    line-height: 1;
    transition: transform .12s ease;
}
.comment-like.is-liked { color: #e02d6f; }
.comment-like.is-liked .heart { transform: scale(1.1); }

.comment-actions { flex-wrap: wrap; align-items: center; }

.comment-delete-btn {
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--ink-3, #64748b);
    padding: 0;
    font-size: inherit;
    transition: color .15s;
}
.comment-delete-btn:hover { color: #dc2626; }
.comment-delete-btn[data-admin="1"] { color: #b45309; }
.comment-delete-btn[data-admin="1"]:hover { color: #b91c1c; }
.comment-delete-btn[data-pending="1"] { opacity: .5; cursor: wait; }


/* Premium hero (premium landing page) */
.premium-hero {
    position: relative; overflow: hidden;
    border-radius: var(--radius-xl, 18px);
    background: linear-gradient(135deg, #0b3d2e 0%, #0b9d6e 100%);
    color: #fff; padding: 3rem 2.5rem; min-height: 380px;
}
.premium-hero-bg {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(circle at 20% 30%, rgba(212, 160, 23, .35) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(124, 58, 237, .25) 0%, transparent 40%);
}
.premium-hero-content { position: relative; max-width: 720px; }
.premium-headline { font-size: 2.4rem; font-weight: 800; line-height: 1.15; margin: .5rem 0; }
.premium-perks {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .75rem; margin: 1.5rem 0;
}
.perk {
    display: flex; align-items: flex-start; gap: .75rem;
    background: rgba(255, 255, 255, .08); padding: .85rem 1rem;
    border-radius: 10px; backdrop-filter: blur(6px);
}
.perk-icon { font-size: 1.5rem; line-height: 1; }
.perk strong { display: block; font-size: .95rem; }
.perk span { font-size: .82rem; opacity: .8; display: block; margin-top: .15rem; }
.premium-cta-form { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.btn-premium {
    background: linear-gradient(135deg, #d4a017, #b8830a);
    color: #fff; font-weight: 700; padding: .85rem 1.5rem;
    border: 0; border-radius: 999px; cursor: pointer;
    box-shadow: 0 8px 24px -6px rgba(212, 160, 23, .55);
    transition: transform .2s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)), box-shadow .2s;
    font-size: 1rem; text-decoration: none; display: inline-flex; align-items: center; gap: .5rem;
}
.btn-premium:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 28px -6px rgba(212, 160, 23, .7);
}
.btn-lg { padding: .95rem 1.75rem; font-size: 1.05rem; }

/* Activity feed */
.activity-feed { list-style: none; padding: 0; margin: 0; }
.activity-feed li {
    display: flex; gap: .75rem; padding: .65rem 0;
    border-bottom: 1px dashed rgba(15, 23, 42, .08);
}
.activity-feed li:last-child { border-bottom: 0; }
.activity-dot {
    flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%;
    background: var(--green-600, #0b9d6e); margin-top: .55rem;
    box-shadow: 0 0 0 3px rgba(11, 157, 110, .18);
}

/* Progress bar */
.progress {
    height: 6px; background: rgba(15, 23, 42, .08);
    border-radius: 999px; overflow: hidden; margin-bottom: .25rem;
}
.progress-bar {
    height: 100%; border-radius: 999px;
    background: var(--grad-primary, linear-gradient(90deg, #0b9d6e, #d4a017));
    transition: width .4s ease-out;
}

/* Chat shell - fully styled */
.chat-shell {
    display: grid; grid-template-columns: 320px 1fr;
    /*
     * 2026-05-16 fix — long threads pushed the compose textarea
     * out of view and long conversation lists overflowed the
     * sidebar. Root cause: `display: grid` with no explicit
     * `grid-template-rows` leaves an implicit `auto`-sized row,
     * which sizes to its content. And the grid items default to
     * `min-height: auto`, so even `.chat-msgs { overflow-y: auto }`
     * cannot clip — the items themselves keep growing.
     *
     * `minmax(0, 1fr)` is the standard pin-the-row-to-container
     * idiom: the `0` minimum disables the auto-min-content trap,
     * the `1fr` makes the row fill the shell's fixed height.
     * Combined with `min-height: 0` on each grid item below, the
     * flex/scroll inside .chat-thread and the overflow on
     * .chat-list start working as intended.
     */
    grid-template-rows: minmax(0, 1fr);
    height: calc(100vh - 200px); min-height: 480px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: var(--radius-lg, 14px); overflow: hidden;
    background: #fff;
}
.chat-list {
    border-right: 1px solid rgba(15, 23, 42, .08);
    overflow-y: auto;
    /* min-height: 0 — see the long comment on .chat-shell. */
    min-height: 0;
}
.chat-list-head {
    padding: 1rem; border-bottom: 1px solid rgba(15, 23, 42, .06);
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; background: #fff; z-index: 1;
}
.chat-list-head h2 { margin: 0; font-size: 1.05rem; }
.chat-list-items { list-style: none; padding: 0; margin: 0; }
.chat-list-item {
    display: flex; align-items: center; gap: .65rem; padding: .85rem 1rem;
    text-decoration: none; color: inherit; cursor: pointer;
    border-bottom: 1px solid rgba(15, 23, 42, .04); transition: background .15s;
}
.chat-list-item:hover { background: rgba(11, 157, 110, .04); }
.chat-list-item.on { background: rgba(11, 157, 110, .08); }
.chat-list-meta { flex: 1; min-width: 0; }
.chat-list-name {
    font-weight: 600; font-size: .92rem;
    display: flex; align-items: center; gap: .35rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-list-preview {
    font-size: .82rem; color: var(--ink-3, #64748b);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: .15rem;
}
.chat-list-aside {
    display: flex; flex-direction: column; align-items: flex-end; gap: .25rem;
    flex-shrink: 0;
}
.chat-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--grad-primary, linear-gradient(135deg, #0b9d6e, #0b3d2e));
    color: #fff; display: grid; place-items: center;
    font-weight: 700; font-size: .95rem; flex-shrink: 0;
    position: relative;
}
.chat-avatar.lg { width: 44px; height: 44px; font-size: 1.1rem; }
.avatar-pro {
    position: absolute; bottom: -2px; right: -2px;
    background: linear-gradient(135deg, #d4a017, #b8830a); color: #fff;
    width: 16px; height: 16px; border-radius: 50%;
    display: grid; place-items: center; font-size: .55rem;
    box-shadow: 0 0 0 2px #fff;
}
.unread-dot {
    background: #e02d6f; color: #fff; font-size: .68rem; font-weight: 700;
    padding: .12rem .5rem; border-radius: 999px; min-width: 18px;
    text-align: center;
}
.chat-thread {
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, rgba(11, 157, 110, .02), transparent);
    /*
     * min-height: 0 + overflow: hidden — see the long comment on
     * .chat-shell. Without min-height: 0, the grid item expands to
     * fit thread-head + every bubble + compose, and the `flex: 1`
     * on .chat-msgs becomes useless. overflow: hidden is a
     * belt-and-suspenders measure so the compose textarea can
     * never visually leak below the shell.
     */
    min-height: 0;
    overflow: hidden;
}
.chat-thread-head {
    display: flex; align-items: center; gap: .65rem; padding: .85rem 1rem;
    border-bottom: 1px solid rgba(15, 23, 42, .08); background: #fff;
    /* Keep the head pinned at the top of the column. */
    flex-shrink: 0;
}
.chat-thread-name { font-weight: 700; font-size: 1rem; }
.chat-back {
    display: none; width: 32px; height: 32px; align-items: center; justify-content: center;
    border-radius: 50%; text-decoration: none; color: inherit; font-size: 1.3rem;
}
.chat-msgs {
    flex: 1; overflow-y: auto; padding: 1rem;
    display: flex; flex-direction: column; gap: .5rem;
    scroll-behavior: smooth;
    /* min-height: 0 — see the long comment on .chat-shell. */
    min-height: 0;
}
.chat-msg { display: flex; max-width: 75%; animation: bubble-in .25s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)); }
.chat-msg.in { align-self: flex-start; }
.chat-msg.out { align-self: flex-end; }
.chat-bubble {
    padding: .55rem .85rem; border-radius: 16px;
    font-size: .92rem; line-height: 1.4; word-break: break-word;
    position: relative;
}
.chat-msg.in .chat-bubble {
    background: #f1f5f9; color: var(--ink-1, #0f172a);
    border-bottom-left-radius: 4px;
}
.chat-msg.out .chat-bubble {
    background: var(--grad-primary, linear-gradient(135deg, #0b9d6e, #0b3d2e));
    color: #fff; border-bottom-right-radius: 4px;
}
.chat-time { font-size: .7rem; opacity: .65; margin-left: .5rem; }
.chat-compose {
    display: flex; gap: .5rem; padding: .75rem;
    border-top: 1px solid rgba(15, 23, 42, .08); background: #fff;
    /* flex-shrink: 0 keeps the input visible even with big threads. */
    flex-shrink: 0;
    /* Chunk 2 — emoji popover is positioned relative to this row. */
    position: relative;
}
.chat-compose textarea {
    flex: 1; resize: none; min-height: 38px; max-height: 140px;
    padding: .55rem .85rem; border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, .12); font: inherit;
}
.chat-compose textarea:focus {
    outline: 0; border-color: var(--green-600, #0b9d6e);
    box-shadow: 0 0 0 3px rgba(11, 157, 110, .15);
}
.chat-send {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--grad-primary, linear-gradient(135deg, #0b9d6e, #0b3d2e));
    color: #fff; border: 0; cursor: pointer; flex-shrink: 0;
    font-size: 1.1rem; transition: transform .15s var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
}
.chat-send:hover { transform: scale(1.08); }
.chat-empty {
    display: grid; place-items: center; height: 100%; padding: 2rem;
    text-align: center; color: var(--ink-3, #64748b);
}

/* =================================================================
 * Chunk 2 (2026-05-16) — Messaging enhancements styles
 * -----------------------------------------------------------------
 * Presence dot:  bottom-right corner of any .chat-avatar
 * Online status: text below the chat header name
 * Typing indicator: animated 3-dot strip below the messages list
 * Emoji picker: small popover anchored to the compose row
 * ================================================================= */

/* Presence dot — bottom-right corner of an avatar. Two states:
   default (offline, neutral grey) and .is-online (green pulse). */
.presence-dot {
    position: absolute;
    right: -1px; bottom: -1px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #cbd5e1;
    border: 2px solid #fff;
    box-shadow: 0 0 0 0 rgba(11, 157, 110, 0);
    z-index: 2;
    pointer-events: none;
}
.presence-dot.is-online {
    background: #10b981;
    animation: presence-pulse 2.2s ease-in-out infinite;
}
@keyframes presence-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .45); }
    50%      { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0); }
}
/* Avatar containers need position: relative so the dot can anchor.
   Both the sidebar avatar (.chat-avatar) and the header variant
   (.chat-avatar.lg) get the same treatment. */
.chat-avatar { position: relative; }
.chat-list-item { position: relative; }

/* Online status text in the chat header. Subtle by default,
   green when the other party is online. Falls back to the muted
   secondary text colour for "Last seen 5m ago" / "Offline". */
.chat-head-status {
    display: inline-block;
    margin-left: .35rem;
    font-size: .78rem;
    color: var(--ink-3, #64748b);
    transition: color .15s;
}
.chat-head-status.is-online {
    color: #059669;
    font-weight: 600;
}

/* Typing indicator — animated 3 dots, sits between the message
   list and the compose row. Collapses to height 0 when inactive
   so the layout doesn't jump when the indicator appears/disappears. */
.chat-typing {
    display: flex; align-items: center; gap: .5rem;
    padding: 0 1rem;
    height: 0;
    overflow: hidden;
    color: var(--ink-3, #64748b);
    font-size: .78rem;
    background: #fff;
    border-top: 1px solid rgba(15, 23, 42, .04);
    /* Same flex-shrink discipline as the compose row. */
    flex-shrink: 0;
    transition: height .18s ease;
}
.chat-typing.is-active {
    height: 32px;
    padding: .5rem 1rem .35rem;
}
.chat-typing-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
}
.chat-typing-dots {
    display: inline-flex; gap: 3px; align-items: center;
}
.chat-typing-dots span {
    display: inline-block;
    width: 5px; height: 5px;
    background: #94a3b8;
    border-radius: 50%;
    animation: chat-typing-bounce 1.2s ease-in-out infinite;
}
.chat-typing-dots span:nth-child(2) { animation-delay: .15s; }
.chat-typing-dots span:nth-child(3) { animation-delay: .30s; }
@keyframes chat-typing-bounce {
    0%, 60%, 100% { transform: translateY(0);    opacity: .4; }
    30%           { transform: translateY(-4px); opacity: 1;  }
}

/* Emoji picker — button next to the textarea, plus a popover that
   anchors above the compose row when open. */
.chat-emoji-btn {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0 .35rem;
    font-size: 1.35rem;
    line-height: 1;
    color: inherit;
    border-radius: 8px;
    transition: background .15s;
    align-self: flex-end;
    /* Match the textarea's bottom edge — the bigger emoji font
       would otherwise look top-anchored next to a small textarea. */
    margin-bottom: 2px;
    flex-shrink: 0;
}
.chat-emoji-btn:hover { background: rgba(15, 23, 42, .06); }
.chat-emoji-btn:focus-visible { outline: 2px solid var(--green-500, #10b981); outline-offset: 1px; }
.chat-emoji-btn[aria-expanded="true"] { background: rgba(11, 157, 110, .12); }

.chat-emoji-pop {
    position: absolute;
    bottom: calc(100% + 6px);
    left: .75rem;
    width: 280px;
    max-height: 320px;
    overflow-y: auto;
    padding: .5rem .65rem .75rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    z-index: 60;
}
.chat-emoji-pop[hidden] { display: none; }
.chat-emoji-group-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-3, #64748b);
    font-weight: 700;
    margin: .55rem 0 .3rem;
}
.chat-emoji-group-label:first-child { margin-top: 0; }
.chat-emoji-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
}
.chat-emoji-cell {
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 1.35rem;
    line-height: 1;
    padding: 6px 4px;
    border-radius: 6px;
    transition: background .12s;
    /* Reset font so emojis render via OS, not theme font. */
    font-family: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji",sans-serif;
}
.chat-emoji-cell:hover { background: rgba(15, 23, 42, .08); }
.chat-emoji-cell:focus-visible {
    outline: 2px solid var(--green-500, #10b981);
    outline-offset: 1px;
}

/* On phones the popover would otherwise overflow the viewport.
   Pin it to the left edge of the compose row and shrink width
   so it always fits between left padding and the right send button. */
@media (max-width: 760px) {
    .chat-emoji-pop {
        left: .5rem;
        right: .5rem;
        width: auto;
        max-height: 280px;
    }
}

/* End of Chunk 2 styles ============================================ */

/* =================================================================
 * Chunk 3 (2026-05-16) — Per-conversation clear + admin hard-delete
 * -----------------------------------------------------------------
 *   .chat-list-row             wrapper li (replaces bare <li>);
 *                              position: relative so the × button
 *                              can anchor to the right edge.
 *   .chat-list-clear-btn       small × that appears on hover
 *                              (always-visible on touch); posts a
 *                              one-sided clear for THIS row only.
 *   .chat-admin-delete-btn     admin-only "Delete for both" button
 *                              in the chat header; wipes the
 *                              conversation row + all messages
 *                              for BOTH parties.
 * ================================================================= */

.chat-list-row {
    position: relative;
    list-style: none;
    margin: 0;
}

/* The per-row clear form is positioned over the right edge of
   the conversation row. It does NOT replace the row anchor —
   the anchor still handles clicks on most of the row area, and
   the form sibling captures clicks on the × itself. */
.chat-list-clear-form {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    z-index: 3;
    opacity: 0;
    transition: opacity .14s ease;
    pointer-events: none;
}

.chat-list-clear-btn {
    background: rgba(15, 23, 42, .08);
    border: 0;
    cursor: pointer;
    width: 22px; height: 22px;
    line-height: 1;
    border-radius: 50%;
    font-size: 1rem;
    color: var(--ink-2, #475569);
    padding: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background .14s, color .14s, transform .14s;
}
.chat-list-clear-btn:hover {
    background: #dc2626;
    color: #fff;
    transform: scale(1.08);
}
.chat-list-clear-btn:focus-visible {
    outline: 2px solid var(--green-500, #10b981);
    outline-offset: 2px;
}

/* Reveal on hover / focus-within. Also revealed when the row's
   form has been focused via keyboard — :focus-within climbs from
   the form up to the wrapper. */
.chat-list-row:hover .chat-list-clear-form,
.chat-list-row:focus-within .chat-list-clear-form {
    opacity: 1;
    pointer-events: auto;
}

/* On touch devices hover is finicky — always show the button so
   mobile users have a visible affordance. Detected via pointer
   media query (coarse pointer = touch). */
@media (hover: none), (pointer: coarse) {
    .chat-list-clear-form {
        opacity: .85;
        pointer-events: auto;
    }
}

/* Don't let the × overlap the timestamp/unread badge. The aside
   column already keeps things tight; we just shrink its right
   padding so the absolute-positioned button has room. */
.chat-list-row .chat-list-aside {
    padding-right: 22px;
}

/* Admin-only "Delete for both parties" button in the chat header.
   Sits at the far right of the header — flex auto-pushes it via
   margin-left:auto so it stays right-anchored even if the name
   gets long. Visually distinct (red) so admins notice it without
   accidentally tapping it; the form's onsubmit confirm() is the
   actual safety net. */
.chat-admin-delete-form {
    margin: 0 0 0 auto;
    padding: 0;
}
.chat-admin-delete-btn {
    background: rgba(220, 38, 38, .08);
    border: 1px solid rgba(220, 38, 38, .25);
    color: #b91c1c;
    cursor: pointer;
    font-size: .78rem;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 8px;
    display: inline-flex; align-items: center; gap: .35rem;
    transition: background .14s, color .14s, border-color .14s;
    white-space: nowrap;
}
.chat-admin-delete-btn:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}
.chat-admin-delete-btn:focus-visible {
    outline: 2px solid #dc2626;
    outline-offset: 2px;
}
.chat-admin-delete-btn svg { display: block; flex-shrink: 0; }

/* On phones the header is tight — collapse the admin button to
   icon-only so it doesn't push the name off-screen. The "Delete
   for both" text is still readable via the title attribute /
   confirmation dialog. */
@media (max-width: 760px) {
    .chat-admin-delete-btn { padding: 5px 7px; font-size: 0; }
    .chat-admin-delete-btn svg { width: 16px; height: 16px; }
}

/* End of Chunk 3 styles ============================================ */

/* =================================================================
 * Chunk 4 (2026-05-17) — Read receipts (✓ / ✓✓ blue)
 * -----------------------------------------------------------------
 * The same SVG markup is emitted both server-side (in
 * inbox.php) and client-side (chat.js tickHtml()), so the rules
 * here apply uniformly. The trick: TWO overlapping checkmark
 * polylines inside ONE SVG. By default we hide the second one;
 * .is-read reveals it and turns the whole pair blue.
 *
 * Used in two places:
 *   .chat-ticks       inside chat bubbles (right of .chat-time)
 *   .chat-ticks-sm    smaller variant for the sidebar previews
 * ================================================================= */

.chat-ticks {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 6px;
    color: rgba(15, 23, 42, .42);  /* muted grey for "sent, unread" */
    line-height: 1;
    transition: color .18s ease;
}

/* The bubble-level ticks sit inside .chat-time, which is already
   .chat-bubble's metadata block — keep them lined up with the
   timestamp baseline. */
.chat-bubble .chat-ticks {
    color: rgba(255, 255, 255, .58);  /* lighter on the green outgoing bubble */
}

.chat-ticks svg {
    display: block;
    overflow: visible;  /* the second polyline starts at x=6, no overflow needed but safe */
}

/*
 * The second checkmark (the one that makes it "double") is hidden
 * by default — only the first polyline shows. .is-read reveals
 * the second AND switches the colour to WhatsApp-blue.
 */
.chat-ticks .tick-second {
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .22s ease, transform .22s ease;
}
.chat-ticks.is-read {
    color: #2563eb;  /* blue — overall stroke colour for both polylines */
}
.chat-bubble .chat-ticks.is-read {
    color: #93c5fd;  /* slightly lighter blue against the green bubble */
}
.chat-ticks.is-read .tick-second {
    opacity: 1;
    transform: translateX(0);
}

/* Sidebar preview variant — slightly smaller, and rendered INLINE
   with the preview text (not as a flex child) so the text wraps
   around it naturally. */
.chat-ticks-sm {
    margin-left: 0;
    margin-right: 4px;
    vertical-align: -2px;
}
.chat-ticks-sm svg { width: 14px; height: 10px; }

/* The sidebar lives in the unread/active row context, not in a
   coloured bubble, so it uses the neutral muted grey by default
   (overrides the bubble-on-bubble override above). */
.chat-list-preview .chat-ticks {
    color: rgba(15, 23, 42, .42);
}
.chat-list-preview .chat-ticks.is-read {
    color: #2563eb;
}

/* End of Chunk 4 styles ============================================ */

@media (max-width: 760px) {
    .chat-shell { grid-template-columns: 1fr; }
    .chat-thread { display: none; }
    .chat-thread.is-open { display: flex; }
    .chat-thread.is-open ~ * .chat-list { display: none; }
    .chat-shell:has(.chat-thread.is-open) .chat-list { display: none; }
    .chat-back { display: inline-flex; }
}

@keyframes bubble-in {
    from { opacity: 0; transform: translateY(8px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Heart burst (floating heart on like) */
.heart-burst {
    position: fixed; transform: translate(-50%, -50%);
    font-size: 2rem; pointer-events: none; z-index: 99999;
    animation: heart-float .9s ease-out forwards;
    color: #e02d6f; filter: drop-shadow(0 4px 8px rgba(224, 45, 111, .4));
}
@keyframes heart-float {
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(.5); }
    25%  { opacity: 1; transform: translate(-50%, -120%) scale(1.4); }
    100% { opacity: 0; transform: translate(-50%, -260%) scale(.9); }
}

/* Card variant for buttons used as forms inside table cells */
.btn-sm { padding: .35rem .75rem; font-size: .82rem; }

/* Inline edit detail */
.inline-edit summary { cursor: pointer; }
.inline-edit summary::-webkit-details-marker { display: none; }
.inline-edit[open] summary { margin-bottom: .5rem; }

/* Detail sleeves (FAQ) */
details summary { cursor: pointer; padding: .5rem 0; font-weight: 600; }
details[open] summary { color: var(--green-600, #0b9d6e); }
details p { margin: .35rem 0 .85rem; }

/* Feed responsiveness */
@media (max-width: 640px) {
    .premium-hero { padding: 2rem 1.5rem; }
    .premium-headline { font-size: 1.75rem; }
    .page-title { font-size: 1.4rem; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: .65rem; }
    .tile { padding: .85rem; }
    .tile-num { font-size: 1.5rem; }
}

/* Form actions */
.form-actions {
    display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem;
    flex-wrap: wrap;
}

/* ============================================================
   V2 FIX PACK (2026-05-11) — auth preloader, password toggle,
   math captcha, footer logo, category icons, sign-up hover.
   ============================================================ */

/* Auth pages — centred card with breathing room */
.auth-wrap { max-width: 460px; padding: 56px 20px; margin: 0 auto; }
.auth-card { padding: 32px 30px; box-shadow: var(--shadow); }

/* Submit button spinner (inline) */
.js-submit-btn { position: relative; }
.js-submit-btn .btn-spinner {
    display: none;
    width: 18px; height: 18px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tm-spin .7s linear infinite;
    margin-left: 8px;
}
.js-submit-btn.is-loading { pointer-events: none; opacity: .9; }
.js-submit-btn.is-loading .btn-spinner { display: inline-block; }
@keyframes tm-spin { to { transform: rotate(360deg); } }

/* Math captcha — make the equation feel like a chip */
.captcha-q {
    display: inline-block;
    padding: 2px 10px;
    margin: 0 2px;
    background: var(--gold-50);
    border: 1px solid var(--gold-100);
    color: var(--gold-700);
    border-radius: 8px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: .98rem;
    letter-spacing: .03em;
}
.captcha-input { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; max-width: 160px; }

/* Full-screen auth preloader overlay */
.auth-preloader {
    position: fixed; inset: 0;
    background: rgba(6, 40, 24, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: none;
    align-items: center; justify-content: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity .25s var(--ease-out);
}
.auth-preloader.is-active { display: flex; opacity: 1; }
.auth-preloader-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 28px 36px;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    box-shadow: var(--shadow-xl);
    min-width: 220px;
    animation: tm-rise .35s var(--ease-spring);
}
.auth-preloader-text {
    font-weight: 600;
    color: var(--ink);
    font-size: .95rem;
}
.auth-spinner {
    width: 44px; height: 44px;
    border: 3px solid var(--green-50);
    border-top-color: var(--green-600);
    border-right-color: var(--green-600);
    border-radius: 50%;
    animation: tm-spin .9s linear infinite;
}
@keyframes tm-rise {
    from { opacity: 0; transform: translateY(8px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Browse-categories tiles on the public homepage */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}
.cat-card {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 14px;
    text-align: center;
    text-decoration: none;
    color: var(--ink);
    transition: transform .2s var(--ease-out), box-shadow .2s, border-color .2s;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.cat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: var(--green-300);
    color: var(--green-900);
}
.cat-card .cat-icon {
    width: 56px; height: 56px;
    border-radius: 16px;
    display: grid; place-items: center;
    background: var(--green-50);
    color: var(--green-700);
    transition: transform .25s var(--ease-spring), background .2s;
}
.cat-card:hover .cat-icon { transform: scale(1.08) rotate(-3deg); }
.cat-card .cat-icon svg { width: 30px; height: 30px; }
.cat-card .cat-name {
    font-weight: 600;
    font-size: .95rem;
    color: var(--ink);
}
/* Category-specific accents */
.cat-electronics    .cat-icon { background: rgba(37, 99, 235, .1);  color: var(--blue-500); }
.cat-fashion        .cat-icon { background: rgba(236, 72, 153, .1); color: var(--pink-500); }
.cat-home           .cat-icon { background: rgba(245, 158, 11, .12); color: #b45309; }
.cat-vehicles       .cat-icon { background: rgba(15, 23, 42, .08);  color: var(--ink); }
.cat-property       .cat-icon { background: rgba(13, 148, 136, .12); color: var(--teal-500); }
.cat-food           .cat-icon { background: rgba(34, 197, 94, .12);  color: var(--green-700); }
.cat-health         .cat-icon { background: rgba(239, 68, 68, .1);  color: #b91c1c; }
.cat-sports         .cat-icon { background: rgba(249, 115, 22, .12); color: var(--orange-500); }
.cat-services       .cat-icon { background: rgba(124, 58, 237, .1); color: var(--violet-500); }
.cat-baby           .cat-icon { background: rgba(244, 114, 182, .12); color: #be185d; }
.cat-books          .cat-icon { background: rgba(99, 102, 241, .12); color: #4338ca; }
.cat-other          .cat-icon { background: rgba(100, 116, 139, .12); color: var(--ink-2); }

/* Footer logo — sit on dark background cleanly */
.footer-brand {
    display: inline-flex; align-items: center; gap: 10px;
    margin-bottom: 14px;
}
.footer-brand img {
    height: 38px; width: auto;
    /* No CSS filter — the SVG file is already white. */
}

/* Compatibility shims — guarantee dashboards never render unstyled if a view
   still uses legacy class names. */
.table { width: 100%; border-collapse: collapse; min-width: 620px; }
.table th, .table td {
    text-align: left; padding: .75rem .85rem;
    border-bottom: 1px solid var(--line-2);
    font-size: .92rem;
}
.table th {
    font-size: .75rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink-3, #64748b);
    background: rgba(11, 61, 46, .04);
}
.table tbody tr:hover { background: var(--bg-3); }
.table tbody tr:last-child td { border-bottom: 0; }


/* ============================================================
   V2 FIX PACK — sidebar safety
   Force the dash sidebar's links to lay out as a column even if
   only one of the two rule sets (.dash-side a vs .side-link) is
   reachable. This belt-and-braces the legacy "items flow inline"
   rendering some browsers showed.
   ============================================================ */
.dash-side { display: block; }
.dash-side .side-link,
.dash-side a {
    display: flex !important;
    align-items: center;
    gap: .65rem;
    padding: .55rem .85rem;
    border-radius: 10px;
    color: var(--ink-2);
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 2px;
    position: relative;
    transition: background .15s var(--ease-out), color .15s, transform .15s;
}
.dash-side .side-link:hover,
.dash-side a:hover {
    background: var(--green-50);
    color: var(--green-900);
    transform: translateX(2px);
}
.dash-side .side-link.active, .dash-side .side-link.on,
.dash-side a.active,           .dash-side a.on {
    background: var(--grad-primary);
    color: #fff;
    box-shadow: 0 6px 16px -6px rgba(11, 157, 110, .55);
    transform: none;
}
.dash-side .side-link.active:hover, .dash-side a.active:hover { transform: none; }

@media (max-width: 880px) {
    .dash { grid-template-columns: 1fr; }
    .dash-side { position: static; max-height: none; }
}


/* ============================================================
   VERIFICATION GATING — eligibility checklist + fee card
   ============================================================ */

.verif-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}
.verif-item {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 14px;
    align-items: flex-start;
    padding: 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: var(--bg-2);
    transition: border-color .2s var(--ease-out), background .2s;
}
.verif-item.is-met {
    border-color: rgba(21, 164, 75, .35);
    background: linear-gradient(0deg, rgba(21, 164, 75, .04), rgba(21, 164, 75, .04)), var(--bg-2);
}
.verif-item.is-unmet {
    border-color: rgba(212, 160, 23, .35);
    background: linear-gradient(0deg, rgba(212, 160, 23, .04), rgba(212, 160, 23, .04)), var(--bg-2);
}
.verif-icon {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: grid; place-items: center;
    flex-shrink: 0;
}
.verif-item.is-met   .verif-icon {
    background: rgba(21, 164, 75, .12);
    color: var(--green-700);
}
.verif-item.is-unmet .verif-icon {
    background: rgba(212, 160, 23, .15);
    color: var(--gold-700);
}
.verif-body { min-width: 0; }
.verif-label {
    font-weight: 600;
    color: var(--ink);
    font-size: .98rem;
    margin-bottom: 2px;
}
.verif-item.is-met .verif-label {
    text-decoration: line-through;
    text-decoration-color: rgba(11, 107, 52, .35);
    text-decoration-thickness: 1.5px;
    color: var(--ink-2);
}
.verif-detail { margin-bottom: 6px; }
.verif-progress {
    height: 6px;
    background: var(--line-3);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 4px;
}
.verif-progress-bar {
    height: 100%;
    background: var(--grad-primary);
    border-radius: 999px;
    transition: width .35s var(--ease-spring);
}
.verif-item.is-met .verif-progress-bar { background: var(--green-500); }

/* Fee card on the application form */
.verif-fee-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--gold-50) 0%, #fff 100%);
    border: 1px solid var(--gold-100);
    margin-bottom: 6px;
}
.verif-fee-amount {
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--gold-700);
    line-height: 1.1;
    margin: 2px 0 6px;
    letter-spacing: -.01em;
}
.verif-fee-badge {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--grad-gold);
    color: #2a1c00;
    display: grid; place-items: center;
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(184, 135, 12, .22);
}
@media (max-width: 600px) {
    .verif-fee-card { flex-direction: column; align-items: flex-start; text-align: left; }
}


/* ============ Push notification popups (premium-seller broadcasts) ============ */
.push-popup {
    position: fixed; z-index: 9999;
    max-width: 360px; min-width: 240px;
    padding: 14px 16px;
    background: #fff; color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: 0 14px 38px rgba(7, 19, 13, .18);
    font-size: .92rem;
    cursor: pointer;
    transition: opacity .35s ease, transform .35s ease;
    animation: push-drop-in .25s ease-out;
}
.push-popup .push-title { font-weight: 700; color: var(--green-900, #0b3d2e); margin-bottom: 4px; }
.push-popup .push-body  { color: var(--ink-2, #334155); line-height: 1.35; }
.push-popup .push-link  {
    display: inline-block; margin-top: 8px; padding: 6px 10px;
    background: var(--grad-primary); color: #fff;
    border-radius: var(--radius-pill); font-size: .82rem; font-weight: 600;
    text-decoration: none;
}
.push-popup.push-pos-top-right    { top: 20px;    right: 20px; }
.push-popup.push-pos-top-left     { top: 20px;    left: 20px; }
.push-popup.push-pos-bottom-right { bottom: 20px; right: 20px; }
.push-popup.push-pos-bottom-left  { bottom: 20px; left: 20px; }
@media (max-width: 600px) {
    .push-popup { max-width: calc(100vw - 24px); min-width: 0; left: 12px !important; right: 12px !important; }
    .push-popup.push-pos-top-left,
    .push-popup.push-pos-top-right    { top: 12px; }
    .push-popup.push-pos-bottom-left,
    .push-popup.push-pos-bottom-right { bottom: 12px; }
}
@keyframes push-drop-in {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   IMAGE PIVOT — Chunk 2 UI overhaul (2026-05-17)
   ---------------------------------------------------------
   Appended after the original V2 design system. These rules
   refine the product card and add styling for the redesigned
   product details page (PDP). Loaded last so they win in the
   cascade without removing the original rules.
   ========================================================= */

/* ---- Responsive grid (jiji-style breakpoints) ----------- */
/*
 * Phones: 2 columns (mobile is the majority of Ghana traffic).
 * Tablets: 3 columns.
 * Laptops: 4 columns.
 * Desktops: 5 columns.
 * Wide: 6 columns.
 *
 * We override .grid-products from the V2 stylesheet with an
 * explicit per-breakpoint rule — auto-fill at 220px was
 * collapsing to a single column on phones <500px, which is
 * not what we want.
 */
.grid-products,
.grid-products-feed {
    display: grid;
    gap: 12px;
    /* CRITICAL: minmax(0, 1fr) — NOT bare `1fr` (which is shorthand
     * for minmax(auto, 1fr)). The auto minimum prevents columns from
     * shrinking below their content's intrinsic min-content width.
     * Since .product-card .product-meta-loc uses `white-space: nowrap`
     * for the city/region text (with overflow:ellipsis as the
     * intended truncation), bare 1fr columns refuse to narrow past
     * the longest unbroken location string. On a 360px phone with
     * 18px container padding, that overflows the viewport, body's
     * overflow-x:hidden clips the right side, and the page looks
     * left-padded but right-flush. minmax(0, 1fr) tells the layout
     * the column can shrink to zero — the nowrap ellipsis then takes
     * over and the card respects the container's padding properly.
     * Same root cause as the .page-with-sidebar mobile-bleed bug. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px)  { .grid-products, .grid-products-feed { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 900px)  { .grid-products, .grid-products-feed { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1200px) { .grid-products, .grid-products-feed { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1500px) { .grid-products, .grid-products-feed { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; } }

/* ------------------------------------------------------------------
 *  .grid-products-4col — fixed 2-col phone / 4-col PC grid.
 *  ------------------------------------------------------------------
 *  Added 2026-05-15 (Chunk 3) per the marketplace owner's spec:
 *  "pagination feature to display in batches of 40 ... 4 in a row on
 *  PC, 2 in a row on phone" on the public /feed and /category pages,
 *  and the same 2/4 layout on the buyer dashboard's Recently Viewed,
 *  Saved Items, and Overview "recently viewed" section.
 *
 *  Unlike the existing .grid-products / .grid-products-feed (which
 *  expand to 5 cols at 1200 px and 6 cols at 1500 px), this class
 *  CAPS at 4 columns regardless of viewport width — so product cards
 *  stay legibly large on 27"+ monitors instead of shrinking into a
 *  six-across thumbnail strip. Below 700 px the grid falls back to
 *  the 2-col mobile layout, matching the spec's "phone" branch.
 *
 *  Uses the same minmax(0, 1fr) trick as .grid-products to keep
 *  nowrap location strings from forcing a horizontal overflow on
 *  narrow viewports.
 * ------------------------------------------------------------------ */
.grid-products-4col {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 700px) {
    .grid-products-4col {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }
}

/* ---- Refined product card (jiji-style) ------------------ */
/*
 * Tighter padding, price-first ordering, location + time-ago
 * meta row, neutral white background. The card hover lift is
 * preserved from V2.
 */
.product-card {
    border-radius: 12px;
}
.product-card .product-thumb {
    aspect-ratio: 1 / 1; /* square thumbs feel more jiji-like than 4:5 */
    background: #f1f5f4;
}
.product-card .product-thumb img {
    object-fit: cover;
}
.product-card .product-body {
    padding: 10px 12px 12px;
    gap: 4px;
}
.product-card .product-price {
    order: -1; /* price ABOVE the title — jiji's most-distinctive move */
    font-size: 1rem;
    font-weight: 800;
    color: var(--green-700);
    margin: 0;
    line-height: 1.2;
}
.product-card .product-old-price {
    color: var(--muted-2);
    font-weight: 500;
}
.product-card .product-title {
    font-size: .88rem;
    font-weight: 500;
    color: var(--ink-2);
    margin: 2px 0 0;
    line-height: 1.32;
    -webkit-line-clamp: 2;
}
.product-card .product-meta {
    display: flex; align-items: center; gap: 6px;
    font-size: .72rem; color: var(--muted);
    margin-top: 4px;
    line-height: 1.25;
}
.product-card .product-meta-sep { color: var(--muted-2); }
.product-card .product-meta-loc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}
.product-card .product-seller {
    border-top: 0;
    padding-top: 0;
    margin-top: 4px;
    font-size: .72rem;
}

/* Smaller badges on the new card; less visual noise */
.product-card .badges { top: 6px; left: 6px; right: 6px; gap: 4px; }
.product-card .badge {
    padding: 2px 7px;
    font-size: .62rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
}

/* Photo-count chip (already added in Chunk 1; restated here so
   the rule moves out of the partial-inline style and lives with
   the rest of the card design). */
.product-thumb .photo-count {
    position: absolute;
    left: 6px;
    bottom: 6px;
    background: rgba(0,0,0,.7);
    color: #fff;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
}
.product-thumb .photo-count svg { display: block; }

/* Hover scale is too aggressive on the smaller mobile grid —
   tone it down so the cards don't feel jumpy on tap. */
.product-card:hover { transform: translateY(-2px); }
.product-card:hover .product-thumb img { transform: scale(1.02); }

/* Top+TOP+ corner ribbon for featured items — looks like the
   "TOP+" pill on jiji's RAV4 card. */
.product-card .badge-featured {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #fff;
    padding: 3px 9px;
    border-radius: 6px;
}
.product-card .badge-featured::before { content: '✨ '; }

/* ---- Product details page (PDP) — jiji-style redesign --- */
/*
 * Class prefix: .pdp-*
 * The layout: gallery and details stacked on mobile, two-column
 * on >= 900px. Sticky action bar at bottom on mobile only.
 */
.pdp {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
@media (min-width: 900px) {
    .pdp {
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 28px;
        align-items: start;
    }
}

/* Card panels stacked in the main column */
.pdp-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px;
}
.pdp-panel + .pdp-panel { margin-top: 12px; }
.pdp-panel h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--ink);
}
.pdp-panel-flat { background: transparent; border: 0; padding: 0; }

/* Gallery */
.pdp-gallery {
    background: #0b3d2e;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    position: relative;
    display: grid;
    place-items: center;
}
@media (min-width: 700px) {
    .pdp-gallery { aspect-ratio: 16 / 10; }
}
.pdp-gallery img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #0b3d2e;
}
.pdp-gallery-empty {
    color: var(--gold-500);
    font-size: 3rem;
}
.pdp-gallery-count {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background: rgba(0,0,0,.7);
    color: #fff;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
/* Thumbnail strip below the main gallery image.
 *
 * Previously this was display:flex + overflow-x:auto so a long
 * row of thumbs could be scrolled sideways. On mobile (and on
 * narrow desktop columns) that strip's intrinsic width was the
 * SUM of every 72px thumb plus gaps — wider than the viewport —
 * which broke containment: the parent .pdp-gallery is a flex
 * child of .pdp-grid, and a too-wide child forces the grid
 * column to grow, which in turn pushed .container past 100vw and
 * triggered horizontal scroll on the whole page. Header, body,
 * and footer drifted right by the overflow amount.
 *
 * Fix: flex-wrap onto new rows instead of scrolling. Now the
 * strip's height grows when there are many images, but its width
 * is capped at the parent's width — no overflow, no page drift,
 * no scrollbar flicker. min-width:0 on the strip itself blocks
 * the classic "flex children can refuse to shrink below content
 * size" trap that lets a single oversized thumb still bust out. */
.pdp-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    padding: 4px 2px 6px;
    min-width: 0;
    max-width: 100%;
}
.pdp-thumb {
    flex: 0 0 72px;
    width: 72px; height: 72px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    background: #1f2937;
    padding: 0;
    cursor: pointer;
    transition: border-color .15s, transform .15s;
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumb.is-active { border-color: var(--green-600); }
.pdp-thumb:hover { transform: translateY(-1px); }

/* Title + price block */
.pdp-loc {
    font-size: .82rem;
    color: var(--muted);
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.pdp-loc-pin { color: var(--green-700); }
.pdp-top-pill {
    background: var(--green-50);
    color: var(--green-700);
    padding: 3px 9px;
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 700;
    margin-left: auto;
}
.pdp-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--ink);
    line-height: 1.3;
}
.pdp-price {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--green-700);
    margin: 0 0 14px;
    line-height: 1.1;
}
.pdp-price .product-old-price {
    font-size: .95rem;
    color: var(--muted);
}
.pdp-price .negotiable {
    font-size: .9rem;
    color: var(--gold-600);
    margin-left: 8px;
}

/* Primary action row (Request callback + Call) */
.pdp-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.pdp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 10px;
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    transition: all .15s;
    border: 2px solid transparent;
    cursor: pointer;
}
.pdp-btn-call {
    background: var(--green-600);
    color: #fff;
}
.pdp-btn-call:hover {
    background: var(--green-700);
    color: #fff;
}
.pdp-btn-callback {
    background: #fff;
    color: var(--green-700);
    border-color: var(--green-600);
}
.pdp-btn-callback:hover {
    background: var(--green-50);
    color: var(--green-800);
}
.pdp-btn-whatsapp {
    background: #25D366;
    color: #fff;
}
.pdp-btn-whatsapp:hover {
    background: #1ebd5d;
    color: #fff;
}

/* Market-price band */
.pdp-market {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    font-size: .9rem;
    color: var(--ink-2);
}
.pdp-market-label { color: var(--muted); }
.pdp-market-value { font-weight: 700; color: var(--ink); }
.pdp-market-info {
    margin-left: auto;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--green-50);
    color: var(--green-700);
    display: grid; place-items: center;
    font-size: .8rem;
    font-weight: 800;
    cursor: help;
}

/* Chat with seller (jiji-style quick-reply chips) */
.pdp-chat h3 { margin-bottom: 10px; }
.pdp-chat-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.pdp-chat-chip {
    background: #fff;
    border: 1.5px solid var(--green-600);
    color: var(--green-700);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    text-decoration: none;
}
.pdp-chat-chip:hover {
    background: var(--green-50);
    color: var(--green-800);
}
.pdp-chat-input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: .95rem;
    margin-bottom: 10px;
    box-sizing: border-box;
    color: var(--ink-3);
    background: #fff;
}
.pdp-chat-input::placeholder { color: var(--muted-2); }
.pdp-chat-send {
    width: 100%;
    background: var(--orange-500);
    color: #fff;
    border: 0;
    padding: 14px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: background .15s;
}
.pdp-chat-send:hover { background: #ea580c; }

/* Key facts pill row (Foreign Used / Automatic / 38100 km — from product_attributes) */
.pdp-keyfacts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 8px;
}
.pdp-keyfact {
    text-align: center;
    padding: 14px 8px;
}
.pdp-keyfact-icon {
    color: var(--green-700);
    margin-bottom: 6px;
    height: 28px;
    display: grid;
    place-items: center;
}
.pdp-keyfact-icon svg { width: 28px; height: 28px; }
.pdp-keyfact-value {
    font-weight: 700;
    color: var(--ink);
    font-size: .9rem;
}

/* Spec grid (Make/Model/Year/Color/etc — from product_attributes) */
.pdp-specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 18px;
}
.pdp-spec {
    display: flex;
    flex-direction: column;
}
.pdp-spec-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
}
.pdp-spec-label {
    font-size: .82rem;
    color: var(--muted);
    margin-top: 2px;
}

/* Description with show-more */
.pdp-desc {
    white-space: pre-line;
    color: var(--ink-2);
    line-height: 1.55;
    font-size: .95rem;
    overflow: hidden;
    max-height: 200px;
    position: relative;
    transition: max-height .25s ease;
}
.pdp-desc.is-expanded { max-height: 4000px; }
.pdp-desc:not(.is-expanded)::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60px;
    background: linear-gradient(transparent, #fff);
    pointer-events: none;
}
.pdp-desc-toggle {
    background: 0; border: 0; cursor: pointer;
    color: var(--green-700);
    font-weight: 700;
    font-size: .9rem;
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
}
.pdp-desc-toggle:hover { color: var(--green-800); }
.pdp-desc-toggle .chev { transition: transform .2s; }
.pdp-desc-toggle.is-expanded .chev { transform: rotate(180deg); }

/* Make-an-offer CTA at the bottom of the main column */
.pdp-offer {
    width: 100%;
    background: #fff;
    border: 2px solid var(--green-600);
    color: var(--green-700);
    padding: 14px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all .15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.pdp-offer:hover {
    background: var(--green-50);
    color: var(--green-800);
}

/* Sticky bottom action bar on mobile */
.pdp-sticky-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: #fff;
    border-top: 1px solid var(--line);
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    z-index: 50;
    box-shadow: 0 -2px 12px rgba(0,0,0,.08);
}
@media (min-width: 900px) { .pdp-sticky-bar { display: none; } }
@media (max-width: 899px) {
    /* Padding-bottom on the PDP so content doesn't hide behind the sticky bar */
    .pdp-page { padding-bottom: 80px; }
}

/* Sticky seller card on desktop */
@media (min-width: 900px) {
    .pdp-aside { position: sticky; top: 90px; }
}

/* Category cards — refresh the homepage browse grid to be a bit
   more jiji-like (tighter, more icons visible per row on phones) */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
@media (max-width: 600px) {
    .cat-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}
@media (min-width: 900px)  { .cat-grid { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1200px) { .cat-grid { grid-template-columns: repeat(8, 1fr); } }

.cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px 8px 12px;
    border-radius: 14px;
    background: var(--green-50);
    color: var(--ink-2);
    transition: all .15s;
    min-height: 100px;
    text-decoration: none;
}
.cat-card:hover {
    background: var(--green-100);
    color: var(--ink);
    transform: translateY(-2px);
}
.cat-icon {
    width: 44px; height: 44px;
    display: grid;
    place-items: center;
    background: #fff;
    border-radius: 12px;
    margin-bottom: 8px;
    color: var(--green-700);
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.cat-icon svg { width: 26px; height: 26px; }
.cat-name {
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.25;
}
@media (max-width: 480px) {
    .cat-card { padding: 12px 6px 10px; min-height: 90px; }
    .cat-icon { width: 38px; height: 38px; }
    .cat-icon svg { width: 22px; height: 22px; }
    .cat-name { font-size: .72rem; }
}

/* End of IMAGE PIVOT — Chunk 2 UI overhaul ============== */

/* =========================================================
   UI REFRESH — Chunk 4 (2026-05-17)
   ---------------------------------------------------------
   Sticky category sidebar with flyout, refined typography,
   polished product cards with description + tag chips, and
   PDP polish (circular key-fact icons, jiji-style spec grid).
   Appended LAST so these rules win in the cascade.
   ========================================================= */

/* ---- Typography refinement -------------------------------- */
/* Slightly smaller, tighter — desktop font is too loud. The
   change is subtle but adds up to a much more "premium" feel. */
body { font-size: 15px; line-height: 1.5; }
.hero h1 { font-size: 1.85rem; line-height: 1.2; }
.hero p { font-size: 1rem; }
@media (min-width: 700px) {
    body { font-size: 15px; }
    .hero h1 { font-size: 2.2rem; }
}
h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; }
h3 { font-size: 1.05rem; font-weight: 700; }
.section-head h2 { font-size: 1.25rem; }

/* ---- Layout: 2-column with sticky sidebar ---------------- */
/*
 * On desktop (>=1024px) the page splits into a 280px-wide
 * sticky category sidebar + a flexible main content area.
 * On smaller screens, the sidebar collapses to a horizontal-
 * scroll category strip at the top, similar to mobile-jiji.
 */
.page-with-sidebar {
    display: grid;
    /* CRITICAL: minmax(0, 1fr) (not bare `1fr` which defaults to
     * minmax(auto, 1fr)). The bare 1fr won't let the column shrink
     * below its content's intrinsic min-width — and nested elements
     * like .hero-cards with `flex-wrap: nowrap` have an intrinsic
     * min-width equal to the sum of their children, which would push
     * the whole page wider than the viewport. minmax(0, 1fr) tells
     * the layout the column can shrink to zero; inner overflow-x:auto
     * then does its job and scrolls the cards within. */
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}
@media (min-width: 1024px) {
    .page-with-sidebar {
        grid-template-columns: 264px minmax(0, 1fr);
        gap: 22px;
        align-items: start;
    }
}

/* ---- The sticky category sidebar ------------------------- */
.cat-sidebar {
    /* Hidden on mobile/tablet — sidebar would crowd narrow screens.
       The category icons grid further down the page covers nav for them. */
    display: none;
}
@media (min-width: 1024px) {
    .cat-sidebar {
        display: block;
        position: sticky;
        top: 80px; /* clear of the sticky site header */
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 12px;
        /* CRITICAL: do NOT clip overflow — the flyout must escape this
           container to render on top of the main column. We accept that
           long category lists scroll the page rather than the sidebar. */
        overflow: visible;
        /* The sidebar needs a positive z-index so its sub-category
           flyout paints over the sibling main column (product cards
           use position:relative with auto z-index, so any positive
           value here wins on hover). But it must stay BELOW the
           site header (.site-header is z-index:50), otherwise the
           sidebar text bleeds through the header when the page is
           scrolled — same-rank z-indexes resolve by source order,
           and the sidebar comes after the header in the DOM, so
           tying at 50 made the sidebar win incorrectly. 10 is
           comfortably above the unset/auto stacking of product
           cards (zero) and well below the header (50). */
        z-index: 10;
    }
}

.cat-sidebar-item {
    position: relative;
    border-bottom: 1px solid var(--line-2);
    /* Default low stacking order. Lifted to a high z-index on hover /
       open so the .cat-flyout escapes its parent stacking context and
       paints over the product-card grid in the sibling main column.
       Without this lift, .cat-flyout's own z-index:200 is trapped
       inside the sidebar's stacking order (auto) and loses to the
       product cards' position:relative boxes — which is what was
       making the subcategories appear UNDER the cards on hover. */
    z-index: 1;
}
.cat-sidebar-item:hover,
.cat-sidebar-item:focus-within,
.cat-sidebar-item.is-open {
    z-index: 200;
}
.cat-sidebar-item:last-child { border-bottom: 0; }

.cat-sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    text-decoration: none;
    color: var(--ink-2);
    transition: background .12s;
}
.cat-sidebar-link:hover,
.cat-sidebar-item:hover .cat-sidebar-link,
.cat-sidebar-item.is-active .cat-sidebar-link {
    background: var(--green-50);
    color: var(--ink);
}
.cat-sidebar-link .cat-thumb {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: var(--bg);
    display: grid;
    place-items: center;
    color: var(--green-700);
    flex-shrink: 0;
}
.cat-sidebar-link .cat-thumb svg { width: 22px; height: 22px; }
.cat-sidebar-link .cat-info {
    flex: 1;
    min-width: 0;
    line-height: 1.25;
}
.cat-sidebar-link .cat-info-name {
    font-size: .92rem;
    font-weight: 600;
    color: var(--ink);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cat-sidebar-link .cat-info-count {
    font-size: .76rem;
    color: var(--muted);
    margin-top: 1px;
}
.cat-sidebar-link .cat-chev {
    color: var(--muted-2);
    flex-shrink: 0;
    transition: transform .15s;
}
.cat-sidebar-link:hover .cat-chev,
.cat-sidebar-item:hover .cat-chev { color: var(--green-700); }

/* ---- The flyout panel showing subcategories -------------- */
.cat-flyout {
    /* Hidden until JS shows it (or :hover on desktop) */
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    width: 280px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0,0,0,.08);
    /* High z-index so the flyout paints over the product grid in the
       sibling column. Pairs with .cat-sidebar-item:hover { z-index:200 }
       above — the item is what lifts the whole sub-tree above siblings;
       this value just orders things within that lifted context. */
    z-index: 250;
    overflow: hidden;
    margin-left: 6px;
}
.cat-sidebar-item:hover .cat-flyout,
.cat-sidebar-item.is-open .cat-flyout {
    display: block;
}
.cat-flyout-header {
    padding: 12px 14px 8px;
    border-bottom: 1px solid var(--line-2);
    background: var(--green-50);
}
.cat-flyout-header .cat-flyout-title {
    font-size: .8rem;
    font-weight: 700;
    color: var(--green-900);
    text-transform: uppercase;
    letter-spacing: .04em;
    display: block;
}
.cat-flyout-header .cat-flyout-all {
    font-size: .82rem;
    color: var(--green-700);
    font-weight: 600;
    margin-top: 2px;
    display: inline-block;
    text-decoration: none;
}
.cat-flyout-header .cat-flyout-all:hover { color: var(--green-900); text-decoration: underline; }
.cat-flyout-list {
    max-height: 420px;
    overflow-y: auto;
    padding: 6px 0;
}
.cat-flyout-list a {
    display: block;
    padding: 9px 14px;
    color: var(--ink-2);
    font-size: .9rem;
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: all .1s;
}
.cat-flyout-list a:hover {
    background: var(--green-50);
    color: var(--green-800);
    border-left-color: var(--green-600);
}
.cat-flyout-empty {
    padding: 18px 14px;
    color: var(--muted);
    font-size: .85rem;
    text-align: center;
}

/* ---- Hero refinement ------------------------------------- */
/* Restrain the hero so it doesn't dominate the page like
   before; jiji uses a compact green band with the search bar. */
.hero {
    padding: 36px 0 30px;
    min-height: auto;
}
.hero p { font-size: 1.02rem; margin-bottom: 14px; }
.hero-search { max-width: 720px; }
.hero-search input {
    padding: 12px 16px;
    font-size: 1rem;
    border-radius: 10px;
}
.hero-search .btn { border-radius: 10px; padding: 12px 22px; }

/* ---- Product card refinement (description + tag chips) -- */
.product-card .product-body {
    padding: 10px 12px 14px;
}
.product-card .product-desc {
    font-size: .78rem;
    color: var(--muted);
    line-height: 1.4;
    margin: 4px 0 6px;
    /* Two-line clamp, like jiji's card */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-card .product-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 6px;
    font-size: .7rem;
}
.product-card .product-tag {
    background: var(--bg);
    color: var(--ink-3);
    padding: 2px 7px;
    border-radius: 4px;
    font-weight: 500;
    border: 1px solid var(--line-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}
.product-card .product-tag-special {
    background: var(--gold-50);
    color: var(--gold-700);
    border-color: var(--gold-100);
}
.product-card .product-meta {
    margin-top: 6px;
    color: var(--muted);
    font-size: .72rem;
    display: flex;
    align-items: center;
    gap: 3px;
    line-height: 1.3;
}
.product-card .product-meta-loc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}
.product-card .trust-strip {
    /* Verified ID / X+ YEARS top-strip — looks like jiji's overlay */
    position: absolute;
    top: 6px;
    left: 6px;
    right: 36px;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    pointer-events: none;
}
.product-card .trust-pill {
    background: rgba(255,255,255,.95);
    color: var(--green-800);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.product-card .trust-pill svg { width: 10px; height: 10px; }
.product-card .ribbon {
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(135deg, var(--gold-500), var(--gold-700));
    color: #fff;
    padding: 3px 10px;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-bottom-right-radius: 6px;
    z-index: 2;
}

/* Tighter cards on mobile so 2-per-row don't overflow */
@media (max-width: 480px) {
    .product-card .product-price { font-size: .95rem; }
    .product-card .product-title { font-size: .82rem; }
    .product-card .product-desc { display: none; } /* mobile cards too small for desc */
    .product-card .product-body { padding: 8px 10px 12px; }
}

/* ---- PDP refinement: jiji-style spec grid + key facts --- */
/* Spec grid — bold value, uppercase muted label below */
.pdp-spec {
    display: flex;
    flex-direction: column;
    padding: 4px 0;
}
.pdp-spec-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.25;
}
.pdp-spec-label {
    font-size: .68rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 3px;
    font-weight: 500;
}

/* Key facts — circular icons with text label below */
.pdp-keyfacts {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 14px 4px;
    scrollbar-width: thin;
}
.pdp-keyfacts::-webkit-scrollbar { height: 4px; }
.pdp-keyfacts::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.pdp-keyfact {
    flex: 0 0 auto;
    min-width: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 6px 10px;
}
.pdp-keyfact-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bg);
    color: var(--ink-3);
    display: grid;
    place-items: center;
    margin-bottom: 8px;
    border: 1px solid var(--line);
}
.pdp-keyfact-icon svg { width: 26px; height: 26px; }
.pdp-keyfact-value {
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
}

/* PDP title row */
.pdp-title { font-size: 1.32rem; font-weight: 700; letter-spacing: -.005em; }
@media (min-width: 700px) { .pdp-title { font-size: 1.5rem; } }

/* Status + meta pills */
.pdp-status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: .8rem;
    color: var(--muted);
    margin: 4px 0 12px;
}
.pdp-status-pill {
    background: var(--green-50);
    color: var(--green-800);
    padding: 2px 9px;
    border-radius: 6px;
    font-size: .7rem;
    font-weight: 700;
}
.pdp-views {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Seller card refinements */
.pdp-seller-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px;
    background: #fff;
}
.pdp-seller-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.pdp-seller-avatar {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--green-700), var(--green-900));
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.pdp-seller-info { flex: 1; min-width: 0; }
.pdp-seller-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    line-height: 1.2;
}
.pdp-seller-pills {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.pdp-seller-pill {
    background: var(--bg);
    color: var(--ink-3);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 600;
    border: 1px solid var(--line-2);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.pdp-seller-pill svg { width: 11px; height: 11px; color: var(--green-600); }
.pdp-seller-pill.is-verified {
    background: var(--green-50);
    color: var(--green-800);
    border-color: var(--green-100);
}
.pdp-seller-lastseen {
    margin-top: 6px;
    font-size: .76rem;
    color: var(--muted);
}

/* Similar adverts heading */
.pdp-similar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 28px 0 12px;
}
.pdp-similar-head h3 { margin: 0; font-size: 1.1rem; }

/* End of UI REFRESH — Chunk 4 ============================ */

/* =========================================================
   CHUNK 5 (2026-05-17)
   ---------------------------------------------------------
   Search bar polish, trending-boost admin UI, subcategory
   select on the listing form.
   ========================================================= */

/* ---- Search bar — unified pill with seamless gold button - */
/*
 * Old design: white pill + 8px gap + separate rounded gold button
 * sitting inside the pill. The gap and the doubly-rounded corners
 * read as visually cluttered.
 *
 * New design: single white pill where the input area flows
 * seamlessly into a gold button on the right. The button only
 * rounds on its right edge; the input only on its left. Subtle
 * inset shadow inside the input area, soft drop shadow outside.
 * A search icon inside the input on the left adds polish.
 */
.hero-search {
    display: flex;
    align-items: stretch;
    gap: 0;
    max-width: 680px;
    margin: 26px auto 0;
    background: #fff;
    padding: 0;
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(0,0,0,.18),
                0 1px 2px rgba(0,0,0,.06);
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
    border: 1px solid rgba(255,255,255,.4);
}
.hero-search:focus-within {
    box-shadow: 0 10px 32px rgba(0,0,0,.22),
                0 2px 4px rgba(0,0,0,.08),
                0 0 0 4px rgba(212,160,23,.25);
}

.hero-search-icon {
    display: grid;
    place-items: center;
    padding-left: 18px;
    color: var(--muted-2);
    flex-shrink: 0;
}
.hero-search-icon svg { width: 20px; height: 20px; }

.hero-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 14px 16px 14px 12px;
    font-size: 1rem;
    color: var(--ink);
    font-weight: 500;
    line-height: 1.3;
}
.hero-search input::placeholder {
    color: var(--muted-2);
    font-weight: 400;
}

/* Override the .btn rules so the search button looks like one
   continuous part of the pill — flush right, no left radius,
   slightly darker on press / hover. */
.hero-search .btn,
.hero-search .btn-gold {
    border: 0;
    border-radius: 0 14px 14px 0;
    background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-600) 100%);
    color: #2a1c00;
    font-weight: 700;
    font-size: .95rem;
    padding: 0 26px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: filter .15s, transform .15s, box-shadow .15s;
    box-shadow: -2px 0 0 0 rgba(0,0,0,.04);
    letter-spacing: .01em;
    flex-shrink: 0;
}
.hero-search .btn:hover,
.hero-search .btn-gold:hover {
    filter: brightness(1.06);
    color: #2a1c00;
}
.hero-search .btn:active,
.hero-search .btn-gold:active { filter: brightness(.96); }

@media (max-width: 600px) {
    .hero-search {
        margin-left: 0;
        margin-right: 0;
        border-radius: 12px;
    }
    .hero-search .btn,
    .hero-search .btn-gold {
        border-radius: 0 12px 12px 0;
        padding: 0 18px;
        font-size: .9rem;
    }
    .hero-search input { padding: 13px 12px 13px 8px; font-size: .95rem; }
    .hero-search-icon { padding-left: 14px; }
    .hero-search-icon svg { width: 18px; height: 18px; }
}

/* ---- Trending boost admin section ---------------------- */
.tb-section { margin-top: 28px; }
.tb-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 18px;
    background: #fff;
}
.tb-active-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: linear-gradient(90deg, rgba(212,160,23,.08), transparent);
    border-left: 3px solid var(--gold-500);
    border-radius: 6px;
    margin-bottom: 8px;
}
.tb-active-thumb {
    width: 44px; height: 44px;
    border-radius: 8px;
    background: #f1f5f4;
    overflow: hidden;
    flex-shrink: 0;
}
.tb-active-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tb-active-info { flex: 1; min-width: 0; }
.tb-active-title {
    font-size: .9rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tb-active-meta {
    font-size: .78rem;
    color: var(--muted);
    margin-top: 2px;
}
.tb-empty {
    padding: 18px;
    text-align: center;
    color: var(--muted);
    background: var(--bg);
    border-radius: 8px;
    font-size: .9rem;
}

/* End of CHUNK 5 ========================================== */

/* ---- CHUNK 6: card grid width refinement (2026-05-17) ----
 *
 * Spec from user:
 *   - Desktop cards should be a bit wider than the current 220 px min.
 *   - On phone, cards must be narrow enough that AT LEAST two fit per
 *     row on the homepage and category pages.
 *
 * Implementation: the auto-fill 220 default works fine on tablet/small
 * desktop; we just bump it slightly. On phones (<= 640 px viewport) the
 * 220 minimum was forcing single-column layout, so we force a 2-column
 * grid with reduced gap to make both cards fit comfortably even on a
 * narrow 360 px phone (320 wide content area minus 12 px gap = 154 px
 * per card, which is enough for our card layout).
 *
 * Also tightens product-title clamp to one line on phone since the
 * 40-char ellipsis already gives us a clean cutoff — keeps each row
 * the same height in the 2-column grid.
 */
.grid-products {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
@media (max-width: 640px) {
    .grid-products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .product-card .product-body { padding: 8px 9px 11px; }
    .product-card .product-price { font-size: .92rem; }
    .product-card .product-title {
        font-size: .8rem;
        line-height: 1.3;
        /* 40-char ellipsis from PHP. Add a single-line clamp here so
         * cards in the 2-column grid have a predictable height. */
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .product-card .product-desc { display: none; }
    .product-card .product-meta { font-size: .68rem; }
    .product-card .product-tag { font-size: .65rem; padding: 1px 6px; max-width: 90px; }
    .product-card .trust-strip { right: 32px; }
    .product-card .trust-pill { font-size: .56rem; padding: 1px 6px; }
    .product-card .fav-btn { width: 28px; height: 28px; }
}
@media (max-width: 380px) {
    /* Tiny phones — keep 2 columns but trim padding further so price
     * and title don't wrap awkwardly. */
    .grid-products { gap: 8px; }
    .product-card .product-body { padding: 7px 8px 10px; }
}
/* End CHUNK 6 ========================================== */

/* ---- CHUNK 7: PDP layout fix + guest-gating styles (2026-05-17) ----
 *
 * User complaints addressed:
 *   1. PDP page is "too wide" — the .container's 1240px max-width was
 *      letting content sprawl edge-to-edge on big monitors. Narrow it
 *      to 1080px specifically for the PDP page.
 *   2. The like/share/follow buttons in the right column were
 *      overflowing the seller card boundary on certain widths because
 *      .engagement-bar buttons each had ~140-150px width and 4 of them
 *      didn't fit a 328px content area cleanly. Tighten padding/gap
 *      and constrain to two-per-row inside the aside.
 *   3. New .pdp-btn-guest style for the gentle "Sign in to..." CTAs
 *      that replace contact buttons for anonymous visitors.
 */

/* Narrower container — PDP only. Selector specificity equals .container
 * but this rule lives later in the cascade, so it wins. */
.pdp-page { max-width: 1080px; }

/* Slightly slimmer aside + a hair more breathing room between columns. */
@media (min-width: 900px) {
    .pdp { grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; }
}

/* Engagement bar inside the aside — was overflowing. Tighten pills so
 * 4 buttons fit comfortably in a 288 px-wide aside content area. */
.pdp-aside .engagement-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 12px;
}
.pdp-aside .eng-btn {
    padding: .42rem .55rem;
    font-size: .78rem;
    gap: .28rem;
    min-width: 0;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.pdp-aside .eng-btn .eng-icon { font-size: .9rem; }
.pdp-aside .eng-btn .eng-count { font-size: .78rem; }

/* Make sure the WhatsApp / Call / Save buttons in the aside stay full-width
 * inside the seller card (overrides any rogue width from .pdp-btn). */
.pdp-seller-card .pdp-btn,
.pdp-seller-card .btn { width: 100%; }

/* Guest-gating sign-in CTAs — a softer outline button so the page
 * doesn't scream "you can't do anything"; it gently invites the
 * visitor to register. */
.pdp-btn-guest {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: 12px 18px;
    border-radius: 10px;
    background: #fff;
    border: 1.5px dashed var(--green-700);
    color: var(--green-800);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    transition: background .15s, border-color .15s, transform .15s;
    cursor: pointer;
}
.pdp-btn-guest:hover {
    background: var(--green-50);
    border-color: var(--green-800);
    color: var(--green-900);
    transform: translateY(-1px);
}
.pdp-btn-guest-block { width: 100%; }
.pdp-btn-guest svg { width: 14px; height: 14px; }

.pdp-guest-panel {
    margin-top: 12px;
    padding: 18px 16px;
    border-radius: 12px;
    border: 1.5px dashed var(--green-300, #b6e2ce);
    background: linear-gradient(180deg, #fff, var(--green-50));
    text-align: center;
}
.pdp-guest-panel-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--green-900);
    margin: 0 0 4px;
}
.pdp-guest-panel-sub {
    font-size: .85rem;
    color: var(--ink-3, #475569);
    margin: 0 0 12px;
}

/* End CHUNK 7 ==================================================== */

/* ---- CHUNK 8: 4-per-row grid + premium pill + PDP image fit (2026-05-17) ----
 *
 * Spec from user:
 *   1. Homepage / category / subcategory pages should show exactly 4
 *      cards per row on desktop, like jiji. Tablet stays at 3, mobile
 *      stays at 2 (unchanged from earlier chunks).
 *   2. Premium badge in addition to Verified badge on top of the card
 *      image. Premium = gold, Verified = green. Both rendered when the
 *      seller's user.is_premium=1 AND seller_profile.is_verified=1.
 *   3. PDP gallery image must fit the placeholder so the product is
 *      visible — switched from object-fit:contain (dark green letterbox)
 *      to object-fit:cover with center positioning. Matches jiji.
 */

/* ---- 1) Force 4 columns on desktop, 3 on tablet, 2 on mobile ---- */
/* These rules come AFTER the legacy media-query stack at lines 2191-2194
 * (3/4/5/6 columns at progressively wider viewports) so they win the
 * cascade. We pin to 4 cards/row across all desktop widths because cards
 * already widen via flex-1; more than 4 makes them too small. */
@media (min-width: 900px) {
    .grid-products,
    .grid-products-feed {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }
}
@media (min-width: 1200px) {
    /* Override the legacy 5-column rule at this breakpoint */
    .grid-products,
    .grid-products-feed {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px;
    }
}
@media (min-width: 1500px) {
    /* Override the legacy 6-column rule too */
    .grid-products,
    .grid-products-feed {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
    }
}
/* Tablet (640-899px): keep 3 columns (already set by line 2191) — confirm here. */
@media (min-width: 640px) and (max-width: 899px) {
    .grid-products,
    .grid-products-feed {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }
}

/* ---- 2) Premium pill (gold) styling, side by side with Verified ---- */
/* The .trust-pill base style is already defined in main.css; we add
 * type-specific colors and an icon-size tweak. */
.trust-pill {
    background: rgba(255, 255, 255, .95);
    color: var(--ink-2, #334155);
}
.trust-pill svg { width: 11px; height: 11px; flex-shrink: 0; }
.trust-pill-premium {
    background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-600) 100%);
    color: #2a1c00;
    box-shadow: 0 1px 5px rgba(212, 160, 23, .35);
}
.trust-pill-verified {
    background: rgba(255, 255, 255, .95);
    color: var(--green-800);
}
.trust-pill-verified svg { color: var(--green-700); }

/* The trust-strip in a 4-card grid is more cramped, so let pills
 * stack onto a second line if needed, and keep them readable. */
.product-card .trust-strip {
    gap: 4px;
    right: 36px;
    max-width: calc(100% - 42px); /* leave room for the heart save btn */
}

/* On phone, pills shrink so the card thumb (which is narrower in the
 * 2-column grid) doesn't get crowded. */
@media (max-width: 640px) {
    .product-card .trust-pill {
        font-size: .58rem;
        padding: 1px 5px;
        gap: 2px;
    }
    .product-card .trust-pill svg { width: 8px; height: 8px; }
}

/* ---- 3) PDP gallery image fit — cover instead of contain ---- */
/* Old behavior: image scaled inside the placeholder with dark green
 * letterbox bars when the photo aspect ratio didn't match. New: image
 * fills the entire placeholder, centered, so the product is always
 * visible at full size. Matches jiji's PDP layout. */
.pdp-gallery {
    background: #f1f5f4;       /* light grey backdrop for the rare case
                                 * cover doesn't fill (e.g. broken image) */
}
.pdp-gallery img {
    object-fit: cover;
    object-position: center center;
    background: transparent;
}

/* Thumbnail strip — same treatment so the small thumbnails crop
 * consistently with the main image. */
.pdp-thumb img {
    object-fit: cover;
    object-position: center center;
}

/* End CHUNK 8 ==================================================== */

/* ---- CHUNK 9: PDP image visibility + 10-image cap (2026-05-17) ----
 *
 * The previous chunk's switch from contain → cover was wrong direction
 * for the PDP main image: it cropped portrait phone photos so badly
 * that only the top of the car was visible. Reverting to `contain` so
 * the full product is always shown, like jiji.
 *
 * Also tightening the placeholder aspect ratio to 4/3 across all
 * screens (was 16/10 on desktop). 4/3 is closer to typical phone-
 * camera output, so most photos fit with minimal letterbox.
 */
.pdp-gallery {
    aspect-ratio: 4 / 3;
    background: #f1f5f4;  /* subtle light-grey backdrop for any letterbox */
}
@media (min-width: 700px) {
    /* Keep 4/3 on desktop too — was 16/10 which was too wide for
     * portrait-oriented seller photos. */
    .pdp-gallery { aspect-ratio: 4 / 3; }
}
.pdp-gallery img {
    object-fit: contain;
    object-position: center center;
    background: transparent;
}

/* Thumbnails stay on cover — they're tiny so a clean fill looks better
 * than letterbox shrunk to thumb size. */
.pdp-thumb img {
    object-fit: cover;
    object-position: center center;
}

/* End CHUNK 9 ==================================================== */

/* ---- CHUNK 10: fav-btn scoping + adaptive gallery (2026-05-17) ----
 *
 * BUG: .fav-btn at line 418 is a generic rule with position:absolute
 * meant for the heart-button overlay on product card thumbnails.
 * Unfortunately the PDP "Save" button also uses .fav-btn (so it can
 * share the click handler in main.js for favorite-toggling), which
 * means it inherits the absolute positioning and turns into a 36px
 * floating circle hovering over the seller info card — exactly the
 * bug the user reported.
 *
 * Fix: scope-override .fav-btn back to a normal block button when it
 * appears inside the PDP seller card OR is combined with .btn (which
 * is how the Save button is rendered: class="btn btn-ghost btn-block
 * fav-btn"). The two-selector list is safer than relying on either
 * one alone.
 */
.pdp-seller-card .fav-btn,
.btn.fav-btn {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 10px;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
    padding: 10px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 600;
    font-size: .9rem;
    color: var(--ink-2);
    border: 1px solid var(--line);
    margin-top: 4px;
}
.pdp-seller-card .fav-btn svg,
.btn.fav-btn svg {
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
    stroke: none !important;
    margin-right: 4px;
}
.pdp-seller-card .fav-btn.on,
.btn.fav-btn.on {
    color: #be1357;
    background: rgba(224, 45, 111, .08);
    border-color: rgba(224, 45, 111, .3);
}
.pdp-seller-card .fav-btn:hover,
.btn.fav-btn:hover {
    background: var(--bg);
    transform: none;
}

/* Hide ANY .fav-btn that may have somehow ended up directly inside
 * .pdp-aside but outside the seller card — defensive net so the bug
 * cannot reappear in other layouts. */
.pdp-aside > .fav-btn {
    display: none;
}

/* ---- Adaptive gallery aspect ratio --------------------------------
 *
 * The 4/3 fixed placeholder makes some close-up photos feel "too wide"
 * because they leave subtle gaps the eye reads as crop. By switching
 * to a default 4/3 but letting JS swap to the photo's natural ratio
 * on load (clamped between 3/4 portrait and 16/9 landscape so neither
 * extreme breaks the page), every photo now fills its placeholder
 * cleanly.
 */
.pdp-gallery {
    transition: aspect-ratio .2s ease;
}

/* End CHUNK 10 ==================================================== */

/* ---- CHUNK 11: fixed gallery size, cover-fit positioning (2026-05-17) ----
 *
 * Reverts the per-image dynamic aspect-ratio from Chunk 10 (and the
 * contain fit from Chunk 9). User's spec:
 *
 *   "All preview will have the same size as usual but follow my rule
 *    for better display."
 *
 * Rule: every photo fills its frame with the product centered (like
 * the small thumbnail strip below, which the user said looks good).
 *
 * Tools used:
 *   - Fixed aspect-ratio: 4 / 3 on the .pdp-gallery container (no JS
 *     adjustment per image — every slot is the SAME size).
 *   - object-fit: cover so the photo fills the frame edge-to-edge,
 *     no grey letterbox bars.
 *   - object-position: center center so the central portion of the
 *     photo (where sellers typically frame the product) is what shows
 *     when the photo's aspect ratio doesn't match 4:3.
 *
 * Removes the .pdp-gallery transition added in Chunk 10 (no need
 * since the size never changes now).
 */
.pdp-gallery {
    aspect-ratio: 4 / 3;
    transition: none;
    background: #f1f5f4;
}
@media (min-width: 700px) {
    .pdp-gallery { aspect-ratio: 4 / 3; }  /* explicit override of any prior 16/10 rule */
}
.pdp-gallery img {
    object-fit: cover;
    object-position: center center;
    background: transparent;
}

/* End CHUNK 11 ==================================================== */

/* ============================================================
 * CHUNK 12 — Inbox/Notifications utility row + pagination meta
 * (2026-05-15 update bundle)
 *
 * Adds:
 *  - .inbox-toolbar  : header row that sits above an inbox card,
 *                      holding the "Clear all" button and counts.
 *  - .pagination-meta: small line under paginate_links() showing
 *                      "Showing X–Y of Z (history capped to 3 pages)".
 *  - .pagination-cap-note : neutral notice rendered when a history
 *                      view has hit the 3-page cap.
 * ============================================================ */
.inbox-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0 0 12px;
    flex-wrap: wrap;
}
.inbox-toolbar .inbox-toolbar-info {
    margin-right: auto;
    color: var(--muted);
    font-size: .86rem;
}
.inbox-toolbar .btn-clear-inbox {
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink-2);
    padding: 7px 14px;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s var(--ease-out);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.inbox-toolbar .btn-clear-inbox:hover {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}
.inbox-toolbar .btn-clear-inbox:disabled,
.inbox-toolbar .btn-clear-inbox[aria-disabled="true"] {
    opacity: .5; cursor: not-allowed;
}

.pagination-meta {
    display: flex;
    justify-content: center;
    color: var(--muted);
    font-size: .82rem;
    margin-top: 8px;
}
.pagination-cap-note {
    margin: 14px 0 0;
    padding: 10px 14px;
    background: var(--bg);
    border: 1px dashed var(--line-2);
    border-radius: 10px;
    color: var(--muted);
    font-size: .85rem;
    text-align: center;
}

/* ============================================================
 * CHUNK 13 — Email Templates admin redesign (preview pane)
 * (2026-05-15 update bundle)
 * ============================================================ */
.et-shell {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
@media (min-width: 1100px) {
    .et-shell { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: start; }
}
.et-list-card { padding: 0; overflow: hidden; }
.et-list-card .et-list-head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line-2);
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
}
.et-list-card .et-list-head h2 { margin: 0; font-size: 1rem; }
.et-list-card .et-list { list-style: none; margin: 0; padding: 0; max-height: 560px; overflow-y: auto; }
.et-list-card .et-list li {
    border-bottom: 1px solid var(--line-2);
}
.et-list-card .et-list li:last-child { border-bottom: 0; }
.et-list-card .et-list button.et-list-row {
    display: flex; width: 100%; align-items: flex-start; gap: 10px;
    background: transparent; border: 0; text-align: left; cursor: pointer;
    padding: 12px 16px;
    transition: background .12s;
}
.et-list-card .et-list button.et-list-row:hover { background: var(--bg); }
.et-list-card .et-list button.et-list-row.on {
    background: var(--green-50);
    border-left: 3px solid var(--green-600);
    padding-left: 13px;
}
.et-list-row .et-list-name { display: block; font-weight: 600; color: var(--ink); font-size: .94rem; }
.et-list-row .et-list-slug { display: block; font-size: .76rem; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin-top: 1px; }
.et-list-row .et-list-tags { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.et-list-row .et-list-tags .badge { font-size: .62rem; padding: 2px 7px; }

.et-edit-shell {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 1280px) {
    .et-edit-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.et-tabs {
    display: inline-flex; gap: 4px; padding: 4px;
    background: var(--bg); border-radius: 10px; margin-bottom: 12px;
}
.et-tabs button {
    background: transparent; border: 0; cursor: pointer;
    padding: 7px 14px; border-radius: 7px;
    font-size: .84rem; font-weight: 600; color: var(--muted);
}
.et-tabs button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.et-pane { display: none; }
.et-pane.on { display: block; }
.et-preview-frame {
    width: 100%;
    min-height: 560px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f3f4f6;
}
.et-preview-meta {
    display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap;
    font-size: .85rem;
}
.et-preview-meta .et-preview-subject {
    font-weight: 700; color: var(--ink);
}
.et-preview-mode-toggle {
    display: inline-flex; gap: 4px; padding: 3px;
    background: var(--bg); border-radius: 8px;
}
.et-preview-mode-toggle label {
    padding: 4px 10px; border-radius: 6px; cursor: pointer;
    font-size: .78rem; font-weight: 600; color: var(--muted);
}
.et-preview-mode-toggle input { display: none; }
.et-preview-mode-toggle input:checked + span { color: var(--ink); }
.et-preview-mode-toggle label:has(input:checked) { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.et-merge-tags {
    background: var(--bg);
    border: 1px solid var(--line-2);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: .82rem;
    color: var(--muted);
    margin-top: 10px;
}
.et-merge-tags code {
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: .78rem;
    color: var(--ink-2);
    margin: 0 2px;
    cursor: pointer;
}
.et-merge-tags code:hover { background: var(--green-50); color: var(--green-800); }

/* End CHUNK 13 ==================================================== */

/* ============================================================
 * CHUNK 14 — Cookies banner + footer socials + admin polish
 * (2026-05-17 update bundle)
 * ============================================================ */

/* ---- Cookies banner (bottom-sticky, slides up) ---- */
.cookies-banner {
    position: fixed;
    left: 12px; right: 12px; bottom: 12px;
    z-index: 9000;
    background: var(--ink);
    color: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
    transform: translateY(140%);
    transition: transform .35s var(--ease-out);
    border: 1px solid rgba(255,255,255,.08);
}
.cookies-banner.is-visible {
    transform: translateY(0);
}
.cookies-banner-inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 22px;
}
@media (min-width: 760px) {
    .cookies-banner { left: 24px; right: 24px; bottom: 24px; max-width: 1100px; margin: 0 auto; }
    .cookies-banner-inner { flex-direction: row; align-items: center; }
}
.cookies-banner-body { flex: 1; min-width: 0; }
.cookies-banner-title {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--gold-400, #e9bd44);
}
.cookies-banner-msg {
    margin: 0;
    font-size: .89rem;
    line-height: 1.5;
    color: rgba(255,255,255,.85);
}
.cookies-banner-link {
    color: var(--gold-400, #e9bd44);
    text-decoration: underline;
    margin-left: 4px;
}
.cookies-banner-link:hover { color: #fff; }
.cookies-banner-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}
.cookies-banner-actions .btn {
    white-space: nowrap;
}
.cookies-banner-actions .btn-ghost {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
}
.cookies-banner-actions .btn-ghost:hover {
    background: rgba(255,255,255,.16);
}

/* ---- Footer social icon row (renders when admin enables socials) ---- */
.footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0 10px;
}
.footer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: #fff !important;
    transition: background .15s var(--ease-out), transform .15s var(--ease-out);
    text-decoration: none !important;
}
.footer-socials a:hover {
    background: var(--gold-500, #d4a017);
    color: var(--ink) !important;
    transform: translateY(-2px);
}
.footer-socials a svg {
    width: 18px; height: 18px;
    stroke: currentColor;
    fill: currentColor;
}
.footer-socials-heading {
    display: block;
    margin-bottom: 10px;
    font-size: .85rem;
    font-weight: 700;
    color: rgba(255,255,255,.65);
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* ---- Admin form polish: section blocks + switches ---- */
.admin-form-section {
    border-top: 1px solid var(--line-2);
    padding-top: 16px;
    margin-top: 16px;
}
.admin-form-section:first-of-type {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}
.admin-form-section h3 {
    margin: 0 0 4px;
    font-size: 1rem;
    color: var(--ink);
}
.admin-form-section .field-hint {
    color: var(--muted);
    font-size: .82rem;
    margin: 0 0 12px;
}

/* Small social-icon preview chips inside the admin /social-links page */
.social-link-row {
    display: grid;
    grid-template-columns: 44px 1fr 100px;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--line-2);
    border-radius: 10px;
    background: #fff;
    margin-bottom: 8px;
}
.social-link-row .social-icon-preview {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg);
    color: var(--ink-2);
}
.social-link-row .social-icon-preview svg { width: 18px; height: 18px; }
.social-link-row.is-enabled .social-icon-preview {
    background: var(--green-50);
    color: var(--green-700);
}
.social-link-row input[type="url"],
.social-link-row input[type="text"] {
    width: 100%;
}
.social-link-row .switch-cell {
    text-align: right;
}

/* End CHUNK 14 ==================================================== */

/* ============================================================
 * CHUNK 15 — Advanced SEO admin page
 * (2026-05-18 update bundle)
 * ============================================================ */

/* The SEO admin uses the existing .tabs / .tab classes but adds
 * its own pane visibility rules (admin/settings uses different
 * data attribute names). */
.seo-tabs {
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--line-2);
    padding-bottom: 4px;
}
.seo-pane { display: none; }
.seo-pane.on { display: block; }

.seo-pane .admin-form-section + .admin-form-section {
    margin-top: 22px;
}
.seo-pane .field-hint {
    font-size: .85rem;
    color: var(--muted);
    margin: 4px 0 12px;
    line-height: 1.5;
}
.seo-pane .field-hint code {
    background: var(--bg);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: .85em;
}

/* OG preview — mimics how WhatsApp / Facebook renders a link card. */
.og-preview {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line-2);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    max-width: 520px;
    margin-top: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.og-preview-img {
    width: 100%;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
    background: var(--bg);
    display: block;
}
.og-preview-body {
    padding: 14px 16px;
    background: #f8fafc;
    border-top: 1px solid var(--line-2);
}
.og-preview-domain {
    text-transform: uppercase;
    color: var(--muted);
    font-size: .72rem;
    letter-spacing: .04em;
    margin-bottom: 4px;
}
.og-preview-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 4px;
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.og-preview-desc {
    font-size: .88rem;
    color: var(--ink-2);
    line-height: 1.45;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Per-URL override list — accordion rows */
.seo-override-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.seo-override-row {
    border: 1px solid var(--line-2);
    border-radius: 10px;
    padding: 12px 14px;
    background: #fff;
    transition: background .15s var(--ease-out);
}
.seo-override-row.is-inactive {
    background: var(--bg);
    opacity: .75;
}
.seo-override-row > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.seo-override-row > summary::-webkit-details-marker { display: none; }
.seo-override-row > summary::before {
    content: '▸';
    color: var(--muted);
    transition: transform .15s var(--ease-out);
    display: inline-block;
}
.seo-override-row[open] > summary::before {
    transform: rotate(90deg);
}
.seo-override-row > summary code {
    background: var(--green-50);
    color: var(--green-700);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: .88rem;
}
.seo-override-form {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line-2);
}

.seo-add-override .form-actions {
    margin-top: 8px;
}

/* Tools grid — 8 quick-link cards */
.seo-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 6px;
}
.seo-tool-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid var(--line-2);
    border-radius: 10px;
    text-decoration: none !important;
    color: inherit;
    background: #fff;
    transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out), transform .15s var(--ease-out);
}
.seo-tool-card:hover {
    border-color: var(--green-700);
    box-shadow: 0 4px 10px rgba(11,122,58,.08);
    transform: translateY(-1px);
}
.seo-tool-card strong {
    color: var(--ink);
    font-size: .95rem;
}
.seo-tool-card span {
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.5;
}

/* Code-style textarea for JSON-LD / custom blobs */
.seo-pane textarea.code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85rem;
    line-height: 1.5;
}

/* End CHUNK 15 ==================================================== */

/* ============================================================
 * CHUNK 16 — AI subsystem (spinner overlay + buttons)
 * (2026-05-19 update bundle)
 *
 * Spinner has three layers:
 *   - .tm-ai-overlay      : fixed full-viewport dim
 *   - .tm-ai-card         : centered glassy card
 *   - .tm-ai-orbit + dots : the orbiting dots animation
 *   - .tm-ai-text-stack   : rotating message lines (crossfade)
 *
 * AI buttons in admin forms get .btn-ai — gradient + sparkle.
 * ============================================================ */

/* ---------- Overlay ---------- */
.tm-ai-overlay {
    position: fixed;
    inset: 0;
    background: rgba(11, 25, 41, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s var(--ease-out);
}
.tm-ai-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* ---------- Card ---------- */
.tm-ai-card {
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    border-radius: 20px;
    padding: 36px 44px 28px;
    min-width: 320px;
    max-width: 90vw;
    text-align: center;
    box-shadow:
        0 24px 60px -12px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.6) inset;
    transform: translateY(20px) scale(.96);
    opacity: 0;
    transition: transform .35s var(--ease-out), opacity .25s var(--ease-out);
}
.tm-ai-overlay.is-visible .tm-ai-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* ---------- Orbiting dots ---------- */
.tm-ai-orbit {
    position: relative;
    width: 72px;
    height: 72px;
    margin: 0 auto 22px;
}
.tm-ai-core {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    animation: tm-ai-pulse 1.4s ease-in-out infinite;
}
.tm-ai-dot {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    margin: -7px 0 0 -7px;
    background: var(--green-700, #0b7a3a);
    animation: tm-ai-orbit 1.6s linear infinite;
}
.tm-ai-dot--1 { animation-delay: 0s;     background: var(--green-700, #0b7a3a); }
.tm-ai-dot--2 { animation-delay: -.53s;  background: var(--gold-500, #d4a017); }
.tm-ai-dot--3 { animation-delay: -1.07s; background: #6366f1; }

@keyframes tm-ai-orbit {
    0%   { transform: rotate(0deg)   translateX(30px) rotate(0deg);   opacity: .9; }
    50%  { transform: rotate(180deg) translateX(30px) rotate(-180deg); opacity: 1; }
    100% { transform: rotate(360deg) translateX(30px) rotate(-360deg); opacity: .9; }
}
@keyframes tm-ai-pulse {
    0%,100% { transform: scale(1);    opacity: 1; }
    50%     { transform: scale(1.18); opacity: .85; }
}

/* ---------- Text stack (rotating messages) ---------- */
.tm-ai-text-stack {
    position: relative;
    min-height: 28px;
    overflow: hidden;
}
.tm-ai-text {
    display: block;
    font-size: 1.02rem;
    font-weight: 500;
    color: var(--ink, #1f2937);
    line-height: 1.4;
    transition: transform .55s var(--ease-out), opacity .55s var(--ease-out);
    will-change: transform, opacity;
}
.tm-ai-text--in    { transform: translateY(0);    opacity: 1; position: absolute; left: 0; right: 0; }
.tm-ai-text--enter { transform: translateY(14px); opacity: 0; position: absolute; left: 0; right: 0; }
.tm-ai-text--exit  { transform: translateY(-14px); opacity: 0; position: absolute; left: 0; right: 0; }
/* When only one text exists, drop the absolute positioning so the
   stack has a natural height. */
.tm-ai-text-stack > .tm-ai-text:only-child {
    position: relative;
}

.tm-ai-cancel {
    margin-top: 14px;
    background: transparent;
    border: 1px solid var(--line-2, #e5e7eb);
    border-radius: 8px;
    padding: 6px 12px;
    color: var(--muted, #6b7280);
    cursor: pointer;
    font-size: .85rem;
}
.tm-ai-cancel:hover { color: var(--ink, #1f2937); }

/* ---------- AI buttons in admin forms ---------- */
.btn-ai {
    background: linear-gradient(135deg, #6366f1 0%, #0b7a3a 100%);
    color: #ffffff !important;
    border: 0;
    padding: 6px 14px;
    font-size: .82rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25);
    transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.btn-ai:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.35);
}
.btn-ai:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.btn-ai::before {
    content: '✨';
    font-size: .95em;
}

/* Field-level AI button: sits as an inline header above a control. */
.ai-field-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    gap: 8px;
}
.ai-field-row label,
.ai-field-row strong {
    font-weight: 600;
    color: var(--ink, #1f2937);
    font-size: .9rem;
}

/* ---------- /admin/ai page ---------- */
.ai-key-status {
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: .92rem;
}
.ai-key-status--ok      { background: var(--green-50, #f0fdf4); color: var(--green-900, #0b3d2e); border: 1px solid #bbf7d0; }
.ai-key-status--missing { background: #fef3c7;                  color: #92400e;                  border: 1px solid #fde68a; }
.ai-key-status code     { background: rgba(0,0,0,.06); padding: 1px 6px; border-radius: 4px; }

.ai-model-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}
.ai-model-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line-2);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.ai-model-row:hover { border-color: var(--green-700, #0b7a3a); }
.ai-model-row.is-selected {
    border-color: var(--green-700, #0b7a3a);
    background: var(--green-50, #f0fdf4);
}
.ai-model-row input[type="radio"] {
    margin: 0;
    width: 16px; height: 16px;
}
.ai-model-meta { flex: 1; min-width: 0; }
.ai-model-slug {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .82rem;
    color: var(--green-700, #0b7a3a);
    margin-bottom: 2px;
}
.ai-model-label {
    color: var(--ink-2, #4b5563);
    font-size: .88rem;
}

/* End CHUNK 16 ==================================================== */

/* ============================================================
 * CHUNK 17 — Polish fixes (2026-05-20)
 * ============================================================
 *
 * 1. Larger header icon button (chunk-3 home icon felt too small
 *    next to the Feed/Browse links).
 * 2. Belt-and-braces for the .grid-2 cascade on admin forms.
 * 3. sr-only utility for screen-reader-only labels.
 * 4. .admin-form-section padding tweaks to feel more like the
 *    chunk-3 admin pages do.
 * ============================================================ */

/* Bigger header icon — the chunk-3 home icon was visually small
 * next to text links, especially on retina. Bumped from 38x38 /
 * 19px svg to 42x42 / 22px svg, with a subtle weight bump on
 * the SVG strokes so it reads at the new size. */
.header-icon-btn {
    width: 42px;
    height: 42px;
}
.header-icon-btn svg {
    width: 22px;
    height: 22px;
    stroke-width: 2.2;
}

/* Force .grid-2 to behave as a grid even on browsers that may
 * already have CSS cached from before the 2026-05-20 fix. This is
 * a no-op on a fresh load (the rule at line ~335 already does this
 * since chunk 6) but stops legacy caches from breaking layouts. */
form.grid-2,
.card > .grid-2,
.admin-form-section > .grid-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 700px) {
    form.grid-2,
    .card > .grid-2,
    .admin-form-section > .grid-2 {
        grid-template-columns: 1fr;
    }
}

/* Make grid-2-span always work even when its parent's display
 * isn't grid (e.g. older browsers, cached CSS). Falls back to
 * full-width block. */
.grid-2-span {
    grid-column: 1 / -1;
    display: block;
    width: 100%;
}

/* The .admin-form-section was added in Chunk 3 but lacked a
 * fallback when wrapped inside .card with no top-padding.
 * Adds proper spacing between consecutive sections. */
.admin-form-section h3 {
    margin: 0 0 6px;
    font-size: 1rem;
    color: var(--ink, #1f2937);
}

/* Screen-reader-only legend (for the rewritten sub-admins
 * permissions fieldset where the legend would otherwise duplicate
 * the visible h3 above it). */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* End CHUNK 17 ==================================================== */

/* ============================================================
 * CHUNK 18 — Verify page resend animations (2026-05-20)
 *
 * The resend button on /verify now does an AJAX POST instead of
 * a full page submit. While the request is in flight we show a
 * tiny inline spinner + rotating text inside the button itself,
 * and an inline toast below the form for the result.
 *
 * Designed to feel "alive" — sub-2-second responses get a held
 * spinner so the animation actually plays.
 * ============================================================ */

/* Spinner that sits inside the resend button while loading */
.resend-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(11, 122, 58, 0.25);
    border-top-color: var(--green-700, #0b7a3a);
    border-radius: 50%;
    animation: resend-spin .8s linear infinite;
    margin-right: 8px;
    vertical-align: -2px;
}
@keyframes resend-spin {
    to { transform: rotate(360deg); }
}

/* Rotating text inside the button — fades up/down */
.resend-rotating-text {
    display: inline-block;
    transition: opacity .18s ease, transform .18s ease;
}
.resend-rotating-text.is-leaving {
    opacity: 0;
    transform: translateY(-4px);
}

/* Button state styles */
#verify-resend-btn.is-loading {
    background: rgba(11, 122, 58, 0.06);
    color: var(--green-700, #0b7a3a);
    cursor: progress;
}
#verify-resend-btn.is-cooldown {
    opacity: .65;
    cursor: not-allowed;
}
#verify-resend-btn .resend-icon {
    display: inline-block;
    transition: transform .4s ease;
}
#verify-resend-btn:hover:not(.is-loading):not(.is-cooldown) .resend-icon {
    transform: rotate(-180deg);
}

/* Inline toast that shows the resend result */
.verify-resend-toast {
    margin: 14px auto 0;
    max-width: 440px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: .9rem;
    text-align: center;
    animation: resend-toast-in .25s ease-out;
}
.verify-resend-toast--success {
    background: #f0fdf4;
    color: #065f46;
    border: 1px solid #bbf7d0;
}
.verify-resend-toast--error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}
.verify-resend-toast--info {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}
@keyframes resend-toast-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* End CHUNK 18 ==================================================== */

/* ============================================================
 * CHUNK 19 — Product gallery: nav arrows + pan stage + zoom slider
 * (2026-05-13 update, revised)
 *
 * Stacked on top of chunk-11's gallery rules. The image inside the
 * stage is sized at upload-time by JS to its natural pixel
 * dimensions and then transformed with a baseScale × userScale so
 * pan-and-zoom can reveal the pixels that object-fit:cover would
 * normally crop. This file keeps the CSS thin — the JS owns image
 * sizing — but pins down:
 *
 *   - .pdp-gallery-stage     : the absolute-positioned, overflow-
 *                              clipped frame the image lives inside.
 *   - .pdp-gallery-nav       : the prev/next chevron buttons. White
 *                              circle with dark icon and prominent
 *                              shadow so they read against any photo.
 *                              z-index: 12 keeps them above the stage
 *                              and any future overlays.
 *   - .pdp-gallery-zoom-hint : the ephemeral usage tip that fades
 *                              after first interaction (or 5s).
 *   - .pdp-zoom-bar          : the persistent zoom slider that sits
 *                              between the main image and the thumb
 *                              strip — −/+ icon buttons, range
 *                              input, percentage readout, and reset.
 * ============================================================ */

/* Stage = the overflow-clipped 4:3 frame inside .pdp-gallery */
.pdp-gallery { user-select: none; }
.pdp-gallery-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    cursor: default;
    z-index: 1;
}
.pdp-gallery-stage.is-pannable { cursor: grab; }
.pdp-gallery-stage.is-grabbing,
.pdp-gallery-stage.is-grabbing.is-pannable { cursor: grabbing; }

/* The cover image inside the stage. JS sets width/height/position/
 * transform inline at load time; the rules below are just for
 * smoothness and to neutralise any object-fit/100% inherited from
 * earlier chunks. */
.pdp-gallery-stage > img {
    transition: transform .15s ease-out;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: auto;
    display: block;
    background: transparent;
    transform-origin: center center;
}
.pdp-gallery-stage.is-grabbing > img { transition: none; }

/* ---- Prev/next chevron buttons ----
 * Designed to be unmistakeable on top of any photo. White circle,
 * dark slate chevron, soft shadow, generous tap target. We push
 * z-index up to 12 so nothing else in the gallery overlays them. */
.pdp-gallery-nav {
    position: absolute;
    top: 50%;
    left: auto;
    right: auto;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 0;
    background: rgba(255, 255, 255, 0.95);
    color: #0f172a;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 1;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
    z-index: 12;
    padding: 0;
    visibility: visible;
    -webkit-appearance: none;
            appearance: none;
}
.pdp-gallery-nav svg { display: block; }
.pdp-gallery-nav:hover {
    background: #ffffff;
    transform: translateY(-50%) scale(1.07);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}
.pdp-gallery-nav:active { transform: translateY(-50%) scale(0.96); }
.pdp-gallery-nav:focus-visible { outline: 3px solid #0b3d2e; outline-offset: 2px; }
.pdp-gallery-prev { left: 14px; }
.pdp-gallery-next { right: 14px; }

@media (max-width: 480px) {
    .pdp-gallery-nav { width: 38px; height: 38px; }
    .pdp-gallery-prev { left: 8px; }
    .pdp-gallery-next { right: 8px; }
    .pdp-gallery-nav svg { width: 20px; height: 20px; }
}

/* ---- Zoom-hint pill ---- */
.pdp-gallery-zoom-hint {
    position: absolute;
    right: 12px;
    top: 12px;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 500;
    display: -webkit-inline-flex;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: 0.95;
    pointer-events: none;
    transition: opacity .4s ease;
    z-index: 3;
}
.pdp-gallery-zoom-hint.is-fading { opacity: 0; }
@media (max-width: 600px) {
    .pdp-gallery-zoom-hint span { display: none; }
    .pdp-gallery-zoom-hint { padding: 6px; }
}

/* Counter inside the existing .pdp-gallery-count pill.
 * The pill itself needs to outrank .pdp-gallery-stage (z-index: 1)
 * which was added in this chunk and would otherwise cover the
 * counter. .pdp-gallery-count is defined in chunk 2 with
 * position:absolute but no z-index — so it computed to auto and
 * lost to the new stage. Lifting it to 3 puts it on the same plane
 * as the zoom-hint pill, both safely above the stage and below the
 * nav buttons (z-index: 12). */
.pdp-gallery-count {
    z-index: 3;
}
.pdp-gallery-count #pdp-gallery-counter { font-variant-numeric: tabular-nums; }

/* ---- Zoom slider bar (between gallery & thumbnails) ----
 *
 * Sleek rounded pill with: zoom-out btn · range slider · % readout ·
 * zoom-in btn · reset btn. The range input is styled cross-browser
 * (WebKit + Gecko) to look like a soft track with a green pill thumb. */
.pdp-zoom-bar {
    display: -webkit-flex;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 8px 14px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.pdp-zoom-btn {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #0f172a;
    display: -webkit-inline-flex;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .1s;
    flex: 0 0 auto;
}
.pdp-zoom-btn:hover { background: #f1f5f9; border-color: #9ca3af; }
.pdp-zoom-btn:active { transform: scale(0.94); }
.pdp-zoom-btn:focus-visible { outline: 2px solid #0b3d2e; outline-offset: 2px; }

.pdp-zoom-value {
    min-width: 44px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #334155;
    text-align: center;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}

.pdp-zoom-reset {
    display: -webkit-inline-flex;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #0f172a;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    flex: 0 0 auto;
}
.pdp-zoom-reset:hover { background: #f1f5f9; border-color: #9ca3af; }
.pdp-zoom-reset:focus-visible { outline: 2px solid #0b3d2e; outline-offset: 2px; }

/* Range input — styled track + thumb across WebKit, Gecko */
.pdp-zoom-slider {
    -webkit-appearance: none;
            appearance: none;
    flex: 1 1 auto;
    height: 6px;
    background: transparent;
    cursor: pointer;
    padding: 0;
    margin: 0;
    min-width: 80px;
}
.pdp-zoom-slider:focus { outline: none; }
.pdp-zoom-slider::-webkit-slider-runnable-track {
    height: 6px;
    background: linear-gradient(to right, #0b3d2e, #16a34a);
    border-radius: 999px;
    border: 1px solid #d1d5db;
}
.pdp-zoom-slider::-moz-range-track {
    height: 6px;
    background: linear-gradient(to right, #0b3d2e, #16a34a);
    border-radius: 999px;
    border: 1px solid #d1d5db;
}
.pdp-zoom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
            appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #0b3d2e;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    margin-top: -7px;
    cursor: grab;
    transition: transform .12s;
}
.pdp-zoom-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #0b3d2e;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    cursor: grab;
    transition: transform .12s;
}
.pdp-zoom-slider::-webkit-slider-thumb:active { transform: scale(1.15); cursor: grabbing; }
.pdp-zoom-slider::-moz-range-thumb:active     { transform: scale(1.15); cursor: grabbing; }
.pdp-zoom-slider:focus-visible::-webkit-slider-thumb { outline: 2px solid #16a34a; outline-offset: 2px; }
.pdp-zoom-slider:focus-visible::-moz-range-thumb     { outline: 2px solid #16a34a; outline-offset: 2px; }

@media (max-width: 480px) {
    .pdp-zoom-bar { padding: 7px 10px; gap: 8px; }
    .pdp-zoom-reset span { display: none; }
    .pdp-zoom-reset { padding: 0 8px; }
}

/* End CHUNK 19 ==================================================== */

/* =====================================================================
   CHUNK 20 — Eligibility Checklist v2 widgets (2026-05-14)
   --------------------------------------------------------------------
   Styles for:
     • Seller-facing doc upload cards (Ghana Card / Passport / Form A /
       Business Cert) — switcher, dropzones, preview, progress bar.
     • Admin checklist manager rows (active + coming-soon).
     • Admin doc grid (recent uploads on /admin/verification-checklist
       and inline preview on each request card in /admin/verifications).
   Reuses existing tokens (var(--ink), --line, --gold-*, --green-*,
   --bg-2, --grad-primary, etc.) so it stays in the same visual
   language as the rest of the dashboard.
   ===================================================================== */

/* ---------- Seller: doc upload cards ---------- */
.doc-upload-card { /* uses base .card spacing — only extra surface here */ }
.doc-upload-form + .doc-upload-form { margin-top: 16px; }

.doc-type-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 4px;
}
.doc-type-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--line);
    background: var(--bg-2);
    cursor: pointer;
    transition: border-color .2s var(--ease-out), background .2s;
}
.doc-type-option input { position: absolute; opacity: 0; pointer-events: none; }
.doc-type-option span { font-weight: 600; color: var(--ink); font-size: .96rem; }
.doc-type-option small { color: var(--ink-2); font-size: .82rem; }
.doc-type-option.is-active {
    border-color: var(--gold-500, var(--gold-400));
    background: linear-gradient(0deg, rgba(212, 160, 23, .06), rgba(212, 160, 23, .06)), var(--bg-2);
    box-shadow: 0 0 0 3px rgba(212, 160, 23, .08);
}
@media (max-width: 540px) {
    .doc-type-switch { grid-template-columns: 1fr; }
}

/* Front / back upload grid */
.doc-upload-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 14px;
}
.doc-upload-grid.biz-grid { grid-template-columns: 1fr; }
@media (max-width: 720px) {
    .doc-upload-grid { grid-template-columns: 1fr; }
}

.doc-upload-slot {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.doc-upload-slot-label {
    font-weight: 600;
    font-size: .92rem;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 8px;
}

.doc-upload-dropzone {
    border: 2px dashed var(--line-2, var(--line));
    border-radius: var(--radius-md);
    background: var(--bg-2);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color .2s var(--ease-out), background .2s;
}
.doc-upload-dropzone:hover { border-color: var(--gold-300, var(--gold-200)); }

.doc-upload-preview-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--line-3, #f1f1ee);
    display: grid;
    place-items: center;
}
.doc-upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--ink-2);
    text-align: center;
    padding: 10px;
}
.doc-upload-placeholder strong { color: var(--ink); font-weight: 600; font-size: .95rem; }
.doc-upload-preview {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.doc-upload-progress {
    position: absolute;
    inset: auto 12px 12px 12px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    border-radius: 999px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .82rem;
}
.doc-upload-progress-bar {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, .25);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.doc-upload-progress-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
    animation: doc-upload-shimmer 1.1s var(--ease-out) infinite;
}
@keyframes doc-upload-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.doc-upload-progress-text { white-space: nowrap; font-weight: 600; }

.doc-upload-existing {
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--bg-2);
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    font-size: .92rem;
    color: var(--ink-2);
}

.hr-soft {
    border: 0;
    border-top: 1px dashed var(--line);
    margin: 18px 0;
}

/* ---------- Admin: checklist manager rows ---------- */
.checklist-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.checklist-row {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    background: var(--bg-2);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color .2s var(--ease-out), opacity .2s;
}
.checklist-row.is-off {
    opacity: .65;
    background: var(--line-3, #f1f1ee);
}
.checklist-row-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
}
.checklist-row-main { min-width: 0; flex: 1; }
.checklist-row-title {
    font-weight: 700;
    color: var(--ink);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.checklist-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 4px;
    font-size: .87rem;
    color: var(--ink-2);
}
.checklist-row-meta strong { color: var(--ink); font-weight: 600; }
.checklist-row-desc {
    margin-top: 6px;
    font-size: .9rem;
    color: var(--ink-2);
}
.checklist-row-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.checklist-edit-panel {
    display: none;
    border-top: 1px dashed var(--line);
    padding-top: 12px;
    margin-top: 4px;
}
.checklist-edit-panel.open { display: block; }

/* Status chips */
/* Status chips for the admin checklist manager.
   NOTE: namespaced .crit-chip (not .chip) on purpose — the homepage
   hero already owns a generic .chip class (see line ~317) and reusing
   that name would override its padding / weight / text-transform and
   break the category pills on the landing page. */
.crit-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    border: 1px solid transparent;
    line-height: 1.4;
}
.crit-chip-on    { background: rgba(21, 164, 75, .12);  color: var(--green-700); }
.crit-chip-off   { background: rgba(212, 80, 80, .12);  color: #b71c2c; }
.crit-chip-gold  { background: rgba(212, 160, 23, .14); color: var(--gold-700); }
.crit-chip-muted { background: var(--line-3, #f1f1ee);  color: var(--ink-2); border-color: var(--line); }
.code-chip {
    background: var(--line-3, #f1f1ee);
    color: var(--ink-2);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .76rem;
    border: 1px solid var(--line);
}

/* ---------- Admin: uploaded-doc grid ---------- */
.docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}
.doc-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 12px;
    background: var(--bg-2);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.doc-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.doc-card-meta { font-size: .85rem; color: var(--ink-2); }
.doc-card-meta strong { color: var(--ink); }
.doc-card-previews {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.doc-card-previews:has(.doc-thumb:only-child) { grid-template-columns: 1fr; }
.doc-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--line-3, #f1f1ee);
    border: 1px solid var(--line);
    transition: transform .15s var(--ease-out), border-color .2s;
}
.doc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.doc-thumb:hover { transform: translateY(-1px); border-color: var(--gold-300, var(--gold-200)); }
.doc-thumb-label {
    position: absolute;
    bottom: 6px; left: 6px;
    background: rgba(0, 0, 0, .65);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 2px 8px;
    border-radius: 999px;
}
.doc-card-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}

/* ---------- PDF preview card (seller + admin) ----------
   Browsers won't render a PDF inside <img>, so wherever we'd normally
   show an image thumbnail we fall back to a card showing a PDF glyph
   and the filename. Used by:
     • seller upload widget (.doc-upload-pdfcard) — appears inside the
       upload-preview-wrap once a PDF is picked.
     • admin doc grid (.doc-thumb--pdf .doc-thumb-pdf) — clickable card
       opening the PDF in a new tab. */
.doc-upload-pdfcard {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: linear-gradient(135deg, #fff 0%, var(--line-3, #f1f1ee) 100%);
}
.doc-upload-pdfcard-icon {
    position: relative;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: var(--radius-sm);
    background: #fff;
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    color: #c1272d; /* PDF red */
}
.doc-upload-pdfcard-badge {
    position: absolute;
    bottom: -6px;
    right: -6px;
    background: #c1272d;
    color: #fff;
    font-size: .62rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 4px;
    letter-spacing: .04em;
}
.doc-upload-pdfcard-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.doc-upload-pdfcard-name {
    color: var(--ink);
    font-weight: 600;
    font-size: .95rem;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.doc-thumb--pdf { background: linear-gradient(135deg, #fff 0%, var(--line-3, #f1f1ee) 100%); }
.doc-thumb-pdf {
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    justify-content: center;
    color: #c1272d;
    text-align: center;
    padding: 8px;
}
.doc-thumb-pdf span {
    color: var(--ink-2);
    font-size: .78rem;
    font-weight: 600;
}

/* ---------- Per-doc moderation block (approve / reject / delete) ----------
   Appears below the .doc-card-actions download row. Layouts the reason
   input alongside Reject + Approve buttons; Delete sits on its own row. */
.doc-card-mod {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.doc-card-mod-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: stretch;
    margin: 0;
}
.doc-card-mod-notes {
    flex: 1 1 140px;
    min-width: 0;
    font-size: .85rem;
}
.doc-card-mod-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.doc-card-mod-del { color: var(--ink-2); }
.doc-card-mod-del:hover { color: #b71c2c; }
.doc-card-mod-decided {
    padding: 6px 10px;
    background: var(--bg-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
}

/* End CHUNK 20 ==================================================== */

/* =====================================================================
   CHUNK 21 — Homepage hero card grid (2026-05-14)
   --------------------------------------------------------------------
   The 4-card feature row that sits between the green hero search and
   the trending listings on the homepage, in the same slot Jiji uses.
   Each card has the same skeleton:
     ┌──────────────────────────────┐
     │ title                    ★   │  ← title + tagline left,
     │ tagline                      │    illustrated SVG icon right
     │  ┌────────────────────────┐  │
     │  │ live preview tile      │  │  ← white inset showing data
     │  └────────────────────────┘  │
     └──────────────────────────────┘
   Cards that aren't live yet show a small "Coming soon" pill inside
   the preview tile. They keep the layout committed so we never have
   to re-slot anything when each future card lands.

   Mobile: 4-col grid collapses to a horizontal-scroll snap row with
   slightly narrower cards (240px). Internal layout is identical so
   nothing gets visually distorted when the card shrinks.
   ===================================================================== */

.hero-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 24px;
}

.hero-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 268px;
    padding: 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: var(--bg-2);
    color: var(--ink);
    text-decoration: none;
    transition: transform .15s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s;
    overflow: hidden;
}

a.hero-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(11, 107, 52, .08);
    border-color: rgba(21, 164, 75, .35);
}

.hero-card.is-coming-soon {
    cursor: default;
    opacity: .92;
}

/* Per-card tints — soft pastel backgrounds, no gradients. */
.hero-card--gold   { background: var(--gold-50);   border-color: rgba(212, 160, 23, .25); }
.hero-card--green  { background: var(--green-50);  border-color: rgba(21, 164, 75, .25); }
.hero-card--coral  { background: #fff4ec;          border-color: rgba(234, 88, 12, .25); }
.hero-card--violet { background: #f4f1fe;          border-color: rgba(139, 92, 246, .28); }

/* Title + tagline + icon row */
.hero-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.hero-card-text { min-width: 0; flex: 1; }
.hero-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 2px;
    line-height: 1.25;
}
.hero-card-tag {
    font-size: .82rem;
    color: var(--ink-3);
    margin: 0;
    line-height: 1.35;
}
.hero-card-icon {
    flex-shrink: 0;
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    margin-top: -2px;
}
.hero-card-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* White inset preview tile filling the lower half of every card */
.hero-card-preview {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px;
    border-radius: var(--radius-sm);
    background: var(--bg-2);
    border: 1px solid var(--line);
    min-height: 124px;
}

.hero-card-link {
    margin-top: auto;
    font-size: .8rem;
    font-weight: 600;
    color: var(--green-700);
}
.hero-card:hover .hero-card-link { color: var(--green-600); }

/* "Coming soon" placeholder content inside the preview tile */
.hero-card-soon {
    display: inline-flex;
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: rgba(13, 20, 17, .06);
    color: var(--ink-2);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 8px;
}
.hero-card-soon-detail {
    font-size: .82rem;
    color: var(--ink-3);
    line-height: 1.5;
    margin: 0;
}

/* ---- Hot this week: thumbnail row + stat line ---- */
.hero-hot-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 10px;
}
.hero-hot-thumb {
    aspect-ratio: 1 / 1.15;
    border-radius: 6px;
    overflow: hidden;
    background: var(--line-3);
    display: block;
}
.hero-hot-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hero-hot-stat {
    margin: 0 0 4px;
    font-size: .82rem;
    color: var(--ink-2);
    line-height: 1.4;
}
.hero-hot-stat strong {
    color: var(--ink);
    font-weight: 700;
}

/* ---- Mobile: horizontal scroll with snap ---- */
@media (max-width: 900px) {
    .hero-cards {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 12px;
        /* No negative margins — those bleed past the .container
         * padding and add 32px of horizontal page overflow on mobile.
         * Stay within the container's own padding instead. */
        padding: 4px 4px 14px;
        scroll-padding-left: 4px;
        /* Belt-and-suspenders: ensure this element CAN shrink below
         * its content's intrinsic min-width inside flex/grid parents
         * (the .page-with-sidebar fix above is the primary cure). */
        min-width: 0;
        max-width: 100%;
    }
    .hero-cards::-webkit-scrollbar { display: none; }
    .hero-card {
        flex: 0 0 240px;
        min-height: 258px;
        scroll-snap-align: start;
        padding: 14px;
    }
    .hero-card-icon { width: 68px; height: 68px; }
    .hero-card-title { font-size: .95rem; }
    .hero-card-tag { font-size: .78rem; }
    .hero-card-preview { padding: 10px; min-height: 116px; }
    .hero-hot-thumbs { gap: 5px; }
}

/* ---- Even tighter on phones — keep cards a touch narrower ---- */
@media (max-width: 480px) {
    .hero-card { flex-basis: 220px; }
}

/* =====================================================================
   /hot destination page
   ===================================================================== */
.hot-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.hot-page-title {
    margin: 0 0 6px;
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 8px;
}
.hot-page-emoji { font-size: 1.4em; line-height: 1; }
.hot-page-subtitle {
    margin: 0;
    color: var(--ink-3);
    max-width: 56ch;
    line-height: 1.5;
}
.hot-page-stats {
    display: flex;
    gap: 12px;
}
.hot-page-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    background: #fff4ec;
    border: 1px solid rgba(234, 88, 12, .25);
    min-width: 110px;
}
.hot-page-stat-num {
    font-size: 1.4rem;
    font-weight: 700;
    color: #9a3412;
    line-height: 1.1;
}
.hot-page-stat-label {
    font-size: .72rem;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}

.hot-empty {
    text-align: center;
    padding: 56px 24px;
    background: var(--bg-2);
    border: 1px dashed var(--line);
    border-radius: var(--radius-md);
}
.hot-empty-art { display: inline-block; margin-bottom: 12px; }
.hot-empty-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 8px;
}
.hot-empty-text {
    color: var(--ink-3);
    max-width: 52ch;
    margin: 0 auto 20px;
    line-height: 1.55;
}
.hot-empty-actions {
    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

@media (max-width: 640px) {
    .hot-page-head { flex-direction: column; align-items: stretch; }
    .hot-page-stats { width: 100%; }
    .hot-page-stat { flex: 1; min-width: 0; align-items: flex-start; }
    .hot-page-title { font-size: 1.5rem; }
}

/* End CHUNK 21 ==================================================== */

/* =====================================================================
   CHUNK 22 — Verified sellers card preview + /verified directory page
   (2026-05-14)
   --------------------------------------------------------------------
   Wires the Verified sellers hero card preview tile (big number +
   region label + avatar row), the /verified page layout, the filter
   row, and the seller-card grid. Reuses CHUNK 21 tokens
   (.hero-card, .hero-card--green, etc.) so the look is consistent.
   ===================================================================== */

/* ---- Verified sellers: hero card preview ---- */
.hero-verif-stat-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.hero-verif-big {
    font-size: 2rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.02em;
}
.hero-verif-stat-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.hero-verif-stat-text strong {
    font-size: .82rem;
    color: var(--ink);
    font-weight: 700;
    line-height: 1.25;
}
.hero-verif-stat-text span {
    font-size: .76rem;
    color: var(--ink-3);
    line-height: 1.3;
}

.hero-verif-avatars {
    display: flex;
    align-items: center;
    margin: 6px 0 8px;
}
.hero-verif-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--bg-2);
    background: var(--green-100);
    margin-left: -6px;
    overflow: hidden;
    flex-shrink: 0;
    display: grid;
    place-items: center;
}
.hero-verif-avatar:first-child { margin-left: 0; }
.hero-verif-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-verif-avatar-initials {
    font-size: .64rem;
    font-weight: 700;
    color: var(--green-700);
    letter-spacing: .01em;
}
.hero-verif-avatar--more {
    background: var(--green-50);
    color: var(--green-700);
    font-size: .64rem;
    font-weight: 700;
    padding: 0 4px;
    min-width: 26px;
    width: auto;
    border-radius: 999px;
}

/* =====================================================================
   /verified destination page
   ===================================================================== */
.verified-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.verified-page-title {
    margin: 0 0 6px;
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 10px;
}
.verified-page-tick {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
}
.verified-page-subtitle {
    margin: 0;
    color: var(--ink-3);
    max-width: 60ch;
    line-height: 1.55;
}
.verified-page-stats {
    display: flex;
    gap: 12px;
}
.verified-page-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    background: var(--green-50);
    border: 1px solid rgba(21, 164, 75, .25);
    min-width: 110px;
}
.verified-page-stat-num {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--green-700);
    line-height: 1.1;
}
.verified-page-stat-label {
    font-size: .72rem;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}

/* Region filter — small inline form */
.verified-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    padding: 10px 14px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    flex-wrap: wrap;
}
.verified-filter-label {
    font-size: .85rem;
    color: var(--ink-2);
    font-weight: 600;
}
.verified-filter-select {
    flex: 1;
    max-width: 280px;
    min-width: 180px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--bg-2);
    color: var(--ink);
    font-size: .9rem;
    cursor: pointer;
}
.verified-filter-select:focus {
    outline: 2px solid var(--green-300);
    outline-offset: 1px;
}

/* Seller-card grid */
.verified-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.seller-card {
    display: flex;
    flex-direction: column;
    padding: 16px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    color: var(--ink);
    text-decoration: none;
    transition: transform .15s var(--ease-out), border-color .2s, box-shadow .2s;
    min-height: 220px;
}
.seller-card:hover {
    transform: translateY(-2px);
    border-color: rgba(21, 164, 75, .35);
    box-shadow: 0 6px 18px rgba(11, 107, 52, .08);
}

.seller-card-top {
    position: relative;
    margin-bottom: 12px;
    width: 64px;
    height: 64px;
}
.seller-card-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--green-50);
    border: 1px solid rgba(21, 164, 75, .25);
    display: grid;
    place-items: center;
}
.seller-card-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.seller-card-avatar-initials {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--green-700);
    letter-spacing: .01em;
}
.seller-card-verified {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--green-500);
    color: #fff;
    display: grid;
    place-items: center;
    border: 2px solid var(--bg-2);
}

.seller-card-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 2px;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.seller-card-loc {
    margin: 0 0 8px;
    font-size: .82rem;
    color: var(--ink-3);
}

.seller-card-cat {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 12px;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: var(--green-50);
    color: var(--green-700);
    font-size: .72rem;
    font-weight: 600;
    border: 1px solid rgba(21, 164, 75, .2);
}

.seller-card-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
}
.seller-card-stat {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: .8rem;
}
.seller-card-stat-icon { color: var(--gold-500); font-size: .85rem; }
.seller-card-stat-val { font-weight: 700; color: var(--ink); }
.seller-card-stat-lbl { color: var(--ink-3); font-size: .74rem; }

.seller-card-cta {
    margin-top: 10px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--green-700);
}
.seller-card:hover .seller-card-cta { color: var(--green-600); }

/* Empty state */
.verified-empty {
    text-align: center;
    padding: 56px 24px;
    background: var(--bg-2);
    border: 1px dashed var(--line);
    border-radius: var(--radius-md);
}
.verified-empty-art { display: inline-block; margin-bottom: 12px; }
.verified-empty-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 8px;
}
.verified-empty-text {
    color: var(--ink-3);
    max-width: 58ch;
    margin: 0 auto 20px;
    line-height: 1.55;
}
.verified-empty-actions {
    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Mobile */
@media (max-width: 640px) {
    .verified-page-head { flex-direction: column; align-items: stretch; }
    .verified-page-stats { width: 100%; }
    .verified-page-stat { flex: 1; min-width: 0; align-items: flex-start; }
    .verified-page-title { font-size: 1.5rem; }
    .verified-filters { padding: 10px; }
    .verified-filter-select { max-width: none; width: 100%; }
}

/* Tighten the hero-verif card on small phones */
@media (max-width: 480px) {
    .hero-verif-big { font-size: 1.7rem; }
    .hero-verif-stat-text strong { font-size: .78rem; }
}

/* End CHUNK 22 ==================================================== */

/* =====================================================================
   CHUNK 23 — Cedi price pulse — hero preview + /price-pulse page
   (2026-05-14)
   --------------------------------------------------------------------
   Wires the Cedi price pulse hero card preview tile (query + big GHS
   number + trend pill), the /price-pulse search page, the price band
   visualization, the tier breakdown, and the sample listings list.
   Reuses CHUNK 21 hero card tokens — only the inner preview content
   is new here.
   ===================================================================== */

/* ---- Cedi price pulse: hero card preview ---- */
.hero-pulse-query {
    margin: 0 0 4px;
    font-size: .76rem;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}
.hero-pulse-big {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gold-700);
    line-height: 1.15;
    letter-spacing: -0.01em;
}
.hero-pulse-sub {
    margin: 4px 0 8px;
    font-size: .76rem;
    color: var(--ink-3);
}
.hero-pulse-trend {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: .72rem;
    font-weight: 700;
    align-self: flex-start;
    margin-bottom: 8px;
}
.hero-pulse-trend--down { background: var(--green-100); color: var(--green-700); }
.hero-pulse-trend--up   { background: #fee2e2;          color: #991b1b; }

@media (max-width: 480px) {
    .hero-pulse-big { font-size: 1.2rem; }
}

/* =====================================================================
   /price-pulse destination page
   ===================================================================== */

.pulse-page-head {
    margin-bottom: 24px;
}
.pulse-page-title {
    margin: 0 0 6px;
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 10px;
}
.pulse-page-symbol {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gold-50);
    color: var(--gold-700);
    font-weight: 700;
    font-size: 1.3rem;
    border: 1px solid rgba(212, 160, 23, .25);
}
.pulse-page-subtitle {
    margin: 0;
    color: var(--ink-3);
    max-width: 64ch;
    line-height: 1.55;
}

/* ---- Search bar ---- */
.pulse-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 14px;
    background: var(--bg-2);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-pill);
    margin-bottom: 26px;
    transition: border-color .2s var(--ease-out), box-shadow .2s;
}
.pulse-search:focus-within {
    border-color: var(--gold-500);
    box-shadow: 0 0 0 4px rgba(212, 160, 23, .12);
}
.pulse-search-icon {
    display: grid;
    place-items: center;
    color: var(--ink-3);
    flex-shrink: 0;
}
.pulse-search-input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-size: 1rem;
    padding: 10px 6px;
    outline: none;
}
.pulse-search-input::placeholder { color: var(--ink-3); }
.pulse-search-btn {
    flex-shrink: 0;
    padding: 10px 22px;
    border: 0;
    background: var(--gold-500);
    color: #fff;
    font-weight: 700;
    font-size: .92rem;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background .15s var(--ease-out);
}
.pulse-search-btn:hover { background: var(--gold-600); }

/* ---- Suggestion chips ---- */
.pulse-suggest {
    margin-top: 8px;
}
.pulse-suggest-label {
    margin: 0 0 10px;
    font-size: .9rem;
    color: var(--ink-3);
}
.pulse-suggest-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pulse-suggest-chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    background: var(--gold-50);
    color: var(--gold-700);
    border: 1px solid rgba(212, 160, 23, .25);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s var(--ease-out), transform .15s;
}
.pulse-suggest-chip:hover {
    background: var(--gold-100);
    transform: translateY(-1px);
}

/* ---- Thin-data state ---- */
.pulse-thin {
    text-align: center;
    padding: 48px 24px 32px;
    background: var(--bg-2);
    border: 1px dashed var(--line);
    border-radius: var(--radius-md);
}
.pulse-thin-art { display: inline-block; margin-bottom: 14px; }
.pulse-thin-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 8px;
    line-height: 1.4;
}
.pulse-thin-text {
    color: var(--ink-3);
    max-width: 56ch;
    margin: 0 auto 20px;
    line-height: 1.55;
}
.pulse-thin-actions {
    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ---- Full result ---- */
.pulse-result {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 24px;
}
.pulse-result-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}
.pulse-result-eyebrow {
    margin: 0 0 2px;
    font-size: .76rem;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}
.pulse-result-query {
    margin: 0 0 6px;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.25;
    word-break: break-word;
}
.pulse-result-meta {
    margin: 0;
    color: var(--ink-3);
    font-size: .9rem;
}
.pulse-result-meta strong { color: var(--ink); font-weight: 700; }
.pulse-result-big {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.pulse-result-amount {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--gold-700);
    line-height: 1;
    letter-spacing: -0.02em;
}
.pulse-trend {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: .8rem;
    font-weight: 700;
}
.pulse-trend--down { background: var(--green-100); color: var(--green-700); }
.pulse-trend--up   { background: #fee2e2;          color: #991b1b; }

/* Price band visualization */
.pulse-band { margin: 8px 0 24px; }
.pulse-band-track {
    position: relative;
    height: 10px;
    border-radius: var(--radius-pill);
    background: linear-gradient(to right, var(--green-200), var(--gold-200), #fed7aa);
}
.pulse-band-marker {
    position: absolute;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    margin-top: -9px;
    border-radius: 50%;
    background: var(--ink);
    border: 3px solid var(--bg-2);
    box-shadow: 0 1px 4px rgba(13, 20, 17, .25);
}
.pulse-band-labels {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 12px;
}
.pulse-band-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: .8rem;
}
.pulse-band-label--center { text-align: center; align-items: center; }
.pulse-band-label--end    { text-align: right;  align-items: flex-end; }
.pulse-band-label strong { color: var(--ink); font-weight: 700; font-size: .95rem; }
.pulse-band-label span   { color: var(--ink-3); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }

/* Tier breakdown — three small boxes */
.pulse-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}
.pulse-tier {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: var(--bg-3);
    border: 1px solid var(--line);
}
.pulse-tier-label {
    font-size: .72rem;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}
.pulse-tier-val { font-size: .92rem; font-weight: 700; color: var(--ink); }
.pulse-tier--accent {
    background: var(--gold-50);
    border-color: rgba(212, 160, 23, .25);
}
.pulse-tier--accent .pulse-tier-val { color: var(--gold-700); }

.pulse-cta-row {
    margin: 20px 0 24px;
    text-align: center;
}

/* Sample listings */
.pulse-samples {
    border-top: 1px solid var(--line);
    padding-top: 20px;
}
.pulse-samples-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 12px;
}
.pulse-samples-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pulse-sample-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--bg-2);
    color: var(--ink);
    text-decoration: none;
    transition: border-color .15s var(--ease-out), background .15s;
}
.pulse-sample-link:hover {
    border-color: rgba(212, 160, 23, .4);
    background: var(--gold-50);
}
.pulse-sample-thumb {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--line-3);
}
.pulse-sample-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pulse-sample-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pulse-sample-title {
    font-size: .92rem;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pulse-sample-meta {
    font-size: .78rem;
    color: var(--ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pulse-sample-price {
    flex-shrink: 0;
    font-size: .95rem;
    font-weight: 700;
    color: var(--gold-700);
}

/* Mobile */
@media (max-width: 640px) {
    .pulse-page-title { font-size: 1.5rem; }
    .pulse-search { padding: 4px 4px 4px 12px; }
    .pulse-search-input { font-size: .92rem; padding: 9px 4px; }
    .pulse-search-btn { padding: 9px 16px; font-size: .85rem; }
    .pulse-result { padding: 18px; }
    .pulse-result-head { flex-direction: column; align-items: flex-start; }
    .pulse-result-big { align-items: flex-start; }
    .pulse-result-amount { font-size: 1.7rem; }
    .pulse-tiers { grid-template-columns: 1fr; }
    .pulse-band-label strong { font-size: .85rem; }
}

/* End CHUNK 23 ==================================================== */

/* =====================================================================
   CHUNK 24 — Saved & watching: hero card preview + /buyer/watching
   dashboard  (2026-05-14)
   --------------------------------------------------------------------
   Wires the violet Saved & watching hero card in all three states
   (signed-out CTA, signed-in empty, signed-in with data) and the full
   /buyer/watching combined dashboard (saved listings grid with drop
   badges + followed sellers list with newest items).
   ===================================================================== */

/* ---- Saved & watching: hero card preview ---- */
.hero-saved-pitch {
    font-size: .85rem;
    color: var(--ink-2);
    line-height: 1.5;
    margin: 0 0 10px;
}
.hero-saved-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}
.hero-saved-row + .hero-saved-row {
    border-top: 1px solid var(--line-2);
    margin-top: 4px;
    padding-top: 8px;
}
.hero-saved-num {
    font-size: 1.4rem;
    font-weight: 700;
    color: #6d28d9;  /* violet-700 — matches the card's accent */
    line-height: 1;
    min-width: 28px;
    text-align: center;
    letter-spacing: -0.02em;
}
.hero-saved-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}
.hero-saved-text strong {
    font-size: .8rem;
    color: var(--ink);
    font-weight: 700;
    line-height: 1.3;
}
.hero-saved-text span {
    font-size: .72rem;
    color: var(--ink-3);
    line-height: 1.3;
}

@media (max-width: 480px) {
    .hero-saved-num { font-size: 1.2rem; min-width: 22px; }
    .hero-saved-text strong { font-size: .76rem; }
}

/* =====================================================================
   /buyer/watching dashboard
   ===================================================================== */

.watching-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.watching-title {
    margin: 0 0 6px;
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 10px;
}
.watching-icon {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f4f1fe;
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, .28);
}
.watching-subtitle {
    margin: 0;
    color: var(--ink-3);
    max-width: 64ch;
    line-height: 1.55;
}
.watching-stats {
    display: flex;
    gap: 10px;
}
.watching-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    background: var(--bg-3);
    border: 1px solid var(--line);
    min-width: 90px;
}
.watching-stat--accent {
    background: #f4f1fe;
    border-color: rgba(139, 92, 246, .28);
}
.watching-stat-num {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.1;
}
.watching-stat--accent .watching-stat-num { color: #6d28d9; }
.watching-stat-label {
    font-size: .7rem;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}

/* Section wrapper — two of these on the page */
.watching-section { margin-bottom: 36px; }
.watching-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}
.watching-section-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink);
}
.watching-section-link {
    font-size: .85rem;
    font-weight: 600;
    color: #6d28d9;
    text-decoration: none;
}
.watching-section-link:hover { color: #5b21b6; text-decoration: underline; }

/* Empty state */
.watching-empty {
    text-align: center;
    padding: 36px 24px;
    background: var(--bg-2);
    border: 1px dashed var(--line);
    border-radius: var(--radius-md);
}
.watching-empty-art { display: inline-block; margin-bottom: 10px; }
.watching-empty-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 6px;
}
.watching-empty-text {
    color: var(--ink-3);
    max-width: 52ch;
    margin: 0 auto 16px;
    line-height: 1.55;
    font-size: .9rem;
}

/* ---- Saved listings grid ---- */
.watching-saved-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}
.watching-saved-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    color: var(--ink);
    text-decoration: none;
    transition: transform .15s var(--ease-out), border-color .2s, box-shadow .2s;
    overflow: hidden;
}
.watching-saved-card:hover {
    transform: translateY(-2px);
    border-color: rgba(139, 92, 246, .35);
    box-shadow: 0 6px 18px rgba(13, 20, 17, .08);
}
.watching-saved-card.is-expired { opacity: .65; }
.watching-saved-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--line-3);
    overflow: hidden;
}
.watching-saved-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.watching-drop-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--green-500);
    color: #fff;
    font-size: .76rem;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(13, 20, 17, .2);
}
.watching-status-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    background: rgba(13, 20, 17, .7);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
}
.watching-saved-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}
.watching-saved-title {
    font-size: .92rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.watching-saved-pricerow {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
}
.watching-saved-price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--green-700);
}
.watching-saved-was {
    font-size: .78rem;
    color: var(--ink-3);
    text-decoration: line-through;
}
.watching-saved-meta {
    font-size: .76rem;
    color: var(--ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.watching-saved-when {
    font-size: .7rem;
    color: var(--ink-3);
    margin-top: auto;
    padding-top: 6px;
}

/* ---- Followed sellers list ---- */
.watching-follow-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.watching-follow-row {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.watching-follow-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    color: var(--ink);
    text-decoration: none;
    transition: background .15s;
}
.watching-follow-head:hover { background: #faf8ff; }
.watching-follow-avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: #f4f1fe;
    border: 1px solid rgba(139, 92, 246, .28);
    display: grid;
    place-items: center;
}
.watching-follow-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.watching-follow-initials {
    font-size: 1rem;
    font-weight: 700;
    color: #6d28d9;
}
.watching-follow-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.watching-follow-name {
    font-size: .98rem;
    font-weight: 700;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 6px;
}
.watching-follow-verif {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--green-500);
    color: #fff;
}
.watching-follow-meta {
    font-size: .78rem;
    color: var(--ink-3);
}
.watching-fresh-pip {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: #f4f1fe;
    color: #6d28d9;
    font-size: .72rem;
    font-weight: 700;
    border: 1px solid rgba(139, 92, 246, .28);
}

.watching-follow-items {
    list-style: none;
    margin: 0;
    padding: 0 14px 14px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    border-top: 1px solid var(--line-2);
    padding-top: 12px;
}
.watching-follow-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--bg-3);
    text-decoration: none;
    color: var(--ink);
    transition: border-color .15s, background .15s;
}
.watching-follow-item:hover {
    border-color: rgba(139, 92, 246, .35);
    background: #faf8ff;
}
.watching-follow-item-thumb {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--line-3);
}
.watching-follow-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.watching-follow-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.watching-follow-item-title {
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.watching-follow-item-price {
    font-size: .85rem;
    font-weight: 700;
    color: var(--green-700);
}

/* Mobile */
@media (max-width: 640px) {
    .watching-head { flex-direction: column; align-items: stretch; }
    .watching-stats { width: 100%; }
    .watching-stat { flex: 1; min-width: 0; align-items: flex-start; padding: 10px 12px; }
    .watching-title { font-size: 1.5rem; }
    .watching-saved-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .watching-follow-items { grid-template-columns: 1fr; }
}

/* End CHUNK 24 ==================================================== */

/* =====================================================================
   CHUNK 25 — Mobile edge-padding fix for non-home pages (2026-05-14)
   --------------------------------------------------------------------
   Background:
     The /feed, /hot, /verified, /price-pulse and /buyer/watching pages
     were rendering with no apparent right-side breathing room on phones
     while the homepage looked correctly inset. Content was bleeding
     past the .container's right padding, then getting clipped by
     `body { overflow-x: hidden }` — producing the left-padded /
     right-flush asymmetry visible in the user's screenshots.

   Root cause:
     Same bug class as the .page-with-sidebar mobile-bleed from a
     previous turn. CSS `grid-template-columns: repeat(N, 1fr)` is
     shorthand for `repeat(N, minmax(auto, 1fr))`. The `auto` minimum
     forbids the column from shrinking below its content's intrinsic
     min-content width. When any child has `white-space: nowrap` (as
     `.product-card .product-meta-loc` does, intentionally, for the
     city/region string with ellipsis), the column's min-content size
     equals that text width, and 2 columns × that minimum > viewport
     on small phones.

   Fix:
     The grid-template-columns rules for .grid-products and
     .grid-products-feed (and .watching-saved-grid mobile) were
     changed in-place to `minmax(0, 1fr)`. That allows columns to
     shrink to zero — the existing `text-overflow: ellipsis` on the
     nowrap children then truncates cleanly.

   This chunk:
     A defensive `min-width: 0` on .product-card itself, so the card
     can also shrink correctly inside flex parents (search results,
     shop-catalog rows, any future contexts that may not be 100%
     locked to safe grid templates).

   Audit notes for future grids:
     - Any `grid-template-columns: repeat(N, 1fr)` with N >= 2 and
       content that includes nowrap text is a bleed candidate.
     - `repeat(auto-fill, minmax(Xpx, 1fr))` is safe because X is an
       explicit minimum. (Already used by .verified-grid, .pulse-tiers,
       .watching-follow-items, etc.)
     - Flex children with `flex: 1` should always pair with
       `min-width: 0` for the same reason.
   ===================================================================== */

.product-card {
    /* Allow the card to shrink inside any flex/grid parent so its
     * internal nowrap children (price, meta-loc) truncate via the
     * existing ellipsis rules instead of pushing the parent wider
     * than the viewport. */
    min-width: 0;
}

/* End CHUNK 25 ==================================================== */

/* =====================================================================
   CHUNK 26 — Container overflow safety + visible mobile padding bump
   (2026-05-14)
   --------------------------------------------------------------------
   Despite the minmax(0, 1fr) grid fixes in CHUNK 25, the destination
   pages (/feed, /hot, /verified, /price-pulse, /buyer/watching) still
   visually showed content touching the right viewport edge on mobile.
   The left side respected .container's 18px padding; the right side
   appeared flush — the classic signature of "child is wider than
   parent, body's overflow-x:hidden clips the right".

   Rather than hunt for every potential overflow source one by one,
   we install a defense-in-depth fix here:

     1. .container { overflow-x: clip } — clips ANY descendant
        overflow at the container's padding edge (not at the viewport
        edge, which is where body's overflow-x:hidden was clipping
        before). Visual effect: 18px breathing room is preserved on
        both sides, ALWAYS, even if a future grid/flex template
        misses the minmax(0, 1fr) safety. We use `clip` (not `hidden`)
        because `hidden` creates a scroll context that breaks
        position:sticky for .cat-sidebar on desktop. `clip` does the
        same visual job with zero side effects on sticky positioning.

     2. Mobile padding bump: 18px → 22px on phones (<= 700px). This
        gives noticeably more breathing room on pages that don't have
        a hero band to provide visual structure. The homepage uses
        the same .container so it gets the same 4px bump — but its
        green hero already dominates the upper viewport, so the
        change reads as a small refinement, not a redesign.

   Browser support for overflow-x:clip:
     Chrome 90+ (Apr 2021), Firefox 81+ (Sep 2020), Safari 16+ (Sep
     2022). Coverage globally ~96% as of 2026. For the remaining ~4%
     on legacy browsers, behaviour falls back to the pre-fix state
     (visible bleed on the right side) — same as before this patch,
     so no regression.
   ===================================================================== */

.container {
    /* Belt-and-suspenders safety net. See chunk note above. */
    overflow-x: clip;
}

@media (max-width: 700px) {
    .container {
        padding-left: 22px;
        padding-right: 22px;
    }
}

/* End CHUNK 26 ==================================================== */

/* ============================================================
 * Promo Snippets — bottom-corner Hot Picks + Sponsored cards
 * (2026-05-14)
 *
 * Markup contract (see partials/promo-snippets.php + promo-snippets.js):
 *
 *   <div id="promo-snippets" class="promo-snippets promo-snippets--{device}">
 *     <article class="promo-snippet promo-snippet--{hot|ad}
 *                                    promo-snippet--{left|right}">
 *       <header class="promo-snippet__strip">…icon…label…trust…×…</header>
 *       <a class="promo-snippet__body">
 *         <div class="promo-snippet__thumb">…</div>
 *         <div class="promo-snippet__meat">…title…loc…tags…cta…</div>
 *       </a>
 *     </article>
 *   </div>
 *
 * Cards animate by toggling .is-visible on the <article>; the
 * transform on the .promo-snippet element does the slide. The
 * container itself does no positioning — each card pins itself
 * to its assigned corner with position:fixed so siblings don't
 * affect each other's layout.
 * ============================================================ */

/* Container is purely a logical wrapper. The cards are
 * position:fixed so the container's own box doesn't matter.
 * pointer-events:none on the wrapper means clicks outside an
 * actual card pass through to the page underneath. */
.promo-snippets {
    position: relative;
    pointer-events: none;
    z-index: 9100;     /* above page content, below cookies banner (9000)? deliberately ABOVE so promo overlaps the banner if both are showing — banner is a one-time thing */
}

.promo-snippet {
    position: fixed;
    bottom: 16px;
    z-index: 9100;
    width: 300px;
    /* ---------------------------------------------------------
     *  CARD HEIGHT — adjust here to change the PC card height
     *  globally. 180px is the post-2026-05-15 default (was 250px
     *  but that left a large gap between the tags and the CTA).
     *  Mobile cards use a separate height set in the media query
     *  near the bottom of this section.
     * --------------------------------------------------------- */
    height: 180px;
    background: var(--bg-2, #fff);
    border-radius: var(--radius, 16px);
    box-shadow: var(--shadow-lg, 0 18px 50px rgba(7,19,13,.14), 0 4px 14px rgba(7,19,13,.06));
    overflow: hidden;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    /* Slide-down initial state. The .is-visible class flips it to
     * translateY(0). A 120% offset (slightly more than 100%) makes
     * sure the shadow clears the viewport edge during the slide. */
    transform: translateY(120%);
    opacity: 0;
    transition:
        transform .35s var(--ease-out, cubic-bezier(.2,.8,.2,1)),
        opacity   .25s ease-out;
    border: 1px solid var(--line, #e6e9e7);
    font-family: var(--font, system-ui, sans-serif);
}
.promo-snippet.is-visible {
    transform: translateY(0);
    opacity: 1;
}

/* Corner pinning. The CSS variable lets the mobile media query
 * override the bottom offset without retyping the left/right
 * rules. */
.promo-snippet--left  { left:  16px; right: auto; }
.promo-snippet--right { right: 16px; left:  auto; }

/* ---- Strip (top band with icon + label + trust + ×) ---- */
.promo-snippet__strip {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 10px 0 12px;
    color: #fff;
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .01em;
    flex-shrink: 0;
}
.promo-snippet--hot .promo-snippet__strip {
    /* Brand gold gradient — matches --grad-gold without depending
     * on its exact gradient stops. Slightly darker on the right so
     * the white × button stays legible. */
    background: linear-gradient(135deg, var(--gold-500, #d4a017) 0%, var(--gold-700, #8a6207) 100%);
}
.promo-snippet--ad .promo-snippet__strip {
    /* Neutral blue — distinct from gold so users immediately see
     * which group a card belongs to. */
    background: linear-gradient(135deg, var(--blue-500, #2563eb) 0%, #1e40af 100%);
}
.promo-snippet__strip-icon {
    font-size: 1rem;
    line-height: 1;
}
.promo-snippet__strip-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.promo-snippet__trust {
    font-size: .68rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    color: #fff;
    white-space: nowrap;
    backdrop-filter: blur(2px);
}
.promo-snippet__dismiss {
    appearance: none;
    background: rgba(255,255,255,.18);
    color: #fff;
    border: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 4px;
    transition: background .15s ease, transform .15s ease;
}
.promo-snippet__dismiss:hover {
    background: rgba(255,255,255,.32);
    transform: scale(1.08);
}
.promo-snippet__dismiss:active { transform: scale(.95); }
.promo-snippet__dismiss:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ---- Body (clickable area: thumb + content) ---- */
.promo-snippet__body {
    flex: 1;
    min-height: 0;
    display: flex;
    text-decoration: none;
    color: inherit;
    background: var(--bg-2, #fff);
    transition: background .15s ease;
}
.promo-snippet__body:hover {
    background: var(--bg-3, #fbfcfb);
}
.promo-snippet__body:focus-visible {
    outline: 2px solid var(--green-500, #15a44b);
    outline-offset: -2px;
}

.promo-snippet__thumb {
    flex: 0 0 124px;
    width: 124px;
    height: 100%;
    overflow: hidden;
    background: var(--line-3, #f4f6f4);
    position: relative;
    /* Padding + box-sizing so the thumb image sits centered with
     * the background color visible around it (the gold/blue
     * gradient applied below by group selector). Update both
     * values together if you want a different inset. */
    padding: 14px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Group-specific thumb backgrounds. The padding above lets these
 * show through around the centered product image. */
.promo-snippet--hot .promo-snippet__thumb {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}
.promo-snippet--ad .promo-snippet__thumb {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
}
.promo-snippet__thumb img {
    width: 100%;
    height: 100%;
    /* contain (was: cover) — keeps the product's aspect ratio so
     * tall items aren't head-cropped and wide items aren't
     * side-cropped. The thumb padding above gives the image
     * breathing room. */
    object-fit: contain;
    display: block;
}
.promo-snippet__thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: var(--muted-2, #94a09a);
}

.promo-snippet__meat {
    flex: 1;
    min-width: 0;
    /* Tighter padding for the shorter 180px card. Was 10px 12px
     * 12px before the 2026-05-15 height reduction. */
    padding: 8px 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.promo-snippet__title {
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ink, #0d1411);
    margin: 0;
    /* 2-line clamp so a long product title doesn't push the CTA
     * off the bottom of the card. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.promo-snippet__loc {
    margin: 0;
    font-size: .72rem;
    color: var(--muted, #6b7570);
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.promo-snippet__pin {
    font-size: .75rem;
    line-height: 1;
}

.promo-snippet__tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 2px;
    min-height: 0;
}
.promo-snippet__tag {
    font-size: .65rem;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--green-50, #ecf9ef);
    color: var(--green-800, #0a3a26);
    border: 1px solid var(--green-100, #d4f5dd);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.promo-snippet__cta {
    /* margin-top removed in 2026-05-15 — was 'auto' which pushed
     * the button to the bottom of the available space, leaving a
     * visible gap between the tags and the CTA. With the shorter
     * 180px card, the CTA sits naturally right after the tags. */
    margin-top: 2px;
    align-self: flex-start;
    font-size: .78rem;
    font-weight: 600;
    color: #fff;
    background: var(--green-700, #0b6b34);
    padding: 5px 11px;
    border-radius: 999px;
    line-height: 1.2;
    transition: background .15s ease, transform .15s ease;
}
.promo-snippet__body:hover .promo-snippet__cta {
    background: var(--green-600, #0e8d44);
    transform: translateX(2px);
}

/* ---- Mobile: one card, bottom-centered, narrower height ---- */
@media (max-width: 700px) {
    .promo-snippet {
        /* Stretch to the viewport (minus a bit of breathing room)
         * and override the corner pinning. Both .promo-snippet--left
         * and .promo-snippet--right sit centered on phones because
         * the server only ever returns one card for mobile anyway. */
        left: 12px;
        right: 12px;
        width: auto;
        max-width: 480px;
        margin: 0 auto;
        height: 124px;
        bottom: 12px;
    }
    .promo-snippet--left,
    .promo-snippet--right {
        left: 12px;
        right: 12px;
    }
    .promo-snippet__strip { height: 30px; font-size: .76rem; }
    .promo-snippet__thumb {
        flex-basis: 94px;
        width: 94px;
        /* Tighter padding on mobile since the thumb is only 94px
         * wide (versus 124px on desktop). 14px would crush the
         * inner image area. */
        padding: 8px;
    }
    .promo-snippet__meat  { padding: 8px 10px 10px; gap: 4px; }
    .promo-snippet__title { font-size: .85rem; -webkit-line-clamp: 1; line-clamp: 1; }
    .promo-snippet__tags  { display: none; }  /* tight space — drop the chips */
    .promo-snippet__cta   { font-size: .72rem; padding: 4px 9px; }
}

/* ---- Reduced motion: kill the slide, just fade. ---- */
@media (prefers-reduced-motion: reduce) {
    .promo-snippet {
        transform: none;
        transition: opacity .2s ease;
    }
    .promo-snippet.is-visible { transform: none; }
}

/* ---- Print: never print floating promotional cards. ---- */
@media print {
    .promo-snippets, .promo-snippet { display: none !important; }
}

/* End promo snippets ================================================ */

/* ====================================================================
 * /buyer/watching command-center upgrade (chunk 11, 2026-05-15)
 *
 * Adds four feature layers on top of the existing watching grid:
 *   1. Color-coded card borders (green/red/gray)
 *   2. Activity ticker per card (hot/warm/cool tones)
 *   3. Private notes editor (toggle + textarea + status)
 *   4. Shareable watchlist banner with iOS-style toggle
 *
 * Anchors to the existing .watching-saved-card pattern — the wrapper
 * now provides the border (so wrap + card share the same rounded
 * corners, and the original card border is masked off).
 * ==================================================================== */

/* ----- 1. Card wrapper + color-coded borders ----- */
.watching-saved-card-wrap {
    position: relative;
    border: 2px solid var(--line, #e6e9e7);
    border-radius: var(--radius-md, 12px);
    background: transparent;
    transition: border-color .2s, box-shadow .2s, transform .15s var(--ease-out);
    overflow: visible;     /* allow note popover to escape */
    display: flex;
    flex-direction: column;
}
.watching-saved-card-wrap:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(13, 20, 17, .08);
}
/* The inner card loses its own border — the wrapper provides it now.
 * Same rounded inner corner so the visual reads as one block. */
.watching-saved-card-wrap > .watching-saved-card {
    border: 0;
    border-radius: calc(var(--radius-md, 12px) - 2px);
    box-shadow: none;
}
.watching-saved-card-wrap > .watching-saved-card:hover {
    transform: none;       /* the wrap handles hover lift now */
    box-shadow: none;
}
/* Color tiers — green when price dropped from saved baseline, red
 * when it rose, gray when stable or there's no baseline to compare. */
.watching-saved-card-wrap.is-border-green {
    border-color: var(--green-600, #0e8d44);
    box-shadow: 0 0 0 3px rgba(14, 141, 68, .08);
}
.watching-saved-card-wrap.is-border-red {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .08);
}
.watching-saved-card-wrap.is-border-gray {
    border-color: var(--line, #e6e9e7);
}
.watching-saved-card-wrap.is-expired {
    opacity: .65;
}

/* ----- Rise badge (mirrors the existing drop badge but red) ----- */
.watching-rise-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 10px;
    border-radius: var(--radius-pill, 999px);
    background: #fee2e2;
    color: #991b1b;
    font-size: .76rem;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(13, 20, 17, .2);
}

/* ----- 2. Activity ticker (chip below the location/seller meta) ----- */
.watching-saved-activity {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 3px 9px;
    border-radius: var(--radius-pill, 999px);
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.2;
    width: fit-content;
}
.watching-saved-activity--hot {
    background: #fff7ed;
    color: #c2410c;          /* orange-700 */
}
.watching-saved-activity--warm {
    background: #fef3c7;
    color: var(--gold-700, #92670a);
}
.watching-saved-activity--cool {
    background: var(--bg-3, #f4f6f4);
    color: var(--muted, #6b7570);
}

/* ----- 3. Private notes editor ----- */
.watching-note {
    position: relative;
    padding: 8px 10px 10px;
    border-top: 1px solid var(--line, #e6e9e7);
    background: rgba(254, 243, 199, .15);
}
.watching-note.has-note {
    background: rgba(254, 243, 199, .35);
}
.watching-note-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 1px solid var(--line, #e6e9e7);
    color: var(--muted, #6b7570);
    font-size: .75rem;
    font-weight: 500;
    padding: 4px 9px;
    border-radius: var(--radius-pill, 999px);
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.watching-note-toggle:hover {
    border-color: var(--gold-600, #b8870c);
    color: var(--gold-700, #92670a);
    background: #fffbeb;
}
.watching-note.has-note .watching-note-toggle {
    border-color: var(--gold-600, #b8870c);
    color: var(--gold-700, #92670a);
    background: #fffbeb;
}
.watching-note-icon { font-size: .8rem; line-height: 1; }
.watching-note-label { white-space: nowrap; }

.watching-note-editor {
    margin-top: 8px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--gold-300, #fde68a);
    border-radius: var(--radius-sm, 8px);
    box-shadow: 0 2px 6px rgba(13, 20, 17, .04);
}
.watching-note-editor textarea {
    width: 100%;
    border: 1px solid var(--line, #e6e9e7);
    border-radius: 6px;
    padding: 6px 8px;
    font-family: inherit;
    font-size: .82rem;
    line-height: 1.4;
    resize: vertical;
    min-height: 60px;
    background: #fff;
    color: var(--ink, #1b2520);
}
.watching-note-editor textarea:focus {
    outline: 0;
    border-color: var(--gold-600, #b8870c);
    box-shadow: 0 0 0 3px rgba(184, 135, 12, .15);
}
.watching-note-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    gap: 8px;
}
.watching-note-status {
    font-size: .75rem;
    color: var(--green-700, #0b6b34);
    font-weight: 500;
}
.watching-note-preview {
    margin-top: 8px;
    padding: 8px 10px;
    background: #fffbeb;
    border-left: 3px solid var(--gold-600, #b8870c);
    border-radius: 0 6px 6px 0;
    font-size: .78rem;
    line-height: 1.45;
    color: var(--ink-2, #2d3a35);
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ----- 4. Share watchlist banner ----- */
.watching-share {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    background: #fef3c7;
    border: 1px solid #fde68a;
    padding: 14px 18px;
    border-radius: var(--radius-md, 12px);
    margin-bottom: 1.2rem;
}
.watching-share-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.watching-share-text strong {
    font-size: .98rem;
    color: var(--ink, #1b2520);
}
.watching-share-sub {
    font-size: .82rem;
    color: var(--muted, #6b7570);
    line-height: 1.45;
}
.watching-share-views {
    color: var(--gold-700, #92670a);
    font-weight: 500;
}
.watching-share-url {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.watching-share-url input[type="text"] {
    flex: 1 1 280px;
    min-width: 180px;
    padding: 6px 10px;
    border: 1px solid #fde68a;
    border-radius: 6px;
    background: #fff;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: .8rem;
    color: var(--ink, #1b2520);
}
.watching-share-url input[type="text"]:focus {
    outline: 0;
    border-color: var(--gold-600, #b8870c);
    box-shadow: 0 0 0 3px rgba(184, 135, 12, .12);
}

/* ----- iOS-style toggle switch for the share enable/disable ----- */
.watching-share-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
}
.watching-share-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.watching-share-toggle-slider {
    position: absolute;
    inset: 0;
    background: #cbd5e1;
    border-radius: 24px;
    transition: background .25s;
}
.watching-share-toggle-slider::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(13, 20, 17, .25);
    transition: transform .25s;
}
.watching-share-toggle input:checked + .watching-share-toggle-slider {
    background: var(--green-600, #0e8d44);
}
.watching-share-toggle input:checked + .watching-share-toggle-slider::before {
    transform: translateX(20px);
}
.watching-share-toggle input:disabled + .watching-share-toggle-slider {
    opacity: .6;
    cursor: wait;
}

/* ----- Responsive — stack the share banner on narrow screens ----- */
@media (max-width: 540px) {
    .watching-share {
        flex-direction: column;
        align-items: stretch;
    }
    .watching-share-toggle {
        align-self: flex-end;
    }
    .watching-note-toggle { font-size: .72rem; }
}

/* End /buyer/watching chunk 11 ====================================== */

/* ====================================================================
 * /price-pulse upgrade (chunk 12, 2026-05-15)
 *
 * Three feature layers on the sample-listing rows:
 *   1. Inline 7-day sparkline (green/red/gray by trend)
 *   2. Market-position chip (below / fair / above)
 *   3. Per-buyer price target editor (inline form)
 *
 * Anchors to .pulse-sample / .pulse-sample-link from main.css.
 * ==================================================================== */

/* ----- 1. Sparkline ----- */
.pulse-sample-chips {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.pulse-sample-spark {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.pp-spark {
    vertical-align: middle;
}
.pp-spark--down { color: var(--green-600, #0e8d44); }
.pp-spark--up   { color: #dc2626; }
.pp-spark--flat { color: var(--muted, #6b7570); }

/* ----- 2. Market position chip ----- */
.pulse-mp {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: var(--radius-pill, 999px);
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.pulse-mp--below {
    background: #dcfce7;
    color: #166534;       /* green-800 */
}
.pulse-mp--fair {
    background: #e0e7ff;
    color: #3730a3;       /* indigo-800 */
}
.pulse-mp--above {
    background: #fef3c7;
    color: #92400e;       /* amber-800 */
}

/* ----- 3. Price target row ----- */
.pulse-target {
    padding: 10px 14px;
    border-top: 1px solid var(--line, #e6e9e7);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    background: rgba(254, 243, 199, .15);
}
.pulse-target-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: var(--radius-pill, 999px);
    background: var(--gold-50, #fffbeb);
    border: 1px solid var(--gold-300, #fde68a);
    color: var(--gold-700, #92670a);
    font-weight: 600;
    cursor: pointer;
    font-size: .78rem;
    transition: background .15s, border-color .15s;
}
.pulse-target-cta:hover {
    background: var(--gold-100, #fef3c7);
    border-color: var(--gold-500, #d99a13);
}
.pulse-target-cta--login {
    text-decoration: none;
}
.pulse-target-active {
    color: var(--ink-2, #2d3a35);
    font-weight: 500;
}
.pulse-target-active strong {
    color: var(--gold-700, #92670a);
}
.pulse-target-hit {
    color: var(--green-700, #0b6b34);
    font-weight: 700;
}
.pulse-target-edit,
.pulse-target-clear {
    padding: 3px 9px;
    border-radius: 6px;
    border: 1px solid var(--line, #e6e9e7);
    background: transparent;
    cursor: pointer;
    font-size: .72rem;
    color: var(--muted, #6b7570);
    transition: border-color .15s, color .15s;
}
.pulse-target-edit:hover {
    border-color: var(--gold-600, #b8870c);
    color: var(--gold-700, #92670a);
}
.pulse-target-clear:hover {
    border-color: #dc2626;
    color: #dc2626;
}

/* ----- Inline editor form ----- */
.pulse-target-form {
    flex-basis: 100%;
    margin-top: 4px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--gold-300, #fde68a);
    border-radius: 8px;
}
.pulse-target-label {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    color: var(--ink-2, #2d3a35);
    margin-bottom: 6px;
}
.pulse-target-inputrow {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.pulse-target-currency {
    font-size: .78rem;
    color: var(--muted, #6b7570);
    font-weight: 600;
}
.pulse-target-inputrow input[type="number"] {
    flex: 1 1 120px;
    min-width: 100px;
    max-width: 200px;
    padding: 5px 9px;
    border: 1px solid var(--line, #e6e9e7);
    border-radius: 6px;
    font-size: .85rem;
    color: var(--ink, #1b2520);
    background: #fff;
    /* Strip the spinner arrows for a cleaner look. */
    appearance: textfield;
    -moz-appearance: textfield;
}
.pulse-target-inputrow input[type="number"]::-webkit-outer-spin-button,
.pulse-target-inputrow input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.pulse-target-inputrow input[type="number"]:focus {
    outline: 0;
    border-color: var(--gold-600, #b8870c);
    box-shadow: 0 0 0 3px rgba(184, 135, 12, .15);
}
.pulse-target-status {
    display: block;
    margin-top: 6px;
    font-size: .75rem;
    color: var(--green-700, #0b6b34);
}

@media (max-width: 540px) {
    .pulse-target { font-size: .78rem; }
    .pulse-target-inputrow { gap: 4px; }
}

/* End /price-pulse chunk 12 ========================================== */

/* ====================================================================
 * /verified upgrade (chunk 13, 2026-05-15)
 *
 * Three feature layers on the existing seller cards:
 *   1. Trust score ring (circular SVG, top-right of card)
 *   2. Response-time pill ("⚡ Replies in ~4 min")
 *   3. Seller-of-the-week hero (banner above the grid)
 *
 * Tier colors:
 *   ≥80 — high  (brand green)
 *   ≥50 — mid   (gold)
 *   <50 — low   (muted gray)
 * ==================================================================== */

/* ----- 1. Trust score ring ----- */
.trust-ring {
    display: block;
}
.trust-ring__bg {
    color: var(--bg-3, #f4f6f4);
    opacity: 1;
}
.trust-ring__fg {
    transition: stroke-dashoffset .8s var(--ease-out, cubic-bezier(.22,.61,.36,1));
}
.trust-ring--high .trust-ring__fg { color: var(--green-600, #0e8d44); }
.trust-ring--mid  .trust-ring__fg { color: var(--gold-600,  #b8870c); }
.trust-ring--low  .trust-ring__fg { color: var(--muted,     #6b7570); }

.trust-ring__num {
    font-weight: 800;
    font-family: var(--font-sans, system-ui), sans-serif;
}
.trust-ring--high .trust-ring__num { fill: var(--green-700, #0b6b34); }
.trust-ring--mid  .trust-ring__num { fill: var(--gold-700,  #92670a); }
.trust-ring--low  .trust-ring__num { fill: var(--ink-2,     #2d3a35); }

/* Place the ring at the top-right of the seller card. The card's
 * .seller-card-top is already position:relative thanks to the
 * existing verified-badge layout. */
.seller-card-trust {
    position: absolute;
    top: -4px;
    right: -4px;
    padding: 2px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(13, 20, 17, .08);
}

/* The verified tick badge moves slightly so it doesn't clash. */
.seller-card-top { position: relative; }

/* ----- 2. Response time pill ----- */
.seller-card-response {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 9px;
    margin-top: 6px;
    border-radius: var(--radius-pill, 999px);
    background: #ecfdf5;
    color: var(--green-700, #0b6b34);
    font-size: .72rem;
    font-weight: 600;
    width: fit-content;
}

/* ----- 3. Seller-of-the-week hero ----- */
.sow-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: linear-gradient(135deg, var(--gold-50, #fffbeb) 0%, #fff 70%);
    border: 1px solid var(--gold-300, #fde68a);
    border-radius: var(--radius-md, 12px);
    padding: 16px 18px;
    margin: 0 0 18px;
    overflow: hidden;
}
/* Decorative gold accent strip on the left edge. */
.sow-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--gold-500, #d99a13), var(--gold-700, #92670a));
}
.sow-hero-medal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--gold-700, #92670a);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.sow-hero-medal-icon {
    font-size: 1.1rem;
    line-height: 1;
}
.sow-hero-body {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.sow-hero-avatar {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--bg-3, #f4f6f4);
    border: 3px solid var(--gold-500, #d99a13);
    overflow: hidden;
    display: grid;
    place-items: center;
}
.sow-hero-avatar img {
    width: 100%; height: 100%; object-fit: cover;
}
.sow-hero-avatar-initials {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gold-700, #92670a);
}
.sow-hero-content {
    flex: 1 1 220px;
    min-width: 0;
}
.sow-hero-name {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sow-hero-name a {
    color: var(--ink, #1b2520);
    text-decoration: none;
}
.sow-hero-name a:hover {
    color: var(--green-700, #0b6b34);
}
.sow-hero-tagline {
    margin: 3px 0 4px;
    color: var(--muted, #6b7570);
    font-size: .85rem;
}
.sow-hero-reason {
    margin: 0;
    font-size: .82rem;
    color: var(--ink-2, #2d3a35);
}
.sow-hero-trust {
    flex-shrink: 0;
}
.sow-hero-cta {
    flex-shrink: 0;
}

@media (max-width: 540px) {
    .sow-hero-body { gap: 12px; }
    .sow-hero-avatar { width: 56px; height: 56px; }
    .sow-hero-name { font-size: 1.05rem; }
    .sow-hero-cta { width: 100%; text-align: center; }
}

/* End /verified chunk 13 ============================================ */

/* ====================================================================
 * Product card live signals (chunk 14, 2026-05-15)
 *
 *   1. .product-viewers          — "🔥 X viewing now" badge, bottom-right
 *                                  of the thumbnail. Hidden by default
 *                                  (the `hidden` attribute); shown when
 *                                  count >= 2.
 *   2. .product-thumb--just-listed — gold ring pulse for the first 30
 *                                  minutes after a listing posts.
 *
 * Both are additive — pages that don't populate viewers_now /
 * is_just_listed on items will not show either decoration.
 * ==================================================================== */

/* ----- Viewer count badge ----- */
.product-viewers {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: var(--radius-pill, 999px);
    background: rgba(15, 23, 20, .82);    /* dark glass — pops on any thumb */
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: none;                 /* click passes through to the card */
    transition: opacity .25s var(--ease-out, cubic-bezier(.22,.61,.36,1));
    opacity: 1;
    z-index: 2;
}
.product-viewers[hidden] {
    display: none;
}
.product-viewers-flame {
    font-size: .85rem;
    line-height: 1;
    /* Subtle flicker — gives the badge a sense of "live" without
       being distracting. */
    animation: tm-flame-flicker 2.4s ease-in-out infinite;
}
.product-viewers-count {
    font-variant-numeric: tabular-nums;
}
.product-viewers-label {
    font-weight: 500;
    opacity: .9;
}
@media (max-width: 540px) {
    .product-viewers { font-size: .68rem; padding: 3px 7px; }
    .product-viewers-label { display: none; }   /* mobile: just "🔥 3" */
}

@keyframes tm-flame-flicker {
    0%, 100% { transform: scale(1);   opacity: 1;   }
    50%      { transform: scale(1.15); opacity: .85; }
}

/* ----- Just-listed pulse ----- */
.product-thumb--just-listed {
    position: relative;
    /* Inner box-shadow + outline create the dual gold-ring effect.
       The keyframes vary the spread + opacity for the pulse. */
    box-shadow: 0 0 0 2px var(--gold-500, #d99a13),
                0 0 0 4px var(--gold-200, #fde68a);
    animation: tm-just-listed-pulse 2.2s ease-out infinite;
}
@keyframes tm-just-listed-pulse {
    0% {
        box-shadow: 0 0 0 2px var(--gold-500, #d99a13),
                    0 0 0 0   rgba(217, 154, 19, .55);
    }
    70% {
        box-shadow: 0 0 0 2px var(--gold-500, #d99a13),
                    0 0 0 10px rgba(217, 154, 19, 0);
    }
    100% {
        box-shadow: 0 0 0 2px var(--gold-500, #d99a13),
                    0 0 0 0   rgba(217, 154, 19, 0);
    }
}

/* Optional small "Just listed" ribbon-like tag at the top of a fresh
   card. Sits to the right of trust pills (or stand-alone if none). */
.product-card--just-listed .product-thumb::after {
    content: 'Just listed';
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 8px;
    border-radius: var(--radius-pill, 999px);
    background: var(--gold-600, #b8870c);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1;
    z-index: 3;
    /* The thumb already pulses — keep this ribbon static so the eye
       has something stable to read. */
    box-shadow: 0 1px 3px rgba(13, 20, 17, .25);
}
/* When there's an existing photo-count chip in the top-right, the
   ribbon needs to nudge so they don't stack. The photo-count chip
   has a tight inset; this offset is enough to separate them. */
.product-card--just-listed .product-thumb:has(.photo-count)::after {
    right: 8px;
    top: 32px;
}

/* Respect reduced motion — kill the pulse + flame flicker for users
   who've asked the browser to slow things down. */
@media (prefers-reduced-motion: reduce) {
    .product-thumb--just-listed { animation: none; }
    .product-viewers-flame      { animation: none; }
}

/* End chunk 14 ======================================================= */

/* ====================================================================
 * Buyer notifications inbox (chunk 16, 2026-05-15)
 *
 * Visual layers:
 *   1. .notif-group / .notif-group-title  — date-grouped sections
 *      (Today / Yesterday / Earlier this week / Earlier)
 *   2. .notif-row                          — one notification card
 *      • icon column on the left (themed by .notif-icon--<tier>)
 *      • body in the middle (title, message, meta)
 *      • the whole row is the link
 *   3. .notif-row--unread                  — gold left-border accent
 *      + small filled dot to the right of the title
 *
 * Four color tiers, used by both the icon background and the type pill:
 *   green  — good news (price drop hit, listing approved)
 *   gold   — engagement (seller-of-week, review received)
 *   indigo — social (new follower, watchlist share)
 *   red    — needs attention (listing rejected, admin alert)
 *   gray   — neutral default (info, listing submitted, video processing)
 * ==================================================================== */

/* ----- Date groups ----- */
.notif-group { margin-top: 18px; }
.notif-group:first-of-type { margin-top: 12px; }
.notif-group-title {
    margin: 0 0 8px 2px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted, #6b7570);
}

/* ----- Inbox toolbar tweaks (existing class — small additions) ----- */
.inbox-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
    padding: 6px 4px;
}
.inbox-toolbar-info {
    font-size: .82rem;
    color: var(--muted, #6b7570);
}

/* ----- Notification list + row ----- */
.notif-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.notif-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--line, #e6e9e7);
    border-left-width: 3px;
    border-left-color: transparent;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    transition: background .15s var(--ease-out, cubic-bezier(.22,.61,.36,1)),
                border-color .15s var(--ease-out, cubic-bezier(.22,.61,.36,1)),
                transform .12s var(--ease-out, cubic-bezier(.22,.61,.36,1));
}
.notif-row:hover {
    background: var(--bg-3, #f4f6f4);
    border-color: var(--line-2, #d8dcd9);
    /* Subtle lift to indicate clickable */
    transform: translateY(-1px);
}
.notif-row--unread {
    background: rgba(212, 160, 23, .04);
    border-left-color: var(--gold-500, #d99a13);
}
.notif-row--unread:hover {
    background: rgba(212, 160, 23, .08);
}

/* ----- Icon column ----- */
.notif-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
}
.notif-icon--green  { background: #dcfce7; color: #166534; }
.notif-icon--gold   { background: var(--gold-100, #fef3c7); color: var(--gold-700, #92670a); }
.notif-icon--indigo { background: #e0e7ff; color: #3730a3; }
.notif-icon--red    { background: #fee2e2; color: #991b1b; }
.notif-icon--gray   { background: var(--bg-3, #f4f6f4); color: var(--muted, #6b7570); }

/* ----- Body ----- */
.notif-body {
    flex: 1 1 auto;
    min-width: 0;
}
.notif-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.notif-title {
    color: var(--ink, #1b2520);
    font-size: .94rem;
    font-weight: 600;
    line-height: 1.3;
    /* No clamp — the inbox is a place to read, not skim. */
}
.notif-unread-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold-500, #d99a13);
    box-shadow: 0 0 0 3px rgba(217, 154, 19, .15);
}
.notif-message {
    margin: 3px 0 0;
    color: var(--ink-2, #2d3a35);
    font-size: .85rem;
    line-height: 1.45;
}
.notif-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    font-size: .72rem;
    color: var(--muted, #6b7570);
}
.notif-type-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-pill, 999px);
    font-weight: 600;
    line-height: 1.5;
}
.notif-type-pill--green  { background: #dcfce7; color: #166534; }
.notif-type-pill--gold   { background: var(--gold-100, #fef3c7); color: var(--gold-700, #92670a); }
.notif-type-pill--indigo { background: #e0e7ff; color: #3730a3; }
.notif-type-pill--red    { background: #fee2e2; color: #991b1b; }
.notif-type-pill--gray   { background: var(--bg-3, #f4f6f4); color: var(--muted, #6b7570); }
.notif-time {
    color: var(--muted, #6b7570);
}

/* ----- Empty state ----- */
.notif-empty {
    margin: 24px 0;
    padding: 36px 24px;
    border: 1px dashed var(--line, #e6e9e7);
    border-radius: 12px;
    background: var(--bg-2, #fafbfa);
    text-align: center;
}
.notif-empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    color: var(--gold-500, #d99a13);
}
.notif-empty-title {
    margin: 0 0 6px;
    font-size: 1.1rem;
    color: var(--ink, #1b2520);
}
.notif-empty-text {
    margin: 0 0 14px;
    color: var(--muted, #6b7570);
    font-size: .9rem;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
}
.notif-empty-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ----- Mobile ----- */
@media (max-width: 540px) {
    .notif-row {
        padding: 12px 14px;
        gap: 10px;
    }
    .notif-icon {
        width: 34px;
        height: 34px;
    }
    .notif-icon svg {
        width: 17px;
        height: 17px;
    }
    .notif-title {
        font-size: .9rem;
    }
    .notif-meta {
        flex-wrap: wrap;
        gap: 6px;
    }
}

/* End buyer notifications chunk 16 =================================== */