/* ─────────────────────────────────────────────────────────────────────────
   Off-Grid Marketplace Theme — main.css
   Light + dark theme via CSS variables on html[data-theme].
   BEM naming, wireframe-light, mobile-first. Vanilla — no framework.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Theme tokens ─────────────────────────────────────────────────────── */
:root {
    /* Etsy-inspired palette: warm cream backgrounds, soft borders, generous radii */
    --ogm-accent: #2f7a3a;        /* slightly muted forest green */
    --ogm-accent-rgb: 47, 122, 58; /* RGB form for rgba() tints (soft fills, focus rings, banners) */
    --ogm-accent-hover: #245d2e;
    --ogm-bg: #fefefc;            /* very subtle warm white */
    --ogm-bg-elev: #ffffff;       /* card surface = pure white */
    --ogm-bg-soft: #f5f3ef;       /* warm cream for sections */
    --ogm-text: #222020;          /* near-black, warm */
    --ogm-text-muted: #6b6660;    /* warm gray */
    --ogm-border: #ece8e1;        /* warm hairline */
    --ogm-border-strong: #d8d2c8;
    --ogm-danger: #b53a3a;
    --ogm-warning: #c08020;
    --ogm-radius: 8px;
    --ogm-radius-lg: 14px;
    --ogm-shadow: 0 1px 2px rgba(30,25,20,.04);
    --ogm-shadow-lg: 0 14px 36px rgba(30,25,20,.08);
    --ogm-maxw: 1280px;
    --ogm-gap: 16px;
    --ogm-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* ── Per-section accent palette ──
       Modern, bright-but-soft, elegant. Each color a few shades LIGHTER than
       a "pro brand" tone. Section pages set --ogm-section-accent so that all
       page-level accents (hero wash, primary buttons, breadcrumbs, link
       color, badges) shift to that section's color automatically.
       --ogm-color-*-accent = the saturated brand tone for the section
       --ogm-color-*-soft   = pastel hero wash + page background tint */
    /* Same lightness range as before — just more saturation. Less pale,
       more tonal richness, no darker. */
    --ogm-color-re-accent:  #4cb064;  /* Real Estate — richer medium green */
    --ogm-color-re-rgb:     76, 176, 100;
    --ogm-color-re-soft:    #dceee2;
    --ogm-color-mkt-accent: #f09a25;  /* Marketplace — deeper amber-orange */
    --ogm-color-mkt-rgb:    240, 154, 37;
    --ogm-color-mkt-soft:   #fbe8c8;
    --ogm-color-svc-accent: #34bdcc;  /* Services    — modern turquoise */
    --ogm-color-svc-rgb:    52, 189, 204;
    --ogm-color-svc-soft:   #d6eef2;
    --ogm-color-cls-accent: #a89e8d;  /* Classifieds — warm newsprint tan */
    --ogm-color-cls-rgb:    168, 158, 141;
    --ogm-color-cls-soft:   #ebe6dd;
    --ogm-color-grp-accent: #3b9ee3;  /* Groups      — community blue */
    --ogm-color-grp-rgb:    59, 158, 227;
    --ogm-color-grp-soft:   #daebf7;
    --ogm-color-bkg-accent: #9b6cb1;  /* Bookings    — muted purple / retreat */
    --ogm-color-bkg-rgb:    155, 108, 177;
    --ogm-color-bkg-soft:   #ece1f2;
    --ogm-color-job-accent: #c4623d;  /* Jobs        — terracotta / industry */
    --ogm-color-job-rgb:    196, 98, 61;
    --ogm-color-job-soft:   #f4dccf;
}

/* Dark theme retained as opt-in but no longer the default contrast-heavy variant */
html[data-theme="dark"] {
    --ogm-accent: #5ed66a;
    --ogm-accent-hover: #7be785;
    --ogm-bg: #18171a;
    --ogm-bg-elev: #21202a;
    --ogm-bg-soft: #2a2832;
    --ogm-text: #ece8e1;
    --ogm-text-muted: #a6a09a;
    --ogm-border: #322f38;
    --ogm-border-strong: #423d49;
    --ogm-danger: #e87a76;
    --ogm-warning: #e0bb5a;
    --ogm-shadow: 0 1px 2px rgba(0,0,0,.3);
    --ogm-shadow-lg: 0 14px 36px rgba(0,0,0,.45);
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.ogm-body {
    font-family: var(--ogm-font);
    background: var(--ogm-bg);
    color: var(--ogm-text);
    line-height: 1.5;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--ogm-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: 1.85rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.15rem; }

/* ── Layout ───────────────────────────────────────────────────────────── */
.ogm-main { max-width: var(--ogm-maxw); margin: 0 auto; padding: 24px 16px 64px; min-height: 60vh; }
.ogm-container { max-width: var(--ogm-maxw); margin: 0 auto; padding: 0 16px; }

/* ── Header / global nav ──────────────────────────────────────────────── */
.ogm-header {
    background: var(--ogm-bg-elev);
    border-bottom: 1px solid var(--ogm-border);
    /* z-index must beat Leaflet's panes (max 1000) — otherwise the map's
       internal stacking paints over the sticky header AND, more importantly,
       over the mobile drawer (which lives INSIDE this header's stacking
       context). Drawer + scrim use 1200/1190 inside; header at 1500 puts
       both safely above any leaflet pane in the root stacking context. */
    position: sticky; top: 0; z-index: 1500;
}
.ogm-header__inner {
    max-width: var(--ogm-maxw);
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: nowrap;
    min-height: 60px;
}

/* Row 2 — search row, full-width below the top bar, always visible */
.ogm-header__search-row {
    border-top: 1px solid var(--ogm-border);
    background: var(--ogm-bg-soft);
    padding: 14px 20px;
}
.ogm-header__search-row .ogm-header__search {
    max-width: 720px;
    margin: 0 auto;
}
.ogm-header__brand {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--ogm-text);
    white-space: nowrap;
    flex: none;
}
.ogm-header__brand:hover { text-decoration: none; }
/* Dropdown nav (Browse + Post/Sell) — uses <details>/<summary> */
.ogm-nav-dd { position: relative; flex: none; }
.ogm-nav-dd > summary {
    list-style: none;
    cursor: pointer;
    padding: 7px 12px;
    border-radius: var(--ogm-radius);
    font-weight: 600;
    font-size: .92rem;
    color: var(--ogm-text);
    white-space: nowrap;
    user-select: none;
}
.ogm-nav-dd > summary::-webkit-details-marker { display: none; }
.ogm-nav-dd > summary:hover { background: var(--ogm-bg-soft); color: var(--ogm-accent); }
.ogm-nav-dd[open] > summary { background: var(--ogm-bg-soft); color: var(--ogm-accent); }
.ogm-nav-dd__pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    background: var(--ogm-bg-elev);
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius-lg);
    box-shadow: var(--ogm-shadow-lg);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    /* Leaflet's control panes use z-index up to 1000; keep nav dropdowns above. */
    z-index: 1100;
}
/* Invisible bridge over the 6px gap between summary and popup so the cursor
   can travel from summary into the popup without firing mouseleave on details. */
.ogm-nav-dd__pop::before {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 100%;
    height: 10px;
}
.ogm-nav-dd__pop a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--ogm-radius);
    color: var(--ogm-text);
    font-size: .92rem;
    font-weight: 500;
}
.ogm-nav-dd__pop a:hover { background: var(--ogm-bg-soft); color: var(--ogm-accent); text-decoration: none; }
.ogm-nav-dd__ico { font-size: 1.25rem; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--ogm-text-muted); line-height: 1; }
.ogm-nav-dd__ico .ogm-ico { width: 20px; height: 20px; display: block; }
.ogm-nav-dd__pop a:hover .ogm-nav-dd__ico,
.ogm-nav-dd__pop button:hover .ogm-nav-dd__ico { color: var(--ogm-accent); }
.ogm-nav-dd--sell > summary { color: var(--ogm-accent); }

/* Categories megamenu — tight, clamps to viewport, never overflows */
.ogm-nav-dd--mega .ogm-megamenu {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    width: 820px;
    max-width: calc(100vw - 32px);     /* hard guarantee: never wider than viewport */
    background: var(--ogm-bg-elev);
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius-lg);
    box-shadow: var(--ogm-shadow-lg);
    padding: 14px 16px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 14px;
    z-index: 200;
}
/* 6-section variant: Real Estate, Marketplace, Bookings, Services, Jobs, Classifieds.
   Tight 6-col grid at desktop; wraps to 3 well before any clipping risk. */
.ogm-nav-dd--mega .ogm-megamenu--six {
    width: 980px;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px 12px;
}
.ogm-nav-dd--mega .ogm-megamenu::before {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 100%;
    height: 10px;
}
@media (max-width: 1020px) {
    .ogm-nav-dd--mega .ogm-megamenu--six { width: 720px; grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
    .ogm-nav-dd--mega .ogm-megamenu { width: 460px; grid-template-columns: repeat(2, 1fr); }
    .ogm-nav-dd--mega .ogm-megamenu--six { width: 460px; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
    .ogm-nav-dd--mega .ogm-megamenu { width: 280px; grid-template-columns: 1fr; }
    .ogm-nav-dd--mega .ogm-megamenu--six { width: 280px; grid-template-columns: 1fr; }
}
.ogm-megamenu__col h4 {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ogm-text-muted);
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--ogm-border);
}
.ogm-megamenu__col h4 a { color: var(--ogm-text); font-size: .95rem; text-transform: none; letter-spacing: 0; font-weight: 700; }
.ogm-megamenu__col a {
    display: block;
    padding: 4px 0;
    font-size: .88rem;
    color: var(--ogm-text);
}
.ogm-megamenu__col a:hover { color: var(--ogm-accent); text-decoration: none; }

/* Cart styling lives in .ogm-header__icon-btn below — all three icons share size/shape. */

/* ── Header RIGHT cluster — LTR order: chat | email | cart | user-dropdown.
   margin-left: auto pushes the whole cluster to the far right of the top bar. */
.ogm-header__right {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}
/* All three icon buttons (chat, mail, cart) share the same dimensions: 33px. */
.ogm-header__icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 33px; height: 33px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    color: var(--ogm-text);
    cursor: pointer;
    text-decoration: none;
    transition: background .12s, border-color .12s;
}
.ogm-header__icon-btn:hover {
    background: var(--ogm-bg-soft);
    border-color: var(--ogm-border);
    text-decoration: none;
}
.ogm-header__ico { font-size: 1.15rem; line-height: 1; }
.ogm-header__cart-badge,
.ogm-header__mail-badge,
.ogm-header__chat-badge {
    position: absolute;
    top: -2px; right: -4px;
    background: var(--ogm-danger);
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 999px;
    min-width: 16px;
    text-align: center;
    border: 2px solid var(--ogm-bg-elev);
}
.ogm-header__user {
    /* avatar + chev dropdown — rightmost item */
    margin-left: 4px;
}
.ogm-header__user > summary {
    list-style: none;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ogm-header__user > summary::-webkit-details-marker { display: none; }
.ogm-header__user > summary:hover { background: var(--ogm-bg-soft); }
.ogm-header__user .ogm-gear__avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
}
.ogm-header__user .ogm-gear__chev {
    color: var(--ogm-text-muted);
    font-size: .75rem;
}
/* Old larger Mail/Chat block removed — both now use .ogm-header__icon-btn (33px). */

/* ── Modal overlay (used by Mail viewer + Chat overlay + Header Mail/Chat triggers) ── */
.ogm-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(20, 18, 16, .55);
    z-index: 9998;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
}
.ogm-modal-backdrop.is-open { display: flex; }
.ogm-modal {
    position: relative;
    width: 100%;
    max-width: 760px;
    background: var(--ogm-bg-elev);
    border-radius: var(--ogm-radius-lg);
    box-shadow: var(--ogm-shadow-lg);
    overflow: hidden;
    z-index: 9999;
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
}
.ogm-modal--wide { max-width: 960px; }
.ogm-modal__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--ogm-border);
    background: var(--ogm-bg-soft);
}
.ogm-modal__header h2 { margin: 0; font-size: 1.1rem; }
.ogm-modal__close {
    background: transparent; border: none;
    font-size: 1.4rem; cursor: pointer; color: var(--ogm-text-muted);
    padding: 4px 10px; border-radius: var(--ogm-radius);
    line-height: 1;
}
.ogm-modal__close:hover { background: var(--ogm-bg); color: var(--ogm-text); }
.ogm-modal__body {
    padding: 18px 20px;
    overflow-y: auto;
    flex: 1 1 auto;
}
.ogm-modal__footer {
    padding: 12px 18px;
    border-top: 1px solid var(--ogm-border);
    background: var(--ogm-bg-soft);
}

/* OGM Mail modal — message viewer + reply form */
.ogm-mail-modal__meta {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 6px 14px;
    font-size: .9rem;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ogm-border);
}
.ogm-mail-modal__meta dt { color: var(--ogm-text-muted); font-weight: 600; margin: 0; }
.ogm-mail-modal__meta dd { margin: 0; color: var(--ogm-text); }
.ogm-mail-modal__msg {
    background: var(--ogm-bg-soft);
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius);
    padding: 12px 14px;
    margin-bottom: 10px;
}
.ogm-mail-modal__msg-from { font-weight: 600; margin-bottom: 4px; font-size: .9rem; }
.ogm-mail-modal__msg-when { color: var(--ogm-text-muted); font-size: .8rem; margin-bottom: 8px; }
.ogm-mail-modal__msg-body { line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; }
.ogm-mail-modal__reply textarea {
    width: 100%; min-height: 100px;
    padding: 10px 12px;
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius);
    background: var(--ogm-bg);
    color: var(--ogm-text);
    font: inherit; box-sizing: border-box;
    resize: vertical;
}
.ogm-mail-modal__reply-actions {
    display: flex; align-items: center; gap: 10px;
    margin-top: 10px;
}

/* ──────────────────────────────────────────────────────────────────────
   Chat modal — AION-style sidebar + thread pane.
   Sidebar: conversations list. Main: pane head + scrollable messages +
   sticky composer at the bottom. Mobile: stack vertically, sidebar shrinks
   to a thin row up top until a conversation is selected.
   ────────────────────────────────────────────────────────────────────── */
.ogm-chat {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    height: min(720px, 90vh);
    max-width: 960px;
    width: 100%;
    position: relative;
}
.ogm-chat__close {
    position: absolute; top: 10px; right: 10px;
    background: transparent; border: 0;
    width: 32px; height: 32px;
    font-size: 24px; line-height: 1;
    color: var(--ogm-text-muted);
    cursor: pointer;
    z-index: 5;
    border-radius: 50%;
}
.ogm-chat__close:hover { background: var(--ogm-bg-soft); color: var(--ogm-text); }

.ogm-chat__sidebar {
    flex: 0 0 320px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--ogm-border);
    background: var(--ogm-bg);
    min-width: 0;
}
.ogm-chat__sidebar-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ogm-border);
}
.ogm-chat__sidebar-head h2 { font-size: 1.05rem; font-weight: 700; margin: 0; }
.ogm-chat__new {
    background: var(--ogm-accent); color: #fff;
    border: 0; border-radius: 999px;
    padding: 6px 14px;
    font-weight: 600; font-size: .85rem;
    cursor: pointer;
}
.ogm-chat__new:hover { filter: brightness(1.08); }

