/* ==========================================================================
   Advertentieplatform — voorkant, richting "Etalage"
   Foto's als muur, zwart-wit met één accentkleur, prijs als sticker op de foto. Letter: Onest.
   De accentkleur (--accent) en de tekst erop (--on-accent) komen uit het beheer (inline in <head>).
   ========================================================================== */

@font-face {
    font-family: "Onest";
    src: url("../fonts/onest-latin-var.woff2") format("woff2");
    font-weight: 400 800;
    font-display: swap;
}

:root {
    --bg: #FFFFFF; --soft: #F3F3F0; --line: #E6E5E0; --ink: #121212; --muted: #5E5E5A; --card: #FFFFFF;
    --accent: #FFD60A; --on-accent: #111111; --focus: #121212;
    --r: 16px; --font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bad: #B42318; --ok: #146C2E;
    color-scheme: light;
}
:root[data-theme="dark"] { --bg: #0F0F10; --soft: #1B1B1D; --line: #2C2C2F; --ink: #F3F3F0; --muted: #A6A6A2; --card: #161618; --focus: #F3F3F0; --bad: #FF9B8F; --ok: #7BD88F; color-scheme: dark; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --bg: #0F0F10; --soft: #1B1B1D; --line: #2C2C2F; --ink: #F3F3F0; --muted: #A6A6A2; --card: #161618; --focus: #F3F3F0; --bad: #FF9B8F; --ok: #7BD88F; color-scheme: dark; }
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
/* Voet altijd onderaan, ook op een korte pagina (inloggen, melding, lege lijst): de body is een kolom en de inhoud
   vult de vrije ruimte. dvh houdt rekening met de adresbalk op telefoons. */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
body > .foot { flex-shrink: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.02em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 8px; z-index: 99; font-weight: 600; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
[hidden] { display: none !important; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 16px; }
.wrap.narrow { max-width: 760px; }
@media (min-width: 900px) { .wrap { padding: 0 32px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ---------- Knoppen ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 12px; border: 0; font-weight: 650; text-decoration: none; cursor: pointer; white-space: nowrap; background: var(--soft); }
.btn .ic { width: 20px; height: 20px; }
.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-ink { background: var(--ink); color: var(--bg); }
.btn-line { background: none; box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-line:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-danger { background: none; color: var(--bad); box-shadow: inset 0 0 0 1.5px var(--bad); }
ul.help { padding-left: 1.2em; }
.btn-danger:hover { background: color-mix(in srgb, var(--bad) 10%, transparent); }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.iconbtn { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 0; background: none; cursor: pointer; text-decoration: none; }
.iconbtn:hover { background: var(--soft); }
.dot { position: absolute; top: 6px; right: 5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; display: grid; place-items: center; }

/* ---------- Kop ---------- */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 20px; min-height: 68px; flex-wrap: wrap; }
.logo { display: inline-flex; align-items: baseline; font-weight: 800; font-size: 26px; letter-spacing: -0.04em; text-decoration: none; line-height: 1; }
.logo i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--accent); margin-left: 2px; }
.logo img { max-height: 36px; width: auto; }
.search { flex: 1; display: flex; align-items: center; background: var(--soft); border-radius: 14px; min-height: 52px; padding: 4px 4px 4px 16px; gap: 10px; }
.search:focus-within { box-shadow: 0 0 0 2px var(--ink); }
.search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 16px; padding: 10px 0; }
.search input::placeholder { color: var(--muted); }
.search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.search .where { display: none; align-items: center; gap: 6px; color: var(--muted); padding: 0 6px 0 14px; border-left: 1px solid var(--line); white-space: nowrap; }
.search .where input { flex: none; width: 92px; font-size: 15px; color: var(--ink); }
.search .go { border: 0; background: var(--ink); color: var(--bg); font-weight: 600; border-radius: 11px; min-height: 44px; padding: 0 18px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.search .go .ic { width: 20px; height: 20px; }
.top-actions { display: flex; align-items: center; gap: 6px; }
.desk { display: none; }
@media (max-width: 899px) {
    .top .wrap { padding-top: 10px; padding-bottom: 12px; gap: 10px 12px; }
    .top .logo { order: 0; flex: 1; }
    .top-actions { order: 1; }
    .search { order: 2; flex-basis: 100%; }
    .search .go { padding: 0 14px; }
    .search .go span { display: none; }
    .search > .ic { display: none; }
}
@media (min-width: 900px) {
    .desk { display: inline-flex; }
    .search .where { display: flex; }
    .top .wrap { flex-wrap: nowrap; }   /* kop altijd op één regel */
}
@media (min-width: 900px) and (max-width: 1149px) { .search .where { display: none; } }

/* ---------- Menubalk onderin (mobiel) ---------- */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--bg); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
.tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 52px; justify-content: center; text-decoration: none; font-size: 12px; font-weight: 500; color: var(--muted); }
.tabbar a[aria-current] { color: var(--ink); font-weight: 700; }
.tabbar .ic { height: 32px; width: 32px; padding: 5px; }
.tabbar .place .ic { width: 48px; height: 32px; padding: 5px 13px; border-radius: 12px; background: var(--accent); color: var(--on-accent); }
.tabbar .dot { top: 2px; right: calc(50% - 22px); }
body { padding-bottom: 76px; }
@media (min-width: 900px) { .tabbar { display: none; } body { padding-bottom: 0; } }

