:root {
    --apc-orange: #F7941D;
    --on-brand-halo: 0 0 2px rgba(0,0,0,.55), 0 1px 1px rgba(0,0,0,.45);  /* soft dark halo sharpening white text on bright orange (design system) */
    --apc-orange-ink: #B45309;   /* accessible orange for text on white/light (audit §2.1) */
    --apc-black: #1A1A1B;
    --apc-charcoal: #333333;
    --apc-soft-grey: #555555;
    --apc-blue: #007AFF;        /* was hardcoded everywhere — now a variable */
    --apc-blue-bg: #0056b3;     /* used for item price colour */
    --apc-green: #28a745;       /* active badge colour */
    --apc-green-bg: #e6f4ea;
    --apc-amber: #FFF9F2;
    --apc-orange-light: #FFF4E6;
    --bg: #f2f2f7;
    --side-panel: #34373c;   /* dark carbon-charcoal page frame / drawer backdrop — Gary chose the dark carbon gutter (2026-08-01) */
    /* Dark carbon-fibre weave for the desktop page frame — fine 9px diagonal twill on the
       charcoal base. Desktop-only (see html / #drawerBackdrop). */
    --frame-image:
        linear-gradient(45deg,  rgba(0,0,0,0.10) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.10) 75%),
        linear-gradient(45deg,  rgba(0,0,0,0.10) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.10) 75%),
        linear-gradient(-45deg, rgba(255,255,255,0.07) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.07) 75%),
        linear-gradient(-45deg, rgba(255,255,255,0.07) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.07) 75%);
    --frame-position: 0 0, 4.5px 4.5px, 0 0, 4.5px 4.5px;
    --frame-size: 9px 9px;
    --white: #ffffff;
    /* Text ramp — one hierarchy, all AA-readable on white */
    --text-1: #333333;   /* primary body */
    --text-2: #595959;   /* secondary */
    --text-3: #767676;   /* meta / tertiary — lightest that still passes AA (was #888/#999/#aaa) */
    /* Tier colours — matches sign-up screen */
    --tier-personal: #F7941D;
    --tier-trade:    #16a34a;
    --tier-pro:      #1d4ed8;
    /* Elevation ladder — one depth scale for the whole app */
    --elev-1: 0 1px 4px rgba(0,0,0,0.07);    /* resting card */
    --elev-2: 0 2px 10px rgba(0,0,0,0.1);    /* raised / hover card */
    --elev-3: 0 4px 32px rgba(0,0,0,0.15);   /* drawer / side panel */
    --elev-4: 0 20px 60px rgba(0,0,0,0.3);   /* modal / lightbox */
    /* Radius scale — one ladder (design kit); kills the 4/7/9/10/14/18/20 drift */
    --r-xs:   6px;   /* chips, small pill inners */
    --r-sm:   8px;   /* buttons, inputs, small controls */
    --r-md:  12px;   /* cards, tiles */
    --r-lg:  16px;   /* overlays / drawers / modals */
    --r-pill: 999px; /* status badges, filter pills, toggles */
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    padding-bottom: 90px;
}

/* No iOS long-press "Save Image / Share" callout on images — keeps browsing app-like
   (screenshots + the in-app Share button still work). Also stops the tall/skinny lift
   preview iOS shows of a portrait source in a cropped card. */
img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* …except the lightbox: the full-screen photo view is where saving/sharing belongs, and it
   shows the whole image (correct aspect). A hold triggers save; any swipe/zoom cancels it. */
#imageLightbox img { -webkit-touch-callout: default; -webkit-user-select: auto; user-select: auto; }

@media (max-width: 899px) {
    body { overflow-x: hidden; }
}

.sidebar-open { overflow: hidden; }

/* HEADER */
.top-nav-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 3000;
    background: var(--white);
    box-shadow: var(--elev-2);
}

header {
    border-bottom: 5px solid var(--apc-orange);
    padding: 10px 15px 15px 15px;
    transition: border-bottom-color 0.3s;
}

.logo-main img {
    height: 62px;
    width: auto;
    display: block;
    margin: 0;
}

/* HEADER TOP ROW — logo on left, account pill on right */
.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 10px;
}

/* === MOBILE HEADER INBOX BUTTON === */
.header-inbox-btn {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--apc-orange);
    color: var(--apc-charcoal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 8px;
    flex-shrink: 0;
}
.header-inbox-btn svg { display: block; }
.header-inbox-btn.active svg,
.header-inbox-btn.signed-in svg { stroke: var(--apc-orange); }

/* Header profile / account-menu circle — swapped in from the bottom nav.
   Mobile only; desktop shows the account pill zone instead (see #accountPillZone). */
.header-profile-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: auto;   /* sit hard right, in line with the FILTER button below */
    padding: 7px;
    cursor: pointer;
    min-height: 44px;
    min-width: 44px;
    transition: opacity 0.12s ease;
}
.header-profile-btn:active { opacity: 0.5; }
@media (min-width: 900px) {
    .header-profile-btn { display: none !important; }
}

/* === NAV PROFILE CIRCLE (bottom nav) === */
.nav-profile-circle {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--apc-orange);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 900;
    overflow: hidden;
    flex-shrink: 0;
}
.nav-profile-circle.trade { background: var(--tier-trade); }
.nav-profile-circle.pro   { background: var(--tier-pro); }
.nav-profile-circle.signed-out {
    background: var(--apc-orange);
    border-radius: 20px;
    width: auto;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 700;
    color: white;
    letter-spacing: 0.2px;
}

/* Notification badge on profile nav item */
.nav-notif-badge {
    position: absolute;
    top: 4px; right: 8px;
    min-width: 16px; height: 16px;
    background: var(--apc-orange);
    color: #fff;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    border: 2px solid #fff;
    pointer-events: none;
}

/* === CENTRED MODAL SHELL ===
   Named .notify-* because the notify-buyers modal introduced it; that modal is gone (buyers
   are notified automatically now) but #checkListingsModal still uses this shell, so these
   rules are shared, not leftovers. Only the buyer-row styles were removed with it. */
.notify-modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.notify-modal.active { opacity: 1; }
.notify-modal-inner {
    background: #fff;
    width: 100%;
    max-width: 560px;
    border-radius: 20px;
    padding: 24px 20px 28px;
    max-height: 82vh;
    overflow-y: auto;
    transform: translateY(20px);
    transition: transform 0.28s ease;
}
.notify-modal.active .notify-modal-inner { transform: translateY(0); }
.notify-modal-title { font-size: 16px; font-weight: 900; color: #111; margin-bottom: 6px; }
.notify-modal-sub   { font-size: 12px; color: var(--text-3); margin-bottom: 18px; line-height: 1.5; }
.notify-modal-actions { display: flex; flex-direction: column; gap: 10px; }
.notify-skip-btn { background: none; border: none; color: var(--text-3); font-size: 13px; font-weight: 700; cursor: pointer; padding: 6px; text-align: center; }

/* Check listings modal — compact listing preview cards */
.check-listings-cards { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; max-height: 260px; overflow-y: auto; }
.check-listing-card {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #f8f8f8;
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: border-color 0.15s;
}
.check-listing-card:hover { border-color: var(--apc-orange); }
.check-listing-thumb {
    width: 52px;
    height: 52px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: #ddd;
}
.check-listing-info { flex: 1; min-width: 0; }
.check-listing-title { font-size: 13px; font-weight: 700; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.check-listing-meta  { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.check-listing-price { font-size: 13px; font-weight: 900; color: var(--apc-orange); margin-top: 4px; }

/* Wanted list — notification match banner */
.wanted-notif-banner {
    flex: 0 0 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #fff8f0;
    border: 1.5px solid var(--apc-orange);
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 6px;
    font-size: 12px;
}
.wanted-notif-banner-text { font-weight: 700; color: #111; flex: 1; }
.wanted-notif-banner-text span { display: block; font-size: 11px; font-weight: 400; color: var(--text-3); margin-top: 2px; }
.wanted-notif-view-btn { background: var(--apc-orange); color: var(--apc-black); border: none; border-radius: 8px; padding: 6px 12px; font-size: 11px; font-weight: 900; cursor: pointer; white-space: nowrap; }
.wanted-notif-found-btn { background: none; border: 1.5px solid #ccc; border-radius: 8px; padding: 6px 10px; font-size: 11px; font-weight: 700; color: #666; cursor: pointer; white-space: nowrap; margin-top: 6px; width: 100%; }
.wl-expired-banner { background: #f7f7f7; border-color: #ddd; }
.wl-expired-banner .wanted-notif-view-btn { background: var(--apc-orange); }

/* === ACCOUNT PILL === */
.account-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    color: white;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    transition: transform 0.1s ease;
    font-family: inherit;
}
.account-pill:active { transform: scale(0.97); }
.sign-up-prompt {
    display: none; /* hidden on mobile — shown via desktop media query */
    font-size: 11px;
    color: var(--text-3);
    text-align: center;
    margin-top: 6px;
    white-space: nowrap;
}
.sign-up-link {
    color: var(--apc-orange);
    font-weight: 700;
    text-decoration: none;
}
.sign-up-link:hover { text-decoration: underline; }
.account-pill.signed-out {
    background: var(--apc-orange);
    padding: 11px 22px;
    font-size: 13px;
    border-radius: 8px;
}
.account-pill.signed-in {
    background: #f8f8f8;
    padding: 6px 10px;
    border-radius: 24px;
    border: none;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--apc-orange), 0 0 8px rgba(0,0,0,0.15);
}
.account-pill.signed-in.tier-trade {
    box-shadow: 0 0 0 2px var(--tier-trade), 0 0 8px rgba(22,163,74,0.3);
}
.account-pill.signed-in.tier-pro {
    box-shadow: 0 0 0 2px var(--tier-pro), 0 0 8px rgba(29,78,216,0.3);
}
#accountPillRow {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 6px;
}
.tier-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    border-radius: 99px;
    padding: 2px 7px;
    line-height: 1.4;
    flex-shrink: 0;
}
.tier-badge.trade { background: var(--tier-trade); color: white; }
.tier-badge.pro   { background: var(--tier-pro);   color: white; }
.pill-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--apc-orange);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 900;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: none;
}
.pill-avatar.trade { background: var(--tier-trade); }
.pill-avatar.pro   { background: var(--tier-pro); }

/* ACCOUNT MENU AVATAR — shared by drawer + dropdown */
.account-menu-avatar {
    width: 40px; height: 40px;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 16px;
    background: var(--apc-orange);
    flex-shrink: 0;
}
.account-menu-name   { font-weight: 800; font-size: 14px; }
.account-menu-status { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-3); margin-top: 1px; }
.account-menu-status.trade { color: var(--tier-trade); font-weight: 800; }
.account-menu-status.pro   { color: var(--tier-pro);   font-weight: 800; }

/* ACCOUNT MENU DRAWER — mobile */
#accountMenuDrawer { z-index: 3200; }
.amenu-section {
    background: white;
    border-bottom: 8px solid #f4f4f4;
}
.amenu-section:last-child { border-bottom: none; }
@media (min-width: 900px) { .amenu-mobile-only { display: none !important; } }
.account-menu-chevron { margin-left: auto; color: #ddd; font-size: 18px; font-weight: 400; }
.account-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 15px 20px;
    border: none;
    border-bottom: 1px solid #f4f4f4;
    background: white;
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    color: var(--apc-charcoal);
    font-family: inherit;
    transition: background 0.12s;
}
.account-menu-item:last-child { border-bottom: none; }
.account-menu-item:hover { background: #fafafa; }
.account-menu-item:active { background: #f4f4f4; }
.account-menu-item.upgrade { color: var(--apc-blue); font-weight: 700; }
.account-menu-item.activate-search { font-weight: 700; }
.account-menu-item.activate-search.on { color: var(--apc-blue); }
.account-menu-item.logout { color: #c0392b; }

/* ACCOUNT DROPDOWN — desktop */
.acct-dropdown {
    display: none;
    position: fixed;
    right: max(0px, calc(50vw - 800px));
    top: 140px;
    width: 300px;
    background: white;
    border-radius: 14px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid #e8e8e8;
    z-index: 3900;
    overflow: hidden;
}
.acct-dropdown.active { display: block; }
.acct-dd-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    background: white;
}
.acct-dd-avatar { width: 44px !important; height: 44px !important; font-size: 18px !important; }
.acct-dd-name { font-size: 15px; font-weight: 800; color: #222; }
.acct-dd-tier { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-3); margin-top: 2px; }
.acct-dd-tier.pro { color: var(--apc-blue); }
.acct-dd-divider { height: 1px; background: #f0f0f0; margin: 0; }
.acct-dd-group { padding: 6px 0; }
.acct-dd-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 20px;
    border: none;
    background: none;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.1s, color 0.1s;
}
.acct-dd-item:hover { background: #fdf6ee; color: var(--apc-orange); }
.acct-dd-chevron { margin-left: auto; color: #ddd; font-size: 16px; }
.acct-dd-item:hover .acct-dd-chevron { color: var(--apc-orange); }
.acct-dd-upgrade { color: var(--apc-blue); font-weight: 700; }
.acct-dd-upgrade:hover { background: #eef4ff; color: var(--apc-blue); }
.acct-dd-signout { color: #c0392b; }
.acct-dd-signout:hover { background: #fff5f5; color: #c0392b; }

/* DETAIL OVERLAY — icon action buttons (share + save) */
.detail-icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid var(--apc-orange);
    background: white;
    color: var(--apc-orange);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
/* hover tint only on real pointer devices — prevents stuck highlight after tap on mobile */
@media (hover: hover) {
    .detail-icon-btn:hover { background: #fff7ef; }
}
.detail-icon-btn:active { background: #fff7ef; }
.detail-icon-btn svg { display: block; }
.detail-icon-btn.saved { background: var(--apc-orange); color: white; }
.detail-icon-btn.saved svg { fill: currentColor; }
.detail-icon-btn:focus { outline: none; background: inherit; }

/* Seller card in info col — hidden on mobile (shown in amber header instead) */
.detail-seller-col-card {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 16px 15px 14px 15px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    background: #fafafa;
}

.auth-tab-bar {
    display: flex;
    gap: 8px;
    padding: 0 20px 16px;
}
.forgot-pw-link {
    font-size: 13px;
    color: var(--text-3);
    text-decoration: none;
}
.forgot-pw-link:hover { color: var(--apc-orange); }
.pw-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.pw-wrap input {
    flex: 1;
    padding-right: 40px;
}
.pw-eye {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    line-height: 1;
    opacity: 0.5;
    transition: opacity 0.15s;
}
.pw-eye:hover { opacity: 1; }
.auth-error-banner {
    background: #fff1f2;
    border: 1.5px solid #f87171;
    border-radius: 8px;
    color: #991b1b;
}
.auth-error-banner.auth-status {
    background: #f0fdf4;
    border-color: #4ade80;
    color: #166534;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 14px;
    margin-bottom: 14px;
}
.username-suggestions {
    font-size: 13px;
    color: #666;
    margin-top: 6px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 2px;
}
.username-suggestion-btn {
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 13px;
    cursor: pointer;
    color: #333;
    transition: background 0.15s, border-color 0.15s;
}
.username-suggestion-btn:hover {
    background: #fff3e0;
    border-color: #e8890c;
    color: #b86e00;
}
.settings-name-error {
    font-size: 12px;
    color: #e53e3e;
    margin-top: 3px;
    padding-left: 2px;
}
.auth-tab {
    flex: 1;
    border: 1.5px solid #ddd;
    background: white;
    color: #555;
    border-radius: 8px;
    padding: 11px 0;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: 0.2px;
}
.auth-tab.active {
    background: var(--apc-orange);
    color: var(--apc-black);
    border-color: var(--apc-orange);
}

.auth-drawer-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--apc-charcoal);
    letter-spacing: 0.2px;
}
.auth-join-prompt {
    text-align: center;
    font-size: 12px;
    color: var(--text-3);
    margin: 14px 0 0 0;
}

/* Sign-up choice screen */
.auth-choice-heading {
    font-size: 14px;
    font-weight: 800;
    color: #333;
    text-align: center;
    margin: 0 0 16px;
}
.auth-type-choice {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
@media (min-width: 500px) {
    .auth-type-choice { flex-direction: row; }
}
.auth-type-card {
    flex: 1;
    border-radius: 14px;
    border: 2px solid #e8e8e8;
    padding: 16px 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: transform 0.15s, box-shadow 0.15s;
    background: white;
}
.auth-type-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
.auth-type-personal { border-top: 4px solid var(--apc-orange); }
.auth-type-trade    { border-top: 4px solid #16a34a; background: #f0fdf4; }
.auth-type-pro      { border-top: 4px solid #1d4ed8; background: #f0f5ff; }
.auth-type-pro-pill {
    display: inline-block;
    background: #1d4ed8;
    color: white;
    font-size: 9px;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.6px;
    align-self: flex-start;
    margin-bottom: 2px;
}
.auth-type-title {
    font-size: 15px;
    font-weight: 900;
    color: #222;
    line-height: 1.2;
}
.auth-type-desc {
    font-size: 11px;
    color: #777;
    line-height: 1.4;
}
.auth-type-perks {
    list-style: none;
    padding: 0;
    margin: 4px 0 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11px;
    color: #444;
    flex: 1;
}
.auth-type-perks li::before { content: '✓ '; color: #22c55e; font-weight: 900; }
.auth-type-tag {
    align-self: flex-start;
    font-size: 10px;
    font-weight: 800;
    border-radius: 999px;
    padding: 3px 10px;
    margin-top: auto;
}
.auth-tag-orange { background: #fff3e0; color: var(--apc-orange); }
.auth-tag-green  { background: #dcfce7; color: #16a34a; }
.auth-tag-blue   { background: #dbeafe; color: #1d4ed8; }

/* Sign-up forms */
.auth-back-btn {
    background: none;
    border: none;
    color: var(--text-3);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    margin-bottom: 14px;
    display: block;
}
.auth-back-btn:hover { color: #666; }
.auth-form-heading {
    font-size: 16px;
    font-weight: 900;
    color: #222;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.auth-pro-inline-badge {
    font-size: 9px;
    font-weight: 900;
    background: #1d4ed8;
    color: white;
    padding: 3px 8px;
    border-radius: 999px;
    letter-spacing: 0.5px;
    vertical-align: middle;
}
.auth-trade-inline-badge {
    font-size: 9px;
    font-weight: 900;
    background: #16a34a;
    color: white;
    padding: 3px 8px;
    border-radius: 999px;
    letter-spacing: 0.5px;
    vertical-align: middle;
}
.auth-trade-pill {
    display: inline-block;
    background: #16a34a;
    color: white;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    border-radius: 4px;
    padding: 2px 7px;
    margin-bottom: 6px;
}
.auth-trade-perks-box {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
}
.auth-trade-perks-box .auth-pro-perks-hdr { color: #16a34a; }
.auth-trade-perks-box .auth-pro-perks-grid { color: #374151; }
.auth-pro-perks-box {
    background: #f0f5ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
}
.auth-pro-perks-hdr {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1d4ed8;
    margin-bottom: 8px;
}
.auth-pro-perks-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 8px;
    font-size: 11px;
    color: #374151;
    font-weight: 600;
}

.banner-preview-wrap {
    margin-bottom: 20px;
}
.banner-colour-preview {
    width: 100%;
    height: 64px;
    border-radius: 10px;
    position: relative;
    overflow: visible;
}
.banner-preview-logo {
    position: absolute;
    bottom: -16px;
    left: 12px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: white;
    border: 2.5px solid white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 900;
    color: var(--apc-orange);
    overflow: hidden;
}

.banner-colour-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 4px 0;
}
.banner-colour-swatch {
    width: 38px; height: 38px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    transition: transform 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
}
.banner-colour-swatch:hover { transform: scale(1.12); }
.banner-colour-swatch.active {
    border-color: white;
    box-shadow: 0 0 0 2.5px #333, 0 2px 8px rgba(0,0,0,0.18);
}
/* Neutral (default) swatch is light — give it a subtle ring so it's visible */
.banner-colour-neutral:not(.active) { box-shadow: inset 0 0 0 1px #d0d0d8, 0 2px 6px rgba(0,0,0,0.1); }

.seller-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 18px;
    color: white;
    background: var(--apc-orange);
    box-shadow: 0 6px 16px rgba(247,148,29,0.18);
    overflow: hidden;
}

.seller-card-meta {
    flex: 1;
    min-width: 0;
}

.seller-card-name,
.detail-seller-name {
    font-size: 14px;
    font-weight: 800;
    color: #222;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-seller-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.seller-card-sub,
.detail-seller-sub {
    margin-top: 4px;
    font-size: 12px;
    color: #666;
    line-height: 1.3;
}

.seller-pro-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.5px;
    color: var(--tier-pro);
    background: rgba(29, 78, 216, 0.1);
}
.seller-trade-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.5px;
    color: var(--tier-trade);
    background: rgba(22, 163, 74, 0.1);
}
.trade-only-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.8px;
    color: #b45309;
    background: rgba(180, 83, 9, 0.1);
    border: 1px solid rgba(180, 83, 9, 0.2);
}

.detail-seller-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #EEE;
    border-radius: 18px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.detail-seller-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.08);
    background: #fafafa;
}

/* =====================
   SELLER STOREFRONT v2
   ===================== */

/* Back-to-listing context bar */
.storefront-back-bar {
    padding: 10px 16px;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
}
.storefront-back-bar button {
    background: none;
    border: none;
    color: var(--apc-orange);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
}

/* Floating close button */
.sf-close-btn {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 10;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(80,80,80,0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #fff;
    font-weight: 400;
}
/* Message Seller button */
.sf-msg-btn {
    background: var(--apc-orange); border: none; color: var(--apc-black);
    border-radius: 8px; padding: 9px 18px;
    font-size: 13px; font-weight: 800; cursor: pointer;
    font-family: inherit; white-space: nowrap;
    transition: background 0.15s;
}
.sf-msg-btn:hover { background: #DF7D0F; }

/* Inline heart save button in stat bar */
.sf-heart-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: none; border: none; padding: 0; margin: 0;
    cursor: pointer; font-family: inherit;
    color: #bbb;
    transition: color 0.15s;
    line-height: 1;
}
.sf-heart-btn:hover { color: var(--apc-orange); }
.sf-heart-btn.sf-save-btn-active { color: var(--apc-orange); }
.sf-heart-icon {
    font-size: 40px; line-height: 1;
    transition: transform 0.15s;
}
.sf-heart-btn.sf-save-btn-active .sf-heart-icon { transform: scale(1.1); }


/* Hero banner */
.sf-hero {
    background: linear-gradient(135deg, #eef0f4 0%, #e4e4ec 100%);  /* neutral default */
    height: 92px;
    position: relative;
    flex-shrink: 0;
    transition: height 0.2s ease;
}
/* Thin brand baseline — only on the neutral default (not over a chosen colour/image) */
.sf-hero::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: var(--apc-orange);
}
.sf-hero.sf-hero-color::after,
.sf-hero.has-banner::after { display: none; }
.sf-hero.has-banner { height: 150px; }

/* Logo circle — sits half over hero, half over identity (above the baseline line) */
.sf-logo-wrap {
    position: absolute;
    bottom: -44px;
    left: 20px;
    z-index: 1;
    width: 88px; height: 88px;
    border-radius: 50%;
    background: white;
    border: 3px solid white;
    box-shadow: 0 4px 20px rgba(0,0,0,0.22);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.sf-logo-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.sf-logo-initials {
    font-size: 32px; font-weight: 900;
    color: var(--apc-orange);
}

/* Identity block */
.sf-identity {
    padding: 54px 20px 14px 20px;
    display: flex; flex-direction: column; gap: 6px;
    border-bottom: 1px solid #f0f0f0;
}
.sf-name-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.sf-business-name {
    font-size: 20px; font-weight: 900; color: var(--apc-charcoal);
}
.sf-abn-chip {
    font-size: 10px; font-weight: 800;
    background: #dcfce7; color: #16a34a;
    border-radius: 99px; padding: 3px 9px;
    letter-spacing: 0.3px;
}

/* Inline stat bar: Name | 15 Listings | 188 Saves | ★ 4.9 Rating */
.sf-stat-bar {
    display: flex; align-items: center; gap: 0; flex-wrap: wrap;
}
.sf-bar-name {
    font-size: 14px; font-weight: 800; color: var(--apc-charcoal);
    padding-right: 12px;
}
.sf-bar-divider {
    width: 1px; height: 14px; background: #ddd; flex-shrink: 0; margin: 0 12px;
}
.sf-bar-stat {
    font-size: 13px; color: #555; font-weight: 500; white-space: nowrap;
}
.sf-rating-stat {
    color: #f59e0b; font-weight: 700; cursor: pointer;
}
.sf-rating-stat:hover { text-decoration: underline; }
.sf-bar-num {
    font-weight: 800; color: var(--apc-charcoal);
}

/* About */
.sf-about-section {
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f0;
}
.sf-about-text {
    font-size: 13px; color: #555; line-height: 1.55;
}

/* Contact details — prominent, directly under the business name */
.sf-contact {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
    font-size: 13px; font-weight: 600; color: var(--text-2);
}
.sf-contact-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.sf-contact-link { color: var(--apc-orange-ink, #B45309); text-decoration: none; cursor: pointer; }
.sf-contact-link:hover { text-decoration: underline; }

/* Action group — toggle + message + heart, kept together, right-aligned */
.sf-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* Parts / Services mode toggle (segmented control, inline with the action group) */
.sf-mode-toggle {
    display: flex; gap: 4px;
    padding: 3px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: var(--r-md, 10px);
}
.sf-mode-btn {
    background: none; border: none;
    padding: 6px 14px;
    border-radius: var(--r-sm, 8px);
    font-family: inherit; font-size: 12.5px; font-weight: 700;
    color: var(--text-2); cursor: pointer;
    white-space: nowrap;
}
.sf-mode-btn.sf-mode-active {
    background: #fff; color: var(--apc-charcoal, #333);
    box-shadow: var(--elev-1);
}
.sf-mode-count { color: var(--text-3); font-weight: 700; }
.sf-mode-btn.sf-mode-active .sf-mode-count { color: var(--apc-orange); }

/* Workshop / service storefront sections */
.sf-section {
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f0;
}
.sf-section-label {
    font-size: 10px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.6px; color: var(--apc-orange);
    margin-bottom: 10px;
}
.sf-chips-wrap { display: flex; flex-wrap: wrap; gap: 7px; }
.sf-chip {
    background: #f4f4f4; color: #333;
    font-size: 12px; font-weight: 600;
    padding: 5px 11px; border-radius: 20px;
}
.sf-address { font-size: 13px; color: #555; }
.sf-parts-condition { font-size: 12px; color: var(--text-3); margin-top: 8px; font-style: italic; }

/* Search */
.sf-search-wrap {
    padding: 12px 15px 8px;
}
.sf-search-input {
    width: 100%; padding: 10px 16px;
    border-radius: 8px; border: 1.5px solid #e8e8e8;
    font-size: 13px; outline: none; background: #f9f9f9;
    box-sizing: border-box;
    font-family: inherit;
}
.sf-search-input:focus { border-color: var(--apc-orange); background: white; }

/* Settings — logo upload */
.logo-upload-preview {
    width: 64px; height: 64px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--apc-orange);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.logo-upload-btn {
    display: inline-block;
    padding: 7px 14px;
    background: #f0f0f0;
    border-radius: 8px;
    font-size: 12px; font-weight: 700; color: #444;
    cursor: pointer;
    transition: background 0.15s;
}
.logo-upload-btn:hover { background: #e4e4e4; }
.logo-remove-btn {
    padding: 7px 14px;
    background: none;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    font-size: 12px; font-weight: 700; color: #e53935;
    cursor: pointer;
}
.banner-upload-preview {
    width: 100%; height: 80px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--apc-orange) 0%, color-mix(in srgb, var(--apc-orange) 80%, #000) 100%);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    position: relative;
}
/* === VEHICLE MAKES PICKER === */
.makes-picker-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    background: #fafafa;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    gap: 8px;
}
.makes-picker-btn:active { background: #f0f0f0; }
.makes-summary { font-size: 13px; font-weight: 600; color: var(--apc-charcoal); flex: 1; }
.makes-summary-empty { color: #bbb; font-weight: 500; }
.makes-picker-chevron { font-size: 20px; color: #bbb; line-height: 1; }
.makes-all-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 0 10px;
    font-size: 15px;
    font-weight: 800;
}
.makes-all-label { font-size: 15px; font-weight: 800; color: var(--apc-charcoal); }
.makes-all-hint { font-size: 12px; color: var(--text-3); padding-bottom: 10px; }
.makes-separator { height: 1px; background: #ececec; margin: 0 0 8px; }
.makes-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0; }
.makes-item {
    padding: 8px 14px;
    border: 1.5px solid #e0e0e0;
    border-bottom: 1.5px solid #e0e0e0;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    background: #fff;
    gap: 0;
    line-height: 1.3;
}
.makes-item input[type="checkbox"] { display: none; }
.makes-item:has(input:checked) {
    background: #F7941D;
    border-color: #F7941D;
    color: var(--apc-black);
    font-weight: 700;
}
.makes-done-bar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 12px 16px;
    background: white;
    border-top: 1px solid #eee;
}

.apc-badge-trigger-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 13px 16px;
    background: #fff7ee;
    border: 1.5px solid var(--apc-orange);
    border-radius: 12px;
    color: var(--apc-orange);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s;
}
.apc-badge-trigger-btn:hover { background: #ffecd4; }

.ws-service-group { margin-bottom: 16px; }
.input-group-row { display: flex; gap: 10px; align-items: flex-start; }
.input-group-row .input-group { margin-bottom: 0; }
.ws-group-label {
    font-size: 10px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.6px; color: var(--apc-orange);
    margin-bottom: 8px; padding-bottom: 4px;
    border-bottom: 1.5px solid #f0f0f0;
}
.prof-media-remove-btn {
    position: absolute; bottom: 8px; right: 8px;
    background: rgba(0,0,0,0.45); color: white; border: none;
    border-radius: 6px; padding: 4px 10px; font-size: 11px; font-weight: 700;
    cursor: pointer; font-family: inherit;
}
.settings-about-input {
    width: 100%; padding: 10px 12px;
    border-radius: 10px; border: 1.5px solid #e8e8e8;
    font-size: 13px; font-family: inherit;
    resize: none; outline: none;
    box-sizing: border-box; color: #333;
}
.settings-about-input:focus { border-color: var(--apc-orange); }

.menu-divider { height: 1px; background: #eee; margin: 4px 0; }

/* On/off switch inside the menu */
.switch {
    margin-left: auto;
    width: 34px; height: 20px;
    background: #ccc;
    border-radius: 999px;
    position: relative;
    transition: background 0.15s;
    flex-shrink: 0;
}
.switch::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    background: white;
    border-radius: 50%;
    transition: left 0.15s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.switch.on { background: var(--apc-blue); }
.switch.on::after { left: 16px; }

.search-group { display: flex; border-radius: 8px; overflow: hidden; border: 1px solid #ccc; background: white; }
.filter-status-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 6px;
    font-size: 12px;
    font-weight: 600;
    color: #666;
}
.filter-status-chip span { flex: none; }
.filter-status-chip button {
    background: none;
    border: none;
    color: var(--apc-orange);
    font-weight: 800;
    font-size: 11px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}
.search-group input { flex: 1; border: none; padding: 12px; font-size: 16px; outline: none; }
.btn-search-main { background: var(--apc-orange); border: none; width: 50px; font-size: 18px; color: var(--apc-black); cursor: pointer; }
.btn-search-filters {
    background: var(--apc-orange);
    border: none;
    padding: 0 18px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    cursor: pointer;
    color: var(--apc-black);
    font-family: inherit;
    text-transform: uppercase;
    white-space: nowrap;
}
.btn-search-filters:active { background: var(--apc-orange-dark, #d97c0c); }



/* GRID HEADING — "Recently Listed" / "Results for X" */

.grid-heading {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 10px 4px;
}
.grid-heading-label {
    font-size: 13px;
    font-weight: 800;
    color: #333;
    letter-spacing: -0.1px;
}
.grid-heading-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
}

/* RESULTS GRID */
.results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    padding: 5px 0px;
    background: var(--bg);
    margin-top: 0;
}
/* My Listings — keep non-grid elements inset while grid is full-bleed */
#myPartsDrawer .my-listings-tabs { padding: 0 15px; }
#myPartsDrawer .ml-away-banner   { margin-left: 15px; margin-right: 15px; }
#sellerPartsGrid {
    margin-top: 0 !important;
}

/* ITEM CARD */
.item-card {
    background: white;
    overflow: hidden;
    position: relative;
    border-radius: 0px;
    border: 0px solid #ddd;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.12s ease;
}

/* ── Accessibility: screen-reader-only text, skip link, keyboard focus ── */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
    position: fixed; top: -60px; left: 12px; z-index: 100000;
    background: #1a1a2e; color: #fff; padding: 10px 16px; border-radius: 8px;
    font-size: 14px; font-weight: 700; text-decoration: none;
    transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }
/* Visible keyboard-focus ring — !important so it wins over the many :focus
   { outline:none } rules (those target mouse :focus; this only shows for
   keyboard/AT users via :focus-visible). */
:focus-visible {
    outline: 2px solid #0a5bd3 !important;
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── Tap feedback: a phone has no hover, so acknowledge every press ── */
.item-card:active { transform: scale(0.975); }
.nav-item { transition: opacity 0.12s ease; }
.nav-item:active { opacity: 0.5; }
/* Buttons dim on press rather than scale — scale would clobber the positioning transform
   on centred buttons (e.g. the lightbox/carousel arrows use translateY(-50%)) and make them
   jump out from under the cursor, dropping the click. */
button:active { filter: brightness(0.9); }

/* Pending banner — amber strip across top of listing card */
.card-pending-banner {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 2;
    background: #f59e0b;
    color: white;
    font-size: 10px; font-weight: 900;
    letter-spacing: 1px;
    text-align: center;
    padding: 4px 0;
    border-radius: 10px 10px 0 0;
}

/* Pending banner in detail overlay */
.detail-pending-banner {
    margin: 0 0 0 0;
    padding: 10px 15px;
    background: #fef3c7;
    border-bottom: 2px solid #f59e0b;
    font-size: 12px; font-weight: 800;
    color: #92400e;
    letter-spacing: 0.3px;
}

/* Sell form inline error banner */
.sell-error-banner {
    margin: 12px 15px 0;
    padding: 10px 14px;
    background: #fff1f2;
    border: 1.5px solid #f87171;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #991b1b;
}

/* Dashboard pending chip */
.dash-pending-chip {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #f59e0b;
    border-radius: 99px;
    font-size: 10px; font-weight: 800;
    letter-spacing: 0.5px;
}

/* Load More button */
.grid-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #e0e0e0;
    border-top-color: var(--apc-orange);
    border-radius: 50%;
    animation: gridSpin 0.7s linear infinite;
    flex-shrink: 0;
}
@keyframes gridSpin { to { transform: rotate(360deg); } }

/* Saved indicator — orange heart top-right of saved cards, non-interactive */
.card-saved-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    color: var(--apc-orange);
    font-size: 22px;
    line-height: 1;
    pointer-events: none;
    text-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

.item-img-wrap {
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    background: #f4f4f4;
}
.item-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* No-photo counter-sale (quick) part — a labelled tile instead of a broken image */
.item-img-quickpart {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff5ee;
    color: #F7941D;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
}

.item-info {
    padding: 8px;
}

/* ── Skeleton loading cards ─────────────────────────────── */
@keyframes shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}
.skeleton-card {
    background: white;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.skeleton-line {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 600px 100%;
    animation: shimmer 1.4s ease-in-out infinite;
    border-radius: 4px;
}
.skeleton-img  { width: 100%; aspect-ratio: 1/1; border-radius: 0; }
.skeleton-info { padding: 8px; display: flex; flex-direction: column; gap: 7px; }
.skeleton-price { height: 16px; width: 55px; }
.skeleton-title { height: 13px; width: 88%; }
.skeleton-title2 { height: 13px; width: 65%; }
.skeleton-loc   { height: 11px; width: 48%; margin-top: 2px; }

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.item-price { 
    font-weight: 900; 
    color: var(--apc-blue-bg);   /* was hardcoded #0056b3 */
    font-size: 15px; 
}

.fitting-pill {
    background: rgba(247, 148, 29, 0.1);
    color: var(--apc-orange);
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.5px;
    border: 1px solid rgba(247, 148, 29, 0.3);
}

.item-card-pro-btn {
    border: none;
    background: var(--apc-orange);
    color: var(--apc-black);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.5px;
    cursor: default;
    white-space: nowrap;
}

.blurred-location {
    filter: blur(4px);
    opacity: 0.65;
    display: inline-block;
}

.blurred-detail {
    filter: blur(5px);
    opacity: 0.55;
    pointer-events: none;
}

/* Wrapper that holds blurred content + sign-in prompt */
.detail-locked-group {
    position: relative;
    transition: filter 0.15s ease, opacity 0.15s ease;
}
.detail-signin-overlay {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.08);
    border-radius: 10px;
    cursor: pointer;
    z-index: 2;
}
.detail-signin-overlay span {
    background: rgba(255,255,255,0.92);
    color: #555;
    font-size: 11px;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 20px;
    letter-spacing: 0.3px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.blurred-active + .detail-signin-overlay,
.detail-locked-group.locked .detail-signin-overlay {
    display: flex;
}

.detail-signin-prompt {
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.image-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 3400;
    align-items: center;
    justify-content: center;
    padding: 15px;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(12px);
}

.image-lightbox.active {
    display: flex;
}

.image-lightbox-inner {
    position: relative;
    width: 100%;
    max-width: 980px;
    max-height: 92vh;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.35);
    will-change: transform;
    touch-action: none; /* JS owns pan/pinch — stops the browser running its own (iOS page zoom) */
}
.lightbox-strip img { transform-origin: center center; }

/* Mobile: lightbox is full-screen so the image is edge-to-edge and can grow past the
   viewport when zoomed — no fixed "porthole" card. (Desktop keeps the centred modal.) */
@media (max-width: 899px) {
    .image-lightbox { padding: 0; background: #000; }
    .image-lightbox-inner {
        max-width: none; max-height: none;
        width: 100%; height: 100%;
        border-radius: 0;
    }
    .lightbox-strip { width: 300%; height: 100%; align-items: center; }
    .image-lightbox img,
    .lightbox-strip img { max-height: 100vh; height: 100vh; object-fit: contain; }
}

.image-lightbox img {
    width: 100%;
    height: auto;
    max-height: 92vh;
    object-fit: contain;
    display: block;
    background: #111;
}

.lightbox-strip {
    display: flex;
    width: 300%;
    transform: translateX(-33.333%);
}
.lightbox-strip img {
    width: 33.333%;
    max-height: 92vh;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
    background: #111;
}

.image-lightbox-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 999px;
    background: rgba(0,0,0,0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: white;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 999px;
    background: rgba(0,0,0,0.45);
    color: white;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.lightbox-nav:hover { background: rgba(0,0,0,0.7); }
.lightbox-prev { left: 14px; }
.lightbox-next { right: 14px; }
.lightbox-dots {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
    pointer-events: auto;
}

.item-title {
    font-size: 11px;
    font-weight: 700;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 0 4px 0;
}

.item-loc {
    font-size: 9px;
    color: var(--text-3);
    font-weight: 700;
}
.item-rating { font-size: 10px; font-weight: 700; color: #F7941D; margin-top: 3px; }
.item-rating-count { color: var(--text-3); font-weight: 500; }
.item-fits {
    font-size: 9px;
    font-weight: 700;
    color: #F7941D;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

/* Mobile: hide account pill zone (profile goes to bottom nav circle) */
@media (max-width: 899px) {
    #accountPillZone { display: none !important; }
}

/* BOTTOM NAV */
.bottom-nav {
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    background: var(--white);
    display: flex; justify-content: space-around; align-items: center;
    height: 75px; border-top: 1px solid #ddd; z-index: 1500;
    transition: transform 0.3s ease;
}
.nav-hidden { transform: translateY(110%); }
.nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--apc-charcoal); font-size: 15px; font-weight: 800; flex: 1; cursor: pointer; position: relative; letter-spacing: 0.2px; }
.nav-item.active { color: var(--apc-orange); }
.nav-sell {
    background: var(--apc-orange);
    color: var(--apc-black) !important;
    border-radius: 12px;
    margin: 6px 8px;
    justify-content: center;
    font-size: 15px;
    box-shadow: 0 3px 10px rgba(247, 148, 29, 0.35);
}

/* DRAWER SYSTEM */
.drawer {
    display: none;
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: var(--white); z-index: 3100; flex-direction: column;
    overflow-x: hidden;
}
/* Detail overlay always stacks on top of any other open drawer */
#detailOverlay { z-index: 3700; }

/* Chat reference card — centred floating modal */
#detailOverlay.chat-card {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%);
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    max-height: 78vh !important;
    height: auto !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 50px rgba(0,0,0,0.3) !important;
}
#detailOverlay.chat-card .detail-sell-yours-block,
#detailOverlay.chat-card #sellYoursMobile { display: none !important; }

.carousel-arrow {
    display: none;
    position: absolute;
    top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,0.45);
    color: #fff;
    border: none;
    width: 36px; height: 36px;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.carousel-arrow-prev { left: 8px; }
.carousel-arrow-next { right: 8px; }
#detailOverlay.chat-card .carousel-arrow { display: flex; }
#detailOverlay.chat-card #imageCarousel { scrollbar-width: none; -ms-overflow-style: none; }
#detailOverlay.chat-card #imageCarousel::-webkit-scrollbar { display: none; }
/* On mobile, chat-card becomes a standard full-screen drawer so pull-down-to-close works */
@media (max-width: 899px) {
    #detailOverlay.chat-card {
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none;
        height: 100% !important;
        max-height: none !important;
        border-radius: 0 !important;
        width: 100% !important;
    }
}

/* On desktop, chat-card: centred 520px modal, single-column layout */
@media (min-width: 900px) {
    #detailOverlay.chat-card {
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%);
        width: 520px !important;
        border-left: none !important;
        border-right: none !important;
    }
    #detailOverlay.chat-card #detailScrollArea {
        display: flex !important;
        grid-template-columns: unset !important;
        height: 100% !important;
        overflow-y: auto !important;
    }
    #detailOverlay.chat-card .desktop-detail-images { display: none !important; }
    #detailOverlay.chat-card .mobile-carousel { display: block !important; }
}

/* VSC detail: exact same dimensions/aesthetic as sellOverlay floating card */
#detailOverlay.vsc-modal {
    background: #fff !important;
    bottom: 16px !important;
    border-radius: 16px !important;
    box-shadow: var(--elev-3) !important;
    border: none !important;
    overflow: hidden !important;
    transform: none !important;
    padding: 0 !important;
}
#detailOverlay.vsc-modal .detail-drag-handle-bar { display: none !important; }
/* Show the circular floating close button in this mode */
#detailOverlay.vsc-modal .detail-float-close { display: flex !important; }
/* Hide sections not needed in pro stock reference view */
#detailOverlay.vsc-modal #dynamicDetailFooter     { display: none !important; }
#detailOverlay.vsc-modal .detail-sell-yours-block { display: none !important; }
#detailOverlay.vsc-modal #sellYoursMobile         { display: none !important; }
#detailOverlay.vsc-modal #detailWorkshopSection   { display: none !important; }
/* Breathing room so right-column content doesn't clip at card edge */
#detailOverlay.vsc-modal .detail-info-col         { padding-right: 20px !important; }
#detailOverlay.vsc-modal #detailScrollArea {
    width: 100% !important; max-width: none !important;
    height: calc(100% - 62px) !important; max-height: none !important;
    border-radius: 0 !important; box-shadow: none !important;
    overflow-y: auto !important; flex: 1;
}
@media (min-width: 900px) {
    #detailOverlay.vsc-modal {
        left: calc(max(0px, 50vw - 800px) + 240px) !important;
        right: calc(max(0px, 50vw - 800px) + 220px) !important;
        width: auto !important;
    }
    /* Let the natural 2-column layout show — images left, info right */
    #detailOverlay.vsc-modal #detailScrollArea {
        height: calc(100% - 62px) !important;
        max-height: none !important;
    }
}
@media (max-width: 899px) {
    #detailOverlay.vsc-modal {
        left: 0 !important; right: 0 !important; transform: none !important;
        top: 0 !important; bottom: 0 !important;
        width: 100% !important; border-radius: 0 !important;
    }
}

/* Inbox and chat sit above the detail overlay so Message Seller works from a listing */
#inboxDrawer, #chatDrawer, #messageDetailDrawer { z-index: 3750; }
/* Filter drawer sits below the header on all screen sizes */
#filterDrawer { z-index: 2000; }
.drawer.active {
    display: flex !important;
}
.drawer-header { padding: 15px 18px; min-height: 60px; border-bottom: none; display: flex; justify-content: space-between; align-items: center; font-weight: 900; background: white; box-sizing: border-box; flex-shrink: 0; }

/* Uniform drawer header button — outlined accent pill */
.dh-btn {
    background: none;
    border: 1.5px solid var(--apc-orange);
    color: var(--apc-orange);
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.dh-btn:hover { background: var(--apc-orange); color: var(--apc-black); }

/* Uniform drawer header close × */
.dh-close {
    font-size: 34px;
    line-height: 1;
    font-weight: 300;
    color: var(--text-3);
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
}

/* Floating close button — desktop detail overlay only, hidden on mobile */
.detail-float-close {
    display: none;
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 10;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.92);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    font-size: 22px;
    font-weight: 300;
    color: #555;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.detail-float-close:hover { background: #fff; color: #111; }

.back-btn {
    font-size: 18px;
    cursor: pointer;
    color: var(--apc-orange);
    font-weight: 800;
    padding: 5px 10px;
    border-radius: 8px;
    transition: background 0.15s;
}
.back-btn:hover { background: rgba(255, 138, 51, 0.1); }
.drawer-content { padding: 15px; flex: 1; overflow-y: auto; overflow-x: hidden; background: white; padding-bottom: 100px; }

/* ── Image crop modals (avatar / sponsored card / banner) ──────────────
   Each viewport dims the page with a 9999px spotlight box-shadow. Lift every
   other child (title, hint, zoom slider, buttons) above it so the controls
   aren't veiled by the shadow. */
#picCropModal    > :not(#picCropViewport),
#spbCropModal    > :not(#spbCropViewport),
#bannerCropModal > :not(#bannerCropViewport) { position: relative; z-index: 1; }

.crop-zoom-row { display: flex; align-items: center; gap: 13px; }
.crop-zoom-ico { color: rgba(255,255,255,0.55); font-weight: 700; line-height: 1; user-select: none; font-size: 15px; }
.crop-zoom-ico-lg { font-size: 22px; }
.crop-zoom-slider {
    -webkit-appearance: none; appearance: none;
    width: 240px; max-width: calc(100vw - 110px); height: 5px; margin: 0;
    border-radius: 5px; background: rgba(255,255,255,0.28); outline: none; cursor: pointer;
}
.crop-zoom-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--apc-orange); border: 3px solid #fff;
    box-shadow: 0 1px 5px rgba(0,0,0,0.45); cursor: grab;
}
.crop-zoom-slider::-webkit-slider-thumb:active { cursor: grabbing; }
.crop-zoom-slider::-moz-range-thumb {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--apc-orange); border: 3px solid #fff;
    box-shadow: 0 1px 5px rgba(0,0,0,0.45); cursor: grab;
}

.detail-workshop-section {
    padding: 15px 0 0 0;
}
.workshop-sponsored-badge {
    font-size: 10px;
    color: #FF9800;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.workshop-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    cursor: pointer;
    min-width: 0;
}
.workshop-card:active { background: #fafafa; }
.workshop-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.ws-card-logo {
    width: 36px; height: 36px;
    border-radius: 50%; object-fit: cover; flex-shrink: 0;
    border: 1px solid #eee;
}
.ws-card-initials {
    width: 36px; height: 36px; border-radius: 50%;
    background: #1a1a2e; color: #fff;
    font-size: 12px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.workshop-card-name {
    font-size: 13px;
    font-weight: 800;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.workshop-card-distance {
    font-size: 11px;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ws-card-see-more {
    font-size: 11px;
    font-weight: 700;
    color: var(--apc-orange);
    white-space: nowrap;
    flex-shrink: 0;
}
.workshop-card-specialty {
    font-size: 12px;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Workshop detail overlay */
#wsOverlayBackdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 3769;
}
#wsOverlayBackdrop.active { display: block; }
@media (max-width: 899px) {
    #wsOverlayBackdrop.active { display: none; }
}
#workshopDetailOverlay { z-index: 3770; }
@media (min-width: 900px) {
    #workshopDetailOverlay {
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        width: 480px !important;
        transform: translate(-50%, -50%) !important;
        border-radius: 16px !important;
        box-shadow: 0 8px 50px rgba(0,0,0,0.3) !important;
        max-height: 85vh !important;
        overflow: hidden !important;
    }
    #workshopDetailDrawer {
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        width: 520px !important;
        transform: translate(-50%, -50%) !important;
        border-radius: 16px !important;
        box-shadow: 0 8px 50px rgba(0,0,0,0.3) !important;
        max-height: 88vh !important;
        overflow: hidden !important;
    }
    #workshopDetailDrawer .drawer-content { overflow-y: auto; }
}
.ws-overlay-header-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 16px;
}
.ws-overlay-logo {
    width: 64px; height: 64px;
    border-radius: 50%; object-fit: cover; flex-shrink: 0;
    border: 1px solid #eee;
}
.ws-overlay-initials {
    width: 64px; height: 64px; border-radius: 50%;
    background: #1a1a2e; color: #fff;
    font-size: 20px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ws-overlay-name  { font-size: 17px; font-weight: 800; color: #222; }
.ws-overlay-loc   { font-size: 13px; color: #666; margin-top: 3px; }
.ws-overlay-addr  { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.ws-overlay-about {
    font-size: 14px; color: #555; line-height: 1.55;
    margin: 0 0 16px;
}
.ws-overlay-section-label {
    font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--text-3);
    margin-bottom: 8px;
}
.ws-overlay-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 18px;
}
.workshop-sponsor-grid {
    display: grid;
    gap: 8px;
}

/* WORKSHOP EMPTY STATE */
.workshop-empty-state {
    text-align: center;
    padding: 48px 20px 40px;
    color: var(--text-3);
}
.workshop-empty-icon { font-size: 36px; margin-bottom: 12px; }
.workshop-empty-title { font-size: 15px; font-weight: 800; color: #666; margin-bottom: 6px; }
.workshop-empty-sub { font-size: 13px; margin-bottom: 18px; }
.workshop-empty-cta {
    background: var(--apc-orange);
    color: var(--apc-black);
    border: none;
    border-radius: 999px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
}

/* WORKSHOP DETAIL DRAWER */
.wsd-hero {
    background: linear-gradient(135deg, #2e2820 0%, #1c1812 100%);
    padding: 20px 20px 16px;
    color: white;
}
.wsd-name  { font-size: 18px; font-weight: 900; margin-bottom: 4px; }
.wsd-loc   { font-size: 12px; opacity: 0.85; margin-bottom: 6px; }
.wsd-phone { display: block; font-size: 14px; font-weight: 700; color: #F7941D; text-decoration: none; margin-bottom: 8px; }
.wsd-meta-row { display: flex; align-items: center; gap: 12px; font-size: 12px; }
.wsd-rating { font-weight: 800; }
.wsd-distance { opacity: 0.85; }
.wsd-section { padding: 14px 20px; border-bottom: 1px solid #f0f0f0; }
.wsd-section h4 { font-size: 10px; text-transform: uppercase; color: var(--text-3); font-weight: 800; letter-spacing: 0.5px; margin: 0 0 8px; }
.wsd-specialty { font-size: 14px; color: #333; line-height: 1.5; }
.wsd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wsd-chip {
    background: #f0f0f0;
    color: #444;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}
.wsd-contact-btn {
    margin: 20px;
    width: calc(100% - 40px);
    padding: 14px;
    background: var(--apc-orange);
    color: var(--apc-black);
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    font-family: inherit;
    box-sizing: border-box;
}

/* GARAGE — vehicle cards */
.garage-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 4px;
}
.garage-row {
    background: white;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    border-left: 4px solid transparent;
    box-shadow: var(--elev-1);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.garage-row:active { opacity: 0.85; }
.garage-row-selected {
    border-left-color: var(--apc-orange);
    box-shadow: var(--elev-2);
}
.garage-row-info { flex: 1; min-width: 0; }
.garage-row-name { font-weight: 800; font-size: 14px; color: var(--apc-charcoal); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.garage-row-meta { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.garage-row-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.garage-row-edit {
    background: none;
    border: 1.5px solid #e0e0e0;
    border-radius: 20px;
    padding: 5px 13px;
    font-size: 12px;
    font-weight: 700;
    color: #777;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, color 0.15s;
}
.garage-row-edit:hover { border-color: var(--apc-orange); color: var(--apc-orange); }
.garage-row-delete {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #ddd;
    padding: 0 2px;
    font-family: inherit;
    transition: color 0.15s;
}
.garage-row-delete:hover { color: #ff3b30; }

#garageDrawer .drawer-content { padding-top: 20px; }
.garage-two-col { display: flex; flex-direction: column; height: 100%; background: #fff; }
.garage-left-col { flex-shrink: 0; }
.garage-right-col { flex: 1; overflow-y: auto; }
.garage-chips-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;          /* swipe across, never wrap onto a second line */
    gap: 8px;
    overflow-x: auto;
    /* overflow-x:auto makes overflow-y clip as well, so the match badge — top:-6px plus a 2px
       white halo, i.e. 8px proud of the chip — was being sliced in half by the scroll box.
       This is headroom for the badge, not decoration; don't reclaim it. */
    padding-top: 10px;
    padding-bottom: 8px;   /* tightened — the indicator bar below now occupies that space */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.garage-chips-bar::-webkit-scrollbar { display: none; }

/* Swipe indicator. The native scrollbar is deliberately hidden, so without this there is
   nothing whatsoever telling a user more vehicles exist off the right edge. Rendered only
   when the strip actually overflows — a track that is always visible would imply hidden
   content even when there is none. */
/* Short and centred, not full-width: flush-left and long, it read as an underline attached to
   the strip rather than a position indicator. A stubby centred track is unmistakably "you are
   here, there is more that way". */
.chips-scroll-track {
    height: 4px;
    width: 84px;
    max-width: 40%;
    border-radius: 999px;
    background: #dcdcdc;
    margin: 2px auto 14px;
    overflow: hidden;
    position: relative;
}
.chips-scroll-thumb {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--apc-orange);
    transition: left 0.08s linear;
}

/* Match count on a vehicle chip — which car got the hit, rather than a bare number on the
   menu that only said "something, somewhere". Orange: a live match still waiting on you,
   not an alert. New matches are announced by the red badge on the menu instead. */
/* position: for the hit badge. touch-callout/user-select: a long press on the chip is our
   own remove gesture, so iOS must not pop its selection/callout menu over the top of it. */
.garage-chip {
    position: relative;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
.garage-chip-hits {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--apc-orange);
    color: var(--apc-black);
    font-size: 10px;
    font-weight: 900;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}
.garage-chip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
    background: white;
    border: 1.5px solid #e0e0e0;
    border-radius: 12px;
    padding: 10px 14px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s;
}
.garage-chip.active {
    border-color: var(--apc-orange);
    background: rgba(0,0,0,0.04);
}
.garage-chip:active { opacity: 0.8; }
.garage-chip-name {
    font-weight: 800;
    font-size: 13px;
    color: var(--apc-charcoal);
    white-space: nowrap;
}
.garage-chip.active .garage-chip-name { color: var(--apc-orange); }
.garage-chip-year {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 2px;
    white-space: nowrap;
}
.garage-vehicle-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 0 2px;
}
.garage-vh-name {
    font-size: 13px;
    font-weight: 700;
    color: #333;
}
.garage-vh-namewrap { display: flex; align-items: center; gap: 7px; min-width: 0; }
.garage-vh-edit-pencil {
    background: none;
    border: none;
    color: #bbb;
    cursor: pointer;
    padding: 3px;
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}
.garage-vh-edit-pencil:hover { color: var(--apc-orange); background: rgba(247,148,29,0.08); }
.garage-vh-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.garage-vh-edit {
    background: none;
    border: 1.5px solid #e0e0e0;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #777;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, color 0.15s;
}
.garage-vh-edit:hover { border-color: var(--apc-orange); color: var(--apc-orange); }
.garage-vh-delete {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #ddd;
    padding: 0 2px;
    font-family: inherit;
    transition: color 0.15s;
}
.garage-vh-delete:hover { color: #ff3b30; }

/* ── GARAGE HUB — car-centric, parts-first (shared desktop + mobile) ── */
.garage-chip-universal .garage-chip-name { color: var(--text-3); }
.garage-chip-universal.active .garage-chip-name { color: var(--apc-orange); }

#garageInlineTabContent { padding: 0 2px 30px; }

.gh-section { margin-bottom: 22px; }
.gh-section.gh-group { margin-bottom: 26px; }
.gh-section-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.gh-section-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.gh-group .gh-section-label {
    text-transform: none;
    font-size: 13px;
    color: #333;
    letter-spacing: 0;
}
.gh-section-count {
    background: #eee;
    color: #666;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
}
.gh-section-add {
    margin-left: auto;
    background: none;
    border: 1px solid var(--apc-orange);
    color: var(--apc-orange);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    flex-shrink: 0;
}
.gh-section-add:active { background: rgba(247,148,29,0.08); }

.gh-need { margin-bottom: 12px; }
.gh-need-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: white;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.gh-need-row.has-match { border-color: rgba(247,148,29,0.4); }
.gh-need-info { flex: 1; min-width: 0; }
.gh-need-name {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gh-need-meta { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.gh-need-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.gh-need-count {
    font-size: 11px;
    font-weight: 800;
    color: white;
    background: var(--apc-orange);
    padding: 3px 9px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}
.gh-need-watching {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}
.gh-need-del {
    background: none;
    border: none;
    color: #ccc;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    font-family: inherit;
}
.gh-need-del:hover { color: #ff3b30; }

/* Available now / Still watching — status-led split */
.gh-section-available .gh-section-label { color: #16a34a; }
.gh-section-available .gh-section-count { background: #dcfce7; color: #16a34a; }
.gh-section-watching { margin-top: 2px; }
.gh-section-watching .gh-section-label { color: var(--text-3); }
.gh-section-watching .gh-need-watching { display: none; } /* the section header already says it */

/* An "available" request + its matching listings, contained as one card */
.gh-need--available {
    background: #fff;
    border: 1px solid #ececf0;
    border-radius: 14px;
    padding: 4px 4px 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    margin-bottom: 14px;
}
.gh-need--available .gh-need-row {
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 10px 12px 8px;
}
.gh-need--available .gh-strip { margin: 2px 8px 2px; }
.gh-need--watching { margin-bottom: 8px; }

/* ── Wanted-part photos ─────────────────────────────────────────── */
.wanted-photo-thumb {
    position: relative;
    width: 72px; height: 72px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #eee;
    flex-shrink: 0;
}
.wanted-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wanted-photo-x {
    position: absolute; top: 3px; right: 3px;
    width: 20px; height: 20px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 14px; line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-family: inherit;
}
.wanted-photo-add {
    width: 72px; height: 72px;
    border-radius: 10px;
    border: 1.5px dashed #ccc;
    background: #fafafa;
    color: var(--text-3);
    cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    font-family: inherit;
    flex-shrink: 0;
    transition: border-color 0.15s, color 0.15s;
}
.wanted-photo-add:hover { border-color: var(--apc-orange); color: var(--apc-orange); }
.gh-need-thumb {
    width: 44px; height: 44px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #eee;
}
.dash-wr-thumb {
    width: 42px; height: 42px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    margin-right: 10px;
    border: 1px solid #eee;
}
/* Reserved image slot when a wanted request has no photo — keeps card text
   aligned down the column instead of ragged (audit Members Wanted). */
.dash-wr-thumb--empty { background: #f7f7fa; display: flex; align-items: center; justify-content: center; }

.gh-strip {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 10px 0 4px;
    padding: 0 6px 7px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
}
.gh-strip > .gh-strip-item {
    flex: 0 0 150px;
    max-width: 150px;
    scroll-snap-align: start;
}
.gh-strip::-webkit-scrollbar { height: 7px; }
.gh-strip::-webkit-scrollbar-thumb { background: #d3d3db; border-radius: 4px; }
.gh-strip::-webkit-scrollbar-thumb:hover { background: #bcbcc6; }
.gh-strip::-webkit-scrollbar-track { background: transparent; }
.gh-strip .item-card {
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: var(--elev-1);
}
.gh-empty {
    font-size: 13px;
    color: var(--text-3);
    background: white;
    border: 1px dashed #e2e2e2;
    border-radius: 10px;
    padding: 18px 16px;
    line-height: 1.5;
}

.garage-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-3);
}
.garage-empty .ico { font-size: 56px; margin-bottom: 8px; }
.garage-empty .title { font-weight: 800; font-size: 16px; color: var(--apc-charcoal); margin-bottom: 4px; }
.garage-empty .sub { font-size: 13px; line-height: 1.4; max-width: 260px; margin: 0 auto; }

/* Per-vehicle "nothing on your list yet" — a filling, centred empty state */
.gh-vehicle-empty {
    flex: 1; min-height: 300px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 44px 30px;
    border: 1.5px dashed #dcdce2; border-radius: 16px; background: #fafafb;
}
.gh-vehicle-empty-ico { font-size: 44px; margin-bottom: 16px; opacity: 0.85; }
.gh-vehicle-empty-title { font-size: 17px; font-weight: 800; color: var(--text-1); margin-bottom: 8px; max-width: 440px; line-height: 1.35; }
.gh-vehicle-empty-sub { font-size: 13px; color: var(--text-3); line-height: 1.55; max-width: 400px; margin-bottom: 22px; }
.gh-vehicle-empty-btn {
    background: var(--apc-orange); color: var(--apc-black); border: none; border-radius: 10px;
    padding: 12px 24px; font-size: 14px; font-weight: 800; cursor: pointer;
    box-shadow: 0 4px 12px rgba(247,148,29,0.25);
}
.gh-vehicle-empty-btn:hover { background: #DF7D0F; }

.segmented-control {
    display: flex;
    background: #e8e8e8;
    border-radius: 8px;
    padding: 3px;
    margin-bottom: 12px;
}
.segmented-control .seg {
    flex: 1;
    text-align: center;
    padding: 8px 4px;
    font-size: 11px;
    font-weight: 800;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-3);
    user-select: none;
    transition: background 0.15s, color 0.15s;
}
.segmented-control .seg.active {
    background: white;
    color: var(--apc-orange);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.veh-empty {
    background: white;
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    color: var(--text-3);
    font-size: 13px;
    line-height: 1.5;
}
.veh-empty .ico { font-size: 38px; margin-bottom: 10px; }
.veh-empty .text { white-space: pre-line; max-width: 260px; margin: 0 auto; }
.veh-empty-cta {
    margin-top: 18px;
    border: none;
    background: var(--apc-orange);
    color: var(--apc-black);
    border-radius: 10px;
    padding: 12px 18px;
    font-weight: 800;
    cursor: pointer;
}
.veh-empty-cta:hover { background: #ff8b33; }

/* WANTED RESULTS — compact row layout for Pro seller search mode */
.wanted-results-wrap {
    grid-column: 1/-1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.wanted-results-hdr {
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-3);
    margin-bottom: 4px;
    padding: 0 2px;
}
.wanted-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: white;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 10px 14px;
    transition: border-color 0.15s;
}
.wanted-row:hover { border-color: var(--apc-orange); }
.wanted-row-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--apc-orange-light);
    color: var(--apc-orange);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 900;
    flex-shrink: 0;
}
.wanted-row-name {
    font-size: 14px; font-weight: 700; color: #222;
    min-width: 0;
    word-break: break-word;
}
.wanted-row-chips {
    display: flex; gap: 6px; align-items: center; flex-shrink: 0; flex-wrap: wrap;
}
.wanted-chip {
    font-size: 11px; color: #666;
    background: #f4f4f4;
    padding: 3px 9px; border-radius: 99px; white-space: nowrap;
}
.wanted-chip-budget  { background: var(--apc-orange-light); color: var(--apc-orange); font-weight: 700; }
.wanted-chip-time    { color: #bbb; background: none; padding-left: 0; }
.wanted-chip-pro     { background: #dbeafe; color: #1d4ed8; font-weight: 800; }
.wanted-chip-personal{ background: #f3f4f6; color: #6b7280; font-weight: 700; }
.wanted-avatar-pro   { background: #dbeafe; color: #1d4ed8; }
.wanted-row-body     { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.wanted-have-btn {
    flex-shrink: 0;
    padding: 7px 14px;
    background: white;
    color: var(--apc-orange);
    border: 2px solid var(--apc-orange);
    border-radius: 8px;
    font-size: 11px; font-weight: 900; cursor: pointer;
    letter-spacing: 0.3px; white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.wanted-have-btn:hover { background: var(--apc-orange); color: var(--apc-black); }

/* SEARCH DEMAND WIDGET */
#dashDemandCard { overflow-y: auto; }
.demand-subtitle {
    font-size: 12px; color: var(--text-3);
    margin: 0 0 14px 0; line-height: 1.4;
}
.demand-bars { display: flex; flex-direction: column; gap: 7px; }
.demand-bar-row {
    display: flex; align-items: center; gap: 8px;
}
.demand-bar-label {
    width: 160px; flex-shrink: 0;
    font-size: 12px; color: #444;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.demand-bar-track {
    flex: 1; height: 10px;
    background: #f0f0f0; border-radius: 99px; overflow: hidden;
}
.demand-bar-fill {
    height: 100%; border-radius: 99px;
    background: var(--apc-blue);
    transition: width 0.3s;
}
.demand-bar-fill.demand-bar-gap { background: var(--apc-orange); }
.demand-bar-count {
    width: 22px; flex-shrink: 0;
    font-size: 11px; font-weight: 700; color: var(--text-3);
    text-align: right;
}
.demand-insight {
    margin-top: 14px; padding: 10px 12px;
    background: var(--apc-orange-light); border-radius: 8px;
    font-size: 12px; color: var(--apc-charcoal); line-height: 1.5;
    display: flex; align-items: flex-start; gap: 8px;
}
.demand-insight-ico { font-size: 16px; flex-shrink: 0; }
.demand-periods {
    display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap;
}
.demand-pill {
    padding: 4px 12px; border-radius: 99px; border: 1.5px solid #ddd;
    background: #fff; font-size: 12px; font-weight: 600; color: #666;
    cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.demand-pill:hover { border-color: #F7941D; color: #F7941D; }
.demand-pill.active { border-color: #F7941D; color: #F7941D; background: rgba(247,148,29,0.07); }

/* APC-wide vs My Yard scope toggle */
.demand-scope {
    display: flex; gap: 0; margin-bottom: 12px; border: 1.5px solid #eee;
    border-radius: 8px; overflow: hidden; background: #fafafa;
}
.demand-scope-btn {
    flex: 1; padding: 7px 8px; border: none; background: transparent;
    font-size: 12px; font-weight: 700; color: var(--text-3); cursor: pointer;
    transition: background 0.15s, color 0.15s; letter-spacing: 0.02em;
}
.demand-scope-btn:hover { color: #F7941D; }
.demand-scope-btn.active { background: #F7941D; color: var(--apc-black); }
.demand-miss { color: var(--apc-orange); font-weight: 700; font-size: 11px; margin-left: 2px; }

/* My Yard summary on the demand card */
.yard-sum {
    display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline;
    padding: 4px 0 12px; font-size: 12px; color: #666;
}
.yard-sum strong { font-size: 15px; color: #333; font-weight: 800; }
.yard-sum-miss strong { color: var(--apc-orange); }
.yard-report-link {
    margin-top: 12px; width: 100%; padding: 11px; border: 1.5px solid #F7941D;
    border-radius: 8px; background: rgba(247,148,29,0.06); color: #F7941D;
    font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.15s;
}
.yard-report-link:hover { background: rgba(247,148,29,0.12); }

/* My Yard enquiry report drawer */
.yr-loading, .yr-empty { padding: 40px 20px; text-align: center; color: var(--text-3); font-size: 13px; }
.yr-top { padding: 15px 15px 0; border-bottom: 1px solid #eee; background: #fff; position: sticky; top: 0; z-index: 2; }
.yr-period-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.yr-period-label { font-size: 12px; color: var(--text-3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.yr-export {
    flex-shrink: 0; padding: 6px 12px; border: 1.5px solid #ddd; border-radius: 8px;
    background: #fff; font-size: 12px; font-weight: 700; color: #666; cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.yr-export:hover { border-color: #F7941D; color: #F7941D; }
.yr-periods { margin-bottom: 12px; }
.yr-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.yr-stat { background: #f7f7f7; border-radius: 8px; padding: 10px 6px; text-align: center; }
.yr-stat-num { font-size: 20px; font-weight: 800; color: #333; line-height: 1; }
.yr-stat-lbl { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.02em; margin-top: 5px; }
.yr-stat-miss { background: rgba(247,148,29,0.08); }
.yr-stat-miss .yr-stat-num { color: var(--apc-orange); }
.yr-tabs { display: flex; gap: 0; }
.yr-tab {
    flex: 1; padding: 11px 8px; border: none; background: transparent; cursor: pointer;
    font-size: 13px; font-weight: 700; color: var(--text-3); border-bottom: 3px solid transparent;
}
.yr-tab.active { color: #F7941D; border-bottom-color: #F7941D; }

.yr-list { padding: 8px 0 40px; }
.yr-hint { padding: 12px 15px 4px; font-size: 12px; color: var(--text-3); }
.yr-make { border-bottom: 1px solid #f0f0f0; }
.yr-make-row, .yr-model-row {
    width: 100%; display: flex; align-items: center; gap: 8px; padding: 13px 15px;
    border: none; background: transparent; cursor: pointer; text-align: left; font-size: 14px;
}
.yr-make-row { font-weight: 700; color: #333; }
.yr-caret { color: var(--text-3); font-size: 11px; width: 12px; flex-shrink: 0; }
.yr-make-name, .yr-model-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yr-make-counts, .yr-model-counts, .yr-part-counts { font-size: 12px; color: #666; font-weight: 700; flex-shrink: 0; }
.yr-ok { color: #22c55e; }
.yr-miss { color: var(--apc-orange); }
.yr-model { background: #fafafa; }
.yr-model-row { padding-left: 28px; font-weight: 600; color: #555; font-size: 13px; }
.yr-part-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 15px 9px 50px; font-size: 13px; color: #666; background: #fff;
    border-top: 1px solid #f3f3f3;
}
.yr-part-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.yr-miss-row {
    display: flex; align-items: center; gap: 10px; padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
}
.yr-miss-part { flex: 1; min-width: 0; font-weight: 700; color: #333; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yr-miss-veh { font-size: 12px; color: var(--text-3); flex-shrink: 0; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yr-miss-count { font-size: 13px; font-weight: 800; color: var(--apc-orange); flex-shrink: 0; min-width: 30px; text-align: right; }

/* Add-to-Wanted chips now reuse .garage-chip wholesale (see populateWantedGarageChips), so
   the old pill styling is gone — it wrapped onto a second line and looked nothing like the
   drawer. Only the bits .garage-chip does not already provide are kept below. */
.wanted-garage-chip {
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.wanted-garage-chip:hover  { border-color: var(--apc-orange); color: var(--apc-orange); }
.wanted-garage-chip.active { background: var(--apc-orange); border-color: var(--apc-orange); color: var(--apc-black); }

/* GARAGE INLINE WANTED LIST — classic row cards */
.wanted-list { display: flex; flex-direction: column; gap: 8px; }
.wanted-card {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 10px;
    border: 1.5px solid #eee;
    padding: 10px 12px;
    gap: 10px;
}
.wanted-info { flex: 1; min-width: 0; }
.wanted-name { font-size: 13px; font-weight: 700; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wanted-meta { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.wanted-actions { display: flex; gap: 6px; flex-shrink: 0; }
.wanted-delete {
    background: none;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 16px;
    color: #bbb;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}
.wanted-delete:hover { border-color: #FF3B30; color: #FF3B30; }

.wanted-contact-btn {
    flex-shrink: 0;
    background: var(--apc-orange);
    color: var(--apc-black);
    border: none;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
}
.wanted-contact-btn:hover { background: #e07b00; }

/* RECENTLY VIEWED DRAWER */
.rv-drawer-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 8px;
    border-bottom: 1px solid #f0f0f0;
}
.rv-search-input {
    flex: 1;
    min-width: 0;
    border: 1.5px solid #e5e5e5;
    border-radius: 9px;
    padding: 8px 12px;
    font-size: 13px;
    font-family: inherit;
    background: #f6f6f6;
    color: #222;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}
.rv-search-input:focus {
    border-color: var(--apc-orange);
    background: #fff;
}
.rv-drawer-count-row {
    padding: 7px 8px 4px;
}
.rv-drawer-count {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-3);
}
.rv-drawer-clear {
    font-size: 13px;
    font-weight: 700;
    color: var(--apc-orange);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.rv-drawer-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #f4f4f4;
    cursor: pointer;
}
.rv-drawer-row:active { background: #fafafa; }
.rv-drawer-img {
    width: 64px;
    height: 52px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    background: #f0f0f0;
}
.rv-drawer-info {
    flex: 1;
    min-width: 0;
}
.rv-drawer-title {
    font-size: 13px;
    font-weight: 700;
    color: #222;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
}
.rv-drawer-meta {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 3px;
}
.rv-drawer-price {
    font-size: 14px;
    font-weight: 900;
    color: var(--apc-orange);
    flex-shrink: 0;
}
.sp-active-card-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}
.sp-unsave-btn {
    background: none;
    border: 1.5px solid #ddd;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 18px;
    color: var(--text-3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: border-color 0.15s, color 0.15s;
}
.sp-unsave-btn:hover { border-color: #FF3B30; color: #FF3B30; }
.sp-unsave-btn:active { transform: scale(0.85); }

.sp-tabs { display: flex; gap: 14px; }
.sp-tab {
    background: #e8e8e8;
    border: none;
    border-radius: 8px;
    padding: 5px 16px;
    font-size: 11px;
    white-space: nowrap;
    font-weight: 900;
    letter-spacing: 0.3px;
    color: #555;
    cursor: pointer;
    transition: opacity 0.15s;
}
.sp-tab:hover { opacity: 0.8; }
.sp-tab-active { background: var(--apc-orange) !important; color: var(--apc-black) !important; }
.sp-tab-count {
    display: inline-block;
    background: rgba(0,0,0,0.1);
    border-radius: 99px;
    font-size: 10px;
    font-weight: 900;
    padding: 1px 6px;
    margin-left: 3px;
}
.sp-tab-active .sp-tab-count { background: rgba(255,255,255,0.25); }
.sp-tab-count-ended { background: rgba(231,76,60,0.15); color: #e74c3c; }
.sp-tab-active .sp-tab-count-ended { background: rgba(255,255,255,0.25); color: white; }

/* SAVED STORES */
.saved-store-card {
    display: flex; align-items: center; gap: 12px;
    background: white; border-radius: 12px;
    padding: 12px 14px; margin-bottom: 8px;
    box-shadow: var(--elev-1);
}
.saved-store-avatar {
    width: 44px; height: 44px; border-radius: 10px;
    background: var(--apc-orange); color: white;
    font-size: 18px; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.saved-store-info { flex: 1; min-width: 0; }
.saved-store-name { font-size: 14px; font-weight: 800; color: #1a1a1a; }
.saved-store-meta { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.saved-store-pro { color: var(--apc-blue); font-weight: 800; }
.saved-store-count { font-size: 11px; color: var(--text-3); margin-top: 3px; }
.saved-store-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.saved-store-visit-btn {
    background: var(--apc-blue); color: white; border: none;
    border-radius: 8px; padding: 6px 12px;
    font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.saved-store-unsave-btn {
    background: none; border: 1.5px solid #ddd; color: var(--text-3);
    border-radius: 8px; padding: 4px 10px;
    font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.saved-store-unsave-btn:hover { border-color: #FF3B30; color: #FF3B30; }

/* STALE SAVED PARTS */
.stale-section-hdr {
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #bbb;
    padding: 12px 16px 6px;
}
.stale-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 16px 12px;
    border-bottom: 1px solid #f4f4f4;
    position: relative;
}
.stale-row .rv-drawer-info { padding-right: 32px; }
.stale-img-wrap { position: relative; flex-shrink: 0; }
.stale-img { opacity: 0.4; filter: grayscale(60%); }
.stale-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    background: #e74c3c;
    color: white;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.5px;
    padding: 2px 5px;
    border-radius: 4px;
}
.stale-title { font-size: 13px; font-weight: 700; color: var(--text-3); margin-bottom: 2px; }
.stale-meta { font-size: 11px; color: #ccc; margin-bottom: 8px; }
.stale-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.stale-action-btn {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.3px;
    padding: 5px 10px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s;
}
.stale-action-btn:hover { opacity: 0.85; }
.stale-similar-btn { background: var(--apc-blue); color: white; }
.stale-wanted-btn { background: var(--apc-orange); color: var(--apc-black); }
.stale-dismiss-btn {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.3px;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1.5px solid #ddd;
    background: #fff;
    color: var(--text-3);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.stale-dismiss-btn:hover { background: #f5f5f5; color: #555; }

/* SETTINGS */
.settings-section-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-3);
    padding: 18px 16px 6px 16px;
}
.settings-section {
    background: white;
    border-radius: 14px;
    margin: 0 12px 4px 12px;
    overflow: hidden;
}
.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #f2f2f2;
    gap: 12px;
}
.settings-row:last-child { border-bottom: none; }
.settings-row-tappable { cursor: pointer; }
.settings-row-tappable:active { background: #f9f9f9; }
.settings-row-label {
    font-size: 14px;
    color: #222;
    font-weight: 500;
    flex: 1;
}
.settings-row-sub {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 2px;
}
.settings-row-value {
    font-size: 13px;
    color: var(--text-3);
    font-weight: 500;
}
.settings-chevron {
    font-size: 20px;
    color: #ccc;
    line-height: 1;
}
.settings-inline-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    color: #555;
    text-align: right;
    background: transparent;
    min-width: 0;
}
.location-picker-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.loc-postcode-input {
    width: 72px;
    flex: none;
    text-align: right;
    border: none;
    outline: none;
    font-size: 14px;
    color: #555;
    background: transparent;
    font-family: inherit;
}
.loc-suburb-box {
    flex: 1;
    min-width: 120px;
    max-width: 280px;
    position: relative;
}
.loc-suburb-input {
    width: 100%;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 5px 8px;
    font-size: 13px;
    color: #333;
    background: #fafafa;
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
}
.loc-suburb-input:focus { border-color: var(--apc-orange); background: #fff; }
.loc-suburb-dd {
    position: absolute;
    top: calc(100% + 3px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.14);
    max-height: 220px;
    overflow-y: auto;
    z-index: 60;
}
.loc-dd-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    border-bottom: 1px solid #f2f2f2;
}
.loc-dd-opt:last-child { border-bottom: none; }
.loc-dd-opt:hover { background: #fff4ec; }
.loc-dd-pc { color: var(--text-3); font-weight: 700; font-size: 12px; flex-shrink: 0; }
.loc-dd-empty { padding: 10px 12px; font-size: 13px; color: var(--text-3); }
/* Grid-mode variant — sell form, sign-up, workshop, workshop locator, listings filter */
/* Two columns side by side: postcode left (88px), suburb select fills right */
.location-picker-wrap[data-mode="sell"],
.location-picker-wrap[data-mode="signup"],
.location-picker-wrap[data-mode="workshop"],
.location-picker-wrap[data-mode="ws-locator"],
.location-picker-wrap[data-mode="filter"] {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 8px;
    width: 100%;
    flex: none;
    align-items: center;
}
.location-picker-wrap[data-mode="sell"] .loc-postcode-input,
.location-picker-wrap[data-mode="signup"] .loc-postcode-input,
.location-picker-wrap[data-mode="workshop"] .loc-postcode-input,
.location-picker-wrap[data-mode="ws-locator"] .loc-postcode-input,
.location-picker-wrap[data-mode="filter"] .loc-postcode-input {
    width: 100%;
    text-align: left;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    background: #fff;
    box-sizing: border-box;
}
/* Chrome tints autocomplete="new-password" fields (used on #filterPostcode to
   stop stale postcode autofill) with its own blue background — force it white. */
.loc-postcode-input:-webkit-autofill,
.loc-postcode-input:-webkit-autofill:hover,
.loc-postcode-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    box-shadow: 0 0 0 1000px #fff inset;
    -webkit-text-fill-color: #333;
    transition: background-color 5000s ease-in-out 0s;
}
.location-picker-wrap[data-mode="sell"] .loc-suburb-box,
.location-picker-wrap[data-mode="signup"] .loc-suburb-box,
.location-picker-wrap[data-mode="workshop"] .loc-suburb-box,
.location-picker-wrap[data-mode="ws-locator"] .loc-suburb-box,
.location-picker-wrap[data-mode="filter"] .loc-suburb-box {
    max-width: 100%;
    width: 100%;
}
.location-picker-wrap[data-mode="sell"] .loc-suburb-input,
.location-picker-wrap[data-mode="signup"] .loc-suburb-input,
.location-picker-wrap[data-mode="workshop"] .loc-suburb-input,
.location-picker-wrap[data-mode="ws-locator"] .loc-suburb-input,
.location-picker-wrap[data-mode="filter"] .loc-suburb-input {
    padding: 10px 12px;
    font-size: 14px;
    background: #fff;
}
/* Filter sidebar is too narrow for side-by-side — stack suburb above postcode */
.location-picker-wrap[data-mode="filter"] {
    grid-template-columns: 1fr;
}
/* Workshop locator postcode row — sits between search and radius control */
.ws-locator-postcode-row {
    padding: 6px 0 2px;
}
.location-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f0f7ff;
    border: 1px solid #bdd8f5;
    border-radius: 20px;
    padding: 3px 6px 3px 10px;
    font-size: 13px;
    color: #1a6fb8;
    font-weight: 600;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
}
.location-chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.location-chip-clear {
    background: none;
    border: none;
    font-size: 16px;
    line-height: 1;
    color: var(--text-3);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.location-chip-clear:hover { color: #FF3B30; }
.settings-save-btn {
    background: var(--apc-orange);
    color: var(--apc-black);
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: 0.3px;
}
.settings-save-btn:active { opacity: 0.8; }
.settings-profile-pic-wrap {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--apc-orange);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; cursor: pointer; flex-shrink: 0;
    border: 2px solid #eee;
}
.settings-profile-pic-wrap.pro { background: var(--apc-blue); }
.settings-pic-remove-btn {
    font-size: 11px; font-weight: 700; color: #e74c3c;
    background: none; border: none; cursor: pointer; padding: 0;
}
.settings-save-btn-pro {
    background: #2563eb;
}
/* Pro settings section — blue-tinted for Pro, green-tinted for Trade */
.settings-pro-label {
    color: #2563eb !important;
    letter-spacing: 1px;
}
.settings-pro-section {
    background: #eef4ff !important;
    border-left: 3px solid #2563eb;
    margin-bottom: 8px !important;
}
/* Trade users: green tint on their settings section, and show it first */
body.tier-trade .settings-pro-label   { color: var(--tier-trade) !important; }
body.tier-trade .settings-pro-section { background: #f0fdf4 !important; border-left-color: var(--tier-trade); }
body.tier-trade .settings-chevron     { color: var(--tier-trade) !important; }
#settingsDrawer .settings-col-right { display: flex; flex-direction: column; }
body.tier-trade #settingsProBlock     { order: 1; }
body.tier-trade #settingsUpgradeNudge { order: 2; }
.settings-pro-section-hdr {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #2563eb;
    padding: 10px 16px 4px;
    border-bottom: 1px solid #dbeafe;
}
.sponsor-mgmt-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid #f0f0f0;
}
.sponsor-mgmt-item:last-child { border-bottom: none; }
.sponsor-mgmt-name {
    flex: 1;
    font-size: 13px;
    font-weight: 700;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sponsor-mgmt-tpl {
    font-size: 9px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}
.sponsor-mgmt-edit {
    font-size: 11px;
    font-weight: 700;
    color: #555;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #ddd;
    background: white;
}
.sponsor-mgmt-boost {
    font-size: 11px;
    font-weight: 700;
    color: var(--apc-orange);
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #ffe0c0;
    background: #fff8f0;
}
.sponsor-mgmt-del {
    font-size: 11px;
    font-weight: 700;
    color: #e53935;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid #fecaca;
    background: white;
}
.settings-sponsor-add-btn {
    width: 100%;
    padding: 10px;
    background: none;
    border: 1.5px dashed #ccc;
    border-radius: 8px;
    color: var(--text-3);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 6px;
    transition: border-color 0.15s, color 0.15s;
}
.settings-sponsor-add-btn:hover {
    border-color: var(--apc-orange);
    color: var(--apc-orange);
}

/* iOS-style toggle */
.settings-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 26px;
    flex-shrink: 0;
}
.settings-toggle input { display: none; }
.settings-toggle-track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #ddd;
    transition: background 0.2s;
    cursor: pointer;
}
.settings-toggle-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    transition: transform 0.2s;
}
.settings-toggle input:checked + .settings-toggle-track { background: var(--apc-orange); }
.settings-toggle input:checked + .settings-toggle-track::after { transform: translateX(18px); }

/* Auto-reply composer in settings */
.ar-templates { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 6px; border-top: 1px solid #f2f2f2; }
.ar-template-btn { font-size: 11px; font-weight: 700; color: var(--apc-orange); background: rgba(247,148,29,0.08); border: none; border-radius: 20px; padding: 5px 10px; cursor: pointer; }
.ar-template-btn:active { background: rgba(247,148,29,0.18); }
.ar-compose { padding: 8px 14px 14px; }
.ar-msg-input { width: 100%; box-sizing: border-box; border: 1px solid #e0e0e0; border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.45; min-height: 80px; resize: none; font-family: inherit; color: #333; background: #fafafa; outline: none; }
.ar-msg-input:focus { border-color: var(--apc-orange); background: #fff; }
.ar-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.ar-char-count { font-size: 11px; color: #bbb; }
.ar-save-btn { font-size: 13px; font-weight: 700; color: var(--apc-black); background: var(--apc-orange); border: none; border-radius: 8px; padding: 8px 18px; cursor: pointer; }
.ar-save-btn:active { background: #DF7D0F; }

/* Search radius segmented control in filters */
.radius-seg-control {
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #ddd;
    background: #f4f4f4;
}
.radius-seg {
    flex: 1;
    text-align: center;
    padding: 8px 2px;
    font-size: 11px;
    font-weight: 700;
    color: #666;
    cursor: pointer;
    border-right: 1px solid #ddd;
    transition: background 0.15s, color 0.15s;
    line-height: 1.3;
}
.radius-seg:last-child { border-right: none; }
.radius-seg.active {
    background: var(--apc-orange);
    color: var(--apc-black);
}
.radius-seg-disabled .radius-seg {
    opacity: 0.35;
    pointer-events: none;
    cursor: default;
}
.radius-seg-disabled .radius-seg.active {
    background: #ccc;
    color: #fff;
}
#filterDrawer .drawer-header { display: none; }

.filter-clear-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 4px 0;
}
.filter-clear-btn {
    background: none;
    border: none;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.5px;
    color: var(--text-3);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}
.filter-clear-btn:hover { color: var(--apc-orange); background: var(--apc-orange-light); }

.filter-input-disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* PROFILE */
.profile-hero {
    background: linear-gradient(135deg, #2e2820 0%, #1c1812 100%);
    padding: 32px 20px 28px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    color: white;
    font-size: 30px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid rgba(255,255,255,0.5);
}
.profile-hero-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.profile-name {
    font-size: 20px;
    font-weight: 900;
    color: white;
}
.profile-tier-badge {
    font-size: 10px;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 999px;
    letter-spacing: 0.5px;
}
.profile-tier-badge.pro      { background: white; color: var(--tier-pro); }
.profile-tier-badge.trade    { background: white; color: var(--tier-trade); }
.profile-tier-badge.standard { background: rgba(255,255,255,0.3); color: white; border: 1px solid rgba(255,255,255,0.6); }
.profile-location {
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    font-weight: 600;
}
.profile-stats-row {
    display: flex;
    align-items: center;
    background: white;
    padding: 18px 0;
    border-bottom: 1px solid #f0f0f0;
}
.profile-stat {
    flex: 1;
    text-align: center;
}
.profile-stat-value {
    font-size: 22px;
    font-weight: 900;
    color: var(--apc-charcoal);
}
.profile-stat-label {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 2px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.profile-stat-divider {
    width: 1px;
    height: 36px;
    background: #eee;
}
.profile-meta-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 20px;
    background: white;
    border-bottom: 1px solid #f0f0f0;
}
.profile-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.profile-meta-icon { font-size: 15px; }
.profile-meta-text { font-size: 13px; color: #555; font-weight: 600; }
.profile-section {
    padding: 16px 20px;
    background: white;
    margin-top: 8px;
}
.profile-section-title {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-3);
    margin-bottom: 10px;
}
.profile-about-text {
    font-size: 14px;
    color: #444;
    line-height: 1.5;
}
.profile-action-btn {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    border: none;
    margin-bottom: 10px;
}
.profile-action-btn.primary   { background: var(--apc-orange); color: var(--apc-black); }
.profile-action-btn.secondary { background: #f4f4f4; color: #333; }
.profile-action-btn:last-child { margin-bottom: 0; }

/* Settings Pro upgrade nudge */
.sun-promo-card {
    background: linear-gradient(160deg, #fff7ed 0%, #ffedd5 60%, #fde8c8 100%);
    border: 1.5px solid #fed7aa;
    border-radius: 14px;
    padding: 18px 16px 20px;
}
.sun-badge {
    display: inline-block;
    background: var(--apc-orange);
    color: white;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 3px 10px;
    margin-bottom: 10px;
}
.sun-headline {
    font-size: 15px;
    font-weight: 900;
    color: #1a1a1a;
    margin-bottom: 12px;
    line-height: 1.3;
}
.sun-features {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sun-features li {
    font-size: 12px;
    font-weight: 600;
    color: #7c2d12;
    padding-left: 16px;
    position: relative;
}
.sun-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--apc-orange);
    font-weight: 900;
}
.sun-promo-btn {
    width: 100%;
    background: var(--apc-orange);
    color: var(--apc-black);
    border: none;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.3px;
}
.sun-promo-card--pro {
    background: linear-gradient(160deg, #eff6ff 0%, #dbeafe 60%, #bfdbfe 100%);
    border-color: #93c5fd;
}
.sun-promo-card--pro .sun-badge { background: #1d4ed8; }
.sun-promo-card--pro .sun-features li { color: #1e3a5f; }
.sun-promo-card--pro .sun-features li::before { color: #1d4ed8; }
.sun-promo-card--pro .sun-promo-btn { background: #1d4ed8; }

/* Settings profile strip */
.spc-card {
    display: flex; align-items: center; gap: 14px;
    background: white; padding: 14px 16px;
    border-bottom: 1px solid #ebebeb;
}
.spc-avatar {
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--apc-orange); color: white;
    font-size: 19px; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.spc-avatar.pro { background: var(--apc-blue); }
.spc-body { flex: 1; min-width: 0; }
.spc-name-row { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.spc-name { font-size: 15px; font-weight: 800; color: #1a1a1a; }
.spc-stats { font-size: 12px; color: var(--text-3); display: flex; align-items: center; gap: 5px; }
.spc-stats b { color: #444; font-weight: 700; }
.spc-dot { color: #ddd; }
.spc-storefront-btn {
    font-size: 12px; font-weight: 700; color: var(--apc-blue);
    background: none; border: none; cursor: pointer;
    white-space: nowrap; padding: 0; font-family: inherit; flex-shrink: 0;
}

/* INBOX — tabs and content */
.inbox-tabs {
    display: flex;
    background: white;
    border-radius: 12px;
    margin-bottom: 15px;
    overflow: hidden;
}
.inbox-tab {
    flex: 1;
    text-align: center;
    padding: 12px;
    font-weight: 700;
    font-size: 13px;
    color: var(--text-3);
    cursor: pointer;
    background: #f4f4f4;
    transition: background 0.15s, color 0.15s;
}
.inbox-tab.active {
    background: var(--apc-orange);
    color: var(--apc-black);
}
.inbox-tab:not(.active):hover { background: #e0e0e0; }

.inbox-item {
    background: white;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid transparent;
}
.inbox-item.unread {
    border-color: #F7941D;
    box-shadow: 0 8px 20px rgba(247, 148, 29, 0.08);
}
.inbox-item.flagged {
    border-color: #FF9800;
}
.inbox-icon { font-size: 24px; }
.inbox-text { flex: 1; min-width: 0; }
.inbox-title { font-weight: 800; font-size: 14px; color: var(--apc-charcoal); }
.inbox-meta { font-size: 11px; color: #666; margin-top: 2px; }
.inbox-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.inbox-action-btn {
    border: none;
    background: transparent;
    padding: 6px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    color: var(--text-3);
    transition: background 0.15s, color 0.15s;
}
.inbox-action-btn:hover {
    background: rgba(0,0,0,0.05);
    color: #333;
}
.inbox-flag-btn.flagged {
    color: var(--apc-orange);
}
.inbox-delete-btn:hover {
    color: #FF3B30;
}

/* MESSAGE DETAIL DRAWER */
.message-detail-action-btn {
    border: none;
    background: #f5f5f5;
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    transition: background 0.15s, color 0.15s;
}
.message-detail-action-btn:hover {
    background: #e0e0e0;
    color: #333;
}
.message-detail-action-btn.flagged {
    background: #FFF9F2;
    color: var(--apc-orange);
}
.message-detail-action-btn.delete {
    background: #FFF5F5;
    color: #FF3B30;
}
.message-detail-action-btn.delete:hover {
    background: #FFE5E5;
}

/* SAVE / HEART button — sits on the carousel inside the detail overlay */
.detail-save-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    border: none;
    background: rgba(255,255,255,0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-3);
    box-shadow: 0 3px 10px rgba(0,0,0,0.22);
    z-index: 10;
    line-height: 1;
    padding: 0;
    font-family: inherit;
    transition: transform 0.1s, color 0.15s;
}
.detail-save-btn:active { transform: scale(0.9); }
.detail-save-btn.saved  { color: #FF3B30; }

/* Toast — single global feedback chip */
.app-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 9999;
    transform: translate(-50%, calc(-50% + 12px));
    background: #333;
    color: white;
    padding: 10px 20px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
.app-toast.show {
    opacity: 1;
    transform: translate(-50%, -50%);
}

/* STICKY BUTTON */
.sticky-action-bar {
    position: absolute; bottom: 0; left: 0; right: 0; padding: 15px;
    background: linear-gradient(to top, rgba(255,255,255,1) 80%, rgba(255,255,255,0));
    transition: transform 0.3s ease-in-out; z-index: 100;
}
.sticky-hidden { transform: translateY(100%); }

/* FORM ELEMENTS */
.filter-section { margin-bottom: 22px; }
.filter-section-muted { opacity: 0.35; pointer-events: none; user-select: none; transition: opacity 0.2s ease; }
.filter-section h4 { font-size: 10px; text-transform: uppercase; color: var(--text-2); letter-spacing: 0.4px; display: inline-block; margin-bottom: 10px; }   /* one muted section-header style, no orange underline */
.input-group { margin-bottom: 10px; }
.input-group label { display: block; font-size: 11px; font-weight: 900; margin-bottom: 4px; color: var(--text-3); }
.input-group input, .input-group select, .input-group textarea { 
    width: 100%; 
    padding: 12px; 
    border: 1px solid #ddd; 
    border-radius: 8px; 
    box-sizing: border-box; 
    background: white; 
    font-family: inherit;
    font-size: 14px;
    resize: none;
}
.input-group textarea { min-height: 110px; }
#sellDescription { resize: vertical; }
.input-row-flex { display: flex; gap: 10px; }
.input-row-flex .input-group { flex: 1; }
.apc-textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #ddd;
    border-radius: 12px;
    box-sizing: border-box;
    background: #f9f9f9;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: #222;
    resize: none;
    outline: none;
    transition: border-color 0.15s;
}
.apc-textarea:focus { border-color: var(--apc-orange); background: #fff; }
.apc-textarea::placeholder { color: var(--text-3); }
.shared-choice-box { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.shared-choice-box .choice-item { justify-content: flex-start; }
#sellPostageDetailSection { grid-column: 1 / -1; }
.choice-item { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; cursor: pointer; }
.choice-item input[type="checkbox"] { accent-color: var(--apc-orange); width: 17px; height: 17px; cursor: pointer; flex-shrink: 0; }

/* Postage mode picker — sell form (replaces unstyled native radios) */
.postage-mode-pills { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.postage-mode-pill {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border-radius: 8px;
    border: 2px solid #e0e0e0;
    background: #fff;
    color: #666;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.postage-mode-pill.selected { background: #fff4ea; border-color: var(--apc-orange); color: #333; }
.postage-mode-pill.selected::before { content: "✓ "; color: var(--apc-orange); }
.postage-mode-subfield { margin: -2px 0 0 4px; font-size: 12px; color: #888; }
.postage-mode-subfield input { max-width: 90px; }
.postage-mode-pill-row { position: relative; }
.postage-mode-pill-row .postage-mode-pill { padding-right: 90px; }
.postage-mode-inline-price {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    gap: 5px;
}
.postage-mode-inline-price input {
    width: 46px;
    padding: 5px 6px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 12px;
    text-align: right;
    background: #fff;
    color: #333;
}
.postage-mode-inline-price .postage-mode-subfield-hint { font-size: 11px; font-weight: 700; color: #888; }

/* Workshop filter — collapsible panel */
.ws-filter-toggle-row { margin-bottom: 10px; }
.ws-filter-toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: #f7f7f7;
    border: 1px solid var(--apc-orange);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #333;
    cursor: pointer;
    transition: background 0.15s;
}
.ws-filter-toggle-btn:hover { background: #fff6ec; }
.ws-filter-badge {
    background: var(--apc-orange);
    color: white;
    font-size: 10px;
    font-weight: 900;
    border-radius: 10px;
    padding: 1px 7px;
    line-height: 1.6;
}
.ws-filter-chevron { margin-left: auto; font-size: 11px; color: var(--text-3); }
.ws-filter-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    margin-bottom: 0;
}
.ws-filter-panel.open {
    max-height: 1200px;
    margin-bottom: 16px;
}
.ws-filter-actions {
    display: flex;
    gap: 14px;
    padding: 10px 0 4px;
}
.ws-filter-action-btn {
    font-size: 11px;
    font-weight: 800;
    color: var(--apc-orange);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Workshop browse — compact search + distance bar */
.ws-search-bar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
.ws-search-input { flex: 1; }
.ws-radius-control { width: 100%; }

/* Workshop service filter grid */
#workshopServiceGrid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 0 10px;
}
.ws-filter-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
}
.ws-filter-group-label {
    grid-column: 1 / -1;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--apc-orange);
    padding-bottom: 2px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 2px;
}

/* Approved repairer filter */
.workshop-approved-section {
    margin-top: 4px;
    padding: 10px 12px;
    background: #eef4ff;
    border: 1px solid #c5d9f7;
    border-radius: 10px;
}
.workshop-approved-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--apc-charcoal);
}
.approved-club-badge {
    background: #005eb8;
    color: white;
    font-size: 9px;
    font-weight: 900;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    flex-shrink: 0;
    white-space: nowrap;
}
.workshop-approved-subtext {
    font-size: 11px;
    color: #6a82a0;
    margin-top: 5px;
    margin-left: 22px;
    line-height: 1.4;
}
.motoring-clubs-banner {
    display: block;
    width: 100%;
    height: auto;
    max-height: 50px;
    object-fit: contain;
    margin-top: 10px;
    border-radius: 6px;
    opacity: 0.88;
    mix-blend-mode: multiply;
}

/* Approved badge on workshop cards */
.card-approved-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #005eb8;
    color: white;
    font-size: 9px;
    font-weight: 900;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
/* Detail overlay — horizontal mini card strip */
.detail-footer-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.detail-footer-label {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-3);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.detail-mini-card {
    background: white;
    border-radius: 8px;
    border: 1px solid #eee;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.15s;
    display: flex;
    flex-direction: column;
}
.detail-mini-card:hover { box-shadow: var(--elev-2); }
.detail-mini-img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    background: #f0f0f0;
}
.detail-mini-info {
    padding: 6px 8px 8px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.detail-mini-title {
    font-size: 11px;
    font-weight: 700;
    color: #333;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.detail-mini-price {
    font-size: 12px;
    font-weight: 900;
    color: var(--apc-blue);
    margin-top: auto;
}

.action-container { padding: 10px 0 20px 0; }
.btn-full-action { width: 100%; background: var(--apc-orange); color: var(--apc-black); padding: 20px; border: none; border-radius: 12px; font-weight: 900; cursor: pointer; font-size: 14px; }
.btn-full-action:disabled { opacity: 0.55; cursor: not-allowed; }

/* DEMAND BADGES */
.demand-icon-area { width: 100%; aspect-ratio: 4/3; background: #f9f9f9; display: flex; align-items: center; justify-content: center; font-size: 40px; border-bottom: 1px solid #eee; }
.heat-badge { position: absolute; top: 8px; right: 8px; background: #FF3B30; color: white; font-size: 10px; font-weight: 900; padding: 2px 6px; border-radius: 4px; z-index: 10; }

/* IMAGE CAROUSEL — fixed scroll-snap property names */
#imageCarousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;          /* fixed: was snap-type */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}
#imageCarousel img {
    scroll-snap-align: start;
    flex-shrink: 0;
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: contain;
    background: #f4f4f4;
}
@keyframes apc-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
#imageCarousel.carousel-loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e4e4e4 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: apc-shimmer 1.4s ease-in-out infinite;
}

/* CAROUSEL DOT INDICATORS */
.carousel-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: none;                    /* shown by JS only when there's > 1 image */
    gap: 8px;
    pointer-events: auto;
    z-index: 5;
}
.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    transition: background 0.2s ease, transform 0.2s ease;
    cursor: pointer;
    flex-shrink: 0;
}
.carousel-dot.active {
    background: white;
    transform: scale(1.3);
}

/* CAROUSEL: mobile vs desktop */
.mobile-carousel { display: none; }
.desktop-thumbs-container { display: block; }

@media (max-width: 600px) {
    .mobile-carousel { display: block; }
    .desktop-thumbs-container { display: none; }
    #imageCarousel::-webkit-scrollbar { display: none; }
    #imageCarousel { -ms-overflow-style: none; scrollbar-width: none; }
    .image-lightbox { background: #000; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* MY PARTS LIST */
.my-part-row {
    background: white;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.my-part-thumb {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
.my-part-info {
    flex: 1;
    min-width: 0;
}
.my-part-title {
    font-weight: 800;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.my-part-sub {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.my-part-price {
    font-size: 13px;
    font-weight: 900;
    color: var(--apc-blue);
}
.my-part-badge {
    font-size: 9px;
    font-weight: 900;
    color: var(--apc-green);
    background: var(--apc-green-bg);
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}
.my-part-badge.pending { color: #b86e00; background: #fff3cd; }
.my-part-badge.sold    { color: var(--text-3);    background: #f0f0f0; }
.my-part-row.sold { opacity: 0.6; }
.my-part-row.sold .my-part-thumb  { filter: grayscale(0.6); }
.my-part-row.sold .my-part-price  { color: var(--text-3); }
.my-part-manage-btn {
    border: none;
    background: var(--apc-blue);
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 900;
    font-size: 10px;
    cursor: pointer;
    flex-shrink: 0;
    letter-spacing: 0.3px;
}
.my-part-delete-btn {
    background: none;
    border: 1.5px solid #ddd;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 18px;
    color: var(--text-3);
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: border-color 0.15s, color 0.15s;
}
.my-part-delete-btn:hover { border-color: #FF3B30; color: #FF3B30; }
.my-part-delete-btn:active { transform: scale(0.85); }

/* MY LISTINGS CARD OVERLAY */
.my-card--sold { opacity: 0.6; }
.my-card--sold .item-img { filter: grayscale(0.5); }
.my-card-actions-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    background: rgba(0,0,0,0.62);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
}
.my-overlay-sold-date,
.my-overlay-status-label {
    flex: 1;
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.2px;
}
.my-card-action-btn {
    flex: 1;
    background: var(--apc-orange);
    color: var(--apc-black);
    border: none;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.4px;
    cursor: pointer;
    font-family: inherit;
}
.my-card-action-btn:hover { background: var(--apc-orange-dark); }
.my-card-delete-btn {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    font-size: 16px;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}
.my-card-delete-btn:hover { background: rgba(239,68,68,0.8); color: #fff; border-color: transparent; }
.my-card-x-float {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,0.45);
    border: none;
    color: white;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.15s;
}
.my-card-x-float:hover { background: rgba(239,68,68,0.85); }
.ml-saves-badge { font-size: 10px; font-weight: 700; color: #bbb; margin-left: auto; }
.ml-saves-badge--active { color: var(--apc-orange); }


/* MANAGE LISTING — status pills + rate buyer (edit mode only) */
.manage-section {
    margin-top: 4px;
}
.manage-status-pills {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.status-pill {
    flex: 1;
    padding: 9px 6px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 11px;
    border: 2px solid #e0e0e0;
    background: #f5f5f5;
    color: var(--text-3);
    cursor: pointer;
    transition: all 0.15s;
}
.status-pill.pill-selected-active  { color: #155c24; background: #e6f4ea; border-color: #28a745; }
.status-pill.pill-selected-pending { color: #b86e00; background: #fff3cd; border-color: #e6950a; }
.status-pill.pill-selected-sold    { color: #444;    background: #ececec; border-color: #888; }
.manage-delete-btn {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 12px;
    min-height: 44px;
    border-radius: 8px;
    border: 1.5px solid #fca5a5;
    background: #fff0f0;
    color: #ef4444;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.manage-delete-btn:active { background: #fee2e2; }
.rate-buyer-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}
.rate-buyer-section h4 { margin-bottom: 8px; }
.rate-stars-row {
    display: flex;
    gap: 6px;
}
.rate-star {
    font-size: 30px;
    cursor: pointer;
    color: #ddd;
    transition: color 0.1s;
    line-height: 1;
    user-select: none;
}
.rate-star.filled { color: #f5a623; }
.buyer-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}
.buyer-chip {
    padding: 7px 14px;
    border-radius: 20px;
    border: 2px solid #ddd;
    background: #f5f5f5;
    font-weight: 700;
    font-size: 12px;
    color: #444;
    cursor: pointer;
    transition: all 0.15s;
}
.buyer-chip.selected {
    border-color: var(--apc-blue);
    background: #e8f0fe;
    color: var(--apc-blue);
}
.buyer-chip-input {
    width: 100%;
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 13px;
}

/* CHAT BUBBLE — replaces inline style from JS, safe textContent insertion */
.chat-bubble-sent {
    align-self: flex-end;
    background: #DCF8C6;
    padding: 10px 15px;
    border-radius: 15px 15px 0 15px;
    max-width: 80%;
    font-size: 14px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    word-break: break-word;             /* prevents long words breaking the layout */
}

.chat-bubble-image {
    width: 100%;
    display: block;
    border-radius: 14px;
    object-fit: cover;
    max-height: 360px;
}

.chat-attach-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid var(--apc-orange);
    background: white;
    color: var(--apc-orange);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.chat-attach-btn:hover {
    background: var(--apc-orange);
    color: var(--apc-black);
}

.chat-attach-btn svg {
    display: block;
}

/* ============================================================
   DESKTOP SIDEBAR (base styles — display:none on mobile)
   ============================================================ */
.desktop-sidebar {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0;
    width: 220px;
    height: 100vh;
    background: white;
    border-right: 1px solid #eee;
    box-shadow: 2px 0 12px rgba(0,0,0,0.06);
    z-index: 1200;
    overflow-y: auto;
}
.dsb-brand {
    padding: 14px 18px;
    border-bottom: 5px solid var(--apc-orange);
    flex-shrink: 0;
}
.dsb-brand img { height: 46px; width: auto; display: block; }
.dsb-nav { flex: 1; padding: 8px 0; }
.dsb-item {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 800;
    color: var(--apc-charcoal);
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: background 0.1s, color 0.1s;
    position: relative;
}
.dsb-item:hover { background: #f7f7f7; }
.dsb-item.active { color: var(--apc-orange); background: #fff6ec; }
.dsb-item.active::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--apc-orange);
    border-radius: 0 3px 3px 0;
}
.dsb-inbox-badge {
    background: #FF3B30;
    color: white;
    font-size: 9px;
    font-weight: 800;
    border-radius: 999px;
    padding: 1px 5px;
    min-width: 16px;
    text-align: center;
    margin-left: auto;
}
.dsb-sell-wrap { padding: 16px; border-top: 1px solid #eee; flex-shrink: 0; }
.dsb-sell {
    background: var(--apc-orange);
    color: var(--apc-black);
    text-align: center;
    padding: 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    letter-spacing: 0.5px;
    box-shadow: 0 3px 10px rgba(247,148,29,0.35);
    transition: background 0.15s;
}
.dsb-sell:hover { background: #e07b00; }

/* DRAWER BACKDROP — desktop only */
#drawerBackdrop {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--side-panel);   /* solid single grey, opaque — matches the page frame, no translucent dark dim stacking (Gary) */
    z-index: 1998;
}

/* ============================================================
   DESKTOP UTILITY BAR + RIGHT PANEL (base — hidden on mobile)
   ============================================================ */
.desktop-top-bar {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 48px;
    background: #fdfdfd;
    border-bottom: 1px solid #eee;
    padding: 0 20px;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    z-index: 3100;
    box-sizing: border-box;
}
/* While the APC PRO dropdown is open, float the bar above open drawers so the
   menu renders on top (drawers share z-3100 and win on DOM order otherwise) */
.desktop-top-bar.pro-menu-open { z-index: 9500; }
.dtb-logo-zone {
    width: 240px;
    flex-shrink: 0;
}
.dtb-nav {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.dtb-right-zone {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.dtb-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--apc-orange);
    color: white;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    transition: opacity 0.15s;
}
.dtb-avatar:hover { opacity: 0.82; }
.header-list-btn {
    background: white;
    color: var(--apc-orange);
    border: 2px solid var(--apc-orange);
    border-radius: 8px;
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.3px;
    transition: background 0.15s, color 0.15s;
}
.header-list-btn:hover {
    background: var(--apc-orange);
    color: var(--apc-black);
}
.dtb-left, .dtb-right { display: flex; align-items: center; gap: 4px; }
.dtb-link {
    padding: 0 12px;
    height: 48px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #555;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    transition: color 0.1s, background 0.1s;
    text-decoration: none;
}
.dtb-link:hover { color: var(--apc-orange); background: var(--apc-orange-light, #fff4e6); }
.dtb-active { color: var(--apc-orange) !important; border-bottom: 2px solid var(--apc-orange); }
.dtb-sell { color: var(--apc-orange) !important; font-weight: 900; }
.dtb-badge {
    background: #FF3B30;
    color: white;
    font-size: 9px;
    font-weight: 800;
    border-radius: 999px;
    padding: 1px 5px;
    min-width: 14px;
    text-align: center;
}
.amenu-badge {
    background: #FF3B30;
    color: white;
    font-size: 11px;
    font-weight: 800;
    border-radius: 999px;
    padding: 2px 7px;
    min-width: 16px;
    text-align: center;
    margin-left: auto;
    margin-right: 8px;
}
/* Wanted-match badge once the buyer has opened Garage and seen it — still
   unresolved (not dismissed), so it stays visible, just toned down from red. */
.badge-seen {
    background: #FFA940;
}

.desktop-right-panel {
    display: none;
    position: fixed;
    right: 0;
    width: 220px;
    overflow-y: hidden;
    padding: 0 10px 20px;
    box-sizing: border-box;
    background: #f4f4f4;
}

/* Sponsored section heading — aligns with grid-heading */
.drp-section-heading {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-3);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 12px 2px 18px;
}

/* Unified sponsored card — matches desktop .item-card style */
.drp-card {
    height: 240px;
    border-radius: 10px;
    border: 1px solid #eee;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    margin-bottom: 10px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    background: #eee;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.drp-card:hover {
    transform: translateY(-2px);
    border-color: var(--apc-orange);
    box-shadow: 0 6px 18px rgba(247,148,29,0.15);
}
.drp-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.drp-card-img--contain {
    object-fit: contain;
    background: #f8f8f8;
}
.drp-card-ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.drp-card-ph span {
    font-size: 28px;
    font-weight: 900;
    color: white;
    letter-spacing: 1px;
}
.drp-type-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 6px;
    pointer-events: none;
}
.drp-type-badge--featured  { background: var(--apc-orange); color: white; }
.drp-type-badge--sponsored { background: rgba(0,0,0,0.45); color: white; }
.drp-type-badge--partner   { background: rgba(30,40,130,0.8); color: white; }
.drp-info {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(6px);
    padding: 8px 10px 10px;
    pointer-events: none;
}
.drp-info-price {
    font-size: 14px;
    font-weight: 900;
    color: var(--apc-blue-bg);
    margin-bottom: 2px;
}
.drp-info-name {
    font-size: 12px;
    font-weight: 700;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.drp-info-sub {
    font-size: 10px;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

/* DETAIL OVERLAY — desktop image column (hidden on mobile) */
.desktop-detail-images { display: none; }
.detail-info-col { display: block; }
.detail-sell-yours-block { display: none; }

/* ============================================================
   TABLET LAYOUT — 768px+
   ============================================================ */
@media (min-width: 768px) {
    #detailColWrap { display: flex; flex: 0 0 auto; }
    .desktop-detail-images {
        display: flex !important;
        flex-direction: column;
        width: 50%;
        flex-shrink: 0;
        padding: 20px;
        background: #f7f7f7;
        border-right: 1px solid #eee;
    }
    .mobile-carousel { display: none !important; }
    .detail-info-col { flex: 1; min-width: 0; padding-bottom: 24px; }
}

/* ============================================================
   DESKTOP LAYOUT — 900px+
   ============================================================ */
@media (min-width: 900px) {
    /* Show utility bar, right panel. Hide nav sidebar and bottom nav */
    .desktop-top-bar { display: flex; }
    .desktop-right-panel { display: flex; flex-direction: column; }
    .desktop-sidebar { display: none !important; }
    .bottom-nav { display: none !important; }

    /* Constrain page to 1600px centred — sides show html background (subtle blueprint frame) */
    html {
        background-color: var(--side-panel);
        background-image: var(--frame-image);
        background-position: var(--frame-position);
        background-size: var(--frame-size);
        background-attachment: fixed;
        scrollbar-gutter: stable;
    }
    /* Floating overlays sit on the same textured frame */
    #drawerBackdrop {
        background-image: var(--frame-image);
        background-position: var(--frame-position);
        background-size: var(--frame-size);
        background-attachment: fixed;
    }
    body {
        padding-bottom: 0;
        padding-left: 240px;
        padding-right: 220px;
        max-width: 1600px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    /* Top utility bar: full-width white/divider, content padded to the centred zone */
    .desktop-top-bar {
        left: 0;
        right: 0;
        padding: 0 max(20px, calc(50vw - 800px));
    }

    /* Header: full-width white/orange-strip, content padded to the centred zone */
    .top-nav-container {
        top: 48px;
        left: 0;
        right: 0;
        width: auto;
    }

    /* Single-row header — three zones matching the sidebar layout:
       [240px logo zone] [flex:1 search = grid width] [220px pill zone] */
    header {
        display: flex;
        align-items: center;
        padding: 8px 0;
        padding-left: max(0px, calc(50vw - 800px));
        padding-right: max(0px, calc(50vw - 800px));
        gap: 0;
    }
    .header-top { display: contents; }
    .logo-main  { order: 1; flex-shrink: 0; width: 240px; display: flex; align-items: center; padding: 0 8px; }
    .logo-main img { width: 100%; height: auto; max-height: 64px; object-fit: contain; }
    .search-col { order: 2; flex: 1; display: flex; flex-direction: column; gap: 6px; max-width: none; padding: 0; }
    .search-col .search-group { margin: 0; }
    #proSearchToggle { margin-top: 0; }

    .header-inbox-btn { display: none !important; }
    #accountPillZone { order: 3; flex-shrink: 0; width: 220px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 8px; }
    #accountPill    { width: auto; }
    .sign-up-prompt { display: block; }
    .account-pill.signed-out {
        font-size: 13px;
        padding: 11px 24px;
        border-radius: 8px;
    }
    /* Desktop signed-in: just the avatar circle, no pill box */
    .account-pill.signed-in {
        background: transparent;
        border: none;
        box-shadow: none;
        border-radius: 50%;
        padding: 4px;
        justify-content: center;
        gap: 0;
        transition: opacity 0.15s;
    }
    .account-pill.signed-in.tier-trade { box-shadow: none; }
    .account-pill.signed-in.tier-pro   { box-shadow: none; }
    .pill-avatar { width: 36px; height: 36px; font-size: 14px; }
    .account-pill.signed-in:hover .pill-avatar { transform: scale(1.08); transition: transform 0.15s; }

    /* Right panel: below top bar + header */
    .desktop-right-panel { top: 140px; bottom: 0; } /* fallback — overridden by updateHeaderOffset() */

    /* Filter drawer: always visible as left sidebar on desktop */
    #filterDrawer {
        display: flex !important;
        position: fixed;
        left: max(0px, calc(50vw - 800px));
        top: 140px; /* fallback — overridden by updateHeaderOffset() after images load */
        bottom: 0;
        height: auto;
        width: 240px;
        z-index: 600;
        border-right: 1px solid #eee;
        box-shadow: 2px 0 10px rgba(0,0,0,0.04);
        overflow-y: auto;
        box-sizing: border-box;
    }
    #filterDrawer .drawer-header { display: none; }
    .filter-drawer-close { display: none; }
    .btn-search-filters { display: none; }

    /* 5-column grid */
    .results-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 10px;
        padding: 8px 14px;
    }
    .grid-heading { padding: 12px 14px 4px; }
    .grid-heading-label { font-size: 14px; }

    /* ── MY LISTINGS + SAVED + RECENTLY VIEWED — 7-col (full-width drawers) ─ */
    #myPartsList .results-grid,
    #savedPartsContent .results-grid,
    #rvListContent .results-grid {
        grid-template-columns: repeat(7, 1fr);
    }

    /* ── GARAGE — 2-column desktop layout ─────────────────────── */
    #garageDrawer .drawer-content { padding-top: 0 !important; }
    .garage-two-col {
        flex-direction: row;
        overflow: hidden;
    }
    .garage-left-col {
        width: 280px;
        background: white;
        border-right: 1px solid #eee;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }
    .garage-right-col {
        flex: 1;
        overflow: hidden;
        padding: 0;
        background: #fff;
    }
    .garage-chips-bar {
        flex-direction: column;
        flex-wrap: nowrap;
        overflow-x: visible;
        gap: 0;
        padding: 8px 0;
    }
    .garage-chip {
        width: 100%;
        border-radius: 0 !important;
        border: none !important;
        border-left: 3px solid transparent !important;
        background: white !important;
        padding: 14px 16px !important;
        text-align: left;
        justify-content: flex-start;
        color: #333 !important;
    }
    .garage-chip.active {
        border-left-color: var(--apc-orange) !important;
        background: rgba(0,0,0,0.04) !important;
        color: var(--apc-orange) !important;
    }
    .garage-chip-name { font-size: 14px; font-weight: 700; }
    .garage-chip-year { font-size: 12px; color: var(--text-3); margin-left: auto; }
    .garage-chip.active .garage-chip-year { color: var(--apc-orange); opacity: 0.7; }
    #garageInlineDetail { display: flex !important; flex-direction: column; height: 100%; padding: 0; }
    #garageVehicleHeader {
        padding: 20px 20px 0;
        margin-bottom: 16px;
        flex-shrink: 0;
    }
    #garageSegControl { display: none !important; }
    #garageInlineTabContent { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding: 0 20px 24px; }
    .gh-strip > .gh-strip-item { flex: 0 0 168px; max-width: 168px; }
    #garageInlineTabContent .results-grid {
        grid-template-columns: repeat(4, 1fr);
        padding: 0;
    }
    .garage-section { margin-bottom: 28px; }
    .garage-section-hdr {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 11px;
        font-weight: 800;
        color: var(--text-3);
        text-transform: uppercase;
        letter-spacing: 0.6px;
        margin-bottom: 12px;
    }
    .garage-section-count {
        background: #eee;
        color: #666;
        font-size: 10px;
        font-weight: 800;
        padding: 2px 7px;
        border-radius: 999px;
    }
    .garage-section-count.has-matches {
        background: var(--apc-orange);
        color: white;
    }
    .garage-section-add {
        margin-left: auto;
        background: none;
        border: 1px solid var(--apc-orange);
        color: var(--apc-orange);
        padding: 3px 10px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
        font-family: inherit;
    }
    .garage-section-empty {
        font-size: 13px;
        color: var(--text-3);
        padding: 16px 0;
    }

    /* Desktop card sizing + subtle hover — click card to open detail */
    .item-card {
        height: 240px;
        border-radius: 10px;
        border: 1px solid #eee;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        cursor: pointer;
        transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    }
    .item-card:hover { transform: translateY(-3px); border-color: var(--apc-orange); box-shadow: 0 6px 18px rgba(247,148,29,0.15); }
    .item-img { aspect-ratio: unset; height: 100%; }
    .item-info {
        position: absolute;
        bottom: 0; left: 0; right: 0;
        background: rgba(255,255,255,0.94);
        backdrop-filter: blur(6px);
        padding: 10px 12px;
    }

    /* Right panel: constrained to 1400px zone */
    .desktop-right-panel { right: max(0px, calc(50vw - 800px)); }

    /* Drawers become right-side panels */
    .drawer { left: auto; right: max(0px, calc(50vw - 800px)); width: 500px; }
    .drawer.active { box-shadow: -4px 0 40px rgba(0,0,0,0.18); }
    #accountMenuDrawer { width: 360px; }
    #filterDrawer { right: auto; width: 240px; box-shadow: none; }
    /* Inbox: float off the bottom edge so the reply bar isn't flush against the screen */
    #inboxDrawer { bottom: 18px; border-radius: 0 0 14px 14px; }

    /* Sell overlay: full card-drawer, two-column form layout */
    #sellOverlay {
        left: calc(max(0px, 50vw - 800px) + 240px) !important;
        right: calc(max(0px, 50vw - 800px) + 220px) !important;
        width: auto !important;
        height: auto !important;
    }
    #sellOverlay .drawer-header,
    #settingsDrawer .drawer-header,
    #workshopDrawer .drawer-header,
    #helpDrawer .drawer-header {
        border-bottom: none;   /* orange line lives only on the app header, not the drawers */
        border-radius: 0;
        flex-shrink: 0;
    }
    #sellOverlay .drawer-content {
        overflow: hidden;
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }
    .sell-form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        flex: 1;
        overflow-y: auto;
    }
    .sell-left-col {
        padding: 20px;
        border-right: 1px solid #f0f0f0;
    }
    .sell-right-col {
        padding: 20px;
    }

    /* Settings: three-column layout on desktop (wider drawer) */
    #settingsDrawer .drawer-content {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        align-items: start;
        align-content: start;
        overflow-y: auto;
        padding: 20px;
        gap: 0 24px;
    }
    #settingsDrawer .settings-col-left,
    #settingsDrawer .settings-col-centre,
    #settingsDrawer .settings-col-right { min-width: 0; }
    #settingsDrawer .settings-col-left > .settings-section-label:first-child,
    #settingsDrawer .settings-col-centre > .settings-section-label:first-child,
    #settingsDrawer .settings-col-right > .settings-section-label:first-child,
    #settingsDrawer .settings-col-right > div > .settings-section-label:first-child { padding-top: 8px !important; }
    #settingsProfileCard { grid-column: 1 / -1; margin: -20px -20px 0 -20px; }

    /* Detail overlay: fills center column between sidebars */
    #detailOverlay {
        left: max(0px, calc(50vw - 800px)) !important;
        right: max(0px, calc(50vw - 800px)) !important;
        width: auto !important;
        height: auto !important;
        /* top is set dynamically by updateHeaderOffset() */
        bottom: 0;
        box-shadow: none !important;
    }
    /* Single scroll: flex column — columns side by side, footer joined below */
    #detailScrollArea {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-bottom: 0 !important;
        position: relative !important;
    }
    #detailColWrap {
        display: flex;
        flex: 0 0 auto;
    }
    .desktop-detail-images {
        display: flex !important;
        flex-direction: column;
        width: 55%;
        flex-shrink: 0;
        padding: 24px;
        background: #f7f7f7;
        border-right: 1px solid #eee;
    }
    .mobile-carousel { display: none !important; }
    .detail-info-col { flex: 1; min-width: 0; padding-bottom: 24px; }
    #sellYoursMobile { display: none !important; }
    .detail-sell-yours-block {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin-top: auto;
        padding: 16px;
        background: #fff7eb;
        border: 1.5px dashed var(--apc-orange);
        border-radius: 10px;
        cursor: pointer;
        transition: background 0.15s;
    }
    .detail-sell-yours-block:hover { background: #fff0d6; }
    .detail-sell-yours-label {
        font-size: 12px;
        font-weight: 700;
        color: #7a4b0d;
    }
    .detail-sell-yours-btn {
        background: var(--apc-orange);
        color: var(--apc-black);
        border: none;
        border-radius: 8px;
        padding: 8px 20px;
        font-size: 12px;
        font-weight: 900;
        cursor: pointer;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        pointer-events: none;
    }
    #detailWorkshopSection { padding-bottom: 20px !important; }
    #detailWorkshopCards { grid-template-columns: 1fr; gap: 8px; }
    #dynamicDetailFooter {
        flex: 0 0 auto;
        border-top: 1px solid #e8e8e8;
        background: #fafafa;
        padding: 16px 20px 24px;
    }
    #dynamicDetailFooter .detail-footer-label { margin-bottom: 12px; }
    #dynamicDetailFooter .detail-footer-strip {
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;
        overflow: hidden;
    }
    #dynamicDetailFooter .detail-mini-card { flex: 1; }
    .desktop-main-img {
        width: 100%;
        aspect-ratio: 1/1;
        object-fit: contain;
        border-radius: 12px;
        cursor: zoom-in;
        background: #f4f4f4;
        display: block;
        transition: opacity 0.2s;   /* JS blanks this between listings so the old photo can't linger */
    }
    .desktop-thumbnails {
        display: flex;
        gap: 8px;
        margin-top: 12px;
        margin-bottom: 16px;
        flex-wrap: wrap;
    }
    .desktop-thumb {
        width: calc(25% - 6px);
        aspect-ratio: 1;
        object-fit: cover;
        border-radius: 8px;
        cursor: pointer;
        border: 2px solid transparent;
        transition: border-color 0.15s;
        background: #ddd;
    }
    .desktop-thumb:hover { border-color: rgba(247,148,29,0.5); }
    .desktop-thumb.active { border-color: var(--apc-orange); }

    /* Show backdrop when a non-filter drawer is open */
    #drawerBackdrop.active { display: block; }

    /* Apply button redundant on desktop — live filters handle it */
    #filterDrawer .action-container { display: none; }

    /* Detail overlay: seller card moves into info col on desktop */
    .detail-seller-col-card { display: flex !important; }
    #detailSellerSection { display: none !important; }
    /* With seller section hidden, push × to the right — !important overrides inline style */
    #detailOverlay .drawer-header { display: none !important; }
    #detailScrollArea { height: 100% !important; }
    .detail-float-close { display: flex; right: 16px; }

    /* Storefront mirrors the listing detail's floating geometry exactly, so when
       opened over a listing it covers it cleanly (one card, one ✕). */
    #storefrontDrawer {
        left: max(0px, calc(50vw - 800px)) !important;
        right: max(0px, calc(50vw - 800px)) !important;
        width: auto !important;
        height: auto !important;
        top: calc(var(--hdr-total-h, 143px) + 10px) !important;
        bottom: 16px !important;
        border-radius: 16px !important;
        box-shadow: var(--elev-3) !important;
        border: none !important;
        overflow: hidden;
    }
    #sellerPartsGrid {
        grid-template-columns: repeat(5, 1fr) !important;
        margin-top: 0 !important;
        gap: 4px !important;
    }
    #sellerPartsGrid .item-card-title { font-size: 10px !important; line-height: 1.3 !important; -webkit-line-clamp: 2 !important; }
    #sellerPartsGrid .item-card-price { font-size: 11px !important; }
    #sellerPartsGrid .item-card-location,
    #sellerPartsGrid .save-btn { display: none !important; }

    /* Floating card drawers — centred, auto height, not full screen */
    #authDrawer {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        height: auto !important;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        top: 36px; /* overridden by updateHeaderOffset() */
        bottom: auto !important;
        border-radius: 16px !important;
        box-shadow: 0 8px 40px rgba(0,0,0,0.18) !important;
        z-index: 2100;
    }
    #authDrawer { width: 420px !important; }
    #authDrawer.auth-drawer--wide { width: 700px !important; }

    /* Add Wanted — floating card, centred both axes */
    #addWantedDrawer,
    #addVehicleDrawer {
        left: 50% !important;
        right: auto !important;
        width: 480px !important;
        transform: translate(-50%, -50%) !important;
        top: 50% !important;
        height: auto !important;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        bottom: auto !important;
        border-radius: 16px !important;
        box-shadow: 0 8px 40px rgba(0,0,0,0.22) !important;
        z-index: 3250;
    }

    /* Floating overlay system (design kit): every drawer floats as a card in the
       centre column — inset on all sides (10px top gap + 16px bottom gap), 16px
       radius, elevation shadow, on the dark dim. One consistent pattern (was a
       flush centre-column fill). Desktop only; mobile keeps full-screen. */
    #detailOverlay,
    #garageDrawer,
    #savedPartsDrawer,
    #profileDrawer,
    #myPartsDrawer,
    #vehicleMakesDrawer,
    #recentlyViewedDrawer,
    #messageDetailDrawer,
    #chatDrawer,
    #inboxDrawer,
    #settingsDrawer,
    #workshopDrawer,
    #helpDrawer,
    #sponsoredListingsDrawer {
        left: max(0px, calc(50vw - 800px)) !important;
        right: max(0px, calc(50vw - 800px)) !important;
        width: auto !important;
        height: auto !important;
        top: calc(var(--hdr-total-h, 143px) + 10px) !important;
        bottom: 16px !important;
        box-shadow: var(--elev-3) !important;
        border-radius: 16px !important;
        border: none !important;
        overflow: hidden;
    }

    /* Detail overlay always sits above other open drawers (e.g. garage, VSC) */
    #detailOverlay { z-index: 3700; }

    /* Card-style drawers: rounded corners + shadow */
    /* top is set dynamically by updateHeaderOffset() — no hardcoded value here */
    #vehicleMakesDrawer,
    #sellOverlay {
        bottom: 16px !important;
        border-radius: 16px !important;
        box-shadow: var(--elev-3) !important;
        border: none !important;
        overflow: hidden;
    }

    /* Floating overlay system (design kit): the main marketplace overlays float
       as cards — inset on all sides (small top gap + 16px bottom gap), 16px
       radius, elevation shadow, on the dark dim. One consistent pattern; was a
       mix of flush-fill and floating. Desktop only; mobile keeps full-screen. */
    #detailOverlay,
    #sellOverlay,
    #savedPartsDrawer {
        top: calc(var(--hdr-total-h, 143px) + 10px) !important;
        bottom: 16px !important;
        border-radius: 16px !important;
        box-shadow: var(--elev-3) !important;
        border: none !important;
        overflow: hidden;
    }

    /* Nav-bar DESTINATIONS sit FLUSH to the header — square, full-height, no gap or
       shadow — so they read as "the page you navigated to", matching Home. Only true
       pop-over MODALS (listing detail, VSC card, pickers) keep the floating card look.
       Keeps the centred-column width from the floating rule above; overrides only the
       top gap / bottom gap / corners / shadow. */
    #garageDrawer,
    #savedPartsDrawer,
    #inboxDrawer,
    #chatDrawer,
    #messageDetailDrawer,
    #workshopDrawer,
    #myPartsDrawer,
    #recentlyViewedDrawer,
    #profileDrawer,
    #settingsDrawer,
    #helpDrawer,
    #sponsoredListingsDrawer {
        top: var(--hdr-total-h, 143px) !important;
        bottom: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* Workshop search + distance — single row on desktop */
    .ws-search-bar { flex-direction: row; align-items: center; gap: 10px; margin-bottom: 14px; }
    .ws-radius-control { width: auto; flex-shrink: 0; }
    .ws-radius-control .radius-seg { padding: 7px 9px; font-size: 10px; }

    /* Workshop service filters — 3 columns on desktop for better space use */
    .ws-filter-group { grid-template-columns: 1fr 1fr 1fr; }

    /* Workshop profile setup: use full width in two columns */
    #workshopDrawer .drawer-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
        gap: 0 32px;
        padding: 20px 24px;
        overflow-y: auto;
    }
    #workshopDrawer .ws-section-header { grid-column: 1 / -1; }
    #workshopBrowseSection { grid-column: 1 / -1; }

    /* Workshop profile fields: span full width, then sub-divide into 2 columns */
    #workshopProfileFields { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; align-items: start; }
    #workshopProNotice { grid-column: 1 / -1; }
    .ws-col-right { grid-column: 1; grid-row: 2; }
    .ws-col-left { grid-column: 2; grid-row: 2; }

    /* Banner: remove full-bleed margin inside the right column on desktop */
    .ws-col-right .banner-bleed-wrap { margin: 0 0 4px !important; border-radius: 10px; overflow: hidden; }
    .ws-col-right .banner-bleed-wrap .banner-upload-preview { border-radius: 10px !important; }

    /* Live filters on desktop — Apply button not needed */
    #filterDrawer .action-container { display: none; }


    /* Dashboard: full viewport width — content width controlled by .dash-inner */
}

/* ============================================================
   PRO DASHBOARD
   ============================================================ */

/* ── Pro Header ─────────────────────────────────────────────── */
#proHeader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 54px;
    background: #1a1a2e;
    border-bottom: 2px solid #F7941D;
    z-index: 3001;
}
.pro-hdr-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 100%;
    padding: 0 28px;
}
.pro-hdr-left {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-self: start;
}
.pro-hdr-brand {
    display: flex;
    align-items: center;
    gap: 9px;
}
.pro-hdr-icon {
    height: 30px;
    width: 30px;
    border-radius: 7px;
    flex-shrink: 0;
}
.pro-hdr-wordmark {
    font-size: 15px;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.pro-hdr-wordmark strong {
    color: var(--tier-pro);
    font-weight: 900;
}
.pro-hdr-back {
    color: rgba(255,255,255,0.55);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    transition: color 0.15s;
}
.pro-hdr-exit {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-left: 1px solid rgba(255,255,255,0.2);
    padding-left: 9px;
    white-space: nowrap;
    transition: color 0.15s;
}
.pro-hdr-brand:hover .pro-hdr-exit,
.pro-hdr-brand:hover .pro-hdr-back { color: #F7941D; }
.pro-hdr-pro-badge {
    background: #F7941D;
    color: white;
    font-size: 9px;
    font-weight: 900;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.8px;
}
.pro-hdr-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-self: center;
}
.pro-hdr-settings { justify-self: end; }
.pro-hdr-link {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    color: rgba(255,255,255,0.55);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    user-select: none;
    position: relative;
}
.pro-hdr-link:hover {
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.9);
}
.pro-hdr-active {
    background: rgba(247,148,29,0.15) !important;
    color: #F7941D !important;
}
.pro-hdr-refreshing svg { animation: pro-hdr-spin 0.7s linear infinite; }
@keyframes pro-hdr-spin { to { transform: rotate(360deg); } }
.pro-hdr-msg-badge {
    position: absolute;
    top: 5px;
    right: 6px;
    background: #ef4444;
    color: white;
    font-size: 9px;
    font-weight: 800;
    border-radius: 999px;
    padding: 1px 5px;
    min-width: 16px;
    text-align: center;
}
.pro-hdr-right {
    display: flex;
    align-items: center;
    margin-left: auto;
}
.pro-hdr-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--tier-pro);
    color: white;
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: opacity 0.15s;
}
.pro-hdr-avatar:hover { opacity: 0.85; }
.pro-hdr-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Pro Enquiries — Gmail-style 3-panel layout ──────────────────── */
/* Constrain the Pro full-screen views to the index width (1600px centred, the
   site-wide content frame) so content isn't stretched across ultra-wide
   monitors — grey surface shows on the sides */
@media (min-width: 900px) {
    #proEnquiriesView,
    #proWantedView,
    #proVehicleStockView {
        max-width: 1600px;
        margin-left: auto;
        margin-right: auto;
    }
}
.pro-mail-sidebar {
    width: 220px; flex-shrink: 0;
    background: #f6f8fc; border-right: 1px solid #e2e8f0;
    display: flex; flex-direction: column; padding: 14px 0;
}
.pro-mail-compose {
    padding: 0 12px 14px;
}
.pro-mail-search {
    width: 100%; box-sizing: border-box;
    padding: 8px 14px; border: 1px solid #ddd; border-radius: 20px;
    font-size: 12px; background: white; outline: none; font-family: inherit;
    transition: border-color 0.15s;
}
.pro-mail-search:focus { border-color: #F7941D; }
.pro-mail-folders { flex: 1; }
.pro-mail-folder {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 16px; font-size: 13px; font-weight: 500; color: #444;
    cursor: pointer; border-radius: 0 24px 24px 0; margin-right: 8px;
    transition: background 0.12s; white-space: nowrap;
    position: relative;
}
.pro-mail-folder svg { flex-shrink: 0; color: #666; }
.pro-mail-folder:hover { background: #e8edf8; }
.pro-mail-folder.active { background: #d3e3fd; color: #1a1a2e; font-weight: 700; }
.pro-mail-folder.active svg { color: #1a1a2e; }
/* "Message Settings" entry at the top of the sidebar (above the search box) */
.pro-mail-settings-item {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 14px; margin: 0 12px 12px;
    font-size: 13px; font-weight: 600; color: #444;
    cursor: pointer; border-radius: 8px; white-space: nowrap;
    border: 1px solid #e2e8f0; background: #fff;
    transition: background 0.12s, border-color 0.12s;
}
.pro-mail-settings-item svg { flex-shrink: 0; color: #666; }
.pro-mail-settings-item:hover { background: #eef2fb; border-color: #d3e3fd; }
.pro-mail-settings-item.active { background: #d3e3fd; border-color: #d3e3fd; color: #1a1a2e; font-weight: 700; }
.pro-mail-settings-item.active svg { color: #1a1a2e; }
/* Settings shown in Col 2 as a master list; each opens its detail in Col 3 */
.pro-mail-settings-panel { flex: 1; overflow-y: auto; }
.pms-item {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; cursor: pointer; border-bottom: 1px solid #f2f2f2;
    transition: background 0.12s;
}
.pms-item:hover { background: #f9fafc; }
.pms-item.active { background: #eef4ff; }
.pms-item-main { flex: 1; min-width: 0; }
.pms-item-title { font-size: 14px; font-weight: 600; color: #333; }
.pms-item.active .pms-item-title { color: #1a1a2e; font-weight: 700; }
.pms-item-sub { font-size: 12px; color: #999; margin-top: 2px; }
.pms-item-chev { color: #ccc; font-size: 18px; flex-shrink: 0; }
/* The selected setting's controls, shown in Col 3 */
.pro-mail-settings-detail { flex: 1; overflow-y: auto; padding: 22px 24px; }
.pro-mail-settings-detail .settings-section-label:first-child { margin-top: 0; }

/* ── Block / Report (messaging safety) ── */
.inbox-safety-btn, .pro-mail-safety-btn {
    flex-shrink: 0; background: none; border: none; cursor: pointer;
    font-size: 20px; line-height: 1; color: #999; padding: 4px 8px;
    border-radius: 8px; transition: background 0.12s, color 0.12s;
}
.inbox-safety-btn:hover, .pro-mail-safety-btn:hover { background: #f0f0f0; color: #444; }

.safety-backdrop {
    position: fixed; inset: 0; z-index: 6000;
    background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.safety-sheet {
    background: #fff; border-radius: 16px; width: 100%; max-width: 340px;
    padding: 8px; box-shadow: var(--elev-4, 0 20px 60px rgba(0,0,0,0.3));
}
.safety-sheet-name {
    font-size: 12px; font-weight: 700; color: #888; text-align: center;
    padding: 12px 12px 10px; text-transform: none;
}
.safety-opt {
    display: block; width: 100%; text-align: center; background: none; border: none;
    padding: 14px; font-size: 15px; font-weight: 600; color: #333; cursor: pointer;
    font-family: inherit; border-radius: 10px;
}
.safety-opt:hover { background: #f6f6f6; }
.safety-opt-danger { color: #ef4444; font-weight: 700; }
.safety-cancel { color: #888; margin-top: 4px; border-top: 1px solid #f0f0f0; border-radius: 0; }

.report-card {
    background: #fff; border-radius: 16px; width: 100%; max-width: 400px;
    padding: 20px; box-shadow: var(--elev-4, 0 20px 60px rgba(0,0,0,0.3));
}
.report-title { font-size: 17px; font-weight: 800; color: #222; margin-bottom: 6px; }
.report-sub { font-size: 12.5px; color: #777; line-height: 1.5; margin-bottom: 16px; }
.report-reasons { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.report-reason {
    display: flex; align-items: center; gap: 10px; padding: 10px 8px;
    font-size: 14px; color: #333; cursor: pointer; border-radius: 8px;
}
.report-reason:hover { background: #f7f7f7; }
.report-reason input { accent-color: var(--apc-orange); width: 17px; height: 17px; flex-shrink: 0; }
.report-note {
    width: 100%; box-sizing: border-box; min-height: 74px; resize: vertical;
    border: 1.5px solid #e2e2e2; border-radius: 10px; padding: 10px 12px;
    font-family: inherit; font-size: 13px; outline: none; margin-bottom: 16px;
}
.report-note:focus { border-color: var(--apc-orange); }
.report-actions { display: flex; gap: 10px; justify-content: flex-end; }
.report-cancel {
    background: none; border: 1.5px solid #ddd; color: #777; border-radius: 8px;
    padding: 10px 18px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.report-submit {
    background: var(--apc-orange); border: none; color: var(--apc-black); border-radius: 8px;
    padding: 10px 20px; font-size: 13px; font-weight: 800; cursor: pointer; font-family: inherit;
}

.blocked-list { display: flex; flex-direction: column; gap: 8px; }
.blocked-empty { font-size: 13px; color: #aaa; padding: 4px 0; }
.blocked-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; background: #f7f7f7; border-radius: 10px;
}
.blocked-name { font-size: 14px; font-weight: 600; color: #333; }
.blocked-actions { display: flex; gap: 8px; flex-shrink: 0; }
.blocked-report {
    background: none; border: 1.5px solid #ddd; color: #777;
    border-radius: 8px; padding: 6px 14px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.blocked-report:hover { border-color: #ef4444; color: #ef4444; }
.blocked-unblock {
    background: none; border: 1.5px solid var(--apc-orange); color: var(--apc-orange-ink, #B45309);
    border-radius: 8px; padding: 6px 14px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.pro-mail-badge {
    margin-left: auto; background: #1a1a2e; color: white;
    font-size: 10px; font-weight: 800; padding: 1px 7px;
    border-radius: 10px; min-width: 20px; text-align: center;
}
.pro-mail-list-col {
    width: 420px; flex-shrink: 0; border-right: 1px solid #eee;
    display: flex; flex-direction: column; background: white;
}
.pro-mail-list-hdr {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 16px 11px; border-bottom: 1px solid #f0f0f0;
    font-size: 12px; font-weight: 800; color: #444; text-transform: uppercase; letter-spacing: 0.5px;
}
.pro-mail-count { font-size: 11px; color: #bbb; font-weight: 600; text-transform: none; letter-spacing: 0; }
.pro-mail-list { flex: 1; overflow-y: auto; }
.pro-mail-row {
    display: flex; align-items: flex-start;
    padding: 11px 16px; border-bottom: 1px solid #f5f5f5;
    cursor: pointer; gap: 12px; transition: background 0.1s;
}
.pro-mail-row:hover  { background: #f8f9fb; }
.pro-mail-row.active { background: #d3e3fd; }
.pro-mail-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: #F7941D; color: white; font-size: 14px; font-weight: 800;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;
}
.pro-mail-row-body { flex: 1; min-width: 0; }
.pro-mail-row-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; gap: 8px; }
.pro-mail-sender { font-size: 13px; font-weight: 500; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.pro-mail-time    { font-size: 11px; color: #bbb; white-space: nowrap; flex-shrink: 0; }
.pro-mail-subject { font-size: 12px; font-weight: 500; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pro-mail-preview { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.pro-mail-row.unread .pro-mail-sender  { font-weight: 800; color: #111; }
.pro-mail-row.unread .pro-mail-subject { font-weight: 700; color: #111; }
.pro-mail-row.unread .pro-mail-time    { color: #444; font-weight: 700; }
.pro-mail-row.flagged { border-left: 3px solid #3b82f6; background: #eff6ff; }
.pro-mail-row.flagged:hover { background: #e0effe; }
.pro-mail-row-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 0.12s; flex-shrink: 0; }
.pro-mail-row:hover .pro-mail-row-actions { opacity: 1; }
.pro-mail-row-act { background: none; border: none; cursor: pointer; color: #bbb; font-size: 13px; padding: 3px 5px; border-radius: 4px; line-height: 1; display: flex; align-items: center; transition: color 0.1s, background 0.1s; }
.pro-mail-row-act:hover { color: #555; background: #f0f0f0; }
.pro-mail-row-act.flagged { color: #3b82f6; opacity: 1; }
.pro-mail-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: #F7941D; flex-shrink: 0; margin-top: 5px; }
.pro-mail-thread-col {
    flex: 1; display: flex; flex-direction: row; overflow: hidden; background: white;
}
.pro-mail-empty {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 12px; color: #ccc; font-size: 13px; font-weight: 600;
}
.pro-mail-empty-msg { display: flex; flex: 1; flex-direction: column; overflow: hidden; }
.pro-mail-thread-hdr {
    padding: 16px 20px 12px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0;
}
.pro-mail-thread-title { font-size: 18px; font-weight: 800; color: #1a1a1a; margin-bottom: 4px; }
.pro-mail-thread-meta  { font-size: 12px; color: var(--text-3); }
.pro-mail-thread-msgs  { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.pro-mail-msg {
    display: flex; gap: 12px; max-width: 80%;
}
.pro-mail-msg.sent { align-self: flex-end; flex-direction: row-reverse; }
.pro-mail-msg-avatar { width: 30px; height: 30px; border-radius: 50%; background: #e0e0e0; color: #666; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.pro-mail-msg.sent .pro-mail-msg-avatar { background: #F7941D; color: white; }
.pro-mail-msg-bubble { background: #f0f0f0; border-radius: 12px 12px 12px 3px; padding: 10px 14px; font-size: 13px; line-height: 1.5; color: #333; }
.pro-mail-msg.sent .pro-mail-msg-bubble { background: #F7941D; color: white; border-radius: 12px 12px 3px 12px; }
.pro-mail-msg-time { font-size: 10px; color: #bbb; margin-top: 4px; text-align: right; }
.pro-mail-thread-reply { padding: 12px 16px; border-top: 1px solid #f0f0f0; flex-shrink: 0; display: flex; gap: 10px; align-items: flex-end; }
.pro-mail-reply-input { flex: 1; padding: 10px 14px; border: 1.5px solid #e0e0e0; border-radius: 20px; font-size: 13px; font-family: inherit; resize: none; outline: none; max-height: 100px; }
.pro-mail-reply-input:focus { border-color: #F7941D; }
.pro-mail-reply-send { width: 36px; height: 36px; border-radius: 50%; background: #F7941D; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s; }
.pro-mail-reply-send:hover { background: #DF7D0F; }
.pro-mail-empty-list { padding: 48px 16px; text-align: center; color: #bbb; font-size: 13px; }
.pro-mail-photo-btn { background: none; border: 1.5px solid #e0e0e0; border-radius: 8px; padding: 7px 9px; cursor: pointer; color: var(--text-3); display: flex; align-items: center; transition: border-color 0.15s, color 0.15s; flex-shrink: 0; }
.pro-mail-photo-btn:hover { border-color: #F7941D; color: #F7941D; }
.pro-mail-quote-btn { background: none; border: 1.5px solid #e0e0e0; border-radius: 8px; padding: 7px 12px; font-size: 12px; font-weight: 600; color: #666; cursor: pointer; flex-shrink: 0; transition: border-color 0.15s, color 0.15s; }
.pro-mail-quote-btn:hover { border-color: #F7941D; color: #F7941D; }
/* Quote form — inline in Pro Enquiries thread (seller-only) */
.pro-quote-form { display: none; flex-direction: column; gap: 10px; padding: 12px 16px; background: #f8f9ff; border-top: 1.5px solid #e8e8f0; flex-shrink: 0; }
.pro-qf-header { display: flex; align-items: center; justify-content: space-between; }
.pro-qf-title { font-size: 12px; font-weight: 700; color: #333; }
.pro-qf-num-label { font-size: 11px; color: var(--text-3); }
.pro-qf-num-label strong { color: #F7941D; font-family: monospace; }
.pro-qf-fields { display: flex; gap: 10px; }
.pro-qf-field { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.pro-qf-label { font-size: 10px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px; }
.pro-qf-price { padding: 8px 10px; border: 1.5px solid #e0e0e0; border-radius: 8px; font-size: 18px; font-weight: 700; color: #F7941D; width: 100%; outline: none; font-family: inherit; }
.pro-qf-price:focus { border-color: #F7941D; }
.pro-qf-notes { padding: 8px 10px; border: 1.5px solid #e0e0e0; border-radius: 8px; font-size: 13px; width: 100%; outline: none; font-family: inherit; }
.pro-qf-notes:focus { border-color: #F7941D; }
.pro-qf-actions { display: flex; gap: 8px; align-items: center; }
/* Cap thread width on large monitors so bubbles don't stretch */
.pro-mail-empty-msg { max-width: 680px; flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
/* Wider context panel in Pro view */
#proInboxContextPanel { width: 360px !important; flex-shrink: 0; }
.pro-ctx-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 100%; color: #ccc; font-size: 12px; font-weight: 600; padding: 20px; text-align: center; }

/* ── Pro Full-Screen drawer — promoted from drawer to content pane ─── */
@media (min-width: 900px) {
    .pro-full.active {
        left: max(0px, calc(50vw - 800px)) !important;
        right: max(0px, calc(50vw - 800px)) !important;
        top: calc(var(--hdr-total-h, 143px) + 10px) !important;
        bottom: 16px !important;
        width: auto !important;
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
        background: var(--bg) !important;
        border-radius: 16px !important;
        box-shadow: var(--elev-3) !important;
        overflow: hidden !important;
        z-index: 2050 !important;
        transform: none !important;
    }
    .pro-full .drawer-header { display: none !important; }

    /* Pro workspace is a set of DESTINATIONS you navigate to (dashboard, messages,
       listings, vehicle stock, members-wanted) — so they sit FLUSH to the header,
       square, like the consumer nav drawers and Home. (Stock Lookup already went
       full-width flush via .dashview-full below.) */
    #dashboardView {
        left: max(0px, calc(50vw - 800px)) !important;
        right: max(0px, calc(50vw - 800px)) !important;
        top: var(--hdr-total-h, 143px) !important;
        bottom: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: hidden;
    }
    #dashboardView.dashview-full {
        left: 0 !important;
        right: 0 !important;
        top: var(--hdr-total-h, 143px) !important;
        bottom: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* Wider columns when inbox has full real estate */
    .pro-full .inbox-conv-col      { width: 380px; }
    .pro-full .inbox-context-panel { width: 320px; }

    /* Warehouse + Yard Report keep their title/tab header (Stock Lookup & EDW
       supply their own internal headers, so .pro-full hides the default one). */
    #warehouseDrawer .drawer-header,
    #yardReportDrawer .drawer-header { display: flex !important; }

    /* Centre content so it reads well at full desktop width instead of stretching. */
    #yardReportContent .yr-top,
    #yardReportContent .yr-list { max-width: 1000px; margin-left: auto; margin-right: auto; }
}

.dtb-dashboard { color: var(--apc-blue) !important; font-weight: 800 !important; }
.dash-hdr-btn {
    display: flex; align-items: center; gap: 6px;
    background: white; border: 1.5px solid #F7941D; border-radius: 10px;
    padding: 7px 14px; font-size: 12px; font-weight: 700;
    color: #F7941D; cursor: pointer; font-family: inherit;
    transition: background 0.15s;
}
.dash-hdr-btn:hover { background: #fff4e6; }
.dtb-dashboard:hover { color: var(--apc-blue) !important; background: #e8f0fe !important; }

/* APC PRO dropdown — Pro tools grouped under one top-bar item */
.dtb-pro-menu { position: relative; align-items: center; }
.dtb-pro-caret { font-size: 9px; margin-left: 1px; opacity: 0.85; }
.dtb-pro-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    min-width: 200px;
    padding: 6px;
    z-index: 5000;
}
.dtb-pro-dropdown.open { display: block; }
.dtb-pro-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    border-radius: 7px;
    cursor: pointer;
    font-family: inherit;
}
.dtb-pro-item:hover { background: #f4f4f4; color: var(--apc-orange); }
.dtb-pro-divider { height: 1px; background: #eee; margin: 5px 8px; }

.dash-inner {
    max-width: 1800px;
    margin: 0 auto;
    padding: 28px 36px 48px;
    box-sizing: border-box;
}

/* Page header */
.dash-page-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 26px;
}
.dash-page-hdr-left {
    display: flex;
    align-items: center;
    gap: 20px;
}
.dash-back-btn {
    background: white;
    border: 1.5px solid #e0e0e0;
    border-radius: 9px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #555;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    white-space: nowrap;
}
.dash-back-btn:hover { border-color: var(--apc-orange); color: var(--apc-orange); }
.dash-page-title {
    font-size: 24px;
    font-weight: 900;
    color: #1a1a1a;
    line-height: 1.1;
}
.dash-page-sub {
    font-size: 12px;
    color: var(--text-3);
    margin-top: 3px;
    font-weight: 500;
}

/* Stat cards */
.dash-stats-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}
.dash-stat-card {
    background: white;
    border-radius: 14px;
    padding: 22px 20px 18px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border-top: 3px solid #eee;
}
/* All KPI cards share one neutral top border — no colouring just some (audit) */
.dash-stat-primary, .dash-stat-green { border-top-color: #e4e4ea; }
.dash-stat-clickable { cursor: pointer; transition: box-shadow 0.15s, transform 0.1s; }
.dash-stat-clickable:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); transform: translateY(-1px); }
.dash-stat-ico {
    font-size: 22px;
    margin-bottom: 12px;
    line-height: 1;
}
.dash-heart-ico { color: var(--apc-orange); }
.dash-stat-val {
    font-size: 34px;
    font-weight: 900;
    color: #1a1a1a;
    line-height: 1;
    margin-bottom: 6px;
    letter-spacing: -1px;
}
.dash-stat-lbl {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Mid row: charts + activity */
.dash-mid-row {
    display: grid;
    grid-template-columns: 1.6fr 1fr 0.7fr;
    gap: 14px;
    margin-bottom: 14px;
}
.dash-second-row {
    display: grid;
    grid-template-columns: 1.6fr 1.7fr;
    gap: 14px;
    margin-bottom: 14px;
    align-items: start;
}
.dash-left-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.dash-chart-main, .dash-chart-cat, .dash-activity-col { min-height: 260px; }

/* Generic card */
.dash-card {
    background: white;
    border-radius: 14px;
    padding: 20px 22px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.dash-card-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.dash-card-title {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #444;
}
.dash-card-meta {
    font-size: 11px;
    color: #bbb;
    font-weight: 600;
}
.dash-chart-wrap {
    position: relative;
    height: 190px;
}
/* By Category — CSS horizontal bars (replaces the near-invisible Chart.js canvas) */
.dash-cat-bars { overflow-y: auto; padding: 8px 6px 2px; }
.hbar { display: grid; grid-template-columns: minmax(64px, 96px) 1fr auto; align-items: center; gap: 10px; font-size: 12px; margin-bottom: 9px; }
.hbar-label { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { height: 14px; background: #f0f0f3; border-radius: 999px; overflow: hidden; }
.hbar-fill { height: 100%; border-radius: 999px; background: #d97b00; }
.hbar-val { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-1); min-width: 16px; text-align: right; }

/* Tabs */
.dash-tabs { display: flex; gap: 6px; }
.dash-tab {
    background: #f0f0f0;
    border: none;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    color: #666;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.dash-tab.active { background: var(--apc-orange); color: var(--apc-black); }
.dash-tab-badge {
    background: rgba(0,0,0,0.12);
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 800;
}
.dash-tab.active .dash-tab-badge { background: rgba(255,255,255,0.3); }

/* Activity feed */
.dash-activity-list {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 210px;
}
.dash-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
}
.dash-activity-item:last-child { border-bottom: none; }
.dash-act-ico {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.dash-act-body { flex: 1; min-width: 0; }
.dash-act-text {
    font-size: 12px;
    line-height: 1.4;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-act-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}
.dash-act-sub {
    font-size: 10px;
    font-weight: 700;
    color: var(--apc-orange);
}
.dash-act-price {   /* prices stay the info blue, consistent with the rest */
    font-size: 10px;
    font-weight: 700;
    color: var(--apc-blue-bg);
}
.dash-act-time {
    font-size: 10px;
    color: #bbb;
    font-weight: 600;
}
.dash-activity-empty {
    padding: 24px 12px;
    text-align: center;
    font-size: 11px;
    color: #bbb;
    font-weight: 600;
}

/* Listings search row */
.dash-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 0 10px;
    border-top: 1px solid #f0f0f0;
}
.dash-search-input {
    flex: 1;
    padding: 9px 14px;
    border: 1.5px solid #e8e8e8;
    border-radius: 9px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
    background: #fafafa;
}
.dash-search-input:focus { border-color: var(--apc-orange); background: white; }
.dash-search-select {
    padding: 9px 12px;
    border: 1.5px solid #e8e8e8;
    border-radius: 9px;
    font-size: 13px;
    font-family: inherit;
    background: #fafafa;
    color: #555;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s;
}
.dash-search-select:focus { border-color: var(--apc-orange); }
.dash-results-count {
    font-size: 11px;
    color: #bbb;
    font-weight: 600;
    white-space: nowrap;
}

/* Listings table */
.dash-listings-body { overflow-x: auto; }
.dash-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.dash-table th {
    text-align: left;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #bbb;
    padding: 10px 14px 8px;
    border-bottom: 1.5px solid #f0f0f0;
}
.dash-table td {
    padding: 13px 14px;
    border-bottom: 1px solid #f8f8f8;
    vertical-align: middle;
}
.dash-table tr:last-child td { border-bottom: none; }
.dash-table tbody tr:hover td { background: #fffaf5; }
.dash-thumb {
    width: 46px;
    height: 46px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}
.dash-part-name { font-weight: 700; color: #1a1a1a; }
.dash-part-sub  { font-size: 11px; color: var(--text-3); margin-top: 3px; }
.dash-td-price  { font-weight: 800; color: var(--apc-blue-bg); white-space: nowrap; }   /* price = info blue, consistent with the marketplace (design kit) */
.dash-td-loc    { white-space: nowrap; }
.dash-td-stock  { white-space: nowrap; font-size: 12px; font-weight: 600; color: #555; }
.dash-td-kms    { white-space: nowrap; font-size: 12px; font-weight: 600; color: #555; }
.dash-quote-chip { display: inline-block; margin-left: 6px; background: #eef2ff; border: 1px solid #c7d2fe; color: #4f46e5; border-radius: 20px; font-size: 10px; font-weight: 800; padding: 1px 7px; cursor: pointer; vertical-align: middle; }
.dash-quote-chip:hover { background: #e0e7ff; }
.dash-bulk-bar { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 14px; padding: 9px 14px; margin-bottom: 10px; background: #fff8f2; border: 1px solid #ffe0c2; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.dash-bulk-count { font-weight: 800; font-size: 13px; color: #F7941D; }
.dash-bulk-actions { display: flex; gap: 8px; margin-left: auto; }
.dash-chk-cell { width: 36px; text-align: center; }
.dash-chk-cell input { width: 16px; height: 16px; accent-color: #F7941D; cursor: pointer; vertical-align: middle; }
.dash-td-loc--empty { color: #ccc; }
.dash-bin-chip  { display: inline-block; background: #f0f0f0; border: 1px solid #ddd; border-radius: 5px; padding: 2px 7px; font-size: 11px; font-weight: 700; color: #555; letter-spacing: 0.3px; }
.dash-td-saves  { color: var(--text-3); font-weight: 600; white-space: nowrap; }
.dash-td-date   { color: #bbb; font-size: 12px; white-space: nowrap; }
.dash-action-btn {
    border: 1.5px solid #e0e0e0;
    background: white;
    border-radius: 7px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    color: #555;
    transition: border-color 0.15s, color 0.15s;
    margin-right: 5px;
    white-space: nowrap;
}
.dash-action-btn:hover { border-color: var(--apc-orange); color: var(--apc-orange); }
.dash-action-btn.dash-btn-danger:hover { border-color: #FF3B30; color: #FF3B30; }
.dash-action-btn.dash-btn-primary { background: var(--apc-orange); border-color: var(--apc-orange); color: var(--apc-black); }
.dash-action-btn.dash-btn-primary:hover { opacity: 0.9; }
/* Edit = the emphasised row action (orange outline); Mark Sold stays the quiet
   neutral base button — kills the "wall of orange" (audit My Listings). */
.dash-action-btn.dash-btn-edit { border-color: var(--apc-orange); color: var(--apc-orange-ink); }
.dash-action-btn.dash-btn-edit:hover { background: var(--apc-orange-light, #fff4e6); }
.dash-action-btn.dash-btn-warning { border-color: #f59e0b; color: #f59e0b; }
.dash-action-btn.dash-btn-warning:hover { background: #f59e0b; color: white; border-color: #f59e0b; }
.dash-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #ccc;
    font-weight: 700;
    font-size: 14px;
}
.dash-offered-price { font-size: 20px; font-weight: 900; color: var(--apc-orange); display: block; }
.dash-listed-price  { font-size: 13px; font-weight: 600; color: var(--text-3); display: block; margin-top: 4px; }
.dash-offer-note    { font-size: 12px; color: var(--text-3); font-style: italic; margin-top: 4px; }
.dash-counter-row   { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.dash-counter-input {
    width: 110px; padding: 6px 10px; border: 1.5px solid var(--apc-orange);
    border-radius: 7px; font-size: 13px; font-weight: 700; outline: none;
}

/* Sell form — Open to Offers toggle row */
.sell-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #fafafa;
    border-radius: 10px;
    margin-bottom: 12px;
    border: 1.5px solid #eee;
}
.sell-toggle-label { font-size: 14px; font-weight: 700; color: #222; }
.sell-toggle-sub   { font-size: 11px; color: var(--text-3); margin-top: 3px; }
.sell-switch-wrap  { cursor: pointer; }

/* Make an Offer button — on detail page */
.offer-make-btn {
    width: 100%;
    padding: 14px;
    background: white;
    border: 2px solid var(--apc-orange);
    border-radius: 8px;
    color: var(--apc-orange);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.offer-make-btn:hover { background: var(--apc-orange); color: var(--apc-black); }
@media (hover: none) {
    .offer-make-btn:active { background: var(--apc-orange); color: var(--apc-black); }
}

/* Offer bottom sheet */
.offer-sheet {
    position: fixed;
    bottom: 0;
    left: 0; right: 0;
    background: white;
    border-radius: 20px 20px 0 0;
    z-index: 3901; /* above the in-store listing detail (lifted to store-z + 50, up to 3850) */
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    padding-bottom: env(safe-area-inset-bottom, 16px);
    box-shadow: 0 -4px 30px rgba(0,0,0,0.15);
}
.offer-sheet.active { transform: translateY(0); }
.offer-sheet-handle {
    width: 40px; height: 4px;
    background: #ddd; border-radius: 999px;
    margin: 12px auto 0;
}
.offer-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 8px;
}
.offer-sheet-title  { font-size: 17px; font-weight: 900; }
.offer-sheet-close  {
    background: none; border: none; font-size: 28px;
    color: var(--text-3); cursor: pointer; line-height: 1; padding: 0;
}
.offer-sheet-part-info {
    padding: 10px 20px 14px;
    background: #fff9f2;
    margin: 0 16px 4px;
    border-radius: 10px;
    font-size: 13px;
}
.offer-sheet-part-title { font-weight: 700; color: #222; margin-bottom: 3px; }
.offer-sheet-listed-price { font-size: 12px; color: var(--text-3); }
.offer-sheet-listed-price strong { color: var(--apc-orange); }
.offer-sheet-body { padding: 10px 20px 20px; }

@media (min-width: 900px) {
    .offer-sheet {
        left: 50%; right: auto;
        width: 520px;
        transform: translateX(-50%) translateY(100%);
        border-radius: 20px 20px 0 0;
    }
    .offer-sheet.active { transform: translateX(-50%) translateY(0); }
}

/* Sell form — no spinners on number inputs where arrows are useless */
#sellQuantity { width: 25%; }
#sellQuantity, #sellPrice, #sellPostcode, #sellYear { -moz-appearance: textfield; }
#sellQuantity::-webkit-outer-spin-button,
#sellQuantity::-webkit-inner-spin-button,
#sellPrice::-webkit-outer-spin-button,
#sellPrice::-webkit-inner-spin-button,
#sellPostcode::-webkit-outer-spin-button,
#sellPostcode::-webkit-inner-spin-button,
#sellYear::-webkit-outer-spin-button,
#sellYear::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ===== SELL FORM — WAREHOUSE BIN SECTION ===== */
.sell-warehouse-hdr {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-2);   /* match the other section headers (was orange) */
    letter-spacing: 0.4px;
    margin: 18px 0 10px;
}

/* ===== WELCOME MODAL ===== */
#welcomeModal { flex-direction: column; }

.welcome-tile {
    background: #f9f8f6;
    border: 1.5px solid #edeae6;
    border-radius: 14px;
    padding: 14px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.welcome-tile:hover {
    border-color: rgba(200,130,60,0.35);
    box-shadow: 0 2px 10px rgba(200,130,60,0.08);
}
.welcome-tile-pro {
    border-color: rgba(200,130,60,0.3);
    background: linear-gradient(135deg, #fdf9f4 0%, #faf5ec 100%);
}
.welcome-tile-icon { font-size: 26px; line-height: 1; margin-bottom: 2px; }
.welcome-tile-title { font-size: 13px; font-weight: 900; color: #1a1a1a; letter-spacing: -0.1px; }
.welcome-tile-title-pro { color: #b8721a; }
.welcome-tile-desc { font-size: 12px; color: #777; line-height: 1.5; }

.welcome-cta-btn {
    width: 100%;
    padding: 15px;
    background: var(--apc-orange);
    color: var(--apc-black);
    border: none;
    border-radius: 14px;
    font-weight: 900;
    font-size: 15px;
    letter-spacing: 0.3px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(247,148,29,0.3);
    transition: opacity 0.15s;
}
.welcome-cta-btn:hover { opacity: 0.88; }

/* ===== UPGRADE TO PRO MODAL ===== */
.upgrade-plan-card {
    border: 2px solid #e8e8e8;
    border-radius: 12px;
    padding: 14px 12px 12px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    text-align: center;
}
.upgrade-plan-card:hover { border-color: var(--apc-orange); }
.upgrade-plan-active {
    border-color: var(--apc-orange) !important;
    box-shadow: 0 0 0 3px rgba(247,148,29,0.15);
}

/* ===== QR LABEL MODAL ===== */
/* ── INBOX MESSAGE CENTRE ─────────────────────── */
#inboxDrawer .drawer-content.inbox-drawer-content {
    padding: 0; overflow: hidden; display: flex; flex-direction: column;
}
.inbox-tab-bar { display: flex; border-bottom: 1px solid #f0f0f0; background: white; flex-shrink: 0; }
.itab {
    flex: 1; padding: 12px 16px; background: none; border: none; border-bottom: 2px solid transparent;
    font-size: 13px; font-weight: 700; color: var(--text-3); cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.itab.active { color: var(--apc-orange); border-bottom-color: var(--apc-orange); }
.itab-badge { background: var(--apc-orange); color: white; font-size: 10px; font-weight: 800; border-radius: 10px; padding: 1px 6px; }

.inbox-role-tabs { display: flex; border-bottom: 1px solid #f0f0f0; background: white; flex-shrink: 0; }
.inbox-role-tab {
    flex: 1; padding: 11px 16px; background: none; border: none; border-bottom: 2px solid transparent;
    font-size: 13px; font-weight: 700; color: var(--text-3); cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: color 0.15s, border-color 0.15s;
}
.inbox-role-tab.active { color: var(--apc-blue); border-bottom-color: var(--apc-blue); }
.inbox-role-tab:not(.active):hover { color: #555; }
.inbox-role-badge { background: var(--apc-orange); color: white; font-size: 10px; font-weight: 800; border-radius: 10px; padding: 1px 6px; }

.inbox-two-panel { display: flex; flex: 1; overflow: hidden; }

/* ── Trash panel ── */
.inbox-trash-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; color: var(--text-3); font-size: 14px; font-weight: 600; }
.inbox-trash-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #f0f0f0; }
.inbox-trash-empty-btn { background: none; border: 1.5px solid #e03b3b; color: #e03b3b; font-size: 12px; font-weight: 700; border-radius: 8px; padding: 5px 12px; cursor: pointer; font-family: inherit; }
.inbox-trash-empty-btn:hover { background: #ffeaea; }
.inbox-trash-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #f5f5f5; }
.inbox-trash-item-info { flex: 1; min-width: 0; }
.inbox-trash-name { font-size: 14px; font-weight: 700; color: #222; }
.inbox-trash-part { font-size: 12px; color: var(--text-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-trash-meta { font-size: 11px; color: #bbb; margin-top: 3px; }
.inbox-trash-actions { display: flex; flex-direction: row; gap: 8px; flex-shrink: 0; align-items: center; }
.inbox-trash-restore-btn { background: var(--apc-blue); color: white; border: none; border-radius: 999px; padding: 7px 14px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; }
.inbox-trash-del-btn { background: none; border: 1.5px solid #e03b3b; color: #e03b3b; border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; }
.inbox-trash-del-btn:hover { background: #ffeaea; }

.inbox-conv-col {
    width: 270px; flex-shrink: 0; border-right: 1px solid #eee;
    display: flex; flex-direction: column; background: white;
}
.inbox-conv-search { padding: 10px 12px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
.inbox-conv-search input {
    width: 100%; box-sizing: border-box; padding: 7px 12px; border: 1px solid #e4e4e4; border-radius: 10px;
    font-size: 13px; background: #f7f7f7; outline: none; font-family: inherit;
}
.inbox-conv-search input:focus { border-color: var(--apc-orange); background: white; }
.inbox-conv-list { flex: 1; overflow-y: auto; }

.inbox-conv-item {
    position: relative;
    padding: 13px 52px 13px 14px; cursor: pointer; border-bottom: 1px solid #f5f5f5;
    transition: background 0.12s; border-left: 3px solid transparent;
}
.inbox-conv-item:hover { background: #fafafa; }
.inbox-conv-item.active { background: #fff8f0; border-left-color: var(--apc-orange); }
.inbox-conv-item.flagged { background: #eff6ff; border-left-color: #3b82f6; }
.inbox-conv-item.flagged:hover { background: #e0effe; }
.inbox-conv-item.unread .inbox-conv-preview { font-weight: 700; color: #333; }
.inbox-conv-item.unread .inbox-conv-name { font-weight: 900; }
.inbox-conv-del-btn {
    position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
    background: none; border: none; color: #ccc; font-size: 22px;
    cursor: pointer; padding: 6px; line-height: 1;
    transition: color 0.12s;
}
.inbox-conv-del-btn:hover { color: #FF3B30; }
.inbox-conv-name-row { display: flex; align-items: center; gap: 6px; }
.inbox-conv-name { font-size: 15px; font-weight: 700; color: #222; }
.inbox-conv-flag-btn {
    background: none; border: none; padding: 4px; cursor: pointer;
    font-size: 16px; color: #ccc; line-height: 1; flex-shrink: 0;
    transition: color 0.12s;
}
.inbox-conv-flag-btn:hover { color: #bbb; }
.inbox-conv-flag-btn.flagged { color: #3b82f6; }
.inbox-conv-flag-btn.flagged:hover { color: #3b82f6; }
.inbox-conv-time { font-size: 12px; color: #bbb; flex-shrink: 0; margin-left: auto; padding-right: 4px; }
.inbox-unread-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--apc-orange); flex-shrink: 0; }
.inbox-conv-part { font-size: 13px; color: var(--apc-orange); font-weight: 700; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-conv-preview { font-size: 13px; color: var(--text-3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.inbox-thread-col { flex: 1; display: flex; flex-direction: column; background: #f9f9f9; min-width: 0; overflow: hidden; position: relative; }

/* ── ITEM PREVIEW PANEL ──────────────────────── */
.inbox-item-preview {
    position: absolute; inset: 0; z-index: 20;
    background: white;
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.28s ease;
    overflow: hidden;
}
.inbox-item-preview.open { transform: translateX(0); }

.iip-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid #eee;
    background: white; flex-shrink: 0;
}
.iip-header-label { font-size: 14px; font-weight: 900; color: #333; }
.iip-back-btn {
    background: none; border: none; cursor: pointer;
    color: var(--apc-blue); font-size: 13px; font-weight: 700;
    font-family: inherit; padding: 0; white-space: nowrap;
}

.iip-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }

.iip-photos { display: flex; flex-direction: column; gap: 8px; }
.iip-main-photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; background: #f0f0f0; cursor: zoom-in; }
.iip-thumbs { display: flex; gap: 6px; }
.iip-thumb { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; cursor: pointer; border: 2px solid transparent; opacity: 0.7; transition: opacity 0.15s, border-color 0.15s; }
.iip-thumb.active { border-color: var(--apc-orange); opacity: 1; }

.iip-price-row { display: flex; align-items: baseline; gap: 10px; }
.iip-price { font-size: 28px; font-weight: 900; color: var(--apc-blue); }
.iip-condition { font-size: 12px; font-weight: 700; color: var(--text-3); background: #f4f4f4; padding: 3px 9px; border-radius: 6px; }

.iip-title { font-size: 16px; font-weight: 800; color: #222; line-height: 1.35; }

.iip-delivery { display: flex; flex-wrap: wrap; gap: 8px; }
.iip-delivery-badge {
    display: flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 700; color: #555;
    background: #f5f5f5; border-radius: 8px; padding: 6px 10px;
}

.iip-freight-note { font-size: 12px; color: #888; line-height: 1.5; }
.iip-freight-note a { color: var(--apc-orange); font-weight: 700; text-decoration: none; }

.iip-section-label { font-size: 11px; font-weight: 800; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: -8px; }
.iip-fitment { font-size: 13px; color: #444; font-weight: 600; }
.iip-description { font-size: 13px; line-height: 1.6; color: #444; }
.iip-apc-id { font-size: 11px; color: #ccc; font-weight: 600; letter-spacing: 0.3px; padding-top: 4px; border-top: 1px solid #f0f0f0; }
.inbox-thread-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #ccc; font-size: 14px; font-weight: 700; }

.inbox-thread-hdr {
    padding: 11px 14px; border-bottom: 1px solid #eee;
    display: flex; align-items: center; gap: 10px; background: white; flex-shrink: 0;
}
.inbox-thread-thumb { width: 46px; height: 46px; border-radius: 9px; object-fit: cover; border: 1px solid #eee; flex-shrink: 0; }
.inbox-thread-meta { flex: 1; min-width: 0; }
.inbox-thread-with { font-size: 11px; font-weight: 700; color: var(--text-3); }
.inbox-thread-title { font-size: 13px; font-weight: 800; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-thread-price { font-size: 15px; font-weight: 900; color: var(--apc-blue); }
.inbox-view-btn { background: var(--apc-blue); color: white; border: none; border-radius: 7px; padding: 6px 12px; font-size: 12px; font-weight: 800; cursor: pointer; flex-shrink: 0; font-family: inherit; }
.inbox-view-btn:hover { background: #0062cc; }
.inbox-pending-btn { display:none; }
.inbox-sold-btn    { display:none; }

.inbox-msg-list { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.inbox-date-divider { text-align: center; font-size: 11px; font-weight: 700; color: #c0c0c0; margin: 4px 0 2px; }
.inbox-msg-row { display: flex; align-items: flex-end; gap: 6px; }
.inbox-msg-row.sent { flex-direction: row-reverse; }
.inbox-msg-avatar { width: 24px; height: 24px; border-radius: 50%; background: #ddd; color: var(--text-3); font-size: 10px; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.inbox-msg-row.sent .inbox-msg-avatar { background: var(--apc-orange); color: white; }
.inbox-msg-col { display: flex; flex-direction: column; max-width: 68%; }
.inbox-msg-row.sent .inbox-msg-col { align-items: flex-end; }
.inbox-msg-bubble { padding: 9px 12px; border-radius: 16px; font-size: 14px; line-height: 1.45; word-break: break-word; }
.inbox-msg-row.received .inbox-msg-bubble { background: white; color: #222; border: 1px solid #eee; border-bottom-left-radius: 4px; }
.inbox-msg-row.sent .inbox-msg-bubble { background: var(--apc-orange); color: white; border-bottom-right-radius: 4px; }
.inbox-msg-bubble img { max-width: 180px; max-height: 180px; border-radius: 9px; display: block; }
.inbox-msg-time { font-size: 10px; color: #bbb; margin-top: 0; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.2s ease, opacity 0.2s ease, margin-top 0.2s ease; }
#inboxMsgList.times-visible .inbox-msg-time { max-height: 20px; opacity: 1; margin-top: 3px; }
.msg-auto-reply-label { color: var(--apc-orange); font-weight: 700; }
.inbox-msg-time--ar { max-height: 20px !important; opacity: 1 !important; margin-top: 3px !important; }
.inbox-msg-del { opacity: 0; background: none; border: none; font-size: 16px; color: #ccc; cursor: pointer; padding: 0 2px; align-self: center; transition: opacity 0.15s, color 0.15s; flex-shrink: 0; }
.inbox-msg-del:hover { color: #FF3B30; }
.inbox-msg-row:hover .inbox-msg-del { opacity: 1; }
.inbox-msg-row.del-visible .inbox-msg-del { opacity: 1; }

.msg-copy-menu {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    background: #1a1a2e;
    border-radius: 10px;
    padding: 4px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.35);
    animation: fadeInUp 0.15s ease;
}
.msg-copy-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 28px;
    cursor: pointer;
    border-radius: 8px;
    letter-spacing: 0.3px;
}
.msg-copy-btn:active { background: rgba(255,255,255,0.12); }
.msg-copy-sep { width: 1px; background: rgba(255,255,255,0.15); margin: 6px 0; }
.inbox-edit-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 6px 14px;
    background: #fff8f2;
    border-top: 1px solid #F7941D;
    font-size: 12px;
    color: #F7941D;
    font-weight: 600;
}
.inbox-edit-cancel {
    background: none;
    border: none;
    color: var(--text-3);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateX(-50%) translateY(6px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.inbox-reply-bar { padding: 10px 12px; border-top: 1px solid #eee; display: flex; align-items: flex-end; gap: 8px; background: white; flex-shrink: 0; }

/* OFFER CARD — inside inbox thread */
.inbox-msg-col.offer-col { max-width: 96%; width: 320px; }
.offer-bubble {
    padding: 0 !important;
    background: white !important;
    color: #222 !important;
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 14px !important;
    overflow: hidden;
}
.offer-card { font-size: 13px; }
.offer-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px 9px;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
}
.offer-card-img {
    width: 44px; height: 44px;
    border-radius: 7px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #eee;
}
.offer-card-part-title {
    font-weight: 800;
    font-size: 12px;
    color: #222;
    line-height: 1.3;
}
.offer-card-listed { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.offer-card-body { padding: 10px 12px; }
.offer-card-amount {
    font-size: 22px;
    font-weight: 900;
    color: var(--apc-blue);
    line-height: 1;
}
.offer-card-amount span {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3);
    margin-left: 4px;
    vertical-align: middle;
}
.offer-card-note {
    font-size: 12px;
    color: #666;
    font-style: italic;
    margin-top: 6px;
}
.offer-card-actions {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}
.offer-action-btn {
    flex: 1;
    padding: 8px 4px;
    border: none;
    border-radius: 8px;
    font-weight: 900;
    font-size: 10px;
    cursor: pointer;
    letter-spacing: 0.3px;
    color: #fff;
}
.offer-accept  { background: #28a745; }
.offer-decline { background: #888; }
.offer-counter { background: var(--apc-orange); }
.offer-card-status {
    margin-top: 10px;
    padding: 6px 10px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}
.offer-card-status.accepted  { background: #e6f4ea; color: #155c24; }
.offer-card-status.declined  { background: #f5f5f5; color: var(--text-3); }
.offer-card-status.countered { background: #fff3cd; color: #b86e00; }
.offer-card-awaiting {
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-3);
    font-style: italic;
}
.offer-card-buyer-accepted {
    margin-top: 10px;
    padding: 8px 12px;
    background: #e6f4ea;
    color: #155c24;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}
.inbox-sold-banner {
    margin: 0 0 12px;
    padding: 9px 14px;
    background: #f5f5f5;
    border-left: 3px solid #e53935;
    color: var(--text-3);
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
    text-align: center;
    letter-spacing: 0.02em;
}

/* Inbox status picker */
.inbox-status-btn {
    border: 1.5px solid #ddd;
    background: white;
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}
.inbox-status-btn:hover { background: #f9f9f9; }
.isp-status-active  { color: #28a745; border-color: #b7e4c7; background: #eafaf1; }
.isp-status-pending { color: var(--apc-orange); border-color: var(--apc-orange); background: var(--apc-orange-light); }
.isp-status-sold    { color: var(--text-3);    border-color: #ddd;    background: #f5f5f5; }
.inbox-status-picker {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: white;
    border: 1.5px solid #e5e5e5;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    padding: 8px;
    z-index: 500;
    min-width: 140px;
}
.isp-title {
    font-size: 10px;
    font-weight: 900;
    color: var(--text-3);
    letter-spacing: 0.05em;
    padding: 2px 8px 6px;
    text-transform: uppercase;
}
.isp-opt {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    color: #333;
    transition: background 0.12s;
}
.isp-opt:hover  { background: #f5f5f5; }
.isp-opt.active { background: #f0f7ff; color: var(--apc-blue); }
#ispOptActive.active  { background: #eafaf1; color: #28a745; }
#ispOptPending.active { background: var(--apc-orange-light); color: var(--apc-orange); }
#ispOptSold.active    { background: #f5f5f5; color: var(--text-3); }

/* My Listings tabs */
.my-listings-tabs {
    display: flex;
    gap: 14px;
    margin-bottom: 14px;
}
.ml-away-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff8e1;
    border: 1px solid #f59e0b;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #92400e;
    cursor: pointer;
    gap: 8px;
}
.ml-away-link {
    font-weight: 700;
    white-space: nowrap;
    color: #f59e0b;
}
.my-listings-tab {
    background: #e8e8e8;
    border: none;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #555;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.my-listings-tab:hover { opacity: 0.8; }
.my-listings-tab.active { background: var(--apc-orange); color: var(--apc-black); }
.ml-tab-badge {
    display: inline-block;
    background: rgba(0,0,0,0.1);
    border-radius: 99px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 700;
    margin-left: 3px;
}
.my-listings-tab.active .ml-tab-badge { background: rgba(255,255,255,0.25); }

/* My Listings — bulk select */
.ml-select-pill {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    padding: 5px 13px; border-radius: 20px; border: 1.5px solid #ddd;
    background: #fff; color: #555; cursor: pointer;
}
.ml-select-pill.active { background: #F7941D; border-color: #F7941D; color: var(--apc-black); }
.ml-bulk-footer {
    display: none; flex-shrink: 0; align-items: center; gap: 8px;
    padding: 12px 15px; background: #fff; border-top: 1px solid #eee;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.06);
}
.ml-bulk-count { flex: 1; font-size: 12px; font-weight: 700; color: #333; }
.ml-bulk-btn {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
    padding: 9px 14px; border-radius: 8px; border: none; cursor: pointer;
}
.ml-bulk-selall { background: #f4f4f4; color: #555; }
.ml-bulk-delete { background: #ef4444; color: #fff; }
.ml-bulk-delete:disabled { opacity: 0.35; cursor: default; }
.ml-bulk-cancel { background: #f4f4f4; color: #555; }
.ml-card-selected { outline: 2px solid #F7941D; outline-offset: -2px; }
.ml-select-chk {
    position: absolute; top: 7px; left: 7px; width: 22px; height: 22px;
    border-radius: 50%; border: 2px solid rgba(255,255,255,0.9);
    background: rgba(0,0,0,0.22); display: flex; align-items: center;
    justify-content: center; font-size: 11px; font-weight: 900; color: #fff;
    z-index: 5; pointer-events: none;
}
.ml-card-selected .ml-select-chk { background: #F7941D; border-color: #F7941D; }

.my-part-sold-date {
    font-size: 11px;
    color: var(--text-3);
    font-weight: 600;
}
.my-part-relist-btn {
    border: none;
    background: #f0f0f0;
    color: #555;
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 900;
    font-size: 10px;
    cursor: pointer;
    flex-shrink: 0;
    letter-spacing: 0.3px;
    font-family: inherit;
    transition: background 0.15s;
}
.my-part-relist-btn:hover { background: #e5e5e5; }
.my-part-rate-btn {
    background: none;
    border: 1.5px solid #f59e0b;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 14px;
    color: #f59e0b;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    font-family: inherit;
}
.my-part-rate-btn:hover { background: #fffbeb; }
/* Sold tab rows — no opacity fade since context is already clear */
.my-part-row.sold { opacity: 1; }
.my-part-row.sold .my-part-thumb  { filter: none; }
.my-part-row.sold .my-part-price  { color: var(--text-3); }

.offer-counter-form {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    align-items: center;
}
.offer-counter-input {
    flex: 1;
    padding: 7px 10px;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
}
.inbox-photo-btn { width: 36px; height: 36px; border-radius: 50%; background: #f0f0f0; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-3); }
.inbox-photo-btn:hover { background: #e4e4e4; }
.inbox-reply-input { flex: 1; border: 1.5px solid #e4e4e4; border-radius: 18px; padding: 8px 14px; font-size: 14px; resize: none; outline: none; font-family: inherit; min-height: 36px; max-height: 100px; overflow-y: auto; line-height: 1.4; background: #f8f8f8; }
.inbox-reply-input:focus { border-color: var(--apc-orange); background: white; }
.inbox-send-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--apc-blue); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Inbox context panel — desktop only */
.inbox-context-panel { display: none; }

@media (max-width: 899px) {
    .inbox-conv-col { width: 100%; position: absolute; inset: 0; transition: transform 0.28s ease; z-index: 1; }
    .inbox-conv-col.slide-away { transform: translateX(-100%); }
    .inbox-thread-col { position: absolute; inset: 0; transform: translateX(100%); transition: transform 0.28s ease; z-index: 2; }
    .inbox-thread-col.slide-in { transform: translateX(0); }
    .inbox-two-panel { position: relative; overflow: hidden; }
}

@media (min-width: 900px) {
    .inbox-context-panel {
        display: flex;
        flex-direction: column;
        width: 280px;
        flex-shrink: 0;
        border-left: 1px solid #eee;
        background: #fafafa;
        overflow: hidden;
    }
    .inbox-context-empty {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #ccc;
        font-size: 13px;
        font-weight: 700;
    }
    .inbox-context-img {
        width: 100%;
        aspect-ratio: 4/3;
        object-fit: cover;
        display: block;
        background: #f0f0f0;
    }
    .inbox-context-info {
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .inbox-context-status {
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        color: #22c55e;
    }
    .inbox-context-status.status-pending { color: #f59e0b; }
    .inbox-context-status.status-sold    { color: #ef4444; }
    .inbox-context-title {
        font-size: 14px;
        font-weight: 800;
        color: #1a1a1a;
        line-height: 1.35;
    }
    .inbox-context-price {
        font-size: 20px;
        font-weight: 900;
        color: var(--apc-orange);
    }
    .inbox-context-stock {
        font-size: 11px;
        color: #666;
        padding-top: 3px;
        font-family: monospace;
    }
    .inbox-context-with {
        font-size: 12px;
        color: var(--text-3);
        padding-top: 4px;
        border-top: 1px solid #eee;
    }
    .inbox-context-view-btn {
        margin-top: 4px;
        padding: 10px 16px;
        background: var(--apc-orange);
        color: var(--apc-black);
        border: none;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 800;
        cursor: pointer;
        font-family: inherit;
        text-align: center;
    }
    .inbox-context-view-btn:hover { opacity: 0.9; }
    /* Hide the View Listing button from the thread header — context panel covers it */
    .inbox-view-btn { display: none; }
}

/* Dashboard — label button */
.dash-btn-label { background: #fff3e0; color: var(--apc-orange); border-color: var(--apc-orange); }
.dash-btn-label:hover { background: var(--apc-orange); color: var(--apc-black); }


/* HELP & SUPPORT DRAWER */
.help-drawer-content {
    padding: 20px 16px 40px;
    background: #fff;
}
.help-section-title {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 10px;
}
.help-faq-list {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--elev-1);
}
.help-faq-item { border-bottom: 1px solid #f0f0f0; }
.help-faq-item:last-child { border-bottom: none; }
.help-faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: none;
    border: none;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    text-align: left;
    cursor: pointer;
}
.help-faq-chevron {
    flex-shrink: 0;
    font-size: 18px;
    color: #bbb;
    transition: transform 0.2s;
    display: inline-block;
}
.help-faq-q.open .help-faq-chevron { transform: rotate(90deg); }
.help-faq-a {
    display: none;
    padding: 0 16px 14px;
    font-size: 13px;
    color: #555;
    line-height: 1.55;
}
.help-faq-a.open { display: block; }
.help-contact-form {
    background: #fff;
    border-radius: 14px;
    padding: 16px;
    box-shadow: var(--elev-1);
}
.help-contact-form textarea {
    width: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    resize: none;
    box-sizing: border-box;
    outline: none;
    color: #1a1a1a;
}
.help-contact-form textarea:focus { border-color: var(--apc-orange); }

@media (min-width: 900px) {
    .help-drawer-content {
        padding: 32px 40px 60px;
        max-width: 1100px;
        margin: 0 auto;
    }
    .help-two-col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        align-items: start;
    }
}

/* PULL-TO-DISMISS drag handle */
.detail-drag-handle-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0 4px;
    background: var(--apc-amber);
    cursor: grab;
}
.detail-drag-handle {
    width: 36px;
    height: 4px;
    background: rgba(0,0,0,0.18);
    border-radius: 2px;
}
#detailOverlay.chat-card .detail-drag-handle-bar { display: none; }
.ws-drag-handle-bar { background: #fff; border-bottom: 1px solid #f0f0f0; }
@media (min-width: 900px) {
    .detail-drag-handle-bar { display: none; }
}

/* ===== SPONSORED CARD BUILDER ===== */
.spb-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0;
}
.spb-title { font-size: 16px; font-weight: 800; color: #1a1a1a; }
.spb-close {
    background: none; border: none; font-size: 24px; color: var(--text-3);
    cursor: pointer; line-height: 1; padding: 0 4px;
}
.spb-tabs {
    display: flex; gap: 0; border-bottom: 2px solid #f0f0f0;
    padding: 0 20px; flex-shrink: 0;
}
.spb-tpl-tab {
    padding: 10px 20px; font-size: 13px; font-weight: 700;
    background: none; border: none; border-bottom: 2px solid transparent;
    margin-bottom: -2px; cursor: pointer; color: var(--text-3); transition: color 0.15s;
}
.spb-tpl-tab.active { color: var(--apc-blue); border-bottom-color: var(--apc-blue); }
.spb-body {
    display: flex; gap: 24px; padding: 20px;
    align-items: flex-start;
}
.spb-form-col { flex: 1; min-width: 0; }
.spb-preview-col {
    width: 230px; flex-shrink: 0;
}
.spb-preview-label {
    font-size: 10px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.6px; color: var(--text-3); margin-bottom: 10px;
}
.spb-logo-upload {
    width: 160px; height: 80px; border-radius: 10px;
    background: #f4f4f4; border: 1.5px dashed #ddd;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; overflow: hidden; transition: border-color 0.15s;
}
.spb-logo-upload:hover { border-color: var(--apc-blue); }
.spb-hero-upload {
    width: min(100%, 200px); aspect-ratio: 5/6; height: auto; border-radius: 10px;
    background: #f4f4f4; border: 1.5px dashed #ddd;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; overflow: hidden; transition: border-color 0.15s;
    text-align: center;
}
.spb-hero-upload:hover { border-color: var(--apc-blue); }
.spb-upload-hint { font-size: 12px; font-weight: 700; color: var(--text-3); }
@media (max-width: 600px) {
    .spb-body { flex-direction: column; }
    .spb-preview-col { width: 100%; }
}

/* ── SPONSORED LISTINGS DRAWER ─────────────────────────── */
.sl-explainer-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px;
}
.sl-slot-card {
    position: relative; border: 1.5px solid #e8e8e8; border-radius: 14px;
    padding: 16px 14px; display: flex; flex-direction: column; gap: 6px;
    background: #fafafa;
}
.sl-slot-card--highlight {
    border-color: var(--apc-orange); background: #fff8f2;
}
.sl-slot-badge {
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    background: var(--apc-orange); color: white;
    font-size: 9px; font-weight: 900; letter-spacing: 0.5px; text-transform: uppercase;
    border-radius: 99px; padding: 2px 9px; white-space: nowrap;
}
.sl-slot-badge--trial {
    background: #22c55e;
}
.sl-slot-icon { font-size: 22px; line-height: 1; }
.sl-slot-name { font-size: 14px; font-weight: 900; color: #1a1a1a; }
.sl-slot-desc { font-size: 11px; color: #777; line-height: 1.4; flex: 1; }
.sl-slot-price { font-size: 18px; font-weight: 900; color: var(--apc-orange); margin-top: 4px; }
.sl-slot-price span { font-size: 12px; font-weight: 600; color: var(--text-3); }
.sl-section-label {
    font-size: 10px; font-weight: 900; text-transform: uppercase;
    letter-spacing: 0.6px; color: var(--text-3); margin-bottom: 10px;
}
.sl-card-item {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; background: white; border-radius: 12px;
    border: 1px solid #eee; margin-bottom: 8px;
}
.sl-card-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: #222; }
.sl-card-meta { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.sl-card-slot-badge {
    font-size: 9px; font-weight: 900; letter-spacing: 0.4px; text-transform: uppercase;
    border-radius: 99px; padding: 2px 8px; flex-shrink: 0;
}
.sl-card-slot-badge.run  { background: #f0f0f0; color: var(--text-3); }
.sl-card-slot-badge.targeted { background: rgba(247,148,29,0.12); color: var(--apc-orange); }
.sl-create-btn {
    width: 100%; padding: 14px; margin-top: 4px;
    background: none; border: 1.5px dashed #ccc; border-radius: 12px;
    font-size: 13px; font-weight: 700; color: #555; cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.sl-create-btn:hover { border-color: var(--apc-orange); color: var(--apc-orange); }

/* Sponsored listings drawer — hero + 2-col layout */
.sl-mgmt-content { padding: 0 !important; }
.sl-hero-banner {
    padding: 20px 24px 18px;
    background: linear-gradient(135deg, #1a1a2e 0%, #2d1a0e 100%);
    border-bottom: 3px solid var(--apc-orange);
}
.sl-hero-eyebrow {
    font-size: 9px; font-weight: 900; text-transform: uppercase;
    letter-spacing: 1.2px; color: var(--apc-orange); margin-bottom: 4px;
}
.sl-hero-title {
    font-size: 22px; font-weight: 900; color: #fff;
    letter-spacing: -0.3px; margin-bottom: 6px;
}
.sl-hero-sub {
    font-size: 12px; color: rgba(255,255,255,0.65); line-height: 1.5; max-width: 560px;
}
.sl-hero-sub strong { color: var(--apc-orange); }
.sl-mgmt-body { padding: 16px; }
.sl-mgmt-info { margin-bottom: 20px; }
.sl-card-thumb {
    width: 44px; height: 44px; border-radius: 8px; object-fit: cover;
    flex-shrink: 0; background: #f4f4f4; border: 1px solid #eee;
}
.sl-card-thumb-placeholder {
    width: 44px; height: 44px; border-radius: 8px; flex-shrink: 0;
    background: #f4f4f4; border: 1px solid #eee;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: #ccc;
}

/* Page diagram */
.sl-page-diagram {
    background: #f0f0f0; border-radius: 10px; padding: 8px;
    overflow: hidden; margin-bottom: 10px;
}
.sl-pd-nav {
    height: 12px; background: #1a1a2e; border-radius: 3px;
    margin-bottom: 6px; display: flex; align-items: center; gap: 4px; padding: 0 5px;
}
.sl-pd-nav-dot { width: 14px; height: 3px; background: rgba(255,255,255,0.25); border-radius: 2px; }
.sl-pd-nav-dot--wide { width: 30px; }
.sl-pd-body { display: flex; gap: 4px; }
.sl-pd-sidebar { width: 28px; flex-shrink: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 2px; }
.sl-pd-filter-line { height: 4px; background: #d0d0d0; border-radius: 2px; }
.sl-pd-filter-line--short { width: 60%; }
.sl-pd-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.sl-pd-item {
    height: 36px; background: white; border-radius: 3px; border: 1px solid #e8e8e8;
}
.sl-pd-item--ad {
    background: #fff4ec; border-color: var(--apc-orange);
    display: flex; align-items: center; justify-content: center;
    font-size: 8px; font-weight: 900; color: var(--apc-orange); letter-spacing: 0.5px;
}
.sl-pd-right { width: 44px; flex-shrink: 0; display: flex; flex-direction: column; gap: 3px; }
.sl-pd-right-ad {
    height: 80px; background: #fff4ec; border: 1px solid var(--apc-orange);
    border-radius: 3px; display: flex; align-items: center; justify-content: center;
    font-size: 8px; font-weight: 900; color: var(--apc-orange); letter-spacing: 0.5px;
}
.sl-pd-right-item { height: 22px; background: white; border: 1px solid #e8e8e8; border-radius: 3px; }
.sl-pd-legend { display: flex; flex-direction: column; gap: 4px; }
.sl-pd-legend-item {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; color: #666; line-height: 1.3;
}
.sl-pd-legend-dot {
    width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0;
    background: var(--apc-orange); opacity: 0.7;
}

@media (min-width: 900px) {
    .sl-mgmt-body {
        display: flex; flex-direction: row; gap: 28px;
        align-items: flex-start; padding: 24px;
    }
    .sl-mgmt-info {
        width: 310px; flex-shrink: 0; margin-bottom: 0;
    }
    .sl-mgmt-info .sl-explainer-row {
        grid-template-columns: 1fr;
    }
    .sl-mgmt-cards { flex: 1; min-width: 0; }
}

/* ── CARD BUILDER — targeting section ──────────────────── */
.spb-section-divider {
    font-size: 10px; font-weight: 900; text-transform: uppercase;
    letter-spacing: 0.6px; color: var(--text-3); margin: 16px 0 10px;
    padding-top: 16px; border-top: 1px solid #f0f0f0;
}
.spb-slot-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.spb-slot-btn {
    border: 1.5px solid #e0e0e0; border-radius: 10px; padding: 10px 12px;
    background: #fafafa; cursor: pointer; text-align: left;
    transition: border-color 0.15s, background 0.15s;
}
.spb-slot-btn.active { border-color: var(--apc-orange); background: #fff8f2; }
.spb-slot-btn-name { font-size: 12px; font-weight: 800; color: #222; margin-bottom: 3px; }
.spb-slot-btn-desc { font-size: 10px; color: var(--text-3); line-height: 1.35; }
.spb-target-label {
    font-size: 11px; font-weight: 800; color: #555;
    margin-bottom: 6px; margin-top: 2px;
}
.spb-make-wrap { position: relative; margin-bottom: 6px; }
.spb-make-input {
    width: 100%; padding: 8px 12px; border: 1.5px solid #e0e0e0;
    border-radius: 8px; font-size: 13px; outline: none; box-sizing: border-box;
    font-family: inherit;
}
.spb-make-input:focus { border-color: var(--apc-orange); }
.spb-suggestions {
    position: absolute; top: 100%; left: 0; right: 0; background: white;
    border: 1.5px solid #e0e0e0; border-top: none; border-radius: 0 0 8px 8px;
    max-height: 160px; overflow-y: auto; z-index: 10; display: none;
}
.spb-suggest-item {
    padding: 8px 12px; font-size: 13px; cursor: pointer;
    transition: background 0.1s;
}
.spb-suggest-item:hover { background: #f4f4f4; }
.spb-tag-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; min-height: 10px; }
.spb-tag-chip {
    display: flex; align-items: center; gap: 4px;
    background: #f0f0f0; border-radius: 99px; padding: 3px 10px 3px 12px;
    font-size: 11px; font-weight: 700; color: #333;
}
.spb-tag-chip button {
    background: none; border: none; font-size: 14px; line-height: 1;
    color: var(--text-3); cursor: pointer; padding: 0; margin-left: 2px;
}
.spb-cat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.spb-cat-chip {
    padding: 4px 11px; border-radius: 99px; border: 1.5px solid #ddd;
    background: white; font-size: 11px; font-weight: 700; color: #666;
    cursor: pointer; transition: all 0.12s;
}
.spb-cat-chip.active { background: var(--apc-orange); border-color: var(--apc-orange); color: var(--apc-black); }
.spb-target-preview {
    background: #f4f4f4; border-radius: 8px; padding: 10px 12px;
    font-size: 11px; color: #555; line-height: 1.5; margin-top: 4px;
}

/* ── SELL VEHICLE PICKER MODAL ─────────────────────────── */
.vp-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 4200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.vp-sheet {
    background: #fff;
    border-radius: 20px 20px 0 0;
    padding: 20px 20px 32px;
    width: 100%;
    max-width: 600px;
    max-height: 88vh;
    overflow-y: auto;
}
.vp-sheet .btn-full-action { margin-top: 18px; flex-shrink: 0; }
@media (min-width: 600px) {
    .vp-overlay { align-items: center; }
    .vp-sheet { border-radius: 20px; max-height: 80vh; }
}
@media (max-width: 599px) {
    /* Full-screen on mobile — the picker's a handful of short fields, so as a
       bottom sheet it left most of the screen as dead backdrop above it. */
    .vp-overlay { align-items: stretch; }
    .vp-sheet {
        box-sizing: border-box; /* height below must include the 20px/32px padding,
                                    not add on top of it, or the box (and the
                                    button pinned to its bottom) run past the viewport */
        height: 100vh;
        height: 100dvh; /* 100vh ignores mobile Safari's address bar, pushing the
                            bottom-pinned button below the visible fold */
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }
    .vp-sheet .btn-full-action { margin-top: auto; }
}
.vp-garage-chip {
    background: #f4f4f4;
    border: 1.5px solid #e0e0e0;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    color: #333;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.vp-garage-chip:hover,
.vp-garage-chip.active { background: var(--apc-orange); border-color: var(--apc-orange); color: var(--apc-black); }
#sellVehicleChip { display: none; }
#sellVehicleChip.visible { display: flex; }


/* Report listing sheet */
.report-reason-row { display:flex; align-items:center; gap:10px; padding:10px 14px; background:#f9f9f9; border-radius:8px; font-size:14px; color:#333; cursor:pointer; }
.report-reason-row input[type="radio"] { accent-color: var(--apc-orange); width:16px; height:16px; flex-shrink:0; }
@media (min-width: 900px) {
    #reportSheet { left: max(0px, calc(50vw - 800px)) !important; right: max(0px, calc(50vw - 800px)) !important; border-radius: 16px; bottom: auto; top: 50%; transform: translateY(-50%); }
}

/* ─── EDW — Electronic Dismantling Workflow ─────────────────────────────── */
/* Floating "Dismantle in progress · Resume" pill (paused EDW session) */
.edw-resume-pill {
    position: fixed;
    bottom: 22px;
    right: 22px;
    z-index: 3050;
    display: flex;
    align-items: center;
    gap: 9px;
    background: #fff;
    color: #333;
    border: 1px solid #e6e6e6;
    border-radius: 999px;
    padding: 11px 16px 11px 15px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 22px rgba(0,0,0,0.15);
    transition: transform 0.15s, box-shadow 0.15s;
}
.edw-resume-pill:hover { transform: translateY(-1px); box-shadow: 0 9px 26px rgba(0,0,0,0.2); }
.edw-resume-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--apc-orange);
    flex-shrink: 0;
    animation: edwResumePulse 1.8s infinite;
}
@keyframes edwResumePulse {
    0%   { box-shadow: 0 0 0 0 rgba(247,148,29,0.5); }
    70%  { box-shadow: 0 0 0 7px rgba(247,148,29,0); }
    100% { box-shadow: 0 0 0 0 rgba(247,148,29,0); }
}
.edw-resume-cta { color: var(--apc-orange); font-weight: 800; }

/* EDW + SL fill their drawer fully — override bottom-sheet align from .drawer */
#edwDrawer { border-radius: 0 !important; align-items: stretch; background: #f2f2f7; }
/* Pin the EDW full-screen below the header on desktop, applied synchronously with
   .active — stops the narrow-then-full-screen flash from JS positioning timing. */
@media (min-width: 900px) {
    #edwDrawer.active {
        top: calc(var(--hdr-total-h, 143px) + 10px) !important;
        /* The walk-around is a working tool, not reading content, so it opts out of the
           site's 1600px cap — four columns of parts want every pixel on a shop monitor.
           16px gutters keep it consistent with the floating panel treatment below. */
        left: 16px !important;
        right: 16px !important;
        bottom: 16px !important; width: auto !important;
        border-radius: 16px !important; box-shadow: var(--elev-3) !important; overflow: hidden !important;
    }
}
#proStockView .sl-shell { height: 100%; }
.edw-shell {
    display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden;
    background: #f2f2f7;
}
.edw-header {
    flex-shrink: 0; background: #fff; color: #333;
    padding: 14px 16px 12px; position: relative;
    display: flex; flex-direction: column; gap: 12px;
    border-bottom: 1px solid #eee;
}
.edw-header-title {
    font-size: 15px; font-weight: 800; letter-spacing: 0.3px; color: #1a1a2e;
    text-align: center;
}
.edw-close-btn {
    position: absolute; top: 14px; right: 16px;
    background: #f4f4f4; border: none; border-radius: 50%;
    width: 32px; height: 32px; color: var(--text-3); font-size: 14px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.edw-close-btn:hover { background: #eee; color: #333; }
/* Step indicator */
.edw-step-indicator {
    display: flex; align-items: center; justify-content: center; gap: 0;
}
.edw-step-dot {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.edw-step-num {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid #ddd;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: var(--text-3);
}
.edw-step-dot.active .edw-step-num { border-color: #F7941D; color: #F7941D; }
.edw-step-dot.done .edw-step-num { border-color: #22c55e; background: #22c55e; color: #fff; }
.edw-step-lbl { font-size: 10px; color: var(--text-3); white-space: nowrap; }
.edw-step-dot.active .edw-step-lbl { color: #333; }
.edw-step-line { width: 32px; height: 2px; background: #e5e5e5; margin-bottom: 16px; flex-shrink: 0; }

/* Body & footer */
.edw-body { flex: 1; overflow-y: auto; padding: 16px; }
.edw-footer {
    flex-shrink: 0; background: #fff; border-top: 1px solid #eee;
    padding: 12px 16px; display: flex; align-items: center; gap: 10px;
}
.edw-footer-meta { flex: 1; font-size: 12px; color: var(--text-3); }

/* Buttons */
.edw-btn-primary {
    background: #F7941D; color: var(--apc-black); border: none; border-radius: 8px;
    padding: 11px 20px; font-size: 14px; font-weight: 700; cursor: pointer;
    white-space: nowrap;
}
.edw-btn-primary:hover { background: #DF7D0F; }
.edw-btn-secondary {
    background: #fff; color: #555; border: 1.5px solid #ddd; border-radius: 8px;
    padding: 10px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
    white-space: nowrap;
}
.edw-btn-secondary:hover { border-color: #aaa; }

/* Step 1 — Vehicle form */
.edw-section-title { font-size: 13px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 14px; }
.edw-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.edw-field { display: flex; flex-direction: column; gap: 5px; }
.edw-label { font-size: 11px; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: 0.3px; }
.edw-input {
    padding: 10px 12px; border: 1.5px solid #e0e0e0; border-radius: 8px;
    font-size: 14px; color: #333; background: #fff; width: 100%; box-sizing: border-box;
}
.edw-input:focus { outline: none; border-color: #F7941D; }
@media (max-width: 600px) { .edw-form-grid { grid-template-columns: 1fr; } }

/* Step 2 — Checklist */
.edw-vehicle-banner {
    background: #f8f8fa; color: #333;
    padding: 12px 16px;
    display: flex; align-items: center; gap: 16px; justify-content: space-between;
    border-bottom: 1px solid #eee;
}
.edw-vb-left { flex: 1; min-width: 0; }
.edw-vehicle-title { font-size: 15px; font-weight: 800; color: #1a1a2e; }
.edw-vehicle-sub { font-size: 11px; color: var(--text-3); margin-top: 4px; }
.edw-vb-photos { display: flex; gap: 6px; flex-shrink: 0; }
.edw-vb-thumb { width: 72px; height: 48px; object-fit: cover; border-radius: 6px; opacity: 1; }
/* Zone master-detail split */
.edw-split {
    flex: 1; display: flex; overflow: hidden; min-height: 0;
}
.edw-zone-nav {
    width: 150px; flex-shrink: 0; overflow-y: auto;
    border-right: 2px solid #eee; background: #fafafa;
}
.edw-zone-nav-item {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    gap: 6px; padding: 13px 12px; border: none; background: none;
    text-align: left; cursor: pointer; border-bottom: 1px solid #f0f0f0;
    transition: background 0.1s;
}
.edw-zone-nav-item:hover { background: #f0f0f0; }
.edw-zone-nav-item.active {
    background: #fff; border-right: 3px solid #F7941D; font-weight: 700;
}
.edw-zone-nav-name { font-size: 13px; color: #333; line-height: 1.3; }
.edw-zone-nav-item.active .edw-zone-nav-name { color: #F7941D; }
.edw-zone-nav-badge {
    flex-shrink: 0; background: #F7941D; color: #fff;
    border-radius: 99px; padding: 1px 7px; font-size: 11px; font-weight: 700;
}
.edw-zone-detail { flex: 1; overflow-y: auto; padding: 16px; }

/* Mobile: horizontal zone pills */
@media (max-width: 600px) {
    .edw-split { flex-direction: column; }
    .edw-zone-nav {
        width: 100%; display: flex; flex-direction: row;
        overflow-x: auto; overflow-y: hidden; border-right: none;
        border-bottom: 2px solid #eee; padding: 8px; gap: 6px;
        flex-shrink: 0;
    }
    .edw-zone-nav-item {
        flex-shrink: 0; border-radius: 20px; border: 1.5px solid #ddd;
        padding: 7px 12px; border-bottom: 1.5px solid #ddd; white-space: nowrap;
        justify-content: center; gap: 6px;
    }
    .edw-zone-nav-item.active {
        border-color: #F7941D; background: rgba(247,148,29,0.08); border-right: 1.5px solid #F7941D;
    }
    .edw-zone-detail { padding: 12px; }
}

/* Assembly & parts */
.edw-assembly { border-bottom: 1px solid #eee; }
.edw-assembly-hdr { display: flex; align-items: center; justify-content: space-between; padding: 11px 15px; cursor: pointer; background: #fafafa; }
.edw-assembly-hdr.active { background: #fff4ec; }
.edw-assembly-hdr.active .edw-assembly-name { color: #F7941D; }
.edw-assembly-name { font-size: 12px; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: 0.4px; }
.edw-asm-hdr-right { display: flex; align-items: center; gap: 6px; }
.edw-asm-badge { background: #F7941D; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 99px; }
.edw-asm-arrow { color: var(--text-3); font-size: 12px; }
.edw-assembly-hdr.active .edw-asm-arrow { color: #F7941D; }
.edw-part-row { padding: 7px 15px; border-bottom: 1px solid #f4f4f4; }
.edw-part-row:last-child { border-bottom: none; }
.edw-part-row { padding: 7px 0; border-bottom: 1px solid #f4f4f4; }
.edw-part-row:last-child { border-bottom: none; }
.edw-part-row.checked { background: #fffaf7; border-radius: 6px; padding: 7px 8px; margin: 0 -8px; }
.edw-part-check { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.edw-part-check input[type="checkbox"] { width: 18px; height: 18px; accent-color: #F7941D; flex-shrink: 0; }
.edw-part-name { font-size: 14px; color: #333; }
.edw-part-taken { display: flex; align-items: center; justify-content: space-between; gap: 10px; opacity: 0.6; }
.edw-part-taken .edw-part-name { color: #999; }
.edw-taken-badge { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; color: #888; background: #f0f0f0; padding: 2px 7px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; }
/* Secondary to the part name, not a replacement for it: no flex-grow and a neutral border
   until a code is actually chosen, so the row reads "part, then its engine code". */
.edw-engine-pick { flex: 0 1 auto; min-width: 0; max-width: 200px; padding: 3px 7px; border: 1px solid #ddd; border-radius: 5px; font-size: 12px; font-family: inherit; color: var(--text-3); background: #fff; cursor: pointer; outline: none; }
.edw-engine-pick.set { border-color: #F7941D; color: #333; font-weight: 600; }
.edw-engine-pick:focus { border-color: #DF7D0F; color: #333; }
.edw-part-detail { margin-top: 8px; padding-left: 28px; display: flex; flex-direction: column; gap: 7px; }
.edw-grade-row { display: flex; align-items: center; gap: 6px; }
.edw-grade-btn {
    width: 32px; height: 32px; border-radius: 6px; border: 1.5px solid #ddd;
    background: #fff; font-size: 13px; font-weight: 700; color: #666; cursor: pointer;
}
.edw-grade-btn.active { border-color: #F7941D; background: #F7941D; color: var(--apc-black); }
.edw-grade-hint { font-size: 11px; color: var(--text-3); margin-left: 4px; }
.edw-notes-input {
    width: 100%; padding: 7px 10px; border: 1.5px solid #e8e8e8; border-radius: 6px;
    font-size: 13px; color: #444; box-sizing: border-box;
}
.edw-notes-input:focus { outline: none; border-color: #F7941D; }

/* Step 3 — Review */
.edw-review-hint { font-size: 12px; color: var(--text-3); margin-bottom: 12px; }
.edw-review-list { display: flex; flex-direction: column; gap: 10px; }
.edw-review-card { background: #fff; border-radius: 10px; padding: 14px; }
.edw-review-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.edw-review-part-name { font-size: 15px; font-weight: 700; color: #333; }
.edw-review-grade { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 99px; }
.edw-review-grade.grade-A { background: #dcfce7; color: #15803d; }
.edw-review-grade.grade-B { background: #dbeafe; color: #1d4ed8; }
.edw-review-grade.grade-C { background: #fef9c3; color: #92400e; }
.edw-review-grade.grade-D { background: #fee2e2; color: #991b1b; }
.edw-grade-select { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 99px; border: none; cursor: pointer; appearance: none; -webkit-appearance: none; }
.edw-grade-select.grade-A { background: #dcfce7; color: #15803d; }
.edw-grade-select.grade-B { background: #dbeafe; color: #1d4ed8; }
.edw-grade-select.grade-C { background: #fef9c3; color: #92400e; }
.edw-grade-select.grade-D { background: #fee2e2; color: #991b1b; }
.edw-review-desc { width: 100%; box-sizing: border-box; margin-top: 8px; padding: 8px 10px; font-size: 12px; color: #444; border: 1px solid #e0e0e0; border-radius: 6px; resize: vertical; font-family: inherit; line-height: 1.4; }
.edw-review-desc:focus { outline: none; border-color: #F7941D; }
.edw-review-title { font-size: 12px; color: var(--text-3); margin-bottom: 6px; }
.edw-review-notes { font-size: 12px; color: #666; background: #f9f9f9; border-radius: 6px; padding: 6px 8px; margin-bottom: 8px; }
.edw-price-row { display: flex; align-items: center; gap: 8px; }
.edw-price-lbl { font-size: 13px; font-weight: 700; color: #333; white-space: nowrap; }
.edw-price-input {
    flex: 1; padding: 9px 12px; border: 1.5px solid #e0e0e0; border-radius: 8px;
    font-size: 15px; font-weight: 700; color: #333; box-sizing: border-box;
}
.edw-price-input:focus { outline: none; border-color: #F7941D; }
.edw-price-input::-webkit-inner-spin-button,
.edw-price-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.edw-price-input { -moz-appearance: textfield; }
.edw-remove-btn {
    background: none; border: none; color: #ef4444; font-size: 12px; font-weight: 600;
    cursor: pointer; white-space: nowrap; padding: 0;
}
.edw-label-toggle {
    background: #fff3e8; border: 1px solid var(--apc-orange); color: var(--apc-orange);
    font-size: 12px; font-weight: 700; border-radius: 6px; padding: 5px 9px;
    cursor: pointer; white-space: nowrap;
}
.edw-label-toggle.off { background: #f2f2f2; border-color: #ddd; color: var(--text-3); }
.edw-label-count {
    background: #fff3e8; border: 1px solid var(--apc-orange); color: var(--apc-orange);
    font-size: 12px; font-weight: 800; border-radius: 8px; padding: 6px 11px;
    cursor: pointer; white-space: nowrap;
}

/* Success screen */
.edw-success { text-align: center; padding: 60px 20px; }
.edw-success-ico { font-size: 56px; margin-bottom: 16px; color: #22c55e; }
.edw-success-title { font-size: 22px; font-weight: 800; color: #333; margin-bottom: 8px; }
.edw-success-sub { font-size: 14px; color: #666; }

.edw-publishing { text-align: center; padding: 60px 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.edw-spinner { width: 44px; height: 44px; border: 4px solid #eee; border-top-color: #F7941D; border-radius: 50%; animation: gridSpin 0.8s linear infinite; }
.edw-publishing-title { font-size: 18px; font-weight: 800; color: #333; }
.edw-publishing-sub { font-size: 15px; color: #666; font-variant-numeric: tabular-nums; }
.edw-publishing-hint { font-size: 12px; color: var(--text-3); margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .edw-spinner { animation-duration: 1.8s; } }

/* EDW Stock screen */
.edw-stock-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; }
.edw-stock-search { flex: 1; }
.edw-stock-add-btn { flex-shrink: 0; white-space: nowrap; }
.edw-stock-pills { display: flex; gap: 8px; margin-bottom: 14px; }
.edw-stock-pill { padding: 5px 14px; border: 1px solid #e0e0e0; border-radius: 20px; background: #fff; font-size: 12px; font-weight: 700; color: #666; cursor: pointer; }
.edw-stock-pill.active { background: #1a1a2e; color: #fff; border-color: #1a1a2e; }
.edw-stock-empty { text-align: center; padding: 48px 20px; color: var(--text-3); font-size: 13px; line-height: 1.6; }
.edw-stock-list { display: flex; flex-direction: column; gap: 8px; }
.edw-stock-card { display: flex; align-items: center; background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 14px 16px; cursor: pointer; gap: 12px; transition: border-color 0.15s; }
.edw-stock-card:hover { border-color: #F7941D; }
.edw-stock-card-body { flex: 1; min-width: 0; }
.edw-stock-vehicle { font-size: 14px; font-weight: 700; color: #333; margin-bottom: 4px; }
.edw-stock-meta { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.edw-stock-card-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.edw-stock-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; padding: 3px 8px; border-radius: 99px; }
.edw-stock-badge-stock { background: #f0fdf4; color: #22c55e; border: 1px solid #bbf7d0; }
.edw-stock-badge-stripping { background: #fff8f2; color: #F7941D; border: 1px solid #fed7aa; }
.edw-stock-arrow { font-size: 20px; color: #ccc; }

/* EDW Stock card detail overlay */
.edw-stock-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 3350; display: flex; align-items: center; justify-content: center; }
.edw-stock-detail { background: #fff; border-radius: 14px; width: 560px; max-width: 92%; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,0.25); }
.edw-stock-detail-body { flex: 1; overflow-y: auto; padding: 12px 16px; }
.edw-stock-detail-row { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; border-bottom: 1px solid #f4f4f4; gap: 12px; }
.edw-stock-detail-row:last-child { border-bottom: none; }
.edw-stock-detail-key { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-3); flex-shrink: 0; }
.edw-stock-detail-val { font-size: 13px; color: #333; font-weight: 600; text-align: right; }
.edw-stock-detail-footer { padding: 14px 16px; border-top: 1px solid #eee; }
.edw-stock-photos { display: flex; gap: 6px; overflow-x: auto; padding: 12px 16px 0; scrollbar-width: none; }
.edw-stock-photos::-webkit-scrollbar { display: none; }
.edw-stock-photo { flex-shrink: 0; width: 160px; height: 108px; object-fit: cover; border-radius: 8px; background: #f4f4f4; cursor: pointer; }
.edw-stock-photo:active { opacity: 0.85; }

/* Vehicle photo slots */
.edw-vp-hint { font-size: 12px; color: var(--text-3); margin-bottom: 10px; }
.edw-vp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 480px) { .edw-vp-grid { grid-template-columns: repeat(2, 1fr); } }
.edw-vp-slot { display: flex; flex-direction: column; gap: 5px; }
.edw-vp-label { font-size: 11px; font-weight: 600; color: #666; text-align: center; }
.edw-vp-empty {
    aspect-ratio: 4/3; border: 2px dashed #ddd; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    background: #fafafa;
}
.edw-vp-empty:hover { border-color: #F7941D; }
/* Main-photo control on the Edit Vehicle gallery. Order is not cosmetic — publishing writes
   vehicle_photos into listing_images WITH position, so photo 1 leads every part off the car.
   Sits inside the tap-to-remove wrapper; Actions' closest() lets it claim its own click. */
.vi-vp-main {
    position: absolute; bottom: 4px; left: 4px; z-index: 2;
    background: rgba(0,0,0,0.55); color: #fff; border: none;
    font-size: 9px; font-weight: 800; letter-spacing: 0.3px;
    padding: 2px 6px; border-radius: 4px; cursor: pointer; line-height: 1.4;
}
.vi-vp-main:hover { background: rgba(0,0,0,0.78); }
.vi-vp-main.is-main { background: #F7941D; color: var(--apc-black); cursor: default; }
.edw-vp-add-ico { font-size: 24px; color: #ccc; }
.edw-vp-thumb-wrap {
    aspect-ratio: 4/3; border-radius: 8px; overflow: hidden;
    position: relative; cursor: pointer;
    border: 2px solid transparent;
}
.edw-vp-thumb-wrap.selected { border-color: #22c55e; }
.edw-vp-thumb-wrap.deselected { opacity: 0.45; border-color: #ef4444; }
.edw-vp-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.edw-vp-overlay {
    position: absolute; bottom: 4px; right: 4px;
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
}
.edw-vp-thumb-wrap.selected .edw-vp-overlay { background: #22c55e; color: #fff; }
.edw-vp-thumb-wrap.deselected .edw-vp-overlay { background: #ef4444; color: #fff; }

/* Part photo button */
.edw-part-photo-btn {
    display: inline-flex; align-items: center; cursor: pointer;
    font-size: 12px; font-weight: 600; color: #F7941D;
    border: 1.5px solid #F7941D; border-radius: 6px;
    padding: 4px 10px; background: rgba(247,148,29,0.06);
}
.edw-part-photo-btn:hover { background: rgba(247,148,29,0.12); }

/* Desktop layout — left/right/top set by openEdw() in JS */
@media (min-width: 900px) {
    .edw-body { padding: 24px 32px; }
    .edw-form-grid { grid-template-columns: repeat(3, 1fr); }
    .edw-vp-grid { grid-template-columns: repeat(6, 1fr); }
    .edw-review-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .edw-zone-nav { width: 180px; }
}

/* ─── EDW — Desktop Spreadsheet Table (Step 2) ──────────────────────────── */
.edw-parts-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
.edw-parts-table thead th {
    background: #f4f4f4; padding: 8px 10px; text-align: left;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-3);
    border-bottom: 2px solid #ddd; position: sticky; top: 0; z-index: 1;
}
.edw-tbl-th-chk { width: 36px; text-align: center !important; }
.edw-tbl-zone-hdr td {
    background: #1a1a2e; color: #fff;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    padding: 5px 12px;
}
.edw-tbl-row { border-bottom: 1px solid #f0f0f0; }
.edw-tbl-td { padding: 5px 8px; vertical-align: middle; }
.edw-tbl-check { width: 36px; text-align: center; }
.edw-tbl-check input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; accent-color: #F7941D; }
.edw-tbl-asm { width: 130px; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.edw-tbl-part { font-size: 13px; font-weight: 600; color: var(--text-3); }
.edw-tbl-row.checked .edw-tbl-asm { color: var(--text-3); }
.edw-tbl-row.checked .edw-tbl-part { color: #333; }
.edw-tbl-grade { width: 118px; white-space: nowrap; }
.edw-tbl-grade-btn {
    border: 1px solid #ddd; background: #f4f4f4; border-radius: 4px;
    padding: 2px 6px; font-size: 12px; font-weight: 700; cursor: pointer;
    color: #bbb;
}
.edw-tbl-grade-btn.active { background: #F7941D; color: var(--apc-black); border-color: #F7941D; }
.edw-tbl-grade-btn:disabled { opacity: 0.2; cursor: default; }
.edw-tbl-price { width: 82px; }
.edw-tbl-price-inp {
    width: 100%; border: 1px solid #ddd; border-radius: 4px;
    padding: 4px 6px; font-size: 13px; color: #333;
    -moz-appearance: textfield;
}
.edw-tbl-price-inp::-webkit-outer-spin-button,
.edw-tbl-price-inp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.edw-tbl-price-inp:disabled { background: transparent; border-color: #eee; color: #ccc; cursor: default; }
.edw-tbl-notes-inp {
    width: 100%; min-width: 140px; border: 1px solid #ddd; border-radius: 4px;
    padding: 4px 6px; font-size: 13px; color: #333;
}
.edw-tbl-notes-inp:disabled { background: transparent; border-color: #eee; color: #ccc; cursor: default; }
.edw-price-wrap { display: flex; align-items: center; gap: 3px; width: 100%; }
.edw-price-pre { font-size: 13px; color: var(--text-3); flex-shrink: 0; }
.edw-sg-photo-dis { font-size: 16px; opacity: 0.2; }
.edw-tbl-photo { width: 72px; }
.edw-tbl-photo-lbl {
    cursor: pointer; padding: 4px 8px; background: #f4f4f4;
    border-radius: 4px; font-size: 12px; display: inline-flex; align-items: center;
    gap: 3px; white-space: nowrap; user-select: none;
}
.edw-tbl-photo-lbl.disabled { opacity: 0.25; pointer-events: none; }
.edw-tbl-photo-count { font-size: 11px; color: #F7941D; font-weight: 700; }

/* ─── EDW — Spreadsheet Grid (Step 2 desktop) ──────────────────────────── */
#edwSgWrap { overflow-x: auto; }
.edw-sg {
    display: grid;
    grid-template-columns: 240px 148px 1fr 130px 86px 1fr 70px 34px;
    grid-auto-rows: 38px;
    min-width: 880px;
    width: 100%;
}
.edw-sg > * { box-sizing: border-box; overflow: hidden; }
.edw-sg-th {
    background: #f4f4f4; padding: 8px 10px;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-3); font-weight: 600;
    border-bottom: 2px solid #ddd; position: sticky; top: 0; z-index: 2;
}
/* Zone column */
.edw-sg-zone {
    background: #f4f4f4; color: #666;
    cursor: pointer; user-select: none;
    border-bottom: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8;
}
.edw-sg-zone-col {
    display: flex; align-items: center; gap: 8px; padding: 9px 10px; min-height: 38px;
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
}
.edw-sg-zone-col:hover, .edw-sg-zone-expanded:hover { background: #ececec; }
.edw-sg-zone-expanded {
    display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start;
    flex-wrap: wrap; align-content: flex-start;
    padding: 8px 8px; gap: 6px; border-right: 3px solid #F7941D;
}
.edw-sg-zarrow { font-size: 10px; flex-shrink: 0; }
.edw-sg-zone-tag {
    background: #F7941D; color: var(--apc-black);
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    border-radius: 4px; padding: 3px 7px; white-space: nowrap;
}
.edw-sg-zone-badge {
    background: #F7941D; color: #fff;
    font-size: 11px; font-weight: 700; border-radius: 10px; padding: 1px 6px;
    flex-shrink: 0;
}
.edw-sg-zname {
    writing-mode: vertical-lr; transform: rotate(180deg);
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #666;
}
.edw-sg-zone-spacer {
    background: #f4f4f4; border-bottom: 1px solid #e8e8e8; cursor: pointer;
}
.edw-sg-zone-spacer:hover { background: #ececec; }
/* Assembly column */
.edw-sg-asm-col {
    display: flex; align-items: center; gap: 6px; padding: 8px 10px; min-height: 38px;
    background: #f0f0f0; color: var(--text-3);
    font-size: 12px; font-weight: 600;
    cursor: pointer; user-select: none;
    border-bottom: 1px solid #e8e8e8;
}
.edw-sg-asm-col:hover { background: #e8e8e8; color: #555; }
.edw-sg-asm-badge {
    margin-left: auto; background: #F7941D; color: #fff;
    font-size: 10px; font-weight: 700; border-radius: 10px; padding: 1px 6px;
}
.edw-sg-asm-exp {
    display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start;
    flex-wrap: wrap; align-content: flex-start;
    padding: 8px 8px; gap: 6px;
    background: #fff; border-right: 3px solid #F7941D;
    cursor: pointer; user-select: none;
    border-bottom: 1px solid #f0f0f0;
}
.edw-sg-asm-exp:hover { background: #fafafa; }
.edw-sg-aarrow { font-size: 10px; flex-shrink: 0; color: var(--text-3); }
.edw-sg-asm-exp .edw-sg-aarrow { color: #F7941D; }
.edw-sg-aname { font-size: 12px; font-weight: 700; color: #333; }
/* Spacer cells for collapsed rows */
.edw-sg-spacer {
    background: #f8f8f8; border-bottom: 1px solid #f0f0f0; cursor: pointer;
}
.edw-sg-spacer:hover { background: #f0f0f0; }
/* Part rows */
.edw-sg-part {
    display: flex; align-items: center; padding: 6px 10px; min-height: 38px;
    background: #fff; border-bottom: 1px solid #f0f0f0;
}
.edw-sg-part.sel { background: #fff8f4; }
.edw-sg-plabel {
    display: flex; align-items: center; gap: 8px;
    cursor: pointer; font-size: 13px; color: #bbb; font-weight: 500;
}
.edw-sg-part.sel .edw-sg-plabel { color: #333; font-weight: 600; }
.edw-sg-chk { accent-color: #F7941D; width: 15px; height: 15px; flex-shrink: 0; cursor: pointer; }
.edw-sg-cell {
    display: flex; align-items: center; padding: 6px 8px; min-height: 38px;
    background: #fafafa; border-bottom: 1px solid #f0f0f0;
}
.edw-sg-grade-cell { justify-content: center; gap: 2px; }
.edw-sg-cell.sel { background: #fff8f4; }
.edw-sg-remove { background: none; border: none; color: #ccc; font-size: 20px; line-height: 1; cursor: pointer; padding: 0; }
.edw-sg-remove:hover { color: #ef4444; }

/* ─── EDW — 3-Panel Master-Detail (Step 2 desktop) ─────────────────────── */
.edw-3panel {
    display: grid;
    grid-template-columns: 170px 160px 1fr;
    grid-template-rows: 38px 1fr;
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #d0d0d0;
    border-top: none;
}
.edw-3ph {
    display: flex; align-items: center; padding: 0 12px;
    font-size: 10px; font-weight: 700; color: #777;
    letter-spacing: 0.6px; text-transform: uppercase;
    background: #ebebeb; border-bottom: 2px solid #ccc; border-right: 1px solid #ccc;
}
.edw-3pcol { overflow-y: auto; border-right: 1px solid #d0d0d0; }
.edw-panel-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; cursor: pointer;
    border-bottom: 1px solid #ddd;
    font-size: 12px; color: #444; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.edw-panel-row:hover { background: #f4f4f4; }
.edw-panel-row.active { background: #fff4ec; color: #F7941D; font-weight: 700; border-right: 3px solid #F7941D; }
.edw-panel-row:focus-visible { outline: 2px solid #F7941D; outline-offset: -2px; }
.edw-panel-badge {
    background: #F7941D; color: #fff;
    font-size: 10px; font-weight: 700; padding: 1px 6px;
    border-radius: 99px; flex-shrink: 0;
}
/* Part rows — spreadsheet-style inline cells */
.edw-panel-part { display: flex; align-items: stretch; border-bottom: 1px solid #ddd; min-height: 36px; }
.edw-panel-part.checked { background: #fffbf7; }
.edw-qual-row { background: #fafafa; border-left: 3px solid #f0c090; }
.edw-pcell {
    display: flex; align-items: center; padding: 5px 8px;
    border-right: 1px solid #ddd; flex-shrink: 0;
}
.edw-pcell-name { min-width: 180px; flex: 0 0 auto; }
.edw-pcell-grade { gap: 2px; }
.edw-pcell-price { gap: 3px; }
/* "6 available" beside the detail price. Green rather than orange: this is availability
   reassurance, not a call to action competing with the enquire button. */
.detail-qty-pill {
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(34,197,94,0.12);
    color: #15803d;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.sl-qty-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--apc-orange);
    color: var(--apc-black);
    font-size: 10px;
    font-weight: 900;
    vertical-align: middle;
}
.edw-pcell-qty { gap: 3px; flex: 0 0 auto; }
.edw-qty-pre { font-size: 12px; color: var(--text-3); font-weight: 700; }
.edw-pcell-notes { flex: 1 1 auto; }
.edw-pcell-notes .edw-tbl-notes-inp { width: 100%; }
.edw-panel-empty { padding: 30px 15px; color: var(--text-3); font-size: 13px; text-align: center; }

/* ─── EDW — Job Sent Screen ─────────────────────────────────────────────── */
.edw-sent-screen { text-align: center; padding: 32px 20px; }
.edw-sent-qr { margin: 20px auto; display: inline-block; }
.edw-sent-qr img { border: 3px solid #eee; border-radius: 12px; display: block; }
.edw-sent-url-label { font-size: 12px; color: var(--text-3); margin-bottom: 8px; }
.edw-sent-url-box { display: flex; align-items: center; gap: 8px; background: #f4f4f4; border-radius: 8px; padding: 10px 14px; max-width: 520px; margin: 0 auto 16px; }
.edw-sent-url-text { flex: 1; font-size: 11px; color: #555; word-break: break-all; text-align: left; }
.edw-copy-btn { flex-shrink: 0; background: #F7941D; color: var(--apc-black); border: none; border-radius: 6px; padding: 6px 14px; font-size: 12px; font-weight: 700; cursor: pointer; }
.edw-copy-btn:hover { background: #DF7D0F; }
.edw-sent-hint { font-size: 13px; color: var(--text-3); max-width: 420px; margin: 0 auto; line-height: 1.6; }


/* ─── Stock Lookup ───────────────────────────────────────────────────────── */
.sl-shell {
    /* A ROW, not a column: the right panel runs the full height of the tool beside the work
       area, so its tabs sit level with the dark search header instead of a row below it. */
    display: flex; flex-direction: row; width: 100%; height: 100%; overflow: hidden;
    background: #f2f2f7;
    --sl-right-w: 360px;
    /* One number for the dark header and the tab bar beside it. Both box-sizing: border-box,
       or the padded one comes out taller and the dark/light edge steps where they meet —
       which is exactly what happened the first time the fast bar was matched to the chat. */
    --sl-head-h: 52px;
    /* The fast bar (left) and the chat's title (right) sit side by side directly under the dark
       search header. Sized independently they came out ~40px and ~50px, so the dark/light edge
       stepped where they met. One number, both bars. */
    --sl-strip-h: 48px;
}
/* The vehicle selector lives IN the charcoal header now rather than in a white band beneath
   it. It is the same act — "which car am I looking at" — so it reads as one control strip,
   and it buys back a whole row of vertical space for the picker underneath. */
/* Three tracks, not a flex row: the title sat left and the vehicle bar took all the space
   immediately beside it, so the selector crowded the title. The empty third track balances
   the first, which centres the selector against the FULL bar rather than against whatever
   room the title happened to leave. Desktop-only surface, so no wrap case to handle. */
.sl-work { flex: 1 1 0%; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.sl-header {
    flex-shrink: 0; background: #1a1a2e; color: #fff; padding: 10px 16px;
    box-sizing: border-box; min-height: var(--sl-head-h, 52px);
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
}
.sl-close-btn { background: none; border: none; color: #fff; font-size: 18px; cursor: pointer; padding: 4px 8px; line-height: 1; margin-left: auto; }
.sl-header-title { font-size: 15px; font-weight: 800; letter-spacing: 0.3px; justify-self: start; }
.sl-vehicle-bar {
    justify-self: center; min-width: 0; background: transparent;
    border-bottom: none; padding: 0; display: flex; gap: 0; align-items: center;
}
/* Top sellers, one tap from anywhere. A yard lists the same twenty parts constantly, so the
   hierarchy is pure overhead for the common case — this skips it without removing it. */
.sl-fastbar {
    /* Outside .sl-left-scroll, so it stays put without sticky — and without fighting the tab
       bar, which also wants top:0 of that scroller. */
    flex-shrink: 0; background: #1d2432; border-top: 1px solid #2a3242;
    /* border-box, or min-height would be 48 PLUS the 16px of padding — which overshot the
       chat title by exactly that much the first time round. */
    box-sizing: border-box;
    min-height: var(--sl-strip-h, 48px);        /* matched to the chat title beside it */
    padding: 8px 16px; display: flex; align-items: center; gap: 8px;
    overflow-x: auto; scrollbar-width: none;
}
.sl-fastbar::-webkit-scrollbar { display: none; }
.sl-fastbar-lbl {
    font-size: 10px; font-weight: 800; letter-spacing: 0.7px; text-transform: uppercase;
    color: #6f7b8e; white-space: nowrap; padding-right: 4px; flex-shrink: 0;
}
.sl-fastchip {
    background: #2b3444; border: 1px solid #39435a; color: #d3dae6;
    font: inherit; font-size: 11.5px; padding: 5px 11px; border-radius: 20px;
    cursor: pointer; white-space: nowrap; transition: background 0.15s, border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}
.sl-fastchip:hover  { background: var(--apc-orange); border-color: var(--apc-orange); color: var(--apc-black); }
.sl-fastchip .r     { color: #7d8ba0; font-size: 10px; margin-right: 6px; font-variant-numeric: tabular-nums; }
.sl-fastchip:hover .r { color: var(--apc-black); opacity: 0.65; }
.sl-veh-group { display: flex; align-items: center; gap: 6px; flex: 1 1 0%; min-width: 0; flex-wrap: wrap; }
.sl-veh-label { font-size: 10px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0; }
.sl-stock-label { margin-left: 10px; padding-left: 16px; border-left: 1px solid #ddd; }
.sl-veh-select {
    flex: 0 0 auto; border: 1px solid #ddd; border-radius: 6px;
    padding: 7px 8px; font-size: 13px; color: #333; background: #f8f8f8;
    min-width: 0;
}
.sl-veh-select:disabled { color: var(--text-3); background: #f0f0f0; cursor: not-allowed; }
.sl-veh-select-make   { width: 125px; }
.sl-veh-select-model  { width: 150px; }
.sl-veh-select-narrow { width: 88px; }
/* Make/Model/Year/Series are <input>s wrapped by attachVehicleAutocomplete for the
   suggestion dropdown — the wrap (not the input) is the actual flex item here. */
.sl-veh-group .part-ac-wrap { flex: 0 0 auto; }
.sl-veh-group .part-ac-box { min-width: 220px; }
.sl-veh-clear-btn {
    flex-shrink: 0; margin-left: 14px; padding: 6px 12px; border: 1.5px solid var(--apc-orange, #f07020); border-radius: 6px;
    background: #fff; font-size: 11px; font-weight: 800; color: var(--apc-orange, #f07020);
    cursor: pointer; white-space: nowrap;
}
.sl-veh-clear-btn:hover { background: var(--apc-orange, #f07020); color: var(--apc-black); }
.sl-stock-input {
    width: 160px; border: 1px solid #ddd; border-radius: 6px;
    padding: 7px 10px; font-size: 13px; color: #333; background: #f8f8f8;
    outline: none;
}
.sl-selector {
    flex-shrink: 0;
    border-bottom: 2px solid #ddd;
    overflow: hidden;
}
/* Selector: compact rows, no wrapping, minimal height */
.sl-selector .edw-3panel { flex: none; grid-template-rows: 26px auto; }
/* Each column scrolls in its own right, capped so the picker cannot squeeze the results out
   of view. Without this the grid row sizes to the TALLEST column — 28 engine variants pushed
   the whole selector to ~760px and left the results area below the fold, with four mostly
   empty columns above it. */
.sl-selector .edw-3pcol  { overflow-y: auto; max-height: min(42vh, 340px); }
/* The system column is a FIXED list of 18 and never grows, so it shows in full rather than
   scrolling. Costs a few lines of height and removes a scrollbar from the one column a user
   reads top-to-bottom every time. The taller cap is deliberately on this column only. */
.sl-selector #slPanelZones { overflow-y: visible; max-height: none; }
.sl-selector .edw-3ph    { font-size: 10px; padding: 0 8px; }
.sl-selector .edw-panel-row {
    padding: 5px 8px;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
}
.sl-selector .edw-panel-row span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}
/* selector reuses .edw-3panel / .edw-3ph / .edw-3pcol / .edw-panel-row classes */
.sl-part-row { cursor: pointer; }
.sl-part-row.searched { background: #fff4ec; color: #F7941D; }
/* Grows with content so the whole left column scrolls as one; fills the viewport when results are short */
.sl-results-area { flex: 1 0 auto; display: flex; flex-direction: column; }
.sl-results-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text-3); font-size: 14px; text-align: center; padding: 30px; }
/* Tab bar */
/* Sticks to the top of the scroll area once the selector scrolls past it */
.sl-tab-bar { position: sticky; top: 0; z-index: 6; flex-shrink: 0; display: flex; align-items: flex-end; gap: 0; overflow-x: auto; background: #eef0f3; border-bottom: 1px solid #dcdfe4; padding: 0 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.04); }
/* Actual tabs, not underlined text. A wrecker can have half a dozen searches open at once and
   was distinguishing them by reading each label; shape plus a per-tab colour lets them be told
   apart at a glance and clicked by position without reading. */
.sl-tab {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 13px; cursor: pointer; white-space: nowrap;
    font-size: 12px; font-weight: 700; color: var(--text-2);
    flex-shrink: 0; position: relative;
    background: #f2f3f5;
    border: 1px solid #dcdfe4;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    margin: 4px 2px -1px 0;          /* -1px lifts the active tab over the bar's own border */
    /* the colour lives here, set per tab below */
    border-top: 3px solid var(--sl-tab-c, #b9c0c9);
}
.sl-tab:hover { background: #e9ebef; }
.sl-tab.active {
    background: #fff; color: #111;
    border-color: #dcdfe4; border-bottom: 1px solid #fff;
    border-top: 3px solid var(--sl-tab-c, #F7941D);
}
/* Six is enough to separate a realistic number of open searches without the bar turning into
   a paint chart. They cycle, and each is legible against both the resting and active grounds. */
.sl-tab-c0 { --sl-tab-c: #F7941D; }   /* APC orange */
.sl-tab-c1 { --sl-tab-c: #2f7fd0; }   /* blue */
.sl-tab-c2 { --sl-tab-c: #0d8a6a; }   /* green */
.sl-tab-c3 { --sl-tab-c: #9333a8; }   /* purple */
.sl-tab-c4 { --sl-tab-c: #c2410c; }   /* rust */
.sl-tab-c5 { --sl-tab-c: #b47600; }   /* gold */
.sl-tab-close { color: #bbb; font-size: 14px; line-height: 1; margin-left: 2px; }
.sl-tab-close:hover { color: #ef4444; }
/* Results */
.sl-section-hdr {
    position: sticky; top: calc(37px + var(--sl-action-h, 0px)); z-index: 6;
    padding: 8px 14px; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.6px;
    background: #f4f4f4; border-bottom: 1px solid #e8e8e8;
    color: var(--text-3); display: flex; align-items: center; gap: 8px;
}
.sl-section-hdr.own { color: #F7941D; background: #fff8f2; border-color: #ffe5cc; }
.sl-section-own-pill { background: #F7941D; color: #fff; font-size: 9px; font-weight: 800; padding: 1px 6px; border-radius: 99px; }
.sl-state-filter { margin-left: auto; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 99px; border: 1.5px solid #bbb; background: #fff; color: #555; cursor: pointer; letter-spacing: 0.3px; outline: none; }
.sl-state-filter:focus { border-color: #F7941D; color: #F7941D; }
.sl-pro-filter-btn { margin-left: auto; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 99px; border: 1.5px solid #bbb; background: #fff; color: var(--text-3); cursor: pointer; letter-spacing: 0.3px; }
.sl-pro-filter-btn.active { border-color: #F7941D; background: #fff8f2; color: #F7941D; }
/* Results table — spreadsheet grid */
.sl-results-table { display: flex; flex-direction: column; border-top: 2px solid #d0d0d0; }
/* Sticks just under the tab bar (~38px) for its own section, so the column
   labels stay visible down a long list; hands off to the next section's header. */
.sl-results-col-hdr { position: sticky; top: calc(37px + var(--sl-action-h, 0px) + 29px); z-index: 5; display: flex; align-items: center; background: #f0f0f0; border-bottom: 2px solid #d0d0d0; min-height: 28px; flex-shrink: 0; }
.sl-results-col-hdr .sl-hdr-cell { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: #666; padding: 0 10px; border-right: 1px solid #d0d0d0; align-self: stretch; display: flex; align-items: center; flex-shrink: 0; }
.sl-results-col-hdr .sl-hdr-cell.flex { flex: 1; }
.sl-results-col-hdr .sl-hdr-cell.sl-hdr-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.sl-results-col-hdr .sl-hdr-cell.sl-hdr-sort:hover { background: #e7e7e7; color: #333; }
.sl-results-col-hdr .sl-hdr-cell.sl-hdr-sort.active { color: #F7941D; background: #fbeee4; }
.sl-row {
    display: flex; align-items: center; gap: 0;
    border-bottom: 1px solid #ddd; background: #fff;
    min-height: 44px; cursor: pointer;
}
.sl-row:hover { background: #f5f7ff; }
.sl-row.own { background: #fffbf7; }
.sl-row.own:hover { background: #fff4ec; }
.sl-cell { display: flex; align-items: center; padding: 6px 10px; border-right: 1px solid #ddd; align-self: stretch; flex-shrink: 0; font-size: 12px; }
.sl-cell-thumb { width: 52px; padding: 4px; flex-shrink: 0; }
.sl-cell-thumb img { width: 44px; height: 36px; object-fit: cover; border-radius: 4px; display: block; }
.sl-cell-thumb .sl-no-img { width: 44px; height: 36px; background: #f0f0f0; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.sl-cell-title { flex: 1 1 auto; display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: #333; min-width: 0; border-right: 1px solid #ddd; padding: 6px 12px; }
.sl-cell-title .sl-title-text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-cell-title .sl-match, .sl-cell-title .sl-quote-chip, .sl-cell-title .sl-note-icon { flex-shrink: 0; }
.sl-quote-chip { background: #eef2ff; border: 1px solid #c7d2fe; color: #4f46e5; border-radius: 20px; font-size: 10px; font-weight: 800; padding: 1px 7px; cursor: pointer; line-height: 1.6; }
.sl-quote-chip:hover { background: #e0e7ff; }
.sl-note-icon { cursor: pointer; font-size: 12px; opacity: 0.85; }
.sl-note-icon:hover { opacity: 1; }
.sl-marker-pop { position: fixed; z-index: 5000; background: #fff; border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,0.16); padding: 8px; min-width: 200px; max-width: 320px; }
.sl-mp-title { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-3); padding: 2px 6px 6px; }
.sl-mp-row { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.sl-mp-row:hover { background: #f5f5f5; }
.sl-mp-qnum { font-weight: 800; color: #F7941D; flex-shrink: 0; }
.sl-mp-cust { flex: 1 1 auto; min-width: 0; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-mp-cust--none { color: #bbb; font-style: italic; }
.sl-mp-status { flex-shrink: 0; font-size: 9px; font-weight: 800; text-transform: uppercase; padding: 1px 6px; border-radius: 10px; }
.sl-mp-status--draft { background: #f3f4f6; color: var(--text-3); }
.sl-mp-status--sent { background: #dcfce7; color: #16a34a; }
.sl-mp-note { padding: 4px 6px; color: #444; font-size: 12px; line-height: 1.45; white-space: pre-wrap; }
.sl-cell-yard { color: #666; font-size: 12px; width: 130px; }
.sl-cell-grade { width: 56px; justify-content: center; font-weight: 700; font-size: 13px; }
.sl-cell-grade.grade-A { color: #22c55e; }
.sl-cell-grade.grade-B { color: #3b82f6; }
.sl-cell-grade.grade-C { color: #f59e0b; }
.sl-cell-grade.grade-D { color: #ef4444; }
.sl-cell-price { width: 70px; font-weight: 700; color: #F7941D; font-size: 13px; }
.sl-cell-meta { color: var(--text-3); font-size: 11px; width: 120px; flex-direction: column; align-items: flex-start; gap: 1px; }
.sl-cell-stock, .sl-cell-bin, .sl-cell-kms { color: #555; font-size: 11px; white-space: nowrap; overflow: hidden; }
.sl-cell-stock { width: 88px; font-weight: 600; }
.sl-cell-bin   { width: 76px; }
.sl-cell-kms   { width: 76px; }
.sl-cell-btn { width: 60px; justify-content: center; }
.sl-cell-btn button { background: #F7941D; color: var(--apc-black); border: none; border-radius: 6px; padding: 5px 10px; font-size: 11px; font-weight: 700; cursor: pointer; }
.sl-cell-btn button:hover { background: #DF7D0F; }
.sl-loading { padding: 30px; text-align: center; color: var(--text-3); font-size: 13px; }
.sl-no-results { padding: 30px; text-align: center; color: var(--text-3); font-size: 13px; }

/* ─── Stock Lookup: main area + panels ───────────────────────────────────── */
.sl-main-area { display: flex; flex: 1 1 0%; min-height: 0; overflow: hidden; position: relative; }
/* The column no longer scrolls — .sl-left-scroll inside it does. That keeps the fast movers
   pinned above the scroll without them competing with the tab bar for `top: 0`, which is what
   would happen if both lived in the same scroller. */
.sl-left-col { display: flex; flex-direction: column; flex: 1 1 0%; min-width: 0; overflow: hidden; }
.sl-left-scroll { flex: 1 1 0%; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; }
.sl-right-col { width: var(--sl-right-w, 360px); flex-shrink: 0; border-left: 2px solid #ddd; display: flex; flex-direction: column; overflow: hidden; }
/* Fills the available width. NOT width:100% — as a stretched flex child it already fills the
   column, and a hard 100% would be measured BEFORE the reserved chat lane's margin, so the
   selector would overflow by exactly the lane instead of shrinking to sit beside it. */
.sl-selector { flex-shrink: 0; border-bottom: 2px solid #ddd; overflow-x: auto; overflow-y: hidden; }

/* Selector checkboxes (col 3 + col 4) */
.sl-part-check { display: inline-flex; align-items: center; flex-shrink: 0; margin-right: 6px; cursor: pointer; }
.sl-part-check input[type="checkbox"] { width: 15px; height: 15px; accent-color: #F7941D; cursor: pointer; margin: 0; }
/* Count badge on zone/assembly/part rows */
.sl-count-badge { display: inline-flex; align-items: center; justify-content: center; background: #F7941D; color: #fff; font-size: 9px; font-weight: 800; min-width: 16px; height: 16px; border-radius: 99px; padding: 0 3px; flex-shrink: 0; margin-left: auto; }

/* Checkbox cell on result rows */
.sl-cell-check { width: 36px; justify-content: center; padding: 6px 8px; flex-shrink: 0; }
.sl-cell-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: #F7941D; cursor: pointer; }
.sl-row.selected { background: #fff8f2; }
.sl-row.selected.own { background: #fff0e0; }
/* Quick Part editable rows (counter-sale, batched into a quote) */
.sl-row--quick { background: #fff8f2; gap: 6px; padding: 6px 8px; cursor: default; border-left: 3px solid #F7941D; }
.sl-qp-input { height: 30px; border: 1px solid #ddd; border-radius: 6px; padding: 0 8px; font-size: 12px; color: var(--text-1); background: #fff; min-width: 0; }
.sl-qp-input:focus { border-color: #F7941D; outline: none; }
.sl-qp-desc  { flex: 2 1 150px; }
.sl-qp-note  { flex: 2 1 150px; }
.sl-qp-cond  { flex: 0 0 96px; }
.sl-qp-stock { flex: 0 0 88px; }
.sl-qp-price { flex: 0 0 84px; }
.sl-qp-add-more { margin-left: auto; padding: 3px 10px; border: 1px solid #F7941D; border-radius: 6px; background: #fff; color: #F7941D; font-size: 11px; font-weight: 700; cursor: pointer; }
.sl-qm-parts-tag { font-size: 8px; font-weight: 800; letter-spacing: 0.4px; background: #fff0e0; color: #F7941D; padding: 1px 4px; border-radius: 3px; vertical-align: middle; }
.sl-tab-veh { font-size: 10px; color: var(--text-3); font-weight: 500; }
.sl-qd-note-icon { cursor: help; font-size: 12px; opacity: 0.7; }
.sl-qd-note-icon:hover { opacity: 1; }
/* Engine-variant match tint: exact = green, possible = the selector's orange (#fff4ec) */
.sl-row.sl-row--exact { background: #ecf9f0; }
.sl-row.sl-row--possible { background: #fff4ec; }
.sl-match { display: inline-block; margin-right: 7px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; padding: 1px 6px; border-radius: 4px; vertical-align: 1px; }
.sl-match--exact { background: #d4f3df; color: #15803d; }
.sl-match--possible { background: #ffe3cc; color: #F7941D; }

/* Action bar — pinned to the bottom of the scroll area so it stays visible while selecting */
/* ── Stock Lookup sticky stack ────────────────────────────────────────────────
   Everything a wrecker needs while scrolling a long result list stays put; only the ROWS
   scroll. Top to bottom: the part tabs, the selection actions, the section header
   (YOUR STOCK / OTHER YARDS) and the column labels.

   The action bar only exists when something is ticked, so the two below it are offset by
   --sl-action-h, which _slRenderActionBar sets to the bar's real height and clears to 0px.
   Hardcoding a height here would leave a gap the whole time nothing was selected — which is
   most of the time. */
.sl-action-bar {
    position: sticky; top: 37px; z-index: 7; flex-shrink: 0;
    background: #fff; border-bottom: 1px solid #e6e6e6;
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    padding: 7px 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.sl-action-count { font-size: 12px; font-weight: 700; color: #F7941D; margin-right: auto; }
.sl-action-btn { padding: 7px 14px; border: none; border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.sl-action-btn-primary { background: #F7941D; color: var(--apc-black); }
.sl-action-btn-primary:hover { background: #DF7D0F; }
.sl-action-btn-ghost { background: #f2f2f2; color: #555; border: 1px solid #ddd; }
.sl-action-btn-ghost:hover { background: #e8e8e8; color: #333; }

/* Today's Quotes panel */
/* SL floating chat panel */
/* No reserved lane. The chat is transient — its history lives in the Today panel's CHATS tab,
   so the floating window is "reply to this yard now", not a workspace you keep open. Holding
   392px permanently for that cost the picker more than it bought, and on a 1366px laptop it
   pushed five columns past their 150px floor into a sideways scroll. */

/* In the right-hand column, not floating over the results.
   It was previously absolute and bottom-docked to the LEFT of this panel, because floating it
   from the top put it over the part columns — choosing a part meant closing the chat you were
   choosing it for. Living inside the column removes that conflict entirely: it never covers the
   picker or the results, its head lines up with the dark search header, and the tabs take
   whatever height is left. Hidden, it collapses and the tabs get the whole column. */
.sl-chat-float {
    /* FIXED, not max-height. A panel that grows with the conversation drags the list down the
       screen as you talk, so the same row is in a different place every time you reach for it.
       Fixed means the messages scroll INSIDE and the chat list below stays put. The max-height
       only bites on a short window, where something has to give. */
    flex: 0 0 340px; max-height: 62%;
    display: flex; flex-direction: column;
    background: #fff;
    border-bottom: 2px solid #ddd;
    overflow: hidden;
}
/* Always rendered, even with no conversation open, so opening one never shifts the tabs.
   The empty state fills the space rather than collapsing it. */
.sl-cf-noconvo {
    flex: 1 1 0; min-height: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 6px; padding: 20px; text-align: center; color: var(--text-3);
}
.sl-cf-noconvo-ico { font-size: 24px; opacity: 0.45; }
.sl-cf-noconvo-title { font-size: 12px; font-weight: 700; color: #888; }
.sl-cf-noconvo-sub { font-size: 11px; line-height: 1.5; max-width: 210px; }
/* A failed send stays on screen rather than vanishing, so it has to LOOK unsent — an
   identical bubble that never arrived is worse than no bubble at all. */
.msg-failed { opacity: 0.55; border: 1px dashed #ef4444; }
.msg-failed-time { color: #ef4444; font-weight: 700; }
.sl-cf-msg.failed .sl-cf-bubble { opacity: 0.55; border: 1px dashed #ef4444; }
.sl-cf-msg.failed .sl-cf-time { color: #ef4444; font-weight: 700; }
.sl-cf-showpart {
    border: none; border-radius: 6px; padding: 5px 10px; cursor: pointer;
    background: #F7941D; color: var(--apc-black);
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px;
    white-space: nowrap;
}
.sl-cf-showpart:hover { background: #DF7D0F; }
.sl-cf-showpart:focus-visible { outline: 2px solid #F7941D; outline-offset: 2px; }
.sl-chat-float.is-empty .sl-cf-hdr-btns,
.sl-chat-float.is-empty .sl-cf-enquiries-link,
.sl-chat-float.is-empty .sl-cf-input-row { display: none; }
.sl-chat-float.is-empty .sl-cf-yard { color: var(--text-3); }
.sl-cf-header {
    display: flex; align-items: center; gap: 10px;
    min-height: var(--sl-strip-h, 48px);        /* matched to the fast bar beside it */
    padding: 8px 12px; background: #1a1a2e; cursor: pointer;
    flex-shrink: 0; box-sizing: border-box;
}
.sl-cf-hdr-info { flex: 1; min-width: 0; }
.sl-cf-yard { font-size: 12px; font-weight: 800; color: #F7941D; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-cf-part { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.sl-cf-hdr-btns { display: flex; gap: 4px; flex-shrink: 0; }
.sl-cf-btn { background: none; border: 1px solid rgba(255,255,255,0.2); color: white; border-radius: 4px; width: 22px; height: 22px; font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sl-cf-btn:hover { background: rgba(255,255,255,0.1); }
/* min-height:220px / max-height:280px were sized for the old free-floating panel. Against a
   fixed 340px slot they forced the composer out of the bottom — the header, the thread link and
   the input row are all flex-shrink:0, so the overflow had nowhere to go but off the edge.
   flex:1 with min-height:0 lets this take exactly what is left and scroll inside it. */
.sl-cf-msgs { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 6px; background: #f8f8f8; }
.sl-cf-loading { color: var(--text-3); font-size: 12px; text-align: center; padding: 20px; }
.sl-cf-empty { color: var(--text-3); font-size: 12px; text-align: center; padding: 30px 10px; }
.sl-cf-msg { display: flex; flex-direction: column; max-width: 85%; }
.sl-cf-msg.sent { align-self: flex-end; align-items: flex-end; }
.sl-cf-msg.recv { align-self: flex-start; align-items: flex-start; }
.sl-cf-bubble { padding: 8px 12px; border-radius: 14px; font-size: 13px; line-height: 1.4; word-break: break-word; }
.sl-cf-msg.sent .sl-cf-bubble { background: #F7941D; color: white; border-radius: 14px 14px 4px 14px; }
.sl-cf-msg.recv .sl-cf-bubble { background: white; color: #333; border: 1px solid #e8e8e8; border-radius: 14px 14px 14px 4px; }
.sl-cf-time { font-size: 10px; color: var(--text-3); margin-top: 2px; padding: 0 2px; }
.sl-cf-enquiries-link { padding: 4px 10px; border-top: 1px solid #f0f0f0; flex-shrink: 0; }
.sl-cf-enquiries-link button { background: none; border: none; color: #F7941D; font-size: 11px; font-weight: 700; cursor: pointer; padding: 0; }
.sl-cf-enquiries-link button:hover { text-decoration: underline; }
.sl-cf-input-row { display: flex; align-items: flex-end; gap: 6px; padding: 8px 10px; border-top: 1px solid #eee; flex-shrink: 0; }
.sl-cf-input { flex: 1; border: 1px solid #e0e0e0; border-radius: 8px; padding: 7px 10px; font-size: 13px; resize: none; outline: none; font-family: inherit; max-height: 80px; }
.sl-cf-input:focus { border-color: #F7941D; }
.sl-cf-send { width: 32px; height: 32px; background: #F7941D; color: white; border: none; border-radius: 50%; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sl-cf-send:hover { background: #DF7D0F; }

/* Chat button on OTHER YARDS rows */
.sl-cell-chat { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 72px; padding: 0 8px; }
.sl-chat-row-btn { padding: 4px 10px; background: #1a1a2e; color: white; border: none; border-radius: 6px; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.sl-chat-row-btn:hover { background: #F7941D; }

/* Today's Searches panel — sits in bottom of sl-right-col */
.sl-searches-panel { flex: 2 1 0%; min-height: 0; border-top: 2px solid #ddd; background: #fafafa; display: flex; flex-direction: column; overflow: hidden; }
.sl-sp-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid #e8e8e8; flex-shrink: 0; }
.sl-sp-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: #555; }
.sl-sp-count { font-size: 11px; font-weight: 700; color: var(--text-3); }
.sl-sp-list { flex: 1; overflow-y: auto; }
/* An inbound row is a yard asking about YOUR part — a different job from a chat you started,
   so it says so rather than looking identical in the list. */
.sl-sp-inbound {
    background: #F7941D; color: var(--apc-black);
    font-size: 8.5px; font-weight: 800; letter-spacing: 0.5px;
    padding: 1px 5px; border-radius: 3px; vertical-align: middle; margin-left: 4px;
}
.sl-sp-empty { padding: 16px 12px; font-size: 11px; color: #bbb; line-height: 1.5; }
.sl-sp-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #f0f0f0; }
.sl-sp-row:hover { background: #f4f4f4; }
.sl-sp-info { flex: 1; min-width: 0; }
.sl-sp-part { font-size: 12px; font-weight: 700; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-sp-meta { font-size: 10px; color: var(--text-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-sp-chip { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 10px; flex-shrink: 0; white-space: nowrap; }
/* Reveals on row hover so the list stays quiet, but is always in the layout — appearing on
   hover would shuffle the chip and title sideways under the cursor. */
.sl-sp-x {
    flex-shrink: 0; width: 22px; height: 22px; padding: 0;
    border: none; border-radius: 6px; background: transparent;
    color: #bbb; font-size: 17px; line-height: 1; cursor: pointer;
    opacity: 0; transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.sl-sp-row:hover .sl-sp-x { opacity: 1; }
.sl-sp-x:hover { background: #eee; color: #666; }
.sl-sp-x:focus-visible { opacity: 1; outline: 2px solid #F7941D; outline-offset: 1px; }
.sl-sp-searching { background: #f0f0f0; color: var(--text-3); }
.sl-sp-found { background: #dcfce7; color: #15803d; }
.sl-sp-none { background: #fee2e2; color: #dc2626; }

/* Today panel — segmented switch: Quotes / Searches / Yard Chats */
.sl-today { flex: 1 1 0%; min-height: 0; background: #fafafa; display: flex; flex-direction: column; overflow: hidden; }
/* Pills, matched to the height of the dark header they now sit beside. Brand fill on the
   active one rather than an underline — at this size a 2px line is easy to miss, and this
   strip is the only thing telling you which panel the column is showing. */
.sl-today-switch {
    flex-shrink: 0; display: flex; gap: 6px; align-items: center;
    padding: 0 10px; box-sizing: border-box; min-height: var(--sl-head-h, 52px);
    /* Same charcoal as the search header it sits beside, so the top of the tool reads as one
       dark band rather than a dark half and a white half. The bottom border mirrors the fast
       bar's border-top on the other side, keeping that seam running straight across. */
    background: #1a1a2e; border-bottom: 1px solid #2a3242;
}
.sl-today-tab {
    /* Borrowed from .sl-fastchip rather than invented: the fast movers are the other row of
       chips on charcoal in this tool, and two different dark-chip looks would just read as a
       mistake. */
    flex: 1; padding: 8px 6px; border: 1px solid #39435a; border-radius: 8px;
    background: #2b3444; color: #d3dae6; cursor: pointer;
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.sl-today-tab:hover { background: #39435a; color: #fff; }
.sl-today-tab--active,
.sl-today-tab--active:hover { background: #F7941D; border-color: #F7941D; color: var(--apc-black); }
.sl-today-tab:focus-visible { outline: 2px solid #F7941D; outline-offset: 2px; }
/* The default badge is a light grey pill — bright and shouty on a dark chip. */
.sl-today-tab .sl-today-badge { background: rgba(255,255,255,0.15); color: #d3dae6; }
.sl-today-tab .sl-today-badge--alert { background: #ef4444; color: #fff; }
/* A grey count on an orange pill disappears, and a red one fights it. */
.sl-today-tab--active .sl-today-badge { background: rgba(0,0,0,0.18); color: var(--apc-black); }
.sl-today-tab--active .sl-today-badge--alert { background: #fff; color: #ef4444; }
.sl-today-body { flex: 1 1 0%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.sl-today-view { flex: 1 1 0%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.sl-today-badge {
    font-size: 10px; font-weight: 700; color: var(--text-3); background: #efefef;
    border-radius: 99px; padding: 0 6px; min-width: 16px; text-align: center; line-height: 16px;
}
.sl-today-badge:empty { display: none; }
.sl-today-badge--alert { background: #ef4444; color: #fff; }

/* Today's Quotes panel — sits in top of sl-right-col */
.sl-quotes-panel { flex: 3 1 0%; min-height: 0; background: #fafafa; display: flex; flex-direction: column; overflow: hidden; }
.sl-qp-header { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: #fff; border-bottom: 1px solid #eee; }
.sl-qp-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: #333; }
.sl-qp-new-btn { background: #F7941D; color: var(--apc-black); border: none; border-radius: 6px; padding: 5px 10px; font-size: 11px; font-weight: 700; cursor: pointer; }
.sl-qp-new-btn:hover { background: #DF7D0F; }
.sl-qp-search { flex-shrink: 0; padding: 8px 10px; border-bottom: 1px solid #eee; background: #fff; }
.sl-qp-search input { width: 100%; border: 1px solid #ddd; border-radius: 6px; padding: 6px 9px; font-size: 12px; color: #333; background: #f8f8f8; outline: none; box-sizing: border-box; }
.sl-qp-search input:focus { border-color: #F7941D; }
.sl-qp-filter { flex-shrink: 0; display: flex; gap: 6px; padding: 8px 10px 0; border-bottom: 1px solid #eee; padding-bottom: 8px; background: #fff; }
.sl-qp-filter-btn { flex: 1; padding: 5px 8px; border: 1px solid #ddd; border-radius: 6px; background: #f8f8f8; color: #666; font-size: 11px; font-weight: 700; cursor: pointer; }
.sl-qp-filter-btn.active { border-color: #F7941D; background: #fff5ee; color: #F7941D; }
.sl-quotes-list { flex: 1 1 0%; overflow-y: auto; padding: 8px; }
.sl-quotes-empty { text-align: center; color: #bbb; font-size: 12px; padding: 30px 10px; }

/* Quote card in list */
.sl-quote-card { background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 9px 11px; margin-bottom: 7px; cursor: pointer; }
.sl-quote-card:hover { border-color: #F7941D; }
.sl-quote-card.active { border-color: #F7941D; background: #fff8f2; }
.sl-quote-num { font-size: 12px; font-weight: 800; color: #333; }
.sl-quote-badge { display: inline-block; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; padding: 1px 5px; border-radius: 99px; margin-left: 5px; vertical-align: middle; }
.sl-quote-badge.draft { background: #f4f4f4; color: var(--text-3); }
.sl-quote-badge.sent { background: #dbeafe; color: #1d4ed8; }
.sl-quote-badge.approved { background: #dcfce7; color: #15803d; }
.sl-quote-badge.invoiced { background: #ede9fe; color: #6d28d9; }
.sl-quote-meta { font-size: 11px; color: var(--text-3); margin-top: 3px; }

/* Quote detail panel */
.sl-quote-detail { flex: 1 1 0%; display: flex; flex-direction: column; overflow: hidden; }
.sl-qd-back { flex-shrink: 0; padding: 8px 12px; border-bottom: 1px solid #eee; background: #fff; }
.sl-qd-back button { background: none; border: none; color: #F7941D; font-size: 12px; font-weight: 700; cursor: pointer; padding: 0; }
.sl-qd-body { flex: 1 1 0%; overflow-y: auto; padding: 12px; }
.sl-qd-section { margin-bottom: 14px; }
.sl-qd-label { font-size: 10px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; }
.sl-qd-input { width: 100%; border: 1px solid #ddd; border-radius: 6px; padding: 6px 9px; font-size: 12px; color: #333; background: #fff; box-sizing: border-box; outline: none; }
.sl-qd-input:focus { border-color: #F7941D; }
.sl-qd-total { display: flex; justify-content: space-between; padding: 8px 0 0; font-size: 13px; font-weight: 700; color: #333; border-top: 2px solid #eee; margin-top: 4px; }
.sl-qd-actions { flex-shrink: 0; padding: 10px 12px; border-top: 2px solid #eee; display: flex; flex-direction: column; gap: 6px; }
.sl-qd-actions-row { display: flex; gap: 6px; }
.sl-qd-btn { flex: 1; padding: 8px; border: none; border-radius: 8px; font-size: 11px; font-weight: 700; cursor: pointer; }
.sl-qd-btn-primary { background: #F7941D; color: var(--apc-black); }
.sl-qd-btn-primary:hover { background: #DF7D0F; }
.sl-qd-btn-save { background: #F7941D; color: var(--apc-black); }
.sl-qd-btn-save:hover { background: #DF7D0F; }
.sl-qd-btn-ghost { background: #f4f4f4; color: #666; }
.sl-qd-btn-ghost:hover { background: #e8e8e8; }
.sl-qd-btn-danger { background: #fff0f0; color: #ef4444; border: 1px solid #fca5a5; flex: 0 0 auto; padding: 8px 10px; }
.sl-qd-btn-danger:hover { background: #fee2e2; }

/* Confirm dialog */
.apc-confirm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9000; display: flex; align-items: center; justify-content: center; }
.apc-confirm-card { background: #fff; border-radius: 16px; padding: 28px 24px 20px; width: 320px; max-width: 90vw; box-shadow: var(--elev-4); text-align: center; }
.apc-confirm-msg { font-size: 15px; font-weight: 600; color: #333; margin-bottom: 6px; }
.apc-confirm-sub { font-size: 13px; color: var(--text-3); margin-bottom: 22px; }
.apc-confirm-btns { display: flex; gap: 10px; }
.apc-confirm-cancel { flex: 1; padding: 11px; border: none; border-radius: 8px; background: #f4f4f4; color: #666; font-size: 14px; font-weight: 600; cursor: pointer; }
.apc-confirm-cancel:hover { background: #e8e8e8; }
.apc-confirm-ok { flex: 1; padding: 11px; border: none; border-radius: 8px; background: #ef4444; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.apc-confirm-ok:hover { background: #dc2626; }

/* Dashboard feedback card */
.dash-rated-chip { display:inline-block; font-size:11px; font-weight:700; color:#22c55e; background:#f0fdf4; border-radius:6px; padding:3px 8px; }
.dash-card-action { background: none; border: none; font-size: 11px; font-weight: 700; color: var(--apc-orange); cursor: pointer; padding: 0; font-family: inherit; }
.dash-card-action:hover { color: #DF7D0F; }
.dash-fb-rows { display: flex; flex-direction: column; gap: 0; }
.dash-fb-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f4f4f4; }
.dash-fb-row:last-child { border-bottom: none; }
.dash-fb-ico { font-size: 15px; width: 22px; text-align: center; flex-shrink: 0; }
.dash-fb-label { flex: 1; font-size: 13px; color: #555; }
.dash-fb-val { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.dash-fb-stars { color: #f59e0b; font-weight: 800; font-size: 15px; }
.dash-fb-count { color: var(--text-3); font-size: 12px; }
.dash-fb-none { color: #bbb; font-size: 12px; }
.dash-fb-num { font-weight: 800; font-size: 15px; }
.dash-fb-num.ok { color: #22c55e; }
.dash-fb-num.warn { color: #f59e0b; }
.dash-fb-num.orange { color: #F7941D; }
.dash-fb-link { background: none; border: 1px solid #F7941D; color: #F7941D; border-radius: 6px; padding: 3px 8px; font-size: 11px; font-weight: 700; cursor: pointer; font-family: inherit; margin-left: 4px; }
.dash-fb-link:hover { background: #fff3ec; }

/* Rate-prompt card (post-sale rating in thread) */
.rate-prompt-card { background: #fff; border: 1.5px solid #f0f0f0; border-radius: 12px; padding: 16px 16px 14px; max-width: 300px; margin: 10px auto; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.rate-prompt-title { font-size: 14px; font-weight: 800; color: #222; margin-bottom: 12px; }
.rate-prompt-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-3); margin-bottom: 8px; }
.rate-prompt-stars { display: flex; gap: 4px; margin-bottom: 12px; }
.rate-prompt-stars span { font-size: 26px; color: #ccc; cursor: pointer; transition: color 0.1s; line-height: 1; }
.rate-prompt-stars span:hover { color: #f59e0b; }
.rate-prompt-note { width: 100%; box-sizing: border-box; border: 1.5px solid #e0e0e0; border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; resize: none; line-height: 1.4; margin-bottom: 4px; }
.rate-prompt-note:focus { outline: none; border-color: #F7941D; }
.rate-prompt-counter { font-size: 11px; color: #bbb; text-align: right; margin-bottom: 12px; }
.rate-prompt-submit { width: 100%; padding: 11px; background: #F7941D; border: none; border-radius: 8px; color: var(--apc-black); font-size: 13px; font-weight: 800; cursor: pointer; font-family: inherit; }
.rate-prompt-submit:hover { background: #DF7D0F; }
.rate-prompt-submit:disabled { background: #ccc; cursor: default; }
.rate-prompt-submitted { text-align: center; padding: 18px 16px; }
.rate-prompt-thanks { font-size: 15px; font-weight: 800; color: #22c55e; margin-bottom: 4px; }
.rate-prompt-thanks-sub { font-size: 12px; color: var(--text-3); }

/* Add-to-quote modal */
/* The quote document is modal, but the yard you are negotiating with must not be locked out
   while you read it — a quote's whole purpose is the conversation around it, and haggling
   freight is exactly when you have the document open. So the backdrop stops short of the
   right-hand panel: dimming ends at the sidebar, and chat stays live beside the quote.
   Deliberately not a full-screen modal. */
.sl-quote-modal-overlay {
    position: fixed; top: 0; bottom: 0; left: 0; right: var(--sl-right-w, 360px);
    background: rgba(0,0,0,0.5); z-index: 3800;
    display: flex; align-items: center; justify-content: center;
}
/* Above the backdrop so it stays clickable, not just visible. */
.sl-right-col { position: relative; z-index: 3801; }
/* Percentage, not vw: the overlay is now narrower than the viewport, so 90vw could push the
   document out under the sidebar on a small screen. */
.sl-quote-modal { background: #fff; border-radius: 16px; width: 520px; max-width: 92%; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--elev-4); }
.sl-qm-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid #eee; }
.sl-qm-title { font-size: 14px; font-weight: 800; color: #333; }
.sl-qm-title .sl-qm-eyebrow { display: block; font-size: 10px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-3); line-height: 1; margin-bottom: 3px; }
.sl-qm-title .sl-qm-qnum-big { display: block; font-size: 18px; font-weight: 900; color: #F7941D; letter-spacing: 0.3px; }
.sl-qm-close { background: none; border: none; font-size: 18px; color: var(--text-3); cursor: pointer; padding: 4px; line-height: 1; }
.sl-qm-body { flex: 1; overflow-y: auto; padding: 14px 18px; }
.sl-qm-subtitle { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-3); margin-bottom: 8px; }
.sl-qm-selected { font-size: 12px; color: #666; margin-bottom: 12px; }
.sl-qm-quote-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #eee; border-radius: 8px; margin-bottom: 7px; cursor: pointer; }
.sl-qm-quote-row:hover { border-color: #F7941D; background: #fff8f2; }
.sl-qm-qnum { font-size: 13px; font-weight: 800; color: #333; flex: 1; }
.sl-qm-qmeta { font-size: 11px; color: var(--text-3); }
.sl-qm-price-input {
    width: 74px; border: 1px solid #ddd; border-radius: 6px; background: #fff;
    padding: 4px 6px; font-size: 12px; font-weight: 700; color: #333; text-align: right;
}
.sl-qm-price-input:focus { border-color: #F7941D; outline: none; }
/* Only ever populated when the agreed price differs from the listed one. */
.sl-qm-parts-was { font-size: 10px; color: #ef4444; font-weight: 700; white-space: nowrap; }
.sl-qm-parts-was:empty { display: none; }
.sl-qm-total-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 8px; padding-top: 9px; border-top: 1px solid #eee;
    font-size: 12px; font-weight: 700; color: #666;
}
.sl-qm-total-row strong { font-size: 15px; color: #333; }
.sl-qm-toggle {
    display: flex; align-items: center; gap: 9px; cursor: pointer;
    padding: 10px 12px; border: 1px solid #F7941D; border-radius: 8px; background: #fff5ee;
    font-size: 12px; color: #333; line-height: 1.4;
}
.sl-qm-toggle input { width: 16px; height: 16px; flex-shrink: 0; accent-color: #F7941D; cursor: pointer; }
.sl-qm-create-btn { width: 100%; padding: 12px; background: #F7941D; border: none; border-radius: 8px; font-size: 13px; font-weight: 800; color: var(--apc-black); cursor: pointer; margin-top: 8px; }
.sl-qm-create-btn:hover { background: #DF7D0F; }
.sl-qm-section { margin-bottom: 14px; }
.sl-qm-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-3); margin-bottom: 6px; }
.sl-qm-input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; color: #333; margin-bottom: 6px; }
.sl-qm-input:last-child { margin-bottom: 0; }
.sl-qm-input:focus { outline: none; border-color: #F7941D; }
.sl-qm-inline-fields { display: flex; gap: 10px; }
.sl-qm-inline-fields > div { flex: 1; }
.sl-qm-parts-list { border: 1px solid #eee; border-radius: 6px; overflow: hidden; }
.sl-qm-parts-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid #f4f4f4; font-size: 12px; }
.sl-qm-parts-row:last-child { border-bottom: none; }
.sl-qm-parts-title { flex: 1; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-qm-parts-stock { color: var(--text-3); font-size: 11px; flex-shrink: 0; }
.sl-qm-parts-price { color: #F7941D; font-weight: 700; flex-shrink: 0; }

/* Quote Detail — big document-style editable view (mirrors the printed A4 layout) */
.sl-quote-modal--doc { width: 900px; max-width: 94vw; max-height: 92vh; }
.sl-quote-modal--doc .sl-qm-body { padding: 0; background: #f2f2f7; }
.sl-qd-doc-page { max-width: 800px; margin: 0 auto; padding: 30px 34px 20px; background: #fff; }
.sl-qd-doc-top { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 3px solid #F7941D; padding-bottom: 16px; }
.sl-qd-doc-biz { display: flex; gap: 12px; align-items: flex-start; }
.sl-qd-doc-biz img { max-height: 56px; max-width: 140px; object-fit: contain; }
.sl-qd-doc-biz-name { font-size: 19px; font-weight: 800; color: #222; letter-spacing: -0.01em; }
.sl-qd-doc-biz-meta { font-size: 11px; color: #888; line-height: 1.6; margin-top: 3px; }
.sl-qd-doc-title-block { text-align: right; }
.sl-qd-doc-title { font-size: 26px; font-weight: 800; color: #F7941D; letter-spacing: 0.02em; line-height: 1; }
.sl-qd-doc-meta { font-size: 12px; color: #555; margin-top: 8px; line-height: 1.7; }
.sl-qd-doc-meta b { color: #222; }
.sl-qd-doc-parties { margin: 20px 0 16px; }
.sl-qd-doc-party-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: #999; margin-bottom: 6px; }
.sl-qd-doc-party-row { display: flex; gap: 8px; margin-bottom: 5px; }
.sl-qd-doc-party-row .sl-qd-doc-input { max-width: 260px; }
.sl-qd-doc-input { border: 1px solid transparent; background: none; padding: 4px 6px; margin: -4px -6px 1px; border-radius: 5px; font-size: 13px; color: #333; font-family: inherit; width: 100%; box-sizing: border-box; }
.sl-qd-doc-input:hover { background: #fafafa; }
.sl-qd-doc-input:focus { outline: none; background: #fff8f2; border-color: #F7941D; }
.sl-qd-doc-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.sl-qd-doc-table thead th { background: #1a1a2e; color: #fff; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; text-align: left; padding: 9px 10px; }
.sl-qd-doc-table thead th.c { text-align: center; } .sl-qd-doc-table thead th.r { text-align: right; }
.sl-qd-doc-table tbody td { padding: 8px 10px; border-bottom: 1px solid #eee; font-size: 13px; vertical-align: middle; }
.sl-qd-doc-table tbody td.c { text-align: center; } .sl-qd-doc-table tbody td.r { text-align: right; white-space: nowrap; }
.sl-qd-doc-sku { display: block; font-size: 10px; color: #999; margin-top: 2px; }
.sl-qd-doc-price-input { width: 76px; text-align: right; }
.sl-qd-doc-del { background: none; border: none; color: #ccc; font-size: 16px; cursor: pointer; padding: 0 2px; line-height: 1; }
.sl-qd-doc-del:hover { color: #ef4444; }
.sl-qd-doc-totals { margin-top: 14px; margin-left: auto; width: 260px; }
.sl-qd-doc-totals .row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 13px; color: #555; }
.sl-qd-doc-totals .row input { width: 80px; }
.sl-qd-doc-totals .grand { border-top: 2px solid #1a1a2e; margin-top: 4px; padding-top: 8px; font-size: 17px; font-weight: 800; color: #222; }
.sl-qd-doc-totals .gst { font-size: 11px; color: #999; padding-top: 0; }
.sl-qd-payment-row { margin-top: 6px; padding-top: 10px; border-top: 1px dashed #ddd; }
.sl-qd-payment-select { width: 150px; font-size: 12px; font-weight: 700; text-align: right; cursor: pointer; }
.sl-qd-doc-totals .balance { color: #ef4444; }
.sl-qd-doc-totals .balance.paid { color: #22c55e; }
.sl-qd-doc-notes-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: #999; margin: 20px 0 6px; }
.sl-qd-doc-notes { width: 100%; box-sizing: border-box; min-height: 44px; resize: vertical; border: 1px solid transparent; background: none; padding: 4px 6px; margin: -4px -6px; border-radius: 5px; font-size: 12px; color: #777; font-family: inherit; }
.sl-qd-doc-notes:hover { background: #fafafa; }
.sl-qd-doc-notes:focus { outline: none; background: #fff8f2; border-color: #F7941D; }

/* ─── Worker View ────────────────────────────────────────────────────────── */
.w-header { background: #1a1a2e; color: #fff; padding: 20px 16px 16px; position: sticky; top: 0; z-index: 10; }
.w-header-logo { font-size: 10px; font-weight: 800; color: #F7941D; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 6px; }
.w-vehicle-title { font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.w-stock-num { font-size: 12px; color: var(--text-3); margin-bottom: 10px; }
.w-progress { margin-top: 10px; }
.w-progress-bar { height: 6px; background: rgba(255,255,255,0.15); border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.w-progress-fill { height: 100%; background: #22c55e; border-radius: 3px; transition: width 0.4s; }
.w-progress-text { font-size: 12px; color: rgba(255,255,255,0.6); }
.w-parts-list { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.w-part-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--elev-1); transition: opacity 0.2s; }
.w-part-card.w-done { opacity: 0.55; }
.w-part-header { display: flex; align-items: center; gap: 12px; padding: 14px; cursor: pointer; }
.w-check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #ddd; flex-shrink: 0; position: relative; }
.w-check.checked { background: #22c55e; border-color: #22c55e; }
.w-check.checked::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; }
.w-part-info { flex: 1; min-width: 0; }
.w-part-name { font-size: 14px; font-weight: 700; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-part-zone { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.w-grade-badge { font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 6px; flex-shrink: 0; }
.w-expand-chevron { color: #ccc; font-size: 20px; flex-shrink: 0; transition: transform 0.2s; }
.w-part-body { display: none; padding: 0 14px 16px; border-top: 1px solid #f0f0f0; }
.w-part-body.open { display: block; }
.w-section-label { font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px; margin: 14px 0 8px; }
.w-grade-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.w-grade-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border: 2px solid #eee; border-radius: 10px; background: #fafafa; cursor: pointer; transition: border-color 0.15s; }
.w-grade-btn strong { font-size: 18px; font-weight: 800; color: #333; }
.w-grade-btn span { font-size: 10px; color: var(--text-3); }
.w-grade-btn.active { border-color: #F7941D; background: rgba(247,148,29,0.06); }
.w-grade-btn.active strong { color: #F7941D; }
.w-notes { width: 100%; box-sizing: border-box; border: 1.5px solid #eee; border-radius: 8px; padding: 10px; font-size: 13px; font-family: inherit; resize: vertical; }
.w-notes:focus { outline: none; border-color: #F7941D; }
.w-photos-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; min-height: 4px; }
.w-photo-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid #eee; }
.w-add-photo-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; background: #f4f4f4; border: 1.5px dashed #ccc; border-radius: 8px; font-size: 13px; font-weight: 600; color: #555; cursor: pointer; margin-bottom: 12px; }
.w-done-btn { width: 100%; padding: 14px; border: none; border-radius: 10px; background: #22c55e; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }
.w-done-btn.w-undone { background: #f0f0f0; color: var(--text-3); }
.w-submit-wrap { padding: 0 12px 16px; }
.w-submit-btn { width: 100%; padding: 18px; border: none; border-radius: 12px; background: #F7941D; color: var(--apc-black); font-size: 17px; font-weight: 800; cursor: pointer; }
.w-empty { text-align: center; padding: 80px 24px; }
.w-empty-ico { font-size: 48px; color: #ef4444; margin-bottom: 16px; }
.w-empty-title { font-size: 22px; font-weight: 800; color: #333; margin-bottom: 8px; }
.w-empty-sub { font-size: 14px; color: #666; line-height: 1.5; margin-bottom: 28px; }
.w-close-btn { background: #F7941D; color: var(--apc-black); border: none; border-radius: 10px; padding: 14px 32px; font-size: 15px; font-weight: 700; cursor: pointer; }
@media (min-width: 700px) {
    .w-parts-list { max-width: 680px; margin: 0 auto; }
    .w-grade-row { grid-template-columns: repeat(4, 1fr); }
}

/* ─── Dashboard — Dismantling Jobs ──────────────────────────────────────── */
.dash-jobs-refresh { background: none; border: none; font-size: 16px; color: var(--text-3); cursor: pointer; padding: 2px 4px; line-height: 1; }
.dash-jobs-refresh:hover { color: #F7941D; }
.dash-jobs-list { padding: 4px 0; }
.dash-job-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; border-radius: 8px; margin: 0 -16px; transition: background 0.12s; }
.dash-job-row:hover { background: #f8f8f8; }
.dash-job-row + .dash-job-row { border-top: 1px solid #f0f0f0; }
.dash-job-info { flex: 1; min-width: 0; }
.dash-job-title { font-size: 14px; font-weight: 700; color: #333; }
.dash-job-meta { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.dash-job-status { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.4px; flex-shrink: 0; }
.job-status-stripping { background: #fef9c3; color: #92400e; }
.job-status-ready { background: #dcfce7; color: #15803d; }
.dash-job-arrow { color: #ccc; font-size: 18px; flex-shrink: 0; }
.dash-job-qr-btn { flex-shrink: 0; padding: 4px 10px; background: #f4f4f4; border: 1px solid #ddd; border-radius: 6px; font-size: 11px; font-weight: 700; color: #555; cursor: pointer; }
.dash-job-qr-btn:hover { background: #e8e8e8; }

/* Wanted Matches card */
.dash-wanted-list { padding: 4px 0; }
.dash-wanted-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
.dash-wanted-row:last-child { border-bottom: none; }
.dash-wanted-info { flex: 1; min-width: 0; }
.dash-wanted-part { font-size: 14px; font-weight: 700; color: #333; }
.dash-wanted-meta { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.dash-wanted-budget { color: #F7941D; font-weight: 700; }
.dash-wanted-match { font-size: 11px; color: var(--text-3); margin-top: 4px; }
.dash-wanted-match span { color: #666; font-weight: 600; }
.dash-wanted-btn { flex-shrink: 0; padding: 7px 14px; background: #F7941D; color: var(--apc-black); border: none; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; transition: background 0.15s; }
.dash-wanted-btn:hover:not(:disabled) { background: #DF7D0F; }

/* ─── Vehicle Intake overlay ─────────────────────────────────────────────── */
.vi-sheet {
    background: white; border-radius: 16px; width: 100%; max-width: 900px;
    max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
    box-shadow: var(--elev-4);
}
.vi-hdr { display: flex; align-items: center; padding: 18px 24px; border-bottom: 1px solid #eee; flex-shrink: 0; }
.vi-title { flex: 1; font-size: 16px; font-weight: 800; color: #1a1a2e; }
.vi-close { background: none; border: none; font-size: 18px; color: var(--text-3); cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.vi-close:hover { background: #f4f4f4; color: #333; }
.vi-body { flex: 1; overflow-y: auto; padding: 20px 24px; }
.vi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vi-footer { display: flex; gap: 10px; padding: 16px 24px; border-top: 1px solid #eee; flex-shrink: 0; justify-content: flex-end; }
.vi-cancel { padding: 10px 20px; background: #f4f4f4; border: none; border-radius: 8px; font-size: 14px; font-weight: 700; color: #555; cursor: pointer; }
.vi-cancel:hover { background: #e8e8e8; }
.vi-save { padding: 10px 24px; background: #F7941D; color: var(--apc-black); border: none; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; }
.vi-save:hover:not(:disabled) { background: #DF7D0F; }
.vi-save:disabled { opacity: 0.6; cursor: default; }

/* ─── Vehicle Stock Card overlay ─────────────────────────────────────────── */
.vsc-header {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 24px; background: #fff; color: #333; flex-shrink: 0;
    border-bottom: 1px solid #eee;
}
.vsc-header-title { flex: 1; font-size: 16px; font-weight: 800; letter-spacing: -0.2px; color: #1a1a2e; }
.vsc-close-btn { flex-shrink: 0; background: #f4f4f4; border: none; border-radius: 50%; width: 32px; height: 32px; color: var(--text-3); font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.vsc-close-btn:hover { background: #eee; color: #333; }
.vsc-header-actions { display: flex; gap: 10px; }
.vsc-action-btn { padding: 7px 16px; background: #F7941D; color: var(--apc-black); border: none; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; }
.vsc-action-btn:hover { background: #DF7D0F; }
/* Financial-summary list-part CTAs (replace the far-away header button) */
.vsc-list-actions { display: flex; gap: 10px; margin-top: 14px; }
.vsc-list-btn { flex: 1; padding: 13px 14px; background: #F7941D; color: var(--apc-black); border: none; border-radius: 8px; font-size: 13px; font-weight: 800; cursor: pointer; font-family: inherit; box-shadow: 0 4px 12px rgba(247,148,29,0.2); transition: background 0.15s; }
.vsc-list-btn:hover { background: #DF7D0F; }
.vsc-list-btn--primary { flex: 1.5; }
/* Desktop: the stock card is a MODAL you open over the Vehicle Stock list and close
   back out of — so it floats as a card (top+bottom gap, rounded, shadow) like the
   listing detail, not flush like the destination pages. --hdr-total-h is the
   header+orange-strip height, kept in sync by updateHeaderOffset(). */
@media (min-width: 900px) {
    #vehicleStockCardOverlay {
        top: calc(var(--hdr-total-h, 143px) + 10px) !important;
        left: max(0px, calc(50vw - 800px)) !important;
        right: max(0px, calc(50vw - 800px)) !important;
        width: auto !important;
        bottom: 16px !important;
        border-radius: 16px !important;
        box-shadow: var(--elev-3) !important;
        overflow: hidden;
    }
}

.vsc-body { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 16px; max-width: 1400px; width: 100%; margin: 0 auto; box-sizing: border-box; }

.vsc-photos { display: flex; gap: 10px; flex-wrap: wrap; }
.vsc-photo { width: 140px; height: 100px; object-fit: cover; border-radius: 10px; cursor: pointer; border: 1px solid #eee; transition: transform 0.15s; }
.vsc-photo:hover { transform: scale(1.03); }

/* VSC photo section header (view + edit) */
.vsc-photo-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.vsc-photo-edit-btn { background: none; border: 1.5px solid #F7941D; color: #F7941D; border-radius: 6px; padding: 4px 12px; font-size: 11px; font-weight: 700; cursor: pointer; font-family: inherit; }
.vsc-photo-save-btn { background: #F7941D; border: none; color: var(--apc-black); border-radius: 6px; padding: 4px 14px; font-size: 11px; font-weight: 800; cursor: pointer; font-family: inherit; }
.vsc-photos-empty { color: var(--text-3); font-size: 13px; padding: 14px 0; }

/* Edit mode: removable tiles + add tile */
.vsc-photo-edit-tile { position: relative; width: 140px; height: 100px; }
.vsc-photo-edit-tile img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; border: 1px solid #eee; }
.vsc-photo-remove { position: absolute; top: -7px; right: -7px; width: 24px; height: 24px; border-radius: 50%; background: #ef4444; color: #fff; border: 2px solid #fff; font-size: 12px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
/* Main-photo control on stock card tiles. Mirrors the sell form's star: filled = this IS the
   main photo, hollow = click to promote. Position 0 is the main photo, so promoting is a move
   to the front rather than a separate flag to keep in sync. */
.vsc-photo-main {
    position: absolute; bottom: 5px; left: 5px;
    background: rgba(0,0,0,0.55); color: #fff; border: none;
    font-size: 9px; font-weight: 800; letter-spacing: 0.3px;
    padding: 2px 6px; border-radius: 4px; cursor: pointer; line-height: 1.4;
}
.vsc-photo-main:hover { background: rgba(0,0,0,0.75); }
.vsc-photo-main.is-main { background: #F7941D; color: var(--apc-black); cursor: default; }
.vsc-photo-add-tile { width: 140px; height: 100px; border: 2px dashed #ccc; border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-3); font-size: 13px; font-weight: 700; background: #fafafa; transition: border-color 0.15s, color 0.15s; }
.vsc-photo-add-tile:hover { border-color: #F7941D; color: #F7941D; }

.vsc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vsc-card { background: white; border-radius: 14px; padding: 20px 24px; }
.vsc-parts-card { grid-column: 1/-1; }
.vsc-section-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-3); margin-bottom: 14px; display: block; }

.vsc-dl { display: flex; flex-direction: column; gap: 0; }
.vsc-dl-row { display: flex; padding: 8px 0; border-bottom: 1px solid #f5f5f5; }
.vsc-dl-row:last-child { border-bottom: none; }
.vsc-dl-row dt { width: 140px; flex-shrink: 0; font-size: 12px; color: var(--text-3); font-weight: 600; }
.vsc-dl-row dd { flex: 1; font-size: 13px; font-weight: 700; color: #333; }

.vsc-profit-banner { margin-top: 16px; padding: 14px 16px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; background: #f5f5f5; }
.vsc-profit-pos { background: #dcfce7; }
.vsc-profit-neg { background: #fee2e2; }
.vsc-profit-label { font-size: 12px; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: 0.4px; }
.vsc-profit-val { font-size: 20px; font-weight: 900; color: #333; }
.vsc-profit-pos .vsc-profit-val { color: #15803d; }
.vsc-profit-neg .vsc-profit-val { color: #dc2626; }
.vsc-set-cost-btn { margin-top: 12px; width: 100%; padding: 9px; background: #f4f4f4; border: 1px solid #e0e0e0; border-radius: 8px; font-size: 12px; font-weight: 700; color: #555; cursor: pointer; }
.vsc-set-cost-btn:hover { background: #e8e8e8; }

.vsc-parts-hdr { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.vsc-parts-summary { display: flex; gap: 8px; margin-left: auto; }
.vsc-parts-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.vsc-parts-table th { text-align: left; font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.4px; padding: 0 12px 10px 0; border-bottom: 1px solid #f0f0f0; }
.vsc-part-row { cursor: pointer; border-bottom: 1px solid #f5f5f5; }
.vsc-part-row:hover { background: #fafafa; }
.vsc-part-row td { padding: 10px 12px 10px 0; vertical-align: middle; }
.vsc-part-name { font-weight: 600; color: #333; max-width: 340px; }
.vsc-part-sn { color: var(--text-3); font-size: 12px; }
.vsc-part-price { font-weight: 700; color: #333; }
.vsc-status-chip { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; }
.vsc-part-active { background: #e0f2fe; color: #0369a1; }
.vsc-part-pending { background: #fef9c3; color: #92400e; }
.vsc-part-sold { background: #dcfce7; color: #15803d; }
.vsc-status-tap { cursor: pointer; -webkit-tap-highlight-color: rgba(0,0,0,0.06); }
.vsc-status-tap:active { opacity: 0.75; }

/* VSC Add Part */
.vsc-add-part-btn { flex-shrink: 0; background: none; border: 1.5px solid var(--apc-orange); color: var(--apc-orange); border-radius: 999px; padding: 6px 16px; font-size: 12px; font-weight: 800; cursor: pointer; font-family: inherit; white-space: nowrap; transition: background 0.15s, color 0.15s; }
.vsc-add-part-btn:hover { background: var(--apc-orange); color: var(--apc-black); }
.vsc-add-part-btn:active { transform: translateY(1px); }

/* Taxonomy part-name autocomplete (listing title + wanted request) */
.part-ac-wrap { position: relative; display: block; }
.part-ac-box { position: absolute; top: 100%; left: 0; right: 0; z-index: 60; background: #fff; border: 1.5px solid #e0e0e0; border-top: none; border-radius: 0 0 8px 8px; max-height: min(360px, 50vh); overflow-y: auto; box-shadow: 0 8px 20px rgba(0,0,0,0.12); display: none; }
.part-ac-item { padding: 10px 12px; font-size: 14px; color: #333; cursor: pointer; border-bottom: 1px solid #f5f5f5; }
.part-ac-item:last-child { border-bottom: none; }
.part-ac-item:hover, .part-ac-item.active { background: #fff5ee; color: #DF7D0F; font-weight: 600; }
.vsc-view-link { color: #F7941D; text-decoration: none; font-size: 11px; font-weight: 700; opacity: 0.65; margin-left: 2px; }
.vsc-view-link:hover { opacity: 1; }

/* EDW step 1 price field */
.edw-price-wrap { display: flex; align-items: center; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; background: white; }
.edw-price-sym { padding: 0 10px; font-size: 14px; font-weight: 700; color: var(--text-3); background: #f8f8f8; border-right: 1px solid #ddd; line-height: 44px; }
.edw-price-inp { border: none !important; border-radius: 0 !important; flex: 1; }

/* Intel row — two-column layout below the charts */
.dash-intel-row {
    display: grid;
    grid-template-columns: 1fr 1.8fr;
    gap: 14px;
    margin-bottom: 18px;
    align-items: start;
}
.dash-intel-left { display: flex; flex-direction: column; gap: 14px; }
.dash-intel-right { height: 100%; }

/* Vehicle Stock Search widget */
.dash-vsearch-add { padding: 4px 10px; background: #F7941D; color: var(--apc-black); border: none; border-radius: 6px; font-size: 11px; font-weight: 700; cursor: pointer; }
.dash-vsearch-add:hover { background: #DF7D0F; }
.dash-vsearch-input {
    display: block; width: 100%; box-sizing: border-box;
    padding: 9px 14px; border: 1.5px solid #e8e8e8; border-radius: 10px;
    font-size: 14px; color: #333; background: #f8f8f8; margin-bottom: 8px; outline: none;
}
.dash-vsearch-input:focus { border-color: #F7941D; background: #fff; }
.dash-vsearch-results { overflow-y: auto; max-height: 180px; }
.dash-vsearch-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid #f5f5f5; cursor: pointer; border-radius: 6px; }
.dash-vsearch-row:last-child { border-bottom: none; }
.dash-vsearch-row:hover { background: #fafafa; }
.dash-vsearch-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.dash-vsearch-name { font-size: 13px; font-weight: 700; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-vsearch-sn { font-size: 11px; color: var(--text-3); flex-shrink: 0; }
.dash-vsearch-scrapped { font-size: 10px; font-weight: 700; color: #dc2626; background: #fee2e2; padding: 2px 6px; border-radius: 10px; flex-shrink: 0; }
.dash-vsearch-empty { padding: 20px 4px; color: var(--text-3); font-size: 13px; }
.dash-vsearch-more { padding: 8px 4px; color: var(--text-3); font-size: 11px; font-style: italic; }

/* Dashboard summary cards — stat row + "View all" link (Vehicle Stock, Members Wanted) */
.dash-vs-stats { display: flex; gap: 8px; margin: 4px 0 12px; }
.dash-vs-stat { flex: 1; background: #f7f7fb; border-radius: 8px; padding: 10px 8px; text-align: center; }
.dash-vs-stat-num { display: block; font-size: 20px; font-weight: 800; color: #333; line-height: 1; }
.dash-vs-stat-lbl { display: block; font-size: 11px; color: var(--text-3); margin-top: 4px; }
.dash-viewall-btn { width: 100%; margin-top: 12px; padding: 9px; background: #fff; color: #1d4ed8; border: 1px solid #dbeafe; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; }
.dash-viewall-btn:hover { background: #eff6ff; }
.pro-wt-sub { margin-left: 14px; color: var(--text-3); font-size: 12px; font-weight: 500; }

/* Vehicles in Stock card */
.dash-sv-list { padding: 4px 0; }
.dash-sv-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid #f0f0f0; }
.dash-sv-row:last-child { border-bottom: none; }
.dash-sv-info { flex: 1; min-width: 0; }
.dash-sv-title { font-size: 14px; font-weight: 700; color: #333; }
.dash-sv-meta { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.dash-sv-btn { flex-shrink: 0; padding: 7px 14px; background: #F7941D; color: var(--apc-black); border: none; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; }
.dash-sv-btn:hover { background: #DF7D0F; }
.dash-sv-arrow { color: #ccc; font-size: 20px; flex-shrink: 0; }

/* Vehicle Stock list — define each row so a vehicle reads together with its status
   and Dismantle across the wide row (white surface, clear separators, hover track). */
#proVsBody .dash-sv-list { background: #fff; border: 1px solid #eee; border-radius: 10px; overflow: hidden; padding: 0; }
#proVsBody .dash-sv-row { padding: 12px 16px; cursor: pointer; transition: background 0.12s ease; border-bottom: 1px solid #eee; }
#proVsBody .dash-sv-row:last-child { border-bottom: none; }
#proVsBody .dash-sv-row:hover { background: #f7f8fa; }
.dash-sv-filter-row { display: flex; gap: 6px; margin-bottom: 10px; }
.dash-sv-pill { padding: 5px 13px; border: 1px solid #e0e0e0; border-radius: 20px; background: white; font-size: 12px; font-weight: 700; color: #666; cursor: pointer; }
.dash-sv-pill.active { background: #1a1a2e; color: white; border-color: #1a1a2e; }
.dash-sv-scrapped-chip { display: inline-block; padding: 2px 8px; background: #fee2e2; color: #dc2626; border-radius: 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; margin-left: 6px; vertical-align: middle; }

/* Vehicle Stock page — per-row dismantle action + empty state */
.pro-vs-strip-btn { padding: 6px 14px; background: #fff; color: #F7941D; border: 1px solid #F7941D; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.pro-vs-strip-btn:hover { background: #F7941D; color: var(--apc-black); }
.pro-vs-empty { text-align: center; padding: 60px 20px; }
.pro-vs-empty-title { font-size: 16px; font-weight: 800; color: #333; margin-bottom: 6px; }
.pro-vs-empty-sub { font-size: 13px; color: var(--text-3); margin-bottom: 18px; }
.pro-vs-empty .pro-lst-new-btn { display: inline-block; }

/* Vehicle stock card — lifecycle status chips */
.vsc-s-stock  { background: #fef9c3; color: #92400e; }
.vsc-s-strip  { background: #dbeafe; color: #1e40af; }
.vsc-s-ready  { background: #ede9fe; color: #6d28d9; }
.vsc-s-pub    { background: #dcfce7; color: #15803d; }
.vsc-s-done   { background: #f3f4f6; color: #6b7280; }
.vsc-scrapped-badge { display: inline-block; padding: 3px 10px; background: #fee2e2; color: #dc2626; border-radius: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; margin-left: 10px; vertical-align: middle; }
.vsc-shell-row { margin-top: 12px; }
.vsc-shell-scrap-btn { width: 100%; padding: 9px; background: #fff1f2; border: 1px solid #fecaca; border-radius: 8px; font-size: 12px; font-weight: 700; color: #dc2626; cursor: pointer; }
.vsc-shell-scrap-btn:hover { background: #fee2e2; }
.vsc-shell-scrapped { font-size: 12px; font-weight: 700; color: #dc2626; padding: 8px 0; }

/* Members Wanted card */
.dash-wr-search {
    display: block; width: 100%; box-sizing: border-box;
    padding: 8px 12px; border: 1px solid #e8e8e8; border-radius: 8px;
    font-size: 13px; color: #333; background: #f8f8f8;
    margin-bottom: 10px; outline: none;
}
.dash-wr-search:focus { border-color: #F7941D; background: #fff; }
.dash-wr-list { overflow-y: auto; max-height: 260px; }
.dash-wr-empty { padding: 20px 0; color: var(--text-3); font-size: 13px; text-align: center; }
.dash-wr-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
.dash-wr-row:last-child { border-bottom: none; }
.dash-wr-info { flex: 1; min-width: 0; }
.dash-wr-part { font-size: 13px; font-weight: 700; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-wr-meta { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.dash-wr-budget { color: #F7941D; font-weight: 700; }
.dash-wr-btn { flex-shrink: 0; padding: 5px 11px; background: #fff; color: var(--apc-orange-ink); border: 1.5px solid var(--apc-orange); border-radius: 8px; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; }   /* secondary (was black filled) — audit button remap */
.dash-wr-btn:hover { background: var(--apc-orange-light, #fff4e6); }
/* Members Wanted — per-request match badges (answered by you / already listed) */
.dash-wr-match { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.wr-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; letter-spacing: 0.2px; white-space: nowrap; }
.wr-badge-mine  { background: #e7f7ee; color: #1a9e5c; }
.wr-badge-count { background: #fff2e8; color: #DF7D0F; }
#proWtBody .dash-wr-row.dash-wr-answered { background: #f5fbf7; border-color: #d9f0e3; }

/* Pro Listings View */
.pro-lst-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 24px;
    background: white;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.pro-lst-toolbar-left { display: flex; align-items: center; gap: 0; flex-shrink: 0; }
.pro-lst-toolbar-right { display: flex; align-items: center; gap: 10px; flex: 1; justify-content: flex-end; min-width: 0; }
.pro-lst-title { font-size: 16px; font-weight: 800; color: #222; letter-spacing: -0.2px; }
.pro-lst-count { font-size: 12px; color: var(--text-3); font-weight: 600; white-space: nowrap; }
.pro-lst-new-btn { padding: 8px 16px; background: #F7941D; color: var(--apc-black); border: none; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.pro-lst-new-btn:hover { background: #DF7D0F; }
.pro-lst-body { flex: 1; overflow-y: auto; padding: 20px 24px; }

/* Quotes & Invoices archive page */
.qa-toolbar { flex-wrap: wrap; gap: 8px; }
.qa-date { padding: 6px 8px; border: 1px solid #ddd; border-radius: 8px; font-size: 12px; color: var(--text-2); background: #fff; }
.qa-filter { display: flex; gap: 4px; flex: 0 0 auto; }
.qa-filter .sl-qp-filter-btn { flex: 0 0 auto; }
.qa-export { position: relative; flex-shrink: 0; }
.qa-export-btn { padding: 7px 14px; border: 1px solid #ddd; border-radius: 8px; background: #fff; color: var(--text-1); font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.qa-export-btn:hover { background: #f8f8f8; }
.qa-export-menu { position: absolute; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 10; overflow: hidden; min-width: 240px; }
.qa-export-menu button { display: block; width: 100%; text-align: left; padding: 10px 14px; border: none; background: none; font-size: 12.5px; color: var(--text-1); cursor: pointer; white-space: nowrap; }
.qa-export-menu button:hover { background: #f7f7f7; }
.qa-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 13px; border: 1px solid #eee; }
.qa-table thead th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-3); font-weight: 800; padding: 10px 14px; border-bottom: 1px solid #eee; background: #fafafa; position: sticky; top: 0; }
.qa-table tbody td { padding: 11px 14px; border-bottom: 1px solid #f2f2f2; color: var(--text-1); }
.qa-table tbody tr { cursor: pointer; }
.qa-table tbody tr:hover { background: #fff5ee; }
.qa-table .qa-r { text-align: right; }
.qa-num { font-weight: 700; color: #222; white-space: nowrap; }
.qa-empty { padding: 44px 24px; text-align: center; color: var(--text-3); font-size: 13px; }
.qa-status-filter { padding: 6px 8px; border: 1px solid #ddd; border-radius: 8px; font-size: 12px; color: var(--text-2); background: #fff; font-weight: 600; cursor: pointer; }
.sl-quote-badge.awaiting { background: #fef3c7; color: #b45309; }
.sl-quote-badge.overdue  { background: #fee2e2; color: #b91c1c; }
.sl-quote-badge.paid     { background: #dcfce7; color: #15803d; }
.sl-quote-badge.expired  { background: #f4f4f4; color: #999; }

/* "List a Part" already sits in the desktop header, so the My Listings toolbar
   "+ New Listing" is redundant on desktop — hide it there. Kept on mobile, where
   the header button is hidden. Vehicle Stock's "+ Add Vehicle" is unaffected. */
@media (min-width: 900px) {
    #proListingsView .pro-lst-new-btn { display: none; }
}

/* The Wanted list was capped at 260px for the old dashboard card — let the page
   body own the scroll so the list uses full page height. */
#proWtBody .dash-wr-list { max-height: none; overflow: visible; }

/* Members Wanted uses the full 1600px frame as a 2-column board of white cards —
   Pro users mostly search/filter rather than scroll, so density beats a tall column. */
@media (min-width: 900px) {
    /* Match the toolbar's full-width bar so the cards line up with the title bar edges */
    #proWtBody { padding-left: 0; padding-right: 0; }
    #proWtBody .dash-wr-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 20px;
        align-content: start;
    }
    #proWtBody .dash-wr-row {
        background: #fff;
        border: 1px solid #eee;
        border-radius: 10px;
        padding: 12px 14px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
}

/* Wanted-request photos open in the shared lightbox — signal they're tappable */
.dash-wr-thumb, .gh-need-thumb { cursor: zoom-in; }
.dash-wr-thumb:hover, .gh-need-thumb:hover { opacity: 0.85; }

/* ─── Job Review — worker photos + banners ──────────────────────────────── */
.edw-review-photos { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.edw-review-photo { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid #eee; cursor: pointer; }
.edw-review-no-photo { font-size: 12px; color: #bbb; margin: 6px 0 8px; }
.edw-review-photo-wrap { position: relative; width: 80px; height: 80px; }
.edw-review-photo-del { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border: none; border-radius: 50%; background: rgba(26,26,46,0.88); color: #fff; font-size: 15px; line-height: 20px; padding: 0; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.25); }
.edw-review-add-photo { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; border: 2px dashed #ddd; border-radius: 8px; color: #F7941D; font-size: 13px; font-weight: 700; cursor: pointer; text-align: center; }
.edw-review-add-photo:hover { border-color: #F7941D; }
.jr-banner { font-size: 13px; font-weight: 600; padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; }
.jr-done { background: #dcfce7; color: #15803d; }
.jr-pending { background: #fef9c3; color: #92400e; }

/* ================================================================
   WAREHOUSE DRAWER
   ================================================================ */
.wh-tab-bar { display: flex; gap: 2px; background: rgba(0,0,0,0.07); border-radius: 8px; padding: 3px; }
.wh-tab { background: none; border: none; color: var(--text-3); font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 6px; cursor: pointer; transition: background 0.15s, color 0.15s; }
.wh-tab--active { background: white; color: #1a1a2e; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.wh-tab-panel { display: flex; flex-direction: column; flex: 1; overflow-y: auto; }
.wh-panel-inner { padding: 20px; }
.wh-section-label { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-3); margin-bottom: 10px; }
.wh-batch-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wh-batch-sep { font-size: 12px; color: var(--text-3); }
.wh-input { border: 1.5px solid #ddd; border-radius: 8px; padding: 7px 10px; font-size: 13px; color: #333; outline: none; }
.wh-input:focus { border-color: var(--apc-orange); }
.wh-btn { background: var(--apc-orange); color: var(--apc-black); border: none; border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.wh-btn:hover { background: #DF7D0F; }
.wh-btn--full { width: 100%; padding: 12px; }
.wh-textarea { width: 100%; min-height: 100px; border: 1.5px solid #ddd; border-radius: 8px; padding: 10px 12px; font-size: 13px; color: #333; resize: vertical; outline: none; box-sizing: border-box; font-family: inherit; }
.wh-textarea:focus { border-color: var(--apc-orange); }
.wh-label-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.wh-label-card { border: 1px solid #ddd; border-radius: 8px; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; background: white; }

/* Labels tab — input form + live preview, two columns on desktop, stacked on mobile */
.wh-labels-layout { display: flex; gap: 22px; align-items: stretch; flex: 1; min-height: 0; box-sizing: border-box; }
.wh-labels-form { width: 340px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }
.wh-labels-preview { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wh-card { background: #fff; border: 1px solid #ececf0; border-radius: 14px; padding: 16px 16px 18px; }
.wh-card .wh-section-label { margin-bottom: 12px; }
.wh-batch-eg { font-size: 11px; color: #aaa; margin-top: 11px; line-height: 1.5; }
.wh-btn--block { width: 100%; padding: 11px; margin-top: 14px; }
.wh-labels-empty {
    flex: 1;
    border: 1.5px dashed #d8d8e0; border-radius: 14px; background: #fafafb;
    padding: 56px 30px; text-align: center; min-height: 260px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.wh-labels-empty-ico { font-size: 38px; margin-bottom: 14px; opacity: 0.85; }
.wh-labels-empty-title { font-size: 15px; font-weight: 800; color: var(--text-2); margin-bottom: 7px; }
.wh-labels-empty-sub { font-size: 12.5px; color: var(--text-3); line-height: 1.55; max-width: 340px; }
.wh-labels-actions { display: flex; gap: 10px; margin-top: 18px; }
.wh-labels-clear { background: none; border: 1.5px solid #ddd; border-radius: 8px; padding: 0 18px; font-size: 13px; font-weight: 700; color: #888; cursor: pointer; white-space: nowrap; }
.wh-labels-clear:hover { border-color: #bbb; color: #666; }
/* Bin library — desktop-only panel (the Labels tab is hidden on mobile), so mouse-sized targets. */
.wh-binlib-note { font-size: 11px; color: var(--text-3); line-height: 1.5; margin: -6px 0 12px; }
.wh-binlib-list { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; }
.wh-binlib-row { display: flex; align-items: center; gap: 10px; background: #fafafa; border: 1px solid #eee; border-radius: 8px; padding: 8px 6px 8px 10px; }
.wh-binlib-code { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wh-binlib-count { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-3); white-space: nowrap; }
.wh-binlib-count--used { color: var(--apc-orange); }
.wh-binlib-del { background: none; border: none; color: #bbb; font-size: 17px; line-height: 1; cursor: pointer; padding: 6px 9px; border-radius: 6px; flex-shrink: 0; }
.wh-binlib-del:hover { color: #ef4444; background: #fff1f1; }
.wh-binlib-empty { font-size: 12px; color: var(--text-3); text-align: center; padding: 16px 4px; line-height: 1.5; }
@media (max-width: 899px) {
    .wh-labels-layout { flex-direction: column; }
    .wh-labels-form { width: 100%; }
}

/* Stock (Lookup) tab — search controls left, worker-scanner QR top-right, results below */
.wh-lookup-layout { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.wh-lookup-head { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 6px; }
.wh-lookup-controls { flex: 1 1 420px; min-width: 0; max-width: 680px; }
.wh-worker-qr-mini { display: flex; gap: 14px; align-items: center; flex-shrink: 0; background: #fff; border: 1px solid #ececf0; border-radius: 14px; padding: 14px 16px; max-width: 380px; }
.wh-lookup-layout .wh-lookup-results:not(:empty) { flex: 1; min-height: 0; overflow-y: auto; }
.wh-lookup-empty-state {
    display: none;
    border: 1.5px dashed #d8d8e0; border-radius: 14px; background: #fafafb;
    padding: 56px 30px; text-align: center; min-height: 240px; margin-top: 4px;
    flex-direction: column; align-items: center; justify-content: center;
}
#whLookupResults:empty ~ .wh-lookup-empty-state { display: flex; flex: 1; }
.wh-label-card-code { font-size: 13px; font-weight: 900; color: #1a1a2e; letter-spacing: 0.5px; text-align: center; }
.wh-label-qr { line-height: 0; }

/* Location lookup */
.wh-lookup-search { display: flex; gap: 8px; }
.wh-lookup-search .wh-input { flex: 1; }
.wh-lookup-hint { font-size: 11px; color: var(--text-3); margin: 8px 0 16px; line-height: 1.5; }
.wh-lookup-results { display: flex; flex-direction: column; gap: 14px; }
.wh-lk-summary { font-size: 12px; color: #666; padding: 10px 12px; background: #f8f8f8; border-radius: 8px; }
.wh-lk-summary strong { color: #1a1a2e; }
.wh-lk-bin { border: 1px solid #eee; border-radius: 10px; overflow: hidden; }
.wh-lk-bin-hd { display: flex; align-items: center; justify-content: space-between; background: #1a1a2e; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0.5px; padding: 7px 12px; }
.wh-lk-count { background: rgba(255,255,255,0.22); border-radius: 8px; padding: 1px 8px; font-size: 11px; font-weight: 700; }
.wh-lk-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid #f0f0f0; cursor: pointer; }
.wh-lk-row:first-child { border-top: none; }
.wh-lk-row:hover { background: #fafafa; }
.wh-lk-row-main { flex: 1; min-width: 0; }
.wh-lk-row-title { font-size: 13px; font-weight: 700; color: #1a1a2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wh-lk-row-meta { font-size: 11px; color: var(--text-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wh-lk-badge { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; padding: 2px 7px; border-radius: 6px; flex-shrink: 0; }
.wh-lookup-empty { font-size: 13px; color: var(--text-3); text-align: center; padding: 24px 16px; }
.wh-lookup-modes { display: flex; gap: 2px; background: rgba(0,0,0,0.06); border-radius: 8px; padding: 3px; margin-bottom: 14px; }
.wh-lk-mode { flex: 1; background: none; border: none; color: var(--text-3); font-size: 12px; font-weight: 700; padding: 7px 10px; border-radius: 6px; cursor: pointer; }
.wh-lk-mode--active { background: #fff; color: #1a1a2e; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.wh-lk-partlist { border: 1px solid #eee; border-radius: 10px; overflow: hidden; }
.wh-lk-row-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.wh-lk-binchip { font-size: 11px; font-weight: 800; color: var(--apc-orange); background: #fff3e8; border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.wh-lk-binchip--none { color: var(--text-3); background: #f0f0f0; }
.wh-lk-alerts { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.wh-lk-alert { display: inline-flex; align-items: center; gap: 6px; background: #fff8ee; border: 1px solid #ffe0bf; color: #9a5b16; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 20px; cursor: pointer; }
.wh-lk-alert--pull { background: #eef3ff; border-color: #cdd9fb; color: #3a4f86; }
.wh-lk-alert--active { box-shadow: 0 0 0 2px rgba(247,148,29,0.35); }
.wh-lk-alert-n { font-weight: 900; }

/* Put-Away scanner */
.wh-camera-wrap { position: relative; width: 100%; background: #000; overflow: hidden; flex-shrink: 0; aspect-ratio: 4/3; max-height: 300px; }
.wh-camera-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.wh-scan-corner { position: absolute; width: 22px; height: 22px; border-color: var(--apc-orange); border-style: solid; }
.wh-sc-tl { top: 14px; left: 14px; border-width: 3px 0 0 3px; }
.wh-sc-tr { top: 14px; right: 14px; border-width: 3px 3px 0 0; }
.wh-sc-bl { bottom: 14px; left: 14px; border-width: 0 0 3px 3px; }
.wh-sc-br { bottom: 14px; right: 14px; border-width: 0 3px 3px 0; }
.wh-scan-status-bar { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.65); color: white; font-size: 13px; font-weight: 700; text-align: center; padding: 8px 12px; }
.wh-scan-info { padding: 12px 15px; display: flex; flex-direction: column; gap: 8px; }
.wh-result-card { display: flex; align-items: center; gap: 12px; background: white; border: 1.5px solid #eee; border-radius: 12px; padding: 12px 14px; }
.wh-result-card--rack { border-color: var(--apc-orange); background: #fff8f2; }
.wh-result-thumb { width: 48px; height: 48px; border-radius: 8px; background: #f4f4f4; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.wh-result-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wh-result-thumb--rack { background: #fff4ec; }
.wh-result-body { flex: 1; min-width: 0; }
.wh-result-title { font-size: 14px; font-weight: 800; color: #1a1a2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wh-result-meta { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.wh-result-check { font-size: 18px; color: #22c55e; flex-shrink: 0; }
.wh-ghost-btn { display: block; width: 100%; margin-top: 20px; background: rgba(247,148,29,0.08); border: 1.5px solid var(--apc-orange); border-radius: 10px; color: var(--apc-orange); font-size: 16px; font-weight: 800; cursor: pointer; padding: 16px; text-align: center; -webkit-tap-highlight-color: transparent; }
.wh-ghost-btn:active { background: rgba(247,148,29,0.16); }
.wh-scan-hint { font-size: 11px; color: #bbb; line-height: 1.5; text-align: center; padding: 4px 0; }

/* Scanner mode switch + stocktake */
.wh-scan-stack { display: flex; flex-direction: column; gap: 8px; }
.wh-scan-modes { display: flex; gap: 6px; }
.wh-scan-mode { flex: 1; background: #f0f0f0; border: none; color: var(--text-3); font-size: 13px; font-weight: 700; padding: 10px; border-radius: 8px; cursor: pointer; }
.wh-scan-mode--active { background: var(--apc-orange); color: var(--apc-black); }
.wh-stk-rackbar { display: flex; align-items: center; gap: 8px; background: #fff4ec; border: 1px solid #ffd9bf; color: #9a5b16; font-size: 14px; font-weight: 700; padding: 10px 14px; border-radius: 10px; }
.wh-stk-rackbar strong { color: #1a1a2e; }
.wh-stk-tally { margin-left: auto; font-size: 12px; font-weight: 800; color: var(--apc-orange); }
.wh-stk-list { display: flex; flex-direction: column; }
.wh-stk-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-top: 1px solid #f2f2f2; }
.wh-stk-row:first-child { border-top: none; }
.wh-stk-check { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; color: #ccc; }
.wh-stk-row.is-found .wh-stk-check { color: #22c55e; }
.wh-stk-row.is-found .wh-stk-row-title { color: var(--text-3); text-decoration: line-through; }
.wh-stk-row.is-missing .wh-stk-check { color: #ef4444; }
.wh-stk-row.is-extra .wh-stk-check { color: #f59e0b; }
.wh-stk-row-main { flex: 1; min-width: 0; }
.wh-stk-row-title { font-size: 13px; font-weight: 700; color: #1a1a2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wh-stk-row-meta { font-size: 11px; color: var(--text-3); margin-top: 1px; }
.wh-stk-section-label { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-3); padding: 10px 2px 4px; }
.wh-stk-stat { font-size: 13px; color: #555; padding: 10px 12px; background: #f8f8f8; border-radius: 8px; }
.wh-stk-stat strong { color: #1a1a2e; }
.wh-stk-move-btn { display: block; width: 100%; margin-top: 8px; background: #fff; border: 1.5px solid var(--apc-orange); color: var(--apc-orange); font-size: 13px; font-weight: 800; padding: 11px; border-radius: 8px; cursor: pointer; }
.wh-stk-move-btn:active { background: #fff4ec; }

@media (min-width: 900px) {
    /* Floating card on the grey frame, matching the dashboard and the other overlays. */
    #warehouseDrawer { top: var(--hdr-total-h, 143px) !important; left: max(0px, calc(50vw - 800px)) !important; right: max(0px, calc(50vw - 800px)) !important; bottom: 0 !important; width: auto !important; height: auto !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; border-radius: 0 !important; box-shadow: none !important; border: none !important; overflow: hidden; }
    .wh-camera-wrap { display: none !important; }
    .wh-scan-info { display: none !important; }
    .wh-desktop-scan-note { display: block !important; }
    /* Fill the wide pane; cap the elements that would read badly stretched. */
    .wh-worker-qr-card { max-width: 680px; }
    .wh-textarea { max-width: 680px; }
}
/* Mobile: Labels generator is desktop-only (printing). Show only the scanner,
   full-screen — no tab bar, no WORKER ACCESS QR card pushing the camera down. */
@media (max-width: 899px) {
    #warehouseDrawer .wh-tab-bar { display: none; }
    #whScannerTab .wh-panel-inner { display: none; }
}
.wh-desktop-scan-note { display: none; font-size: 12px; color: var(--text-3); text-align: center; padding: 16px 20px; line-height: 1.6; }
.wh-worker-qr-card { display: flex; align-items: center; gap: 16px; background: #f8f8f8; border: 1px solid #eee; border-radius: 12px; padding: 14px; margin-bottom: 20px; }
.wh-worker-qr-wrap { flex-shrink: 0; line-height: 0; }
.wh-worker-qr-info { flex: 1; min-width: 0; }
.wh-worker-qr-title { font-size: 13px; font-weight: 800; color: #1a1a2e; margin-bottom: 4px; }
.wh-worker-qr-desc { font-size: 11px; color: var(--text-3); line-height: 1.5; }
.wh-worker-qr-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.wh-worker-qr-print { background: #F7941D; color: var(--apc-black); border: none; border-radius: 8px; padding: 7px 14px; font-size: 12px; font-weight: 800; cursor: pointer; }
.wh-worker-qr-print:hover { background: #DF7D0F; }
.wh-worker-qr-reset { background: none; border: none; color: var(--text-3); font-size: 11px; font-weight: 700; cursor: pointer; padding: 0; text-decoration: underline; }
.wh-worker-qr-reset:hover { color: #F7941D; }

.wh-batch-field { display:flex; flex-direction:column; gap:3px; }
.wh-batch-field-label { font-size:10px; font-weight:700; color: var(--text-3); text-transform:uppercase; letter-spacing:0.4px; }

/* Workshop business hours grid */
.ws-hours-grid { display: flex; flex-direction: column; gap: 6px; }
.ws-hours-row { display: flex; align-items: center; gap: 8px; }
.ws-hours-day { width: 32px; font-size: 12px; font-weight: 800; color: #555; text-transform: uppercase; letter-spacing: 0.3px; flex-shrink: 0; }
.ws-hours-times { display: flex; align-items: center; gap: 6px; flex: 1; }
.ws-hours-times input[type="time"] { border: 1.5px solid #ddd; border-radius: 6px; padding: 5px 8px; font-size: 12px; color: #333; outline: none; flex: 1; min-width: 0; }
.ws-hours-times input[type="time"]:focus { border-color: var(--apc-orange); }
.ws-hours-sep { font-size: 11px; color: var(--text-3); flex-shrink: 0; }
.ws-hours-closed { font-size: 11px; color: var(--text-3); flex: 1; }

.wsd-hours { display: flex; flex-direction: column; gap: 4px; }
.wsd-hours-row { display: flex; gap: 10px; font-size: 13px; }
.wsd-hours-day { width: 36px; font-weight: 700; color: #333; flex-shrink: 0; }
.wsd-hours-time { color: #555; }
.wsd-hours-closed { color: var(--text-3); font-style: italic; }

/* --- ONBOARDING OVERLAY --- */
.onboarding-overlay { display: none; position: fixed; inset: 0; background: #fff; z-index: 9999; overflow-y: auto; flex-direction: column; }
.onb-container { max-width: 520px; margin: 0 auto; padding-bottom: 40px; min-height: 100%; }
.onb-top-bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 15px 14px; background: #F7941D; }
.onb-logo { font-size: 20px; font-weight: 900; color: #fff; letter-spacing: 1px; }
.onb-skip-link { background: none; border: none; color: rgba(255,255,255,0.85); font-size: 13px; cursor: pointer; padding: 4px 0; text-decoration: underline; min-height: 44px; }
.onb-screen { padding: 28px 15px 20px; }
.onb-heading { font-size: 26px; font-weight: 900; color: #333; margin: 0 0 10px; }
.onb-subhead { font-size: 15px; color: #666; margin: 0 0 28px; line-height: 1.6; }
.onb-checklist { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; padding: 20px 16px; background: #f9f9f9; border-radius: 10px; border: 1px solid #eee; }
.onb-check-item { font-size: 14px; color: #333; font-weight: 500; }
.onb-btn-primary { width: 100%; padding: 16px; background: #F7941D; color: var(--apc-black); border: none; border-radius: 8px; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 12px rgba(247,148,29,0.2); min-height: 44px; margin-bottom: 12px; }
.onb-btn-primary:active { background: #DF7D0F; }
.onb-btn-later { width: 100%; padding: 14px; background: none; border: none; font-size: 14px; color: var(--text-3); cursor: pointer; min-height: 44px; }

/* --- ONBOARDING REMINDER BANNER --- */
.onb-reminder-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9998; background: #fff; border-top: 3px solid #F7941D; box-shadow: 0 -2px 12px rgba(0,0,0,0.12); }
.onb-reminder-inner { display: flex; align-items: center; gap: 10px; padding: 12px 15px; max-width: 520px; margin: 0 auto; }
.onb-reminder-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.onb-reminder-text strong { font-size: 13px; font-weight: 700; color: #333; }
.onb-reminder-text span { font-size: 12px; color: #666; }
.onb-reminder-cta { flex-shrink: 0; padding: 10px 14px; background: #F7941D; color: var(--apc-black); border: none; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; min-height: 44px; }
.onb-reminder-cta:active { background: #DF7D0F; }
.onb-reminder-close { flex-shrink: 0; background: none; border: none; font-size: 20px; color: var(--text-3); cursor: pointer; padding: 4px 8px; min-height: 44px; line-height: 1; }

/* Listing share prompt — floating card */
.lsp-wrap { position: fixed; inset: 0; z-index: 4200; display: flex; align-items: flex-end; justify-content: center; padding: 0 16px max(32px, env(safe-area-inset-bottom, 32px)); pointer-events: none; }
@media (min-width: 900px) { .lsp-wrap { align-items: center; padding: 20px; } }
.lsp-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.35); pointer-events: all; }
.lsp-sheet { position: relative; background: #fff; border-radius: 16px; box-shadow: 0 8px 40px rgba(0,0,0,0.22); width: 100%; max-width: 360px; overflow: hidden; pointer-events: all; }
.lsp-close { position: absolute; top: 11px; right: 11px; background: rgba(0,0,0,0.07); border: none; border-radius: 50%; width: 28px; height: 28px; font-size: 17px; line-height: 28px; text-align: center; cursor: pointer; color: #666; padding: 0; }
.lsp-close:active { background: rgba(0,0,0,0.14); }
.lsp-handle { display: none; }
.lsp-heading { font-size: 16px; font-weight: 900; color: #1a1a1a; text-align: center; padding: 20px 44px 3px; }
.lsp-sub { font-size: 12px; color: var(--text-3); text-align: center; padding: 0 16px 14px; }
.lsp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 14px 14px; }
.lsp-grid.has-native .lsp-native { grid-column: 1 / -1; }
.lsp-btn { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 10px; border-radius: 10px; border: none; font-size: 13px; font-weight: 700; cursor: pointer; min-height: 44px; }
.lsp-native { background: #F7941D; color: #fff; }
.lsp-native:active { background: #DF7D0F; }
.lsp-fb { background: #1877F2; color: #fff; }
.lsp-fb:active { background: #0c63d4; }
.lsp-wa { background: #25D366; color: #fff; }
.lsp-wa:active { background: #1bab52; }
.lsp-x { background: #000; color: #fff; }
.lsp-x:active { background: #333; }
.lsp-copy { background: #f0f0f0; color: #333; }
.lsp-copy:active { background: #e0e0e0; }
.lsp-dismiss { display: none; }

/* Personal profile completeness reminder */
.ppr-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 3900; background: #fff; border-top: 3px solid #F7941D; box-shadow: 0 -2px 12px rgba(0,0,0,0.12); }
.ppr-inner { display: flex; align-items: center; gap: 10px; padding: 12px 15px; max-width: 520px; margin: 0 auto; }
.ppr-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ppr-text strong { font-size: 13px; font-weight: 700; color: #333; }
.ppr-text span { font-size: 12px; color: #666; }
.ppr-cta { flex-shrink: 0; padding: 10px 14px; background: #F7941D; color: var(--apc-black); border: none; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; min-height: 44px; }
.ppr-cta:active { background: #DF7D0F; }
.ppr-close { flex-shrink: 0; background: none; border: none; font-size: 20px; color: var(--text-3); cursor: pointer; padding: 4px 8px; min-height: 44px; line-height: 1; }

/* ─── 🥚 Flux Capacitor easter egg (DeLorean DMC-12 → Electrical) ───────────── */
.flux-card { cursor: pointer; }
.flux-stage {
    background: radial-gradient(circle at 50% 42%, #23233f 0%, #0a0a14 70%);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.flux-svg { width: 74%; height: 74%; }
.flux-svg line { stroke: #46508a; stroke-width: 7; stroke-linecap: round; }
.flux-svg circle { fill: #6b78c0; }
.flux-hub { fill: #8890b8; }
.flux-arm   { animation: fluxChase 0.9s linear infinite; }
.flux-arm-1 { animation-delay: 0s; }
.flux-arm-2 { animation-delay: 0.3s; }
.flux-arm-3 { animation-delay: 0.6s; }
@keyframes fluxChase {
    0%, 100% { filter: drop-shadow(0 0 1px rgba(130,190,255,0.15)); opacity: 0.5; }
    28%      { filter: drop-shadow(0 0 9px rgba(150,225,255,0.95)); opacity: 1; }
    56%      { filter: drop-shadow(0 0 1px rgba(130,190,255,0.15)); opacity: 0.5; }
}
.flux-card.flux-zapping .flux-arm   { animation-duration: 0.16s; }
.flux-card.flux-zapping .flux-stage { animation: fluxBurst 0.5s ease-out; }
@keyframes fluxBurst {
    0%, 100% { background: radial-gradient(circle at 50% 42%, #23233f 0%, #0a0a14 70%); }
    45%      { background: radial-gradient(circle at 50% 42%, #d8ecff 0%, #4a86c8 70%); }
}
.flux-gw-badge {
    font-size: 8px; font-weight: 800; letter-spacing: 0.6px; color: #7fe0ff;
    background: #12122a; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; align-self: center;
}
.flux-flash {
    position: fixed; inset: 0; background: #fff; z-index: 99999;
    pointer-events: none; opacity: 0; animation: fluxScreenFlash 0.85s ease-out forwards;
}
@keyframes fluxScreenFlash { 0% { opacity: 0; } 10% { opacity: 0.9; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .flux-arm  { animation: none; filter: drop-shadow(0 0 6px rgba(150,225,255,0.8)); }
    .flux-flash { animation-duration: 0.3s; }
}

/* ─── 🥚 Mr Fusion easter egg (DeLorean DMC-12 → Engine) ───────────────────── */
.fusion-card { cursor: pointer; }
.fusion-stage {
    background: radial-gradient(circle at 50% 60%, #2a2412 0%, #0b0a06 72%);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.fusion-svg { width: 70%; height: 70%; }
.fusion-body   { fill: #b8bcc4; stroke: #8a8f98; stroke-width: 1.5; }
.fusion-lid    { fill: #2c2f36; }
.fusion-funnel { fill: #3a3e46; }
.fusion-band   { fill: #F7941D; }
.fusion-core   { fill: #ffb020; animation: fusionCore 1.1s ease-in-out infinite; }
@keyframes fusionCore {
    0%, 100% { fill: #c76a10; filter: drop-shadow(0 0 2px rgba(255,170,40,0.4)); }
    50%      { fill: #ffd070; filter: drop-shadow(0 0 10px rgba(255,190,70,0.95)); }
}
.fusion-spark   { animation: fusionRise 1.4s ease-out infinite; }
.fusion-spark circle { fill: #ffd070; }
.fusion-spark-1 { animation-delay: 0s; }
.fusion-spark-2 { animation-delay: 0.5s; }
.fusion-spark-3 { animation-delay: 0.9s; }
@keyframes fusionRise {
    0%   { opacity: 0; transform: translateY(4px)  scale(0.6); }
    30%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(-18px) scale(1); }
}
.fusion-card.fusion-zapping .fusion-core  { animation-duration: 0.15s; }
.fusion-card.fusion-zapping .fusion-spark { animation-duration: 0.5s; }
.fusion-card.fusion-zapping .fusion-stage { animation: fusionBurst 0.5s ease-out; }
@keyframes fusionBurst {
    0%, 100% { background: radial-gradient(circle at 50% 60%, #2a2412 0%, #0b0a06 72%); }
    45%      { background: radial-gradient(circle at 50% 60%, #ffe6b0 0%, #d89030 72%); }
}
.fusion-badge {
    font-size: 8px; font-weight: 800; letter-spacing: 0.5px; color: #ffce7a;
    background: #2a2210; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; align-self: center;
}
@media (prefers-reduced-motion: reduce) {
    .fusion-core  { animation: none; fill: #ffd070; filter: drop-shadow(0 0 6px rgba(255,190,70,0.8)); }
    .fusion-spark { animation: none; opacity: 0.6; }
}

/* Egg visit counter line */
.egg-hits { font-size: 10px; color: var(--text-3); font-weight: 600; letter-spacing: 0.2px; margin-top: 3px; min-height: 12px; }

/* ─────────────────────────────────────────────────────────────────────────
   Design-system button/text treatment (from the APC design kit).
   ACCESSIBILITY CHOICE (Gary, 2026-08-01): near-black text (--apc-black) on the
   bright #F7941D fill — ~7.6:1, passes WCAG AAA. Replaces the earlier white-on-
   orange (~2.28:1, below AA); high contrast reads better for everyone, especially
   colour-vision-deficient users and anyone on a phone in bright sun (APC's actual
   field of use). Bold weight kept; the white-text halo is no longer needed.
   Small badges / chat bubbles / avatar circles keep plain white-on-orange.
   Orange TEXT on white (not a fill) still darkens to an accessible ink. */
.btn-full-action,
.account-pill.signed-out,
.profile-action-btn.primary,
.ar-save-btn,
.dash-action-btn.dash-btn-primary,
.wh-btn,
.stale-wanted-btn,
.wanted-notif-view-btn,
.btn-search-main,
.sp-tab-active,
.dash-tab.active,
.my-listings-tab.active,
.spb-cat-chip.active,
.wanted-garage-chip.active,
.vp-garage-chip.active,
.wh-scan-mode--active {
    color: var(--apc-black) !important;
    font-weight: 700;
}
/* States that turn a control orange only on hover/active */
.dh-btn:hover,
.wanted-have-btn:hover,
.offer-make-btn:hover,
.offer-make-btn:active,
.vsc-add-part-btn:hover,
.dash-btn-label:hover {
    color: var(--apc-black) !important;
}
/* Orange text on white → accessible darker ink */
.sign-up-link { color: var(--apc-orange-ink) !important; }
.item-fits    { color: var(--apc-orange-ink) !important; font-size: 12px !important; }

/* ═══ Pre-launch UX fixes (desky UI/UX review) ═══ */
/* #3 iOS Safari zoom-on-focus — text inputs must compute ≥16px at mobile widths */
@media (max-width: 600px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea, select { font-size: 16px !important; }
}
/* #2 minimum 44px touch targets on high-traffic controls */
.sf-msg-btn { min-height: 44px; }
.makes-item { min-height: 44px; }
.sf-heart-btn, .back-btn, .header-inbox-btn {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
/* #11 legible location text on the product card */
.item-loc { font-size: 11px !important; }
/* #10 hover-only Pro-mail actions must be reachable on touch devices */
@media (hover: none) { .pro-mail-row-actions { opacity: 1 !important; } }
/* #9 active bottom-nav tab — add a non-colour cue (weight), not orange alone */
.nav-item.active { font-weight: 800; }

/* ═══ Mobile drawers slide up on open (desky UX P3 #2) ═══
   Mobile only (≤899px) — desktop (≥900px) side panels untouched. The keyframe
   fires when .active flips the drawer display:none→flex, so the existing
   show/hide mechanism is completely unchanged — no JS, no always-rendered
   drawers. With no animation-fill, the transform reverts to none the instant the
   0.26s slide ends, leaving the open drawer a plain box → native, smooth
   scrolling (this is why an earlier slide-BOTH-ways attempt jittered on iOS —
   it kept a live transform layer under the scroller — and this doesn't). Close
   is instant. EXCLUDES #detailOverlay + #workshopDetailOverlay so their JS
   swipe-to-close is never touched; #imageLightbox isn't a .drawer. */
@keyframes drawerSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@media (max-width: 899px) {
  .drawer.active:not(#detailOverlay):not(#workshopDetailOverlay) {
    animation: drawerSlideUp 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}
/* Accessibility: OS "reduce motion" → instant, no slide */
@media (prefers-reduced-motion: reduce) {
  .drawer.active:not(#detailOverlay):not(#workshopDetailOverlay) { animation: none !important; }
}
/* Contain a pull-down/overscroll at the list's top to the sheet so it doesn't
   chain to and drag the page behind it (iOS rubber-band). No layer. */
@media (max-width: 899px) {
  .drawer:not(#detailOverlay):not(#workshopDetailOverlay) .drawer-content {
    overscroll-behavior: contain;
  }
}
/* My Listings is the one drawer with enough image-cards to expose iOS's weak
   spot: scrolling an overflow:auto container inside a position:fixed drawer
   jitters every frame (the home grid stays smooth because it scrolls the body
   natively). Give this scroller its own GPU compositing layer so scrolling
   composites instead of repainting the cards each frame. Verified on-device —
   this is the fix that made it "way smoother"; scoped to the one heavy scroller,
   not app-wide, so the persistent-layer cost is a single small element. */
@media (max-width: 899px) {
  #myPartsDrawer .drawer-content { will-change: transform; }
}