.ogm-chat__list {
    list-style: none; padding: 0; margin: 0;
    overflow-y: auto; flex: 1 1 auto;
}
.ogm-chat__loading { padding: 24px 16px; color: var(--ogm-text-muted); text-align: center; }
.ogm-chat__row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--ogm-border);
}
.ogm-chat__row:hover    { background: var(--ogm-bg-soft); }
.ogm-chat__row.is-active{ background: var(--ogm-bg-soft); }
.ogm-chat__row.is-unread .ogm-chat__row-name,
.ogm-chat__row.is-unread .ogm-chat__row-preview { font-weight: 700; color: var(--ogm-text); }
.ogm-chat__row .ogm-avatar { width: 40px; height: 40px; flex: none; }
.ogm-chat__row-main  { flex: 1 1 auto; min-width: 0; }
.ogm-chat__row-top   { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ogm-chat__row-name  { font-weight: 600; color: var(--ogm-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ogm-chat__row-when  { color: var(--ogm-text-muted); font-size: .78rem; flex: none; }
.ogm-chat__row-preview {
    color: var(--ogm-text-muted); font-size: .85rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ogm-chat__sidebar-foot {
    padding: 10px 16px;
    border-top: 1px solid var(--ogm-border);
    text-align: center;
}
.ogm-chat__sidebar-foot a { color: var(--ogm-accent); font-size: .85rem; }

.ogm-chat__main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    background: var(--ogm-bg);
    min-width: 0;
}
.ogm-chat__empty {
    flex: 1 1 auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; color: var(--ogm-text-muted);
    padding: 30px;
}
.ogm-chat__empty h3 { margin: 0 0 6px; color: var(--ogm-text); font-size: 1.15rem; }

.ogm-chat__pane {
    flex: 1 1 auto;
    display: flex; flex-direction: column;
    min-height: 0;
}
.ogm-chat__pane[hidden] { display: none; }
.ogm-chat__pane-head {
    padding: 10px 16px;
    border-bottom: 1px solid var(--ogm-border);
}
.ogm-chat__pane-head-inner { display: flex; align-items: center; gap: 10px; }
.ogm-chat__pane-head .ogm-avatar { width: 32px; height: 32px; }
.ogm-chat__pane-head-name { font-weight: 600; }

.ogm-chat__messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex; flex-direction: column; gap: 8px;
}
.ogm-chat__msg {
    max-width: 75%;
    align-self: flex-start;
    background: var(--ogm-bg-soft);
    border: 1px solid var(--ogm-border);
    border-radius: 12px 12px 12px 4px;
    padding: 8px 12px;
}
.ogm-chat__msg.is-mine {
    align-self: flex-end;
    background: var(--ogm-accent);
    color: #fff;
    border-color: var(--ogm-accent);
    border-radius: 12px 12px 4px 12px;
}
.ogm-chat__msg-body { white-space: pre-wrap; word-wrap: break-word; line-height: 1.4; }
.ogm-chat__msg-when {
    font-size: .7rem;
    color: var(--ogm-text-muted);
    margin-top: 4px;
    text-align: right;
}
.ogm-chat__msg.is-mine .ogm-chat__msg-when { color: rgba(255,255,255,.85); }
.ogm-chat__error { padding: 16px; color: var(--ogm-danger); text-align: center; }

.ogm-chat__composer {
    display: flex; align-items: flex-end; gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--ogm-border);
    background: var(--ogm-bg);
}
.ogm-chat__composer textarea {
    flex: 1 1 auto;
    border: 1px solid var(--ogm-border);
    border-radius: 18px;
    padding: 8px 14px;
    background: var(--ogm-bg-soft);
    color: var(--ogm-text);
    font: inherit;
    resize: none;
    min-height: 38px;
    max-height: 120px;
}
.ogm-chat__composer textarea:focus { outline: none; border-color: var(--ogm-accent); }
.ogm-chat__composer .ogm-btn { padding: 8px 16px; }

@media (max-width: 720px) {
    .ogm-chat { flex-direction: column; height: 92vh; }
    .ogm-chat__sidebar { flex: 0 0 auto; max-height: 45%; border-right: 0; border-bottom: 1px solid var(--ogm-border); }
    .ogm-chat__sidebar-foot { display: none; }
}

/* ──────────────────────────────────────────────────────────────────────
   Hovercard — floating user card. JS positions it; CSS handles look.
   ────────────────────────────────────────────────────────────────────── */
.ogm-hovercard {
    position: absolute;
    z-index: 1200;
    width: 320px;
    max-width: calc(100vw - 24px);
    background: var(--ogm-bg-elev);
    border: 1px solid var(--ogm-border-strong);
    border-radius: var(--ogm-radius-lg);
    box-shadow: var(--ogm-shadow-lg);
    padding: 16px;
    color: var(--ogm-text);
    font-size: .92rem;
    pointer-events: auto;
}
.ogm-hovercard[hidden] { display: none; }
.ogm-hovercard__loading { padding: 12px; color: var(--ogm-text-muted); text-align: center; }
.ogm-hovercard__head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 10px;
}
.ogm-hovercard__avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
}
.ogm-hovercard__title { min-width: 0; flex: 1 1 auto; }
.ogm-hovercard__name {
    display: block;
    font-weight: 700; font-size: 1.05rem;
    color: var(--ogm-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ogm-hovercard__name:hover { color: var(--ogm-accent); text-decoration: none; }
.ogm-hovercard__handle { color: var(--ogm-text-muted); font-size: .85rem; }

.ogm-hovercard__tagline { font-weight: 600; margin: 8px 0 4px; }
.ogm-hovercard__bio     { color: var(--ogm-text); margin: 6px 0; line-height: 1.45; }
.ogm-hovercard__link    { margin: 6px 0; font-size: .88rem; }
.ogm-hovercard__link a  { color: var(--ogm-accent); }

/* AION-style stats row: "115 posts · 3 followers · 5 following" */
.ogm-hovercard__stats {
    display: flex; gap: 14px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--ogm-border);
    font-size: .85rem; color: var(--ogm-text-muted);
    flex-wrap: wrap;
}
.ogm-hovercard__stats strong { color: var(--ogm-text); font-weight: 700; margin-right: 4px; }
/* Stat items are now LINKS — keep the muted look + add hover affordance. */
.ogm-hovercard__stat {
    color: var(--ogm-text-muted);
    text-decoration: none;
    cursor: pointer;
}
.ogm-hovercard__stat:hover {
    color: var(--ogm-accent);
    text-decoration: none;
}
.ogm-hovercard__stat:hover strong { color: var(--ogm-accent); }

/* AION-style 4-button action row (Following | Message | Tip | Subscribe). */
.ogm-hovercard__actions {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin: 12px 0 4px;
}
.ogm-hovercard__btn {
    flex: 1 1 auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    padding: 6px 10px;
    border: 1px solid var(--ogm-border);
    border-radius: 999px;
    background: var(--ogm-bg);
    color: var(--ogm-text);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    min-width: 0;
}
.ogm-hovercard__btn:hover { border-color: var(--ogm-accent); color: var(--ogm-accent); text-decoration: none; }
.ogm-hovercard__btn.is-on {
    background: var(--ogm-accent); border-color: var(--ogm-accent); color: #fff;
}
.ogm-hovercard__btn.is-on:hover { color: #fff; filter: brightness(1.08); }
.ogm-hovercard__btn--primary {
    background: var(--ogm-accent);
    border-color: var(--ogm-accent);
    color: #fff;
}
.ogm-hovercard__btn--primary:hover { filter: brightness(1.08); color: #fff; border-color: var(--ogm-accent); }

/* The avatar trigger should hint at interactivity */
[data-ogm-user] { cursor: pointer; }
a[data-ogm-user], a [data-ogm-user] { cursor: pointer; }

.ogm-header__search {
    flex: 1;
    min-width: 0;
    max-width: 620px;
    display: flex;
    align-items: stretch;
    background: var(--ogm-bg);
    border: 2px solid var(--ogm-border);
    border-radius: 999px;
    position: relative;
    height: 46px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ogm-header__search:focus-within {
    border-color: var(--ogm-accent);
    box-shadow: 0 0 0 3px rgba(var(--ogm-accent-rgb),.18);
}
.ogm-header__search input {
    flex: 1;
    min-width: 0;
    border: 0;
    padding: 0 18px;
    background: transparent;
    color: var(--ogm-text);
    outline: none;
    font-size: 1rem;
    border-radius: 999px 0 0 999px;
}
.ogm-header__search input::placeholder { color: var(--ogm-text-muted); }
.ogm-header__search-go {
    border: 0;
    background: var(--ogm-accent);
    color: #fff;
    padding: 0 24px;
    cursor: pointer;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 0 999px 999px 0;
    transition: background .15s ease;
}
.ogm-header__search-go:hover { background: #246e2e; }

/* "🗺 Search Map" trigger button — sits inside the rounded search pill, between input and Go */
.ogm-header__map-trigger {
    border: 0;
    background: transparent;
    color: var(--ogm-text);
    padding: 0 14px;
    cursor: pointer;
    font-weight: 600;
    font-size: .9rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-left: 1px solid var(--ogm-border);
    transition: background .15s ease, color .15s ease;
    white-space: nowrap;
}
.ogm-header__map-trigger:hover { background: rgba(var(--ogm-accent-rgb),.08); color: var(--ogm-accent); }
.ogm-header__map-trigger-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px;
}
.ogm-header__map-trigger-icon .ogm-ico { width: 20px; height: 20px; display: block; }
.ogm-header__map-trigger-label { text-transform: uppercase; letter-spacing: .02em; }
/* Mobile: keep the word "MAP" visible — Eric's rule. Icon stays, label stays. */
@media (max-width: 900px) {
    .ogm-header__map-trigger { padding: 0 10px; gap: 5px; font-size: .85rem; }
    .ogm-header__map-trigger-icon { width: 18px; height: 18px; }
    .ogm-header__map-trigger-icon .ogm-ico { width: 18px; height: 18px; }
}

/* ── Header search autocomplete dropdown ──────────────────────────────── */
.ogm-search-autocomplete {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    background: var(--ogm-bg-elev);
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius-lg);
    box-shadow: var(--ogm-shadow-lg);
    padding: 6px;
    z-index: 250;
    max-height: 70vh;
    overflow-y: auto;
}
.ogm-search-autocomplete__group {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ogm-text-muted);
    padding: 8px 12px 4px;
}
.ogm-search-autocomplete__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--ogm-radius);
    color: var(--ogm-text);
    text-decoration: none;
    cursor: pointer;
}
.ogm-search-autocomplete__item:hover,
.ogm-search-autocomplete__item.is-active {
    background: var(--ogm-bg-soft);
    text-decoration: none;
}
.ogm-search-autocomplete__icon { font-size: 1rem; width: 22px; text-align: center; flex: none; }
.ogm-search-autocomplete__body { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ogm-search-autocomplete__label {
    font-weight: 600;
    font-size: .92rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ogm-search-autocomplete__label mark {
    background: rgba(var(--ogm-accent-rgb), .18);
    color: var(--ogm-text);
    border-radius: 2px;
    padding: 0 1px;
}
.ogm-search-autocomplete__sub { font-size: .75rem; color: var(--ogm-text-muted); margin-top: 2px; }
.ogm-search-autocomplete__all {
    display: block;
    width: 100%;
    text-align: left;
    margin-top: 4px;
    padding: 10px 12px;
    background: var(--ogm-bg-soft);
    border: 0;
    border-radius: var(--ogm-radius);
    color: var(--ogm-accent);
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
}
.ogm-search-autocomplete__all:hover { background: var(--ogm-bg); }
.ogm-search-autocomplete__empty {
    padding: 16px 12px;
    text-align: center;
    color: var(--ogm-text-muted);
    font-size: .9rem;
}

/* On mobile drawer, the autocomplete should fill the screen width */
@media (max-width: 900px) {
    .ogm-search-autocomplete { left: -8px; right: -8px; max-height: 60vh; }
}
.ogm-header__actions { display: flex; gap: 6px; align-items: center; margin-left: auto; flex: none; }
.ogm-header__actions .ogm-btn { padding: 6px 12px; font-size: .9rem; }

/* Desktop: drawer flows inline via display:contents; visual order via flex order. */
.ogm-header__nav { display: contents; }
.ogm-header__brand                       { order: 1; }
.ogm-header__nav .ogm-nav-dd--browse     { order: 2; }
.ogm-header__nav .ogm-nav-dd--mega       { order: 3; }
.ogm-header__nav .ogm-nav-dd--sell       { order: 4; }
.ogm-header__nav .ogm-header__actions    { order: 5; margin-left: auto; }
.ogm-header__right                       { order: 99; margin-left: auto; }
.ogm-hamburger                           { order: 100; display: none; }
.ogm-drawer-scrim                        { display: none; }

/* Hamburger button (mobile only). Three-line icon built from spans. */
.ogm-hamburger {
    flex: none;
    width: 40px; height: 40px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-direction: column;
}
.ogm-hamburger:hover { background: var(--ogm-bg-soft); }
.ogm-hamburger span {
    display: block;
    width: 18px; height: 2px;
    background: var(--ogm-text);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}
body.ogm-mobile-nav-open .ogm-hamburger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.ogm-mobile-nav-open .ogm-hamburger span:nth-child(2) { opacity: 0; }
body.ogm-mobile-nav-open .ogm-hamburger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1024px) {
    .ogm-nav-dd > summary { padding: 7px 10px; font-size: .88rem; }
    .ogm-header__actions .ogm-btn { padding: 6px 10px; font-size: .88rem; }
}

/* ── Mobile drawer mode (below 900px) ────────────────────────────────── */
@media (max-width: 900px) {
    .ogm-header__inner { gap: 10px; padding: 10px 12px; }
    .ogm-hamburger { display: inline-flex; }

    /* Nav becomes a fixed drawer panel sliding in from the right. */
    .ogm-header__nav {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        position: fixed;
        top: 0; right: 0; bottom: 0;
        width: 320px;
        max-width: 88vw;
        background: var(--ogm-bg-elev);
        border-left: 1px solid var(--ogm-border);
        box-shadow: var(--ogm-shadow-lg);
        padding: 18px 14px 24px;
        transform: translateX(100%);
        transition: transform .25s ease;
        /* Leaflet panes/controls reach z-index 1000. Drawer + scrim must beat
           that or the map paints over them on the real estate browse page. */
        z-index: 1200;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    body.ogm-mobile-nav-open .ogm-header__nav { transform: translateX(0); }

    /* Scrim behind the drawer */
    .ogm-drawer-scrim {
        position: fixed; inset: 0;
        background: rgba(0, 0, 0, .45);
        z-index: 1190;
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }
    body.ogm-mobile-nav-open .ogm-drawer-scrim {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }
    body.ogm-mobile-nav-open { overflow: hidden; }

    /* Dropdowns inside the drawer: full-width tap targets, popups inline-flow */
    .ogm-header__nav .ogm-nav-dd { width: 100%; }
    .ogm-header__nav .ogm-nav-dd > summary {
        padding: 12px 14px;
        font-size: 1rem;
        border-radius: var(--ogm-radius);
        border: 1px solid var(--ogm-border);
    }
    .ogm-header__nav .ogm-nav-dd[open] > summary {
        border-color: var(--ogm-accent);
        background: var(--ogm-bg-soft);
    }
    .ogm-header__nav .ogm-nav-dd__pop,
    .ogm-header__nav .ogm-nav-dd--mega .ogm-megamenu {
        position: static;
        /* Reset desktop's centering — without this, the megamenu's
           transform:translateX(-50%) shifts it half its own width to the
           LEFT, pushing it off-screen inside the mobile drawer. */
        left: auto;
        right: auto;
        top: auto;
        transform: none;
        box-shadow: none;
        border: 0;
        margin-top: 4px;
        padding: 4px 0 8px 12px;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        grid-template-columns: 1fr;
        gap: 10px 0;
    }
    .ogm-header__nav .ogm-nav-dd__pop a { padding: 10px 12px; font-size: 1rem; }
    .ogm-header__nav .ogm-megamenu__col h4 { margin-top: 8px; }

    /* Restore Post/Sell label inside the drawer (we drop the +/icon shrink) */
    .ogm-header__nav .ogm-nav-dd--sell > summary { font-size: 1rem; padding: 12px 14px; }
    .ogm-header__nav .ogm-nav-dd--sell > summary::before { content: none; }

    /* Actions become a stacked group at the bottom of the drawer */
    .ogm-header__nav .ogm-header__actions {
        margin: 12px 0 0;
        padding-top: 14px;
        border-top: 1px solid var(--ogm-border);
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        width: 100%;
    }
    .ogm-header__nav .ogm-header__actions .ogm-btn {
        width: 100%;
        text-align: center;
        padding: 11px 14px;
        font-size: .95rem;
    }
    .ogm-header__nav .ogm-theme-toggle {
        align-self: center;
        margin-bottom: 4px;
    }
}

@media (max-width: 900px) {
    /* Reduce padding on the search row on mobile */
    .ogm-header__search-row { padding: 10px 12px; }
    /* Force the search to grow to fill the row */
    .ogm-header__search { max-width: 100%; height: 44px; }
    /* Push cart + hamburger to the right side of the top bar */
    .ogm-header__cart { margin-left: auto; }
}
@media (max-width: 520px) {
    .ogm-header__brand .custom-logo { max-height: 36px !important; }
    .ogm-header__search-go { padding: 0 14px; font-size: .9rem; }
    .ogm-header__map-trigger { padding: 0 10px; }
}
.ogm-header { position: relative; }

/* ── Theme toggle button ──────────────────────────────────────────────── */
.ogm-theme-toggle {
    background: var(--ogm-bg);
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius);
    width: 32px; height: 32px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ogm-text);
}
.ogm-theme-toggle__light, .ogm-theme-toggle__dark { display: none; }
html[data-theme="light"] .ogm-theme-toggle__dark { display: inline; }
html[data-theme="dark"]  .ogm-theme-toggle__light { display: inline; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.ogm-btn {
    display: inline-block;
    padding: 8px 14px;
    border-radius: var(--ogm-radius);
    border: 1px solid transparent;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    font-size: .95rem;
    white-space: nowrap;
    line-height: 1.2;
}
.ogm-btn:hover { text-decoration: none; }
.ogm-btn--primary { background: var(--ogm-accent); color: #fff; }
.ogm-btn--primary:hover { background: var(--ogm-accent-hover); color: #fff; }
.ogm-btn--ghost { background: transparent; color: var(--ogm-text); border-color: var(--ogm-border); }

/* Section-themed buttons — used by the home hero CTAs and section pages. */
.ogm-btn--re  { background: var(--ogm-color-re-accent);  color: #fff; }
.ogm-btn--re:hover  { background: var(--ogm-color-re-accent);  color: #fff; filter: brightness(1.08); }
.ogm-btn--mkt { background: var(--ogm-color-mkt-accent); color: #fff; }
.ogm-btn--mkt:hover { background: var(--ogm-color-mkt-accent); color: #fff; filter: brightness(1.08); }
.ogm-btn--svc { background: var(--ogm-color-svc-accent); color: #fff; }
.ogm-btn--svc:hover { background: var(--ogm-color-svc-accent); color: #fff; filter: brightness(1.08); }
.ogm-btn--cls { background: var(--ogm-color-cls-accent); color: #fff; }
.ogm-btn--cls:hover { background: var(--ogm-color-cls-accent); color: #fff; filter: brightness(1.08); }
.ogm-btn--grp { background: var(--ogm-color-grp-accent); color: #fff; }
.ogm-btn--grp:hover { background: var(--ogm-color-grp-accent); color: #fff; filter: brightness(1.08); }
.ogm-btn--bkg { background: var(--ogm-color-bkg-accent); color: #fff; }
.ogm-btn--bkg:hover { background: var(--ogm-color-bkg-accent); color: #fff; filter: brightness(1.08); }
.ogm-btn--job { background: var(--ogm-color-job-accent); color: #fff; }
.ogm-btn--job:hover { background: var(--ogm-color-job-accent); color: #fff; filter: brightness(1.08); }
.ogm-btn--ghost:hover { background: var(--ogm-bg-soft); color: var(--ogm-text); }
.ogm-btn--danger { background: transparent; color: var(--ogm-danger); border-color: var(--ogm-danger); }
.ogm-btn--block { display: block; width: 100%; }

/* ── Forms ────────────────────────────────────────────────────────────── */
.ogm-field { margin-bottom: 14px; }
.ogm-field label { display: block; font-weight: 600; margin-bottom: 4px; font-size: .9rem; }
.ogm-field input[type=text], .ogm-field input[type=email], .ogm-field input[type=password], .ogm-field input[type=number], .ogm-field input[type=tel], .ogm-field input[type=search], .ogm-field textarea, .ogm-field select {
    width: 100%; padding: 9px 10px; font-size: 1rem;
    background: var(--ogm-bg); color: var(--ogm-text);
    border: 1px solid var(--ogm-border); border-radius: var(--ogm-radius);
}
.ogm-field textarea { min-height: 140px; resize: vertical; }
.ogm-field .help { color: var(--ogm-text-muted); font-size: .85rem; margin-top: 4px; }
.ogm-form-error { background: rgba(177,58,58,.12); color: var(--ogm-danger); padding: 8px 12px; border-radius: var(--ogm-radius); margin-bottom: 12px; }
.ogm-form-ok    { background: rgba(var(--ogm-accent-rgb),.12); color: var(--ogm-accent); padding: 8px 12px; border-radius: var(--ogm-radius); margin-bottom: 12px; }

/* ── Section heroes ───────────────────────────────────────────────────── */
.ogm-hero { padding: 36px 0 16px; }
.ogm-hero h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.ogm-hero p  { color: var(--ogm-text-muted); max-width: 60ch; }

/* ── Per-section color theming ──
   Each section page gets a body class (set in functions.php via
   body_class filter from ogm_section_color_slug()). The body class
   overrides --ogm-accent so EVERY downstream component that uses the
   accent (primary buttons, listing-card topline, badge, breadcrumbs,
   focus rings) automatically shifts to the section's color. The hero
   block also picks up a pale wash + accent border-bottom so you SEE
   which section you're in the moment the page loads.
   Default (no section): --ogm-accent stays brand-green. */
body.ogm-section--re  {
    --ogm-accent:        var(--ogm-color-re-accent);
    --ogm-accent-rgb:    var(--ogm-color-re-rgb);
    --ogm-accent-hover:  var(--ogm-color-re-accent);
    --ogm-section-soft:  var(--ogm-color-re-soft);
}
body.ogm-section--mkt {
    --ogm-accent:        var(--ogm-color-mkt-accent);
    --ogm-accent-rgb:    var(--ogm-color-mkt-rgb);
    --ogm-accent-hover:  var(--ogm-color-mkt-accent);
    --ogm-section-soft:  var(--ogm-color-mkt-soft);
}
body.ogm-section--svc {
    --ogm-accent:        var(--ogm-color-svc-accent);
    --ogm-accent-rgb:    var(--ogm-color-svc-rgb);
    --ogm-accent-hover:  var(--ogm-color-svc-accent);
    --ogm-section-soft:  var(--ogm-color-svc-soft);
}
body.ogm-section--cls {
    --ogm-accent:        var(--ogm-color-cls-accent);
    --ogm-accent-rgb:    var(--ogm-color-cls-rgb);
    --ogm-accent-hover:  var(--ogm-color-cls-accent);
    --ogm-section-soft:  var(--ogm-color-cls-soft);
}
body.ogm-section--grp {
    --ogm-accent:        var(--ogm-color-grp-accent);
    --ogm-accent-rgb:    var(--ogm-color-grp-rgb);
    --ogm-accent-hover:  var(--ogm-color-grp-accent);
    --ogm-section-soft:  var(--ogm-color-grp-soft);
}
body.ogm-section--bkg {
    --ogm-accent:        var(--ogm-color-bkg-accent);
    --ogm-accent-rgb:    var(--ogm-color-bkg-rgb);
    --ogm-accent-hover:  var(--ogm-color-bkg-accent);
    --ogm-section-soft:  var(--ogm-color-bkg-soft);
}
body.ogm-section--job {
    --ogm-accent:        var(--ogm-color-job-accent);
    --ogm-accent-rgb:    var(--ogm-color-job-rgb);
    --ogm-accent-hover:  var(--ogm-color-job-accent);
    --ogm-section-soft:  var(--ogm-color-job-soft);
}

/* Section-themed hero — pastel wash + accent border-bottom. Falls back to
   the regular bg-soft if no section is active. */
body[class*="ogm-section--"] .ogm-hero {
    background: var(--ogm-section-soft, var(--ogm-bg-soft));
    border-bottom: 3px solid var(--ogm-accent);
    padding-left: 20px; padding-right: 20px;
    border-radius: 0 0 var(--ogm-radius-lg) var(--ogm-radius-lg);
}
body[class*="ogm-section--"] .ogm-hero h1 {
    color: var(--ogm-text);
}

/* Brighten the buttons' hover ever so slightly using filter rather than a
   second variable — keeps the palette tight. */
body[class*="ogm-section--"] .ogm-btn--primary:hover { filter: brightness(1.06); }

/* ── Listings: grid + list view ───────────────────────────────────────── */
.ogm-toolbar {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    padding: 10px 0; border-bottom: 1px solid var(--ogm-border);
    margin-bottom: 16px;
}
.ogm-toolbar__spacer { flex: 1; }
.ogm-view-toggle button {
    background: var(--ogm-bg); border: 1px solid var(--ogm-border); padding: 6px 10px; cursor: pointer; color: var(--ogm-text);
}
.ogm-view-toggle button.is-active { background: var(--ogm-accent); color: #fff; border-color: var(--ogm-accent); }

.ogm-listings--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.ogm-listings--list { display: flex; flex-direction: column; gap: 12px; }
.ogm-listing-card {
    background: var(--ogm-bg-elev);
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius-lg);
    overflow: hidden;
    box-shadow: var(--ogm-shadow);
    transition: box-shadow .18s ease, border-color .18s ease;
    display: flex; flex-direction: column;
    height: 100%; /* fill the grid row so ad tiles + listing tiles align */
}
.ogm-listing-card:hover { box-shadow: var(--ogm-shadow-lg); border-color: var(--ogm-border-strong); }
/* In-feed ad-slot wrapper inside a listing grid — must stretch to full row height
   so the ad tile matches the listing-card heights around it (was visibly shorter). */
.ogm-ad-inline-tile { display: flex; height: 100%; }
.ogm-ad-inline-tile > .ogm-ad-slot { flex: 1; display: flex; height: 100%; width: 100%; }
.ogm-ad-inline-tile .ogm-ad-slot > a { flex: 1; display: flex; flex-direction: column; }
.ogm-listing-card__img {
    aspect-ratio: 4/3;
    background-color: var(--ogm-bg-soft);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    position: relative;
}
/* Heart "save" button — overlays the card image top-right. Toggles via [data-saved]. */
.ogm-listing-card__fav {
    position: absolute;
    top: 10px; right: 10px;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
    z-index: 2;
}
.ogm-listing-card__fav:hover { background: #fff; transform: scale(1.06); }
.ogm-listing-card__fav svg {
    width: 20px; height: 20px;
    fill: transparent;
    stroke: #4a4a4a;
    stroke-width: 2;
    transition: fill .12s ease, stroke .12s ease;
}
.ogm-listing-card__fav[data-saved="1"] svg { fill: #e0242b; stroke: #e0242b; }
.ogm-listing-card__fav[data-saved="1"] { background: #fff; }

.ogm-listing-card__badge {
    position: absolute;
    top: 10px; left: 10px;
    background: var(--ogm-accent);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 3px 8px;
    border-radius: 999px;
}
.ogm-listing-card__body { padding: 12px 14px; }
/* Top-line "price · acreage" (real estate) or "price" (services/classifieds).
   Bold, accent color, sits above the title. */
.ogm-listing-card__topline { font-weight: 800; color: var(--ogm-accent); font-size: 1.1rem; margin: 0 0 4px; line-height: 1.2; }
.ogm-listing-card__title { font-weight: 700; margin: 0 0 4px; color: var(--ogm-text); }
.ogm-listing-card__meta { font-size: .85rem; color: var(--ogm-text-muted); }
.ogm-listing-card__price { font-weight: 700; color: var(--ogm-accent); font-size: 1.1rem; margin-top: 6px; }
.ogm-listing-card--featured { outline: 2px solid var(--ogm-accent); }
.ogm-listing-card--highlight { box-shadow: 0 0 0 3px rgba(245, 197, 24, .35); }

/* ── Seller strip at the bottom of every listing card ───────────────── */
.ogm-listing-card__seller {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid var(--ogm-border);
    background: var(--ogm-bg-soft);
    margin-top: auto;
}
.ogm-listing-card__seller-link {
    display: flex; align-items: center; gap: 8px;
    flex: 1; min-width: 0;
    text-decoration: none; color: var(--ogm-text);
    font-size: .85rem;
}
.ogm-listing-card__seller-link:hover { text-decoration: none; color: var(--ogm-accent); }
.ogm-listing-card__seller-name {
    font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.ogm-listing-card__contact { flex: none; }
.ogm-listings--list .ogm-listing-card__seller { padding: 10px 14px; }
/* On the featured carousel / map sidebar where space is tight, hide the strip */
.ogm-featured__slide .ogm-listing-card__seller,
.ogm-map-overlay__list .ogm-listing-card__seller { display: none; }

/* ── Custom avatar (NOT Gravatar) ────────────────────────────────────── */
.ogm-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--ogm-bg-soft);
    color: #fff;
    font-weight: 700;
    overflow: hidden;
    flex: none;
    object-fit: cover;
    line-height: 1;
}
img.ogm-avatar { background: transparent; }

/* ── Public profile page ────────────────────────────────────────────── */
.ogm-profile { display: flex; flex-direction: column; gap: 20px; }
.ogm-profile__head {
    display: flex; align-items: center; gap: 20px;
    background: var(--ogm-bg-elev);
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius-lg);
    padding: 22px;
    box-shadow: var(--ogm-shadow);
}
.ogm-profile__avatar { width: 120px; height: 120px; font-size: 44px; }
.ogm-profile__head-info { flex: 1; min-width: 0; }
.ogm-profile__name { margin: 0 0 4px; font-size: 1.6rem; }
.ogm-profile__tagline { margin: 6px 0 8px; color: var(--ogm-text); font-size: 1rem; }
.ogm-profile__meta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: .9rem; }
/* Profile social stats — posts · followers · following.
   Followers + following are <a> anchors so they pick up the same hover
   affordance as the hovercard stat links. */
.ogm-profile__stats {
    display: flex; flex-wrap: wrap; gap: 18px;
    margin-top: 10px;
    font-size: .92rem;
    color: var(--ogm-text-muted);
}
.ogm-profile__stat { color: var(--ogm-text-muted); text-decoration: none; }
.ogm-profile__stat strong { color: var(--ogm-text); font-weight: 700; margin-right: 4px; }
a.ogm-profile__stat:hover, a.ogm-profile__stat:hover strong { color: var(--ogm-accent); text-decoration: none; }
.ogm-profile__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ogm-profile__link { color: var(--ogm-accent); text-decoration: none; }
.ogm-profile__link:hover { text-decoration: underline; }
@media (max-width: 600px) {
    .ogm-profile__head { flex-direction: column; text-align: center; gap: 14px; }
}

/* ── List vs Grid view: swap between two layouts inside each card ─────── */
.ogm-listing-card__grid { display: flex; flex-direction: column; flex: 1; }
.ogm-listing-row { display: none; }
.ogm-listings--list .ogm-listing-card__grid { display: none; }
.ogm-listings--list .ogm-listing-row { display: grid; }

/* ── eBay-style row (thumb left + structured body right) ──────────────── */
.ogm-listings--list .ogm-listing-card {
    border-radius: var(--ogm-radius);
    box-shadow: none;
    padding: 0;
    overflow: hidden;
}
.ogm-listing-row {
    grid-template-columns: 220px 1fr;
    align-items: stretch;
    width: 100%;
    min-height: 180px;
    background: var(--ogm-bg-elev);
    overflow: hidden;
    border-radius: var(--ogm-radius);
    border: 1px solid var(--ogm-border);
}
.ogm-listing-row__img {
    position: relative;
    display: block;
    width: 220px;
    min-height: 180px;
    height: auto;
    align-self: stretch;
    background-color: var(--ogm-bg-soft);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.ogm-listing-row__badge {
    position: absolute; top: 8px; left: 8px;
    background: var(--ogm-accent); color: #fff;
    font-size: .65rem; font-weight: 700; text-transform: uppercase;
    padding: 2px 8px; border-radius: 999px; letter-spacing: .04em;
}
.ogm-listing-row__fav {
    position: absolute; top: 8px; right: 8px;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,.92); border: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.ogm-listing-row__fav svg { width: 18px; height: 18px; fill: transparent; stroke: #4a4a4a; stroke-width: 2; }
.ogm-listing-row__fav[data-saved="1"] svg { fill: #e0242b; stroke: #e0242b; }

.ogm-listing-row__body {
    padding: 14px 18px 12px;
    display: flex; flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.ogm-listing-row__title {
    font-size: 1.05rem; font-weight: 700;
    color: var(--ogm-text); text-decoration: none;
    line-height: 1.3; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.ogm-listing-row__title:hover { color: var(--ogm-accent); }

.ogm-listing-row__specs {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: 6px 14px;
    font-size: .85rem; color: var(--ogm-text-muted);
}
.ogm-listing-row__specs li { display: inline-flex; align-items: center; gap: 4px; }
.ogm-listing-row__spec-ico { font-size: .9em; }
.ogm-listing-row__pill {
    background: var(--ogm-bg-soft);
    color: var(--ogm-text);
    padding: 2px 8px; border-radius: 999px;
    font-size: .75rem; font-weight: 600;
}
.ogm-listing-row__pill--sale { background: rgba(224,36,43,.12); color: #b1191f; }
.ogm-listing-row__pill--out  { background: rgba(140,140,140,.18); color: #555; }

.ogm-listing-row__price-row {
    display: flex; align-items: baseline; gap: 10px;
    margin-top: auto;
}
.ogm-listing-row__price { font-size: 1.6rem; font-weight: 800; color: var(--ogm-accent); line-height: 1; }
.ogm-listing-row__compare { font-size: 1rem; color: var(--ogm-text-muted); text-decoration: line-through; }

.ogm-listing-row__contact-bar {
    display: flex; align-items: center; gap: 10px;
    padding-top: 10px;
    margin-top: 8px;
    border-top: 1px solid var(--ogm-border);
}
.ogm-listing-row__seller {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--ogm-text); text-decoration: none;
    font-size: .85rem; font-weight: 600;
    flex: 1; min-width: 0;
}
.ogm-listing-row__seller > span {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.ogm-listing-row__seller:hover { color: var(--ogm-accent); }
.ogm-listing-row__share { flex: none; }
.ogm-listing-row__contact { flex: none; }

@media (max-width: 600px) {
    .ogm-listing-row { grid-template-columns: 1fr; }
    .ogm-listing-row__img { aspect-ratio: 16 / 9; }
}

/* ── Featured carousel (every section gets one at the top of browse) ──── */
.ogm-featured {
    position: relative;
    margin: 16px 0 28px;
    background: var(--ogm-bg-soft);
    border-radius: var(--ogm-radius-lg);
    padding: 18px;
}
.ogm-featured__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ogm-featured__title { font-weight: 700; }
.ogm-featured__nav { display: flex; gap: 6px; }
.ogm-featured__nav button { background: var(--ogm-bg); border: 1px solid var(--ogm-border); border-radius: 50%; width: 32px; height: 32px; cursor: pointer; color: var(--ogm-text); font-size: 1rem; }
.ogm-featured__viewport { overflow: hidden; }
.ogm-featured__track { display: flex; gap: 14px; transition: transform .4s ease; }
.ogm-featured__slide { flex: 0 0 calc(25% - 14px); min-width: 220px; }
@media (max-width: 900px) { .ogm-featured__slide { flex-basis: calc(50% - 14px); } }
@media (max-width: 600px) { .ogm-featured__slide { flex-basis: calc(100% - 0px); } }
.ogm-featured__dots { display: flex; gap: 6px; justify-content: center; margin-top: 12px; }
.ogm-featured__dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: var(--ogm-border-strong); cursor: pointer; }
.ogm-featured__dots button.is-active { background: var(--ogm-accent); }

/* ── Sidebar (filters) ────────────────────────────────────────────────── */
.ogm-layout--with-sidebar { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; }
.ogm-sidebar {
    background: var(--ogm-bg-elev);
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius-lg);
    padding: 16px;
    align-self: start;
    position: sticky; top: 80px;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
/* Mobile (single-column): drop the sticky pinning so the sidebar flows
   naturally above the listings. With sticky on, the sidebar would stay
   glued to the top of the viewport and the listings would scroll UNDER it,
   creating the overlap Eric reported on the classifieds page. */
@media (max-width: 900px) {
    .ogm-layout--with-sidebar { grid-template-columns: 1fr; }
    .ogm-sidebar { position: static; top: auto; }
}

/* ── Mobile collapse: long category list → native <select> dropdown.
   Each browse template (Marketplace / Classifieds / Services) renders BOTH
   a <ul> of links (.ogm-sidebar__cat-list) and a parallel <select>
   (.ogm-sidebar__cat-select). CSS picks the right one per viewport. */
.ogm-sidebar__cat-select { display: none; }
@media (max-width: 900px) {
    .ogm-sidebar__cat-heading,
    .ogm-sidebar__cat-list      { display: none; }
    .ogm-sidebar__cat-select {
        display: block;
        width: 100%;
        padding: 10px 12px;
        border: 1px solid var(--ogm-border);
        border-radius: var(--ogm-radius);
        background: var(--ogm-bg);
        color: var(--ogm-text);
        font: inherit;
        margin: 0 0 10px;
    }
}
.ogm-sidebar h3 { font-size: 1rem; margin-top: 16px; }
.ogm-sidebar h3:first-child { margin-top: 0; }

/* ── Map container ────────────────────────────────────────────────────── */
.ogm-map { width: 100%; height: 520px; border-radius: var(--ogm-radius-lg); border: 1px solid var(--ogm-border); margin-bottom: 16px; }
@media (max-width: 600px) { .ogm-map { height: 360px; } }

/* ── Dashboard ────────────────────────────────────────────────────────── */
.ogm-dashboard { display: grid; grid-template-columns: 240px 1fr; gap: 24px; }
.ogm-dashboard__tabs { display: flex; flex-direction: column; gap: 2px; background: var(--ogm-bg-elev); border: 1px solid var(--ogm-border); border-radius: var(--ogm-radius-lg); padding: 8px; }
.ogm-dashboard__tabs a { padding: 8px 12px; border-radius: var(--ogm-radius); color: var(--ogm-text); }
.ogm-dashboard__tabs a:hover { background: var(--ogm-bg-soft); text-decoration: none; }
.ogm-dashboard__tabs a.is-active { background: var(--ogm-accent); color: #fff; }
/* Non-clickable group separator labels (Selling / Buying / Account). */
.ogm-dashboard__tabs-group-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ogm-text-muted);
    padding: 14px 12px 4px;
    border-top: 1px solid var(--ogm-border);
    margin-top: 4px;
}
.ogm-dashboard__tabs-group-label:first-child {
    border-top: 0;
    margin-top: 0;
    padding-top: 4px;
}
.ogm-dashboard__panel { background: var(--ogm-bg-elev); border: 1px solid var(--ogm-border); border-radius: var(--ogm-radius-lg); padding: 20px; }

/* Mobile-only dropdown that replaces the vertical tab nav. Same href targets. */
.ogm-dashboard__tabs-select { display: none; }
@media (max-width: 800px) {
    .ogm-dashboard { grid-template-columns: 1fr; }
    .ogm-dashboard__tabs       { display: none; }
    .ogm-dashboard__tabs-select {
        display: block;
        width: 100%;
        padding: 12px 14px;
        border: 1px solid var(--ogm-border);
        border-radius: var(--ogm-radius-lg);
        background: var(--ogm-bg-elev);
        color: var(--ogm-text);
        font: inherit;
        font-weight: 600;
        margin-bottom: 16px;
    }
}

/* ── Footer ───────────────────────────────────────────────────────────── */
.ogm-footer { background: var(--ogm-bg-elev); border-top: 1px solid var(--ogm-border); padding: 40px 16px 28px; margin-top: 64px; }
.ogm-footer__inner { max-width: var(--ogm-maxw); margin: 0 auto; display: grid; grid-template-columns: 1.4fr repeat(5, 1fr); gap: 28px; }
.ogm-footer__col h4,
.ogm-footer__widget-title { margin-top: 0; margin-bottom: 10px; font-size: .9rem; font-weight: 700; }
.ogm-footer__col h4 a,
.ogm-footer__widget-title a { color: var(--ogm-text); text-decoration: none; }
.ogm-footer__col ul,
.ogm-footer__widget ul { list-style: none; padding: 0; margin: 0; line-height: 2; font-size: .88rem; }
.ogm-footer__widget { margin-bottom: 14px; }
.ogm-footer__widget:last-child { margin-bottom: 0; }

/* ── Sales pages (real-estate / services / marketplace subscribe & become-vendor) ── */
.ogm-sales { max-width: 980px; margin: 0 auto; padding: 8px 0 32px; display: flex; flex-direction: column; gap: 36px; }
.ogm-sales__hero {
    text-align: center;
    padding: 36px 12px 8px;
    background: linear-gradient(135deg, rgba(var(--ogm-accent-rgb),.06), rgba(var(--ogm-accent-rgb),.02));
    border-radius: var(--ogm-radius-lg);
}
.ogm-sales__hero--compact { padding: 20px 12px 8px; }
.ogm-sales__h1 {
    font-size: 2.2rem;
    line-height: 1.15;
    margin: 0 auto 14px;
    max-width: 760px;
    letter-spacing: -.5px;
}
.ogm-sales__lede {
    font-size: 1.05rem;
    line-height: 1.55;
    max-width: 720px;
    margin: 0 auto 22px;
    color: var(--ogm-text);
}
.ogm-sales__cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.ogm-btn--lg { padding: 12px 22px; font-size: 1rem; font-weight: 700; }
@media (max-width: 640px) { .ogm-sales__h1 { font-size: 1.6rem; } .ogm-sales__lede { font-size: .95rem; } }

.ogm-sales__section { padding: 0 4px; }
.ogm-sales__section h2 {
    font-size: 1.5rem;
    margin: 0 0 18px;
    text-align: center;
}

/* Two-card "who is this for / why" split */
.ogm-sales__split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}
.ogm-sales__card {
    background: var(--ogm-bg-elev);
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius-lg);
    padding: 22px;
    box-shadow: var(--ogm-shadow);
}
.ogm-sales__card h3 { margin: 0 0 8px; font-size: 1.1rem; }
.ogm-sales__card p { margin: 0 0 8px; line-height: 1.5; }
.ogm-sales__icon { font-size: 1.8rem; margin-bottom: 6px; }

/* Pricing card */
.ogm-sales__pricecard {
    background: var(--ogm-bg-elev);
    border: 2px solid var(--ogm-accent);
    border-radius: var(--ogm-radius-lg);
    padding: 28px 26px;
    box-shadow: var(--ogm-shadow-lg);
    max-width: 640px;
    margin: 0 auto;
}
.ogm-sales__price { text-align: center; margin-bottom: 18px; }
.ogm-sales__price-num {
    font-size: 3rem;
    font-weight: 800;
    color: var(--ogm-accent);
    letter-spacing: -1px;
}
.ogm-sales__price-unit { display: block; font-size: .95rem; color: var(--ogm-text-muted); margin-top: 2px; }
.ogm-sales__features { list-style: none; padding: 0; margin: 0; }
.ogm-sales__features li {
    padding: 8px 0 8px 28px;
    position: relative;
    line-height: 1.45;
    border-bottom: 1px solid var(--ogm-border);
}
.ogm-sales__features li::before {
    content: '✓';
    position: absolute;
    left: 0; top: 8px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--ogm-accent);
    color: #fff;
    font-size: .8rem;
    text-align: center;
    line-height: 20px;
    font-weight: 700;
}
.ogm-sales__features li:last-child { border-bottom: 0; }

/* Multi-tier (Services Starter / Pro) */
.ogm-sales__tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 18px;
}
.ogm-sales__tier {
    background: var(--ogm-bg-elev);
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius-lg);
    padding: 26px 22px;
    box-shadow: var(--ogm-shadow);
    position: relative;
    display: flex;
    flex-direction: column;
}
.ogm-sales__tier--featured {
    border: 2px solid var(--ogm-accent);
    box-shadow: var(--ogm-shadow-lg);
    transform: translateY(-2px);
}
.ogm-sales__tier-badge {
    position: absolute;
    top: -12px; left: 50%;
    transform: translateX(-50%);
    background: var(--ogm-accent);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 4px 12px;
    border-radius: 999px;
}
.ogm-sales__tier-name { margin: 0 0 4px; font-size: 1.2rem; }
.ogm-sales__tier-price { margin: 0 0 6px; line-height: 1; }
.ogm-sales__tier-price .ogm-sales__price-num { font-size: 2.2rem; }
.ogm-sales__tier-fit { color: var(--ogm-text-muted); font-size: .9rem; margin: 4px 0 14px; }
.ogm-sales__tier .ogm-btn { margin-top: auto; }

/* Comparison table */
.ogm-sales__compare {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
    max-width: 880px;
    background: var(--ogm-bg-elev);
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius-lg);
    overflow: hidden;
}
.ogm-sales__compare th,
.ogm-sales__compare td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--ogm-border);
    font-size: .92rem;
}
.ogm-sales__compare thead th {
    background: var(--ogm-bg-soft);
    font-weight: 700;
    font-size: .88rem;
}
.ogm-sales__compare tbody tr:last-child td { border-bottom: 0; }
.ogm-sales__compare td:first-child { color: var(--ogm-text-muted); font-weight: 500; }
@media (max-width: 600px) {
    .ogm-sales__compare th, .ogm-sales__compare td { padding: 8px 10px; font-size: .82rem; }
}

/* How-it-works steps */
.ogm-sales__steps {
    counter-reset: step;
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ogm-sales__steps li {
    counter-increment: step;
    background: var(--ogm-bg-elev);
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius);
    padding: 14px 18px 14px 56px;
    position: relative;
    line-height: 1.45;
}
.ogm-sales__steps li::before {
    content: counter(step);
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--ogm-accent);
    color: #fff;
    font-weight: 700;
    text-align: center;
    line-height: 30px;
}

/* FAQ */
.ogm-sales__faq {
    background: var(--ogm-bg-elev);
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius);
    padding: 12px 16px;
    margin-bottom: 10px;
}
.ogm-sales__faq[open] { background: var(--ogm-bg-soft); }
.ogm-sales__faq summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    padding-right: 24px;
    position: relative;
}
.ogm-sales__faq summary::-webkit-details-marker { display: none; }
.ogm-sales__faq summary::after {
    content: '+';
    position: absolute;
    right: 0; top: -1px;
    font-size: 1.3rem;
    color: var(--ogm-accent);
    transition: transform .2s ease;
}
.ogm-sales__faq[open] summary::after { content: '−'; }
.ogm-sales__faq p { margin: 10px 0 0; line-height: 1.5; color: var(--ogm-text); }

/* Notices */
.ogm-sales__notice { padding: 12px 16px; border-radius: var(--ogm-radius); margin: 18px 0; }
.ogm-sales__notice--ok  { background: rgba(var(--ogm-accent-rgb),.12); border-left: 4px solid var(--ogm-accent); }
.ogm-sales__notice--err { background: rgba(200,40,40,.10); border-left: 4px solid #c82828; }

.ogm-sales__small { font-size: .78rem; line-height: 1.4; }
.ogm-sales__checkout { max-width: 520px; margin: 18px auto 0; }

/* ── Subscribe pages (clean, restrained) ─────────────────────────────── */
.ogm-sub {
    max-width: 640px;
    margin: 0 auto;
    padding: 16px 20px 48px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.ogm-sub__back { font-size: .9rem; display: inline-block; }
.ogm-sub__head { text-align: center; padding: 8px 0 4px; }
.ogm-sub__head h1 { font-size: 2rem; margin: 0 0 10px; letter-spacing: -.4px; line-height: 1.15; }
.ogm-sub__lede { font-size: 1.05rem; color: var(--ogm-text); margin: 0 0 6px; line-height: 1.45; }
.ogm-sub__audience { font-size: .9rem; color: var(--ogm-text-muted); margin: 0; }

.ogm-sub__card {
    background: var(--ogm-bg-elev);
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius-lg);
    padding: 28px;
    box-shadow: var(--ogm-shadow);
}
.ogm-sub__price { text-align: center; margin-bottom: 18px; line-height: 1; }
.ogm-sub__price-num { font-size: 2.6rem; font-weight: 800; color: var(--ogm-text); letter-spacing: -1px; }
.ogm-sub__price-unit { display: inline-block; margin-left: 4px; font-size: 1rem; color: var(--ogm-text-muted); }
.ogm-sub__features {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
}
.ogm-sub__features li {
    padding: 9px 0 9px 24px;
    position: relative;
    line-height: 1.45;
    font-size: .95rem;
    border-bottom: 1px solid var(--ogm-border);
}
.ogm-sub__features li:last-child { border-bottom: 0; }
.ogm-sub__features li::before {
    content: '';
    position: absolute;
    left: 0; top: 14px;
    width: 14px; height: 8px;
    border-left: 2px solid var(--ogm-accent);
    border-bottom: 2px solid var(--ogm-accent);
    transform: rotate(-45deg);
}

.ogm-sub__form { display: flex; flex-direction: column; gap: 12px; }
.ogm-sub__label { font-size: .85rem; font-weight: 600; color: var(--ogm-text-muted); }
.ogm-sub__card-input {
    padding: 14px;
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius);
    background: #fff;
}
.ogm-sub__fineprint { font-size: .78rem; color: var(--ogm-text-muted); line-height: 1.45; margin: 6px 0 0; }
.ogm-sub__notice { padding: 12px 14px; border-radius: var(--ogm-radius); margin-bottom: 14px; font-size: .92rem; }
.ogm-sub__notice--ok  { background: rgba(var(--ogm-accent-rgb),.10); border-left: 3px solid var(--ogm-accent); }
.ogm-sub__notice--err { background: rgba(200,40,40,.08); border-left: 3px solid #c82828; }
.ogm-sub__btnrow { display: flex; gap: 10px; flex-wrap: wrap; }
.ogm-sub__btnrow .ogm-btn { flex: 1; min-width: 180px; }

/* Tier cards (services) */
.ogm-sub__tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}
.ogm-sub__tier {
    background: var(--ogm-bg-elev);
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius-lg);
    padding: 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: var(--ogm-shadow);
}
.ogm-sub__tier--featured { border: 2px solid var(--ogm-accent); box-shadow: var(--ogm-shadow-lg); }
.ogm-sub__tier-badge {
    position: absolute;
    top: -10px; left: 50%;
    transform: translateX(-50%);
    background: var(--ogm-accent);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 4px 12px;
    border-radius: 999px;
}
.ogm-sub__tier-name { margin: 0 0 4px; font-size: 1.15rem; }
.ogm-sub__tier .ogm-sub__price { text-align: left; margin: 4px 0 8px; }
.ogm-sub__tier .ogm-sub__price-num { font-size: 1.8rem; }
.ogm-sub__tier-fit { color: var(--ogm-text-muted); font-size: .88rem; margin: 0 0 14px; }
.ogm-sub__tier .ogm-btn { margin-top: auto; }

/* FAQ */
.ogm-sub__faq {
    background: var(--ogm-bg-elev);
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius);
    padding: 12px 16px;
}
.ogm-sub__faq[open] { background: var(--ogm-bg-soft); }
.ogm-sub__faq summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    padding-right: 24px;
    position: relative;
    font-size: .95rem;
}
.ogm-sub__faq summary::-webkit-details-marker { display: none; }
.ogm-sub__faq summary::after {
    content: '+';
    position: absolute;
    right: 0; top: -1px;
    font-size: 1.25rem;
    color: var(--ogm-accent);
}
.ogm-sub__faq[open] summary::after { content: '−'; }
.ogm-sub__faq p { margin: 10px 0 0; line-height: 1.5; color: var(--ogm-text); font-size: .92rem; }

@media (max-width: 640px) {
    .ogm-sub__head h1 { font-size: 1.5rem; }
    .ogm-sub__card { padding: 22px; }
    .ogm-sub__price-num { font-size: 2.2rem; }
}

/* ── Gear dropdown (logged-in user menu) ─────────────────────────────── */
.ogm-nav-dd--gear > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 4px;
    border: 1px solid var(--ogm-border);
    border-radius: 999px;
    background: var(--ogm-bg);
}
.ogm-nav-dd--gear > summary:hover { background: var(--ogm-bg-soft); }
.ogm-gear__avatar { width: 32px; height: 32px; font-size: 14px; }
.ogm-gear__chev { color: var(--ogm-text-muted); font-size: .8rem; }
.ogm-nav-dd__pop--right { right: 0; left: auto; min-width: 240px; }
.ogm-gear__header {
    padding: 10px 12px 12px;
    border-bottom: 1px solid var(--ogm-border);
    margin-bottom: 4px;
    display: flex;
    flex-direction: column;
}
.ogm-gear__sep { border: 0; border-top: 1px solid var(--ogm-border); margin: 4px 0; }
.ogm-gear__theme {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 9px 12px;
    color: var(--ogm-text);
    font: inherit;
    font-size: .92rem;
    text-align: left;
    border-radius: var(--ogm-radius);
}
.ogm-gear__theme:hover { background: var(--ogm-bg-soft); color: var(--ogm-accent); }

/* ── USA Map modal ───────────────────────────────────────────────────── */
.ogm-map-modal[hidden] { display: none; }
.ogm-map-modal {
    position: fixed;
    inset: 0;
    /* Must beat Leaflet listing maps that may be rendered behind it (max
       pane z-index 700 + control z-index ~1000). Previously 300, which
       caused the underlying RE listings map to bleed through the modal. */
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.ogm-map-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(2px);
}
.ogm-map-modal__panel {
    position: relative;
    background: var(--ogm-bg-elev);
    border-radius: var(--ogm-radius-lg);
    box-shadow: var(--ogm-shadow-lg);
    width: 100%;
    max-width: 1100px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.ogm-map-modal__header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--ogm-border);
}
.ogm-map-modal__title { margin: 0; font-size: 1.4rem; }
.ogm-map-modal__sub { margin: 4px 0 0; color: var(--ogm-text-muted); font-size: .9rem; }
.ogm-map-modal__close {
    margin-left: auto;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--ogm-border);
    background: transparent;
    color: var(--ogm-text);
    cursor: pointer;
    font-size: 1.1rem;
    flex: none;
}
.ogm-map-modal__close:hover { background: var(--ogm-bg-soft); color: var(--ogm-accent); }
.ogm-map-modal__body {
    padding: 14px 22px 18px;
    display: flex;
    min-height: 0;
    flex: 1;
    overflow: hidden;
}
.ogm-map-modal__footer {
    padding: 12px 22px;
    border-top: 1px solid var(--ogm-border);
    font-size: .85rem;
}

/* Leaflet map container */
.ogm-usmap-leaflet {
    width: 100%;
    height: 100%;
    min-height: 460px;
    background: var(--ogm-bg-soft);
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius);
    cursor: pointer;
}
.ogm-usmap-leaflet .leaflet-container { background: transparent; cursor: pointer; }
/* Leaflet's default tooltip — restyle to match the rest of the site */
.leaflet-tooltip.ogm-usmap-leaflet__tip {
    background: rgba(20,28,22,.92);
    border: 0;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    box-shadow: var(--ogm-shadow);
    font-size: .85rem;
    line-height: 1.3;
    white-space: nowrap;
}
.leaflet-tooltip.ogm-usmap-leaflet__tip::before { display: none; }

@media (max-width: 600px) {
    /* Edge-to-edge horizontally with a 3px breathing strip on each side.
       Vertical height is content-driven — modal is NOT 100vh on phone. */
    .ogm-map-modal { padding: 8px 3px; align-items: flex-start; }
    .ogm-map-modal__panel { width: calc(100vw - 6px); max-width: calc(100vw - 6px); max-height: 92vh; }
    .ogm-map-modal__header { padding: 12px 14px 8px; }
    .ogm-map-modal__title { font-size: 1.05rem; }
    .ogm-map-modal__sub { font-size: .82rem; }
    .ogm-map-modal__body { padding: 4px 4px 6px; }
    /* Tall but not insane — the map fills horizontally and the GeoJSON layer
       resizes proportionally because the Leaflet container is square-ish. */
    .ogm-usmap-leaflet { height: min(72vh, 600px); min-height: 320px; }
}

/* ── Auth modal (sitewide signup/signin) ─────────────────────────────── */
.ogm-auth-modal[hidden] { display: none; }
.ogm-auth-modal {
    position: fixed; inset: 0; z-index: 400;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.ogm-auth-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(2px);
}
.ogm-auth-modal__panel {
    position: relative;
    background: var(--ogm-bg-elev);
    border-radius: var(--ogm-radius-lg);
    box-shadow: var(--ogm-shadow-lg);
    width: 100%; max-width: 440px;
    max-height: 92vh;
    overflow-y: auto;
    padding: 28px 26px 22px;
}
.ogm-auth-modal__close {
    position: absolute; top: 14px; right: 14px;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid var(--ogm-border);
    background: transparent;
    color: var(--ogm-text);
    cursor: pointer; font-size: 1rem;
}
.ogm-auth-modal__close:hover { background: var(--ogm-bg-soft); color: var(--ogm-accent); }
.ogm-auth-modal__tabs {
    display: flex; gap: 4px;
    margin: 0 0 14px;
    background: var(--ogm-bg-soft);
    padding: 4px;
    border-radius: var(--ogm-radius);
}
.ogm-auth-modal__tab {
    flex: 1;
    border: 0; background: transparent; cursor: pointer;
    padding: 9px 12px; border-radius: calc(var(--ogm-radius) - 2px);
    font-weight: 600; font-size: .92rem; color: var(--ogm-text-muted);
    transition: background .15s, color .15s;
}
.ogm-auth-modal__tab.is-active { background: var(--ogm-bg-elev); color: var(--ogm-text); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.ogm-auth-modal__lede {
    margin: 0 0 16px; color: var(--ogm-text-muted); font-size: .92rem;
}
.ogm-auth-modal__social { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.ogm-auth-modal__oauth {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: var(--ogm-bg-elev);
    border: 1px solid var(--ogm-border);
    border-radius: 999px;
    cursor: pointer; font-weight: 600; font-size: .92rem;
    color: var(--ogm-text);
    transition: background .15s, border-color .15s;
}
.ogm-auth-modal__oauth:hover:not([disabled]) { background: var(--ogm-bg-soft); border-color: var(--ogm-text-muted); }
.ogm-auth-modal__oauth[disabled] { opacity: .55; cursor: not-allowed; }
.ogm-auth-modal__oauth-icon {
    flex: none;
    width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ogm-bg-soft); font-weight: 700; font-size: .95rem;
}
.ogm-auth-modal__oauth[data-oauth="google"]   .ogm-auth-modal__oauth-icon { background: #fff; color: #4285f4; border: 1px solid #e0e0e0; }
.ogm-auth-modal__oauth[data-oauth="facebook"] .ogm-auth-modal__oauth-icon { background: #1877f2; color: #fff; }
.ogm-auth-modal__oauth[data-oauth="apple"]    .ogm-auth-modal__oauth-icon { background: #000; color: #fff; }
.ogm-auth-modal__oauth > span:nth-child(2) { flex: 1; text-align: left; }
.ogm-auth-modal__soon {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    padding: 2px 7px; border-radius: 999px;
    background: var(--ogm-bg-soft); color: var(--ogm-text-muted);
    border: 1px solid var(--ogm-border);
}
.ogm-auth-modal__or {
    position: relative; text-align: center;
    margin: 8px 0 14px;
}
.ogm-auth-modal__or::before {
    content: ''; position: absolute; left: 0; right: 0; top: 50%;
    height: 1px; background: var(--ogm-border);
}
.ogm-auth-modal__or span {
    position: relative; padding: 0 10px;
    background: var(--ogm-bg-elev); color: var(--ogm-text-muted);
    font-size: .85rem; text-transform: uppercase; letter-spacing: .04em;
}
.ogm-auth-modal__form .ogm-field { margin-bottom: 12px; }
.ogm-auth-modal__form .ogm-field label {
    display: block; font-size: .85rem; font-weight: 600; margin-bottom: 4px; color: var(--ogm-text);
}
.ogm-auth-modal__form .ogm-field input {
    width: 100%; padding: 10px 12px;
    border: 1px solid var(--ogm-border); border-radius: var(--ogm-radius);
    background: var(--ogm-bg); color: var(--ogm-text); font-size: .95rem;
}
.ogm-auth-modal__form .ogm-field input:focus { outline: 2px solid var(--ogm-accent); outline-offset: -1px; border-color: var(--ogm-accent); }
.ogm-auth-modal__form .ogm-field__error { color: #c82828; font-size: .85rem; margin: 4px 0 8px; }
.ogm-auth-modal__fineprint { font-size: .78rem; margin: 10px 0 0; text-align: center; }
@media (max-width: 480px) {
    .ogm-auth-modal { padding: 0; align-items: flex-end; }
    .ogm-auth-modal__panel { max-width: 100vw; border-radius: var(--ogm-radius-lg) var(--ogm-radius-lg) 0 0; max-height: 90vh; }
}

.ogm-footer__col a { color: var(--ogm-text-muted); text-decoration: none; }
.ogm-footer__col a:hover { color: var(--ogm-accent); text-decoration: underline; }
.ogm-footer__col--brand { max-width: 320px; }
.ogm-footer__col--brand h4 { font-size: 1.05rem; }
.ogm-footer__col--brand p { margin: 4px 0 12px; font-size: .9rem; }
.ogm-footer__copy { max-width: var(--ogm-maxw); margin: 28px auto 0; padding-top: 20px; border-top: 1px solid var(--ogm-border); color: var(--ogm-text-muted); font-size: .82rem; }

@media (max-width: 1024px) {
    .ogm-footer__inner { grid-template-columns: repeat(3, 1fr); }
    .ogm-footer__col--brand { grid-column: 1 / -1; max-width: 100%; }
}
@media (max-width: 600px) {
    .ogm-footer__inner { grid-template-columns: repeat(2, 1fr); gap: 22px; }
    .ogm-footer__col--brand { grid-column: 1 / -1; }
}

/* ── Pills / chips / badges ──────────────────────────────────────────── */
.ogm-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.ogm-pill--accent { background: var(--ogm-accent); color: #fff; }
.ogm-pill--muted  { background: var(--ogm-bg-soft); color: var(--ogm-text-muted); }

/* ── Upload progress overlay (used by any multipart form with files) ── */
.ogm-upload-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(20, 18, 16, .55);
    display: flex; align-items: center; justify-content: center;
}
.ogm-upload-overlay__card {
    background: var(--ogm-bg-elev);
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius-lg);
    padding: 28px 36px;
    box-shadow: var(--ogm-shadow-lg);
    min-width: 320px;
    text-align: center;
}
.ogm-upload-overlay__spinner {
    width: 36px; height: 36px;
    border: 3px solid var(--ogm-border);
    border-top-color: var(--ogm-accent);
    border-radius: 50%;
    margin: 0 auto 12px;
    animation: ogmSpin 0.8s linear infinite;
}
@keyframes ogmSpin { to { transform: rotate(360deg); } }
.ogm-upload-overlay__label {
    font-size: .95rem;
    color: var(--ogm-text);
    margin-bottom: 12px;
}
.ogm-upload-overlay__bar {
    width: 100%; height: 8px;
    background: var(--ogm-bg-soft);
    border-radius: 999px; overflow: hidden;
    margin-bottom: 8px;
}
.ogm-upload-overlay__bar-fill {
    height: 100%; width: 0%;
    background: var(--ogm-accent);
    transition: width .2s ease;
}
.ogm-upload-overlay__pct {
    font-size: .8rem;
    color: var(--ogm-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ── Form error banner (auth + forms) ────────────────────────────────── */
.ogm-form-error {
    background: rgba(200,40,40,.10);
    border-left: 4px solid #c82828;
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 14px;
    color: var(--ogm-text);
}

/* ── Boost modal (paid upgrade Stripe Elements modal) ────────────────── */
.ogm-boost-modal {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.ogm-boost-modal[hidden] { display: none; }
.ogm-boost-modal__inner {
    background: var(--ogm-bg-elev);
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius-lg);
    padding: 24px;
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
    position: relative;
    box-shadow: var(--ogm-shadow-lg);
}
.ogm-boost-modal__close {
    position: absolute; top: 12px; right: 14px;
    background: transparent; border: 0; cursor: pointer;
    font-size: 1.8rem; color: var(--ogm-text-muted); line-height: 1;
}
.ogm-boost-modal .ogm-chip { user-select: none; }
.ogm-boost-modal .ogm-chip input { margin-right: 4px; }

/* When .ogm-boost-modal is opened as a panel (not a modal), no overlay needed. */
.ogm-dashboard__panel .ogm-boost-modal {
    position: static; background: transparent; padding: 0;
}
.ogm-dashboard__panel .ogm-boost-modal__inner {
    max-width: 560px; box-shadow: none; padding: 0;
}
.ogm-dashboard__panel .ogm-boost-modal__close { display: none; }

/* ── Listing gallery + lightbox ──────────────────────────────────────── */
.ogm-gallery { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.ogm-gallery__hero {
    position: relative;
    aspect-ratio: 16/9;
    background: var(--ogm-bg-soft) center/cover no-repeat;
    border-radius: var(--ogm-radius-lg);
    cursor: zoom-in;
    outline: none;
}
.ogm-gallery__hero:focus-visible { box-shadow: 0 0 0 3px var(--ogm-accent); }
.ogm-gallery__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(0,0,0,.45); color: #fff; border: 0;
    font-size: 1.6rem; cursor: pointer; line-height: 1;
}
.ogm-gallery__nav--prev { left: 12px; }
.ogm-gallery__nav--next { right: 12px; }
.ogm-gallery__nav:hover { background: rgba(0,0,0,.7); }
.ogm-gallery__count {
    position: absolute; bottom: 12px; right: 12px;
    background: rgba(0,0,0,.6); color: #fff;
    padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600;
}
.ogm-gallery__thumbs {
    display: grid; grid-auto-flow: column; grid-auto-columns: 88px;
    gap: 6px; overflow-x: auto; padding-bottom: 4px;
}
.ogm-gallery__thumb {
    aspect-ratio: 4/3; border: 2px solid transparent; border-radius: var(--ogm-radius);
    background: var(--ogm-bg-soft) center/cover no-repeat; cursor: pointer; padding: 0;
}
.ogm-gallery__thumb.is-active { border-color: var(--ogm-accent); }

.ogm-lightbox {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,.92);
    display: flex; align-items: center; justify-content: center;
}
.ogm-lightbox__img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 4px; }
.ogm-lightbox__close {
    position: absolute; top: 16px; right: 20px;
    background: transparent; border: 0; color: #fff; font-size: 2.4rem; cursor: pointer;
}
.ogm-lightbox__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,.12); color: #fff; border: 0;
    width: 48px; height: 48px; border-radius: 50%; font-size: 2rem; cursor: pointer; line-height: 1;
}
.ogm-lightbox__nav--prev { left: 24px; }
.ogm-lightbox__nav--next { right: 24px; }
.ogm-lightbox__nav:hover { background: rgba(255,255,255,.25); }
.ogm-lightbox__counter {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    color: #fff; font-size: .9rem; opacity: .8;
}

/* Slim hero variant (when topbar is the control surface) */
.ogm-hero--slim { padding: 14px 0 18px; margin-bottom: 0; background: transparent; border: 0; }
.ogm-hero--slim h1 { font-size: 1.5rem; }

/* ── Full-width break-out wrapper (for RE state browse) ──────────────── */
.ogm-re-fullwidth {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    right: 50%;
    padding: 0 50px;
    box-sizing: border-box;
}
@media (max-width: 900px) {
    .ogm-re-fullwidth { padding: 0 12px; }
}

/* ── State picker modal (US tilegrid + searchable list) ──────────────── */
.ogm-state-modal {
    position: fixed; inset: 0; z-index: 9500;
    background: rgba(0,0,0,.5);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.ogm-state-modal[hidden] { display: none; }
.ogm-state-modal__inner {
    background: var(--ogm-bg-elev);
    border-radius: var(--ogm-radius-lg);
    width: 100%; max-width: 980px; max-height: 90vh;
    overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: var(--ogm-shadow-lg);
}
.ogm-state-modal__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--ogm-border);
}
.ogm-state-modal__close {
    background: transparent; border: 0;
    font-size: 1.8rem; line-height: 1; color: var(--ogm-text-muted);
    cursor: pointer; padding: 4px 10px;
}
.ogm-state-modal__close:hover { color: var(--ogm-text); }
.ogm-state-modal__body {
    flex: 1; min-height: 0;
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 0;
}
@media (max-width: 760px) {
    .ogm-state-modal__body { grid-template-columns: 1fr; grid-template-rows: auto auto; }
}
.ogm-state-modal__map {
    padding: 20px;
    overflow: auto;
}
.ogm-state-modal__list {
    border-left: 1px solid var(--ogm-border);
    display: flex; flex-direction: column;
    min-height: 0;
}
@media (max-width: 760px) {
    .ogm-state-modal__list { border-left: 0; border-top: 1px solid var(--ogm-border); max-height: 40vh; }
}
.ogm-state-modal__search { padding: 12px 14px; border-bottom: 1px solid var(--ogm-border); }
.ogm-state-modal__search input {
    width: 100%; padding: 8px 12px;
    border: 1px solid var(--ogm-border); border-radius: var(--ogm-radius);
    background: var(--ogm-bg); color: var(--ogm-text); font: inherit; font-size: .9rem;
}
.ogm-state-modal__items { list-style: none; padding: 6px; margin: 0; overflow-y: auto; flex: 1; }
.ogm-state-modal__items li[hidden] { display: none; }
.ogm-state-modal__items a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px; border-radius: var(--ogm-radius);
    color: var(--ogm-text); font-size: .9rem;
}
.ogm-state-modal__items a:hover { background: var(--ogm-bg-soft); text-decoration: none; color: var(--ogm-accent); }
.ogm-state-modal__count {
    font-size: .75rem; color: var(--ogm-text-muted);
    background: var(--ogm-bg-soft); padding: 2px 8px; border-radius: 999px;
}

/* US-shaped tilegrid of states */
.ogm-state-grid-map {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(8, 1fr);
    gap: 4px;
    aspect-ratio: 16/9;
    max-width: 100%;
}
.ogm-state-grid-map__tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--ogm-bg-soft);
    border: 1px solid var(--ogm-border);
    border-radius: 6px;
    color: var(--ogm-text-muted);
    font-weight: 700;
    font-size: .75rem;
    text-decoration: none;
    transition: background .12s ease, color .12s ease, border-color .12s ease, transform .08s ease;
    min-height: 36px;
}
.ogm-state-grid-map__tile:hover {
    background: var(--ogm-accent);
    border-color: var(--ogm-accent);
    color: #fff;
    transform: translateY(-1px);
    text-decoration: none;
}
.ogm-state-grid-map__tile.has-count {
    background: rgba(var(--ogm-accent-rgb),.08);
    border-color: rgba(var(--ogm-accent-rgb),.35);
    color: var(--ogm-text);
}
html[data-theme='dark'] .ogm-state-grid-map__tile.has-count {
    background: rgba(94,214,106,.10);
    border-color: rgba(94,214,106,.35);
}
.ogm-state-grid-map__abbr { letter-spacing: .04em; }
.ogm-state-grid-map__count { font-size: .65rem; font-weight: 600; margin-top: 2px; opacity: .9; }

/* ── RE landing — compact hero (LandWatch-style) ─────────────────────── */
.ogm-re-landing-hero {
    background: var(--ogm-bg-elev);
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius-lg);
    padding: 20px;
    margin-bottom: 18px;
}
.ogm-re-landing-hero__search { display: flex; gap: 8px; max-width: 720px; margin: 0 auto; }
.ogm-re-landing-hero__search input[type="search"] {
    flex: 1; padding: 12px 16px;
    border: 1px solid var(--ogm-border); border-radius: var(--ogm-radius);
    background: var(--ogm-bg); color: var(--ogm-text); font: inherit; font-size: 1rem;
}
.ogm-re-landing-hero__row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 12px; max-width: 720px; margin-left: auto; margin-right: auto;
    flex-wrap: wrap;
}
.ogm-state-dd { position: relative; }
.ogm-state-dd > summary {
    list-style: none; cursor: pointer; font-weight: 600; padding: 6px 10px;
    border: 1px solid var(--ogm-border); border-radius: var(--ogm-radius);
    background: var(--ogm-bg); color: var(--ogm-text);
}
.ogm-state-dd > summary::-webkit-details-marker { display: none; }
.ogm-state-dd__pop {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 50;
    min-width: 240px; max-height: 320px; overflow: auto;
    background: var(--ogm-bg-elev); border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius); box-shadow: var(--ogm-shadow-lg);
    padding: 6px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
}
.ogm-state-dd__pop a { padding: 5px 8px; border-radius: var(--ogm-radius); color: var(--ogm-text); }
.ogm-state-dd__pop a:hover { background: var(--ogm-bg-soft); text-decoration: none; }