/* ---------- Advertentiekaarten ---------- */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 28px 16px; } }
@media (min-width: 1100px) { .grid { grid-template-columns: repeat(5, 1fr); } .grid.g4 { grid-template-columns: repeat(4, 1fr); } }
.card { position: relative; text-decoration: none; display: block; min-width: 0; }
.card .ph { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: var(--soft); }
.card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card:hover .ph img { transform: scale(1.04); }
.ph-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }
.ph-empty .ic { width: 36px; height: 36px; opacity: .6; }
.price { position: absolute; left: 10px; bottom: 10px; background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 16px; letter-spacing: -0.01em; padding: 4px 9px; border-radius: 7px; font-variant-numeric: tabular-nums; }
.price small { font-weight: 600; font-size: 12px; }
.price.free { background: var(--ink); color: var(--bg); }
.tag { position: absolute; left: 10px; top: 10px; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: rgba(255, 255, 255, .94); color: #121212; }
.tag.weg { background: #121212; color: #fff; }
.tags { position: absolute; left: 10px; top: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.tags .tag { position: static; }
.card h3 { margin: 10px 2px 2px; font-size: 15px; font-weight: 500; line-height: 1.35; letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.meta { margin: 0 2px; font-size: 13.5px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; }
.biz { font-weight: 600; color: var(--ink); }

/* ---------- Secties op de home ---------- */
.sec { margin: 36px 0; }
.sec-h { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.sec-h h2, .sec-title { margin: 0; font-size: 24px; letter-spacing: -0.025em; line-height: 1.15; font-weight: 750; }
.sec-title { margin-bottom: 16px; }
.sec-h p { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
.more { font-weight: 600; font-size: 15px; display: inline-flex; gap: 4px; align-items: center; text-decoration: none; white-space: nowrap; }
.more .ic { width: 18px; height: 18px; }
.more:hover { text-decoration: underline; }
@media (min-width: 900px) { .sec { margin: 48px 0; } .sec-h h2, .sec-title { font-size: 30px; } }

/* Categorietegels: mobiel twee rijen om opzij te vegen, vanaf 900 px een raster met gelijke kolommen. Elke tegel is
   vierkant; zonder foto een icoon uit de eigen set (src/cat_icons.php) met één onderdeel in de accentkleur. */
.cats { display: grid; grid-auto-flow: column; grid-template-rows: auto auto; grid-auto-columns: 88px; gap: 18px 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; padding: 4px 16px 8px; margin: 0 -16px; scrollbar-width: none; }
.cats a { display: flex; flex-direction: column; min-width: 0; scroll-snap-align: start; text-decoration: none; }
.cat-tile { display: grid; place-items: center; aspect-ratio: 1; border-radius: 18px; background: var(--soft); overflow: hidden; margin-bottom: 8px; transition: background-color .15s ease; }
.cat-tile img { width: 100%; height: 100%; object-fit: cover; }
.cat-name { font-size: 13px; font-weight: 600; line-height: 1.25; hyphens: auto; overflow-wrap: break-word; }
.cat-n { color: var(--muted); font-size: 12.5px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.ci { width: 60%; max-width: 64px; height: auto; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; transition: stroke .15s ease; }
.ci .a { fill: var(--accent); }
.ci .b { fill: var(--soft); transition: fill .15s ease; }
.cats a:hover .cat-tile:not(.has-photo), .cats a:focus-visible .cat-tile:not(.has-photo) { background: var(--ink); }
.cats a:hover .ci, .cats a:focus-visible .ci { stroke: var(--bg); }
.cats a:hover .ci .b, .cats a:focus-visible .ci .b { fill: var(--ink); }
.cats a:hover .cat-name { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) {
    .cats { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 22px 14px; overflow: visible; margin: 0; padding: 4px 0; }
    .cat-tile { border-radius: 20px; margin-bottom: 10px; }
    .cat-name { font-size: 14px; }
}

.sell { background: var(--ink); color: var(--bg); border-radius: 24px; padding: 28px 22px; display: grid; gap: 24px; }
.sell h2 { margin: 0 0 8px; font-size: 28px; letter-spacing: -0.03em; line-height: 1.1; font-weight: 800; }
.sell p { margin: 0 0 20px; opacity: .78; max-width: 46ch; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; list-style: none; margin: 0; padding: 0; counter-reset: stap; }
.step { background: color-mix(in srgb, var(--bg) 8%, transparent); border-radius: 16px; padding: 14px 12px; counter-increment: stap; }
.step-ic { display: grid; place-items: center; aspect-ratio: 1; border-radius: 10px; background: color-mix(in srgb, var(--bg) 10%, transparent); }
.step-ic .ic { width: 40%; height: 40%; stroke-width: 1.5; }
.step:first-child .step-ic { background: var(--accent); color: var(--on-accent); }
.step b { display: block; margin-top: 10px; font-size: 14px; }
.step b::before { content: counter(stap) ". "; }
.step > span:not(.step-ic) { display: block; font-size: 13px; opacity: .7; }
@media (min-width: 900px) { .sell { grid-template-columns: 1fr 1.1fr; align-items: center; padding: 44px; } .sell h2 { font-size: 40px; } }

.terms { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0; margin: 0; list-style: none; font-size: 15px; }
.terms a { text-decoration: none; color: var(--muted); }
.terms a:hover { color: var(--ink); text-decoration: underline; }
.paid-note { font-size: 13px; color: var(--muted); }

/* ---------- Lege etalage (nog geen advertenties) ---------- */
.shelf { display: grid; gap: 28px; padding: 28px 0 8px; align-items: center; }
.kicker { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--muted); }
.kicker .ic { width: 18px; height: 18px; }
.shelf h1 { margin: 0 0 12px; font-size: 36px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; }
.shelf-text p { margin: 0 0 22px; color: var(--muted); font-size: 17px; max-width: 44ch; }
.shelf-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.card.ghost .ph { border: 1.5px dashed var(--line); background: var(--soft); }
.card.ghost .line { display: block; height: 10px; border-radius: 5px; background: var(--soft); margin: 12px 2px 0; }
.card.ghost .line.short { width: 55%; margin-top: 8px; }
.card.ghost:nth-child(n+3) { display: none; }
@media (min-width: 640px) { .shelf-cards { grid-template-columns: repeat(4, 1fr); } .card.ghost:nth-child(n+3) { display: block; } }
@media (min-width: 900px) { .shelf { grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 48px; padding-top: 48px; } .shelf h1 { font-size: 52px; } }

/* ---------- Pagina's en meldingen ---------- */
.crumbs { font-size: 14px; color: var(--muted); padding: 18px 0 6px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.crumbs li + li::before { content: "›"; margin-right: 4px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.prose { padding: 8px 0 24px; max-width: 68ch; }
.prose h1 { font-size: 34px; margin: 6px 0 18px; font-weight: 800; letter-spacing: -0.03em; }
.prose h2 { font-size: 21px; margin: 30px 0 8px; }
.prose p, .prose li { color: color-mix(in srgb, var(--ink) 86%, var(--bg)); }
.prose a { text-underline-offset: 2px; }
.page-message { padding: 56px 16px 40px; }
.page-message h1 { font-size: 34px; margin: 0 0 12px; font-weight: 800; letter-spacing: -0.03em; }
.page-message > p { color: var(--muted); font-size: 17px; max-width: 54ch; }
.summary { display: grid; gap: 0; margin: 24px 0 0; border-top: 1px solid var(--line); }
.summary div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.summary dt { color: var(--muted); }
.summary dd { margin: 0; font-weight: 600; text-align: right; }

/* ---------- Formulieren ---------- */
.btn-block { width: 100%; }
.btn-sm { min-height: 44px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field > label, .field legend { font-weight: 650; font-size: 15px; padding: 0; }
.field legend { margin-bottom: 6px; }
.opt { font-weight: 400; color: var(--muted); }
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .field select, .field textarea {
    width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); font-size: 16px; }
.field textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: color-mix(in srgb, var(--ink) 40%, var(--line)); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.field input[type="file"] { font-size: 14px; padding: 8px 0; }
.field input[type="file"]::file-selector-button { font: inherit; font-weight: 600; border: 0; border-radius: 10px; background: var(--soft); color: var(--ink); padding: 10px 14px; margin-right: 12px; cursor: pointer; }
.help { margin: 0; font-size: 14px; color: var(--muted); }
.help a { color: var(--ink); }
.err { margin: 0; font-size: 14px; font-weight: 600; color: var(--bad); }
.is-error input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .is-error textarea, .is-error select { border-color: var(--bad); }
.field-row { display: grid; gap: 18px; }
@media (min-width: 640px) { .field-row { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.check { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding: 10px 0; cursor: pointer; font-size: 15px; line-height: 1.4; }
.check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--ink); cursor: pointer; }
.check a { color: var(--ink); text-underline-offset: 2px; }
.check-big { border: 1.5px solid var(--line); border-radius: var(--r); padding: 16px; background: var(--soft); }
.check-big:has(input:checked) { border-color: var(--ink); }
.check-big strong { display: block; font-size: 16px; margin-bottom: 2px; }
.check-big span { color: var(--muted); }
.check-big strong { color: var(--ink); }
.lead { margin: 0 0 18px; color: var(--muted); font-size: 16px; }
.ticks { margin: 0 0 22px; padding-left: 20px; color: var(--muted); display: grid; gap: 6px; }

/* Meldingen in de pagina */
.note { display: flex; gap: 12px; align-items: flex-start; border-radius: 14px; padding: 14px 16px; margin: 0 0 18px; font-size: 15px; background: var(--soft); border: 1.5px solid var(--line); }
.note p { margin: 0; flex: 1; }
.note .ic { margin-top: 1px; }
.note.ok { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.note.ok .ic { color: var(--ok); }
.note.error { border-color: var(--bad); }
.note.error .ic { color: var(--bad); }
.note.warn { background: color-mix(in srgb, var(--accent) 22%, var(--bg)); border-color: var(--accent); flex-wrap: wrap; }
.note.warn p { min-width: 220px; }
.note form { margin: 0; }

/* ---------- Account ---------- */
.acc { padding-top: 24px; padding-bottom: 24px; }
.acc-solo { max-width: 440px; margin: 16px auto 0; }
.acc-solo h1, .acc-main h1 { font-size: 34px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; margin: 0 0 22px; }
.acc-links { margin: 16px 0 0; font-size: 15px; text-align: center; }
.acc-links a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.acc-alt { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.acc-alt p { margin: 0 0 12px; color: var(--muted); }
.acc-alt strong { color: var(--ink); }
.acc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.acc-grid > * { min-width: 0; }
.acc-me { display: flex; gap: 12px; align-items: center; }
.acc-me strong { display: block; font-size: 16px; line-height: 1.25; }
.acc-me a { font-size: 13.5px; color: var(--muted); }
.acc-nav { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 14px -16px 0; padding: 0 16px 2px; }
.acc-nav a, .acc-nav button { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 0; background: var(--soft); text-decoration: none; font-weight: 600; font-size: 15px; cursor: pointer; white-space: nowrap; }
.acc-nav a[aria-current] { background: var(--ink); color: var(--bg); }
.acc-nav form { margin: 0; display: contents; }
.acc-nav .ic { width: 20px; height: 20px; }
.panel { border: 1px solid var(--line); border-radius: 20px; padding: 22px 18px; margin: 0 0 20px; background: var(--card); }
.panel h2 { margin: 0; font-size: 21px; letter-spacing: -0.02em; }
.panel > .help { margin-top: -10px; }
.panel .btn { justify-self: start; }
.avatar { display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--accent); color: var(--on-accent); font-weight: 750; font-size: 17px; letter-spacing: -0.02em; }
.avatar-lg { width: 88px; height: 88px; font-size: 30px; }
.avatar-xl { width: 104px; height: 104px; font-size: 36px; }
.photo-pick { display: flex; gap: 18px; align-items: flex-start; }
.photo-pick .field { flex: 1; }
.field input[type="file"] { max-width: 100%; }
@media (max-width: 479px) { .photo-pick { flex-direction: column; gap: 12px; } }
.logo-prev { width: 96px; height: 96px; object-fit: contain; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.banner-prev { width: 100%; max-width: 320px; height: 80px; object-fit: cover; border-radius: 12px; }
.biz-status { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 0 0 18px; }
.hours { gap: 8px; }
.hours-row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: center; }
.hours-row label { font-weight: 500; font-size: 15px; }
.pill { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 11px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 13.5px; font-weight: 650; }
.pill .ic { width: 16px; height: 16px; stroke-width: 2.2; }
.pill.ok { background: color-mix(in srgb, var(--ok) 14%, var(--bg)); color: var(--ok); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ok) 40%, transparent); }
.pill.wait { background: var(--soft); color: var(--ink); }
@media (min-width: 900px) {
    .acc { padding-top: 40px; }
    .acc-solo { margin-top: 24px; }
    .acc-solo h1 { font-size: 44px; }
    .acc-grid { grid-template-columns: 250px minmax(0, 1fr); gap: 48px; align-items: start; }
    .acc-side { position: sticky; top: 92px; }
    .acc-nav { flex-direction: column; overflow: visible; margin: 22px 0 0; padding: 0; gap: 2px; }
    .acc-nav a, .acc-nav button { background: none; width: 100%; text-align: left; }
    .acc-nav a:hover, .acc-nav button:hover { background: var(--soft); }
    .acc-nav button { color: var(--muted); margin-top: 10px; }
    .acc-main { max-width: 760px; }
    .acc-main h1 { font-size: 40px; }
    .panel { padding: 28px; }
}

/* ---------- Verkopers- en bedrijfspagina ---------- */
.seller-banner { border-radius: 24px; overflow: hidden; background: var(--soft); aspect-ratio: 4 / 1; min-height: 120px; margin-top: 4px; }
.seller-banner img { width: 100%; height: 100%; object-fit: cover; }
.seller-head { display: grid; gap: 16px; padding: 18px 0 8px; }
.seller-head.on-banner { margin-top: -52px; padding-left: 16px; padding-right: 16px; }
.seller-head.on-banner > .seller-logo, .seller-head.on-banner > .avatar { box-shadow: 0 0 0 5px var(--bg); }
.seller-logo { width: 104px; height: 104px; object-fit: contain; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.seller-who h1 { margin: 0 0 8px; font-size: 32px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; }
.seller-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.seller-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: 15px; }
.seller-facts li { display: inline-flex; gap: 6px; align-items: center; }
.seller-facts .ic { width: 18px; height: 18px; }
.seller-info { display: grid; gap: 20px; margin: 24px 0 0; }
.seller-about h2, .seller-card h2 { margin: 0 0 8px; font-size: 21px; letter-spacing: -0.02em; }
.seller-about p { margin: 0; max-width: 68ch; color: color-mix(in srgb, var(--ink) 86%, var(--bg)); }
.seller-card { background: var(--soft); border-radius: 20px; padding: 20px; }
.seller-card .summary { margin-top: 12px; }
.seller-address { display: flex; gap: 8px; margin: 0; font-weight: 600; }
.empty-line { color: var(--muted); padding: 28px 20px; border: 1.5px dashed var(--line); border-radius: var(--r); margin: 0; text-align: center; }
.empty-line a { color: var(--ink); }
@media (min-width: 900px) {
    .seller-head { grid-template-columns: auto 1fr auto; align-items: end; gap: 24px; padding-top: 28px; }
    .seller-head.on-banner { margin-top: -64px; padding-left: 32px; padding-right: 0; }
    .seller-who h1 { font-size: 44px; }
    .seller-info { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 40px; align-items: start; }
}

/* ---------- Alleen met / zonder JavaScript ---------- */
.js .nojs { display: none !important; }
html:not(.js) .jsonly { display: none !important; }
.card .ph picture, .gal-item picture, .closed-ph picture, .myad-ph picture { display: contents; }
.req { color: var(--bad); font-weight: 700; }

/* ---------- Plaatsen en bewerken ---------- */
.place { padding-top: 24px; padding-bottom: 24px; }
.place-head h1 { font-size: 34px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; margin: 0 0 8px; }
.place-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.place-form { display: grid; gap: 20px; min-width: 0; }
.pstep { border: 1px solid var(--line); border-radius: 20px; padding: 22px 18px; background: var(--card); display: grid; gap: 18px; min-width: 0; scroll-margin-top: 150px; }
.pstep h2 { margin: 0; font-size: 21px; display: flex; align-items: center; gap: 12px; }
.pstep > .help { margin-top: -8px; }
.pstep-n { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 15px; font-weight: 750; letter-spacing: 0; }
.count { white-space: nowrap; font-variant-numeric: tabular-nums; }
.count.over { color: var(--bad); font-weight: 700; }
.err-sum ul { margin: 6px 0 0; padding-left: 18px; }
.err-sum a { color: var(--ink); font-weight: 600; text-underline-offset: 2px; }
.cat-row { display: flex; gap: 10px; flex-wrap: wrap; }
.cat-row select { flex: 1 1 260px; }
.cat-suggest { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; color: var(--muted); }
.cat-suggest button { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font-weight: 600; font-size: 14px; cursor: pointer; text-align: left; }
.cat-suggest button:hover { border-color: var(--ink); }
.cat-suggest button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); font-weight: 600; font-size: 15px; }
.chip:hover span { border-color: color-mix(in srgb, var(--ink) 45%, var(--line)); }
.chip input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

.unit { display: flex; align-items: stretch; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; }
.unit:focus-within { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.field .unit input { border: 0 !important; border-radius: 0; box-shadow: none !important; min-width: 0; flex: 1; }
.unit > span { display: grid; place-items: center; padding: 0 14px; background: var(--soft); color: var(--muted); font-weight: 600; font-size: 15px; white-space: nowrap; }
.unit-pre > span { order: -1; }
.is-error .unit { border-color: var(--bad); }
[data-off] { display: none !important; }

.kgrid { display: grid; gap: 18px; }
@media (min-width: 640px) { .kgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kgrid .k-wide, .kgrid .k-janee { grid-column: 1 / -1; } }
.kchecks { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0 14px; }
.rdw { background: var(--soft); border-radius: 16px; padding: 16px; margin-bottom: 18px; }
.rdw-row { display: flex; gap: 10px; flex-wrap: wrap; }
.rdw-row input { flex: 1 1 160px; text-transform: uppercase; font-weight: 700; letter-spacing: .08em; }
.rdw-msg { margin: 0; font-size: 14px; font-weight: 600; }
.rdw-msg:empty, .drop-msg:empty { display: none; }

.pgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px 12px; }
.pgrid:empty { display: none; }
.pthumb { display: grid; gap: 6px; align-content: start; min-width: 0; }
.pthumb[draggable="true"] { cursor: grab; }
.pthumb.dragging { opacity: .45; }
.pthumb-img { position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: var(--soft); }
.pthumb-img img { width: 100%; height: 100%; object-fit: cover; }
.pthumb-first { display: none; position: absolute; left: 8px; top: 8px; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: var(--accent); color: var(--on-accent); }
.pthumb:first-child .pthumb-first { display: inline-block; }
.pthumb.busy .pthumb-img::after { content: "Verkleinen…"; position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 70%, transparent); font-size: 13px; font-weight: 700; }
.pthumb.bad .pthumb-img { outline: 2px solid var(--bad); outline-offset: -2px; }
.pthumb-bad { margin: 0; font-size: 13px; color: var(--bad); font-weight: 600; }
.pthumb-ctl .check { min-height: 36px; padding: 4px 0; font-size: 14px; gap: 8px; }
.pthumb-ctl .check input { width: 20px; height: 20px; }
.pthumb-js { display: flex; gap: 4px; }
.pthumb-js button { flex: 1; min-height: 44px; border: 0; border-radius: 10px; background: var(--soft); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.pthumb-js button:hover { background: color-mix(in srgb, var(--ink) 12%, var(--soft)); }
.pthumb-js button:disabled { opacity: .35; cursor: default; }
.pthumb-js .ic { width: 20px; height: 20px; }
.drop { position: relative; border: 2px dashed var(--line); border-radius: 18px; padding: 16px; background: var(--soft); }
.drop.over { border-color: var(--ink); background: color-mix(in srgb, var(--accent) 18%, var(--soft)); }
.drop-label { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; cursor: pointer; padding: 8px; font-weight: 700; }
.drop-label .ic { width: 34px; height: 34px; margin-bottom: 4px; }
.drop-or { color: var(--muted); font-size: 14px; font-weight: 400; }
.drop .help { text-align: center; }
.js .drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.js .drop:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.drop-msg { margin: 0; text-align: center; font-size: 14px; font-weight: 600; }

.place-submit { display: grid; gap: 10px; padding: 4px 2px 0; }
.place-side { display: none; }
.place-preview .card { pointer-events: none; max-width: 240px; }
.place-preview .kicker { margin-bottom: 12px; }
.place-steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: stap; }
.place-steps a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: 15px; color: var(--muted); counter-increment: stap; }
.place-steps a::before { content: counter(stap); display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; border: 1.5px solid var(--line); font-size: 13px; }
.place-steps a:hover { background: var(--soft); color: var(--ink); }
.place-steps a.done { color: var(--ink); }
.place-steps a.done::before { content: "✓"; background: var(--ink); color: var(--bg); border-color: var(--ink); }
@media (min-width: 900px) { .place { padding-top: 40px; } .place-head h1 { font-size: 44px; } .pstep { padding: 28px; } }
@media (min-width: 1000px) {
    .place-grid { grid-template-columns: minmax(0, 1fr) 280px; gap: 44px; align-items: start; }
    .place-side { display: grid; gap: 28px; position: sticky; top: 92px; }
}

/* ---------- Advertentiepagina ---------- */
.owner-bar { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between; border: 1.5px solid var(--ink); border-radius: 16px; padding: 12px 16px; margin: 6px 0 18px; }
.owner-bar p { margin: 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 15px; }
.item-main { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "gal" "side" "body"; gap: 24px; }
.item-gal { grid-area: gal; min-width: 0; }
.item-side { grid-area: side; min-width: 0; }
.item-body { grid-area: body; min-width: 0; display: grid; gap: 30px; align-content: start; }
.gal { position: relative; margin: 0 -16px; background: var(--soft); }
.gal-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.gal-track::-webkit-scrollbar { display: none; }
.gal-item { flex: none; width: 100%; scroll-snap-align: center; display: block; }
.gal-item img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.gal-count { position: absolute; right: 12px; bottom: 12px; background: rgba(0, 0, 0, .66); color: #fff; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 8px; font-variant-numeric: tabular-nums; }
.gal .tag { left: 12px; top: 12px; }
.gal-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .94); color: #121212; display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .16); }
.gal-nav.prev { left: 12px; }
.gal-nav.next { right: 12px; }
.gal-none { display: grid; place-items: center; align-content: center; gap: 8px; aspect-ratio: 4 / 3; color: var(--muted); }
.gal-none .ph-empty { position: static; }
.gal-none p { margin: 0; font-size: 14px; }
.thumbs { display: none; }
@media (max-width: 899px) { .gal-nav { display: none; } }
@media (min-width: 900px) {
    .gal { margin: 0; border-radius: 20px; overflow: hidden; }
    .gal-item img { aspect-ratio: 4 / 3; }
    .thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
    .thumbs button { width: 80px; height: 80px; border-radius: 12px; overflow: hidden; border: 0; padding: 0; cursor: pointer; opacity: .7; background: var(--soft); }
    .thumbs button[aria-current], .thumbs button:hover { opacity: 1; }
    .thumbs button[aria-current] { box-shadow: 0 0 0 2.5px var(--ink); }
    .thumbs img { width: 100%; height: 100%; object-fit: cover; }
}
.bigprice { display: inline-flex; align-items: baseline; gap: 10px; margin: 0; background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 30px; letter-spacing: -0.02em; padding: 4px 14px; border-radius: 10px; font-variant-numeric: tabular-nums; }
.bigprice small { font-size: 15px; font-weight: 600; }
.item-side h1 { font-size: 26px; line-height: 1.2; letter-spacing: -0.025em; margin: 14px 0 8px; font-weight: 750; overflow-wrap: anywhere; }
.stats { list-style: none; margin: 0 0 18px; padding: 0; color: var(--muted); font-size: 14px; display: flex; gap: 4px 14px; flex-wrap: wrap; }
.stats li { display: inline-flex; gap: 5px; align-items: center; }
.stats .ic { width: 17px; height: 17px; }
.item-reserved { margin: 0 0 14px; }
.item-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.item-acts:empty { display: none; }
.subacts { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.subacts .btn { min-height: 44px; padding: 0 14px; font-weight: 600; font-size: 14px; }
.share summary, .menu summary { list-style: none; }
.share summary::-webkit-details-marker, .menu summary::-webkit-details-marker { display: none; }
.share-pop { position: absolute; z-index: 15; left: 0; top: calc(100% + 8px); width: min(360px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .16); display: grid; gap: 4px; }
.share-row { display: flex; gap: 10px; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 10px; text-decoration: none; font-weight: 600; }
.share-row:hover { background: var(--soft); }
.share-copy { display: grid; gap: 6px; padding: 6px 10px; }
.share-copy label { font-size: 13px; color: var(--muted); font-weight: 600; }
.share-copy-row { display: flex; gap: 8px; }
.share-copy input { flex: 1; min-width: 0; min-height: 44px; border: 1.5px solid var(--line); border-radius: 10px; padding: 0 10px; background: var(--soft); font-size: 14px; }
.share-qr { margin: 6px 10px 4px; display: flex; gap: 14px; align-items: center; font-size: 13px; color: var(--muted); }
.qr { width: 132px; height: 132px; flex: none; border-radius: 8px; }
.item-box { border: 1px solid var(--line); border-radius: 18px; padding: 18px; margin-top: 18px; }
.item-seller { display: flex; gap: 14px; align-items: center; text-decoration: none; }
.item-seller .avatar { width: 52px; height: 52px; font-size: 20px; }
.item-logo { object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.item-seller b { display: block; font-size: 17px; }
.item-seller:hover b { text-decoration: underline; }
.item-seller-sub { display: block; font-size: 14px; color: var(--muted); }
.stars { display: inline-flex; gap: 4px; align-items: center; color: var(--ink); font-weight: 650; }
.stars .ic { width: 16px; height: 16px; fill: currentColor; }
.item-facts { list-style: none; display: grid; gap: 8px; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); font-size: 14px; }
.item-facts li { display: flex; gap: 8px; align-items: center; }
.item-facts .ic { width: 18px; height: 18px; color: var(--muted); }
.item-body h2 { font-size: 19px; margin: 0 0 10px; letter-spacing: -0.015em; }
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin: 0; }
.specs div { padding: 10px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.specs dt { font-size: 13px; color: var(--muted); }
.specs dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.item-text p { margin: 0 0 12px; max-width: 68ch; overflow-wrap: anywhere; }
.safe { display: flex; gap: 12px; background: var(--soft); border-radius: 16px; padding: 16px; font-size: 14.5px; }
.safe p { margin: 0; }
.safe b { display: block; }
.safe a { color: var(--ink); }
.safe .ic { width: 26px; height: 26px; }
.smallrow { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0; font-size: 14px; color: var(--muted); }
.sec-title.sec-title-sm { font-size: 20px; }
@media (min-width: 900px) { .item-side h1 { font-size: 32px; } }
@media (min-width: 1000px) {
    .item-main { grid-template-columns: minmax(0, 1.45fr) minmax(340px, 1fr); grid-template-areas: "gal side" "body side"; gap: 36px 48px; align-items: start; }
    .item-side { position: sticky; top: 92px; }
}

.lightbox { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; margin: 0; padding: 0; border: 0; background: rgba(10, 10, 10, .97); color: #fff; }
.lightbox::backdrop { background: rgba(0, 0, 0, .85); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox img { max-width: 100vw; max-height: 100vh; object-fit: contain; }
.lightbox .iconbtn { position: absolute; background: rgba(255, 255, 255, .16); color: #fff; border-radius: 50%; }
.lightbox .iconbtn:hover { background: rgba(255, 255, 255, .28); }
.lightbox :focus-visible { outline-color: #fff; }
.lb-close { top: 12px; right: 12px; }
.lb-prev, .lb-next { top: calc(50% - 22px); }
.lb-prev { left: 12px; }
.lb-next { right: 12px; }
.lb-count { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; text-align: center; font-size: 14px; }

.closed { display: grid; gap: 22px; align-items: center; padding: 12px 0 8px; }
.closed-ph { position: relative; width: 160px; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: var(--soft); }
.closed-ph img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: .8; }
.closed-text h1 { margin: 10px 0 8px; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; overflow-wrap: anywhere; }
.closed-text p { margin: 0; }
.closed-text .lead { margin: 0 0 18px; }
@media (min-width: 700px) { .closed { grid-template-columns: 200px minmax(0, 1fr); gap: 32px; } .closed-ph { width: 200px; } }

/* ---------- Mijn advertenties ---------- */
.my-top { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 18px; }
.tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; flex: 1 1 100%; }
.tabs a { flex: none; display: inline-flex; gap: 8px; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 12px; background: var(--soft); text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; }
.tabs a[aria-current] { background: var(--ink); color: var(--bg); }
.tab-n { font-size: 13px; opacity: .75; font-variant-numeric: tabular-nums; }
.myads { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.myad { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px 14px; border: 1px solid var(--line); border-radius: 18px; padding: 12px; background: var(--card); }
.myad-ph { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--soft); }
.myad-ph img { width: 100%; height: 100%; object-fit: cover; }
.myad-ph .ph-empty .ic { width: 26px; height: 26px; }
.myad-info { min-width: 0; }
.myad-info h2 { margin: 2px 0 6px; font-size: 17px; letter-spacing: -0.01em; line-height: 1.3; overflow-wrap: anywhere; }
.myad-info h2 a { text-decoration: none; }
.myad-info h2 a:hover { text-decoration: underline; }
.myad-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 14px; color: var(--muted); }
.myad-meta strong { color: var(--ink); font-size: 15px; }
.myad-stats { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13.5px; color: var(--muted); }
.myad-stats li { display: inline-flex; gap: 5px; align-items: center; }
.myad-stats .ic { width: 16px; height: 16px; }
.myad-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.myad-acts form { margin: 0; }
.menu { position: relative; }
.menu-list, .share-pop { scroll-margin: 96px 0 96px; }
.menu-list { position: absolute; left: 0; top: calc(100% + 6px); z-index: 15; min-width: 230px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 6px; box-shadow: 0 12px 32px rgba(0, 0, 0, .16); display: grid; }
.menu-list form { margin: 0; }
.menu-btn { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--ink); font-weight: 600; font-size: 15px; text-align: left; cursor: pointer; text-decoration: none; }
.menu-btn:hover { background: var(--soft); }
.menu-btn.danger { color: var(--bad); }
@media (min-width: 700px) {
    .myad { grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; }
    .myad-acts { grid-column: auto; justify-content: flex-end; }
    .menu-list { left: auto; right: 0; }
}
@media (min-width: 900px) { .tabs { margin: 0; padding: 0; flex: 1 1 auto; } }

/* ---------- Zoekregel op de home ---------- */
.hsearch { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0 0; padding: 14px; border-radius: 20px; background: var(--soft); }
.hsearch > div { display: grid; gap: 4px; min-width: 0; }
.hsearch label { font-size: 13px; font-weight: 650; color: var(--muted); padding-left: 2px; }
.hsearch input, .hsearch select { width: 100%; min-height: 48px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); padding: 0 12px; font-size: 16px; }
.hsearch input:focus-visible, .hsearch select:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.hs-what, .hsearch .btn { grid-column: 1 / -1; }
.hsearch .btn { align-self: end; }
@media (min-width: 900px) {
    .hsearch { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1fr) auto; padding: 16px; margin-top: 24px; }
    .hs-what, .hsearch .btn { grid-column: auto; }
}

/* ---------- Home: kop met etalage ----------
   Links de kop, de zoekregel en populaire zoektermen; rechts de vijf nieuwste advertenties met foto als etalage,
   met de gele prijssticker die bij het laden even "opplakt" (de enige beweging op de pagina) en een ronde sticker
   "Plaats gratis". Mobiel: eerst de tekst, dan de etalage als strook om opzij te vegen. */
.page-home .top .search { display: none; }           /* de zoekregel staat groot in de kop */
.page-home .top .wrap { flex-wrap: nowrap; }
.page-home .top .logo { flex: 1; }
.hero { display: grid; gap: 26px; padding: 22px 0 6px; }
.hero-live { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 14px; font-size: 14px; font-weight: 650; color: var(--muted); font-variant-numeric: tabular-nums; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 20%, transparent); }
.hero h1 { margin: 0; max-width: 12ch; font-size: clamp(40px, 7.4vw, 78px); line-height: .96; letter-spacing: -0.052em; font-weight: 800; text-wrap: balance; }
.hero-lead { margin: 16px 0 0; max-width: 44ch; font-size: 18px; line-height: 1.5; color: var(--muted); }
.hero .hsearch { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 22px; }
.hero-terms { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hero-terms a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 13px; border-radius: 999px; border: 1.5px solid var(--line); text-decoration: none; font-size: 14px; font-weight: 600; }
.hero-terms a:hover { border-color: var(--ink); }
.hero-window { position: relative; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; margin: 0 -16px; padding: 6px 16px 10px; scrollbar-width: none; }
.win { position: relative; flex: none; width: 58%; max-width: 240px; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: var(--soft); scroll-snap-align: start; text-decoration: none; color: inherit; }
.win picture { display: contents; }
.win img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.win:hover img { transform: scale(1.04); }
.win-price { position: absolute; left: 12px; top: 12px; padding: 5px 11px; border-radius: 9px; background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
    transform: rotate(-4deg); box-shadow: 0 2px 0 rgba(0, 0, 0, .18); animation: stick .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.win-price.free { background: var(--ink); color: var(--bg); }
.win-2 .win-price { animation-delay: .08s; } .win-3 .win-price { animation-delay: .16s; } .win-4 .win-price { animation-delay: .24s; } .win-5 .win-price { animation-delay: .32s; }
@keyframes stick { from { opacity: 0; transform: rotate(-14deg) scale(.6); } to { opacity: 1; transform: rotate(-4deg) scale(1); } }
.win-cap { position: absolute; left: 10px; right: 10px; bottom: 10px; display: grid; gap: 1px; padding: 8px 11px; border-radius: 13px; font-size: 13.5px; line-height: 1.3;
    background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.win-cap b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win-cap span { font-size: 12.5px; color: var(--muted); }
.win-badge { display: none; }
@media (max-width: 999px) { /* compacte zoekregel, zodat de etalage al in het eerste scherm begint (categorie en afstand: op de zoekpagina) */
    .hero { gap: 18px; padding-top: 16px; }
    .hero-lead { font-size: 16px; margin-top: 12px; }
    .hero .hsearch { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "what what" "pc btn"; margin-top: 18px; padding: 12px; gap: 8px 10px; }
    .hero .hs-what { grid-area: what; } .hero .hs-pc { grid-area: pc; } .hero .hsearch .btn { grid-area: btn; }
    .hero .hs-cat, .hero .hs-km { display: none; }
    .hero-terms { display: none; }
}
@media (min-width: 1000px) {
    .hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 56px; padding: 40px 0 16px; }
    .hero h1 { font-size: clamp(48px, 5.3vw, 78px); }   /* past in de linkerkolom, ook op 1024 px */
    .hero-solo { grid-template-columns: minmax(0, 1fr); }
    .hero .hsearch { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr) minmax(0, .9fr); grid-template-areas: "what what btn" "cat pc km"; }
    .hero .hs-what { grid-area: what; } .hero .hs-cat { grid-area: cat; } .hero .hs-pc { grid-area: pc; } .hero .hs-km { grid-area: km; } .hero .hsearch .btn { grid-area: btn; }
    .hero-window { display: grid; grid-template-columns: 1.15fr 1fr 1fr; grid-template-rows: repeat(6, 78px); gap: 12px; overflow: visible; margin: 0; padding: 0; }
    .win { width: auto; max-width: none; aspect-ratio: auto; }
    .win-1 { grid-column: 1; grid-row: 1 / 5; }
    .win-2 { grid-column: 2; grid-row: 2 / 5; }
    .win-3 { grid-column: 3; grid-row: 1 / 4; }
    .win-4 { grid-column: 3; grid-row: 4 / 7; }
    .win-5 { grid-column: 1 / 3; grid-row: 5 / 7; }
    /* Kleine site: drie of vier in de etalage; de collage sluit dan toch gelijk af */
    .win-n4 .win-1 { grid-row: 1 / 7; }
    .win-n4 .win-2 { grid-row: 2 / 7; }
    .win-n3 { grid-template-rows: repeat(5, 78px); }
    .win-n3 .win-1, .win-n3 .win-3 { grid-row: 1 / 6; }
    .win-n3 .win-2 { grid-row: 2 / 6; }
    .win-1 .win-price { font-size: 22px; }
    .win-badge { grid-column: 2; grid-row: 1; align-self: end; justify-self: center; z-index: 2; display: grid; place-items: center; width: 112px; height: 112px; margin-bottom: -22px;
        border-radius: 50%; background: var(--accent); color: var(--on-accent); text-align: center; text-decoration: none; font-weight: 800; font-size: 16px; line-height: 1.1; letter-spacing: -0.02em;
        transform: rotate(-9deg); box-shadow: 0 0 0 6px var(--bg); transition: transform .2s ease; }
    .win-badge span { max-width: 80px; }
    .win-badge:hover { transform: rotate(-3deg) scale(1.05); }
}

/* Kaartblok op de home: tekst links, kaart met stickers per plaats rechts. */
.maptease { display: grid; gap: 18px; align-items: center; }
.maptease h2 { margin: 0 0 8px; font-size: 26px; letter-spacing: -0.03em; line-height: 1.1; font-weight: 800; }
.maptease p { margin: 0 0 18px; color: var(--muted); max-width: 40ch; }
.maptease .map-search { margin: 0; }
.near { display: grid; gap: 10px; justify-items: start; }
.near-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 10px; width: 100%; align-items: end; }
.near-row > div { display: grid; gap: 4px; min-width: 0; }
.near label { font-size: 13px; font-weight: 650; color: var(--muted); }
.near input, .near select { width: 100%; min-height: 48px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); padding: 0 12px; font-size: 16px; }
.near input:focus-visible, .near select:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.near-row .btn { grid-column: 1 / -1; }
.near-msg:empty { display: none; }
@media (min-width: 1200px) { .near-row { grid-template-columns: minmax(0, 1fr) 96px auto; } .near-row .btn { grid-column: auto; } }
.maptease .map-search .map-canvas { height: 340px; }
@media (min-width: 900px) {
    .maptease { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px; }
    .maptease h2 { font-size: 34px; }
    .maptease .map-search .map-canvas { height: 420px; }
}

