/*
 * Seller flow (welcome, post-ad wizard, submitted, My Listings).
 * Everything is scoped under .sg so the site header, footer and the rest of
 * the Bootstrap pages are untouched. Mobile layout < 768px, desktop >= 768px.
 */
.sg {
    --sg-text: #12161C;
    --sg-text-2: #3A424D;
    --sg-muted: #5B6470;
    --sg-border: #E3E7EC;
    --sg-border-strong: #D5DBE2;
    --sg-bg: #F4F6F8;
    --sg-green: #157A2C;
    --sg-green-hover: #11662A;
    --sg-blue: #0070C0;
    --sg-blue-hover: #005A9C;
    --sg-blue-link: #0062A8;
    --sg-blue-light: #E6F1FA;
    --sg-blue-ink: #123A5C;
    --sg-green-light: #E8F7EC;
    --sg-review-ink: #92400E;
    --sg-review-bg: #FEF3C7;
    --sg-danger: #B42318;
    --sg-danger-bg: #FEF3F2;
    --sg-photo-bg: #D9E1E8;
    --sg-radius: 10px;
    --sg-radius-lg: 16px;

    background: var(--sg-bg);
    color: var(--sg-text);
    font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
.sg *, .sg *::before, .sg *::after { box-sizing: border-box; }
/* Clear the site's fixed header (height measured in sell/partials/assets). */
.sg.sg-offset { margin-top: var(--sg-header-h, 78px); }
.sg h1, .sg h2, .sg h3, .sg p, .sg ol, .sg ul, .sg figure, .sg fieldset { margin: 0; }
.sg h1, .sg h2, .sg h3 { font-family: inherit; color: var(--sg-text); letter-spacing: 0; text-transform: none; }
.sg ol, .sg ul { padding: 0; list-style: none; }
.sg fieldset { border: 0; padding: 0; min-width: 0; }
.sg legend { float: none; width: auto; padding: 0; margin: 0; font-size: inherit; }
.sg label { margin: 0; font-weight: inherit; }
.sg a { color: var(--sg-blue-link); text-decoration: underline; text-underline-offset: 2px; }
.sg a:hover { color: var(--sg-blue-hover); }
.sg button { font-family: inherit; cursor: pointer; }
.sg img { max-width: 100%; display: block; }
.sg [hidden] { display: none !important; }
.sg .sg-sr {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Focus: always visible for keyboard users */
.sg a:focus-visible, .sg button:focus-visible, .sg input:focus-visible,
.sg select:focus-visible, .sg textarea:focus-visible, .sg [tabindex]:focus-visible {
    outline: 3px solid var(--sg-blue);
    outline-offset: 2px;
}
.sg .sg-choice input:focus-visible + span { outline: 3px solid var(--sg-blue); outline-offset: 2px; }

/* Icons (stroke icons from the designs) */
.sg .i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sg .i-sm { width: 16px; height: 16px; }
.sg .i-lg { width: 26px; height: 26px; }

/* ---------- Buttons ---------- */
.sg .sg-btn, .sg .sg-btn2, .sg .sg-btn-blue, .sg .sg-btn-link {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 24px; border-radius: var(--sg-radius);
    font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
    border: 1.5px solid transparent; transition: background-color .15s, border-color .15s;
}
.sg .sg-btn { background: var(--sg-green); color: #fff; }
.sg .sg-btn:hover { background: var(--sg-green-hover); color: #fff; }
.sg .sg-btn[disabled], .sg .sg-btn[aria-disabled="true"] { background: #8DB79A; cursor: not-allowed; }
.sg .sg-btn2 { background: #fff; color: var(--sg-text); border-color: var(--sg-border-strong); }
.sg .sg-btn2:hover { color: var(--sg-text); border-color: var(--sg-text); }
.sg .sg-btn-blue { background: var(--sg-blue); color: #fff; }
.sg .sg-btn-blue:hover { background: var(--sg-blue-hover); color: #fff; }
.sg .sg-btn-link { background: transparent; color: var(--sg-blue-link); }
.sg .sg-btn-link:hover { color: var(--sg-blue-hover); text-decoration: underline; }
.sg .sg-btn-sm { min-height: 44px; padding: 0 16px; font-size: 14px; }
.sg .sg-btn-block { display: flex; width: 100%; }

/* ---------- Form controls ---------- */
.sg .sg-label { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 600; margin-bottom: 8px; color: var(--sg-text); }
.sg .sg-label .sg-opt, .sg .sg-count { font-weight: 400; color: var(--sg-muted); }
.sg .sg-input, .sg select.sg-input, .sg .sg-textarea {
    display: block; width: 100%; height: 50px; padding: 0 14px;
    border: 1.5px solid var(--sg-border-strong); border-radius: var(--sg-radius);
    background: #fff; color: var(--sg-text); font: inherit; font-size: 16px; box-shadow: none;
}
.sg select.sg-input { padding-right: 36px; appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235B6470' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; }
.sg .sg-textarea { height: 150px; padding: 12px 14px; line-height: 1.55; resize: vertical; }
.sg .sg-input:focus, .sg .sg-textarea:focus { border-color: var(--sg-blue); outline: none; box-shadow: 0 0 0 3px rgba(0, 112, 192, .18); }
.sg .sg-input[aria-invalid="true"], .sg .sg-textarea[aria-invalid="true"] { border-color: var(--sg-danger); }
.sg .sg-hint { font-size: 13px; color: var(--sg-muted); margin-top: 6px; }
.sg .sg-error { font-size: 13px; color: var(--sg-danger); margin-top: 6px; font-weight: 500; }
.sg .sg-error:empty { display: none; }
.sg .sg-field + .sg-field { margin-top: 0; }
.sg .sg-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }

/* Chips / segmented choices built on real radio + checkbox inputs */
.sg .sg-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.sg .sg-choice { position: relative; display: inline-flex; margin: 0; }
.sg .sg-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sg .sg-choice span {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
    border: 1.5px solid var(--sg-border-strong); border-radius: 22px; background: #fff;
    font-size: 14px; font-weight: 500; color: var(--sg-text); cursor: pointer; user-select: none;
}
.sg .sg-choice.sg-seg span { border-radius: var(--sg-radius); }
.sg .sg-choice input:checked + span { background: var(--sg-text); border-color: var(--sg-text); color: #fff; }
.sg .sg-choice span:hover { border-color: var(--sg-text); }
.sg .sg-chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px;
    border: 1.5px solid var(--sg-border-strong); border-radius: 22px; background: #fff;
    font-size: 14px; font-weight: 500; color: var(--sg-text);
}
.sg .sg-chip:hover { border-color: var(--sg-text); }
.sg .sg-chip[aria-pressed="true"] { background: var(--sg-text); border-color: var(--sg-text); color: #fff; }

.sg .sg-check {
    display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px;
    border: 1.5px solid var(--sg-border); border-radius: 12px; background: #fff;
    font-size: 14px; font-weight: 500; cursor: pointer;
}
.sg .sg-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--sg-green); flex: none; }
.sg .sg-check:has(input:checked) { border-color: var(--sg-green); background: #F3FBF5; }

.sg .sg-alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; font-size: 14px; line-height: 1.5; }
.sg .sg-alert-info { background: var(--sg-blue-light); color: var(--sg-blue-ink); }
.sg .sg-alert-success { background: var(--sg-green-light); color: #0E5A20; }
.sg .sg-alert-error { background: var(--sg-danger-bg); color: var(--sg-danger); }
.sg .sg-alert-review { background: var(--sg-review-bg); color: var(--sg-review-ink); }

.sg .sg-tag { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 10px; line-height: 1.4; }
.sg .sg-tag-green { color: var(--sg-green); background: var(--sg-green-light); }
.sg .sg-tag-review { color: var(--sg-review-ink); background: var(--sg-review-bg); }
.sg .sg-tag-live { color: #0E5A20; background: var(--sg-green-light); }
.sg .sg-tag-sold { color: #fff; background: var(--sg-text-2); }
.sg .sg-tag-draft { color: var(--sg-text-2); background: #EEF1F4; }
.sg .sg-tag-muted { color: var(--sg-text-2); background: #EEF1F4; }
.sg .sg-spec { font-size: 13px; background: var(--sg-bg); border-radius: 8px; padding: 4px 12px; color: var(--sg-text-2); }
.sg .sg-specs { display: flex; flex-wrap: wrap; gap: 6px; }

.sg .sg-card { background: #fff; border: 1px solid var(--sg-border); border-radius: var(--sg-radius-lg); }

/* ---------- Welcome ---------- */
.sg-welcome { padding: 28px 16px 40px; }
.sg-welcome .sg-wrap { max-width: 1280px; margin: 0 auto; }
.sg-welcome .sg-hello { color: var(--sg-green); font-weight: 600; font-size: 15px; }
.sg-welcome h1 { font-size: 28px; line-height: 1.2; font-weight: 700; margin: 8px 0; }
.sg-welcome .sg-lede { color: var(--sg-muted); font-size: 15px; line-height: 1.55; }
.sg-welcome .sg-head { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; justify-content: space-between; }
.sg-welcome .sg-head > div { flex: 1 1 420px; }
.sg-welcome .sg-how { flex: 0 1 460px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px; font-size: 13px; color: var(--sg-text-2); line-height: 1.35; }
.sg-welcome .sg-how li { display: flex; flex-direction: column; gap: 8px; }
.sg-welcome .sg-how b { width: 28px; height: 28px; border-radius: 50%; background: var(--sg-green); color: #fff; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.sg-welcome .sg-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 24px; }
.sg .sg-tile {
    display: flex; align-items: center; gap: 16px; min-height: 88px; padding: 16px 18px;
    background: #fff; border: 1px solid var(--sg-border); border-radius: var(--sg-radius-lg);
    text-decoration: none; color: var(--sg-text);
}
.sg .sg-tile:hover { color: var(--sg-text); border-color: var(--sg-blue); box-shadow: 0 6px 18px rgba(0, 112, 192, .12); }
.sg .sg-tile .sg-ic { width: 52px; height: 52px; border-radius: 14px; }
.sg .sg-tile-t { display: block; font-size: 16px; font-weight: 600; }
.sg .sg-tile-s { display: block; font-size: 13px; color: var(--sg-muted); margin-top: 2px; }
.sg .sg-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--sg-blue-light); color: var(--sg-blue); display: flex; align-items: center; justify-content: center; flex: none; }
.sg-welcome .sg-browse { text-align: center; font-size: 15px; color: var(--sg-text-2); margin-top: 32px; }

/* ---------- Wizard ---------- */
.sg-wizard { padding-bottom: 120px; }
.sg-wizard .sg-wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.sg-topbar { background: #fff; border-bottom: 1px solid var(--sg-border); }
.sg-topbar .sg-wrap { display: flex; align-items: center; gap: 12px; min-height: 60px; padding-top: 8px; padding-bottom: 8px; }
.sg-topbar .sg-title { font-weight: 600; font-size: 16px; white-space: nowrap; }
@media (max-width: 767.98px) {
    .sg-topbar .sg-wrap { gap: 8px; }
    .sg-topbar .sg-btn2.sg-btn-sm { padding: 0 12px; font-size: 13px; }
    .sg-saved { font-size: 12px; }
}
@media (max-width: 374.98px) {
    /* icon only on very small phones; text stays available to screen readers */
    .sg-saved span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
}
.sg-topbar .sg-back { width: 44px; height: 44px; margin-left: -10px; display: flex; align-items: center; justify-content: center; color: var(--sg-text); background: none; border: 0; border-radius: 8px; }
.sg-saved { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sg-green); white-space: nowrap; }
.sg-saved[data-state="saving"] { color: var(--sg-muted); }
.sg-saved[data-state="offline"] { color: var(--sg-review-ink); }
.sg-saved[data-state="error"] { color: var(--sg-danger); }

.sg-progress { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 12px 0 0; }
.sg .sg-progress li button { all: unset; display: block; width: 100%; cursor: pointer; border-radius: 6px; min-height: 24px; }
.sg .sg-progress li button:focus-visible { outline: 3px solid var(--sg-blue); outline-offset: 4px; }
.sg-progress li .sg-bar { display: block; height: 4px; border-radius: 2px; background: var(--sg-border); }
.sg-progress li.is-done .sg-bar, .sg-progress li.is-current .sg-bar { background: var(--sg-green); }
.sg-progress .sg-step-label { display: none; }
.sg-progress-text { display: flex; justify-content: space-between; font-size: 12px; color: var(--sg-muted); margin-top: 8px; }

.sg-layout { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; margin-top: 16px; }
.sg-main { flex: 999 1 560px; min-width: 0; }
.sg-panel { background: #fff; border: 1px solid var(--sg-border); border-radius: var(--sg-radius-lg); padding: 20px 16px; display: flex; flex-direction: column; gap: 22px; }
.sg-panel h1 { font-size: 22px; font-weight: 700; line-height: 1.25; }
.sg-panel .sg-sub { font-size: 15px; color: var(--sg-muted); margin-top: 6px; }
.sg-panel h1:focus { outline: none; }
.sg-aside { flex: 1 1 300px; max-width: 380px; display: none; flex-direction: column; gap: 16px; }
.sg-eyebrow { font-size: 12px; font-weight: 600; color: var(--sg-muted); letter-spacing: .06em; text-transform: uppercase; }

.sg-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    display: flex; gap: 12px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid var(--sg-border);
}
.sg-nav .sg-btn { flex: 1; }
.sg-nav .sg-btn2 { display: none; }

/* Step 1 - category */
.sg-search { position: relative; display: block; }
.sg-search .i { position: absolute; left: 16px; top: 15px; color: var(--sg-muted); }
.sg-search .sg-input { height: 52px; padding-left: 50px; border-radius: 12px; }
.sg-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sg .sg-cat {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 96px; padding: 14px;
    border: 1.5px solid var(--sg-border); border-radius: 14px; background: #fff;
    font-size: 14px; font-weight: 600; color: var(--sg-text); text-align: left;
}
.sg .sg-cat:hover { border-color: var(--sg-blue); }
.sg .sg-cat[aria-pressed="true"] { border: 2px solid var(--sg-green); background: #F3FBF5; }
.sg .sg-cat[aria-pressed="true"] .sg-ic { background: var(--sg-green); color: #fff; }
.sg-subcats { padding: 16px; border-radius: 14px; background: var(--sg-bg); }
.sg-subcats .sg-crumb { font-size: 14px; font-weight: 600; margin-bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.sg-subcats .sg-crumb button { background: none; border: 0; padding: 0; color: var(--sg-blue-link); font-weight: 600; text-decoration: underline; min-height: 24px; }
.sg-results { display: flex; flex-direction: column; gap: 8px; }
.sg .sg-result {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 12px 14px;
    border: 1.5px solid var(--sg-border); border-radius: 12px; background: #fff; text-align: left; min-height: 52px; color: var(--sg-text);
}
.sg .sg-result:hover { border-color: var(--sg-blue); }
.sg .sg-result b { font-weight: 600; font-size: 14px; }
.sg .sg-result small { font-size: 12px; color: var(--sg-muted); }
.sg-chosen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Step 2 - photos */
.sg-drop {
    border: 2px dashed #7FB3DD; border-radius: var(--sg-radius-lg); background: #F2F8FD;
    padding: 28px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
}
.sg-drop.is-over { border-color: var(--sg-blue); background: #E3F0FB; }
.sg-drop .sg-drop-ic { width: 56px; height: 56px; border-radius: 50%; background: #fff; color: var(--sg-blue); display: flex; align-items: center; justify-content: center; }
.sg-drop .sg-drop-t { font-size: 16px; font-weight: 600; color: var(--sg-blue-ink); }
.sg-drop .sg-drop-s { font-size: 13px; color: var(--sg-text-2); }
.sg-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sg-photo { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--sg-photo-bg); touch-action: manipulation; }
.sg-photo img { width: 100%; height: 100%; object-fit: cover; }
.sg-photo:first-child { outline: 2px solid var(--sg-green); outline-offset: -2px; }
.sg-photo .sg-cover { position: absolute; left: 8px; bottom: 8px; background: var(--sg-green); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; display: none; }
.sg-photo:first-child .sg-cover { display: inline-block; }
.sg-photo .sg-photo-tools { position: absolute; top: 6px; right: 6px; left: 6px; display: flex; justify-content: space-between; gap: 6px; }
.sg-photo .sg-pbtn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(18, 22, 28, .72); color: #fff; display: flex; align-items: center; justify-content: center; padding: 0; }
.sg-photo .sg-pbtn-cover { width: auto; border-radius: 18px; padding: 0 10px; font-size: 12px; font-weight: 600; }
.sg-photo:first-child .sg-pbtn-cover { visibility: hidden; }
.sg-photo.is-uploading::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .55); }
.sg-photo .sg-progressbar { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .8); overflow: hidden; z-index: 1; }
.sg-photo .sg-progressbar i { display: block; height: 100%; width: 0; background: var(--sg-blue); transition: width .2s; }
.sg-photo.sortable-ghost { opacity: .35; }
.sg-photo.sortable-chosen { box-shadow: 0 8px 24px rgba(0, 0, 0, .2); }
.sg-addmore {
    aspect-ratio: 4 / 3; border-radius: 12px; border: 2px dashed #C3CBD4; background: #fff; color: var(--sg-muted);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 13px; font-weight: 500;
}

/* Live preview card (aside) + step 5 preview */
.sg-pcard { background: #fff; border: 1px solid var(--sg-border); border-radius: var(--sg-radius-lg); overflow: hidden; }
.sg-pimg { position: relative; height: 190px; background: var(--sg-photo-bg); color: #7A8591; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 13px; }
.sg-pimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sg-pimg .sg-count-badge { position: absolute; right: 10px; bottom: 10px; background: rgba(18, 22, 28, .75); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 10px; }
.sg-pbody { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.sg-skel { display: block; height: 12px; border-radius: 6px; background: var(--sg-border); }
.sg-price { font-size: 22px; font-weight: 700; }
.sg-ptitle { font-size: 15px; font-weight: 500; word-break: break-word; }
.sg-ploc { font-size: 13px; color: var(--sg-muted); display: flex; align-items: center; gap: 4px; }
.sg-tip { display: flex; gap: 12px; background: var(--sg-blue-light); border-radius: 14px; padding: 16px; font-size: 13px; line-height: 1.5; color: var(--sg-blue-ink); }

.sg-preview .sg-pimg { height: 240px; }
.sg-preview .sg-pimg .sg-edit-photos { position: absolute; right: 12px; top: 12px; background: #fff; padding: 6px 12px; border-radius: 8px; text-decoration: none; z-index: 1; }
.sg-preview .sg-gal-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .9); color: var(--sg-text); display: flex; align-items: center; justify-content: center; z-index: 1; }
.sg-preview .sg-gal-prev { left: 10px; }
.sg-preview .sg-gal-next { right: 10px; }
.sg-preview .sg-pbody { padding: 20px 16px; gap: 18px; }
.sg-preview .sg-price { font-size: 26px; }
.sg-preview .sg-ptitle { font-size: 18px; }
.sg-preview .sg-sec { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sg-preview .sg-divider { border-top: 1px solid var(--sg-border); padding-top: 16px; }
.sg-preview h2 { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.sg-preview .sg-desc { font-size: 15px; line-height: 1.6; color: var(--sg-text-2); white-space: pre-line; word-break: break-word; }
.sg-preview .sg-contacts { display: flex; flex-wrap: wrap; gap: 20px; font-size: 14px; color: var(--sg-text-2); }
.sg-preview .sg-contacts span { display: flex; align-items: center; gap: 6px; }
.sg .sg-edit { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; background: none; border: 0; padding: 0; color: var(--sg-blue-link); text-decoration: none; }
.sg .sg-edit:hover { color: var(--sg-blue-hover); text-decoration: underline; }

/* Account panel: bottom sheet on mobile, side panel on desktop */
.sg-account { display: flex; flex-direction: column; gap: 14px; }
.sg-account h2 { font-size: 20px; font-weight: 700; }
.sg-account .sg-sub { font-size: 13px; color: var(--sg-muted); line-height: 1.5; margin-top: 4px; }
.sg-account .sg-or { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--sg-muted); }
.sg-account .sg-or::before, .sg-account .sg-or::after { content: ""; position: static; flex: 1; height: 1px; background: var(--sg-border); }
.sg-account .sg-g { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #4285F4; color: #4285F4; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.sg-account .sg-legal { font-size: 12px; color: var(--sg-muted); text-align: center; line-height: 1.55; }
.sg-account form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.sg-sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--sg-border-strong); align-self: center; }
.sg-sheet-close { position: absolute; right: 8px; top: 8px; width: 44px; height: 44px; border: 0; background: none; color: var(--sg-text); display: flex; align-items: center; justify-content: center; }
.sg-backdrop { position: fixed; inset: 0; background: rgba(11, 13, 16, .55); z-index: 1040; }

@media (max-width: 767.98px) {
    .sg-account.sg-sheet {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050; max-height: 92vh; overflow-y: auto;
        background: #fff; border-radius: 22px 22px 0 0; padding: 10px 20px calc(24px + env(safe-area-inset-bottom));
        transform: translateY(100%); transition: transform .25s ease; visibility: hidden;
    }
    .sg-account.sg-sheet.is-open { transform: translateY(0); visibility: visible; }
    /* The publish aside holds the (fixed) sheet, so it must render on phones. */
    .sg-account.sg-sheet h2 { padding-right: 40px; }
    .sg-aside.sg-step5-aside { display: block; flex: 0 0 0; max-width: none; height: 0; }
    /* The site's fixed mobile app bar would sit on top of the wizard buttons. */
    body.sg-wizard-page .add_newp { display: none !important; }
}

/* Submitted */
.sg-done { padding: 24px 16px 48px; }
.sg-done .sg-box { max-width: 720px; margin: 0 auto; padding: 28px 18px; border-radius: 20px; display: flex; flex-direction: column; gap: 22px; }
.sg-done .sg-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.sg-done .sg-hero-ic { width: 80px; height: 80px; border-radius: 50%; background: var(--sg-green-light); color: var(--sg-green); display: flex; align-items: center; justify-content: center; }
.sg-done h1 { font-size: 26px; font-weight: 700; margin-top: 6px; }
.sg-done .sg-lede { font-size: 15px; color: var(--sg-muted); line-height: 1.55; max-width: 460px; }
.sg-timeline { padding: 18px 12px; background: var(--sg-bg); border-radius: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sg-timeline li { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 13px; }
.sg-timeline b { font-weight: 600; }
.sg-timeline .sg-dot { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; border: 2px solid #C3CBD4; background: #fff; }
.sg-timeline .is-done .sg-dot { background: var(--sg-green); border-color: var(--sg-green); color: #fff; }
.sg-timeline .is-current .sg-dot { background: var(--sg-review-bg); border-color: #B45309; }
.sg-timeline .is-current .sg-dot::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #B45309; }
.sg-timeline .sg-muted { color: var(--sg-muted); }
.sg-mini { display: flex; gap: 14px; align-items: center; border: 1px solid var(--sg-border); border-radius: 14px; padding: 12px; }
.sg-mini .sg-thumb { width: 72px; height: 72px; border-radius: 10px; background: var(--sg-photo-bg); overflow: hidden; flex: none; }
.sg-mini .sg-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sg-mini .sg-mini-t { font-size: 15px; font-weight: 500; word-break: break-word; }
.sg-mini .sg-mini-p { font-size: 16px; font-weight: 700; }
.sg-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.sg-actions > * { flex: 1 1 100%; }

/* Magic link page */
.sg-magic { padding: 48px 16px; }
.sg-magic .sg-box { max-width: 480px; margin: 0 auto; padding: 32px 24px; text-align: center; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.sg-magic h1 { font-size: 22px; font-weight: 700; }

/* ---------- My Listings ---------- */
.sg-listings { padding: 20px 16px 48px; }
.sg-listings .sg-wrap { max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.sg-listings .sg-side { flex: 1 1 240px; max-width: 280px; display: none; flex-direction: column; gap: 16px; }
.sg-listings .sg-side .sg-legacy-nav { background: #fff; border: 1px solid var(--sg-border); border-radius: var(--sg-radius-lg); overflow: hidden; }
.sg-listings .sg-content { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.sg-listings h1 { font-size: 24px; font-weight: 700; }
.sg-listings .sg-headrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.sg-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.sg-tabs::-webkit-scrollbar { display: none; }
.sg .sg-tab {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 22px;
    border: 1.5px solid var(--sg-border-strong); background: #fff; font-size: 14px; font-weight: 500; color: var(--sg-text); white-space: nowrap;
}
.sg .sg-tab[aria-selected="true"] { background: var(--sg-text); border-color: var(--sg-text); color: #fff; }
.sg-listing { padding: 14px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.sg-listing .sg-thumb { width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; background: var(--sg-photo-bg); color: #7A8591; overflow: hidden; display: flex; align-items: center; justify-content: center; flex: none; }
.sg-listing .sg-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sg-listing .sg-info { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sg-listing .sg-info .sg-tag { align-self: flex-start; }
.sg-listing .sg-l-title { font-size: 16px; font-weight: 600; color: var(--sg-text); text-decoration: none; word-break: break-word; }
.sg-listing .sg-l-title:hover { color: var(--sg-blue-hover); }
.sg-listing .sg-l-price { font-size: 18px; font-weight: 700; }
.sg-listing .sg-l-meta { font-size: 13px; color: var(--sg-muted); }
.sg-listing .sg-stats { display: flex; gap: 18px; font-size: 13px; color: var(--sg-muted); margin-top: 4px; }
.sg-listing .sg-stats span { display: flex; align-items: center; gap: 5px; }
.sg-listing .sg-l-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.sg .sg-act {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 14px;
    border-radius: 9px; border: 1.5px solid var(--sg-border-strong); background: #fff; font-size: 13px; font-weight: 600; color: var(--sg-text); text-decoration: none;
}
.sg .sg-act:hover { border-color: var(--sg-text); color: var(--sg-text); }
.sg .sg-act-danger { color: var(--sg-danger); }
.sg .sg-act-danger:hover { color: var(--sg-danger); border-color: var(--sg-danger); }
.sg-listing .sg-l-actions form { margin: 0; display: inline-flex; }
.sg-more { background: var(--sg-blue-light); border-radius: var(--sg-radius-lg); padding: 18px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.sg-more h2 { font-size: 17px; font-weight: 600; color: var(--sg-blue-ink); margin-bottom: 2px; }
.sg-more p { font-size: 14px; color: var(--sg-blue-ink); line-height: 1.5; }
.sg-more > div { flex: 1 1 300px; }
.sg-empty { padding: 32px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--sg-muted); }
.sg-trust { padding: 18px; }
.sg-trust .sg-trust-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sg-trust h2 { font-size: 15px; font-weight: 600; }
.sg-trust .sg-meter { height: 6px; border-radius: 3px; background: var(--sg-border); margin: 10px 0 12px; overflow: hidden; }
.sg-trust .sg-meter i { display: block; height: 100%; background: var(--sg-green); }
.sg-trust .sg-task { display: flex; align-items: center; gap: 10px; font-size: 13px; min-height: 36px; text-decoration: none; }
.sg-trust .sg-task.is-done { color: var(--sg-muted); }
.sg-trust .sg-task.is-done .i { color: var(--sg-green); }
.sg-trust-mobile { display: block; }
.sg-pagination { display: flex; justify-content: center; }
.sg-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1060; background: var(--sg-text); color: #fff; padding: 12px 18px; border-radius: 10px; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.2); }

/* ---------- Desktop >= 768px ---------- */
@media (min-width: 768px) {
    .sg-welcome { padding: 48px 32px; }
    .sg-welcome h1 { font-size: 40px; line-height: 1.15; }
    .sg-welcome .sg-lede { font-size: 16px; }
    .sg-welcome .sg-how { padding: 18px 20px; }
    .sg-welcome .sg-tiles { gap: 16px; margin-top: 36px; }
    .sg .sg-tile { min-height: 104px; padding: 20px; }
    .sg-welcome .sg-browse { margin-top: 36px; }

    .sg-wizard { padding-bottom: 48px; }
    .sg-wizard .sg-wrap { padding: 0 32px; }
    .sg-topbar .sg-back { display: none; }
    .sg-progress { gap: 12px; padding-top: 24px; }
    .sg-progress .sg-step-label { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--sg-muted); }
    .sg-progress .sg-sd { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex: none; border: 2px solid #C3CBD4; }
    .sg-progress li.is-current .sg-step-label { font-weight: 600; color: var(--sg-text); }
    .sg-progress li.is-current .sg-sd { border-color: var(--sg-green); color: var(--sg-green); }
    .sg-progress li.is-done .sg-sd { border-color: var(--sg-green); background: var(--sg-green); color: #fff; }
    .sg-progress li.is-done .sg-step-label { color: var(--sg-text); }
    .sg-progress-text { display: none; }
    .sg-layout { margin-top: 28px; }
    .sg-panel { padding: 32px; }
    .sg-panel h1 { font-size: 28px; }
    .sg-aside { display: flex; }
    .sg-nav { position: static; padding: 24px 0 0; border-top: 1px solid var(--sg-border); background: none; justify-content: space-between; }
    .sg-nav .sg-btn { flex: 0 0 auto; margin-left: auto; padding: 0 28px; }
    .sg-nav .sg-btn2 { display: inline-flex; }
    .sg-cats { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
    .sg .sg-cat { min-height: 100px; padding: 16px; }
    .sg-subcats { padding: 20px; }
    .sg-drop { padding: 36px 24px; }
    .sg-photos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
    .sg-preview .sg-pimg { height: 320px; }
    .sg-preview .sg-pbody { padding: 24px; }
    .sg-preview .sg-price { font-size: 28px; }
    .sg-account.sg-side-panel, .sg-account { background: #fff; border: 1px solid var(--sg-border); border-radius: var(--sg-radius-lg); padding: 28px; }
    .sg-account h2 { font-size: 22px; }
    .sg-account .sg-sub { font-size: 14px; }
    .sg-sheet-handle, .sg-sheet-close, .sg-backdrop { display: none !important; }
    .sg-step5 .sg-aside { max-width: 400px; flex-basis: 320px; }
    .sg-step5-mobile-bar { display: none !important; }

    .sg-done { padding: 56px 32px; }
    .sg-done .sg-box { padding: 40px; gap: 24px; }
    .sg-done h1 { font-size: 30px; }
    .sg-timeline { padding: 20px; gap: 12px; }
    .sg-actions > * { flex: 0 0 auto; }

    .sg-listings { padding: 32px; }
    .sg-listings .sg-side { display: flex; }
    .sg-listings h1 { font-size: 28px; }
    .sg-listing { padding: 16px; gap: 20px; }
    .sg-listing .sg-thumb { width: 168px; height: 126px; aspect-ratio: auto; }
    .sg-listing .sg-l-actions { width: auto; }
    .sg-trust-mobile { display: none; }
}

/* ---------- Log in / Sign up / Check your email ---------- */
.sg-auth { padding: 20px 12px 110px; display: flex; justify-content: center; } /* bottom: room for the site's mobile app bar */
.sg-auth-card { width: 100%; max-width: 440px; padding: 24px 20px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 8px 24px rgba(18, 22, 28, .06); }
.sg-auth-card h1 { font-size: 24px; font-weight: 700; margin-bottom: 4px; }
.sg-auth-card .sg-sub { font-size: 15px; color: var(--sg-muted); }
.sg-auth-card form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.sg-auth .sg-btn { min-height: 52px; font-size: 16px; }
.sg .sg-gbtn {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px;
    border-radius: var(--sg-radius); background: #fff; color: var(--sg-text); border: 1.5px solid #C3CBD4;
    font-size: 15px; font-weight: 600; text-decoration: none;
}
.sg .sg-gbtn:hover { color: var(--sg-text); border-color: var(--sg-text); }
.sg .sg-g { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #4285F4; color: #4285F4; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.sg .sg-or { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--sg-muted); }
.sg .sg-or::before, .sg .sg-or::after { content: ""; position: static; flex: 1; height: 1px; background: var(--sg-border); }
.sg-auth .sg-input { border-color: #C3CBD4; }
.sg-pw { position: relative; }
.sg-pw .sg-input { padding-right: 52px; }
.sg .sg-eye { position: absolute; right: 3px; top: 3px; width: 44px; height: 44px; border: 0; background: transparent; color: var(--sg-muted); display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 8px; }
.sg .sg-eye:hover { color: var(--sg-text); }
.sg-remember { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--sg-text-2); min-height: 32px; cursor: pointer; }
.sg-remember input { width: 18px; height: 18px; margin: 0; accent-color: var(--sg-green); }
.sg .sg-magic-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px;
    border: 0; border-radius: var(--sg-radius); background: #F2F8FD; color: var(--sg-blue-link); font-size: 15px; font-weight: 600;
}
.sg .sg-magic-btn:hover { background: var(--sg-blue-light); color: var(--sg-blue-hover); }
.sg-auth-foot { padding-top: 18px; border-top: 1px solid var(--sg-border); text-align: center; font-size: 15px; color: var(--sg-text-2); }
.sg-auth-foot a { font-weight: 600; }
.sg-pw-rule { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sg-muted); margin-top: 8px; font-weight: 500; }
.sg-pw-rule.is-ok { color: var(--sg-green); }
.sg-legal-small { font-size: 12px; color: var(--sg-muted); text-align: center; line-height: 1.5; }
.sg-link-btn { background: none; border: 0; padding: 0; color: var(--sg-blue-link); font-weight: 600; text-decoration: underline; font-size: inherit; }

/* Sign up: blue benefits panel (desktop) / chips (mobile) */
.sg-signup { width: 100%; max-width: 960px; display: flex; flex-wrap: wrap; overflow: hidden; border-radius: 18px; box-shadow: 0 8px 24px rgba(18, 22, 28, .06); }
.sg-signup .sg-auth-card { max-width: none; flex: 1 1 400px; box-shadow: none; border: 0; border-radius: 0; }
.sg-perks-panel { display: none; flex: 1 1 340px; background: var(--sg-blue); color: #fff; padding: 40px; flex-direction: column; gap: 28px; }
.sg-perks-panel h2 { color: #fff; font-size: 28px; line-height: 1.2; font-weight: 700; margin-bottom: 8px; }
.sg-perks-panel p { color: #E6F1FA; font-size: 15px; line-height: 1.55; }
.sg-perk { display: flex; gap: 14px; align-items: flex-start; }
.sg-perk .sg-pi { width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, .16); display: flex; align-items: center; justify-content: center; flex: none; }
.sg-perk b { display: block; font-weight: 600; font-size: 15px; }
.sg-perk span span { font-size: 14px; color: #E6F1FA; }
.sg-perk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sg-perk-chips span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: #0E5A20; background: var(--sg-green-light); padding: 6px 10px; border-radius: 16px; }

/* Check your email */
.sg-check-ic { width: 84px; height: 84px; border-radius: 50%; background: var(--sg-blue-light); color: var(--sg-blue); display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.sg .sg-btn-muted { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; border-radius: var(--sg-radius); background: #fff; color: var(--sg-text); border: 1.5px solid var(--sg-border-strong); font-size: 15px; font-weight: 600; }
.sg .sg-btn-muted[disabled] { background: var(--sg-bg); color: var(--sg-muted); cursor: not-allowed; }
.sg-note { background: var(--sg-bg); border-radius: 12px; padding: 14px 16px; font-size: 13px; line-height: 1.55; color: var(--sg-text-2); }

@media (min-width: 768px) {
    .sg-auth { padding: 56px 16px; }
    .sg-auth-card { padding: 36px; }
    .sg-auth-card h1 { font-size: 28px; }
    .sg-signup .sg-auth-card { padding: 40px; }
    .sg-signup .sg-auth-card h1 { font-size: 26px; }
    .sg-perks-panel { display: flex; }
    .sg-signup .sg-perk-chips { display: none; }
}

/* ---------- Browse / search (/categories) ----------
   Sidebar filters from 992px; below that a Filters button opens a sheet. */
.sg-browse { padding: 14px 0 110px; }
.sg-browse .sg-wrap { max-width: 1320px; margin: 0 auto; padding: 0 16px; }
.sg-crumbs { font-size: 12px; color: var(--sg-muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sg-crumbs a { color: var(--sg-blue-link); }
.sg-browse-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 6px 0 12px; }
.sg-browse-head h1 { font-size: 22px; font-weight: 700; line-height: 1.25; }
.sg-browse-head .sg-count { font-size: 13px; color: var(--sg-muted); margin-top: 2px; }
.sg .sg-alert-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--sg-radius); border: 1.5px solid var(--sg-blue); background: #fff; color: var(--sg-blue-link); font-size: 14px; font-weight: 600; }

.sg-mobile-bar { display: flex; gap: 8px; margin-bottom: 10px; }
.sg-mobile-bar form { margin: 0; display: flex; }
.sg .sg-tb { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: var(--sg-radius); border: 1.5px solid var(--sg-border-strong); background: #fff; color: var(--sg-text); font-size: 14px; font-weight: 600; }
.sg .sg-tb-select { position: relative; padding-right: 10px; }
.sg .sg-tb-select select { border: 0; background: transparent; font: inherit; color: inherit; padding: 0; appearance: none; -webkit-appearance: none; max-width: 150px; cursor: pointer; }
.sg .sg-tb-select select:focus-visible { outline: none; }
.sg .sg-tb-select:focus-within { outline: 3px solid var(--sg-blue); outline-offset: 2px; }
.sg .sg-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--sg-green); color: #fff; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.sg-chips-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sg-chips-row.sg-mobile-only { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 10px; padding: 0 16px 2px; scrollbar-width: none; }
.sg-chips-row.sg-mobile-only::-webkit-scrollbar { display: none; }
.sg .sg-fchip { display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 0 4px 0 12px; border-radius: 17px; background: var(--sg-blue-light); color: var(--sg-blue-ink); font-size: 13px; font-weight: 500; white-space: nowrap; }
.sg .sg-fchip:not(:has(a)) { padding-right: 12px; }
.sg .sg-fchip a { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--sg-blue-ink); }
.sg .sg-fchip a:hover { background: rgba(0, 112, 192, .12); }

.sg-browse-layout { display: flex; gap: 24px; align-items: flex-start; }
.sg-results { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }

/* Filters: sheet (mobile/tablet) */
.sg-filters { position: fixed; left: 0; right: 0; bottom: 0; top: 48px; z-index: 1050; background: #fff; border-radius: 22px 22px 0 0;
    transform: translateY(100%); visibility: hidden; transition: transform .25s ease, visibility .25s; }
.sg-filters.is-open { transform: translateY(0); visibility: visible; }
.sg-filters form { height: 100%; display: flex; flex-direction: column; margin: 0; }
.sg-filters-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 8px 10px 20px; border-bottom: 1px solid var(--sg-border); }
.sg-filters-head h2 { font-size: 19px; font-weight: 700; }
.sg .sg-clear { font-size: 14px; font-weight: 600; padding: 10px; }
.sg .sg-filters-close { width: 44px; height: 44px; border: 0; background: none; color: var(--sg-text); display: flex; align-items: center; justify-content: center; }
.sg-filters-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sg-filters-foot { padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--sg-border); }
.sg-fs { border-top: 1px solid var(--sg-border); padding: 14px 18px; }
.sg-fs:first-child { border-top: 0; }
.sg .sg-fh { display: flex; justify-content: space-between; align-items: center; min-height: 32px; font-size: 15px; font-weight: 600; color: var(--sg-text); cursor: pointer; list-style: none; }
.sg .sg-fh::-webkit-details-marker { display: none; }
.sg .sg-fh::after { display: none; }
.sg-fs .sg-chev { transition: transform .15s; }
.sg-fs[open] .sg-chev { transform: rotate(180deg); }
.sg-fs-body { margin-top: 6px; display: flex; flex-direction: column; }
.sg .sg-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 0 8px; margin: 0 -8px; border-radius: 8px; font-size: 14px; color: var(--sg-text-2); text-decoration: none; }
.sg a.sg-opt:hover { background: var(--sg-bg); color: var(--sg-text); }
.sg .sg-opt.is-on { color: var(--sg-green); font-weight: 600; background: var(--sg-green-light); }
.sg .sg-opt.is-on .sg-cnt { color: var(--sg-green); }
.sg .sg-opt-child { padding-left: 20px; }
.sg .sg-opt-back { justify-content: flex-start; gap: 4px; color: var(--sg-blue-link); font-weight: 500; }
.sg .sg-cnt { font-size: 12px; color: var(--sg-muted); margin-left: auto; }
.sg .sg-more-btn { align-self: flex-start; background: none; border: 0; padding: 0; margin-top: 6px; min-height: 36px; font-size: 13px; font-weight: 600; color: var(--sg-blue-link); }
.sg .sg-rad { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 14px; color: var(--sg-text-2); cursor: pointer; }
.sg .sg-rad input { width: 18px; height: 18px; margin: 0; accent-color: var(--sg-green); flex: none; }
.sg .sg-flabel { font-size: 12px; font-weight: 600; color: var(--sg-muted); margin: 10px 0 4px; }
.sg .sg-finp { height: 44px; width: 100%; border: 1.5px solid #C3CBD4; border-radius: 8px; padding: 0 10px; font: inherit; font-size: 14px; color: var(--sg-text); background: #fff; }
.sg .sg-minmax { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sg .sg-minmax label { font-size: 12px; color: var(--sg-muted); display: flex; flex-direction: column; gap: 4px; }

/* Results */
.sg-toolbar { align-items: center; gap: 10px; background: #fff; border: 1px solid var(--sg-border); border-radius: 12px; padding: 10px 12px; }
.sg-toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.sg-toolbar form { margin: 0; }
.sg .sg-sort { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.sg .sg-sort select { width: auto; height: 40px; }
.sg-viewtoggle { display: flex; border: 1.5px solid var(--sg-border-strong); border-radius: 8px; overflow: hidden; }
.sg-viewtoggle button { width: 40px; height: 37px; border: 0; background: #fff; color: var(--sg-text); display: flex; align-items: center; justify-content: center; }
.sg-viewtoggle button[aria-pressed="true"] { background: var(--sg-text); color: #fff; }
.sg-banner a { position: relative; display: block; border-radius: 12px; overflow: hidden; }
.sg-banner span { position: absolute; left: 8px; top: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; padding: 1px 6px; border-radius: 4px; }
.sg-banner img { width: 100%; height: auto; }

.sg-ads { display: flex; flex-direction: column; gap: 10px; }
.sg-ad { position: relative; display: flex; gap: 12px; background: #fff; border: 1px solid var(--sg-border); border-radius: 14px; padding: 10px; transition: box-shadow .15s; }
.sg-ad:hover { box-shadow: 0 8px 20px rgba(18, 22, 28, .08); }
.sg-ad-media { position: relative; width: 112px; height: 104px; flex: none; border-radius: 10px; overflow: hidden; background: var(--sg-photo-bg); color: #7A8591; display: flex; align-items: center; justify-content: center; }
.sg-ad-media img { width: 100%; height: 100%; object-fit: cover; }
.sg-ad-photos { position: absolute; left: 6px; bottom: 6px; background: rgba(18, 22, 28, .75); color: #fff; font-size: 11px; padding: 1px 7px; border-radius: 9px; }
.sg-ad-featured { position: absolute; left: 6px; top: 6px; background: var(--sg-review-bg); color: var(--sg-review-ink); font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 9px; }
.sg-ad-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-right: 36px; }
.sg-ad .sg-ad-title { order: 2; font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--sg-text); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Whole card is the link; the save button sits above it. */
.sg-ad .sg-ad-title::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.sg-ad .sg-ad-title:focus-visible { outline: none; }
.sg-ad:has(.sg-ad-title:focus-visible) { outline: 3px solid var(--sg-blue); outline-offset: 2px; }
.sg-ad-price { order: 1; font-size: 17px; font-weight: 700; color: var(--sg-text); }
.sg-ad-price small { display: none; font-size: 11px; font-weight: 600; color: var(--sg-green); background: var(--sg-green-light); padding: 2px 8px; border-radius: 10px; margin-left: 6px; vertical-align: middle; }
.sg-ad-desc { order: 3; display: none; font-size: 14px; color: var(--sg-text-2); line-height: 1.5; }
.sg-ad-meta { order: 4; margin-top: auto; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--sg-muted); }
.sg-ad-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.sg-ad-cat { display: none !important; font-size: 12px; background: var(--sg-bg); border-radius: 8px; padding: 2px 10px; color: var(--sg-text-2); }
.sg .sg-save { position: absolute; z-index: 2; top: 8px; right: 8px; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--sg-border); background: rgba(255, 255, 255, .95); color: var(--sg-text); display: flex; align-items: center; justify-content: center; padding: 0; }
.sg .sg-save:hover { border-color: var(--sg-text); color: var(--sg-text); }
.sg .sg-save[aria-pressed="true"] { color: #D92D20; }
.sg .sg-save[aria-pressed="true"] .i { fill: currentColor; }
.sg-empty h2 { color: var(--sg-text); }

.sg-pages { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.sg .sg-pg { min-width: 44px; height: 44px; padding: 0 14px; border-radius: 8px; border: 1.5px solid var(--sg-border-strong); background: #fff; color: var(--sg-text); font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.sg a.sg-pg:hover { border-color: var(--sg-text); color: var(--sg-text); }
.sg .sg-pg.is-on { background: var(--sg-text); border-color: var(--sg-text); color: #fff; }
.sg .sg-pg.is-off { color: #8A939E; }

.sg-browse .sg-desktop-only { display: none !important; }
@media (max-width: 479.98px) { .sg-pg-num { display: none !important; } .sg-pg.is-on { display: inline-flex; } }

@media (min-width: 768px) {
    .sg-browse .sg-wrap { padding: 0 24px; }
    .sg-browse-head h1 { font-size: 26px; }
    .sg-ad-media { width: 200px; height: 150px; }
    .sg-ad-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .sg-ad-price { font-size: 19px; color: var(--sg-green); }
    .sg-ad .sg-ad-title { order: 0; font-size: 17px; font-weight: 600; }
    .sg-ad-cat { display: inline-flex !important; }
    .sg-ad-price small { display: inline; }
}

@media (min-width: 992px) {
    .sg-browse { padding: 20px 0 48px; }
    .sg-browse .sg-wrap { padding: 0 32px; }
    .sg-browse-head { margin: 10px 0 20px; }
    .sg-browse-head h1 { font-size: 30px; }
    .sg-browse-head .sg-count { font-size: 14px; }
    .sg-browse .sg-desktop-only { display: revert !important; }
    .sg-browse .sg-toolbar.sg-desktop-only { display: flex !important; }
    .sg-browse .sg-mobile-only, .sg-mobile-bar { display: none !important; }
    .sg-filters { position: static; transform: none; visibility: visible; transition: none; flex: 0 0 280px; border: 1px solid var(--sg-border); border-radius: 14px; overflow: hidden; z-index: auto; }
    .sg-filters-head { padding: 16px 18px; border-bottom: 0; }
    .sg-filters-head h2 { font-size: 17px; }
    .sg-filters-close, #sg-filters-backdrop { display: none !important; }
    .sg-filters-body { overflow: visible; }
    .sg-fs:first-child { border-top: 1px solid var(--sg-border); }
    .sg-filters-foot { padding: 14px 18px 18px; }
    .sg-filters-foot .sg-btn { min-height: 44px; font-size: 14px; }

    /* list view */
    .sg-ad { padding: 0; gap: 0; overflow: hidden; }
    .sg-ad-media { width: 240px; height: auto; min-height: 180px; border-radius: 0; }
    .sg-ad-body { padding: 16px 64px 16px 20px; gap: 6px; }
    .sg-ad .sg-save { top: 14px; right: 14px; }

    /* grid view */
    .sg-ads[data-view="grid"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
    .sg-ads[data-view="grid"] .sg-ad { flex-direction: column; }
    .sg-ads[data-view="grid"] .sg-ad-media { width: 100%; height: auto; min-height: 0; aspect-ratio: 4 / 3; }
    .sg-ads[data-view="grid"] .sg-ad-body { padding: 12px 14px 14px; gap: 4px; }
    .sg-ads[data-view="grid"] .sg-ad-price { order: 1; font-size: 18px; color: var(--sg-text); }
    .sg-ads[data-view="grid"] .sg-ad-title { order: 2; font-size: 14px; font-weight: 500; min-height: 38px; }
    .sg-ads[data-view="grid"] .sg-ad-desc, .sg-ads[data-view="grid"] .sg-ad-cat { display: none !important; }
    .sg-ads[data-view="grid"] .sg-save { top: 10px; right: 10px; border: 0; }
    .sg-ads[data-view="grid"] .sg-ad-meta > span:nth-child(2) .i { display: none; }
}

/* Step 1: sub-category list (one column of big rows on phones, two-three
   columns on desktop) + filter, and auto-scroll offsets under the header. */
.sg-subcats, #sg-cat-chosen, .sg-type-field { scroll-margin-top: calc(var(--sg-header-h, 78px) + 12px); scroll-margin-bottom: 96px; }
.sg-sub-filter { margin-bottom: 10px; }
.sg-sub-filter .sg-input { height: 48px; background: #fff; }
.sg-sub-filter .i { top: 13px; }
.sg-sublist { display: grid; grid-template-columns: 1fr; gap: 8px; }
.sg .sg-subitem {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 52px; padding: 0 14px;
    border: 1.5px solid var(--sg-border); border-radius: 12px; background: #fff; color: var(--sg-text); font-size: 15px; font-weight: 500; text-align: left;
}
.sg .sg-subitem:hover { border-color: var(--sg-blue); }
.sg .sg-subitem .i { color: var(--sg-muted); }
.sg .sg-subitem[aria-pressed="true"] { border: 2px solid var(--sg-green); background: #F3FBF5; color: var(--sg-green); font-weight: 600; }
.sg .sg-subitem[aria-pressed="true"] .i { color: var(--sg-green); }
.sg .sg-subgroup { grid-column: 1 / -1; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sg-muted); margin: 6px 0 0; }
.sg .sg-subgroup:first-child { margin-top: 0; }
.sg-type-field { grid-column: 1 / -1; }
.sg-type-search { margin-bottom: 8px; }
.sg-type-search .sg-input { height: 48px; }
.sg-type-search .i { top: 13px; }
@media (min-width: 768px) {
    .sg-sublist { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
    .sg .sg-subitem { min-height: 48px; font-size: 14px; }
}
/* "(optional)" inside form labels - not the browse page's .sg-opt filter rows */
.sg .sg-label .sg-opt { display: inline; min-height: 0; padding: 0; margin: 0; border-radius: 0; background: none; font-size: inherit; font-weight: 400; color: var(--sg-muted); }
.sg-type-field + .sg-grid-2 { margin-top: 22px; }

/* ---------- Chat (/dashboard/chat) ----------
   Desktop: inbox | conversation | ad panel (from 1200px).
   Phones/tablets (<992px): the inbox, or one conversation full-screen. */
.sg-chat { padding: 16px 0 110px; }
.sg-chat-wrap { max-width: 1320px; margin: 0 auto; padding: 0 16px; }
.sg-chat-app { display: flex; overflow: hidden; min-height: 520px; }
.sg .sg-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--sg-blue); color: #fff; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sg .sg-avatar-sm { width: 24px; height: 24px; font-size: 10px; border: 2px solid #fff; }
.sg .sg-ib { width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--sg-text); display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: none; cursor: pointer; text-decoration: none; }
.sg .sg-ib:hover { background: var(--sg-bg); color: var(--sg-text); }
.sg .sg-ib-soft { background: #F1F3F5; width: 42px; height: 42px; }
.sg .sg-ib-green { color: var(--sg-green); }
.sg .sg-role { display: inline-flex; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 8px; vertical-align: middle; }
.sg .sg-role-buyer { color: var(--sg-blue-link); background: var(--sg-blue-light); }
.sg .sg-role-seller { color: var(--sg-green); background: var(--sg-green-light); }
.sg .sg-unread { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--sg-green); color: #fff; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex: none; }

/* Inbox */
.sg-inbox { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; background: #fff; }
.sg-inbox-head { padding: 14px 16px 10px; border-bottom: 1px solid var(--sg-border); }
.sg-inbox-head h1 { font-size: 24px; font-weight: 700; margin-bottom: 10px; }
.sg-inbox-search .sg-input { height: 42px; font-size: 15px; background: #F7F9FA; padding-left: 40px; }
.sg-inbox-search .i { top: 13px; left: 14px; }
.sg-inbox-tabs { display: flex; gap: 6px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.sg .sg-ctab { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 18px; border: 1.5px solid var(--sg-border-strong); background: #fff; color: var(--sg-text); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.sg .sg-ctab[aria-current="page"] { background: var(--sg-text); border-color: var(--sg-text); color: #fff; }
.sg .sg-ctab-link { margin-left: auto; border-color: transparent; color: var(--sg-blue-link); padding: 0 6px; }
.sg .sg-ctab-link[aria-current="page"] { background: var(--sg-blue-light); border-color: var(--sg-blue-light); color: var(--sg-blue-ink); }
.sg-inbox-list { flex: 1; overflow-y: auto; }
.sg .sg-crow { display: flex; gap: 12px; padding: 12px 16px; text-decoration: none; color: var(--sg-text); border-bottom: 1px solid #EEF1F4; }
.sg .sg-crow:hover { background: #F7F9FA; color: var(--sg-text); }
.sg .sg-crow.is-active { background: #F3FBF5; box-shadow: inset 3px 0 0 var(--sg-green); }
.sg-crow-media { position: relative; width: 56px; height: 56px; flex: none; }
.sg-crow-thumb { width: 56px; height: 56px; border-radius: 12px; background: var(--sg-photo-bg); color: #7A8591; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.sg-crow-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sg-crow-media .sg-avatar-sm { position: absolute; right: -4px; bottom: -4px; }
.sg-crow-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sg-crow-top { display: flex; align-items: baseline; gap: 8px; }
.sg-crow-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-crow-time { font-size: 12px; color: var(--sg-muted); flex: none; }
.sg-crow-ad { font-size: 12px; color: var(--sg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-crow-ad b { color: var(--sg-text-2); font-weight: 600; }
.sg-crow-ad .sg-role { margin-right: 4px; }
.sg-crow-last { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.sg-crow-preview { flex: 1; min-width: 0; font-size: 14px; color: var(--sg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg .sg-crow.is-unread .sg-crow-name, .sg .sg-crow.is-unread .sg-crow-preview { font-weight: 700; color: var(--sg-text); }
.sg .sg-crow.is-unread .sg-crow-time { color: var(--sg-green); font-weight: 600; }
.sg-inbox-empty { padding: 40px 20px; text-align: center; color: var(--sg-muted); display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* Conversation */
.sg-convo { flex: 1 1 auto; min-width: 0; display: none; flex-direction: column; background: #fff; position: relative; }
.sg-chat.has-active .sg-convo { display: flex; }
.sg-chat.has-active .sg-inbox { display: none; }
.sg-convo-head { flex: none; border-bottom: 1px solid var(--sg-border); }
.sg-convo-person { display: flex; align-items: center; gap: 6px; min-height: 60px; padding: 0 4px 0 2px; }
.sg-convo-who { flex: 1; min-width: 0; margin-left: 4px; }
.sg-convo-name { font-size: 15px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-convo-seen { font-size: 12px; color: var(--sg-muted); display: flex; align-items: center; gap: 5px; min-height: 16px; }
.sg-dot { width: 7px; height: 7px; border-radius: 50%; background: #C3CBD4; }
.sg-dot.is-online { background: #1FA53B; }
.sg-more-menu { position: relative; }
.sg-more-menu summary { list-style: none; }
.sg-more-menu summary::-webkit-details-marker { display: none; }
.sg-menu { position: absolute; right: 4px; top: 46px; z-index: 20; min-width: 190px; background: #fff; border: 1px solid var(--sg-border); border-radius: 12px; box-shadow: 0 12px 28px rgba(18,22,28,.14); padding: 6px; display: flex; flex-direction: column; }
.sg .sg-menu a, .sg .sg-menu button { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border: 0; background: none; border-radius: 8px; color: var(--sg-text); font-size: 14px; text-decoration: none; text-align: left; width: 100%; }
.sg .sg-menu a:hover, .sg .sg-menu button:hover { background: var(--sg-bg); }
.sg .sg-menu form { margin: 0; }
.sg .sg-menu .sg-menu-danger { color: var(--sg-danger); }
.sg-convo-ad { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #F7F9FA; border-top: 1px solid #EEF1F4; }
.sg-convo-ad-thumb { width: 44px; height: 44px; border-radius: 8px; background: var(--sg-photo-bg); color: #7A8591; overflow: hidden; display: flex; align-items: center; justify-content: center; flex: none; }
.sg-convo-ad-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sg-convo-ad-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; }
.sg-convo-ad-text a, .sg-convo-ad-text > span:first-child { color: var(--sg-text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.sg-convo-ad-text b { font-size: 14px; }
.sg-convo-ad-text .sg-tag { font-size: 11px; padding: 1px 7px; margin-left: 4px; }
.sg .sg-pill { min-height: 36px; padding: 0 12px; border-radius: 18px; background: #fff; border: 1.5px solid #C3CBD4; color: var(--sg-text); font-size: 13px; font-weight: 600; flex: none; white-space: nowrap; }
.sg .sg-pill:hover { border-color: var(--sg-text); }

.sg-msgs { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
#sg-msg-list { display: flex; flex-direction: column; gap: 6px; }
.sg-safety { display: flex; gap: 8px; align-items: flex-start; align-self: center; max-width: 520px; background: #FFF8E6; border: 1px solid #F5E2B0; border-radius: 12px; padding: 10px 12px; font-size: 12px; line-height: 1.45; color: #5C4400; }
.sg-safety .i { color: var(--sg-review-ink); margin-top: 1px; }
.sg-day { align-self: center; font-size: 12px; color: var(--sg-muted); background: #F1F3F5; padding: 3px 10px; border-radius: 10px; margin: 8px 0 4px; }
.sg-msg { display: flex; }
.sg-msg.is-me { justify-content: flex-end; }
.sg-msg-bubble { max-width: 78%; padding: 8px 12px; font-size: 15px; line-height: 1.4; word-wrap: break-word; overflow-wrap: anywhere; }
.sg-msg.is-me .sg-msg-bubble { background: #DCF3E2; border-radius: 16px 16px 4px 16px; }
.sg-msg.is-them .sg-msg-bubble { background: #F1F3F5; border-radius: 16px 16px 16px 4px; }
.sg-msg-text a { color: var(--sg-blue-link); }
.sg-msg-meta { display: flex; justify-content: flex-end; align-items: center; gap: 4px; font-size: 11px; color: var(--sg-muted); margin-top: 2px; }
.sg-msg.is-them .sg-msg-meta { justify-content: flex-start; }
.sg-tick { width: 16px; height: 16px; color: var(--sg-blue); }
.sg-msg.is-pending .sg-msg-meta { opacity: .6; }
.sg-msg.is-failed .sg-msg-bubble { background: #FDECEC; border: 1px solid #F3B9B9; }
.sg-fail { color: var(--sg-danger); font-weight: 600; }
.sg .sg-retry { border: 0; background: none; padding: 4px 0; font-size: 11px; font-weight: 700; color: var(--sg-danger); text-decoration: underline; }
.sg-msg-img { display: block; margin-bottom: 4px; border-radius: 10px; overflow: hidden; max-width: 240px; }
.sg-msg-img img { width: 100%; height: auto; }
.sg-msg-sticker { width: 110px; height: auto; }
.sg-msg:has(.sg-msg-sticker) .sg-msg-bubble { background: transparent !important; padding: 0; }
.sg-msg.is-system { justify-content: center; }
.sg-msg.is-system span { max-width: 90%; text-align: center; font-size: 12px; color: var(--sg-text-2); background: var(--sg-green-light); padding: 6px 12px; border-radius: 12px; }
.sg-msg.is-offer .sg-msg-bubble { background: transparent !important; padding: 0; max-width: 300px; width: 100%; }
.sg-offer-card { border: 1.5px solid var(--sg-green); border-radius: 16px; overflow: hidden; background: #fff; }
.sg-msg.is-me .sg-offer-card { border-radius: 16px 16px 4px 16px; }
.sg-msg.is-them .sg-offer-card { border-radius: 16px 16px 16px 4px; }
.sg-offer-card-head { background: var(--sg-green); color: #fff; font-size: 12px; font-weight: 600; padding: 6px 12px; }
.sg-offer-card-body { padding: 10px 12px 12px; }
.sg-offer-amt { font-size: 22px; font-weight: 700; }
.sg-offer-sub, .sg-offer-status { font-size: 12px; color: var(--sg-muted); }
.sg-offer-card.is-accepted .sg-offer-status { color: var(--sg-green); font-weight: 600; }
.sg-offer-card.is-declined, .sg-offer-card.is-countered, .sg-offer-card.is-withdrawn { border-color: var(--sg-border-strong); }
.sg-offer-card.is-declined .sg-offer-card-head, .sg-offer-card.is-countered .sg-offer-card-head, .sg-offer-card.is-withdrawn .sg-offer-card-head { background: #8A939E; }
.sg-offer-note { font-size: 13px; color: var(--sg-text-2); margin-top: 6px; }
.sg-offer-actions { display: flex; gap: 6px; margin-top: 10px; }
.sg .sg-oa { flex: 1; min-height: 40px; border-radius: 10px; font-size: 13px; font-weight: 600; border: 1.5px solid var(--sg-green); background: #fff; color: var(--sg-green); }
.sg .sg-oa-accept { background: var(--sg-green); color: #fff; }
.sg .sg-oa-decline { flex: 0 0 auto; padding: 0 10px; border-color: #C3CBD4; color: var(--sg-text-2); }
.sg-newpill { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); z-index: 5; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 14px; border-radius: 18px; border: 0; background: var(--sg-text); color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 6px 16px rgba(0,0,0,.2); }

/* Composer */
.sg-composer { flex: none; border-top: 1px solid var(--sg-border); background: #fff; padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); }
.sg-quick { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 8px; scrollbar-width: none; }
.sg-quick::-webkit-scrollbar { display: none; }
.sg .sg-qr { min-height: 34px; padding: 0 12px; border-radius: 17px; border: 1.5px solid var(--sg-green); background: #fff; color: var(--sg-green); font-size: 13px; font-weight: 500; white-space: nowrap; flex: none; }
.sg .sg-qr:hover { background: var(--sg-green-light); }
.sg-stickers { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; max-height: 180px; overflow-y: auto; margin-bottom: 8px; padding: 6px; background: #F7F9FA; border-radius: 12px; }
.sg .sg-stickers button { border: 0; background: #fff; border-radius: 10px; padding: 4px; min-height: 64px; }
.sg-stickers img { width: 100%; height: 56px; object-fit: contain; }
.sg-compose-row { display: flex; align-items: flex-end; gap: 6px; margin: 0; }
.sg-compose-box { flex: 1; position: relative; display: block; margin: 0; }
.sg .sg-compose-box textarea { display: block; width: 100%; min-height: 42px; max-height: 140px; border: 1.5px solid #C3CBD4; border-radius: 21px; padding: 10px 44px 9px 14px; font: inherit; font-size: 16px; line-height: 1.3; resize: none; background: #fff; color: var(--sg-text); }
.sg .sg-compose-box textarea:focus { border-color: var(--sg-blue); outline: none; box-shadow: 0 0 0 3px rgba(0,112,192,.18); }
.sg .sg-sticker-btn { position: absolute; right: 4px; bottom: 3px; width: 36px; height: 36px; border: 0; background: transparent; color: var(--sg-muted); display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.sg .sg-send { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--sg-green); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.sg .sg-send:hover { background: var(--sg-green-hover); }
.sg-convo-empty { align-items: center; justify-content: center; text-align: center; color: var(--sg-muted); padding: 24px; }
.sg-convo-empty h2 { font-size: 18px; font-weight: 600; color: var(--sg-text); margin: 8px 0 4px; }

/* Ad panel (desktop) */
.sg-adpanel { display: none; flex: 0 0 300px; border-left: 1px solid var(--sg-border); padding: 16px; flex-direction: column; gap: 12px; overflow-y: auto; background: #fff; }
.sg-adpanel-img { aspect-ratio: 4 / 3; border-radius: 12px; background: var(--sg-photo-bg); color: #7A8591; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.sg-adpanel-img img { width: 100%; height: 100%; object-fit: cover; }
.sg-adpanel-price { font-size: 22px; font-weight: 700; }
.sg-adpanel-title { font-size: 14px; font-weight: 500; }
.sg-adpanel-meta { font-size: 12px; color: var(--sg-muted); margin-top: 2px; }
.sg-adpanel .sg-btn, .sg-adpanel .sg-btn2 { min-height: 46px; font-size: 14px; }
.sg .sg-btn-wa { border-color: var(--sg-green); color: var(--sg-green); }
.sg-adpanel-link { text-align: center; font-size: 13px; font-weight: 600; padding: 6px; }
.sg-adpanel-person { border-top: 1px solid var(--sg-border); padding-top: 12px; font-size: 12px; color: var(--sg-muted); line-height: 1.5; }
.sg-adpanel-person b { color: var(--sg-text); font-weight: 600; }

/* Make an offer: bottom sheet on phones, dialog on desktop */
.sg-offer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1060; background: #fff; border-radius: 22px 22px 0 0; padding: 10px 18px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; max-height: 92vh; overflow-y: auto; box-shadow: 0 -10px 30px rgba(0,0,0,.15); }
.sg-offer form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
#sg-offer-backdrop { z-index: 1055; }
.sg-offer-head { display: flex; align-items: center; justify-content: space-between; }
.sg-offer-head h2 { font-size: 20px; font-weight: 700; }
.sg-offer-ad { display: flex; align-items: center; gap: 10px; background: #F7F9FA; border-radius: 12px; padding: 10px; }
.sg-offer-ad > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.sg-offer-ad-title { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-offer-amount { display: flex; height: 56px; border: 2px solid var(--sg-green); border-radius: 12px; overflow: hidden; }
.sg-offer-amount span { width: 64px; background: var(--sg-green-light); color: var(--sg-green); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.sg .sg-offer-amount input { flex: 1; min-width: 0; border: 0; padding: 0 14px; font: inherit; font-size: 22px; font-weight: 700; color: var(--sg-text); outline: none; }
.sg-offer-sugs { display: flex; gap: 8px; }
.sg .sg-sug { flex: 1; min-height: 52px; border-radius: 12px; border: 1.5px solid #C3CBD4; background: #fff; color: var(--sg-text); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sg .sg-sug b { font-size: 14px; }
.sg .sg-sug span { font-size: 11px; color: var(--sg-muted); }
.sg .sg-sug[aria-pressed="true"] { border: 2px solid var(--sg-green); background: #F3FBF5; }

@media (max-width: 991.98px) {
    .sg-chat { padding: 0 0 96px; }
    .sg-chat-wrap { padding: 0; }
    .sg-chat-app { border: 0; border-radius: 0; min-height: 0; }
    /* An open conversation fills the screen under the site header. */
    .sg-chat.has-active .sg-chat-app { position: fixed; left: 0; right: 0; bottom: 0; top: var(--sg-header-h, 56px); z-index: 900; }
    body.sg-chat-open .add_newp { display: none !important; }
    .sg-convo-empty { display: none !important; }
}
@media (min-width: 992px) {
    .sg-chat { padding: 20px 0 40px; }
    .sg-chat-wrap { padding: 0 32px; }
    .sg-chat-app { height: calc(100vh - var(--sg-header-h, 78px) - 60px); min-height: 560px; }
    .sg-inbox { flex: 0 0 340px; border-right: 1px solid var(--sg-border); }
    .sg-chat.has-active .sg-inbox { display: flex; }
    .sg-convo { display: flex; }
    .sg-convo-back { display: none !important; }
    .sg-msgs { padding: 16px 20px; }
    .sg-msg-bubble { max-width: 64%; }
    .sg-offer { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%); width: 440px; border-radius: 16px; padding: 20px 22px; }
    .sg-offer .sg-sheet-handle { display: none; }
}
@media (min-width: 1200px) {
    .sg-adpanel { display: flex; }
    .sg-convo-ad, .sg-mobile-ib { display: none !important; }
}

/* Google / Facebook buttons (frontend/auth/partials/social-buttons) */
.sg-social { display: flex; flex-direction: column; gap: 10px; }
.sg-social form { margin: 0; }
.sg .sg-fb { width: 22px; height: 22px; border-radius: 50%; background: #1877F2; color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.sg .sg-fb svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.sg .sg-btn2 .sg-g, .sg .sg-btn2 .sg-fb { margin-right: 2px; }