/* ── Featured carousel tiles — equal-height, clamped content ────────── */
.ogm-featured__track { align-items: stretch; }
.ogm-featured__slide { flex: 0 0 calc(20% - 14px); min-width: 180px; display: flex; }
@media (max-width: 1100px) { .ogm-featured__slide { flex-basis: calc(25% - 14px); } }
@media (max-width: 900px)  { .ogm-featured__slide { flex-basis: calc(33% - 14px); } }
@media (max-width: 700px)  { .ogm-featured__slide { flex-basis: calc(50% - 14px); } }
@media (max-width: 480px)  { .ogm-featured__slide { flex-basis: calc(100% - 0px); } }

/* Force every card in the carousel to the same height regardless of title/meta length */
.ogm-featured__slide .ogm-listing-card {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.ogm-featured__slide .ogm-listing-card__img { aspect-ratio: 1/1; flex: none; }
.ogm-featured__slide .ogm-listing-card__body {
    padding: 10px 12px 12px;
    flex: 1;                /* fills remaining height */
    display: flex;
    flex-direction: column;
}
.ogm-featured__slide .ogm-listing-card__title {
    font-size: .9rem;
    line-height: 1.25;
    font-weight: 600;
    min-height: 2.5em;       /* always reserves 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}
.ogm-featured__slide .ogm-listing-card__meta {
    font-size: .75rem;
    line-height: 1.3;
    margin-top: 4px;
    min-height: 1.3em;       /* always reserves 1 line */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ogm-featured__slide .ogm-listing-card__price {
    font-size: 1rem;
    margin-top: auto;        /* push to bottom so price aligns across tiles */
    padding-top: 6px;
}
.ogm-featured__slide .ogm-listing-card .ogm-btn { display: none; }  /* hide save button on tiny tiles */

/* ── Star ratings + review list ──────────────────────────────────────── */
.ogm-stars { display: inline-flex; gap: 1px; font-size: 1rem; line-height: 1; letter-spacing: 1px; }
.ogm-stars__on  { color: #f3b400; }
.ogm-stars__off { color: #d8d2c8; }

.ogm-stars-input { display: inline-flex; gap: 4px; }
.ogm-stars-input label { cursor: pointer; }
.ogm-stars-input label input { position: absolute; opacity: 0; pointer-events: none; }
.ogm-stars-input label span {
    font-size: 1.7rem; color: #d8d2c8; line-height: 1;
    transition: color .08s ease;
}
.ogm-stars-input label.is-on span,
.ogm-stars-input label.is-hover span { color: #f3b400; }

.ogm-review-form-toggle { margin: 4px 0 18px; }
.ogm-review-form-toggle > summary { cursor: pointer; padding: 8px 12px; background: var(--ogm-bg-soft); border: 1px solid var(--ogm-border); border-radius: var(--ogm-radius); font-weight: 600; list-style: none; }
.ogm-review-form-toggle > summary::-webkit-details-marker { display: none; }
.ogm-review-form-toggle[open] > summary { background: var(--ogm-bg-elev); border-color: var(--ogm-accent); }
.ogm-review-form { padding: 14px 4px 0; display: flex; flex-direction: column; gap: 10px; }
.ogm-review-form__rating label { font-weight: 600; font-size: .9rem; color: var(--ogm-text-muted); display: block; margin-bottom: 6px; }

.ogm-review-list { display: flex; flex-direction: column; gap: 16px; }
.ogm-review {
    border-bottom: 1px solid var(--ogm-border);
    padding-bottom: 14px;
}
.ogm-review:last-child { border-bottom: 0; padding-bottom: 0; }
.ogm-review__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.ogm-review__title { font-weight: 700; margin: 4px 0; }
.ogm-review__body { color: var(--ogm-text); font-size: .95rem; }
.ogm-review__body p { margin: 0 0 6px; }

/* ── Marketplace product detail (eBay/Etsy style) ────────────────────── */
.ogm-product-detail { display: flex; flex-direction: column; gap: 24px; }
.ogm-product-detail__breadcrumb { font-size: .85rem; color: var(--ogm-text-muted); }
.ogm-product-detail__breadcrumb a { color: var(--ogm-text-muted); }
.ogm-product-detail__breadcrumb a:hover { color: var(--ogm-accent); text-decoration: none; }
.ogm-product-detail__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 32px;
    align-items: start;
}
@media (max-width: 900px) {
    .ogm-product-detail__layout { grid-template-columns: 1fr; }
}
.ogm-product-detail__media { min-width: 0; }
.ogm-product-detail__media .ogm-gallery__hero { aspect-ratio: 1/1; }

.ogm-product-detail__buybox {
    position: sticky; top: 84px;
    background: var(--ogm-bg-elev);
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius-lg);
    padding: 22px;
    box-shadow: var(--ogm-shadow);
    display: flex; flex-direction: column; gap: 10px;
}
.ogm-product-detail__cat {
    font-size: .75rem; text-transform: uppercase; letter-spacing: .06em;
    font-weight: 700; color: var(--ogm-accent);
}
.ogm-product-detail__cat:hover { text-decoration: none; opacity: .85; }
.ogm-product-detail__title {
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 700;
    margin: 0;
}
.ogm-product-detail__seller {
    display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
    padding: 8px 0;
    font-size: .9rem;
    border-bottom: 1px solid var(--ogm-border);
}
.ogm-product-detail__price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ogm-product-detail__price {
    font-size: 2rem; font-weight: 800;
    color: var(--ogm-accent);
    letter-spacing: -0.5px;
    line-height: 1.1;
}
.ogm-product-detail__compare {
    text-decoration: line-through;
    color: var(--ogm-text-muted);
    font-size: 1rem;
}
.ogm-product-detail__discount {
    background: var(--ogm-accent);
    color: #fff;
    padding: 2px 8px; border-radius: 999px;
    font-size: .75rem; font-weight: 700;
}
.ogm-product-detail__stock {
    display: flex; align-items: center; gap: 6px;
    font-size: .85rem; color: var(--ogm-text-muted);
}
.ogm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.ogm-dot--ok  { background: #2f9648; }
.ogm-dot--out { background: var(--ogm-danger); }

.ogm-product-detail__qty { display: flex; align-items: center; gap: 10px; }
.ogm-product-detail__qty label { font-size: .85rem; color: var(--ogm-text-muted); }
.ogm-product-detail__qty input { width: 64px; padding: 6px 8px; border: 1px solid var(--ogm-border); border-radius: var(--ogm-radius); background: var(--ogm-bg); color: var(--ogm-text); font: inherit; }
.ogm-product-detail__buy { display: flex; flex-direction: column; gap: 8px; }
.ogm-btn--lg { padding: 12px 18px; font-size: 1rem; font-weight: 700; }

.ogm-product-detail__trust {
    margin-top: 6px; padding-top: 12px;
    border-top: 1px solid var(--ogm-border);
    font-size: .8rem; color: var(--ogm-text-muted);
    display: flex; flex-direction: column; gap: 4px;
}
.ogm-product-detail__contact-toggle { margin-top: 4px; }
.ogm-product-detail__contact-toggle summary { cursor: pointer; padding: 8px 0; font-size: .9rem; font-weight: 600; color: var(--ogm-accent); list-style: none; }
.ogm-product-detail__contact-toggle summary::-webkit-details-marker { display: none; }
.ogm-product-detail__contact-toggle summary::before { content: '✉  '; }

.ogm-product-detail__below {
    display: flex; flex-direction: column; gap: 18px;
}
.ogm-product-detail__panel {
    background: var(--ogm-bg-elev);
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius-lg);
    padding: 22px;
}
.ogm-product-detail__panel h2 { margin: 0 0 12px; font-size: 1.15rem; font-weight: 700; }
.ogm-product-detail__specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; }
@media (max-width: 600px) { .ogm-product-detail__specs { grid-template-columns: 1fr; } }
.ogm-product-detail__spec {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 8px 0; border-bottom: 1px solid var(--ogm-border);
    font-size: .9rem;
}
.ogm-product-detail__spec dt { color: var(--ogm-text-muted); margin: 0; }
.ogm-product-detail__spec dd { color: var(--ogm-text); margin: 0; font-weight: 500; }

/* ── Real Estate listing detail (Realtor.com style) ──────────────────── */
.ogm-re-detail { display: flex; flex-direction: column; gap: 16px; }
.ogm-re-detail__back { font-size: .9rem; }
.ogm-re-detail__flash { padding: 10px 14px; border-radius: var(--ogm-radius); }
.ogm-re-detail__body {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 24px;
    align-items: start;
}
@media (max-width: 900px) {
    .ogm-re-detail__body { grid-template-columns: 1fr; }
}
.ogm-re-detail__head {
    padding: 4px 0;
}
/* LandWatch-style top header above gallery: price+title+addr on left, key stats on right */
.ogm-re-detail__head--top {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: end;
    padding: 14px 0 18px;
    border-bottom: 1px solid var(--ogm-border);
}
.ogm-re-detail__head--top .ogm-re-detail__head-main { min-width: 0; }
.ogm-re-detail__quick--top {
    border: 0; padding: 0; margin: 0;
    justify-content: flex-end;
}
@media (max-width: 800px) {
    .ogm-re-detail__head--top { grid-template-columns: 1fr; }
    .ogm-re-detail__quick--top { justify-content: flex-start; }
}

/* Docs list */
.ogm-re-docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ogm-re-docs__item a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius);
    background: var(--ogm-bg-soft);
    color: var(--ogm-text);
    text-decoration: none;
}
.ogm-re-docs__item a:hover { border-color: var(--ogm-accent); color: var(--ogm-accent); }
.ogm-re-docs__icon { font-size: 1.2rem; }
.ogm-re-docs__name { flex: 1; min-width: 0; word-break: break-word; }
.ogm-re-docs__ext {
    font-size: .7rem; font-weight: 700;
    padding: 2px 6px; border-radius: 4px;
    background: var(--ogm-accent); color: #fff;
}