/* ---------- Zoekresultaten ---------- */
.res .crumbs { padding-bottom: 0; }
.res-head { padding-top: 10px; }
.res-head h1 { margin: 0; font-size: 28px; letter-spacing: -0.03em; font-weight: 800; overflow-wrap: anywhere; }
.res-head h1::first-letter { text-transform: uppercase; }
.res-head p { margin: 4px 0 0; color: var(--muted); }
.res-head + .note, .res-head ~ .note { margin-top: 14px; }
.res-intro { margin: 10px 0 0; max-width: 72ch; color: color-mix(in srgb, var(--ink) 86%, var(--bg)); }
.res-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 16px 0 14px; }
.fchip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 10px; background: var(--soft); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.fchip:hover { background: color-mix(in srgb, var(--ink) 10%, var(--soft)); }
.fchip b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--ink); color: var(--bg); font-size: 12.5px; }
.fchip .x { width: 16px; height: 16px; opacity: .65; }
.fchip .ic:not(.x) { width: 20px; height: 20px; }
.fclear { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; text-underline-offset: 3px; }
.select { min-height: 44px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--card); padding: 0 12px; font-size: 15px; max-width: 100%; }
.select:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.seg { display: inline-flex; background: var(--soft); border-radius: 11px; padding: 3px; flex: none; }
.seg a { width: 44px; height: 38px; border-radius: 9px; display: grid; place-items: center; color: var(--muted); }
.seg a[aria-current] { background: var(--bg); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.spacer { flex: 1; }
.only-m { display: inline-flex; }
@media (max-width: 999px) {
    .res-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 14px -16px 12px; padding: 2px 16px; }
    .res-bar::-webkit-scrollbar { display: none; }
    .res-bar > * { flex: none; }
    .res-bar .spacer { flex: 1 0 4px; }
}
.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.res-main { min-width: 0; }
.res-paid { margin: 0 0 10px; }
.res-paid a { color: var(--ink); text-underline-offset: 2px; }
.notice { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--soft); border-radius: 14px; padding: 10px 12px 10px 14px; margin-bottom: 18px; font-size: 14.5px; }
.notice .txt { display: flex; gap: 10px; align-items: center; }
.notice form { margin: 0; }
.res-empty { border: 1.5px dashed var(--line); border-radius: var(--r); padding: 28px 22px; }
.res-empty h2 { margin: 0 0 6px; font-size: 22px; }
.res-empty p { color: var(--muted); max-width: 60ch; }
.res-empty .btn-row { margin-bottom: 0; }
.places li span { color: var(--muted); font-size: 13.5px; }

