/* page-car.css — moved out of inline <style> in marketplace/show.blade.php.
   Built by Laravel Mix (webpack.mix.cjs); edit here, then npm run dev/prod. */

    /* ════════════════════════════════════════════════════════════════════
       Marketplace — Car Detail page
       Uses Finest theme variables (--fn-*), NOT Bootstrap (--bs-*).
       Mobile-first patterns mirror frontend/dealer/show.blade.php.
       ════════════════════════════════════════════════════════════════════ */

    /* ── Sold overlay banner ───────────────────────────────────────────── */
    .sc-sold-banner {
        background: linear-gradient(135deg, rgba(108, 117, 125, .95), rgba(73, 80, 87, .95));
        color: #fff;
        padding: 1rem 1.5rem;
        border-radius: .75rem;
        margin-bottom: 1.5rem;
        display: flex; align-items: center; gap: 1rem;
    }

    /* ── Quick spec chips (#2) ─────────────────────────────────────────
       Pill row right under the H1 — surfaces the four facts every buyer
       looks for first (year / gear / fuel / mileage). */
    .sc-quickspec {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        margin: .35rem 0 1rem;
    }
    .sc-quickspec__chip {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        padding: .35rem .85rem;
        background: var(--fn-tertiary-bg);
        border-radius: 999px;
        font-size: .875rem;
        font-weight: 500;
        color: var(--fn-body-color);
        border: 1px solid var(--fn-border-color);
    }
    .sc-quickspec__chip i {
        color: rgb(var(--fn-primary-rgb));
        font-size: 1rem;
    }
    /* Phones: wrapped, the chips took four rows above the price. One row that
       scrolls sideways instead, smaller pills, fading out at the right edge so
       it reads as "more this way". Every fact here is also in the spec table. */
    @media (max-width: 767.98px) {
        .sc-quickspec {
            flex-wrap: nowrap;
            overflow-x: auto;
            gap: .375rem;
            margin: .25rem 0 .75rem;
            padding-right: 1.5rem;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
            -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
                    mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
        }
        .sc-quickspec::-webkit-scrollbar { display: none; }
        .sc-quickspec .sc-quickspec__chip,
        .sc-quickspec .sc-hl-chip {
            flex-shrink: 0;
            white-space: nowrap;
            padding: .25rem .65rem;
            font-size: .8125rem;
        }
        .sc-quickspec .sc-quickspec__chip i,
        .sc-quickspec .sc-hl-chip i { font-size: .875rem; }
    }

    /* ── Page toolbar: breadcrumb + action buttons row ──
       Single horizontal row at top of page. Breadcrumb takes available space,
       action buttons sit at the right edge and never wrap below. */
    .sc-page-toolbar {
        min-height: 38px;
    }
    .sc-page-toolbar .breadcrumb { font-size: .875rem; }
    .sc-page-toolbar .breadcrumb-item.active {
        max-width: 320px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ── Action buttons row — pill buttons w/ labels (desktop) ──── */
    .sc-actions {
        display: flex;
        gap: .5rem;
        flex-shrink: 0;
        flex-wrap: nowrap; /* never wrap — toolbar guarantees the space */
    }
    /* Tighter button height on toolbar so it doesn't dwarf breadcrumb */
    .sc-page-toolbar .sc-actions .btn {
        padding-top: .35rem;
        padding-bottom: .35rem;
        font-size: .875rem;
    }
    @media (max-width: 991.98px) {
        /* Smaller toolbar action buttons on tablet — breadcrumb gets priority */
        .sc-page-toolbar .sc-actions .sc-action-label { display: none; }
        .sc-page-toolbar .sc-actions .btn {
            padding-left: .55rem;
            padding-right: .55rem;
        }
    }
    @media (max-width: 575.98px) {
        /* Mobile fallback (mobile actions are in the title block, not toolbar) */
        .sc-actions .sc-action-label { display: none; }
        .sc-actions .btn { padding-left: .65rem; padding-right: .65rem; }
    }
    /* Mobile icons riding on the "N ครั้ง" line — compact round buttons */
    .sc-actions--inline { gap: .375rem; }
    .sc-actions--inline .btn {
        width: 2rem; height: 2rem;
        padding: 0 !important;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .sc-actions--inline .btn i { margin: 0 !important; font-size: .9rem; }

    /* ── Verified / dealer pill badges (#9) ──────────────────────────── */
    .sc-verified-badge {
        display: inline-flex;
        align-items: center;
        gap: .25rem;
        background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
        color: #fff;
        padding: .15rem .55rem;
        border-radius: 999px;
        font-size: .75rem;
        font-weight: 600;
        vertical-align: middle;
        box-shadow: 0 2px 6px rgba(22,163,74,.3);
    }
    .sc-verified-badge i { font-size: .9em; }
    .sc-dealer-pill {
        display: inline-flex;
        align-items: center;
        gap: .25rem;
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        color: #fff;
        padding: .15rem .55rem;
        border-radius: 999px;
        font-size: .75rem;
        font-weight: 600;
        text-decoration: none;
        box-shadow: 0 2px 6px rgba(217,119,6,.35);
    }
    .sc-dealer-pill:hover { color: #fff; opacity: .92; }

    /* ── Gallery ──────────────────────────────────────────────────────
       Main image is constrained by aspect-ratio AND a max-height on wide
       desktops, so the gallery doesn't dominate the page on large screens
       (was previously growing to ~600px tall on 1400px+ viewports).
       Thumbnails get a clean red ring for the active state instead of
       relying on opacity dimming alone. */
    .sc-gallery-main {
        position: relative;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .sc-gallery-main .swiper {
        background: #f5f5f5;
        border-radius: 1rem;
    }
    .sc-gallery-main .ratio {
        /* 4:3 — matches the native aspect of most car listing photos in
           Thailand (typical phone/camera output). Combined with object-fit:
           cover, this means 4:3 sources fill the frame perfectly with NO
           crop and NO letterbox — what users expect from a hero image. */
        --fn-aspect-ratio: 75%;
    }
    .sc-gallery-main img {
        object-fit: cover;
        object-position: center;
        width: 100%;
        height: 100%;
    }
    .sc-gallery-main .swiper-slide {
        background: #f5f5f5;
    }
    /* Gallery wrapper — Amazon-style side-by-side layout on desktop only.
       Mobile: plain block layout (main full width, thumbs horizontal below). */

    /* Mobile: no flex — just stack normally so the main image keeps its
       4:3 aspect-ratio container without flex shrinking it to 0 height.
       Gap between main image and thumb strip below — needs explicit margin
       since the thumb wrapper class changed from .sc-gallery-thumbs to
       .sc-gallery-thumbs-col when we restructured for desktop scroll. */
    .sc-gallery-wrap > .sc-gallery-main { width: 100%; max-width: 100%; }
    .sc-gallery-wrap > .sc-gallery-thumbs-col,
    .sc-gallery-wrap > .sc-gallery-thumbs { margin-top: .85rem; }

    @media (min-width: 768px) {
        .sc-gallery-wrap {
            display: flex;
            flex-direction: row;
            gap: .65rem;
            align-items: stretch;
        }
        .sc-gallery-wrap > .sc-gallery-main {
            flex: 1 1 auto;
            min-width: 0;
            margin-top: 0;
        }
        /* Thumbnails container — must match main image height. The trick:
           - position: relative + 0 height collapses it
           - inner #sc-thumbs uses position: absolute + inset: 0 to fill
             the stretched parent (matches main image height exactly)
           - overflow-y: auto on the inner element gives the scroll */
        .sc-gallery-wrap > .sc-gallery-thumbs-col {
            flex: 0 0 100px;
            width: 100px;
            margin-top: 0;
            position: relative;
            min-height: 0;
        }
    }
    @media (min-width: 1200px) {
        .sc-gallery-wrap > .sc-gallery-thumbs-col { flex-basis: 110px; width: 110px; }
    }
    @media (min-width: 1400px) {
        .sc-gallery-wrap > .sc-gallery-thumbs-col { flex-basis: 120px; width: 120px; }
    }

    /* Counter pill (1/18) — Swiper auto-applies .swiper-pagination-fraction
       to this element which forces width:100% + bottom:10px + left:0, turning
       our small dark pill into a full-image-width black overlay. We override
       all four sides + width with !important to constrain it back to a pill. */
    .sc-gallery-main .sc-img-counter,
    .sc-gallery-main .swiper-pagination-fraction {
        position: absolute !important;
        top: 1rem !important;
        left: 1rem !important;
        right: auto !important;
        bottom: auto !important;
        width: auto !important;
        height: auto !important;
        z-index: 5;
        background: rgba(0,0,0,.55);
        color: #fff;
        padding: .25rem .7rem;
        border-radius: 999px;
        font-size: .75rem;
        font-weight: 500;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        line-height: 1.4;
    }
    .sc-gallery-main .sc-zoom-btn {
        position: absolute; top: 1rem; right: 1rem; z-index: 5;
        background: rgba(255,255,255,.9);
        backdrop-filter: blur(4px);
    }

    /* Nav arrow buttons — subtle, only visible on hover/active */
    .sc-gallery-prev, .sc-gallery-next {
        background: rgba(255,255,255,.85) !important;
        backdrop-filter: blur(6px);
        opacity: .85;
        width: 40px; height: 40px;
        transition: opacity .2s, transform .15s;
    }
    .sc-gallery-prev:hover, .sc-gallery-next:hover {
        opacity: 1;
        transform: translateY(-50%) scale(1.05);
    }

    /* Dot pagination removed — was redundant with the counter pill and
       its dark backdrop combined with the counter created a "dark band"
       look across the bottom of the photo. The counter alone communicates
       position adequately, and thumbnails below show all images at a glance. */
    .sc-gallery-dots { display: none !important; }

    /* ── Thumbnail strip ── */
    #sc-thumbs {
        /* Mobile default: horizontal strip below main */
    }
    .sc-thumb {
        cursor: pointer;
        opacity: .6;
        transition: opacity .2s, transform .15s, border-color .15s;
        border-radius: .65rem;
        overflow: hidden;
        position: relative;
        border: 2px solid transparent;
    }
    .sc-thumb:hover { opacity: 1; transform: translateY(-1px); }
    .sc-thumb.swiper-slide-thumb-active {
        opacity: 1;
        border-color: rgb(var(--fn-primary-rgb));
        box-shadow: 0 0 0 3px rgba(216,81,81,.15);
    }
    .sc-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    /* Mobile horizontal strip — compact thumbs */
    @media (max-width: 767.98px) {
        #sc-thumbs .swiper-slide {
            width: 80px !important;
            height: 60px !important;
        }
    }
    /* Desktop vertical column — thumb fills column width.
       Position-absolute fills the parent .sc-gallery-thumbs-col which is
       stretched to main image height by the flex container. */
    @media (min-width: 768px) {
        #sc-thumbs {
            position: absolute;
            inset: 0;
            overflow-y: auto;
            overflow-x: hidden;
            scrollbar-width: thin;
            scrollbar-color: var(--fn-tertiary-bg) transparent;
        }
        #sc-thumbs::-webkit-scrollbar { width: 4px; }
        #sc-thumbs::-webkit-scrollbar-thumb {
            background: var(--fn-tertiary-bg);
            border-radius: 4px;
        }
        #sc-thumbs .swiper-wrapper {
            flex-direction: column !important;
            transform: none !important; /* CSS scroll, not Swiper translate */
            height: auto !important;
        }
        #sc-thumbs .swiper-slide {
            width: 100% !important;
            height: auto !important;
            margin-bottom: 8px;
        }
    }

    /* ── Spec table ── */
    /* ─────────────────────────────────────────────────────────────────
       Modern spec section — icon-per-row + clean cards (vs old gray boxes)
       ───────────────────────────────────────────────────────────────── */

    /* Highlight chips — colorful pill badges at the top, replaces the
       bulleted list. Each one is a single-glance trust signal. */
    .sc-hl-row {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        margin-bottom: 1.25rem;
    }
    .sc-hl-chip {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        padding: .4rem .85rem;
        border-radius: 999px;
        font-size: .8125rem;
        font-weight: 500;
        background: rgba(22,163,74,.08);
        color: #15803d;
        border: 1px solid rgba(22,163,74,.2);
    }
    .sc-hl-chip i { font-size: .9rem; }
    .sc-hl-chip--primary {
        background: rgba(216,81,81,.08);
        color: rgb(var(--fn-primary-rgb));
        border-color: rgba(216,81,81,.2);
    }
    .sc-hl-chip--info {
        background: rgba(59,130,246,.08);
        color: #1e40af;
        border-color: rgba(59,130,246,.2);
    }
    .sc-hl-chip--warning {
        background: rgba(245,158,11,.08);
        color: #b45309;
        border-color: rgba(245,158,11,.25);
    }

    /* Spec card — white bg with thin border (vs old solid gray box).
       Adds a subtle hover lift to invite interaction. */
    .sc-spec-card {
        background: var(--fn-body-bg);
        border: 1px solid var(--fn-border-color);
        border-radius: 1rem;
        padding: 1.25rem;
        height: 100%;
        transition: box-shadow .2s, transform .15s;
    }
    .sc-spec-card:hover {
        box-shadow: 0 4px 16px rgba(0,0,0,.06);
    }
    .sc-spec-card__head {
        display: flex;
        align-items: center;
        gap: .65rem;
        margin-bottom: 1rem;
        padding-bottom: .85rem;
        border-bottom: 1px solid var(--fn-border-color);
    }
    .sc-spec-card__icon {
        width: 36px; height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(216,81,81,.1);
        color: rgb(var(--fn-primary-rgb));
        border-radius: 10px;
        font-size: 1.05rem;
    }
    .sc-spec-card__title {
        font-size: 1rem;
        font-weight: 600;
        color: var(--fn-body-color);
        margin: 0;
    }

    /* Spec list — icon at start of each row + label/value pair.
       2-column grid layout: icon (32px) + label/value (1fr) */
    .sc-spec-list {
        display: flex;
        flex-direction: column;
        gap: .15rem;
    }
    .sc-spec-item {
        display: grid;
        grid-template-columns: 28px 1fr auto;
        align-items: center;
        gap: .75rem;
        padding: .55rem .25rem;
        font-size: .9375rem;
        border-radius: .5rem;
        transition: background .12s;
    }
    .sc-spec-item:hover { background: var(--fn-tertiary-bg); }
    .sc-spec-item__icon {
        color: var(--fn-secondary-color);
        font-size: 1rem;
        text-align: center;
    }
    .sc-spec-item__label {
        color: var(--fn-secondary-color);
    }
    .sc-spec-item__value {
        font-weight: 600;
        color: var(--fn-body-color);
        text-align: right;
    }
    .sc-spec-item__value--accent {
        color: rgb(var(--fn-primary-rgb));
    }

    /* One spec card split in two columns (ข้อมูลพื้นฐาน | เครื่องยนต์และการ
       ใช้งาน), and the documents card under it in the same style. The four
       quick-fact tiles that sat above repeated the chips under the title. */
    .sc-spec-col__title {
        font-size: .8125rem;
        font-weight: 600;
        color: var(--fn-secondary-color);
        margin: 0 0 .35rem;
        padding: 0 .25rem;
    }
    @media (min-width: 768px) {
        .sc-spec-col { padding: 0 1rem; }
        .sc-spec-col:first-child { padding-left: 0; border-right: 1px solid var(--fn-border-color); }
        .sc-spec-col:last-child { padding-right: 0; }
        .sc-spec-card > .sc-spec-col__title { padding-left: .25rem !important; }
    }
    @media (max-width: 767.98px) {
        .sc-spec-col + .sc-spec-col {
            margin-top: .75rem;
            padding-top: .75rem;
            border-top: 1px solid var(--fn-border-color);
        }
    }

    /* Seller condition declarations (คำรับรองจากผู้ขาย) */
    .sc-disc-badges { display: flex; flex-wrap: wrap; gap: .5rem; }
    .sc-disc-badge {
        display: inline-flex; align-items: center; gap: .35rem;
        padding: .4rem .8rem; border-radius: 999px;
        background: rgba(25,135,84,.1);
        border: 1px solid rgba(25,135,84,.35);
        color: #198754; font-size: .85rem; font-weight: 600;
    }
    .sc-disc-note {
        display: flex; gap: .4rem; margin: .75rem 0 0;
        font-size: .78rem; color: var(--fn-secondary-color);
    }

    /* Legacy classes kept for compatibility (other pages may use them) */
    .sc-spec-group {
        background: var(--fn-tertiary-bg);
        border-radius: .75rem;
        padding: 1.25rem 1.5rem;
        margin-bottom: 1rem;
    }
    .sc-spec-group h3 {
        font-size: 1rem; font-weight: 600;
        color: var(--fn-body-color);
        margin-bottom: .85rem;
        padding-bottom: .5rem;
        border-bottom: 1px solid var(--fn-border-color);
        display: flex; align-items: center; gap: .5rem;
    }
    .sc-spec-group h3 i { color: rgb(var(--fn-primary-rgb)); }
    .sc-spec-row {
        display: flex; justify-content: space-between;
        padding: .35rem 0;
        font-size: .9rem;
    }
    .sc-spec-row .sc-label { color: var(--fn-secondary-color); }
    .sc-spec-row .sc-value { font-weight: 500; text-align: right; }

    /* ── Highlights callout (#10) — fills empty right column on spec grid ── */
    .sc-highlights {
        background: linear-gradient(135deg, rgba(216,81,81,.06), rgba(216,81,81,.02));
        border: 1px solid rgba(216,81,81,.18);
        border-radius: .75rem;
        padding: 1.25rem 1.5rem;
        margin-bottom: 1rem;
    }
    .sc-highlights h3 {
        font-size: 1rem; font-weight: 600;
        margin-bottom: .85rem;
        color: rgb(var(--fn-primary-rgb));
        display: flex; align-items: center; gap: .5rem;
    }
    .sc-highlights ul {
        list-style: none; padding: 0; margin: 0;
        font-size: .9rem;
    }
    .sc-highlights li {
        display: flex; align-items: flex-start; gap: .5rem;
        padding: .35rem 0;
    }
    .sc-highlights li i {
        color: #16a34a;
        margin-top: .2rem;
        flex-shrink: 0;
    }

    /* ── Sticky right sidebar (#6) ──────────────────────────────────── */
    /* Removed max-height + overflow-y so no scrollbar appears.
       Sidebar grows naturally; sticky behavior still works on scroll.
       Trade-off: if sidebar content > viewport on a tiny laptop the
       bottom is cut off until the user scrolls the main column — but
       price + seller + loan card are comfortably under 100vh on every
       laptop+ display, so this is fine. */
    @media (min-width: 992px) {
        .sc-sticky-sidebar {
            position: sticky;
            top: var(--sc-nav-bottom, 80px);
        }
    }

    /* ── Sidebar stack — Airbnb/Booking-style independent cards ───────
       Each section (price, seller, loan) is its own card with the same
       visual treatment. They sit next to each other with a small gap
       instead of being nested inside one outer card, which avoids the
       "border-in-border" effect. */
    .sc-sb-stack {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .sc-sb-card {
        background: var(--fn-body-bg);
        border: 1px solid var(--fn-border-color);
        border-radius: 14px;
        padding: 1.25rem;
        box-shadow: 0 1px 2px rgba(0,0,0,.025);
    }
    /* Price, monthly estimate, seller and contact buttons in one card; the
       seller part sits under a hairline that runs to the card's edges. */
    .sc-sb-card--main { padding: 1.35rem 1.35rem 1.25rem; }
    .sc-sb-card__seller {
        margin: 1.25rem -1.35rem 0;
        padding: 1.25rem 1.35rem 0;
        border-top: 1px solid var(--fn-border-color);
    }
    /* Inside the sidebar the card owns the chrome — the seller partial and
       the loan calculator drop their own. Mobile renders them standalone. */
    .sc-sticky-sidebar .sc-seller-card {
        border: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin-bottom: 0 !important;
    }
    .sc-sticky-sidebar .sc-loan-card {
        background: transparent !important;
        padding: 0 !important;
        margin-top: 0 !important;
        border-radius: 0 !important;
    }
    /* Meta strip at bottom — quiet, no border, slight inset */
    .sc-sb-meta {
        padding: .25rem .25rem 0;
    }

    /* Legacy alias — keep .sc-price-card responsive (used by old @media
       print rule) but make it a no-op visually since the layout moved. */
    .sc-price-card { display: contents; }

    /* ── Modern price hero ────────────────────────────────────────────
       Larger, more impactful. Discount as clean inline ribbon, savings
       pill in green. No emoji clutter. */
    .sc-price-hero { margin-bottom: 0; }
    .sc-price-hero__label {
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--fn-secondary-color);
        font-weight: 500;
        margin-bottom: .25rem;
    }
    .sc-price-hero__row {
        display: flex;
        align-items: baseline;
        gap: .65rem;
        flex-wrap: wrap;
        margin-bottom: .35rem;
    }
    .sc-price-hero__original {
        font-size: 1rem;
        color: var(--fn-secondary-color);
        text-decoration: line-through;
        font-weight: 500;
    }
    .sc-price-hero__discount-pill {
        display: inline-flex;
        align-items: center;
        gap: .25rem;
        background: linear-gradient(135deg, rgb(var(--fn-primary-rgb)), #c92d2d);
        color: #fff;
        font-size: .7rem;
        font-weight: 700;
        padding: .15rem .55rem;
        border-radius: 999px;
        letter-spacing: .02em;
    }
    .sc-price-hero__main {
        font-size: 2.25rem;
        font-weight: 800;
        line-height: 1.05;
        color: rgb(var(--fn-primary-rgb));
        letter-spacing: -.01em;
        margin-bottom: .35rem;
    }
    .sc-price-hero__savings {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        background: rgba(22,163,74,.1);
        color: #15803d;
        font-size: .8rem;
        font-weight: 600;
        padding: .25rem .65rem;
        border-radius: 999px;
    }
    .sc-price-hero__neg {
        font-size: .8rem;
        color: var(--fn-secondary-color);
    }
    .sc-price-hero__neg.is-yes { color: #15803d; }
    .sc-price-hero__monthly {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        margin-top: .75rem;
        padding: .6rem .9rem;
        border-radius: .65rem;
        background: rgba(216,81,81,.07);
    }
    .sc-price-hero__monthly-label { font-size: .75rem; color: var(--fn-secondary-color); }
    .sc-price-hero__monthly-value { font-size: 1.125rem; font-weight: 700; color: var(--fn-heading-color, #181d25); line-height: 1.3; }
    .sc-price-hero__monthly-value small { font-size: .75rem; font-weight: 400; color: var(--fn-secondary-color); }
    .sc-price-hero__monthly a { font-size: .8125rem; font-weight: 600; white-space: nowrap; }
    .sc-price-hero__terms { font-size: .72rem; color: var(--fn-secondary-color); margin-top: .35rem; }

    /* ── Section divider — replaces border-top with subtle gradient line ── */
    .sc-sb-divider {
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--fn-border-color), transparent);
        margin: 1.25rem 0;
        border: 0;
    }

    /* ── Seller card — one row: avatar · name, trust pills, stats ─────────
       The desktop sidebar adds the contact buttons under the row; the mobile
       copy is the row alone (a link to the showroom). */
    .sc-seller-card {
        background: var(--fn-body-bg);
        border: 1px solid var(--fn-border-color);
        border-radius: .85rem;
        padding: .85rem 1rem;
    }
    .sc-seller-card__head {
        display: flex;
        align-items: center;
        gap: .85rem;
        color: inherit;
        text-decoration: none;
    }
    a.sc-seller-card__head:hover .sc-seller-card__name { color: rgb(var(--fn-primary-rgb)); }
    .sc-seller-card__avatar {
        width: 72px;
        height: 72px;
        flex-shrink: 0;
        border-radius: 50%;
        object-fit: cover;
        background: var(--fn-tertiary-bg);
        box-shadow: 0 0 0 2px var(--fn-border-color);
    }
    .sc-seller-card--mirror .sc-seller-card__avatar { width: 56px; height: 56px; box-shadow: 0 0 0 1px var(--fn-border-color); }
    .sc-seller-card__who {
        display: flex;
        flex-direction: column;
        gap: .25rem;
        flex: 1;
        min-width: 0;
    }
    .sc-seller-card__name {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--fn-heading-color, #181d25);
        line-height: 1.3;
        transition: color .15s;
    }
    .sc-seller-card__pills {
        display: flex;
        flex-wrap: wrap;
        gap: .3rem;
    }
    .sc-seller-card__role,
    .sc-seller-card__stats {
        font-size: .78rem;
        color: var(--fn-secondary-color);
    }
    .sc-seller-card__chevron { color: var(--fn-secondary-color); flex-shrink: 0; }
    .sc-seller-card__ctas {
        display: grid;
        gap: .6rem;
        margin-top: 1rem;
    }
    .sc-seller-card__pair {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .6rem;
    }
    .sc-seller-card__pair > :only-child { grid-column: 1 / -1; }
    .sc-seller-card__pair .sc-cta-btn { padding-left: .5rem; padding-right: .5rem; font-size: .875rem; }
    .sc-seller-card__more {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: .25rem 1rem;
        margin-top: .65rem;
        font-size: .78rem;
    }
    .sc-seller-card--mirror .sc-seller-card__more { justify-content: flex-start; padding-left: calc(56px + .85rem); }
    .sc-seller-card:not(.sc-seller-card--mirror) .sc-seller-card__more { padding-left: calc(72px + .85rem); justify-content: flex-start; }
    .sc-seller-card__more a { color: var(--fn-secondary-color); text-decoration: underline; text-underline-offset: 2px; }
    .sc-seller-card__more a:hover { color: rgb(var(--fn-primary-rgb)); }

    /* ── CTA buttons (sidebar) ── */
    .sc-cta-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        padding: .7rem 1rem;
        border-radius: .5rem;
        font-weight: 600;
        font-size: .9rem;
        text-decoration: none;
        transition: transform .12s, box-shadow .15s, background-color .15s;
        border: 1px solid transparent;
    }
    .sc-cta-btn:active { transform: scale(.98); }
    .sc-cta-btn--phone {
        background: rgb(var(--fn-primary-rgb));
        color: #fff;
    }
    .sc-cta-btn--phone:hover {
        color: #fff;
        background: #c92d2d;
        box-shadow: 0 2px 8px rgba(216,81,81,.3);
    }
    .sc-cta-btn--line {
        background: #07913f;
        color: #fff;
    }
    .sc-cta-btn--line:hover {
        color: #fff;
        background: #067a35;
        box-shadow: 0 2px 8px rgba(7,145,63,.25);
    }
    .sc-cta-btn--ghost {
        background: var(--fn-tertiary-bg, #f5f7fa);
        color: var(--fn-body-color);
        border-color: var(--fn-border-color);
    }
    .sc-cta-btn--ghost:hover {
        color: rgb(var(--fn-primary-rgb));
        border-color: rgb(var(--fn-primary-rgb));
        background: rgba(216,81,81,.06);
    }

    /* ── Bookmark button states ── */
    .sc-bookmark-btn .fi-heart {
        transition: color .2s, transform .2s;
    }
    .sc-bookmark-btn.is-bookmarked {
        background: rgba(216, 81, 81, .1) !important;
        border-color: #d85151 !important;
        color: #d85151 !important;
    }
    .sc-bookmark-btn.is-bookmarked .fi-heart {
        color: #d85151;
        animation: sc-heart-pop .3s ease-out;
    }
    @keyframes sc-heart-pop {
        0%   { transform: scale(1); }
        40%  { transform: scale(1.4); }
        100% { transform: scale(1); }
    }

    /* ── Loan calculator (#15) ─────────────────────────────────────────
       Cleaner: subtle gray bg instead of red tint, white inputs/result
       block stand out. Feels less "promo card", more "tool". */
    .sc-loan-card {
        background: var(--fn-tertiary-bg);
        border-radius: .85rem;
        padding: 1.25rem;
        margin-top: 1.25rem;
    }
    .sc-loan-card .form-control,
    .sc-loan-card .form-select {
        font-size: .95rem;
        padding: .55rem .75rem;
        background: var(--fn-body-bg);
    }
    .sc-loan-result {
        background: var(--fn-body-bg);
        border-radius: .65rem;
        padding: .85rem 1rem;
        margin-top: .85rem;
        box-shadow: 0 1px 3px rgba(0,0,0,.04);
    }
    .sc-down-chips {
        display: flex; gap: .35rem; flex-wrap: wrap;
        margin-top: .35rem;
    }
    .sc-down-chip {
        flex: 1;
        min-width: 48px;
        background: var(--fn-body-bg);
        border: 1px solid var(--fn-border-color);
        color: var(--fn-secondary-color);
        padding: .35rem .25rem;
        border-radius: 999px;
        font-size: .75rem;
        font-weight: 600;
        cursor: pointer;
        transition: all .15s;
    }
    .sc-down-chip:hover {
        border-color: rgb(var(--fn-primary-rgb));
        color: rgb(var(--fn-primary-rgb));
    }
    .sc-down-chip.is-active {
        background: rgb(var(--fn-primary-rgb));
        border-color: rgb(var(--fn-primary-rgb));
        color: #fff;
    }

    /* ── Lightbox ── */
    .sc-lightbox-overlay {
        position: fixed; inset: 0;
        background: rgba(0, 0, 0, .92);
        z-index: 10000;
        display: none;
        align-items: center; justify-content: center;
        padding: 2rem;
        cursor: zoom-out;
    }
    .sc-lightbox-overlay.is-open { display: flex; }
    .sc-lightbox-overlay img {
        max-width: 100%; max-height: 100%;
        object-fit: contain;
    }
    .sc-lightbox-overlay .sc-lightbox-close {
        position: absolute; top: 1rem; right: 1rem;
        background: transparent; border: 0;
        color: #fff; font-size: 2rem;
        cursor: pointer;
    }
    .sc-lightbox-overlay .sc-lightbox-nav {
        position: absolute; top: 50%; transform: translateY(-50%);
        background: rgba(255,255,255,.1); color: #fff;
        border: 0; width: 48px; height: 48px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
        transition: background .15s;
    }
    .sc-lightbox-overlay .sc-lightbox-nav:hover { background: rgba(255,255,255,.25); }
    .sc-lightbox-overlay .sc-lightbox-prev { left: 1rem; }
    .sc-lightbox-overlay .sc-lightbox-next { right: 1rem; }
    .sc-lightbox-overlay .sc-lightbox-counter {
        position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
        color: #fff; font-size: .85rem;
        background: rgba(0,0,0,.5); padding: .25rem .8rem;
        border-radius: 999px;
    }

    /* ════════════════════════════════════════════════════════════════════
       Mobile = one scroll, in the order a buyer reads it: photos, the car's
       own details, then who sells it and the loan estimate. The seller card
       used to come straight after the photos and pushed the specs almost two
       screens down; call and LINE are in the bottom bar anyway. Desktop keeps
       the sidebar. Under the column, the full-width sections follow.
       ════════════════════════════════════════════════════════════════════ */
    @media (max-width: 767.98px) {
        .col-lg-8 {
            display: flex;
            flex-direction: column;
        }
        [data-tab-pane="overview"] { order: 1; }
        [data-tab-pane="details"]  { order: 2; }
        [data-tab-pane="seller"]   { order: 3; }
        .sc-loan-mobile            { order: 4; }
    }

    /* ── Mobile loan calc — collapsible <details> styling ───────────────
       Native HTML5 collapse, no JS, no a11y plumbing required. Hidden on
       desktop (sidebar already has the loan calc). */
    .sc-loan-mobile {
        border: 1px solid var(--fn-border-color);
        border-radius: 12px;
        background: var(--fn-body-bg);
        overflow: hidden;
    }
    .sc-loan-mobile__summary {
        list-style: none;
        cursor: pointer;
        padding: .9rem 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 600;
        font-size: .95rem;
        user-select: none;
    }
    .sc-loan-mobile__summary::-webkit-details-marker { display: none; }
    .sc-loan-mobile__summary::marker { content: ""; }
    .sc-loan-mobile__chevron {
        transition: transform .2s ease;
        color: var(--fn-secondary-color);
    }
    .sc-loan-mobile[open] .sc-loan-mobile__chevron { transform: rotate(180deg); }
    .sc-loan-mobile[open] .sc-loan-mobile__summary {
        border-bottom: 1px solid var(--fn-border-color);
    }
    .sc-loan-mobile > div { padding: 0 1rem 1rem; }
    /* The included partial wraps in .sc-loan-card which already has its
       own background — strip it inside the details to avoid nested boxes. */
    .sc-loan-mobile .sc-loan-card {
        background: transparent;
        border: none;
        padding: 0;
        margin: 0;
    }
    /* The partial includes its own "คำนวณค่าผ่อน" h3, but the summary
       already shows that label — hide the inner one to avoid duplication. */
    .sc-loan-mobile .sc-loan-card > h3 { display: none; }

    /* ════════════════════════════════════════════════════════════════════
       Mobile sticky mini-header (#5) — once the title scrolls away the site
       header slides up and this bar takes its place, in the header's colours,
       so a phone carries one bar at the top instead of two (header + bar +
       the bottom CTA ate close to a third of the screen).
       ════════════════════════════════════════════════════════════════════ */
    .sc-mini-header { display: none; }
    @media (max-width: 767.98px) {
        header.sc-header { transition: transform .25s ease; }
        body.has-mini-header header.sc-header { transform: translateY(-100%); }

        .sc-mini-header {
            position: fixed;
            top: 0;
            left: 0; right: 0;
            z-index: 1031;
            display: flex;
            align-items: center;
            gap: .6rem;
            min-height: 60px;
            padding: .5rem .85rem .5rem .35rem;
            background: var(--sc-header-bg, #0d1622);
            box-shadow: 0 4px 14px rgba(13,22,34,.25);
            transform: translateY(-100%);
            opacity: 0;
            transition: transform .25s ease, opacity .25s ease;
        }
        .sc-mini-header.is-visible {
            transform: translateY(0);
            opacity: 1;
        }
        .sc-mini-header__up {
            width: 44px; height: 44px;
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 0;
            background: transparent;
            color: #fff;
            font-size: 1.15rem;
        }
        .sc-mini-header__thumb {
            width: 44px; height: 36px;
            border-radius: 6px;
            object-fit: cover;
            flex-shrink: 0;
            background: rgba(255,255,255,.12);
            color: rgba(255,255,255,.6);
        }
        .sc-mini-header__info {
            flex: 1; min-width: 0;
            line-height: 1.25;
        }
        .sc-mini-header__title {
            font-size: .85rem;
            font-weight: 600;
            color: #fff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .sc-mini-header__price {
            font-size: .875rem;
            color: #f08a8a;
            font-weight: 700;
        }
    }

    /* ════════════════════════════════════════════════════════════════════
       Mobile sticky bottom CTA bar (#1) — primary contact actions pinned
       to viewport bottom. Mirrors dealer page .sc-mobile-cta.
       ════════════════════════════════════════════════════════════════════ */
    .sc-mobile-cta {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 1030;
        display: none;
        background: var(--fn-body-bg);
        border-top: 1px solid var(--fn-border-color);
        padding: .5rem;
        box-shadow: 0 -4px 12px rgba(0,0,0,.08);
        gap: .5rem;
    }
    .sc-mob-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .35rem;
        flex: 1;
        padding: .65rem .75rem;
        border-radius: .5rem;
        font-weight: 600;
        font-size: .9rem;
        text-decoration: none;
        border: none;
        cursor: pointer;
        transition: background-color .15s;
    }
    .sc-mob-btn--phone { background: rgb(var(--fn-primary-rgb)); color: #fff; }
    .sc-mob-btn--phone:hover { background: #c92d2d; color: #fff; }
    .sc-mob-btn--line { background: #07913f; color: #fff; }
    .sc-mob-btn--line:hover { background: #067a35; color: #fff; }
    .sc-mob-btn--bookmark {
        flex: 0 0 48px;
        max-width: 48px;
        background: var(--fn-tertiary-bg, #f5f7fa);
        color: var(--fn-secondary-color);
        border: 1px solid var(--fn-border-color);
    }
    @media (max-width: 767.98px) {
        .sc-mobile-cta { display: flex; }
        body.has-sc-mobile-cta { padding-bottom: 70px; }
    }

    /* ════════════════════════════════════════════════════════════════════
       Side TOC / scroll-spy nav (#7) — desktop only, pinned right of
       main column.
       ════════════════════════════════════════════════════════════════════ */
    /* ── Seller card extras (#11, #12) ──────────────────────────────── */
    .sc-trust-row {
        display: flex; flex-wrap: wrap;
        gap: .5rem .85rem;
        font-size: .75rem;
        color: var(--fn-secondary-color);
        margin-top: .35rem;
    }
    .sc-trust-row span { display: inline-flex; align-items: center; gap: .25rem; }
    .sc-trust-row i { color: rgb(var(--fn-primary-rgb)); font-size: .85rem; }

    .sc-dealer-cover-card {
        background: linear-gradient(135deg, rgba(216,81,81,.08), rgba(216,81,81,.02));
        border: 1px solid rgba(216,81,81,.18);
        border-radius: .85rem;
        padding: 1rem;
        margin-bottom: .85rem;
        text-align: center;
    }

    /* ── Print stylesheet: hide nav, footer, sidebar action buttons ── */
    @media print {
        header, footer, .sc-bookmark-btn, .sc-share-wrapper, .sc-loan-card,
        .sc-gallery-main .sc-zoom-btn, .swiper-button-next, .swiper-button-prev,
        .sc-mobile-cta, .sc-mini-header,
        #sellerCars, .related-section {
            display: none !important;
        }
        .sc-price-card { position: static !important; box-shadow: none !important; border: 1px solid #ccc !important; }
        body { background: #fff !important; }
        .container { max-width: 100% !important; }
    }