/* Realtor footer card */
.ogm-re-detail__realtor { display: flex; align-items: flex-start; gap: 18px; }
.ogm-re-detail__realtor-info { flex: 1; min-width: 0; }
.ogm-re-detail__realtor-info h3 { font-size: 1.15rem; }
.ogm-re-detail__realtor-info a { color: var(--ogm-text); text-decoration: none; }
.ogm-re-detail__realtor-info h3 a:hover { color: var(--ogm-accent); }
@media (max-width: 600px) {
    .ogm-re-detail__realtor { flex-direction: column; }
}

.ogm-re-detail__mapcard { padding: 18px 22px; }
.ogm-re-detail__price {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--ogm-text);
    letter-spacing: -0.5px;
    line-height: 1.1;
}
.ogm-re-detail__title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 6px 0 4px;
    color: var(--ogm-text-muted);
}
.ogm-re-detail__addr {
    color: var(--ogm-text-muted);
    font-size: .95rem;
}
.ogm-re-detail__quick {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--ogm-border);
    border-bottom: 1px solid var(--ogm-border);
}
.ogm-re-detail__quick-item { display: flex; flex-direction: column; line-height: 1.2; }
.ogm-re-detail__quick-item strong { font-size: 1.15rem; color: var(--ogm-text); }
.ogm-re-detail__quick-item span { font-size: .8rem; color: var(--ogm-text-muted); margin-top: 2px; }