/* Filters: op mobiel een paneel (opent via #filters, ook zonder JavaScript), op een groot scherm een kolom links */
.filters { display: none; }
.filters:target, .filters.open { display: block; position: fixed; inset: 0; z-index: 50; background: var(--bg); overflow: auto; padding: 16px 16px 110px; }
.sheet-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.sheet-h h2 { margin: 0; font-size: 22px; }
.fapply { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); }
.filters fieldset, .fgroup { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 14px 0; min-width: 0; }
.filters legend, .fh { font-weight: 700; font-size: 15px; padding: 0; margin: 0 0 6px; float: left; width: 100%; letter-spacing: 0; }
.filters fieldset > *:not(legend) { clear: both; }
.fopt { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 15px; cursor: pointer; }
.fopt input { width: 20px; height: 20px; flex: none; accent-color: var(--ink); margin: 0; }
.fopt span:first-of-type { min-width: 0; overflow-wrap: anywhere; }
.n { margin-left: auto; padding-left: 8px; color: var(--muted); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.frange { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.frange label, .fpc label { font-size: 13px; color: var(--muted); }
.frange input, .fpc input { width: 100%; min-height: 44px; border: 1.5px solid var(--line); border-radius: 10px; padding: 0 10px; background: var(--card); margin-top: 2px; font-size: 16px; }
.frange input:focus-visible, .fpc input:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.fpc { margin-bottom: 8px; }
#f-km { width: 100%; }
.fmore summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; font-weight: 600; font-size: 14.5px; text-decoration: underline; text-underline-offset: 3px; }
.fcats { list-style: none; margin: 0; padding: 0; clear: both; }
.fcats a, .fcats .cur { display: flex; align-items: center; gap: 6px; min-height: 40px; text-decoration: none; font-size: 15px; }
.fcats a:hover span:first-child { text-decoration: underline; }
.fcats .up { color: var(--muted); font-size: 14px; }
.fcats .up .ic { width: 18px; height: 18px; }
.fcats .cur { font-weight: 700; }
.fcats .sub a { padding-left: 14px; }
@media (min-width: 1000px) {
    .layout { grid-template-columns: 260px minmax(0, 1fr); }
    .filters, .filters:target { display: block; position: sticky; inset: auto; top: 92px; z-index: auto; align-self: start; max-height: calc(100vh - 110px); overflow: auto; padding: 0 8px 0 0; background: none; }
    .filters .sheet-h, .only-m { display: none !important; }
    .fapply { position: static; padding: 14px 0 0; border: 0; background: none; }
    .js .fapply { display: none; }
}

/* Lijstweergave */
.grid.list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.list .card { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 14px; align-content: start; }
.list .card .ph { grid-row: 1 / span 3; aspect-ratio: 1; }
.list .card h3 { margin-top: 2px; font-size: 16px; }
.list .card .price { font-size: 14px; left: 6px; bottom: 6px; padding: 3px 7px; }
.list .card .tags { left: 6px; top: 6px; }
@media (min-width: 1100px) { .grid.list { grid-template-columns: 1fr 1fr; } }

/* Paginering */
.pager { display: flex; gap: 6px; justify-content: center; margin: 36px 0 8px; flex-wrap: wrap; }
.pager a, .pager span { min-width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; text-decoration: none; font-weight: 600; padding: 0 12px; }
.pager a:hover { background: var(--soft); }
.pager [aria-current] { background: var(--ink); color: var(--bg); }

/* Bewaren en zoekopdrachten */
.fav { margin: 0; }
.btn[aria-pressed="true"] .ic { fill: currentColor; }
.myad.is-off .myad-ph img { filter: grayscale(1); opacity: .7; }
.saved { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.saved li { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; background: var(--card); }
.saved li > div { display: grid; gap: 2px; min-width: 0; }
.saved a { font-weight: 650; overflow-wrap: anywhere; text-underline-offset: 3px; }
.saved small { color: var(--muted); font-size: 13.5px; }
.saved form { margin: 0; }

/* ---------- Berichten, biedingen en reviews (taak 6) ---------- */
.btn-ghost { background: none; color: var(--muted); font-weight: 600; }
.btn-ghost:hover { color: var(--ink); background: var(--soft); }
.muted { color: var(--muted); font-weight: 400; }
.acc-count { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 750; display: grid; place-items: center; }
.sub-h { font-size: 19px; letter-spacing: -0.015em; margin: 28px 0 12px; }
section:first-child > .sub-h, .rev-todo > .sub-h { margin-top: 0; }
.reply textarea, .reply-new textarea, .rev-form textarea, .review-answer textarea {
    width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); font-size: 16px; line-height: 1.45; resize: vertical; }
.reply textarea:focus-visible, .reply-new textarea:focus-visible, .rev-form textarea:focus-visible, .review-answer textarea:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.chat-ph, .conv-ph { width: 56px; height: 56px; flex: none; border-radius: 12px; overflow: hidden; background: var(--soft); display: grid; place-items: center; color: var(--muted); }
.chat-ph img, .conv-ph img { width: 100%; height: 100%; object-fit: cover; }
.chat-ph picture, .conv-ph picture { display: contents; }

/* Inbox */
.inbox { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.conv a { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); text-decoration: none; }
.conv a:hover { border-color: color-mix(in srgb, var(--ink) 35%, var(--line)); }
.conv.is-new a { border-color: var(--ink); box-shadow: inset 4px 0 0 var(--accent); }
.conv-txt { display: grid; gap: 1px; min-width: 0; }
.conv-top { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.conv-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-role { font-size: 12.5px; color: var(--muted); flex: none; }
.conv-top time { margin-left: auto; font-size: 13px; color: var(--muted); white-space: nowrap; }
.conv-ad, .conv-last { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.conv-ad { font-size: 13.5px; }
.conv-ad .pill { min-height: 20px; padding: 0 8px; font-size: 12px; }
.conv-last { font-size: 15px; }
.conv.is-new .conv-last { color: var(--ink); font-weight: 600; }
.conv-n { min-width: 26px; height: 26px; padding: 0 8px; border-radius: 13px; background: var(--accent); color: var(--on-accent); font-weight: 750; font-size: 13px; display: grid; place-items: center; }
.people { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.people li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 16px; }
.people li > div { flex: 1; display: grid; min-width: 0; }
.people small { color: var(--muted); }
.people form { margin: 0; }

/* Gesprek: ballonnen, een bod als prijssticker, meldingen van het systeem in het midden */
.chat { display: grid; gap: 14px; max-width: 780px; }
.chat-ad { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.chat-title { display: block; font-weight: 700; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-title:hover { text-decoration: underline; }
.chat-ad-txt { min-width: 0; }
.chat-ad-txt p { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 14px; color: var(--muted); }
.chat-ad-txt strong { color: var(--ink); }
.chat-with a { color: var(--ink); }
.chat-sell { grid-column: 1 / -1; }
.chat-sell form { margin: 0; }
@media (min-width: 700px) { .chat-ad { grid-template-columns: 64px minmax(0, 1fr) auto; } .chat-ad .chat-ph { width: 64px; height: 64px; } .chat-sell { grid-column: auto; } }
.msgs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.msg { display: flex; flex-direction: column; align-items: flex-start; max-width: min(84%, 560px); scroll-margin: 90px 0 140px; }
.msg.mine { align-self: flex-end; align-items: flex-end; }
.bubble { padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: var(--soft); font-size: 15.5px; line-height: 1.45; overflow-wrap: anywhere; }
.msg.mine .bubble { background: var(--ink); color: var(--bg); border-radius: 18px 18px 6px 18px; }
.bubble a { color: inherit; text-underline-offset: 3px; }
.msg > time { font-size: 12px; color: var(--muted); margin: 3px 8px 8px; }
.link-off { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.msg-day { align-self: center; margin: 12px 0 6px; font-size: 12.5px; font-weight: 650; color: var(--muted); }
.msg-day span { background: var(--soft); padding: 4px 12px; border-radius: 999px; }
.msg-sys { align-self: center; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; align-items: center; max-width: 92%; margin: 8px 0; font-size: 13.5px; color: var(--muted); text-align: center; }
.msg-sys .ic { width: 16px; height: 16px; }
.msg-sys time { font-size: 12px; }
.msg-bid .bubble, .msg-bid.mine .bubble { display: grid; gap: 6px; min-width: 210px; background: var(--card); color: var(--ink); border: 1.5px solid var(--line); }
.msg-bid.mine .bubble { border-color: var(--ink); }
.bid-label { font-size: 13px; font-weight: 650; color: var(--muted); }
.bid-amount { justify-self: start; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; padding: 2px 12px; border-radius: 10px; background: var(--accent); color: var(--on-accent); transform: rotate(-1.5deg); font-variant-numeric: tabular-nums; }
.msg-bid .pill { justify-self: start; }
.msg-bid p { margin: 0; }
.msg-bid form { margin: 0; }
.msg-warn { display: flex; gap: 10px; margin: 2px 0 10px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 16%, var(--bg)); border: 1.5px solid var(--accent); font-size: 14px; }
.msg-warn p { margin: 2px 0 0; }
.msg-warn a { display: inline-block; margin-top: 4px; font-weight: 650; color: var(--ink); }
.reply { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; position: sticky; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 5; background: var(--bg); padding: 10px 0 6px; }
.reply textarea { min-height: 50px; max-height: 320px; resize: none; }
.reply .err { grid-column: 1 / -1; }
.reply > .btn { min-height: 50px; }
.reply > .btn span { display: none; }
@media (min-width: 600px) { .reply > .btn span { display: inline; } }
@media (min-width: 900px) { .reply { bottom: 0; } }
.reply-new { grid-template-columns: minmax(0, 1fr); position: static; gap: 10px; }
.reply-new label { font-weight: 600; }
.reply-new textarea { min-height: 130px; resize: vertical; }
.reply-new > .btn { justify-self: start; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; }
.qchip { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); font-weight: 600; font-size: 14px; cursor: pointer; }
.qchip:hover { border-color: var(--ink); }
.chat-closed { margin: 0; }
.chat-foot { display: flex; flex-wrap: wrap; gap: 4px; border-top: 1px solid var(--line); padding-top: 10px; }
.chat-foot form { margin: 0; }

/* Biedingen op de advertentie en in /mijn/biedingen */
.bids { border: 1px solid var(--line); border-radius: 18px; padding: 18px; margin-top: 18px; scroll-margin-top: 90px; }
.bids-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.bids h2 { font-size: 19px; margin: 0; letter-spacing: -0.015em; }
.bids-top { margin: 0; display: grid; justify-items: end; line-height: 1.1; }
.bids-top span { font-size: 12.5px; color: var(--muted); }
.bids-top strong { margin-top: 4px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; padding: 2px 10px; border-radius: 9px; background: var(--accent); color: var(--on-accent); transform: rotate(-1.5deg); }
.bids-none { margin: 0 0 14px; color: var(--muted); font-size: 15px; }
.bids-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; }
.bids-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.bids-list li:first-child { border-top: 0; }
.bids-list strong { min-width: 64px; font-size: 17px; font-variant-numeric: tabular-nums; }
.bids-list .is-mine strong { box-shadow: inset 0 -4px 0 var(--accent); }
.bids-list .is-ok strong { color: var(--ok); }
.bids-who { min-width: 0; overflow-wrap: anywhere; font-size: 15px; }
.bids-who small { display: block; color: var(--muted); font-size: 13px; }
.bids-who .pill { min-height: 22px; padding: 0 8px; font-size: 12px; vertical-align: 1px; }
.bids-list time { font-size: 13px; color: var(--muted); white-space: nowrap; }
.bids-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.bids-acts form { margin: 0; }
.bids-more { margin: -6px 0 12px; font-size: 13.5px; color: var(--muted); }
.bid-form { display: grid; gap: 8px; }
.bid-form label { font-weight: 600; font-size: 15px; }
.bid-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.bid-euro { display: flex; align-items: center; gap: 6px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); }
.bid-euro:focus-within { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.bid-euro > span { font-weight: 700; color: var(--muted); }
.bid-euro input { width: 100%; min-height: 46px; border: 0; outline: 0; background: none; font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; }
.bidgroups { display: grid; gap: 14px; margin-top: 18px; }
.bidgroup { border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px 4px; background: var(--card); }
.bidgroup header { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; margin-bottom: 4px; }
.bidgroup h2 { font-size: 16px; margin: 0 0 2px; }
.bidgroup h2 a { text-decoration: none; }
.bidgroup h2 a:hover { text-decoration: underline; }

/* Reviews en verkocht aan … */
.rev-form, .sold { display: grid; gap: 12px; border: 1px solid var(--line); border-radius: 18px; padding: 16px; margin-bottom: 12px; background: var(--card); }
.rev-form > label { font-weight: 600; }
.rev-form > .btn, .sold .btn-row { justify-self: start; }
.rev-about { margin: 0; }
.star-pick { border: 0; padding: 0; margin: 0; display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.star-pick legend { font-weight: 600; margin-bottom: 4px; }
.star-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.star-pick label { padding: 3px; border-radius: 8px; cursor: pointer; color: var(--line); }
.star-pick .ic { width: 36px; height: 36px; fill: currentColor; stroke: currentColor; stroke-width: 1.4; }
.star-pick label:hover, .star-pick label:hover ~ label, .star-pick input:checked ~ label { color: var(--accent); }
.star-pick label:hover .ic, .star-pick label:hover ~ label .ic, .star-pick input:checked ~ label .ic { stroke: var(--ink); }
.star-pick input:focus-visible + label { outline: 3px solid var(--focus); }
.stars-row { display: inline-flex; gap: 1px; }
.stars-row .ic { width: 17px; height: 17px; stroke-width: 1.5; }
.stars-row .on .ic { fill: var(--accent); stroke: var(--ink); }
.stars-row .off .ic { fill: none; stroke: color-mix(in srgb, var(--ink) 30%, var(--line)); }
.reviews { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.review { border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; background: var(--card); }
.review-top { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 15px; }
.review-top .muted { font-size: 13.5px; }
.review p { margin: 8px 0 0; }
.review-reply { padding: 10px 12px; border-radius: 12px; background: var(--soft); font-size: 14.5px; }
.review-reply b { display: block; font-size: 13px; }
.review-answer summary { cursor: pointer; margin-top: 8px; font-weight: 650; font-size: 14px; }
.review-answer form { display: grid; gap: 8px; margin-top: 8px; justify-items: start; }
.rev-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
@media (min-width: 900px) { .reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.choices { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.choice { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; }
.choice:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.choice input { width: 20px; height: 20px; flex: none; accent-color: var(--ink); }
.choice span { display: grid; }
.choice small { color: var(--muted); }

/* ---------- Kaarten (src/map.php, assets/js/map.js) ---------- */
.map { margin: 0; }
.map-canvas { display: none; position: relative; border-radius: var(--r); overflow: hidden; background: var(--soft); }
.js .map-canvas { display: block; }
.js .map-off .map-canvas { display: none; }
.map-area .map-canvas { aspect-ratio: 3 / 2; }
@media (min-width: 700px) { .map-area .map-canvas { aspect-ratio: 16 / 8; } }
.map-search { margin-bottom: 24px; }
.map-search .map-canvas { height: min(60vh, 520px); }
.map-on .map-list { display: none; }
.map-list { margin-top: 4px; }
.map-empty { color: var(--muted); margin: 0; }
.map figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-top: 10px; font-size: 15px; }
.map-place { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.map-place .ic { width: 18px; height: 18px; align-self: center; }
.map-dist { color: var(--muted); }
.map-dist::before { content: "· "; }
.map-note { color: var(--muted); font-size: 13.5px; }
/* Sticker per plaats: het aantal in de accentkleur, de naam schuift erbij bij aanwijzen of focus (en bij de gekozen plaats). */
.map-pin { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 750 13px/1 var(--font); text-decoration: none; white-space: nowrap; box-shadow: 0 0 0 2px var(--bg), 0 3px 10px rgba(0, 0, 0, .22); cursor: pointer; font-variant-numeric: tabular-nums; }
.map-pin span { max-width: 0; overflow: hidden; font-weight: 600; transition: max-width .2s ease, margin-left .2s ease; }
.map-pin:hover, .map-pin:focus-visible, .map-pin.on { z-index: 3; }
.map-pin:hover span, .map-pin:focus-visible span, .map-pin.on span { max-width: 180px; margin-left: 6px; }
.map-pin.on { background: var(--ink); color: var(--bg); }
.map-cluster { border: 0; min-height: 36px; padding: 0 13px; font-size: 14px; box-shadow: 0 0 0 2px var(--bg), 0 0 0 6px color-mix(in srgb, var(--accent) 40%, transparent), 0 3px 12px rgba(0, 0, 0, .25); }
.map-pin:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 999px; }
/* MapLibre-onderdelen in de stijl van de site (de MapLibre-CSS laadt later, dus met .map ervoor). */
.map .maplibregl-ctrl.maplibregl-ctrl-attrib { font: 11px/1.45 var(--font); background: color-mix(in srgb, var(--bg) 85%, transparent); color: var(--muted); }
.map .maplibregl-ctrl-attrib a { color: inherit; }
.map .maplibregl-ctrl-group { border-radius: 12px; overflow: hidden; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 2px 8px rgba(0, 0, 0, .12); }
.map .maplibregl-ctrl-group button { width: 40px; height: 40px; }
.map .maplibregl-ctrl-group button + button { border-top-color: var(--line); }
.map .maplibregl-cooperative-gesture-screen { font: 600 15px/1.4 var(--font); background: color-mix(in srgb, var(--ink) 55%, transparent); }
:root[data-theme="dark"] .map .maplibregl-ctrl-icon { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .map .maplibregl-ctrl-icon { filter: invert(1); } }

/* ---------- App op het startscherm (/app, src/pwa.php) ---------- */
.app-page { max-width: 1080px; }
.app-intro { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; padding: 10px 0 18px; }
.app-intro h1 { font-size: 36px; line-height: 1.08; margin: 2px 0 10px; font-weight: 800; letter-spacing: -0.035em; }
.app-intro .lead { max-width: 52ch; }
.app-icon { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.45); }
.app-done { font-weight: 650; }
.app-ways { display: grid; gap: 14px; margin: 6px 0 22px; }
.app-ways .panel { margin: 0; }
.app-ways .panel.is-mine { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.app-ways .is-mine h2::after { content: "Jouw toestel"; margin-left: 10px; padding: 3px 8px; border-radius: 6px; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 700; letter-spacing: 0; vertical-align: 3px; }
.app-steps { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 8px; }
.app-steps li::marker { font-weight: 800; }
@media (min-width: 900px) { .app-ways { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) {
    .app-intro { grid-template-columns: 1fr; gap: 14px; }
    .app-intro h1 { font-size: 29px; }
    .app-icon { width: 72px; height: 72px; border-radius: 17px; }
}

/* ---------- Voet ---------- */
.foot { border-top: 1px solid var(--line); margin-top: 56px; padding: 36px 0 28px; font-size: 14px; color: var(--muted); }
.foot .cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.foot .foot-about { grid-column: 1 / -1; }
.foot .foot-about p { max-width: 44ch; margin: 12px 0 0; }
.foot .logo { color: var(--ink); font-size: 22px; }
.foot h2 { color: var(--ink); font-size: 14px; margin: 0 0 8px; letter-spacing: 0; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; color: var(--ink); }
.foot-bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.foot-bottom p { margin: 0; }
@media (min-width: 900px) { .foot .cols { grid-template-columns: 2fr 1fr 1fr; } .foot .foot-about { grid-column: auto; } }

/* ---------- Openbare demo ---------- */
.demo-bar { background: var(--accent); color: var(--on-accent); font-size: 14px; }
.demo-bar .wrap { display: flex; gap: 8px 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.demo-bar p { margin: 0; }
.demo-bar-links { display: flex; gap: 14px; font-weight: 650; }
.demo-mail { background: var(--soft); border-bottom: 1px solid var(--line); padding: 14px 0; font-size: 14px; }
.demo-mail-head { display: flex; gap: 10px; align-items: center; margin: 0 0 10px; }
.demo-mail-item { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin-top: 8px; }
.demo-mail-item summary { cursor: pointer; display: flex; justify-content: space-between; gap: 12px; font-weight: 600; }
.demo-mail-item summary small { color: var(--muted); font-weight: 400; }
.demo-mail-body { white-space: pre-wrap; margin-top: 8px; overflow-wrap: anywhere; }
.demo-note { display: flex; gap: 10px; align-items: flex-start; background: var(--soft); border-radius: 12px; padding: 12px 14px; font-size: 14px; }

/* ---------------------------------------------------------------- Verdienen (taak 7) */
/* Fotoknaller: drie foto's op de kaart, groot boven en twee klein eronder */
.card.knaller .ph { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 2fr 1fr; gap: 2px; background: var(--bg); }
.card.knaller .ph > picture:first-of-type, .card.knaller .ph > img:first-of-type { grid-column: 1 / -1; }
.card.knaller .ph picture { display: block; min-height: 0; }
.card.knaller .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pill.promo { background: color-mix(in srgb, var(--accent) 22%, var(--bg)); color: var(--ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, var(--line)); }

/* Pakketten (plaatsformulier, kassa, tegoed) */
.packs { display: grid; gap: 10px; }
@media (min-width: 640px) { .packs { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } }
.pack { position: relative; cursor: pointer; display: block; }
.pack input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.pack-body { display: grid; gap: 4px; height: 100%; padding: 16px; border-radius: var(--r); border: 1.5px solid var(--line); background: var(--card); }
.pack-body b { font-size: 17px; }
.pack-body span { color: var(--muted); font-size: 14px; line-height: 1.4; }
.pack-body strong { margin-top: 6px; font-size: 18px; }
.pack:hover .pack-body { border-color: color-mix(in srgb, var(--ink) 45%, var(--line)); }
.pack input:checked + .pack-body { border-color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.pack input:checked + .pack-body strong { display: inline-block; justify-self: start; background: var(--accent); color: var(--on-accent); padding: 1px 8px; border-radius: 6px; }
.pack input:focus-visible + .pack-body { outline: 3px solid var(--focus); outline-offset: 2px; }
.pack input:disabled + .pack-body { opacity: .55; cursor: not-allowed; }

/* Kassa */
.co-ad { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; margin: 0 0 18px; }
.co-ph { display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--soft); color: var(--muted); }
.co-ph picture { display: contents; }
.co-ph img { width: 100%; height: 100%; object-fit: cover; }
.co-ad h2 { margin: 0 0 6px; font-size: 19px; letter-spacing: -0.01em; }
.co-fixed, .co-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--card); }
.co-fixed { background: var(--soft); border-color: var(--soft); }
.co-fixed > span, .co-txt { display: grid; gap: 2px; }
.co-fixed span span, .co-txt span { color: var(--muted); font-size: 14px; line-height: 1.4; }
.co-txt .co-run { color: var(--ink); font-weight: 600; font-size: 13px; }
.co-opts { display: grid; gap: 8px; }
.co-opt { grid-template-columns: 24px minmax(0, 1fr) auto; cursor: pointer; min-height: 44px; }
.co-opt input { width: 22px; height: 22px; margin: 0; accent-color: var(--ink); cursor: pointer; }
.co-opt:has(input:checked) { border-color: var(--ink); }
.co-opt strong, .co-fixed strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.co-total { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 0 0; padding-top: 14px; border-top: 1.5px solid var(--ink); font-weight: 650; font-size: 17px; }
.co-total strong { font-size: 24px; font-variant-numeric: tabular-nums; }

/* Tegoed en facturen */
.wallet-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 20px; }
.wallet-kpis div { display: grid; gap: 2px; padding: 16px; border-radius: var(--r); background: var(--soft); }
.wallet-kpis span, .wallet-kpis small { color: var(--muted); font-size: 14px; }
.wallet-kpis strong { font-size: 26px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.wallet-kpis div:first-child { background: var(--ink); color: var(--bg); }
.wallet-kpis div:first-child span { color: color-mix(in srgb, var(--bg) 75%, transparent); }
.ledger-wrap { overflow-x: auto; margin-top: 12px; }
.ledger { width: 100%; border-collapse: collapse; font-size: 15px; }
.ledger th { text-align: left; font-size: 13.5px; font-weight: 600; color: var(--muted); padding: 8px 10px 8px 0; border-bottom: 1.5px solid var(--line); }
.ledger td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.ledger .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; padding-right: 0; }
.ledger .plus { color: var(--ok); font-weight: 600; }
.ledger a { color: var(--ink); font-weight: 600; }

/* Banners: "plek" (geen woorden als banner/ads: reclameblokkers verbergen die) */
.plek { position: relative; display: block; margin: 24px 0; border-radius: var(--r); overflow: hidden; background: var(--soft); }
.plek img { display: block; width: 100%; height: auto; }
.plek a { display: block; }
.plek-label { position: absolute; right: 8px; top: 8px; z-index: 1; font-size: 11.5px; font-weight: 700; padding: 2px 7px; border-radius: 5px; background: rgba(255, 255, 255, .92); color: #121212; }
.plek[data-plek] { padding: 34px 16px 16px; min-height: 90px; }
.plek-wacht { margin: 0; color: var(--muted); font-size: 14px; text-align: center; }
.item-side .plek { margin: 18px 0 0; }
.linkbtn { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; min-height: 24px; }
.cookiebar { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: 76px; max-width: 520px; margin: 0 auto; padding: 16px; border-radius: 18px; background: var(--card); color: var(--ink); box-shadow: 0 8px 30px rgba(0, 0, 0, .18); border: 1px solid var(--line); }
.cookiebar p { margin: 0 0 12px; font-size: 15px; }
@media (min-width: 900px) { .cookiebar { bottom: 20px; } }

/* Melden (taak 8): meldformulier, meldlinks, vraag "aanpassen" bij Mijn advertenties */
.report-what { display: flex; gap: 14px; align-items: center; padding: 12px; margin: 0 0 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); color: var(--ink); text-decoration: none; }
.report-what:hover { border-color: color-mix(in srgb, var(--ink) 40%, var(--line)); }
.report-what small { display: block; color: var(--muted); font-size: 13.5px; }
.report-what b { display: block; overflow-wrap: anywhere; }
.report-ph { flex: none; display: grid; place-items: center; width: 64px; height: 80px; border-radius: 10px; overflow: hidden; background: var(--soft); color: var(--muted); }
.report-ph img { width: 100%; height: 100%; object-fit: cover; }
.report-foot { margin-top: 20px; }
.report-link { color: var(--muted); text-underline-offset: 2px; display: inline-flex; align-items: center; min-height: 24px; }
.report-link:hover { color: var(--ink); }
.review-foot { margin: 6px 0 0; font-size: 13.5px; }
.myad-ask { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 22%, var(--card)); color: var(--ink); font-size: 14px; line-height: 1.45; }
.myad-ask .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; }