/* UI font: Selawik (SIL Open Font License) — an open, metric-compatible
   substitute for Segoe UI. Uses the visitor's locally installed Segoe UI if
   present, otherwise serves Selawik. No proprietary font is redistributed. */
@font-face { font-family:'Segoe UI'; src:local('Segoe UI'), url('/fonts/selawk.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Segoe UI'; src:local('Segoe UI Semibold'), url('/fonts/selawksb.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Segoe UI'; src:local('Segoe UI Bold'), url('/fonts/selawkb.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Segoe UI'; src:local('Segoe UI Italic'), url('/fonts/selawk.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap; }

:root {
  --blue:#2563eb; --blue-d:#1d4ed8; --blue-100:#e8f0fe;
  --amber:#f59e0b; --amber-d:#d97f06; --amber-50:#fff6e6;
  --ink:#1b2430; --muted:#67727e; --bg:#f4f7fb; --card:#fff; --line:#e6eaef;
  --gold:#f5a623; --red:#e0533d; --green:#1f9d55;
  --radius:12px; --shadow:0 1px 3px rgba(20,30,40,.08),0 6px 18px rgba(20,30,40,.06);
}
* { box-sizing:border-box; }
html { height:100%; }
body { margin:0; min-height:100vh; display:flex; flex-direction:column;
  background:var(--bg); color:var(--ink);
  font:16px/1.55 "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
/* sticky footer: the content area grows to fill, footer always sits at the bottom */
main.wrap { flex:1 0 auto; }
.footer { flex-shrink:0; }
a { color:inherit; text-decoration:none; }
.wrap { max-width:1180px; margin:0 auto; padding:0 18px; width:100%; }
.muted { color:var(--muted); }
h1,h2,h3,h4 { letter-spacing:-.01em; }
::selection { background:var(--blue); color:#fff; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.btn, .card, .cat-main, .promo a, .strip .item, input, select, textarea { transition:all .15s ease; }
.btn:active { transform:translateY(1px); }

/* ===== top bar ===== */
.topbar { background:linear-gradient(90deg,var(--blue),var(--blue-d)); color:#fff; position:sticky; top:0; z-index:60; }
.topbar-inner { display:flex; align-items:center; gap:18px; height:64px; }
.brand { font-size:25px; font-weight:800; color:#fff; letter-spacing:-.5px; padding-left:6px; }
.brand span { color:var(--amber); }
.brand .tld { color:#cdddff; font-weight:700; font-size:.66em; margin-left:1px; }
.topbar-search { flex:1; display:flex; max-width:540px; background:#fff; border-radius:10px; overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.12); transition:box-shadow .15s; }
.topbar-search:focus-within { box-shadow:0 0 0 3px rgba(245,158,11,.45); }
.topbar-search input { flex:1; border:0; padding:10px 14px; font-size:14px; outline:none; }
.topbar-search button { border:0; background:#fff; color:var(--blue); padding:0 16px; font-size:16px; cursor:pointer; }
.topbar-search button:hover { color:var(--blue-d); }
.topbar-nav { display:flex; align-items:center; gap:14px; font-size:14px; margin-left:auto; font-weight:600; }
.topbar-nav a { color:#eaf1ff; }
.topbar-nav a:not(.icon):not(.cta):hover { color:#fff; text-decoration:underline; text-underline-offset:4px; }
.topbar-nav .who { color:#cfe0ff; font-weight:600; }
.topbar-nav .icon { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.16);
  display:inline-flex; align-items:center; justify-content:center; font-size:16px; position:relative;
  transition:background .15s, transform .15s; }
.topbar-nav .icon:hover { background:rgba(255,255,255,.32); transform:translateY(-1px); }
.topbar-nav .lbl { display:none; }
.menu-toggle { display:none; border:0; background:rgba(255,255,255,.16); color:#fff; width:38px; height:38px;
  border-radius:50%; font-size:18px; cursor:pointer; align-items:center; justify-content:center; }
.menu-toggle:hover { background:rgba(255,255,255,.3); }
.topbar-nav .icon .dot { position:absolute; top:-3px; right:-3px; background:var(--amber); color:#3a2a00;
  font-size:10px; font-weight:800; min-width:17px; height:17px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 3px; }
.cta { background:var(--amber); color:#3a2a00 !important; padding:9px 18px; border-radius:8px; font-weight:800; }
.cta:hover { background:var(--amber-d); }
button.link { background:none; border:0; color:#eaf1ff; cursor:pointer; font:inherit; padding:0; }

/* ===== hero ===== */
.hero { background:linear-gradient(180deg,var(--blue),var(--blue-d)); color:#fff; padding:26px 18px 32px; text-align:center; }
.hero h1 { font-size:22px; margin:0 0 14px; font-weight:700; }
.hero-search { display:flex; gap:0; max-width:720px; margin:0 auto; background:#fff; border-radius:10px; padding:6px; box-shadow:var(--shadow); flex-wrap:wrap; }
.hero-search .loc { border:0; border-right:1px solid var(--line); padding:12px 14px; font-size:15px; border-radius:8px 0 0 8px; color:var(--ink); background:#fff; min-width:150px; }
.hero-search .q { flex:1; border:0; padding:12px 14px; font-size:15px; outline:none; min-width:180px; }
.hero-search .go { border:0; background:var(--blue); color:#fff; padding:0 22px; border-radius:8px; font-weight:700; font-size:15px; cursor:pointer; }
.hero-search .go:hover { background:var(--blue-d); }
.hero-search .cam { border:0; border-left:1px solid var(--line); background:#fff; color:var(--blue);
  display:flex; align-items:center; padding:0 12px; cursor:pointer; }
.hero-search .cam:hover { color:var(--blue-d); }
.hero .hot { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; align-items:center; max-width:720px; margin:12px auto 0; }
.hero .hot-label { color:#dbe6ff; font-size:13px; }
.hero .hot a { background:rgba(255,255,255,.16); color:#fff; padding:4px 12px; border-radius:999px; font-size:13px; }
.hero .hot a:hover { background:rgba(255,255,255,.32); }
.hero-note { color:#cdddff; font-size:12.5px; margin:12px 0 0; }
.cam-note { margin:12px auto 0; max-width:560px; color:#fff; background:rgba(0,0,0,.18); padding:7px 13px; border-radius:8px; font-size:13px; }

/* ===== home layout ===== */
.home { display:grid; grid-template-columns:260px 1fr 290px; gap:20px; margin:22px 0; align-items:start; }
/* let the content columns shrink so the horizontal strip/grid can't blow out
   the layout and eat the right-hand page margin */
.home > div, .browse > div { min-width:0; }
@media (max-width:1100px){ .home{ grid-template-columns:260px 1fr; } .home-right{ display:none; } }
.home-right { display:flex; flex-direction:column; gap:16px; }

/* side "fresh listings" column */
.side-listings h3 { margin:0 0 10px; font-size:15px; }
.side-item { display:flex; gap:10px; padding:10px 0; border-top:1px solid var(--line); align-items:center; }
.side-item:first-of-type { border-top:0; }
.side-thumb { width:56px; height:56px; border-radius:8px; background:#eef2f7 center/cover no-repeat; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:24px; color:#b8c2cc; }
.side-meta { min-width:0; display:flex; flex-direction:column; }
.side-meta .price { color:var(--green); font-weight:800; font-size:14px; }
.side-title { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.side-meta .muted { font-size:12px; }
.side-more { display:block; margin-top:10px; padding-top:10px; border-top:1px solid var(--line);
  color:var(--blue); font-weight:600; font-size:13px; }

/* announcement strip */
.announce { background:linear-gradient(90deg,var(--amber-50),#fff,var(--blue-100)); border:1px solid var(--line);
  border-radius:10px; padding:10px 16px; margin:16px 0 0; display:flex; align-items:center; gap:10px; font-size:14px; }
.announce a { color:var(--blue); font-weight:700; margin-left:auto; }
.announce-x { border:0; background:none; font-size:18px; color:var(--muted); cursor:pointer; padding:0 4px; }

/* account card (right column on home) */
.acct-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; }
.acct-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.acct-avatar { width:48px; height:48px; border-radius:50%; background:var(--blue-100); color:var(--blue-d);
  display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; flex-shrink:0; }
.acct-links { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }
.acct-links a { display:flex; align-items:center; gap:6px; padding:9px 10px; border:1px solid var(--line);
  border-radius:8px; font-size:13px; font-weight:600; }
.acct-links a:hover { background:var(--blue-100); }
.acct-links a b { background:var(--green); color:#fff; font-size:11px; border-radius:9px; padding:0 6px; margin-left:auto; }
.acct-why { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; line-height:1.9; }
.cat-sidebar { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.cat-sidebar h3 { margin:0; padding:14px 16px; font-size:13px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); border-bottom:1px solid var(--line); }
.cat-row { position:relative; border-bottom:1px solid var(--line); }
.cat-row:last-child { border-bottom:0; }
.cat-main { display:flex; align-items:center; gap:12px; padding:11px 16px; transition:background .12s; }
.cat-row:hover .cat-main { background:var(--blue-100); }
.cat-main .ic { width:34px; height:34px; border-radius:8px; background:var(--blue-100); display:flex; align-items:center; justify-content:center; font-size:18px; }
.cat-main .nm { flex:1; font-weight:600; font-size:14px; }
.cat-main .nm small { display:block; color:var(--muted); font-weight:400; font-size:12px; }
.cat-main .chev { color:var(--muted); }
/* hover flyout of subcategories */
.subflyout { display:none; position:absolute; top:0; left:100%; min-width:260px; max-width:300px;
  background:var(--card); border:1px solid var(--line); border-radius:0 10px 10px 0;
  box-shadow:var(--shadow); padding:8px 0; z-index:40; max-height:420px; overflow:auto; }
.cat-row:hover .subflyout { display:block; }
.subflyout a { display:block; padding:8px 16px; font-size:13.5px; }
.subflyout a:hover { background:var(--blue-100); color:var(--blue-d); }

/* promo tiles */
.promo { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px; }
.promo a { border-radius:var(--radius); padding:18px; display:flex; flex-direction:column; gap:8px; min-height:96px; justify-content:space-between; font-weight:700; transition:.15s; }
.promo a:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.promo .e { font-size:26px; }
.promo .t1 { background:var(--blue-100); color:var(--blue-d); }
.promo .t2 { background:var(--amber-50); color:var(--amber-d); }
.promo .t3 { background:#e7f6ee; color:var(--green); }
.promo .t4 { background:#f0eafc; color:#6d28d9; }

/* section heading */
.section-title { font-size:19px; margin:26px 0 14px; display:flex; align-items:center; justify-content:space-between; }
.section-title a { font-size:14px; color:var(--blue); font-weight:600; }

/* popular categories strip */
.strip { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(120px,1fr); gap:14px; overflow-x:auto; padding-bottom:6px; }
.strip .item { text-align:center; }
.strip .circle { width:84px; height:84px; border-radius:50%; margin:0 auto 8px; background:var(--blue-100);
  display:flex; align-items:center; justify-content:center; font-size:34px; border:1px solid var(--line); }
.strip .lbl { font-size:13px; font-weight:600; }
.strip .lbl small { display:block; color:var(--muted); font-weight:400; }

/* ===== provider cards ===== */
.cats { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.cat { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; text-align:center; transition:.15s; }
.cat:hover { box-shadow:var(--shadow); transform:translateY(-2px); }
.cat .ic { font-size:30px; } .cat .nm { margin-top:8px; font-weight:600; font-size:14px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
/* trending grid on the home page: always >=3 columns on desktop, even in the narrow centre column */
.home .grid { grid-template-columns:repeat(3,1fr); }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:.15s; display:flex; flex-direction:column; }
.card:hover { box-shadow:var(--shadow); transform:translateY(-2px); }
.card .thumb { height:150px; background:#eef2f7 center/cover no-repeat; display:flex; align-items:center; justify-content:center; font-size:42px; color:#b8c2cc; position:relative; }
.card .thumb .badge-featured { position:absolute; top:8px; left:8px; }
.card .body { padding:14px; flex:1; display:flex; flex-direction:column; }
.card .cat-tag { font-size:12px; color:var(--blue); font-weight:600; }
.card h3 { margin:4px 0 2px; font-size:16px; }
.card .loc { color:var(--muted); font-size:13px; }
.card .rating { color:var(--gold); font-size:13px; margin-top:6px; }
.card .rating small { color:var(--muted); }
.badge { display:inline-block; font-size:11px; font-weight:700; padding:2px 7px; border-radius:999px; }
.badge-featured { background:var(--amber-50); color:var(--amber-d); }
.badge-premium { background:var(--blue-100); color:var(--blue-d); }
.badge-pending { background:var(--amber-50); color:var(--amber-d); }
.badge-approved { background:#e7f6ee; color:#177544; }
.badge-rejected,.badge-suspended { background:#fdeae7; color:#b23a26; }

/* ===== buttons ===== */
.btn { display:inline-block; padding:9px 15px; border-radius:8px; font-weight:600; cursor:pointer; border:1px solid var(--line); background:var(--card); color:var(--ink); }
.btn-primary { background:var(--blue); color:#fff; border-color:var(--blue); }
.btn-primary:hover { background:var(--blue-d); }
.btn-cta { background:var(--amber); color:#3a2a00; border-color:var(--amber); }
.btn-cta:hover { background:var(--amber-d); }
.btn-sm { padding:5px 10px; font-size:13px; }
.btn-danger { background:var(--red); color:#fff; border-color:var(--red); }
.btn-ghost { background:transparent; }

/* flash */
.flash { margin:16px 0; padding:11px 14px; border-radius:8px; font-size:14px; }
.flash-success { background:#e7f6ee; color:#177544; }
.flash-error { background:#fdeae7; color:#b23a26; }
.flash-info { background:var(--blue-100); color:var(--blue-d); }

/* filters */
.filters { display:flex; gap:8px; flex-wrap:wrap; background:var(--card); padding:14px; border:1px solid var(--line); border-radius:var(--radius); margin:18px 0; }
.filters input, .filters select { padding:9px 11px; border:1px solid var(--line); border-radius:8px; font-size:14px; }
.filters input[name=q] { flex:1; min-width:180px; }

/* profile */
.profile { display:grid; grid-template-columns:1fr 320px; gap:22px; margin:22px 0; align-items:start; }
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.gallery img { width:100%; height:120px; object-fit:cover; border-radius:8px; }
.panel { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; }
.panel h2 { margin:0 0 6px; font-size:24px; }
.contact a, .contact button { display:block; width:100%; padding:11px; border:0; border-radius:8px;
  text-align:center; font-weight:600; font-size:14px; font-family:inherit; cursor:pointer; margin-top:8px; }
.contact .call { background:var(--blue); color:#fff; }
.contact .wa { background:#25d366; color:#fff; }
#contactReveal { display:flex; flex-direction:column; }
.review { border-top:1px solid var(--line); padding:12px 0; }
.review .top { display:flex; justify-content:space-between; }
.review .stars { color:var(--gold); }
.field { margin-bottom:12px; }
.field label { display:block; font-size:13px; color:var(--muted); margin-bottom:4px; }
.field input, .field select, .field textarea { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:14px; font-family:inherit; }

/* auth */
.auth { max-width:440px; margin:36px auto; }
.or-divider { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:13px; margin:16px 0; }
.or-divider::before, .or-divider::after { content:""; flex:1; height:1px; background:var(--line); }
.btn-google { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; background:#fff; color:#3c4043; border:1px solid #dadce0; font-weight:600; }
.btn-google:hover { background:#f7f8f8; }

/* tables (admin) */
table { width:100%; border-collapse:collapse; background:var(--card); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
th, td { padding:11px 13px; text-align:left; border-bottom:1px solid var(--line); font-size:14px; }
th { background:#fafbfc; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.4px; }
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:18px 0; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; }
.stat .n { font-size:30px; font-weight:800; } .stat .l { color:var(--muted); font-size:13px; }
.tabs { display:flex; gap:8px; margin:16px 0; flex-wrap:wrap; }
.tabs a { padding:7px 13px; border-radius:999px; background:var(--card); border:1px solid var(--line); font-size:13px; }
.tabs a.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.inline { display:inline; }
.scroll-sentinel { text-align:center; padding:24px 0; color:var(--muted); min-height:44px; }
.pager { display:flex; gap:8px; justify-content:center; margin:22px 0; }
.pager a, .pager span { padding:7px 12px; border-radius:8px; border:1px solid var(--line); background:var(--card); }
.pager .on { background:var(--blue); color:#fff; border-color:var(--blue); }

/* footer */
.footer { background:var(--ink); color:#c9d2da; margin-top:48px; padding:34px 0 18px; }
.footer .brand { color:#fff; }
.footer-inner { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.footer p { color:#9aa6b1; max-width:280px; }
.footer-links { display:flex; flex-direction:column; gap:8px; }
.footer-copy { margin-top:22px; padding-top:16px; border-top:1px solid #2b3744; font-size:13px; color:#8d99a4; }

/* ===== browse / category results (jiji-style) ===== */
.static-page { max-width:820px; margin:22px auto; }
.static-page h1 { margin:0 0 14px; }
.static-body h3 { margin:18px 0 4px; font-size:17px; }
.static-body p { margin:0 0 10px; }
.crumb { font-size:13px; color:var(--muted); margin:16px 0 12px; }
.crumb a { color:var(--blue); }
.browse { display:grid; grid-template-columns:250px 1fr; gap:20px; align-items:start; margin-bottom:24px; }
.filter-rail { display:flex; flex-direction:column; gap:14px; position:sticky; top:78px; }
.filter-toggle { display:none; }
.frail-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px; }
.frail-card h4 { margin:0 0 10px; font-size:13px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); }
.frail-card.head { background:var(--blue); }
.frail-card.head h4 { color:#fff; margin:0; }
.frail-card select, .frail-card input[type=text] { width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-size:14px; }
.frail-cats { max-height:320px; overflow:auto; }
.frail-cats a { display:flex; justify-content:space-between; padding:7px 0; font-size:14px; border-bottom:1px solid var(--line); }
.frail-cats a:last-child { border-bottom:0; }
.frail-cats a.on { color:var(--blue); font-weight:700; }
.frail-cats a small { color:var(--muted); }
.frail-opt { display:flex; align-items:center; gap:8px; padding:5px 0; font-size:14px; cursor:pointer; }
.results-head { font-size:22px; margin:0 0 4px; }
.results-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 0 16px; flex-wrap:wrap; }
.results-bar .count { color:var(--muted); font-size:14px; }
.results-bar .tools { display:flex; align-items:center; gap:10px; }
.results-bar label { font-size:13px; color:var(--muted); }
.results-bar select { padding:7px 10px; border:1px solid var(--line); border-radius:8px; font-size:14px; background:#fff; }
.viewtoggle { display:flex; gap:4px; }
.viewtoggle a { padding:6px 9px; border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--muted); line-height:1; }
.viewtoggle a.on { background:var(--blue); color:#fff; border-color:var(--blue); }
.grid.listview { grid-template-columns:1fr; }
.grid.listview .card { flex-direction:row; }
.grid.listview .card .thumb { width:210px; min-height:140px; height:auto; flex-shrink:0; }
.grid.listview .card .body { flex:1; }

/* ===== ad cards / detail / tags ===== */
.card .price { font-size:16px; font-weight:800; color:var(--green); }
.card .price small { color:var(--muted); font-weight:600; font-size:11px; }
.card h3 { margin:3px 0 4px; font-size:15px; font-weight:600; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tag { display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:6px; background:#eef2f7; color:var(--muted); margin-right:4px; }
.tag-ok { background:#e7f6ee; color:#177544; }
.taglist { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:8px; }
.price-lg { font-size:28px; font-weight:800; color:var(--green); margin-top:14px; }
.price-lg small { font-size:14px; color:var(--muted); font-weight:600; }
/* photo carousel on the listing detail page */
.carousel { margin-bottom:6px; }
.carousel-main { position:relative; border-radius:10px; overflow:hidden; background:#0d1320; }
.carousel-main img { width:100%; height:440px; object-fit:contain; display:block; }
.carousel-main.noimg { height:300px; display:flex; align-items:center; justify-content:center; font-size:84px; color:#cbd5e1; background:#eef2f7; }
.carousel-nav { position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border:0;
  border-radius:50%; background:rgba(255,255,255,.9); color:var(--ink); font-size:26px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.25); }
.carousel-nav:hover { background:#fff; }
.carousel-nav.prev { left:12px; } .carousel-nav.next { right:12px; }
.carousel-count { position:absolute; bottom:12px; right:12px; background:rgba(0,0,0,.6); color:#fff;
  font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; }
.carousel-thumbs { display:flex; gap:8px; margin-top:10px; overflow-x:auto; padding-bottom:4px; }
.carousel-thumbs img { width:74px; height:74px; object-fit:cover; border-radius:8px; cursor:pointer;
  border:2px solid transparent; flex-shrink:0; }
.carousel-thumbs img.on { border-color:var(--blue); }
.carousel-thumbs img:hover { border-color:var(--blue-d); }
/* "more photos" badge on cards */
.photo-count { position:absolute; bottom:8px; left:8px; background:rgba(0,0,0,.6); color:#fff;
  font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; }

/* PPP TV advertising */
.badge-tv { background:#ec1c93; color:#fff; }
.card .thumb .badge-tv { position:absolute; top:8px; right:8px; }
.btn-tv { background:#ec1c93; color:#fff; border-color:#ec1c93; }
.btn-tv:hover { filter:brightness(1.06); color:#fff; }
.ppptv-brand { display:flex; align-items:center; min-height:60px; }
.ppptv-brand img { max-height:66px; width:auto; }
.ppptv-text { font-weight:900; font-size:34px; color:#ec1c93; letter-spacing:-1px; }
.ppptv-text span { background:#29abe2; color:#fff; font-size:16px; padding:1px 7px; border-radius:6px; vertical-align:super; margin-left:5px; letter-spacing:0; }
.ppptv-banner { display:flex; align-items:center; gap:16px;
  background:linear-gradient(135deg,#ff2d8e 0%,#b026ff 55%,#2d9bff 100%);
  color:#fff; border-radius:12px; padding:12px 18px; margin-top:14px; font-size:14px; box-shadow:0 4px 14px rgba(176,38,255,.28); }
.ppptv-banner:hover { filter:brightness(1.04); }
.ppptv-banner-logo { height:30px; background:#fff; border-radius:6px; padding:4px 7px; flex-shrink:0; }
.ppptv-banner strong { font-weight:800; }
.safety ul { margin:6px 0 0; padding-left:18px; color:var(--muted); font-size:14px; line-height:1.8; }

/* my-ads rows */
.myad { display:flex; gap:14px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:12px; align-items:center; }
.myad-thumb { width:90px; height:90px; border-radius:8px; background:#eef2f7 center/cover no-repeat; display:flex; align-items:center; justify-content:center; font-size:30px; color:#b8c2cc; flex-shrink:0; }
.myad-body { flex:1; min-width:0; }
.myad-body .price { color:var(--green); font-weight:800; }
.myad-actions { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; max-width:340px; }
.badge-sold { background:#e9eefc; color:#3551b5; }
.badge-verified { background:#e7f6ee; color:#177544; }
/* verified badge over the photo on cards */
.card .thumb .vbadge { position:absolute; bottom:8px; right:8px; background:#1f9d55; color:#fff;
  font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; box-shadow:0 1px 3px rgba(0,0,0,.3); }

/* footer grid */
.footer-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.footer-grid h4 { color:#fff; font-size:14px; margin:0 0 10px; }
.footer-grid a { display:block; color:#9aa6b1; padding:4px 0; font-size:14px; }
.footer-grid a:hover { color:#fff; }

/* ===== message centre ===== */
.msgs { display:grid; grid-template-columns:340px 1fr; gap:16px; margin:18px 0; height:calc(100vh - 170px); min-height:460px; }
.msg-list { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow-y:auto; }
.msg-list-head { padding:14px 16px; border-bottom:1px solid var(--line); }
.msg-list-head h2 { margin:0; font-size:18px; }
.msg-item { display:flex; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); align-items:center; }
.msg-item:hover, .msg-item.on { background:var(--blue-100); }
.msg-thumb { width:46px; height:46px; border-radius:8px; background:#eef2f7 center/cover no-repeat; flex-shrink:0; }
.msg-meta { flex:1; min-width:0; }
.msg-top { display:flex; justify-content:space-between; gap:8px; font-size:13px; }
.msg-top .muted { font-size:12px; }
.msg-sub { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-last { font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-item .dot { background:var(--green); color:#fff; font-size:11px; font-weight:700; min-width:20px; height:20px; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.msg-pane { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); display:flex; flex-direction:column; }
.msg-pane.empty { align-items:center; justify-content:center; }
.msg-pane-head { padding:14px 16px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.msg-thread { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:8px; background:#f8fafc; }
.bubble { max-width:72%; padding:9px 13px; border-radius:14px; font-size:14px; line-height:1.4; position:relative; }
.bubble.them { background:#fff; border:1px solid var(--line); align-self:flex-start; border-bottom-left-radius:4px; }
.bubble.me { background:var(--blue); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.bubble .bt { display:block; font-size:10px; opacity:.65; margin-top:3px; }
.msg-compose { display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); }
.msg-compose input { flex:1; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:14px; }

/* ===== notifications ===== */
.notif-list { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.notif { display:flex; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); align-items:flex-start; }
.notif:last-child { border-bottom:0; }
.notif:hover { background:#f8fafc; }
.notif.unread { background:var(--blue-100); }
.notif-ic { font-size:20px; }
.notif-body { flex:1; }
.notif-time { font-size:12px; color:var(--muted); margin-top:3px; }

/* ===== polish ===== */
.topbar { box-shadow:0 2px 8px rgba(20,30,40,.12); }
.panel { box-shadow:0 1px 2px rgba(20,30,40,.05); }
.card { overflow:hidden; }
.card .thumb { transition:transform .25s ease; }
.card:hover .thumb { transform:scale(1.04); }
.card:hover { border-color:#d6deea; }
.section-title { font-weight:700; }
.btn-primary, .cta { box-shadow:0 1px 2px rgba(20,30,40,.12); }
.hero h1 { text-shadow:0 1px 2px rgba(0,0,0,.12); }

/* ===== responsive ===== */
@media (max-width:900px){
  .home{grid-template-columns:1fr;}
  .cat-sidebar{display:none;}            /* strip + tiles cover categories on mobile */
  .browse{grid-template-columns:1fr;}
  /* collapse the long filter rail so listings show first; reveal on tap */
  .filter-rail{position:static; display:none;}
  .filter-rail.open{display:flex;}
  .filter-toggle{display:block; width:100%; margin-bottom:14px;}
  .promo{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:760px){
  .profile{grid-template-columns:1fr;}
  .topbar-inner{position:relative; min-height:56px; flex-wrap:wrap; gap:8px; padding-top:8px; padding-bottom:8px;}
  .brand{font-size:22px; margin-right:auto;}
  .cta{padding:7px 13px;}
  .menu-toggle{display:inline-flex;}
  /* search always present as a full-width row under the logo/actions */
  .topbar-search{ order:6; flex-basis:100%; max-width:none; margin:2px 0 0; }
  /* nav becomes a tap-to-open dropdown card */
  .topbar-nav{ position:absolute; top:calc(100% + 6px); right:8px; min-width:230px; max-width:82vw;
    flex-direction:column; align-items:stretch; gap:2px; margin-left:0; font-size:14px; font-weight:600;
    background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:12px;
    box-shadow:0 12px 30px rgba(20,30,40,.22); padding:6px; display:none; z-index:70; }
  .topbar-nav.open{ display:flex; }
  .topbar-nav a, .topbar-nav form button{ color:var(--ink); display:flex; align-items:center; gap:10px;
    width:100%; padding:11px 12px; border-radius:8px; }
  .topbar-nav a:hover{ background:var(--blue-100); color:var(--ink); text-decoration:none; }
  .topbar-nav .icon{ background:none; width:auto; height:auto; border-radius:8px; font-size:17px; justify-content:flex-start; }
  .topbar-nav .icon:hover{ transform:none; background:var(--blue-100); }
  .topbar-nav .lbl{ display:inline; }
  .topbar-nav .dot{ position:static; margin-left:auto; }
  .topbar-nav form{ width:100%; }
  .topbar-nav form button.link{ color:var(--red); width:100%; text-align:left; }
  .hero{padding:18px 14px 22px;}
  .hero h1{font-size:20px; margin-bottom:10px;}
  .hero-search{padding:5px;}
  .hero-search .loc{min-width:74px; padding:10px 6px; font-size:13px;}
  .hero-search .q{padding:10px; font-size:14px; min-width:0;}
  .hero-search .cam{display:none;}            /* hide image-search placeholder on small screens */
  .hero-search .go{padding:0 14px; font-size:14px;}
  .hero .hot{gap:6px; margin-top:10px;}
  .gallery{grid-template-columns:repeat(2,1fr);}
  table{display:block; overflow-x:auto; white-space:nowrap;}
  .grid.listview .card{flex-direction:column;}
  .grid.listview .card .thumb{width:100%;}
  .stat .n{font-size:24px;}
  .footer-grid{grid-template-columns:repeat(2,1fr);}
  .myad{flex-wrap:wrap;} .myad-actions{max-width:none; justify-content:flex-start;}
  .msgs{grid-template-columns:1fr; height:auto;}
  .msgs .msg-pane.empty{display:none;}
  .msgs.thread .msg-list{display:none;}
  .msg-thread{min-height:55vh;}
}
.backlink{display:none;}
@media (max-width:760px){ .backlink{display:inline;} }
@media (max-width:520px){
  .grid, .home .grid{grid-template-columns:1fr 1fr;}
  .card .thumb{height:110px; font-size:30px;}
  .card .body{padding:10px;}
  .card h3{font-size:14px;}
  .promo a{min-height:78px; padding:14px;}
  .brand{font-size:20px;}
}