.ogm-re-detail__card {
    background: var(--ogm-bg-elev);
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius-lg);
    padding: 22px;
    box-shadow: var(--ogm-shadow);
}
.ogm-re-detail__card h2 {
    margin: 0 0 12px;
    font-size: 1.2rem;
    font-weight: 700;
}
.ogm-re-detail__details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 36px;
    row-gap: 0;
    margin: 0;
}
@media (max-width: 700px) {
    .ogm-re-detail__details { grid-template-columns: 1fr; column-gap: 0; }
}
.ogm-re-detail__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ogm-border);
    font-size: .95rem;
}
.ogm-re-detail__row dt { color: var(--ogm-text-muted); margin: 0; flex: 0 0 auto; }
.ogm-re-detail__row dd { color: var(--ogm-text); margin: 0; font-weight: 600; text-align: right; flex: 1 1 auto; min-width: 0; word-break: break-word; }

.ogm-re-detail__sidebar { position: sticky; top: 80px; align-self: start; }
@media (max-width: 900px) {
    .ogm-re-detail__sidebar { position: static; top: auto; }
}
.ogm-re-detail__agent {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ogm-border);
    text-decoration: none;
    color: var(--ogm-text);
}
a.ogm-re-detail__agent:hover { color: var(--ogm-accent); }
.ogm-re-detail__agent-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--ogm-accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.1rem;
    flex: none;
}

/* ── Product detail Buy / Add stack ──
   Stacked vertically with the qty input above. Buy Now is the primary
   accent button; Add to Cart is the ghost option below it. */
.ogm-product-detail__buy {
    display: flex; flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}
.ogm-product-detail__buy .ogm-product-detail__qty {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 4px;
}
.ogm-product-detail__buy .ogm-product-detail__qty input {
    width: 70px;
    padding: 8px 10px;
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius);
}
.ogm-product-detail__buy-status {
    font-size: .82rem;
    min-height: 1em;
    text-align: center;
}

/* ── Cart drawer ──
   Right-side slide-in. Same backdrop/dismiss behavior as the chat modal.
   Used after Add-to-Cart so the buyer can choose Continue or Checkout
   without leaving the page they were shopping from. */
.ogm-cart-drawer__backdrop {
    z-index: 9990;
}
.ogm-cart-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 420px;
    max-width: 92vw;
    background: var(--ogm-bg-elev);
    border-left: 1px solid var(--ogm-border);
    box-shadow: var(--ogm-shadow-lg);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform .22s ease;
}
.ogm-cart-drawer__backdrop.is-open .ogm-cart-drawer { transform: translateX(0); }
.ogm-cart-drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ogm-border);
}
.ogm-cart-drawer__head h2 { font-size: 1.05rem; margin: 0; font-weight: 700; }
.ogm-cart-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 16px;
}
.ogm-cart-drawer__empty {
    text-align: center; padding: 40px 20px; color: var(--ogm-text-muted);
}
.ogm-cart-drawer__item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ogm-border);
}
.ogm-cart-drawer__item:last-child { border-bottom: 0; }
.ogm-cart-drawer__thumb {
    width: 56px; height: 56px;
    border-radius: var(--ogm-radius);
    object-fit: cover;
    background: var(--ogm-bg-soft);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    flex: none;
}
.ogm-cart-drawer__item-main { flex: 1 1 auto; min-width: 0; }
.ogm-cart-drawer__item-title { font-weight: 600; color: var(--ogm-text); display: block; }
.ogm-cart-drawer__item-title:hover { color: var(--ogm-accent); }
.ogm-cart-drawer__item-total { font-weight: 700; flex: none; }
.ogm-cart-drawer__qty {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--ogm-bg-soft);
    border: 1px solid var(--ogm-border);
    border-radius: 8px;
    padding: 2px;
}
.ogm-cart-drawer__qty-btn {
    width: 26px; height: 26px;
    border: 0; background: transparent; cursor: pointer;
    color: var(--ogm-text); font-size: 1rem; line-height: 1;
    border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
}
.ogm-cart-drawer__qty-btn:hover { background: var(--ogm-bg); color: var(--ogm-accent); }
.ogm-cart-drawer__qty-val { min-width: 22px; text-align: center; font-weight: 700; font-size: .9rem; padding: 0 2px; }
.ogm-cart-drawer__qty-remove {
    width: 26px; height: 26px;
    border: 0; background: transparent; cursor: pointer;
    margin-left: 4px;
    border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .9rem; line-height: 1;
    opacity: .55;
}
.ogm-cart-drawer__qty-remove:hover { opacity: 1; background: rgba(220,53,69,.1); }
.ogm-cart-drawer__foot {
    border-top: 1px solid var(--ogm-border);
    padding: 14px 16px 18px;
    background: var(--ogm-bg);
}
.ogm-cart-drawer__foot[hidden] { display: none; }
.ogm-cart-drawer__totals {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 12px;
    font-size: 1.05rem;
}
.ogm-cart-drawer__totals strong { font-size: 1.3rem; color: var(--ogm-accent); }
.ogm-cart-drawer__actions {
    display: flex; flex-direction: column; gap: 8px;
}
.ogm-cart-drawer__actions .ogm-btn { width: 100%; }

@media (max-width: 600px) {
    .ogm-cart-drawer { width: 100vw; max-width: 100vw; border-left: 0; }
}

/* ── Contact-seller modal ──
   Works for guests AND signed-in users — same form, same submission path.
   Listing context appears as a small banner at the top so the buyer (and
   the moderation log) know which listing this inquiry refers to. */
.ogm-contact-form { padding-top: 6px; }
.ogm-contact-form__listing {
    background: var(--ogm-bg-soft);
    border: 1px solid var(--ogm-border);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 14px;
    font-size: .92rem;
}
.ogm-contact-form__listing[hidden] { display: none; }
.ogm-contact-form__field { display: block; margin-bottom: 12px; }
.ogm-contact-form__field > span {
    display: block;
    font-weight: 600;
    font-size: .9rem;
    margin-bottom: 4px;
    color: var(--ogm-text);
}
.ogm-contact-form input[type="text"],
.ogm-contact-form input[type="email"],
.ogm-contact-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--ogm-border);
    border-radius: 10px;
    background: var(--ogm-bg);
    color: var(--ogm-text);
    font: inherit;
}
.ogm-contact-form input[type="text"]:focus,
.ogm-contact-form input[type="email"]:focus,
.ogm-contact-form textarea:focus {
    outline: none;
    border-color: var(--ogm-accent);
    box-shadow: 0 0 0 3px rgba(47, 122, 58, .12);
}
.ogm-contact-form textarea { resize: vertical; min-height: 110px; }
.ogm-contact-form__honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important; height: 1px !important;
    opacity: 0; pointer-events: none;
}
.ogm-contact-form__actions {
    display: flex; align-items: center; gap: 10px;
    margin-top: 8px;
}
.ogm-contact-form__actions > [data-contact-status] { flex: 1 1 auto; font-size: .85rem; }

/* ── Orders tab — Amazon/eBay-style receipt cards ────────────────────── */
.ogm-orders-header { margin-bottom: 14px; }
.ogm-orders-empty {
    background: var(--ogm-bg-soft);
    border: 1px dashed var(--ogm-border);
    border-radius: var(--ogm-radius-lg);
    padding: 30px 24px;
    text-align: center;
    color: var(--ogm-text);
}
.ogm-orders-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
}
.ogm-order-card {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    background: var(--ogm-bg-elev);
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius-lg);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ogm-order-card:hover,
.ogm-order-card:focus { outline: none; border-color: var(--ogm-accent); box-shadow: var(--ogm-shadow-lg); }
.ogm-order-card__thumbs { display: flex; gap: 4px; flex: none; }
.ogm-order-card__thumb {
    width: 48px; height: 48px;
    object-fit: cover;
    border-radius: var(--ogm-radius);
    background: var(--ogm-bg-soft);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
}
.ogm-order-card__thumb--placeholder { color: var(--ogm-text-muted); }
.ogm-order-card__main { flex: 1 1 auto; min-width: 0; }
.ogm-order-card__row1 {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
    font-size: .95rem;
}
.ogm-order-card__row2 {
    font-size: .85rem; color: var(--ogm-text-muted);
    margin-top: 2px;
}
.ogm-order-card__chev { color: var(--ogm-text-muted); font-size: 1.4rem; flex: none; }
.ogm-order-card__status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--ogm-bg-soft);
    color: var(--ogm-text-muted);
}
.ogm-order-card__status--paid      { background: rgba(47, 122, 58, .12); color: var(--ogm-accent); }
.ogm-order-card__status--shipped   { background: rgba(192, 128, 32, .15); color: var(--ogm-warning); }
.ogm-order-card__status--delivered { background: rgba(47, 122, 58, .12); color: var(--ogm-accent); }
.ogm-order-card__status--refunded,
.ogm-order-card__status--cancelled { background: rgba(181, 58, 58, .10); color: var(--ogm-danger); }

/* Receipt modal body — vendor groupings + line items + addr */
.ogm-order-modal__meta dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 14px;
    margin: 0 0 20px;
    font-size: .92rem;
}
.ogm-order-modal__meta dt { font-weight: 600; color: var(--ogm-text-muted); }
.ogm-order-modal__meta dd { margin: 0; }

.ogm-order-modal__vendor {
    background: var(--ogm-bg-soft);
    border: 1px solid var(--ogm-border);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
}
.ogm-order-modal__vendor-head {
    display: flex; align-items: center; gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--ogm-border);
    flex-wrap: wrap;
}
.ogm-order-modal__vendor-head .ogm-avatar {
    width: 40px; height: 40px;
    font-size: 14px;
    flex: none;
}
.ogm-order-modal__vendor-meta { flex: 1 1 auto; min-width: 0; }
.ogm-order-modal__vendor-name { font-weight: 700; font-size: .98rem; }
.ogm-order-modal__vendor-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.ogm-order-modal__items { display: flex; flex-direction: column; gap: 10px; }
.ogm-order-modal__item {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--ogm-border);
}
.ogm-order-modal__item:last-child { border-bottom: 0; }
.ogm-order-modal__thumb {
    width: 56px; height: 56px;
    object-fit: cover;
    border-radius: var(--ogm-radius);
    background: var(--ogm-bg);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    flex: none;
}
.ogm-order-modal__item-main { flex: 1 1 auto; min-width: 0; }
.ogm-order-modal__item-title { font-weight: 600; color: var(--ogm-text); }
.ogm-order-modal__item-title a { color: var(--ogm-text); }
.ogm-order-modal__item-title a:hover { color: var(--ogm-accent); }
.ogm-order-modal__item-total { font-weight: 700; color: var(--ogm-text); flex: none; }

.ogm-order-modal__addr {
    margin-top: 6px;
    padding: 12px 14px;
    background: var(--ogm-bg-soft);
    border: 1px solid var(--ogm-border);
    border-radius: 12px;
}
.ogm-order-modal__addr h3 { font-size: .9rem; margin: 0 0 6px; }
.ogm-order-modal__addr address { font-style: normal; line-height: 1.5; }

@media (max-width: 600px) {
    .ogm-order-card { padding: 12px; gap: 10px; }
    .ogm-order-card__thumbs { display: none; }
    .ogm-order-modal__meta dl { grid-template-columns: 1fr; gap: 2px; }
    .ogm-order-modal__vendor-actions { width: 100%; }
}

/* ── Map pin hovercard ── positioning wrapper only.
   The visual card is a regular .ogm-listing-card rendered INSIDE this
   wrapper. The wrapper just handles positioning over the map.
   Desktop: anchored above the tapped marker (translate(-50%,-100%)).
   Mobile:  .--centered modifier pins it to the viewport center so the card
            never falls off-screen when the marker sits near the edge. */
.ogm-pin-card {
    position: fixed;
    /* Above Leaflet's controls (z-index 1000) and sticky header (1500),
       but BELOW the sitewide modal stack (.ogm-modal-backdrop is 9998).
       Previously 1100 — too thin a margin; after modal open/close
       reflow, Leaflet panes' rebuilt stacking contexts would render
       above the card on subsequent hovers. 9000 leaves comfortable
       headroom below the modal. */
    z-index: 9000;
    width: 320px;
    max-width: calc(100vw - 24px);
    transform: translate(-50%, -100%);
    pointer-events: auto;
    /* No background/border/shadow here — the inner card brings its own. */
}
.ogm-pin-card[hidden] { display: none; }
.ogm-pin-card > .ogm-listing-card { width: 100%; margin: 0; }
.ogm-pin-card--centered { transform: translate(-50%, -50%); }

/* Default avatar size in the seller strip — both card-grid AND map-hovercard
   share it. .ogm-avatar itself has no width/height (sizing comes from HTML
   attrs or inline style). Without this, a missing attr means the placeholder
   SVG renders at its NATURAL size — which is the giant sun image Eric saw. */
.ogm-listing-card__seller-avatar { width: 32px; height: 32px; font-size: 12px; }

/* Mobile: shrink the body/image of the map hovercard, but keep the seller
   strip touch-friendly — avatar and Contact must be easy to tap.
   Card width stays ~260px so the image isn't tiny; only the meta + body
   compress. The seller strip stays at near-desktop sizes. */
@media (max-width: 900px) {
    .ogm-pin-card { width: 260px; max-width: calc(100vw - 32px); }
    .ogm-pin-card .ogm-listing-card__img       { aspect-ratio: 16/10; }
    .ogm-pin-card .ogm-listing-card__body      { padding: 8px 12px 10px; }
    .ogm-pin-card .ogm-listing-card__topline   { font-size: .92rem; }
    .ogm-pin-card .ogm-listing-card__title     { font-size: .88rem; line-height: 1.25; }
    .ogm-pin-card .ogm-listing-card__meta      { font-size: .74rem; }
    .ogm-pin-card .ogm-listing-card__badge     { font-size: .6rem; padding: 2px 6px; }
    /* Seller strip — touch-friendly sizing (mobile usability rule: 36px+ tap targets). */
    .ogm-pin-card .ogm-listing-card__seller       { padding: 10px 12px; gap: 8px; }
    .ogm-pin-card .ogm-listing-card__seller-link  { font-size: .85rem; gap: 8px; }
    .ogm-pin-card .ogm-listing-card__seller-avatar{ width: 36px; height: 36px; font-size: 13px; }
    .ogm-pin-card .ogm-listing-card__contact      { padding: 8px 16px; font-size: .85rem; font-weight: 700; }
}

