/*
 * 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: ""; 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; }
}