/* ── Map modal overlay (fullscreen) ──────────────────────────────────── */
.ogm-map-overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: var(--ogm-bg);
    display: flex; flex-direction: column;
}
.ogm-map-overlay[hidden] { display: none; }
.ogm-map-overlay__bar {
    position: relative;
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 64px 12px 20px;     /* room for the absolute X */
    border-bottom: 1px solid var(--ogm-border);
    background: var(--ogm-bg-elev);
    min-height: 56px;
}
.ogm-map-overlay__bar-info { font-size: .95rem; }
.ogm-map-overlay__close {
    position: absolute;
    top: 50%; right: 16px;
    transform: translateY(-50%);
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--ogm-bg);
    border: 1px solid var(--ogm-border);
    color: var(--ogm-text);
    font-size: 1.2rem; line-height: 1;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: var(--ogm-shadow);
}
.ogm-map-overlay__close:hover { background: var(--ogm-danger); color: #fff; border-color: var(--ogm-danger); }

.ogm-map-overlay__body {
    flex: 1; min-height: 0;
    display: grid;
    grid-template-columns: 1fr 380px;
}
@media (max-width: 900px) {
    .ogm-map-overlay__body { grid-template-columns: 1fr; grid-template-rows: 55vh 1fr; }
}
.ogm-map-overlay__body .ogm-map {
    width: 100%; height: 100%;
    margin: 0; border: 0; border-radius: 0;
    min-height: 100%;
}
.ogm-map-overlay__list {
    overflow-y: auto;
    border-left: 1px solid var(--ogm-border);
    padding: 12px;
    display: flex; flex-direction: column; gap: 10px;
    background: var(--ogm-bg);
}
@media (max-width: 900px) {
    .ogm-map-overlay__list { border-left: 0; border-top: 1px solid var(--ogm-border); }
}
/* In the modal sidebar, cards render in a compact horizontal row layout so the
   title + meta + price are visible alongside a small thumbnail. */
.ogm-map-overlay__list .ogm-listing-card {
    display: grid;
    grid-template-columns: 100px 1fr;
    width: 100%;
    align-items: stretch;
    overflow: hidden;
}
.ogm-map-overlay__list .ogm-listing-card__img { aspect-ratio: auto; min-height: 100%; }
.ogm-map-overlay__list .ogm-listing-card__body { padding: 10px 12px; min-width: 0; }
.ogm-map-overlay__list .ogm-listing-card__title { font-size: .9rem; line-height: 1.25; }
.ogm-map-overlay__list .ogm-listing-card__title a { color: var(--ogm-text); }
.ogm-map-overlay__list .ogm-listing-card__meta { font-size: .75rem; }
.ogm-map-overlay__list .ogm-listing-card__price { font-size: .95rem; margin-top: 4px; }
.ogm-map-overlay__list .ogm-listing-card .ogm-btn { display: none; }

/* ── Real Estate hybrid layout (Realtor + Zillow + LandWatch) ────────── */
.ogm-re-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin: 8px 0 12px; flex-wrap: wrap;
}
.ogm-re-header__title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }

/* Filter bar with chip dropdowns */
.ogm-re-filterbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 10px 12px;
    background: var(--ogm-bg-elev);
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius-lg);
    margin-bottom: 14px;
}
/* Search shrinks to a reasonable cap so the sort + view toggle on the right
   have room. Push them right with a flex-grow spacer. */
.ogm-re-filterbar__search { flex: 0 1 240px; min-width: 160px; }
.ogm-re-filterbar__spacer { flex: 1 1 auto; }
.ogm-re-filterbar__sort { display: inline-flex; align-items: center; gap: 6px; }
.ogm-re-filterbar__sort label { font-size: .82rem; color: var(--ogm-text-muted); }
.ogm-re-filterbar__sort select {
    padding: 6px 8px;
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius);
    background: var(--ogm-bg);
    color: var(--ogm-text);
    font: inherit;
}
.ogm-re-filterbar__search input {
    width: 100%; padding: 8px 12px;
    border: 1px solid var(--ogm-border); border-radius: var(--ogm-radius);
    background: var(--ogm-bg); color: var(--ogm-text); font: inherit;
}
.ogm-chip {
    position: relative;
    border: 1px solid var(--ogm-border);
    border-radius: 999px;
    padding: 0;
    background: var(--ogm-bg);
}
.ogm-chip > summary {
    list-style: none; cursor: pointer;
    padding: 6px 12px; font-size: .85rem; font-weight: 600; color: var(--ogm-text);
    display: inline-block;
}
.ogm-chip > summary::-webkit-details-marker { display: none; }
.ogm-chip > summary::after { content: ' ▾'; color: var(--ogm-text-muted); }
.ogm-chip[open] > summary { background: var(--ogm-accent); color: #fff; border-radius: 999px; }
.ogm-chip__pop {
    /* z-index has to beat Leaflet (tiles 200, overlays 400, shadows 500, markers 600,
       tooltips 650, popups 700, controls 800-1000). 1050 puts us safely above. */
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 1050;
    min-width: 220px;
    background: var(--ogm-bg-elev);
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius);
    padding: 12px;
    box-shadow: var(--ogm-shadow-lg);
    display: flex; flex-direction: column; gap: 6px;
}
/* Lift the chip itself when its popover is open so it owns its own stacking
   context above the map. Without this, parent overflow/position could still
   clip the popup behind Leaflet on some browsers. */
.ogm-chip[open] { position: relative; z-index: 1051; }
.ogm-chip__pop--wide { min-width: 280px; }
.ogm-chip__pop label { font-size: .8rem; font-weight: 600; color: var(--ogm-text-muted); margin-top: 4px; }
.ogm-chip__pop input[type="number"],
.ogm-chip__pop select {
    padding: 6px 8px; border: 1px solid var(--ogm-border); border-radius: var(--ogm-radius);
    background: var(--ogm-bg); color: var(--ogm-text); font: inherit;
}
.ogm-chip__check { display: flex; align-items: center; gap: 8px; font-weight: 400; color: var(--ogm-text); margin-top: 0; }
.ogm-chip--toggle {
    cursor: pointer;
    padding: 6px 12px;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .85rem; font-weight: 600;
}
.ogm-chip--toggle input { margin: 0; }

/* Layout: map sticky left, listings right; expand toggles to map-on-top */
.ogm-re-layout {
    display: grid;
    grid-template-columns: minmax(360px, 45%) 1fr;
    gap: 18px;
    align-items: start;
}
@media (max-width: 900px) {
    .ogm-re-layout { grid-template-columns: 1fr; }
}
.ogm-re-layout__map {
    position: sticky; top: 80px;
    align-self: start;
    max-height: calc(100vh - 100px);
    display: flex; flex-direction: column; gap: 8px;
}
.ogm-re-layout__map .ogm-map { flex: 1; min-height: 540px; height: auto; margin: 0; }
@media (max-width: 900px) {
    .ogm-re-layout__map { position: static; max-height: none; }
    .ogm-re-layout__map .ogm-map { min-height: 360px; }
}
.ogm-re-map-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: .85rem; color: var(--ogm-text-muted);
}

/* Expanded map mode: full width map on top, listings below */
.ogm-re-layout.is-map-expanded {
    display: block;
}
.ogm-re-layout.is-map-expanded .ogm-re-layout__map {
    position: static;
    max-height: none;
    margin-bottom: 18px;
}
.ogm-re-layout.is-map-expanded .ogm-re-layout__map .ogm-map { min-height: 70vh; }

/* Featured row tint — pale accent overlay. Use background-IMAGE (not the
   `background` shorthand) so the base `background: var(--ogm-bg-elev)` from
   .ogm-listing-card stays applied. Otherwise the gradient's `transparent 40%`
   stop lets the page/map show through the card body — title and description
   become unreadable on top of a map view. */
.ogm-listing-card--featured {
    outline: 1px solid var(--ogm-accent);
    outline-offset: -1px;
    background-image: linear-gradient(to bottom, rgba(var(--ogm-accent-rgb), .04) 0%, transparent 40%);
}
html[data-theme='dark'] .ogm-listing-card--featured {
    background-image: linear-gradient(to bottom, rgba(94, 214, 106, .06) 0%, transparent 40%);
}
.ogm-listing-card--hot {
    transform: translateY(-2px);
    box-shadow: 0 0 0 3px var(--ogm-accent), var(--ogm-shadow-lg);
}

/* Highlighted Leaflet marker on card hover */
.leaflet-marker-icon.ogm-marker--hot {
    filter: drop-shadow(0 0 4px var(--ogm-accent)) drop-shadow(0 0 8px var(--ogm-accent));
    transform: translateY(-4px) scale(1.15);
    transition: transform .12s ease;
    z-index: 1000 !important;
}

/* ── Pricing tier cards (services subscribe page) ────────────────────── */
.ogm-tier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
@media (max-width: 720px) { .ogm-tier-grid { grid-template-columns: 1fr; } }
.ogm-tier-card { background: var(--ogm-bg-elev); border: 1px solid var(--ogm-border); border-radius: var(--ogm-radius-lg); padding: 22px; }
.ogm-tier-card--recommended { border-color: var(--ogm-accent); box-shadow: 0 0 0 2px rgba(var(--ogm-accent-rgb),.12); position: relative; }
.ogm-tier-card--recommended::after {
    content: 'Most flexible';
    position: absolute; top: -10px; right: 16px;
    background: var(--ogm-accent); color: #fff;
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: 2px 10px; border-radius: 999px;
}
.ogm-tier-card h2 { margin-top: 0; }
.ogm-tier-card .ogm-btn { margin-top: 12px; }

/* ── Sticky-sidebar contact CTA card ──
   Small agent/poster summary + a single "Contact" button that opens the
   sitewide contact modal (pre-tagged with this listing's context). */
.ogm-contact-cta { padding: 18px 20px 20px; }
.ogm-contact-cta__row {
    display: block;
    padding: 8px 10px;
    margin-top: 10px;
    border-radius: 8px;
    background: var(--ogm-bg-soft);
    color: var(--ogm-text);
    font-weight: 600;
    font-size: .92rem;
}
.ogm-contact-cta__row:hover { color: var(--ogm-accent); }
.ogm-contact-cta__btn {
    margin-top: 16px;
    font-size: 1rem;
    font-weight: 700;
    padding: 14px 18px;
}
.ogm-contact-cta__note {
    font-size: .8rem;
    margin: 10px 0 0;
    line-height: 1.45;
    text-align: center;
}

/* Dashboard Boost button — gold/yellow text + bigger tap target so it's
   unmistakable. Sits next to listings in the agent/vendor tables. */
.ogm-btn--boost {
    padding: 10px 22px !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: #ffe14a !important;
    letter-spacing: .02em;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.ogm-btn--boost:hover { color: #fff58a !important; filter: brightness(1.06); }

/* "Featured" pill in dashboard listing tables — shows next to listing title
   so vendors/agents can scan at-a-glance which of their listings are
   currently boosted. Same look across all four sections. */
.ogm-pill--featured {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f5b800, #e8930a);
    color: #fff !important;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: middle;
    box-shadow: 0 1px 2px rgba(180,120,0,.25);
}

/* ── "Property listed by" agent card ── full-width section on RE detail.
   Bigger avatar, prominent name, agent bio, links, and a Contact CTA that
   opens the sitewide contact modal (same as all other Contact buttons). */
.ogm-listed-by { padding: 24px; }
.ogm-listed-by__heading {
    font-size: 1.1rem;
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ogm-border);
}
.ogm-re-detail__realtor {
    display: flex; align-items: flex-start; gap: 22px;
    flex-wrap: wrap;
}
.ogm-re-detail__realtor-avatar {
    width: 96px; height: 96px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    font-size: 38px;
}
.ogm-re-detail__realtor-info { flex: 1 1 320px; min-width: 0; }
.ogm-listed-by__name { font-size: 1.35rem; margin: 0 0 4px; }
.ogm-listed-by__name a { color: var(--ogm-text); }
.ogm-listed-by__name a:hover { color: var(--ogm-accent); }
.ogm-listed-by__tagline { font-size: .98rem; margin-bottom: 8px; }
.ogm-listed-by__bio { margin: 10px 0 14px; line-height: 1.55; color: var(--ogm-text); }
.ogm-listed-by__links {
    display: flex; flex-wrap: wrap; gap: 8px 18px;
    font-size: .92rem;
    margin-bottom: 14px;
}
.ogm-listed-by__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ogm-listed-by__actions .ogm-btn { padding: 11px 22px; font-size: .98rem; font-weight: 700; }

/* ── Similar Properties carousel ── horizontal scroll with prev/next buttons */
.ogm-similar { padding: 22px 24px 24px; }
.ogm-similar__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
    gap: 12px;
}
.ogm-similar__heading { font-size: 1.1rem; margin: 0; }
.ogm-similar__nav { display: flex; gap: 6px; }
.ogm-similar__btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--ogm-border);
    background: var(--ogm-bg);
    color: var(--ogm-text);
    font-size: 1.2rem; line-height: 1;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: border-color .12s, background .12s, color .12s;
}
.ogm-similar__btn:hover {
    border-color: var(--ogm-accent);
    color: var(--ogm-accent);
    background: var(--ogm-bg-soft);
}
.ogm-similar__track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 8px;
    /* Hide scrollbar but keep wheel/touch scrolling */
    scrollbar-width: thin;
}
.ogm-similar__track::-webkit-scrollbar { height: 6px; }
.ogm-similar__track::-webkit-scrollbar-thumb { background: var(--ogm-border); border-radius: 3px; }
.ogm-similar__track > .ogm-listing-card {
    flex: 0 0 280px;
    scroll-snap-align: start;
    /* Hide the seller strip on these compact cards — the price/title/meta
       is enough at this size. Saves vertical real estate too. */
}
.ogm-similar__track > .ogm-listing-card .ogm-listing-card__seller { display: none; }
@media (max-width: 600px) {
    .ogm-similar__track > .ogm-listing-card { flex-basis: 78vw; }
}

/* ── Forms (listing form + auth) ── modern, spacious, easy to fill out.
   Big inputs, clear labels, generous breathing room. The goal: make
   posting a listing FEEL fast and easy. */
.ogm-form-section {
    border: 1px solid var(--ogm-border);
    border-radius: 16px;
    padding: 24px 26px 18px;
    margin-bottom: 22px;
    background: var(--ogm-bg-elev);
    box-shadow: var(--ogm-shadow);
}
.ogm-form-section legend {
    font-size: 1.05rem;
    font-weight: 700;
    padding: 0 8px;
    color: var(--ogm-text);
    letter-spacing: -.01em;
}
.ogm-form-section > legend + p,
.ogm-form-section > p:first-of-type {
    margin-top: 4px;
    color: var(--ogm-text-muted);
    font-size: .92rem;
}
.ogm-field { display: flex; flex-direction: column; margin-bottom: 16px; flex: 1; min-width: 0; }
.ogm-field label {
    font-size: .95rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--ogm-text);
}
.ogm-field label .req { color: var(--ogm-danger); margin-left: 2px; }
.ogm-field input[type="text"],
.ogm-field input[type="email"],
.ogm-field input[type="tel"],
.ogm-field input[type="number"],
.ogm-field input[type="search"],
.ogm-field input[type="password"],
.ogm-field input[type="url"],
.ogm-field input[type="date"],
.ogm-field select,
.ogm-field textarea {
    padding: 12px 14px;
    border: 1px solid var(--ogm-border);
    border-radius: 10px;
    background: var(--ogm-bg);
    color: var(--ogm-text);
    font: inherit;
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ogm-field input::placeholder,
.ogm-field textarea::placeholder { color: var(--ogm-text-muted); }
.ogm-field input:focus,
.ogm-field select:focus,
.ogm-field textarea:focus {
    outline: none;
    border-color: var(--ogm-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ogm-accent) 18%, transparent);
}
.ogm-field textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.ogm-field__error { color: var(--ogm-danger); font-size: .85rem; margin: 6px 0 0; }
.ogm-field-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.ogm-field-row .ogm-field { min-width: 140px; }

/* Inline help text under a field. */
.ogm-field__help,
.ogm-field .help {
    color: var(--ogm-text-muted);
    font-size: .85rem;
    margin-top: 6px;
    line-height: 1.4;
}

/* Checkbox/feature grid — pill-style targets, easier to scan + tap. */
.ogm-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
    margin-top: 4px;
}
.ogm-check-grid label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--ogm-border);
    border-radius: 10px;
    background: var(--ogm-bg);
    font-size: .92rem;
    font-weight: 500;
    color: var(--ogm-text);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.ogm-check-grid label:hover { border-color: var(--ogm-accent); background: var(--ogm-bg-soft); }
.ogm-check-grid label:has(input:checked) {
    border-color: var(--ogm-accent);
    background: color-mix(in srgb, var(--ogm-accent) 8%, var(--ogm-bg));
}
.ogm-check-grid input[type="checkbox"] { accent-color: var(--ogm-accent); }

.ogm-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--ogm-border);
    border-radius: 10px;
    cursor: pointer;
    background: var(--ogm-bg);
    font-weight: 500;
}
.ogm-toggle:hover { border-color: var(--ogm-accent); }
.ogm-toggle input[type="checkbox"] { accent-color: var(--ogm-accent); }

.ogm-form-actions {
    display: flex; gap: 12px; align-items: center;
    padding-top: 14px;
    margin-top: 6px;
    border-top: 1px solid var(--ogm-border);
}
.ogm-form-actions .ogm-btn { padding: 12px 22px; font-size: 1rem; font-weight: 700; }

/* File inputs feel native + click-friendly. */
.ogm-field input[type="file"] {
    padding: 10px 12px;
    border: 1px dashed var(--ogm-border);
    border-radius: 10px;
    background: var(--ogm-bg-soft);
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}
.ogm-field input[type="file"]:hover { border-color: var(--ogm-accent); }

/* Image upload tiles (existing images on edit) */
.ogm-image-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 12px; }
.ogm-image-tile { display: block; border: 1px solid var(--ogm-border); border-radius: var(--ogm-radius); overflow: hidden; background: var(--ogm-bg); }
.ogm-image-tile__thumb { display: block; aspect-ratio: 4/3; background: center/cover no-repeat var(--ogm-bg-soft); }
.ogm-image-tile__remove { display: flex; align-items: center; gap: 6px; padding: 6px 8px; font-size: .8rem; color: var(--ogm-text-muted); }

/* Sub-navigation inside dashboard tab panels */
.ogm-subnav { display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--ogm-border); }
.ogm-subnav a { padding: 8px 12px; color: var(--ogm-text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ogm-subnav a:hover { color: var(--ogm-text); text-decoration: none; }
.ogm-subnav a.is-active { color: var(--ogm-text); border-bottom-color: var(--ogm-accent); font-weight: 600; }

/* Data tables (agent listings, leads, etc.) */
.ogm-table-wrap { overflow-x: auto; border: 1px solid var(--ogm-border); border-radius: var(--ogm-radius-lg); }
.ogm-table { width: 100%; border-collapse: collapse; }
.ogm-table th, .ogm-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--ogm-border); }
.ogm-table th { background: var(--ogm-bg-soft); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ogm-text-muted); }
.ogm-table tr:last-child td { border-bottom: 0; }
.ogm-table a { color: var(--ogm-text); }
.ogm-table a:hover { color: var(--ogm-accent); }

/* ── Filter sidebar ──────────────────────────────────────────────────── */
.ogm-filters__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ogm-filter-group { border: 0; padding: 0; margin: 0 0 18px; }
.ogm-filter-group legend {
    font-weight: 700;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ogm-text-muted);
    margin-bottom: 6px;
    padding: 0;
}
.ogm-filter-range { display: flex; gap: 6px; }
.ogm-filter-range input { flex: 1; padding: 6px 8px; border: 1px solid var(--ogm-border); border-radius: var(--ogm-radius); background: var(--ogm-bg); color: var(--ogm-text); font: inherit; }
.ogm-filter-check { display: flex; align-items: center; gap: 8px; font-size: .9rem; padding: 3px 0; cursor: pointer; }
.ogm-filter-check input { margin: 0; }
.ogm-filter-group select { width: 100%; padding: 6px 8px; border: 1px solid var(--ogm-border); border-radius: var(--ogm-radius); background: var(--ogm-bg); color: var(--ogm-text); font: inherit; }

/* ── Map toolbar (above the map) + listings toolbar + pagination ─────── */
.ogm-map-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: .85rem; color: var(--ogm-text-muted); }
.ogm-map-flash { color: var(--ogm-accent); font-weight: 600; }
.ogm-listings-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: 12px 0; flex-wrap: wrap; }
.ogm-listings-toolbar__sort { display: flex; align-items: center; gap: 8px; }
.ogm-listings-toolbar__sort label { font-size: .85rem; color: var(--ogm-text-muted); }
.ogm-listings-toolbar__sort select { padding: 6px 8px; border: 1px solid var(--ogm-border); border-radius: var(--ogm-radius); background: var(--ogm-bg); color: var(--ogm-text); font: inherit; }
.ogm-pagination { margin-top: 20px; display: flex; align-items: center; gap: 12px; justify-content: center; font-size: .9rem; color: var(--ogm-text-muted); }
.ogm-pagination button { padding: 6px 12px; border: 1px solid var(--ogm-border); border-radius: var(--ogm-radius); background: var(--ogm-bg); color: var(--ogm-text); cursor: pointer; }
.ogm-pagination button:hover { border-color: var(--ogm-accent); }

/* AJAX-loading shim */
[data-ogm-listings-grid].is-loading { opacity: .55; pointer-events: none; transition: opacity .15s ease; }

/* Leaflet popup contrast on dark theme */
html[data-theme='dark'] .leaflet-popup-content-wrapper,
html[data-theme='dark'] .leaflet-popup-tip { background: var(--ogm-bg-elev); color: var(--ogm-text); }
html[data-theme='dark'] .leaflet-popup-content a { color: var(--ogm-accent); }

/* ── Section heads (landing-page section titles with side links) ──────── */
.ogm-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.ogm-section-head h2 { margin: 0; }

/* ── Hero search bar ──────────────────────────────────────────────────── */
.ogm-hero__search {
    display: flex;
    gap: 8px;
    margin-top: 18px;
    max-width: 640px;
}
.ogm-hero__search input[type="search"] {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius);
    background: var(--ogm-bg);
    color: var(--ogm-text);
    font: inherit;
}

/* ── State grid (landing page: Browse by state) ───────────────────────── */
.ogm-state-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}
.ogm-state-grid__tile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: var(--ogm-bg-elev);
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius);
    color: var(--ogm-text);
    text-decoration: none;
    transition: border-color .12s ease, transform .08s ease;
}
.ogm-state-grid__tile:hover {
    border-color: var(--ogm-accent);
    transform: translateY(-1px);
    text-decoration: none;
}
.ogm-state-grid__name { font-weight: 600; }
.ogm-state-grid__count {
    font-size: .8rem;
    color: var(--ogm-text-muted);
    background: var(--ogm-bg-soft);
    padding: 2px 8px;
    border-radius: 999px;
}

/* ── Small button variant ─────────────────────────────────────────────── */
.ogm-btn--sm { padding: 4px 10px; font-size: .8rem; }

/* ── Utilities ────────────────────────────────────────────────────────── */
.ogm-muted { color: var(--ogm-text-muted); }
.ogm-center { text-align: center; }
.ogm-stack > * + * { margin-top: var(--ogm-gap); }
.ogm-flex { display: flex; gap: var(--ogm-gap); align-items: center; }
.ogm-flex--wrap { flex-wrap: wrap; }

/* Infinite-scroll sentinel for search results — small loading hint that the
   IntersectionObserver triggers off of. */
.ogm-search-sentinel {
    padding: 24px 0;
    text-align: center;
    font-size: .9rem;
}

/* Forgot-password sub-flow + success banner inside the auth modal */
.ogm-auth-modal__forgot-link { text-align: center; font-size: .88rem; margin: 10px 0 0; }
.ogm-auth-modal__forgot-link a { color: var(--ogm-accent); font-weight: 600; }
.ogm-form-success {
    background: rgba(var(--ogm-accent-rgb),.10);
    border-left: 3px solid var(--ogm-accent);
    color: #1d5a23;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: .92rem;
    margin: 8px 0;
}

/* Vendor dashboard — Stripe Connect onboarding banner */
.ogm-connect-banner {
    margin: 0 0 18px;
    padding: 16px 18px;
    border-radius: var(--ogm-radius-lg);
    border: 1px solid var(--ogm-border);
    background: var(--ogm-bg-elev);
}
.ogm-connect-banner strong { display: block; font-size: 1.05rem; margin-bottom: 4px; color: var(--ogm-text); }
.ogm-connect-banner p { margin: 0 0 10px; color: var(--ogm-text-muted); font-size: .92rem; }
.ogm-connect-banner--warn { border-left: 4px solid #d68900; background: rgba(214,137,0,.08); }
.ogm-connect-banner--ok   { border-left: 4px solid var(--ogm-accent); background: rgba(var(--ogm-accent-rgb),.08); }

/* ── Dashboard Overview: stat tiles + quick-action cards ─────────────── */
.ogm-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0 8px;
}
@media (max-width: 900px) { .ogm-overview-grid { grid-template-columns: repeat(2, 1fr); } }
.ogm-overview-stat {
    display: block;
    padding: 14px 16px;
    background: var(--ogm-bg-elev);
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius-lg);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.ogm-overview-stat:hover { border-color: var(--ogm-accent); transform: translateY(-1px); box-shadow: var(--ogm-shadow); }
.ogm-overview-stat__num   { display: block; font-size: 1.8rem; font-weight: 700; color: var(--ogm-text); line-height: 1; }
.ogm-overview-stat__num--alert { color: var(--ogm-accent); }
.ogm-overview-stat__label { display: block; margin-top: 6px; font-size: .82rem; color: var(--ogm-text-muted); }

.ogm-overview-actions {
    display: grid;
    /* 6 blocks (RE, Marketplace, Bookings, Services, Jobs, Classifieds) on ONE row on desktop */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}
@media (max-width: 1200px) { .ogm-overview-actions { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .ogm-overview-actions { grid-template-columns: repeat(2, 1fr); } }
.ogm-overview-action {
    display: flex; flex-direction: column; gap: 4px;
    padding: 16px;
    background: var(--ogm-bg-elev);
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius-lg);
    text-decoration: none; color: inherit;
    transition: border-color .15s, transform .15s, box-shadow .15s, background .15s;
}
.ogm-overview-action:hover { border-color: var(--ogm-accent); transform: translateY(-1px); box-shadow: var(--ogm-shadow); }
.ogm-overview-action__ico   { font-size: 2.2rem; line-height: 1; margin-bottom: 4px; }
.ogm-overview-action__title { font-weight: 700; color: var(--ogm-text); }
.ogm-overview-action__desc  { font-size: .82rem; color: var(--ogm-text-muted); }
.ogm-overview-action--upsell { border-style: dashed; }
.ogm-overview-action--upsell:hover { background: rgba(var(--ogm-accent-rgb),.06); }

.ogm-overview-subs {
    list-style: none; padding: 0; margin: 8px 0 0;
}
.ogm-overview-subs li {
    padding: 8px 12px;
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius);
    background: var(--ogm-bg-elev);
    margin-bottom: 6px;
    font-size: .92rem;
}

/* ── Billing tab ─────────────────────────────────────────────────────── */
.ogm-billing-empty {
    padding: 18px 20px;
    background: var(--ogm-bg-elev);
    border: 1px dashed var(--ogm-border);
    border-radius: var(--ogm-radius-lg);
    margin-top: 14px;
}
.ogm-billing-list { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 10px; }
.ogm-billing-item {
    padding: 14px 16px;
    background: var(--ogm-bg-elev);
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius-lg);
}
.ogm-billing-item__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ogm-billing-item__title { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.ogm-billing-item__plan  { font-weight: 700; font-size: 1.05rem; color: var(--ogm-text); }
.ogm-billing-item__price { color: var(--ogm-text-muted); font-size: .92rem; }
.ogm-billing-item__status {
    font-size: .75rem; font-weight: 700; text-transform: uppercase;
    padding: 3px 10px; border-radius: 999px;
    background: var(--ogm-bg-soft); color: var(--ogm-text-muted);
}
.ogm-billing-item__status--active   { background: rgba(var(--ogm-accent-rgb),.12);  color: #1d5a23; }
.ogm-billing-item__status--past_due { background: rgba(200,80,0,.12);   color: #a04300; }
.ogm-billing-item__status--canceled { background: rgba(160,40,40,.12);  color: #7a2222; }
.ogm-billing-item__meta {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 6px 18px; margin: 10px 0; padding: 0;
    font-size: .88rem;
}
.ogm-billing-item__meta div { display: flex; flex-direction: column; }
.ogm-billing-item__meta dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ogm-text-muted); margin: 0; }
.ogm-billing-item__meta dd { margin: 2px 0 0; color: var(--ogm-text); }

/* ── Leads / Quote Requests cards (RE + Services dashboards) ────────── */
.ogm-lead-list { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 12px; }
.ogm-lead {
    padding: 16px 18px;
    background: var(--ogm-bg-elev);
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius-lg);
}
.ogm-lead__head {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    flex-wrap: wrap; margin-bottom: 8px;
}
.ogm-lead__who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ogm-lead__name { font-size: 1.05rem; color: var(--ogm-text); }
.ogm-lead__pill {
    font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
    padding: 2px 8px; border-radius: 999px;
    background: var(--ogm-bg-soft); color: var(--ogm-text-muted);
}
.ogm-lead__pill--new { background: rgba(var(--ogm-accent-rgb),.15); color: #1d5a23; }
.ogm-lead__when { font-size: .82rem; color: var(--ogm-text-muted); }
.ogm-lead__contact {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px 18px; margin: 0 0 10px; padding: 0;
    font-size: .9rem;
}
.ogm-lead__contact div { display: flex; flex-direction: column; }
.ogm-lead__contact dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ogm-text-muted); margin: 0; }
.ogm-lead__contact dd { margin: 2px 0 0; color: var(--ogm-text); word-break: break-word; }
.ogm-lead__contact a { color: var(--ogm-accent); text-decoration: none; }
.ogm-lead__contact a:hover { text-decoration: underline; }
.ogm-lead__msg {
    margin: 6px 0 12px; padding: 10px 14px;
    background: var(--ogm-bg); border-left: 3px solid var(--ogm-accent);
    border-radius: 4px;
    font-style: normal; color: var(--ogm-text); line-height: 1.5;
}
.ogm-lead__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Homepage: hero + pillars + sell-with-us banner ─────────────────── */
.ogm-home-hero {
    margin: 0 calc(50% - 50vw) 36px;
    padding: 60px 24px 56px;
    text-align: center;
    background:
        radial-gradient(ellipse at top, rgba(var(--ogm-accent-rgb),.12) 0%, rgba(var(--ogm-accent-rgb),0) 65%),
        linear-gradient(180deg, var(--ogm-bg-elev) 0%, var(--ogm-bg) 100%);
    border-bottom: 1px solid var(--ogm-border);
}
.ogm-home-hero__inner { max-width: 760px; margin: 0 auto; padding: 0 16px; }
.ogm-home-hero__title { font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.15; margin: 0 0 14px; color: var(--ogm-text); }
.ogm-home-hero__tm    { font-size: 0.38em; font-weight: 600; vertical-align: super; margin-left: 0.08em; color: var(--ogm-text-muted); }
.ogm-home-hero__lede  { font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--ogm-text-muted); margin: 0 auto 24px; max-width: 620px; }
.ogm-home-hero__ctas  {
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
    max-width: 880px; margin: 0 auto;
}
.ogm-home-hero__ctas .ogm-btn {
    flex: 1 1 200px;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
    padding: 12px 18px;
}
@media (max-width: 720px) {
    .ogm-home-hero__ctas .ogm-btn { flex: 1 1 100%; }
}
.ogm-home-hero__stats {
    list-style: none; padding: 0; margin: 36px 0 0;
    display: flex; justify-content: center; gap: clamp(20px, 5vw, 56px); flex-wrap: wrap;
}
.ogm-home-hero__stats li { display: flex; flex-direction: column; align-items: center; }
.ogm-home-hero__stats strong { font-size: 1.7rem; font-weight: 800; color: var(--ogm-accent); line-height: 1; }
.ogm-home-hero__stats span   { font-size: .82rem; color: var(--ogm-text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .04em; }

.ogm-home-pillars {
    display: grid;
    /* Auto-fit so dropping a card (e.g. Groups) doesn't leave an empty slot.
       Cards stretch to fill the row, drop to fewer columns on smaller widths. */
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin: 0 0 28px;
}
@media (max-width: 1100px) { .ogm-home-pillars { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .ogm-home-pillars { grid-template-columns: repeat(2, 1fr); } }
.ogm-home-pillar {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
    padding: 22px 16px;
    background: var(--ogm-bg-elev);
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius-lg);
    text-decoration: none !important; color: inherit;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.ogm-home-pillar:hover,
.ogm-home-pillar:focus,
.ogm-home-pillar:active { text-decoration: none !important; transform: translateY(-2px); border-color: var(--ogm-accent); box-shadow: var(--ogm-shadow); }
.ogm-home-pillar h3,
.ogm-home-pillar p,
.ogm-home-pillar:hover h3,
.ogm-home-pillar:hover p { text-decoration: none !important; }
.ogm-home-pillar__ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 68px; height: 68px;
    border-radius: 16px;
    margin-bottom: 8px;
    background: var(--ogm-bg-soft);
    color: var(--ogm-text);
    font-size: 2.4rem;       /* big emoji size for bell, briefcase, etc. */
    line-height: 1;
}
.ogm-home-pillar__ico .ogm-ico { width: 36px; height: 36px; display: block; }
/* Hotel-bell emoji 🛎 renders smaller than other emojis in Segoe/Apple emoji
   fonts. Doubled globally so the bell visually matches (or beats) the
   house / cart / wrench / briefcase / clipboard icons. */
.ogm-home-pillar__ico--bell       {
    font-size: 4.8rem;
    /* The 🛎 emoji has a built-in baseline offset that pushes it down-left in
       Segoe/Apple emoji fonts. These rules force it back to center inside the
       purple-soft square. */
    line-height: 1;
    text-align: center;
    padding: 0;
    text-indent: 0;
    overflow: hidden;
}
.ogm-home-pillar__ico--bell::before {
    content: '🛎';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 2.2rem;          /* tune to match other icons visually */
    line-height: 1;
    transform: translateY(-2px); /* nudge up — emoji descent compensation */
}
.ogm-home-pillar__ico--bell {
    font-size: 0;                /* hide the raw text node; ::before paints it */
}
.ogm-nav-dd__ico--bell            { font-size: 2rem;   }   /* was 1.65 */
.ogm-overview-action__ico--bell   { font-size: 4.4rem; }   /* NEW — base 2.2 */
.ogm-bell-emoji                   { font-size: 2em; line-height: 1; vertical-align: -.35em; display: inline-block; }   /* was 1.4em */
.ogm-megamenu__bell               { font-size: 2em; line-height: 1; vertical-align: -.35em; display: inline-block; }   /* was 1.1em (defined elsewhere) */
.ogm-home-pillar h3 { margin: 0; font-size: 1.05rem; }
.ogm-home-pillar p { margin: 0 0 12px; font-size: .88rem; color: var(--ogm-text-muted); line-height: 1.4; flex: 1 1 auto; }

/* CTA "button" at the bottom of each pillar card. It's a <span> because the
   entire pillar is already an <a>; this just gives a visible button affordance.
   Hovering the card brightens the button via the pillar:hover descendant. */
.ogm-home-pillar__cta {
    display: block;
    width: 100%;
    margin-top: auto;
    padding: 9px 14px;
    border-radius: var(--ogm-radius);
    color: #fff;
    font-weight: 700;
    font-size: .88rem;
    text-align: center;
    transition: filter .15s, transform .08s;
}
.ogm-home-pillar:hover .ogm-home-pillar__cta { filter: brightness(1.08); }
.ogm-home-pillar:active .ogm-home-pillar__cta { transform: translateY(1px); }

.ogm-home-pillar__cta--re  { background: var(--ogm-color-re-accent); }
.ogm-home-pillar__cta--mkt { background: var(--ogm-color-mkt-accent); }
.ogm-home-pillar__cta--bkg { background: var(--ogm-color-bkg-accent); }
.ogm-home-pillar__cta--svc { background: var(--ogm-color-svc-accent); }
.ogm-home-pillar__cta--job { background: var(--ogm-color-job-accent); }
.ogm-home-pillar__cta--cls { background: var(--ogm-color-cls-accent); }
.ogm-home-pillar__cta--grp { background: var(--ogm-color-grp-accent); }
/* Per-pillar accent tint for the icon chip — clean color coding without shouting */
.ogm-home-pillar--re  .ogm-home-pillar__ico { background: var(--ogm-color-re-soft);  color: var(--ogm-color-re-accent);  }
.ogm-home-pillar--svc .ogm-home-pillar__ico { background: var(--ogm-color-svc-soft); color: var(--ogm-color-svc-accent); }
.ogm-home-pillar--mkt .ogm-home-pillar__ico { background: var(--ogm-color-mkt-soft); color: var(--ogm-color-mkt-accent); }
.ogm-home-pillar--cls .ogm-home-pillar__ico { background: var(--ogm-color-cls-soft); color: var(--ogm-color-cls-accent); }
.ogm-home-pillar--grp .ogm-home-pillar__ico { background: var(--ogm-color-grp-soft); color: var(--ogm-color-grp-accent); }
.ogm-home-pillar--bkg .ogm-home-pillar__ico { background: var(--ogm-color-bkg-soft); color: var(--ogm-color-bkg-accent); }
.ogm-home-pillar--job .ogm-home-pillar__ico { background: var(--ogm-color-job-soft); color: var(--ogm-color-job-accent); }

/* ── Generic inline icon (24×24 SVG inside .ogm-ico) ─────────────────── */
.ogm-ico { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.18em; line-height: 0; }
.ogm-btn .ogm-ico { margin-right: 6px; width: 1em; height: 1em; }
.ogm-nav-dd__pop a .ogm-ico,
.ogm-nav-dd__pop button .ogm-ico { width: 18px; height: 18px; vertical-align: middle; }

/* Real-estate split-pane header buttons — bigger, modern */
.ogm-re-split__hdrbtn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px;
    font-size: .95rem;
    border-radius: 999px;
    font-weight: 600;
}
.ogm-re-split__hdrbtn-row { display: inline-flex; align-items: center; gap: 8px; }
/* Respect HTML hidden — without this, both toggle states show at once because
   display:inline-flex above overrides the default display:none for [hidden]. */
.ogm-re-split__hdrbtn-row[hidden] { display: none !important; }
.ogm-re-split__hdrbtn .ogm-ico { width: 18px; height: 18px; }
.ogm-home-pillar h3   { margin: 4px 0 0; color: var(--ogm-text); font-size: 1.15rem; }
.ogm-home-pillar p    { margin: 0; color: var(--ogm-text-muted); font-size: .9rem; line-height: 1.45; }

.ogm-home-sell {
    margin: 48px calc(50% - 50vw) 0;
    padding: 48px 24px;
    background: linear-gradient(180deg, var(--ogm-bg) 0%, rgba(var(--ogm-accent-rgb),.06) 100%);
    border-top: 1px solid var(--ogm-border);
}
.ogm-home-sell__inner { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.ogm-home-sell__lede { text-align: center; margin-bottom: 28px; }
.ogm-home-sell__lede h2 { margin: 0 0 6px; font-size: clamp(1.4rem, 2.6vw, 2rem); }
.ogm-home-sell__lede p  { margin: 0; color: var(--ogm-text-muted); }
.ogm-home-sell__paths {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
@media (max-width: 900px) { .ogm-home-sell__paths { grid-template-columns: 1fr; } }
.ogm-home-sell__path {
    display: flex; flex-direction: column; gap: 8px;
    padding: 22px 20px;
    background: var(--ogm-bg-elev);
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius-lg);
    text-decoration: none; color: inherit;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.ogm-home-sell__path:hover { transform: translateY(-2px); border-color: var(--ogm-accent); box-shadow: var(--ogm-shadow); }
.ogm-home-sell__path h4 { margin: 0; font-size: 1.1rem; color: var(--ogm-text); }
.ogm-home-sell__path p  { margin: 0; color: var(--ogm-text-muted); font-size: .9rem; line-height: 1.45; }
.ogm-home-sell__cta     { margin-top: 6px; font-weight: 700; color: var(--ogm-accent); font-size: .92rem; }
.ogm-home-sell__free    { text-align: center; margin: 24px 0 0; color: var(--ogm-text-muted); font-size: .92rem; }
.ogm-home-sell__free a  { color: var(--ogm-accent); font-weight: 600; }

/* ── Real-estate split-pane layout (Zillow-style: map left, listings right) ──
   The whole layout is locked to viewport height. The PAGE doesn't scroll —
   the listings panel scrolls internally. Map stays put. Footer sits below
   the layout and is reachable by scrolling past it. */
.ogm-re-split {
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    display: flex; flex-direction: column;
    height: calc(100vh - 80px);   /* viewport minus the sitewide header strip */
    position: relative;
    overflow: hidden;             /* prevent any child from spilling past us */
}
.ogm-re-split__header {
    flex: none;
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 16px; padding: 12px 20px; flex-wrap: wrap;
    border-bottom: 1px solid var(--ogm-border);
    background: var(--ogm-bg-elev);
}
.ogm-re-split__header-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ogm-re-split__header-title h1 { margin: 0; font-size: 1.3rem; font-weight: 700; line-height: 1.2; }
.ogm-re-split .ogm-re-filterbar { flex: none; margin: 8px 20px 0; }

.ogm-re-split__body {
    flex: 1 1 auto;            /* take all remaining height */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-height: 0;             /* allow children to shrink below content size */
    overflow: hidden;
}
.ogm-re-split__map {
    position: relative;        /* NOT sticky — fixed in the grid row */
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border-right: 1px solid var(--ogm-border);
}
.ogm-re-split__map .ogm-map {
    width: 100%; height: 100%;
    margin: 0; border: 0; border-radius: 0;
}
.ogm-re-split__map .ogm-map-flash {
    position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
    background: rgba(20,28,22,.92); color: #fff;
    padding: 6px 14px; border-radius: 999px;
    font-size: .82rem; font-weight: 600;
    z-index: 410;
}
.ogm-re-split__list {
    height: 100%;
    min-height: 0;             /* critical: lets overflow-y actually trigger */
    overflow-y: auto;
    padding: 14px 18px 24px;
    background: var(--ogm-bg);
}

/* 2-column grid inside the right panel (Zillow style) when in grid mode. */
.ogm-listings--split { display: grid; gap: 14px; grid-auto-rows: max-content; align-content: start; }
.ogm-listings--split.ogm-listings--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* List mode: single column of horizontal cards. Image runs slightly smaller
   than the standalone marketplace list because the right column is narrower
   when the map is visible. */
.ogm-listings--split.ogm-listings--list { grid-template-columns: 1fr; }
.ogm-listings--split.ogm-listings--list .ogm-listing-row {
    grid-template-columns: 170px 1fr;
    align-items: stretch;
    min-height: 140px;
}
.ogm-listings--split.ogm-listings--list .ogm-listing-row__img {
    width: 170px;
    min-height: 140px;
    height: auto;
    align-self: stretch;     /* stretches to match the row content height — no white-space gap */
}
.ogm-listings--split.ogm-listings--list .ogm-listing-row__title { font-size: 1rem; }
.ogm-listings--split.ogm-listings--list .ogm-listing-row__price { font-size: 1.3rem; }
@media (max-width: 600px) {
    .ogm-listing-row__img { width: 100%; height: auto; aspect-ratio: 16/9; }
}
@media (max-width: 1280px) {
    .ogm-listings--split.ogm-listings--grid { grid-template-columns: 1fr; }
}

/* Desktop "Map only" toggle — hides the listings panel, map takes full width. */
.ogm-re-split.is-map-only .ogm-re-split__body { grid-template-columns: 1fr; }
.ogm-re-split.is-map-only .ogm-re-split__list { display: none; }

/* Grid/List view-toggle pill (sits next to the Sort dropdown). */
.ogm-view-toggle {
    display: inline-flex;
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius);
    overflow: hidden;
    background: var(--ogm-bg);
}
.ogm-view-toggle button {
    border: 0; background: transparent; cursor: pointer;
    padding: 6px 12px; font-size: 1rem; color: var(--ogm-text-muted);
}
.ogm-view-toggle button + button { border-left: 1px solid var(--ogm-border); }
.ogm-view-toggle button.is-active { background: var(--ogm-accent); color: #fff; }

.ogm-re-split__toggle { display: none; }  /* Mobile toggle removed by user request 2026-05-16. */

@media (max-width: 900px) {
    /* Mobile: natural single-document page flow. Map at top with fixed height,
       listings below. Page scrolls as one — map scrolls UP with the page.
       No view toggle, no fullscreen, no hovercard popups. */
    .ogm-re-split             { height: auto; overflow: visible; }
    .ogm-re-split__body       { grid-template-columns: 1fr; height: auto; overflow: visible; }
    .ogm-re-split__map        { height: 380px; min-height: 380px; border-right: 0; border-bottom: 1px solid var(--ogm-border); }
    .ogm-re-split__map .ogm-map { height: 100%; }
    .ogm-re-split__list       { display: block; height: auto; overflow: visible; padding: 14px; }
    .ogm-re-split.is-list-view .ogm-re-split__map  { display: block; }
    .ogm-re-split.is-list-view .ogm-re-split__list { display: block; }
    .ogm-listings--split.ogm-listings--grid { grid-template-columns: 1fr; }
}

/* ── OGM green map markers (Leaflet divIcon) ───────────────────────────── */
.ogm-marker { background: transparent !important; border: 0 !important; }
.ogm-marker__dot {
    display: block; width: 14px; height: 14px;
    background: #2f8a3a;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.45);
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.ogm-marker:hover .ogm-marker__dot,
.ogm-marker.ogm-marker--hot .ogm-marker__dot {
    background: #1d5a23;
    transform: scale(1.45);
    box-shadow: 0 0 0 6px rgba(var(--ogm-accent-rgb),.32), 0 1px 3px rgba(0,0,0,.5);
}
/* Section-specific marker colors — bookings = purple (matches the Bookings
   pillar accent). Same hover/hot states, just a different base hue. */
.ogm-marker.ogm-marker--bookings .ogm-marker__dot              { background: #9b6cb1; }
.ogm-marker.ogm-marker--bookings:hover .ogm-marker__dot,
.ogm-marker.ogm-marker--bookings.ogm-marker--hot .ogm-marker__dot {
    background: #6f4a87;
    box-shadow: 0 0 0 6px rgba(155, 108, 177, .35), 0 1px 3px rgba(0,0,0,.5);
}
/* Recolor marker cluster bubbles to OGM green. */
.marker-cluster-small div { background-color: rgba(var(--ogm-accent-rgb), .85) !important; color: #fff !important; }
.marker-cluster-small      { background-color: rgba(var(--ogm-accent-rgb), .35) !important; }
.marker-cluster-medium div { background-color: rgba(30, 100, 38, .9) !important; color: #fff !important; }
.marker-cluster-medium     { background-color: rgba(30, 100, 38, .35) !important; }
.marker-cluster-large div  { background-color: rgba(20, 80, 28, .95) !important; color: #fff !important; }
.marker-cluster-large      { background-color: rgba(20, 80, 28, .35) !important; }

/* ── Off Grid Mail (dashboard messages tab — rebranded to feel like an internal email inbox) ── */
.ogm-mail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 0 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--ogm-border);
    flex-wrap: wrap;
}
.ogm-mail-empty {
    background: var(--ogm-bg-elev);
    border: 1px dashed var(--ogm-border);
    border-radius: var(--ogm-radius-lg);
    padding: 40px 24px;
    text-align: center;
    color: var(--ogm-text-muted);
}
.ogm-mail-empty p:first-child { font-size: 1.3rem; margin: 0 0 8px; }
.ogm-mail-list {
    width: 100%;
    border-collapse: collapse;
    background: var(--ogm-bg-elev);
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius-lg);
    overflow: hidden;
}
.ogm-mail-list thead th {
    background: var(--ogm-bg-soft);
    text-align: left;
    padding: 10px 14px;
    font-size: .8rem;
    color: var(--ogm-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--ogm-border);
}
.ogm-mail-row td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--ogm-border);
    vertical-align: middle;
}
.ogm-mail-row:last-child td { border-bottom: none; }
.ogm-mail-row:hover         { background: var(--ogm-bg-soft); }
.ogm-mail-row.is-unread     { background: rgba(47, 122, 58, .04); }
.ogm-mail-row a             { color: var(--ogm-text); }
.ogm-mail-row a:hover       { color: var(--ogm-accent); text-decoration: none; }
.ogm-mail-unread {
    display: inline-block;
    background: var(--ogm-accent);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 999px;
    margin-left: 6px;
}

/* ── Share icon button (universal) ────────────────────────────────────
   Used on listing tiles next to the Contact button, and in the
   sidebar/listed-by blocks via the .ogm-btn variant. */
.ogm-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    padding: 0;
    border: 1px solid var(--ogm-border);
    border-radius: 50%;
    background: #fff;
    color: var(--ogm-text);
    cursor: pointer;
    flex: none;
    transition: background .12s, color .12s, border-color .12s;
}
.ogm-icon-btn:hover { background: var(--ogm-bg-soft); color: var(--ogm-accent); border-color: var(--ogm-accent); }
.ogm-icon-btn svg { width: 16px; height: 16px; fill: currentColor; }
.ogm-listing-card__share { margin-right: 4px; }

/* Secondary actions row (Save + Share) under primary CTA. */
.ogm-contact-cta__secondary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
}
.ogm-contact-cta__secondary .ogm-btn { padding: 10px 12px; font-size: .92rem; }

/* Acreage suffix next to RE detail price — bold, matches price weight. */
.ogm-re-detail__price-acreage {
    color: var(--ogm-accent);
    font-weight: 800;
    margin-left: 4px;
}

/* Contact modal — seller identity strip at the top of the form so the
   buyer knows exactly who they're about to message. */
.ogm-contact-form__seller {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    background: var(--ogm-bg-soft);
    border-radius: 10px;
    margin-bottom: 12px;
}
/* MUST override the .ogm-contact-form__seller display:flex above —
   class selectors beat the [hidden] attribute, so without this the bar
   shows as an empty gray strip when JS sets hidden=true. */
.ogm-contact-form__seller[hidden] { display: none; }
.ogm-contact-form__listing[hidden] { display: none; }
.ogm-contact-form__seller-link {
    display: flex; align-items: center; gap: 12px;
    text-decoration: none; color: var(--ogm-text);
    width: 100%;
}
.ogm-contact-form__seller-link:hover { color: var(--ogm-accent); }
.ogm-contact-form__seller-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    font-size: 16px;
}
.ogm-contact-form__seller-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ogm-contact-form__seller-kicker { font-size: .78rem; }
.ogm-contact-form__seller-name {
    font-size: 1.02rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Search results page ──────────────────────────────────────────────── */
.ogm-search { max-width: var(--ogm-maxw); margin: 0 auto; padding: 0 16px 60px; }
.ogm-search__head { padding: 24px 0 12px; }
.ogm-search__head h1 { margin: 0; font-size: clamp(1.5rem, 2.5vw, 2rem); }
.ogm-search__q { color: var(--ogm-accent); }

.ogm-search__tabs {
    position: sticky; top: 0; z-index: 50;
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 12px 0;
    margin: 8px 0 24px;
    background: var(--ogm-bg);
    border-bottom: 1px solid var(--ogm-border);
}
.ogm-search__tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--ogm-border);
    background: var(--ogm-bg-elev);
    color: var(--ogm-text);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.ogm-search__tab .ogm-ico { width: 16px; height: 16px; }
.ogm-search__tab:hover { border-color: var(--ogm-accent); color: var(--ogm-accent); }
.ogm-search__tab.is-active {
    background: var(--ogm-accent); color: #fff; border-color: var(--ogm-accent);
}
.ogm-search__tab-count {
    background: rgba(0,0,0,.08); color: inherit;
    padding: 1px 8px; border-radius: 999px;
    font-size: .75rem; font-weight: 700;
    margin-left: 2px;
}
.ogm-search__tab.is-active .ogm-search__tab-count { background: rgba(255,255,255,.22); }

.ogm-search-section { margin-bottom: 40px; }
.ogm-search-section__head {
    display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
    gap: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ogm-border);
    margin-bottom: 16px;
}
.ogm-search-section__title {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 0; font-size: 1.25rem;
}
.ogm-search-section__title .ogm-ico { width: 22px; height: 22px; color: var(--ogm-accent); }
.ogm-search-section__count { font-weight: 400; font-size: .9rem; margin-left: 4px; }
.ogm-search-section__tools {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .9rem;
}
.ogm-search-section__tools select {
    padding: 7px 10px;
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius);
    background: var(--ogm-bg-elev);
    color: var(--ogm-text);
    font-size: .9rem;
    cursor: pointer;
}
.ogm-search-section__tools select:focus {
    outline: none;
    border-color: var(--ogm-accent);
    box-shadow: 0 0 0 3px rgba(var(--ogm-accent-rgb), .15);
}

.ogm-search-loadmore {
    display: flex; justify-content: center;
    padding: 20px 0 8px;
}
.ogm-search-loadmore .ogm-btn { padding: 10px 24px; font-weight: 600; }
.ogm-search-sentinel { display: block; width: 1px; height: 1px; position: relative; top: -200px; }

/* ── Universal pagination + per-page selector ────────────────────────── */
.ogm-pager {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 14px; margin: 24px 0 8px;
    padding-top: 16px;
    border-top: 1px solid var(--ogm-border);
    font-size: .9rem;
}
.ogm-pager__info { color: var(--ogm-text-muted); }
.ogm-pager__pages { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; flex-wrap: wrap; }
.ogm-pager__btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px;
    padding: 0 10px;
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius);
    background: var(--ogm-bg-elev);
    color: var(--ogm-text);
    font-weight: 600; font-size: .85rem;
    text-decoration: none;
    transition: border-color .12s, background .12s, color .12s;
}
.ogm-pager__btn:hover { border-color: var(--ogm-accent); color: var(--ogm-accent); }
.ogm-pager__btn.is-active {
    background: var(--ogm-accent); color: #fff; border-color: var(--ogm-accent);
    cursor: default;
}
.ogm-pager__gap { color: var(--ogm-text-muted); padding: 0 4px; align-self: center; }
.ogm-pager__per { display: inline-flex; align-items: center; gap: 8px; }
.ogm-pager__per select {
    padding: 6px 10px;
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius);
    background: var(--ogm-bg-elev);
    color: var(--ogm-text);
    font-size: .85rem;
    cursor: pointer;
}
.ogm-pager__per select:focus { outline: none; border-color: var(--ogm-accent); box-shadow: 0 0 0 3px rgba(var(--ogm-accent-rgb),.18); }

/* ──────────────────────────────────────────────────────────────────────
   Unified browse toolbar (sticky bar above grid/list listings)
   Categories dropdown + filter chips + sort + view-toggle, full width.
   ────────────────────────────────────────────────────────────────────── */
.ogm-browse-toolbar {
    position: sticky;
    top: 0;                            /* locks to the very top once scrolled past — site nav scrolls away naturally above */
    z-index: 40;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin: 0 0 16px;
    background: var(--ogm-bg-elev);
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius);
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.ogm-browse-toolbar__spacer { flex: 1 1 0; }
.ogm-browse-toolbar__count  { font-size: .85rem; color: var(--ogm-text-muted); padding: 0 6px; }

/* Results-count — leftmost element INSIDE the sticky toolbar */
.ogm-browse-count {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin: 0 12px 0 4px;
    padding-right: 14px;
    border-right: 1px solid var(--ogm-border);
    white-space: nowrap;
}
.ogm-browse-count__num {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--ogm-accent);
    line-height: 1;
}
.ogm-browse-count__label {
    font-size: .95rem;
    font-weight: 600;
    color: var(--ogm-text);
}
@media (max-width: 720px) {
    .ogm-browse-count { margin: 0 8px 0 4px; padding-right: 10px; }
    .ogm-browse-count__num   { font-size: 1.2rem; }
    .ogm-browse-count__label { font-size: .85rem; }
}
.ogm-browse-toolbar__sort   { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; }
.ogm-browse-toolbar__sort select {
    padding: 6px 10px;
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius);
    background: var(--ogm-bg);
    color: var(--ogm-text);
    cursor: pointer;
}
.ogm-browse-toolbar__reset {
    font-size: .8rem;
    color: var(--ogm-text-muted);
    text-decoration: underline;
    margin-left: 4px;
}
.ogm-browse-toolbar__reset:hover { color: var(--ogm-accent); }

/* ─ Filter chip (details/summary popovers) ─ */
.ogm-toolbar-chip {
    position: relative;
    margin: 0;
}
.ogm-toolbar-chip > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: var(--ogm-bg);
    color: var(--ogm-text);
    border: 1px solid var(--ogm-border);
    border-radius: 999px;
    font-size: .87rem;
    font-weight: 600;
    user-select: none;
    transition: border-color .15s, background .15s;
}
.ogm-toolbar-chip > summary::-webkit-details-marker { display: none; }
.ogm-toolbar-chip > summary:hover { border-color: var(--ogm-accent); }
.ogm-toolbar-chip[open] > summary { border-color: var(--ogm-accent); background: rgba(var(--ogm-accent-rgb), .08); }
.ogm-toolbar-chip__caret { font-size: .7em; opacity: .6; }
.ogm-toolbar-chip__ico   { font-size: .9em; opacity: .8; }
.ogm-toolbar-chip__label { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ogm-toolbar-chip--toggle { display: inline-flex; align-items: center; }
.ogm-toolbar-chip--toggle input { display: none; }
.ogm-toolbar-chip--toggle > span {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    background: var(--ogm-bg);
    color: var(--ogm-text);
    border: 1px solid var(--ogm-border);
    border-radius: 999px;
    font-size: .87rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.ogm-toolbar-chip--toggle > span:hover { border-color: var(--ogm-accent); }
.ogm-toolbar-chip--toggle input:checked + span {
    background: var(--ogm-accent);
    border-color: var(--ogm-accent);
    color: #fff;
}

/* ─ Chip popover ─ */
.ogm-toolbar-chip__pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 240px;
    padding: 12px;
    background: var(--ogm-bg-elev);
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius);
    box-shadow: 0 8px 28px rgba(0,0,0,.18);
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ogm-toolbar-chip__pop label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .87rem;
    color: var(--ogm-text);
}
.ogm-toolbar-chip__pop input[type="text"],
.ogm-toolbar-chip__pop input[type="number"],
.ogm-toolbar-chip__pop input[type="search"],
.ogm-toolbar-chip__pop select {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--ogm-border);
    border-radius: 6px;
    background: var(--ogm-bg);
    color: var(--ogm-text);
    font-size: .9rem;
    min-width: 0;
}
.ogm-toolbar-chip__check { font-size: .87rem; cursor: pointer; }
.ogm-toolbar-chip__check input { width: 16px; height: 16px; }

/* ─ Categories megamenu (marketplace, services, classifieds, bookings…) ─
   Hard-capped width so it can NEVER overflow the viewport, tight columns
   so many categories fit in a compact area. Density > white space. */
.ogm-toolbar-chip__pop--mega {
    width: min(820px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
    gap: 2px 8px;
    max-height: min(520px, calc(100vh - 180px));
    overflow: auto;
    padding: 10px 12px;
}
/* When triggered near the right edge of the viewport the absolute-positioned
   pop would clip; shift via right: 0 fallback when there's not enough room. */
@media (min-width: 1024px) {
    .ogm-toolbar-chip__pop--mega { width: min(900px, calc(100vw - 24px)); }
}
@media (max-width: 720px) {
    .ogm-toolbar-chip__pop--mega { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
    .ogm-toolbar-chip__pop--mega { grid-template-columns: 1fr; max-height: 65vh; }
}
.ogm-toolbar-cat__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    border-radius: 5px;
    color: var(--ogm-text);
    text-decoration: none;
    font-size: .82rem;
    line-height: 1.2;
    min-height: 22px;
}
.ogm-toolbar-cat__item span:last-child {
    color: var(--ogm-text-muted);
    font-size: .72rem;
    padding-left: 6px;
}
.ogm-toolbar-cat__item:hover { background: var(--ogm-bg-soft); color: var(--ogm-accent); }
.ogm-toolbar-cat__item.is-active { background: rgba(var(--ogm-accent-rgb), .12); color: var(--ogm-accent); font-weight: 700; }

/* ─ Full-width browse content (no sidebar) ─ */
.ogm-browse-full {
    display: block;
    width: 100%;
}

/* Make sticky toolbar fall back to non-sticky on narrow screens (less screen real estate to spare) */
@media (max-width: 720px) {
    .ogm-browse-toolbar { position: static; padding: 8px; gap: 6px; }
    .ogm-toolbar-chip > summary { padding: 6px 10px; font-size: .82rem; }
    .ogm-toolbar-chip__pop { left: 0; right: auto; min-width: 220px; }
    .ogm-toolbar-chip__pop--mega { min-width: 92vw; grid-template-columns: 1fr 1fr; }
    .ogm-browse-toolbar__count { display: none; }
    .ogm-browse-toolbar__spacer { flex-basis: 100%; height: 0; }
}


/* ─────────────────────────────────────────────────────────────────────
   Ad slot rendering (native ads via @adslot Blade directive)
   ───────────────────────────────────────────────────────────────────── */
.ogm-adslot {
    display: block;
    background: var(--ogm-bg-elev);
    border: 1px solid var(--ogm-border);
    border-radius: 10px;
    overflow: hidden;
    margin: 16px 0;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.ogm-adslot__link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.ogm-adslot__link:hover { text-decoration: none; }
.ogm-adslot__img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}
.ogm-adslot__body { padding: 12px 14px; }
.ogm-adslot__sponsor {
    font-size: .7rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ogm-text-muted);
    letter-spacing: .04em;
    margin-bottom: 4px;
}
.ogm-adslot__title  { font-size: .95rem; font-weight: 700; color: var(--ogm-text); margin: 0 0 4px; }
.ogm-adslot__desc   { font-size: .85rem; color: var(--ogm-text-muted); line-height: 1.4; }
.ogm-adslot__cta    { font-size: .82rem; color: var(--ogm-accent); font-weight: 700; margin-top: 8px; }

/* ───────────────────────────────────────────────────────────────────
   Bookings — Airbnb-style pill search bar
   Single rounded pill split into Where · Check-in · Check-out · Who · Search
   ─────────────────────────────────────────────────────────────────── */
.ogm-bk-search {
    display: flex;
    align-items: stretch;
    max-width: 920px;
    margin: 18px auto 28px;
    background: var(--ogm-bg-elev);
    border: 1px solid var(--ogm-border);
    border-radius: 999px;
    box-shadow: 0 4px 18px rgba(0,0,0,.08);
    overflow: visible;
    position: relative;
}
.ogm-bk-search__cell {
    flex: 1 1 0;
    padding: 0;
    position: relative;
    border-right: 1px solid var(--ogm-border);
}
.ogm-bk-search__cell:first-child > summary { border-radius: 999px 0 0 999px; }
.ogm-bk-search__cell:last-of-type { border-right: 0; }
.ogm-bk-search__cell > summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 22px;
    user-select: none;
    transition: background .15s;
    border-radius: 999px;
    display: block;
}
.ogm-bk-search__cell > summary::-webkit-details-marker { display: none; }
.ogm-bk-search__cell > summary:hover  { background: var(--ogm-bg-soft); }
.ogm-bk-search__cell[open] > summary  { background: var(--ogm-bg-soft); box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.ogm-bk-search__label {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    color: var(--ogm-text);
    letter-spacing: 0;
    margin-bottom: 2px;
}
.ogm-bk-search__value {
    display: block;
    font-size: .95rem;
    color: var(--ogm-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ogm-bk-search__pop {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 320px;
    max-width: 480px;
    padding: 18px;
    background: var(--ogm-bg-elev);
    border: 1px solid var(--ogm-border);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0,0,0,.18);
    z-index: 60;
}
.ogm-bk-search__pop input[type="text"],
.ogm-bk-search__pop input[type="date"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ogm-border);
    border-radius: 8px;
    background: var(--ogm-bg);
    color: var(--ogm-text);
    font-size: 1rem;
}
.ogm-bk-search__pop input:focus {
    outline: none;
    border-color: var(--ogm-accent);
    box-shadow: 0 0 0 3px rgba(var(--ogm-accent-rgb), .18);
}
/* WHEN popover — wider to fit the 2-month side-by-side calendar */
.ogm-bk-search__pop--when { min-width: 640px; max-width: 720px; padding: 22px 22px 16px; }

/* Calendar header (title + nav arrows) */
.ogm-bk-cal__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.ogm-bk-cal__head strong { font-size: 1rem; }
.ogm-bk-cal__nav { display: flex; gap: 8px; }
.ogm-bk-cal__nav button {
    width: 36px; height: 36px;
    border: 1px solid var(--ogm-border);
    background: var(--ogm-bg);
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem; line-height: 1;
    color: var(--ogm-text);
    display: inline-flex; align-items: center; justify-content: center;
    transition: border-color .15s, color .15s;
}
.ogm-bk-cal__nav button:hover { border-color: var(--ogm-accent); color: var(--ogm-accent); }

/* 2-month side-by-side */
.ogm-bk-cal__months {
    display: grid; gap: 28px; grid-template-columns: 1fr 1fr;
}
.ogm-bk-cal__month-title {
    text-align: center; font-weight: 700; margin-bottom: 8px; font-size: 1rem;
}
.ogm-bk-cal__grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.ogm-bk-cal__dow {
    text-align: center; font-size: .72rem; color: var(--ogm-text-muted);
    font-weight: 700; padding: 6px 0;
}
.ogm-bk-cal__day {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: .92rem; cursor: pointer; user-select: none;
    background: transparent; border: 0; color: var(--ogm-text);
    font: inherit; padding: 0;
    transition: background .12s, color .12s;
}
.ogm-bk-cal__day:hover:not(:disabled):not(.is-blocked) { background: var(--ogm-bg-soft); }
.ogm-bk-cal__day:disabled,
.ogm-bk-cal__day.is-past    { color: var(--ogm-text-muted); opacity: .35; cursor: default; }
.ogm-bk-cal__day.is-blocked { color: var(--ogm-text-muted); text-decoration: line-through; cursor: not-allowed; opacity: .5; }
.ogm-bk-cal__day.is-hover    { background: rgba(var(--ogm-accent-rgb), .14); border-radius: 0; }
.ogm-bk-cal__day.is-in-range { background: rgba(var(--ogm-accent-rgb), .18); border-radius: 0; }
.ogm-bk-cal__day.is-start, .ogm-bk-cal__day.is-end {
    background: var(--ogm-accent); color: #fff; border-radius: 50%; font-weight: 700;
}
.ogm-bk-cal__hint   { margin: 14px 0 0; font-size: .85rem; }
.ogm-bk-cal__footer {
    margin-top: 12px; display: flex; justify-content: space-between; align-items: center;
}

@media (max-width: 720px) {
    .ogm-bk-search__pop--when { min-width: 0; max-width: none; }
    .ogm-bk-cal__months       { grid-template-columns: 1fr; gap: 18px; }
}
.ogm-bk-search__guests {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.ogm-bk-search__counter {
    display: inline-flex; align-items: center; gap: 14px;
}
.ogm-bk-search__counter button {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--ogm-border);
    background: var(--ogm-bg);
    color: var(--ogm-text);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.ogm-bk-search__counter button:hover { border-color: var(--ogm-accent); color: var(--ogm-accent); }
.ogm-bk-search__counter span {
    min-width: 24px; text-align: center; font-weight: 700; font-size: 1.05rem;
}
.ogm-bk-search__submit {
    margin: 6px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: var(--ogm-accent);
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    transition: filter .15s;
    flex: 0 0 auto;
}
.ogm-bk-search__submit:hover { filter: brightness(1.08); }

/* Mobile: stack vertically, drop the pill shape */
@media (max-width: 720px) {
    .ogm-bk-search {
        flex-direction: column;
        border-radius: 16px;
        padding: 6px;
    }
    .ogm-bk-search__cell {
        border-right: 0;
        border-bottom: 1px solid var(--ogm-border);
    }
    .ogm-bk-search__cell:last-of-type { border-bottom: 0; }
    .ogm-bk-search__cell > summary { border-radius: 8px !important; }
    .ogm-bk-search__pop { position: static; min-width: 0; box-shadow: none; border: 0; padding: 8px 14px 14px; }
    .ogm-bk-search__submit { width: calc(100% - 12px); justify-content: center; padding: 12px; margin: 6px; }
}