/* =====================================================================
   CarSale — base stylesheet (layout + Bootstrap wiring).
   Never writes a colour: every colour is a --cs-* slot filled by the
   theme file in css/themes/. Screens use Bootstrap classes; this file
   only (1) points Bootstrap's variables at the theme and (2) holds the
   few layout pieces Bootstrap has no class for.
   ===================================================================== */

/* ---------- 1. Bootstrap variables → theme slots ---------- */
[data-bs-theme] {
    --bs-body-bg: var(--cs-page);
    --bs-body-color: var(--cs-text);
    --bs-emphasis-color: var(--cs-text);
    --bs-secondary-color: var(--cs-muted);
    --bs-tertiary-color: var(--cs-muted);
    --bs-secondary-bg: var(--cs-surface-2);
    --bs-tertiary-bg: var(--cs-surface-2);
    --bs-border-color: var(--cs-border);
    --bs-border-color-translucent: var(--cs-border);
    --bs-link-color: var(--cs-accent-text);
    --bs-link-hover-color: var(--cs-text);
    --bs-link-color-rgb: var(--cs-primary-rgb);
    --bs-primary: var(--cs-primary);
    --bs-primary-rgb: var(--cs-primary-rgb);
    --bs-focus-ring-color: rgba(var(--cs-primary-rgb), .3);

    --bs-primary-bg-subtle: var(--cs-soft);
    --bs-primary-border-subtle: var(--cs-soft-border);
    --bs-primary-text-emphasis: var(--cs-soft-text);
    --bs-danger-bg-subtle: var(--cs-danger-soft);
    --bs-danger-border-subtle: var(--cs-danger-soft-border);
    --bs-danger-text-emphasis: var(--cs-danger-text);
    --bs-success-bg-subtle: var(--cs-success-soft);
    --bs-success-border-subtle: var(--cs-success-soft-border);
    --bs-success-text-emphasis: var(--cs-success-text);
    --bs-warning-bg-subtle: var(--cs-warning-soft);
    --bs-warning-border-subtle: var(--cs-warning-soft-border);
    --bs-warning-text-emphasis: var(--cs-warning-text);
    --bs-info-bg-subtle: var(--cs-info-soft);
    --bs-info-border-subtle: var(--cs-info-soft-border);
    --bs-info-text-emphasis: var(--cs-info-text);
    --bs-secondary-bg-subtle: var(--cs-surface-2);
    --bs-secondary-border-subtle: var(--cs-border);
    --bs-secondary-text-emphasis: var(--cs-text);
}

html, body { min-height: 100%; }
body {
    background: var(--cs-page);
    color: var(--cs-text);
    font-family: "Segoe UI", Tahoma, "Noto Sans Arabic", system-ui, sans-serif;
    font-size: .9rem;
}

/* Cards */
.card {
    --bs-card-bg: var(--cs-surface);
    --bs-card-color: var(--cs-text);
    --bs-card-border-color: var(--cs-border);
    --bs-card-cap-bg: var(--cs-surface);
    --bs-card-cap-color: var(--cs-text);
    --bs-card-cap-padding-y: .35rem;
    --bs-card-cap-padding-x: .65rem;
    --bs-card-spacer-y: .5rem;
    --bs-card-spacer-x: .65rem;
    box-shadow: var(--cs-shadow);
}
.card-header { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-weight: 600; }

/* Buttons — every state from the theme */
.btn-primary {
    --bs-btn-color: var(--cs-on-primary); --bs-btn-bg: var(--cs-primary); --bs-btn-border-color: var(--cs-primary);
    --bs-btn-hover-color: var(--cs-on-primary); --bs-btn-hover-bg: var(--cs-primary-hover); --bs-btn-hover-border-color: var(--cs-primary-hover);
    --bs-btn-active-color: var(--cs-on-primary); --bs-btn-active-bg: var(--cs-primary-active); --bs-btn-active-border-color: var(--cs-primary-active);
    --bs-btn-disabled-color: var(--cs-on-primary); --bs-btn-disabled-bg: var(--cs-primary); --bs-btn-disabled-border-color: var(--cs-primary);
    --bs-btn-focus-shadow-rgb: var(--cs-primary-rgb);
}
.btn-outline-primary {
    --bs-btn-color: var(--cs-soft-text); --bs-btn-bg: var(--cs-soft); --bs-btn-border-color: var(--cs-soft-border);
    --bs-btn-hover-color: var(--cs-on-primary); --bs-btn-hover-bg: var(--cs-primary); --bs-btn-hover-border-color: var(--cs-primary);
    --bs-btn-active-color: var(--cs-on-primary); --bs-btn-active-bg: var(--cs-primary-active); --bs-btn-active-border-color: var(--cs-primary-active);
    --bs-btn-disabled-color: var(--cs-muted); --bs-btn-disabled-bg: var(--cs-surface-2); --bs-btn-disabled-border-color: var(--cs-border);
    --bs-btn-focus-shadow-rgb: var(--cs-primary-rgb);
}
.btn-outline-secondary {
    --bs-btn-color: var(--cs-text); --bs-btn-bg: var(--cs-surface-2); --bs-btn-border-color: var(--cs-border);
    --bs-btn-hover-color: var(--cs-text); --bs-btn-hover-bg: var(--cs-border); --bs-btn-hover-border-color: var(--cs-input-border);
    --bs-btn-active-color: var(--cs-text); --bs-btn-active-bg: var(--cs-input-border); --bs-btn-active-border-color: var(--cs-input-border);
    --bs-btn-disabled-color: var(--cs-muted); --bs-btn-disabled-bg: var(--cs-surface-2); --bs-btn-disabled-border-color: var(--cs-border);
    --bs-btn-focus-shadow-rgb: var(--cs-primary-rgb);
}
.btn-outline-danger {
    --bs-btn-color: var(--cs-danger-text); --bs-btn-bg: var(--cs-danger-soft); --bs-btn-border-color: var(--cs-danger-soft-border);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--cs-danger); --bs-btn-hover-border-color: var(--cs-danger);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--cs-danger); --bs-btn-active-border-color: var(--cs-danger);
    --bs-btn-disabled-color: var(--cs-muted); --bs-btn-disabled-bg: var(--cs-surface-2); --bs-btn-disabled-border-color: var(--cs-border);
    --bs-btn-focus-shadow-rgb: 220, 38, 38;
}
/* Brand accent button (gold in Midnight & Gold) */
.btn-accent {
    --bs-btn-color: var(--cs-on-accent); --bs-btn-bg: var(--cs-accent); --bs-btn-border-color: var(--cs-accent);
    --bs-btn-hover-color: var(--cs-on-accent); --bs-btn-hover-bg: var(--cs-accent-hover); --bs-btn-hover-border-color: var(--cs-accent-hover);
    --bs-btn-active-color: var(--cs-on-accent); --bs-btn-active-bg: var(--cs-accent); --bs-btn-active-border-color: var(--cs-on-accent);
    --bs-btn-disabled-color: var(--cs-on-accent); --bs-btn-disabled-bg: var(--cs-accent); --bs-btn-disabled-border-color: var(--cs-accent);
    --bs-btn-focus-shadow-rgb: var(--cs-primary-rgb);
}
.btn-icon { --bs-btn-padding-x: .45rem; --bs-btn-padding-y: .15rem; line-height: 1.3; }

/* Forms */
.form-control, .form-select { background-color: var(--cs-input-bg); color: var(--cs-text); border-color: var(--cs-input-border); }
.form-control:focus, .form-select:focus {
    background-color: var(--cs-input-bg); color: var(--cs-text);
    border-color: var(--cs-primary); box-shadow: 0 0 0 .2rem rgba(var(--cs-primary-rgb), .25);
}
.form-control::placeholder { color: var(--cs-muted); opacity: 1; }
.form-control[readonly] { background-color: var(--cs-surface-2); color: var(--cs-muted); }
.form-label { font-size: .78rem; color: var(--cs-muted); margin-bottom: 1px; }
.form-check-input { border-color: var(--cs-input-border); background-color: var(--cs-input-bg); }
.form-check-input:checked { background-color: var(--cs-primary); border-color: var(--cs-primary); }
.form-check-input:focus { border-color: var(--cs-primary); box-shadow: 0 0 0 .2rem rgba(var(--cs-primary-rgb), .25); }
.form-range::-webkit-slider-thumb { background-color: var(--cs-primary); }
.form-range::-moz-range-thumb { background-color: var(--cs-primary); }
.input-group-text { background: var(--cs-surface-2); color: var(--cs-text); border-color: var(--cs-input-border); }
.req { color: var(--cs-danger-text); }
/* Switch: full-size control, label never touching it (both directions) */
.cs-switch.form-switch { display: inline-flex; align-items: center; gap: .5rem; padding-inline-start: 0; margin: 0; min-height: 0; }
.cs-switch.form-switch .form-check-input { margin: 0; float: none; }
.cs-switch.form-switch .form-check-label { margin: 0; }

/* Tables */
.table {
    --bs-table-bg: transparent; --bs-table-color: var(--cs-text); --bs-table-border-color: var(--cs-border);
    --bs-table-hover-bg: var(--cs-surface-2); --bs-table-hover-color: var(--cs-text);
    --bs-table-striped-bg: var(--cs-surface-2); --bs-table-striped-color: var(--cs-text);
    margin: 0; font-size: .85rem;
}
.table > thead th { background: var(--cs-surface-2); color: var(--cs-muted); font-weight: 600; font-size: .75rem; white-space: nowrap; }
.table td, .table th { padding: .3rem .45rem; vertical-align: middle; }

/* Pills (tabs / choosers) */
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--cs-primary);
    --bs-nav-pills-link-active-color: var(--cs-on-primary);
    --bs-nav-link-color: var(--cs-text);
    --bs-nav-link-hover-color: var(--cs-text);
    --bs-nav-link-padding-y: .2rem;
    --bs-nav-link-padding-x: .7rem;
    --bs-nav-pills-border-radius: 999px;
    gap: .25rem; font-size: .82rem;
}
.nav-pills .nav-link { border: 1px solid var(--cs-border); background: var(--cs-surface-2); display: inline-flex; align-items: center; gap: .3rem; }
.nav-pills .nav-link:hover { background: var(--cs-border); }
.nav-pills .nav-link.active { border-color: var(--cs-primary); }

/* Alerts and badges keep Bootstrap's look; tighten spacing */
.alert { --bs-alert-padding-y: .4rem; --bs-alert-padding-x: .65rem; --bs-alert-margin-bottom: .5rem; font-size: .85rem; }
.badge { font-weight: 600; }

/* Dropdowns, modals, pagination */
.dropdown-menu {
    --bs-dropdown-bg: var(--cs-surface); --bs-dropdown-color: var(--cs-text); --bs-dropdown-border-color: var(--cs-border);
    --bs-dropdown-link-color: var(--cs-text); --bs-dropdown-link-hover-bg: var(--cs-surface-2); --bs-dropdown-link-hover-color: var(--cs-text);
    --bs-dropdown-link-active-bg: var(--cs-primary); --bs-dropdown-link-active-color: var(--cs-on-primary);
    --bs-dropdown-header-color: var(--cs-muted); font-size: .88rem;
    /* Same look as MyChessClub: rounded panel with room inside, rounded rows, soft shadow */
    --bs-dropdown-border-radius: 12px; --bs-dropdown-padding-x: .4rem; --bs-dropdown-padding-y: .4rem;
    --bs-dropdown-item-padding-x: .85rem; --bs-dropdown-item-padding-y: .45rem; --bs-dropdown-item-border-radius: 8px;
    --bs-dropdown-link-hover-color: var(--cs-accent-text);
    box-shadow: 0 18px 24px -6px rgba(0, 0, 0, .28);
}
.dropdown-item { border-radius: 8px; transition: background-color .15s ease, color .15s ease; }
.dropdown-item:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: -2px; }
/* Language button: globe + the current language's short tag (KU, AR, EN…), no arrow */
.cs-lang-btn { width: auto; display: inline-flex; align-items: center; gap: 5px; padding-inline: 8px 9px; font-size: 1.15rem; line-height: 1; }
.btn.cs-lang-btn { padding-block: .3rem; }
.cs-lang-tag { font-size: 11px; font-weight: 700; letter-spacing: .5px; line-height: 1; }
.modal { --bs-modal-bg: var(--cs-surface); --bs-modal-color: var(--cs-text); --bs-modal-border-color: var(--cs-border);
    --bs-modal-header-border-color: var(--cs-border); --bs-modal-footer-border-color: var(--cs-border);
    --bs-modal-header-padding: .5rem .75rem; --bs-modal-padding: .65rem .75rem; }
.modal-title { font-size: 1rem; font-weight: 600; }
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.pagination {
    --bs-pagination-bg: var(--cs-surface); --bs-pagination-color: var(--cs-text); --bs-pagination-border-color: var(--cs-border);
    --bs-pagination-hover-bg: var(--cs-surface-2); --bs-pagination-hover-color: var(--cs-text); --bs-pagination-hover-border-color: var(--cs-border);
    --bs-pagination-active-bg: var(--cs-primary); --bs-pagination-active-border-color: var(--cs-primary); --bs-pagination-active-color: var(--cs-on-primary);
    --bs-pagination-disabled-bg: var(--cs-surface-2); --bs-pagination-disabled-color: var(--cs-muted); --bs-pagination-disabled-border-color: var(--cs-border);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(var(--cs-primary-rgb), .25); margin: 0;
}

/* SweetAlert surface; its buttons carry colours per call */
.swal2-popup { background: var(--cs-surface) !important; color: var(--cs-text) !important; border: 1px solid var(--cs-border); }
.swal2-title, .swal2-html-container { color: var(--cs-text) !important; }
.swal2-toast { box-shadow: 0 4px 16px rgba(0, 0, 0, .2) !important; }
.swal2-styled.swal2-confirm, .swal2-styled.swal2-cancel { color: #fff !important; }
.swal2-styled:focus-visible { box-shadow: 0 0 0 3px rgba(var(--cs-primary-rgb), .5) !important; }

/* Flatpickr keeps its own light calendar; the input follows the theme */
.flatpickr-input[readonly] { background-color: var(--cs-input-bg); color: var(--cs-text); }

/* ---------- 2. Small helpers Bootstrap does not have ---------- */
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.cs-ltr { direction: ltr; text-align: start; }
.cs-click { cursor: pointer; }
.cs-w-xs { width: 90px !important; }
.cs-w-sm { width: 112px !important; }
.cs-w-md { max-width: 150px; }
.cs-grow { flex: 1 1 200px; min-width: 170px; }
.cs-grow-md { flex: 1 1 220px; max-width: 360px; }
.cs-accent-text { color: var(--cs-accent-text); }

/* ---------- 3. Office layout: side menu + top bar ---------- */
.cs-shell { display: flex; min-height: 100vh; }
.cs-side {
    width: 214px; flex: 0 0 214px; display: flex; flex-direction: column;
    background: var(--cs-nav-bg); color: var(--cs-nav-text);
    border-inline-end: 3px solid var(--cs-nav-line);
    position: sticky; top: 0; height: 100vh;
}
.cs-brand {
    display: flex; align-items: center; gap: .5rem; padding: .65rem .9rem;
    font-weight: 700; font-size: 1rem; color: var(--cs-nav-text); text-decoration: none;
    border-bottom: 1px solid var(--cs-nav-bg-2);
}
.cs-brand:hover { color: var(--cs-nav-text); }
.cs-brand > i { color: var(--cs-nav-active-text); font-size: 1.25rem; }
.cs-brand-logo { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; flex: 0 0 28px; }
.cs-brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-nav { padding: .4rem; display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; overflow-y: auto; }
.cs-nav-section { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cs-nav-muted); padding: .5rem .6rem .1rem; }
.cs-nav a { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border-radius: 8px; color: var(--cs-nav-text); text-decoration: none; }
.cs-nav a:hover { background: var(--cs-nav-bg-2); color: var(--cs-nav-text); }
.cs-nav a.active { background: var(--cs-nav-active-bg); color: var(--cs-nav-active-text); font-weight: 600; box-shadow: inset 3px 0 0 var(--cs-nav-line); }
[dir="rtl"] .cs-nav a.active { box-shadow: inset -3px 0 0 var(--cs-nav-line); }
.cs-nav a:focus-visible { outline: 2px solid var(--cs-nav-line); outline-offset: 1px; }

.cs-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cs-top {
    height: 46px; display: flex; align-items: center; gap: .5rem; padding: 0 .75rem;
    background: var(--cs-surface); color: var(--cs-text); border-bottom: 1px solid var(--cs-border);
    position: sticky; top: 0; z-index: 1020;
}
.cs-page-title { font-weight: 600; font-size: 1rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-top-actions { margin-inline-start: auto; display: flex; align-items: center; gap: .25rem; }
.cs-icon-btn {
    width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--cs-text); font-size: 1.05rem;
}
.cs-icon-btn:hover { background: var(--cs-surface-2); border-color: var(--cs-border); color: var(--cs-text); }
.cs-icon-btn:active { background: var(--cs-border); }
.cs-icon-btn:focus-visible { outline: 2px solid var(--cs-primary); outline-offset: 1px; }
.cs-user-btn {
    display: inline-flex; align-items: center; gap: .4rem; height: 34px; padding: 0 .65rem;
    border-radius: 8px; border: 1px solid var(--cs-border); background: var(--cs-surface-2); color: var(--cs-text); font-size: .85rem;
}
.cs-user-btn:hover { background: var(--cs-border); color: var(--cs-text); }
.cs-user-btn:focus-visible { outline: 2px solid var(--cs-primary); outline-offset: 1px; }
.cs-content { padding: .75rem; flex: 1 1 auto; }
.cs-menu-btn { display: none; }

/* Radio in the side menu (sits on the midnight menu in both modes) */
.cs-radio { margin: .4rem; padding: .4rem; border-radius: 10px; background: var(--cs-nav-bg-2); color: var(--cs-nav-text); display: flex; flex-direction: column; gap: .25rem; }
.cs-radio-row { display: flex; align-items: center; gap: .4rem; }
.cs-radio-play {
    width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--cs-accent); color: var(--cs-on-accent); border: 1px solid var(--cs-accent); font-size: 1.05rem;
}
.cs-radio-play:hover { background: var(--cs-accent-hover); color: var(--cs-on-accent); }
.cs-radio-play:focus-visible { outline: 2px solid var(--cs-nav-text); outline-offset: 2px; }
.cs-radio-play:disabled { background: var(--cs-nav-bg); border-color: var(--cs-nav-muted); color: var(--cs-nav-muted); }
.cs-radio-play.playing { background: #047857; border-color: #047857; color: #fff; }
.cs-radio-play.error { background: #dc2626; border-color: #dc2626; color: #fff; }
.cs-radio .form-select { min-width: 0; flex: 1 1 auto; font-size: .78rem; padding-top: .15rem; padding-bottom: .15rem;
    background-color: var(--cs-nav-bg); color: var(--cs-nav-text); border-color: var(--cs-nav-muted); }
.cs-radio .form-range { flex: 1 1 auto; height: 1rem; }
.cs-radio .bi-volume-down, .cs-radio .bi-volume-up { color: var(--cs-nav-muted); }

@media (max-width: 991.98px) {
    .cs-menu-btn { display: inline-flex; }
    .cs-side { position: fixed; inset-inline-start: 0; top: 0; z-index: 1045; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 24px rgba(0, 0, 0, .35); }
    [dir="rtl"] .cs-side { transform: translateX(100%); }
    .cs-side.open { transform: translateX(0) !important; }
    .cs-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 1040; display: none; }
    .cs-backdrop.show { display: block; }
    .cs-content { padding: 0; }
    .cs-top { height: 42px; padding: 0 .35rem; }
    .cs-user-name { display: none; }
}
/* Phones: edge to edge, seams instead of gutters */
@media (max-width: 767.98px) {
    .cs-content .card { border-radius: 0; border-inline: 0; box-shadow: none; }
    .cs-content .alert { border-radius: 0; margin-bottom: 3px; }
    .cs-stack > * + * { margin-top: 3px !important; }
}

/* ---------- 4. Office screen pieces ---------- */
/* Dashboard tiles */
.cs-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.cs-tile { display: flex; flex-direction: row; align-items: center; gap: .65rem; padding: .5rem .75rem; }
.cs-tile > i { font-size: 1.4rem; width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--cs-soft); color: var(--cs-soft-text); border: 1px solid var(--cs-soft-border); }
.cs-tile.debt > i { background: var(--cs-danger-soft); color: var(--cs-danger-text); border-color: var(--cs-danger-soft-border); }
.cs-tile.good > i { background: var(--cs-success-soft); color: var(--cs-success-text); border-color: var(--cs-success-soft-border); }
.cs-tile.warn > i { background: var(--cs-warning-soft); color: var(--cs-warning-text); border-color: var(--cs-warning-soft-border); }
/* A tile that opens a page: same look, the value keeps the normal text colour */
a.cs-tile { color: var(--cs-text); text-decoration: none; }
a.cs-tile:hover { border-color: var(--cs-accent); color: var(--cs-text); }
.cs-tile-label { font-size: .75rem; color: var(--cs-muted); }
.cs-tile-value { font-size: 1.15rem; font-weight: 700; line-height: 1.2; }
@media (max-width: 767.98px) {
    .cs-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
    .cs-tile { padding: .4rem .5rem; }
    .cs-tile > i { width: 32px; height: 32px; font-size: 1.1rem; }
}

/* Phone list rows (sales, debts) */
.cs-list-item { padding: .4rem .65rem; border-bottom: 1px solid var(--cs-border); display: block; color: var(--cs-text); text-decoration: none; }
.cs-list-item:hover { background: var(--cs-surface-2); color: var(--cs-text); }
.cs-list-l1 { display: flex; align-items: center; gap: .4rem; font-weight: 600; }
.cs-list-l1 .cs-end { margin-inline-start: auto; }
.cs-list-l2 { font-size: .8rem; color: var(--cs-muted); }

/* Sale form: compact field grid + sticky action bar */
.cs-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .25rem .5rem; }
.cs-fields .wide { grid-column: span 2; }
.cs-fields .full { grid-column: 1 / -1; }
.cs-section-title { display: flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .85rem; margin-bottom: .25rem; }
.cs-section-title > i { color: var(--cs-accent-text); }
.cs-remaining { font-weight: 700; background: var(--cs-surface-2); }
.cs-remaining.has-debt { color: var(--cs-danger-text); }
.cs-form-actions {
    position: sticky; bottom: 0; z-index: 5; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .4rem;
    padding: .4rem .65rem; background: var(--cs-surface); border-top: 1px solid var(--cs-border);
}
@media (max-width: 575.98px) { .cs-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px .4rem; } }

/* Extra search filters: inline on desktop, behind a button on phones */
.cs-extra { display: contents; }
@media (max-width: 767.98px) {
    .cs-extra { display: none; }
    .cs-extra.show { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; width: 100%; }
    .cs-extra .form-control, .cs-extra .form-select { flex: 1 1 120px; max-width: none !important; width: auto !important; }
}

/* Phone box: country code + number */
.cs-phone .form-select { flex: 0 0 auto; width: auto; max-width: 92px; padding-inline-end: 1.6rem; }
.cs-phone-hint { font-size: .72rem; color: var(--cs-danger-text); }

/* Site settings: logo preview */
.cs-logo-preview {
    width: 64px; height: 64px; border-radius: 10px; object-fit: contain; flex: 0 0 64px;
    background: var(--cs-surface-2); border: 1px solid var(--cs-border); color: var(--cs-muted);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem;
}

/* Sign-in page */
.cs-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: .75rem;
    background: radial-gradient(900px 420px at 70% 20%, var(--cs-hero-from), var(--cs-hero-to)); }
.cs-login { width: 100%; max-width: 360px; }
.cs-login .card-header { border-bottom: 3px solid var(--cs-accent); }
@media (max-width: 575.98px) {
    .cs-login-wrap { align-items: stretch; padding: 0; }
    .cs-login { max-width: none; border-radius: 0; border: 0; }
}

/* ---------- 5. Printing an office page (reports) ---------- */
@media print {
    .cs-side, .cs-top, .cs-backdrop, .cs-form-actions { display: none !important; }
    .cs-content { padding: 0 !important; }
    .card { box-shadow: none !important; border: 0 !important; }
    body { background: #fff !important; color: #000 !important; }
}

/* ---------- 6. Public website ----------
   Menu and dark band use the --cs-nav-* / --cs-hero-* slots (midnight in both modes);
   everything else sits on page/surface slots and flips with light/dark. */
.cs-public { font-size: 1rem; }
.swal2-styled.swal2-confirm.cs-swal-primary { background: var(--cs-primary) !important; color: var(--cs-on-primary) !important; }

.cs-pubnav { background: var(--cs-nav-bg); border-bottom: 3px solid var(--cs-nav-line); --bs-navbar-padding-y: .5rem;
    --bs-navbar-color: var(--cs-nav-text); --bs-navbar-hover-color: #fff; --bs-navbar-active-color: var(--cs-nav-active-text);
    --bs-navbar-brand-color: var(--cs-nav-text); --bs-navbar-brand-hover-color: var(--cs-nav-text); }
.cs-pubnav .nav-link { font-weight: 600; border-radius: 8px; padding-inline: .8rem !important; }
.cs-pubnav .nav-link:hover { background: var(--cs-nav-bg-2); }
.cs-pubnav .nav-link.active { color: var(--cs-nav-active-text); }
.cs-pub-brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.2rem; color: var(--cs-nav-text); }
.cs-pub-logo { width: 38px; height: 38px; object-fit: contain; border-radius: 8px; }
.cs-pub-mark { width: 38px; height: 38px; border-radius: 10px; display: inline-grid; place-items: center; font-size: 1.2rem;
    background: var(--cs-accent); color: var(--cs-on-accent); }
.cs-pub-ghost { --bs-btn-color: var(--cs-nav-text); --bs-btn-border-color: var(--cs-nav-muted); --bs-btn-bg: transparent;
    --bs-btn-hover-color: var(--cs-on-accent); --bs-btn-hover-bg: var(--cs-accent); --bs-btn-hover-border-color: var(--cs-accent);
    --bs-btn-active-color: var(--cs-on-accent); --bs-btn-active-bg: var(--cs-accent); --bs-btn-active-border-color: var(--cs-accent);
    --bs-btn-focus-shadow-rgb: 212, 168, 67; }

.cs-eyebrow { font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--cs-accent-text); }
.cs-section { padding: 3rem 0; }
.cs-section-heading { font-size: 1.9rem; font-weight: 800; margin: .15rem 0 .35rem; }
@media (max-width: 767.98px) { .cs-section { padding: 1.75rem 0; } .cs-section-heading { font-size: 1.45rem; } }

/* Banner */
.cs-hero { background: radial-gradient(1100px 480px at 70% 30%, var(--cs-hero-from), var(--cs-hero-to)); color: var(--cs-hero-text); padding: 3.5rem 0 6.5rem; }
.cs-hero .cs-eyebrow { color: var(--cs-accent); }
.cs-hero-title { font-size: 2.8rem; font-weight: 800; line-height: 1.1; margin: .5rem 0 1rem; }
.cs-hero-title em { font-style: normal; color: var(--cs-accent); }
.cs-hero-text { color: var(--cs-hero-muted); font-size: 1.1rem; margin-bottom: 1.4rem; }
.cs-hero-photo { border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px rgba(0, 0, 0, .45); border: 1px solid var(--cs-nav-bg-2); }
.cs-hero-photo img { object-fit: cover; }
.cs-hero-search { margin-top: -4rem; position: relative; z-index: 2; box-shadow: 0 20px 40px rgba(0, 0, 0, .18); }
@media (max-width: 991.98px) { .cs-hero { padding: 2rem 0 5rem; } .cs-hero-title { font-size: 2rem; } }

/* Drawn car (no photo yet): gold body in both modes, midnight glass */
.cs-drawing { width: 100%; filter: drop-shadow(0 24px 24px rgba(0, 0, 0, .35)); }
.cs-drawing .shadow { fill: rgba(0, 0, 0, .25); }
.cs-drawing .body { fill: var(--cs-accent); }
.cs-drawing .glass { fill: var(--cs-hero-from); }
.cs-drawing .light { fill: #fde68a; }
.cs-drawing .tail { fill: #f87171; }
.cs-drawing .tyre { fill: #0b1220; }
.cs-drawing .rim { fill: #9ca3af; }

/* Car cards */
.cs-car { overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.cs-car:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, .14); }
.cs-car-pic { display: block; background: var(--cs-surface-2); }
.cs-car-pic img { object-fit: cover; }
.cs-car-nopic { display: grid !important; place-items: center; font-size: 3rem; color: var(--cs-muted); background: var(--cs-surface-2); }
.cs-car-badge { position: absolute; top: .75rem; inset-inline-start: .75rem; z-index: 2; }
.cs-badge-accent { background: var(--cs-accent); color: var(--cs-on-accent); }
.cs-why > .card-body > i { font-size: 1.8rem; color: var(--cs-accent-text); }

/* Dark band (about teaser) */
.cs-band { background: var(--cs-nav-bg); color: var(--cs-nav-text); padding: 3rem 0; }
.cs-band .cs-eyebrow { color: var(--cs-accent); }
.cs-band-text { color: var(--cs-hero-muted); font-size: 1.05rem; }
.cs-stat { background: var(--cs-nav-bg-2); border-radius: 12px; padding: .75rem .5rem; }
.cs-stat b, .cs-stat-card b { display: block; font-size: 1.6rem; color: var(--cs-accent); }
.cs-stat-card b { color: var(--cs-accent-text); }
.cs-stat span, .cs-stat-card span { font-size: .85rem; }
.cs-contact-strip { border-inline-start: 4px solid var(--cs-accent); }

/* Page heading band on inner pages */
.cs-pagehead { background: var(--cs-surface); border-bottom: 1px solid var(--cs-border); padding: 1.5rem 0 1.25rem; }
.breadcrumb { --bs-breadcrumb-divider-color: var(--cs-muted); --bs-breadcrumb-item-active-color: var(--cs-muted); }

/* One car: gallery, specs, price */
.cs-gallery { overflow: hidden; position: relative; outline: none; }
.cs-gallery-main { background: var(--cs-surface-2); }
.cs-gallery-main img { object-fit: contain; }
.cs-gallery-nav { position: absolute; top: 40%; width: 42px; height: 42px; border-radius: 50%; border: 0; z-index: 3;
    background: rgba(11, 18, 32, .65); color: #fff; font-size: 1.2rem; display: grid; place-items: center; }
.cs-gallery-nav:hover { background: rgba(11, 18, 32, .85); color: #fff; }
.cs-gallery-nav:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 2px; }
.cs-gallery-nav.prev { inset-inline-start: .6rem; }
.cs-gallery-nav.next { inset-inline-end: .6rem; }
.cs-gallery-thumbs { display: flex; gap: .4rem; padding: .5rem; overflow-x: auto; background: var(--cs-surface); }
.cs-thumb { flex: 0 0 84px; height: 62px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: var(--cs-surface-2); }
.cs-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cs-thumb.active { border-color: var(--cs-accent); }
.cs-thumb:focus-visible { outline: 2px solid var(--cs-primary); outline-offset: 1px; }
.cs-spec { display: flex; gap: .6rem; align-items: flex-start; }
.cs-spec > i { font-size: 1.3rem; color: var(--cs-accent-text); }
.cs-prewrap { white-space: pre-line; }
.cs-price-card { border-top: 4px solid var(--cs-accent); }
.cs-sticky { position: sticky; top: 5rem; }
@media (max-width: 991.98px) { .cs-sticky { position: static; } }

/* About + contact */
.cs-about-visual { border-radius: 20px; padding: 2rem; background: radial-gradient(600px 300px at 60% 30%, var(--cs-hero-from), var(--cs-hero-to)); display: grid; place-items: center; min-height: 260px; }
.cs-about-visual img { max-width: 70%; max-height: 220px; object-fit: contain; }
.cs-contact-row { display: flex; gap: .75rem; align-items: flex-start; }
.cs-contact-row > i { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 10px; display: grid; place-items: center; font-size: 1.2rem;
    background: var(--cs-nav-bg); color: var(--cs-accent); }

/* Footer (midnight in both modes) */
.cs-pubfoot { background: var(--cs-nav-bg); color: var(--cs-nav-text); margin-top: 1rem; border-top: 3px solid var(--cs-nav-line); }
.cs-pubfoot a { color: var(--cs-nav-text); text-decoration: none; }
.cs-pubfoot a:hover { color: var(--cs-accent); }
.cs-pubfoot-muted { color: var(--cs-nav-muted); }
.cs-pubfoot-bottom { border-top: 1px solid var(--cs-nav-bg-2); color: var(--cs-nav-muted); }

/* ---------- 7. Office: cars in stock ---------- */
.cs-stock-card { overflow: hidden; }
.cs-featured { position: absolute; top: .55rem; inset-inline-end: .55rem; z-index: 2; width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center; background: var(--cs-accent); color: var(--cs-on-accent); font-size: .85rem; }
.cs-photo-tile { position: relative; border: 1px solid var(--cs-border); border-radius: 10px; overflow: hidden; background: var(--cs-surface-2); }
.cs-photo-tile img { object-fit: cover; }
.cs-photo-tools { display: flex; gap: .25rem; padding: .25rem; background: var(--cs-surface); border-top: 1px solid var(--cs-border); }
.list-group { --bs-list-group-bg: var(--cs-surface); --bs-list-group-color: var(--cs-text); --bs-list-group-border-color: var(--cs-border); }
.cs-message.unread { box-shadow: inset 4px 0 0 var(--cs-accent); background: var(--cs-soft); }
[dir="rtl"] .cs-message.unread { box-shadow: inset -4px 0 0 var(--cs-accent); }
.cs-nav .badge { margin-inline-start: auto; }

/* ---------- 8. Sign-in / register popup + customer pieces ---------- */
.cs-auth .modal-content { border: 0; }
.cs-auth-side { background: radial-gradient(700px 400px at 70% 20%, var(--cs-hero-from), var(--cs-hero-to)); color: var(--cs-hero-text); }
.cs-auth-side h2 { color: var(--cs-hero-text); }
.cs-auth-points li { display: flex; gap: .6rem; align-items: flex-start; color: var(--cs-hero-muted); }
.cs-auth-points i { color: var(--cs-accent); font-size: 1.1rem; }
.cs-auth .modal-header { border-bottom: 3px solid var(--cs-accent); }
.cs-auth .modal-body { padding: 1.25rem; }
@media (min-width: 992px) { .cs-auth .modal-body { min-height: 470px; } }
.cs-steps { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--cs-muted); }
.cs-step { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.cs-step b { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center;
    background: var(--cs-surface-2); border: 1px solid var(--cs-border); color: var(--cs-text); font-size: .8rem; }
.cs-step.active { color: var(--cs-text); font-weight: 600; }
.cs-step.active b { background: var(--cs-accent); border-color: var(--cs-accent); color: var(--cs-on-accent); }
.cs-step-line { flex: 1 1 auto; height: 2px; background: var(--cs-border); }
.cs-chips { display: flex; flex-wrap: wrap; gap: .35rem; max-height: 9.5rem; overflow-y: auto; padding: .15rem; }
.cs-chips .btn-check:checked + .btn { background: var(--cs-accent); border-color: var(--cs-accent); color: var(--cs-on-accent); }
.btn-check:checked + .btn-outline-secondary { background: var(--cs-primary); border-color: var(--cs-primary); color: var(--cs-on-primary); }
.cs-pub-username { max-width: 9rem; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.cs-news-invite { border-inline-start: 4px solid var(--cs-accent); }
.cs-news-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem;
    background: var(--cs-nav-bg); color: var(--cs-accent); }

/* Day picker in a toolbar (cash box) */
.cs-date-box { width: 7.5rem; }

/* "Find person" box: results open under the search field, over the form */
.cs-person { position: relative; }
.cs-person-results { position: absolute; z-index: 30; inset-inline: 0; top: 2rem; max-height: 16rem; overflow-y: auto; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.cs-section-title .cs-person { flex: 1 1 14rem; max-width: 22rem; font-weight: normal; }

/* A card that switches between two sets of fields (e.g. a bought car / an owner's car on sale) */
.cs-toggle-box:not(.is-consign) .js-consign-only,
.cs-toggle-box.is-consign .js-buy-only,
.cs-toggle-box.mode-percent .js-mode-amount,
.cs-toggle-box:not(.mode-percent) .js-mode-percent { display: none !important; }

/* One-line cell that cuts long text (last note in a list) */
.cs-clip { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Paper steps: switches side by side, wrapping */
.cs-paper-steps { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }

/* Condition report: part · grade buttons · note on one line (wraps on phones) */
.cs-condition-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; padding: .15rem 0; }
.cs-condition-part { flex: 0 0 8.5rem; font-size: .85rem; }
.cs-condition-row .form-control { flex: 1 1 8rem; min-width: 6rem; }
.cs-condition-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .5rem; }
.cs-condition-item { display: flex; align-items: flex-start; gap: .5rem; }
.cs-condition-item > i { font-size: 1.1rem; }

/* Share window: the drawn picture, scaled to the column */
.cs-share-canvas { width: 100%; height: auto; border-radius: .5rem; border: 1px solid var(--cs-border); display: block; }

/* Instalment calculator result box */
.cs-calc-result { background: var(--cs-soft); color: var(--cs-soft-text); border: 1px solid var(--cs-soft-border); border-radius: .5rem; padding: .5rem .75rem; }
.cs-calc-result .text-body-secondary { color: var(--cs-soft-text) !important; opacity: .8; }

/* ---------- 9. Home page designs (Site Settings → Home page design) ----------
   Each design has its own block; colours come from theme slots (--cs-airy-*, --cs-ed-*) with the
   standard page slots as fallback, so a theme that lacks them still renders. */

/* Site settings: the four pictures to pick from */
.cs-design-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
@media (max-width: 991.98px) { .cs-design-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-design-tile { display: flex; flex-direction: column; gap: .2rem; margin: 0; padding: .35rem; cursor: pointer; height: 100%;
    border: 2px solid var(--cs-border); border-radius: .6rem; background: var(--cs-surface); color: var(--cs-text); }
.cs-design-tile img { width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: .4rem; display: block; }
.cs-design-tile:hover { border-color: var(--cs-accent-text); }
.cs-design-name { font-weight: 600; font-size: .85rem; display: flex; align-items: center; gap: .35rem; }
.cs-design-name i { display: none; color: var(--cs-accent-text); }
.btn-check:checked + .cs-design-tile { border-color: var(--cs-accent); background: var(--cs-soft); color: var(--cs-soft-text); }
.btn-check:checked + .cs-design-tile .cs-design-name i { display: inline; color: var(--cs-soft-text); }
.btn-check:checked + .cs-design-tile .text-body-secondary { color: var(--cs-soft-text) !important; }
.btn-check:focus-visible + .cs-design-tile { outline: 2px solid var(--cs-primary); outline-offset: 2px; }

/* 1 — Showroom hero: the cover photo fills the banner's far side and fades into midnight */
.cs-sr-hero { position: relative; overflow: hidden; color: var(--cs-hero-text); padding: 4.5rem 0 7rem;
    background: radial-gradient(1100px 480px at 70% 30%, var(--cs-hero-from), var(--cs-hero-to)); }
.cs-sr-hero .cs-eyebrow { color: var(--cs-accent); }
.cs-sr-hero-img { position: absolute; inset-block: 0; inset-inline-end: 0; width: 70%; height: 100%; object-fit: cover; }
.cs-sr-hero-shade { position: absolute; inset: 0;
    background: linear-gradient(to right, var(--cs-hero-to) 30%, color-mix(in srgb, var(--cs-hero-to) 72%, transparent) 52%, transparent 82%); }
[dir="rtl"] .cs-sr-hero-shade { background: linear-gradient(to left, var(--cs-hero-to) 30%, color-mix(in srgb, var(--cs-hero-to) 72%, transparent) 52%, transparent 82%); }
@media (max-width: 991.98px) {
    .cs-sr-hero { padding: 13rem 0 5rem; }
    .cs-sr-hero-img { width: 100%; height: 22rem; inset-block-end: auto; }
    .cs-sr-hero-shade, [dir="rtl"] .cs-sr-hero-shade { background: linear-gradient(to top, var(--cs-hero-to) 50%, color-mix(in srgb, var(--cs-hero-to) 60%, transparent) 68%, transparent 90%); }
}

/* 2 — Light and airy */
.cs-airy { background: var(--cs-airy-page, var(--cs-page)); color: var(--cs-airy-text, var(--cs-text)); }
.cs-airy-hero { padding: 3.5rem 0 1rem; }
.cs-airy-eyebrow { font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cs-airy-gold, var(--cs-accent-text)); }
.cs-airy-title { font-size: 3.6rem; font-weight: 300; line-height: 1.05; letter-spacing: -.01em; margin: 0; }
.cs-airy-title em { font-style: normal; font-weight: 600; color: var(--cs-airy-gold, var(--cs-accent-text)); }
.cs-airy-lead { font-size: 1.1rem; line-height: 1.7; color: var(--cs-airy-muted, var(--cs-muted)); }
.cs-airy-muted { color: var(--cs-airy-muted, var(--cs-muted)); }
.cs-airy-price { color: var(--cs-airy-gold, var(--cs-accent-text)); font-weight: 600; }
.cs-airy-btn { border-radius: 999px; padding-inline: 1.75rem;
    --bs-btn-bg: var(--cs-airy-btn-bg, var(--cs-primary)); --bs-btn-color: var(--cs-airy-btn-text, var(--cs-on-primary)); --bs-btn-border-color: var(--cs-airy-btn-bg, var(--cs-primary));
    --bs-btn-hover-bg: var(--cs-airy-btn-hover, var(--cs-primary-hover)); --bs-btn-hover-color: var(--cs-airy-btn-text, var(--cs-on-primary)); --bs-btn-hover-border-color: var(--cs-airy-btn-hover, var(--cs-primary-hover));
    --bs-btn-active-bg: var(--cs-airy-btn-hover, var(--cs-primary-hover)); --bs-btn-active-color: var(--cs-airy-btn-text, var(--cs-on-primary)); --bs-btn-active-border-color: var(--cs-airy-btn-hover, var(--cs-primary-hover));
    --bs-btn-focus-shadow-rgb: 212, 168, 67; }
.cs-airy-link { color: var(--cs-airy-text, var(--cs-text)); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--cs-accent); padding-bottom: .15rem; }
.cs-airy-link:hover { color: var(--cs-airy-gold, var(--cs-accent-text)); }
.cs-airy-link:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 3px; }
.cs-airy-feature { position: relative; display: block; border-radius: 1.75rem; overflow: hidden; aspect-ratio: 4 / 3; background: var(--cs-airy-surface, var(--cs-surface)); }
.cs-airy-feature img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.cs-airy-feature:hover img { transform: scale(1.03); }
.cs-airy-feature:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 4px; }
.cs-airy-feature-info { position: absolute; inset-inline-start: 1.25rem; bottom: 1.25rem; max-width: calc(100% - 2.5rem);
    display: flex; flex-direction: column; gap: .15rem; padding: .9rem 1.2rem; border-radius: 1rem;
    background: var(--cs-airy-surface, var(--cs-surface)); color: var(--cs-airy-text, var(--cs-text)); box-shadow: 0 16px 40px rgba(0, 0, 0, .18); }
.cs-airy-feature-title { font-size: 1.35rem; font-weight: 600; }
.cs-airy-search { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: .25rem; align-items: center; margin-top: 2.5rem;
    padding: .45rem; padding-inline-start: 1.75rem; border-radius: 999px; border: 1px solid var(--cs-airy-line, var(--cs-border));
    background: var(--cs-airy-surface, var(--cs-surface)); color: var(--cs-airy-text, var(--cs-text)); }
.cs-airy-field { display: flex; flex-direction: column; min-width: 0; padding-inline: .75rem; border-inline-start: 1px solid var(--cs-airy-line, var(--cs-border)); }
.cs-airy-field:first-child { border-inline-start: 0; padding-inline-start: 0; }
.cs-airy-field label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cs-airy-muted, var(--cs-muted)); }
.cs-airy-field .form-select { border: 0; background-color: transparent; color: var(--cs-airy-text, var(--cs-text)); padding-block: .1rem; padding-inline-start: 0; box-shadow: none; }
.cs-airy-field .form-select:focus { box-shadow: 0 2px 0 var(--cs-accent); }
.cs-airy-search .btn { border-radius: 999px; padding: .75rem 1.6rem; }
@media (max-width: 991.98px) {
    .cs-airy-hero { padding-top: 2rem; }
    .cs-airy-title { font-size: 2.4rem; }
    .cs-airy-search { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 1.25rem; padding: .75rem; gap: .5rem; margin-top: 1.5rem; }
    .cs-airy-field, .cs-airy-field:first-child { border: 0; padding: 0; }
    .cs-airy-search .btn { grid-column: 1 / -1; }
}
.cs-airy-section { padding: 4rem 0; }
@media (max-width: 767.98px) { .cs-airy-section { padding: 2rem 0; } }
.cs-airy-heading { font-size: 2.4rem; font-weight: 300; margin: 0 0 .35rem; }
@media (max-width: 767.98px) { .cs-airy-heading { font-size: 1.7rem; } }
.cs-airy-car { position: relative; display: flex; flex-direction: column; gap: .35rem; color: var(--cs-airy-text, var(--cs-text)); text-decoration: none; }
.cs-airy-car-pic { display: block; border-radius: 1.25rem; overflow: hidden; background: var(--cs-airy-surface, var(--cs-surface)); margin-bottom: .5rem; }
.cs-airy-car-pic img { object-fit: cover; transition: transform .3s ease; }
.cs-airy-car:hover .cs-airy-car-pic img { transform: scale(1.04); }
.cs-airy-car:hover .cs-airy-car-title { color: var(--cs-airy-gold, var(--cs-accent-text)); }
.cs-airy-car:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 4px; border-radius: 1.25rem; }
.cs-airy-car-title { font-size: 1.2rem; font-weight: 600; }
.cs-airy-why { border-top: 1px solid var(--cs-airy-line, var(--cs-border)); padding-top: 2.5rem; }
.cs-airy-num { font-size: 2rem; font-weight: 300; line-height: 1; color: var(--cs-airy-gold, var(--cs-accent-text)); }
.cs-airy-band { border-radius: 1.75rem; padding: 2.5rem; background: var(--cs-airy-band, var(--cs-surface-2)); color: var(--cs-airy-text, var(--cs-text)); }
@media (max-width: 767.98px) { .cs-airy-band { padding: 1.25rem; border-radius: 1.25rem; } }
.cs-airy-quote { font-size: 1.35rem; font-weight: 300; line-height: 1.5; }
.cs-airy-stat b { display: block; font-size: 2.4rem; font-weight: 300; line-height: 1.1; color: var(--cs-airy-text, var(--cs-text)); }
.cs-airy-stat span { font-size: .85rem; color: var(--cs-airy-muted, var(--cs-muted)); }

/* 3 — Catalogue first */
.cs-cat-strip { background: var(--cs-surface); color: var(--cs-text); border-bottom: 1px solid var(--cs-border); padding: .55rem 0; font-size: .9rem; }
.cs-cat-strip-title { font-size: 1rem; font-weight: 800; margin: 0; }
.cs-cat-promise { align-items: center; gap: .3rem; color: var(--cs-muted); }
.cs-cat-promise i { color: var(--cs-accent-text); font-size: 1.1rem; }
.cs-cat-strip-link { margin-inline-start: auto; font-weight: 700; color: var(--cs-accent-text); text-decoration: none; }
.cs-cat-strip-link:hover { color: var(--cs-text); }
.cs-cat-filters legend { float: none; font-size: inherit; margin-bottom: .35rem; }
.cs-cat-makes { max-height: 13rem; overflow-y: auto; display: flex; flex-direction: column; gap: .15rem; }
@media (min-width: 992px) { .cs-cat-filters { position: sticky; top: 5rem; } }

/* 4 — Midnight editorial */
.cs-ed { background: var(--cs-ed-page, var(--cs-page)); color: var(--cs-ed-text, var(--cs-text)); }
.cs-ed-hero { position: relative; overflow: hidden; }
.cs-ed-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-ed-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg,
    var(--cs-ed-page, var(--cs-page)) 0%, color-mix(in srgb, var(--cs-ed-page, var(--cs-page)) 85%, transparent) 38%,
    color-mix(in srgb, var(--cs-ed-page, var(--cs-page)) 12%, transparent) 62%, color-mix(in srgb, var(--cs-ed-page, var(--cs-page)) 95%, transparent) 100%); }
.cs-ed-hero-inner { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; padding-block: 4rem 3rem; }
.cs-ed-hero.has-photo .cs-ed-hero-inner { min-height: 44rem; }
.cs-ed-eyebrow { font-size: .8rem; letter-spacing: .3em; text-transform: uppercase; color: var(--cs-ed-gold, var(--cs-accent-text)); }
.cs-ed-title { font-size: clamp(2.6rem, 7vw, 6.4rem); font-weight: 300; line-height: 1; letter-spacing: -.02em; margin: 0; max-width: 60rem; }
.cs-ed-title em { font-style: normal; font-weight: 700; color: var(--cs-ed-gold, var(--cs-accent-text)); }
.cs-ed-lead { max-width: 34rem; font-size: 1.1rem; line-height: 1.65; color: var(--cs-ed-muted, var(--cs-muted)); }
.cs-ed-muted { color: var(--cs-ed-muted, var(--cs-muted)); }
.cs-ed-link { font-size: .85rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; padding-bottom: .3rem;
    color: var(--cs-ed-gold, var(--cs-accent-text)); border-bottom: 1px solid var(--cs-ed-rule, var(--cs-accent)); }
.cs-ed-link:hover { color: var(--cs-ed-text, var(--cs-text)); }
.cs-ed-link:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 3px; }
.cs-ed-section { padding: 5rem 0; }
@media (max-width: 767.98px) { .cs-ed-section { padding: 2.5rem 0; } .cs-ed-hero.has-photo .cs-ed-hero-inner { min-height: 34rem; } }
.cs-ed-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 2rem; border-bottom: 1px solid var(--cs-ed-line, var(--cs-border)); padding-bottom: 1.25rem; margin-bottom: 3rem; }
.cs-ed-heading { font-size: 3rem; font-weight: 300; margin: 0; }
@media (max-width: 767.98px) { .cs-ed-heading { font-size: 2rem; } .cs-ed-head { margin-bottom: 1.5rem; } }
.cs-ed-rows { gap: 4.5rem; }
@media (max-width: 991.98px) { .cs-ed-rows { gap: 2.5rem; } }
.cs-ed-row { color: var(--cs-ed-text, var(--cs-text)); text-decoration: none; }
.cs-ed-row:hover { color: var(--cs-ed-text, var(--cs-text)); }
.cs-ed-row:hover .cs-ed-model { color: var(--cs-ed-gold, var(--cs-accent-text)); }
.cs-ed-row:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 6px; }
.cs-ed-pic { display: block; overflow: hidden; background: var(--cs-ed-line, var(--cs-surface-2)); }
.cs-ed-pic img { object-fit: cover; transition: transform .4s ease; }
.cs-ed-row:hover .cs-ed-pic img { transform: scale(1.03); }
.cs-ed-index { font-size: 1.1rem; color: var(--cs-ed-gold, var(--cs-accent-text)); }
.cs-ed-make { font-size: .8rem; letter-spacing: .24em; text-transform: uppercase; color: var(--cs-ed-muted, var(--cs-muted)); }
.cs-ed-model { font-size: 2.8rem; font-weight: 300; line-height: 1.05; transition: color .15s ease; }
@media (max-width: 767.98px) { .cs-ed-model { font-size: 2rem; } }
.cs-ed-price { font-size: 1.8rem; font-weight: 600; color: var(--cs-ed-gold, var(--cs-accent-text)); }
.cs-ed-why { border-top: 1px solid var(--cs-ed-rule, var(--cs-accent)); padding-top: 1.25rem; height: 100%; }
.cs-ed-why-title { font-size: 1.35rem; font-weight: 400; margin-bottom: .5rem; }
.cs-ed-stats { border-block: 1px solid var(--cs-ed-line, var(--cs-border)); padding-block: 2.5rem; }
.cs-ed-stat { text-align: start; }
.cs-ed-stat b { display: block; font-size: clamp(2.2rem, 5vw, 4.5rem); font-weight: 300; line-height: 1; color: var(--cs-ed-gold, var(--cs-accent-text)); }
.cs-ed-stat span { font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cs-ed-muted, var(--cs-muted)); }

/* ---------- 10. Sold cars: pictures in the list, details page, big viewer ----------
   Pieces that sit ON a photo (sample badge, counter, arrows) and the big viewer use one fixed dark look in
   both themes — photos read best on dark, and a photo's colours do not change with the theme. */
.cs-row-link { cursor: pointer; }
.cs-sale-thumb-cell { width: 1%; padding-block: .2rem !important; }
.cs-sale-thumb { width: 64px; height: 44px; flex: 0 0 64px; border-radius: .4rem; object-fit: cover; display: block;
    background: var(--cs-surface-2); border: 1px solid var(--cs-border); }
.cs-sale-thumb-empty { display: grid; place-items: center; color: var(--cs-muted); font-size: 1.2rem; }
.cs-sale-item { display: flex; align-items: center; gap: .55rem; }
.cs-sale-item-text { flex: 1 1 auto; min-width: 0; }

/* "Sample picture" label on a photo: amber text on midnight glass (#fde68a on ~#0b1220 = 13:1) */
.cs-sample-badge { position: absolute; bottom: .4rem; inset-inline-start: .4rem; z-index: 2; font-weight: 600;
    background: rgba(11, 18, 32, .82); color: #fde68a; border: 1px solid rgba(253, 230, 138, .45); }
.cs-photo-tile .cs-sample-badge { bottom: 2.6rem; font-size: .65rem; }

/* Details page: picture stage (dark in both themes), arrows, counter, credit, thumbnails */
.cs-sale-gallery { overflow: hidden; }
/* the overlays sit beside the .ratio box, not in it — Bootstrap stretches every direct child of .ratio over the whole picture */
.cs-sale-stage { position: relative; background: #0e1626; }
.cs-sale-stage-btn { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.cs-sale-stage-btn img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cs-sale-stage-btn:focus-visible { outline: 3px solid var(--cs-accent); outline-offset: -3px; }
.cs-sale-stage-badge { top: .6rem; bottom: auto; inset-inline-start: .6rem; }
.cs-sale-counter { position: absolute; bottom: .6rem; inset-inline-end: .6rem; z-index: 2; padding: .15rem .5rem; border-radius: 999px;
    font-size: .8rem; background: rgba(11, 18, 32, .78); color: #f3f4f6; }
.cs-sale-credit { font-size: .72rem; color: var(--cs-muted); padding: .2rem .6rem; min-height: 1.2rem; }
.cs-sale-credit:empty { display: none; }
.cs-sale-gallery .cs-gallery-thumbs { border-top: 1px solid var(--cs-border); }
.cs-sale-gallery .cs-thumb { flex-basis: 76px; height: 56px; }
.cs-sale-nopic { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; min-height: 16rem; text-align: center; }
.cs-sale-nopic > i { font-size: 3rem; color: var(--cs-muted); }

/* Label + value pairs: the value sits right beside its label */
.cs-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem 1rem; margin: 0; }
.cs-facts-one { grid-template-columns: minmax(0, 1fr); }
.cs-fact { display: flex; align-items: baseline; gap: .45rem; min-width: 0; }
.cs-fact dt { font-weight: 400; font-size: .8rem; color: var(--cs-muted); white-space: nowrap; }
.cs-fact dd { margin: 0; font-weight: 600; color: var(--cs-text); overflow-wrap: anywhere; }
@media (max-width: 399.98px) { .cs-facts { grid-template-columns: minmax(0, 1fr); } }

/* Big picture viewer (SweetAlert): midnight in both themes
   title #ffffff on #0b1220 18.9:1 · count #cbd5e1 12.6:1 · credit #94a3b8 7.5:1 · arrow icon #fff on its glass */
.swal2-popup.cs-viewer-popup { padding: 0; border-radius: .75rem; overflow: hidden; }
.swal2-html-container.cs-viewer-html { margin: 0 !important; padding: 0 !important; overflow: hidden; text-align: start; }
.cs-viewer-stage { position: relative; background: #05080f; display: flex; align-items: center; justify-content: center; }
.cs-viewer-stage img { max-width: 100%; max-height: calc(100vh - 7rem); max-height: calc(100dvh - 7rem); object-fit: contain; display: block; }
.cs-viewer-badge { position: absolute; top: .75rem; inset-inline-start: .75rem; padding: .2rem .55rem; border-radius: .4rem; font-size: .8rem; font-weight: 600;
    background: rgba(11, 18, 32, .82); color: #fde68a; border: 1px solid rgba(253, 230, 138, .45); }
.cs-viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .14); color: #ffffff; font-size: 1.4rem; display: grid; place-items: center; cursor: pointer; }
.cs-viewer-nav:hover { background: rgba(255, 255, 255, .28); color: #ffffff; }
.cs-viewer-nav:active { background: rgba(255, 255, 255, .38); }
.cs-viewer-nav:focus-visible { outline: 2px solid #d4a843; outline-offset: 2px; }
.cs-viewer-nav.prev { inset-inline-start: .75rem; }
.cs-viewer-nav.next { inset-inline-end: .75rem; }
.cs-viewer-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .9rem; padding: .5rem .9rem; background: #0b1220; }
.cs-viewer-title { font-weight: 700; color: #ffffff; }
.cs-viewer-count { color: #cbd5e1; font-size: .85rem; }
.cs-viewer-credit { color: #94a3b8; font-size: .75rem; margin-inline-start: auto; }
.swal2-close.cs-viewer-close { color: #e5e7eb; background: rgba(11, 18, 32, .6); border-radius: 50%; width: 2.4rem; height: 2.4rem; margin: .4rem; font-size: 1.8rem; z-index: 3; }
.swal2-close.cs-viewer-close:hover { color: #ffffff; background: rgba(11, 18, 32, .85); }
.swal2-close.cs-viewer-close:focus-visible { box-shadow: 0 0 0 2px #d4a843; }
@media (max-width: 575.98px) {
    .swal2-popup.cs-viewer-popup { width: 100vw !important; border-radius: 0; }
    .swal2-container:has(.cs-viewer-popup) { padding: 0; }
    .cs-viewer-stage img { max-height: calc(100dvh - 5rem); }
    .cs-viewer-nav { width: 40px; height: 40px; font-size: 1.2rem; }
    .cs-viewer-bar { padding: .35rem .6rem; }
}

/* ---------- 11. Appointments calendar + purchase of several cars ---------- */
.cs-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .4rem; }
@media (max-width: 991.98px) { .cs-week { grid-template-columns: minmax(0, 1fr); gap: .25rem; } .cs-day.empty .cs-day-none { display: none; } }
.cs-day { display: flex; flex-direction: column; gap: .3rem; min-height: 9rem; padding: .35rem; border-radius: .5rem;
    background: var(--cs-surface-2); border: 1px solid var(--cs-border); color: var(--cs-text); }
@media (max-width: 991.98px) { .cs-day { min-height: 0; } }
.cs-day.today { border-color: var(--cs-accent); box-shadow: inset 0 0 0 1px var(--cs-accent); }
.cs-day-head { display: flex; flex-wrap: wrap; gap: .35rem; align-items: baseline; font-size: .78rem; font-weight: 700; color: var(--cs-muted); }
.cs-day.today .cs-day-head { color: var(--cs-accent-text); }
.cs-day-none { color: var(--cs-muted); font-size: .8rem; text-align: center; padding-top: 1.5rem; }
.cs-appt { display: flex; flex-direction: column; align-items: flex-start; gap: .05rem; width: 100%; text-align: start; padding: .3rem .45rem;
    border-radius: .45rem; border: 1px solid var(--cs-border); background: var(--cs-surface); color: var(--cs-text); font-size: .8rem; line-height: 1.25; cursor: pointer; }
.cs-appt:hover { border-color: var(--cs-accent-text); background: var(--cs-surface); color: var(--cs-text); }
.cs-appt:focus-visible { outline: 2px solid var(--cs-primary); outline-offset: 1px; }
.cs-appt-time { font-weight: 700; display: inline-flex; gap: .3rem; align-items: center; }
.cs-appt.kind-testdrive .cs-appt-time i { color: var(--cs-accent-text); }
.cs-appt.kind-delivery .cs-appt-time i { color: var(--cs-success-text); }
.cs-appt-name { font-weight: 600; overflow-wrap: anywhere; }
.cs-appt-sub { color: var(--cs-muted); font-size: .74rem; overflow-wrap: anywhere; }
.cs-appt-status { font-size: .7rem; font-weight: 700; padding: 0 .35rem; border-radius: 999px;
    background: var(--cs-surface-2); color: var(--cs-muted); border: 1px solid var(--cs-border); margin-top: .1rem; }
.cs-appt.status-done { opacity: .7; }
.cs-appt.status-noshow .cs-appt-status { background: var(--cs-danger-soft); color: var(--cs-danger-text); border-color: var(--cs-danger-soft-border); }
.cs-appt.status-cancelled .cs-appt-name { text-decoration: line-through; color: var(--cs-muted); }
.cs-purchase-table .form-control { min-width: 6.5rem; }
.cs-purchase-table td { padding-block: .2rem; }

/* ---------- 12. Home page designs 5–7 (monthly payment, cinematic, app style) ---------- */

/* 5 — Monthly payment first */
.cs-pay-hero { padding: 3rem 0 2.5rem; }
.cs-pay-title { font-size: 2.6rem; font-weight: 800; line-height: 1.1; margin: 0; }
.cs-pay-title em { font-style: normal; color: var(--cs-accent-text); }
.cs-pay-ask { display: flex; flex-direction: column; gap: .6rem; padding: 1.25rem; border-radius: 1rem;
    background: var(--cs-surface); color: var(--cs-text); border: 1px solid var(--cs-border); box-shadow: var(--cs-shadow); }
.cs-pay-ask-label { font-size: 1.35rem; font-weight: 700; margin: 0; }
.cs-pay-select { flex: 1 1 12rem; max-width: 22rem; }
.cs-pay-ask-note { font-size: .9rem; color: var(--cs-muted); }
.cs-pay-trade { border-top: 4px solid var(--cs-accent); }
.cs-pay-trade-icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-size: 1.4rem;
    background: var(--cs-soft); color: var(--cs-soft-text); border: 1px solid var(--cs-soft-border); }
.cs-pay-car { overflow: hidden; color: var(--cs-text); text-decoration: none; position: relative; transition: transform .15s ease, box-shadow .15s ease; }
.cs-pay-car:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, .14); color: var(--cs-text); }
.cs-pay-car:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 2px; }
.cs-pay-monthly { display: inline-flex; align-items: baseline; gap: .3rem; align-self: flex-start; margin-top: .25rem; padding: .2rem .6rem; border-radius: 999px;
    background: var(--cs-soft); color: var(--cs-soft-text); border: 1px solid var(--cs-soft-border); }
.cs-pay-monthly b { font-size: 1.15rem; }
.cs-pay-step { display: flex; gap: .75rem; align-items: flex-start; height: 100%; padding: 1rem; border-radius: .75rem;
    background: var(--cs-surface); color: var(--cs-text); border: 1px solid var(--cs-border); }
.cs-pay-step-n { flex: 0 0 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800;
    background: var(--cs-accent); color: var(--cs-on-accent); }
@media (max-width: 767.98px) { .cs-pay-hero { padding: 1.5rem 0; } .cs-pay-title { font-size: 1.9rem; } .cs-pay-ask { padding: .85rem; } .cs-pay-ask-label { font-size: 1.1rem; } }

/* 6 — Cinematic (banner dark in both modes; photo/video underneath) */
.cs-cine-hero { position: relative; overflow: hidden; min-height: 78vh; display: flex; align-items: flex-end;
    background: var(--cs-hero-to); color: var(--cs-hero-text); }
.cs-cine-media, .cs-cine-slides, .cs-cine-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-cine-slide { opacity: 0; animation: cs-cine-5 30s infinite; transform: scale(1.02); }
.cs-cine-slides.n-1 .cs-cine-slide { opacity: 1; animation: cs-cine-zoom 20s ease-in-out infinite alternate; }
.cs-cine-slides.n-2 .cs-cine-slide { animation-name: cs-cine-2; animation-duration: 12s; }
.cs-cine-slides.n-3 .cs-cine-slide { animation-name: cs-cine-3; animation-duration: 18s; }
.cs-cine-slides.n-4 .cs-cine-slide { animation-name: cs-cine-4; animation-duration: 24s; }
.cs-cine-slide.s-1 { animation-delay: 6s; } .cs-cine-slide.s-2 { animation-delay: 12s; } .cs-cine-slide.s-3 { animation-delay: 18s; } .cs-cine-slide.s-4 { animation-delay: 24s; }
@keyframes cs-cine-2 { 0% { opacity: 0; transform: scale(1.02); } 8% { opacity: 1; } 50% { opacity: 1; } 58% { opacity: 0; transform: scale(1.12); } 100% { opacity: 0; } }
@keyframes cs-cine-3 { 0% { opacity: 0; transform: scale(1.02); } 6% { opacity: 1; } 33% { opacity: 1; } 39% { opacity: 0; transform: scale(1.12); } 100% { opacity: 0; } }
@keyframes cs-cine-4 { 0% { opacity: 0; transform: scale(1.02); } 5% { opacity: 1; } 25% { opacity: 1; } 30% { opacity: 0; transform: scale(1.12); } 100% { opacity: 0; } }
@keyframes cs-cine-5 { 0% { opacity: 0; transform: scale(1.02); } 4% { opacity: 1; } 20% { opacity: 1; } 24% { opacity: 0; transform: scale(1.12); } 100% { opacity: 0; } }
@keyframes cs-cine-zoom { from { transform: scale(1.02); } to { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .cs-cine-slide { animation: none !important; } .cs-cine-slide.s-0 { opacity: 1; } }
.cs-cine-shade { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--cs-hero-to) 35%, transparent) 0%,
    color-mix(in srgb, var(--cs-hero-to) 15%, transparent) 40%, color-mix(in srgb, var(--cs-hero-to) 92%, transparent) 100%); }
.cs-cine-inner { position: relative; display: flex; flex-direction: column; gap: 1rem; padding-block: 3rem; }
.cs-cine-hero .cs-eyebrow { color: var(--cs-accent); }
.cs-cine-title { font-size: clamp(2.2rem, 5.5vw, 4.4rem); font-weight: 800; line-height: 1.05; margin: 0; max-width: 46rem; color: #ffffff; }
.cs-cine-title em { font-style: normal; color: var(--cs-accent); }
/* Frosted panel: #ffffff text on midnight glass; the selects keep the page's own form colours */
.cs-cine-search { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: .5rem; padding: .75rem; border-radius: 1rem; max-width: 56rem;
    background: rgba(11, 18, 32, .55); border: 1px solid rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
@media (max-width: 767.98px) {
    .cs-cine-hero { min-height: 70vh; }
    .cs-cine-inner { padding-block: 1.5rem; }
    .cs-cine-search { grid-template-columns: minmax(0, 1fr); }
}
.cs-strip { display: flex; gap: .85rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; scrollbar-width: thin; }
.cs-strip-car { flex: 0 0 min(78vw, 300px); scroll-snap-align: start; display: flex; flex-direction: column; border-radius: .9rem; overflow: hidden; text-decoration: none;
    background: var(--cs-surface); color: var(--cs-text); border: 1px solid var(--cs-border); position: relative; }
.cs-strip-car.small-card { flex-basis: min(62vw, 220px); }
.cs-strip-car:hover { color: var(--cs-text); border-color: var(--cs-accent-text); }
.cs-strip-car:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 2px; }
.cs-strip-pic { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--cs-surface-2); }
.cs-strip-pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cs-strip-body { display: flex; flex-direction: column; gap: .15rem; padding: .6rem .75rem .75rem; }
.cs-strip-price { font-weight: 700; color: var(--cs-accent-text); }
.cs-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.cs-bento-tile { display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem; border-radius: 1rem;
    background: var(--cs-surface); color: var(--cs-text); border: 1px solid var(--cs-border); }
.cs-bento-tile.big { grid-column: span 2; grid-row: span 2; justify-content: center; }
.cs-bento-tile.stat { justify-content: center; }
.cs-bento-tile.stat b { font-size: 2.2rem; font-weight: 800; line-height: 1; color: var(--cs-accent-text); }
.cs-bento-tile.stat span { color: var(--cs-muted); font-size: .9rem; }
.cs-bento-tile.why > i { font-size: 1.5rem; color: var(--cs-accent-text); }
@media (max-width: 991.98px) { .cs-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cs-bento-tile.big { grid-row: auto; } }

/* 7 — App style */
.cs-app-title { font-size: 2rem; font-weight: 800; line-height: 1.1; margin: 0; }
.cs-app-title em { font-style: normal; color: var(--cs-accent-text); }
.cs-app-search { display: flex; align-items: center; gap: .5rem; padding: .35rem .35rem .35rem .9rem; border-radius: 999px;
    background: var(--cs-surface); color: var(--cs-text); border: 1px solid var(--cs-border); box-shadow: var(--cs-shadow); }
.cs-app-search > i { color: var(--cs-muted); }
.cs-app-search .form-control { border: 0; background: transparent; box-shadow: none; color: var(--cs-text); padding-inline: 0; }
.cs-app-search .btn { border-radius: 999px; padding-inline: 1.2rem; }
.cs-app-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(118px, auto); gap: .75rem; }
.cs-app-tile { display: flex; flex-direction: column; justify-content: flex-end; gap: .15rem; padding: .9rem 1rem; border-radius: 1.1rem; text-decoration: none; overflow: hidden;
    background: var(--cs-surface); color: var(--cs-text); border: 1px solid var(--cs-border); transition: transform .15s ease, border-color .15s ease; }
a.cs-app-tile:hover { transform: translateY(-2px); border-color: var(--cs-accent-text); color: var(--cs-text); }
a.cs-app-tile:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 2px; }
.cs-app-tile > i { font-size: 1.35rem; color: var(--cs-accent-text); margin-bottom: auto; }
.cs-app-tile > b { font-size: 1.35rem; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.cs-app-tile > span { font-size: .85rem; color: var(--cs-muted); }
/* Featured car: the whole photo (shrunk to fit, never cut) on a fixed midnight frame, details below it — same in both modes */
.cs-app-tile.feature { grid-column: span 2; grid-row: span 2; position: relative; padding: 0; gap: 0; justify-content: flex-start; min-height: 250px;
    background: #0b1220; color: #ffffff; }
a.cs-app-tile.feature:hover { color: #ffffff; }
.cs-app-tile > .cs-app-feature-pic { position: relative; display: block; flex: 1 1 auto; min-height: 0; aspect-ratio: 16 / 9; }
.cs-app-feature-pic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.cs-app-tile.feature.empty { justify-content: center; padding: 1rem; background: radial-gradient(600px 300px at 60% 30%, var(--cs-hero-from), var(--cs-hero-to)); }
/* Details under the photo: white text on solid midnight in both modes (#ffffff on #0b1220 = 18.9:1) */
.cs-app-tile > .cs-app-feature-info { position: relative; display: flex; flex-direction: column; gap: .15rem; padding: .55rem .9rem .7rem; color: #ffffff; background: #0b1220; }
.cs-app-tile.accent { background: var(--cs-accent); color: var(--cs-on-accent); border-color: var(--cs-accent); }
.cs-app-tile.accent > i, .cs-app-tile.accent > span { color: var(--cs-on-accent); }
/* WhatsApp green in both modes: #0b2e17 text on #25d366 = 7.9:1 */
.cs-app-tile.whatsapp { background: #25d366; color: #0b2e17; border-color: #1ebe5b; }
.cs-app-tile.whatsapp > i, .cs-app-tile.whatsapp > span { color: #0b2e17; }
a.cs-app-tile.whatsapp:hover { background: #1ebe5b; color: #0b2e17; border-color: #17a64f; }
.cs-app-chip { display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start; padding: .25rem .65rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
    background: var(--cs-soft); color: var(--cs-soft-text); border: 1px solid var(--cs-soft-border); }
.cs-app-feature-info .cs-app-chip { background: var(--cs-accent); color: var(--cs-on-accent); border-color: var(--cs-accent); }
.cs-app-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
@media (max-width: 991.98px) {
    .cs-app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(104px, auto); gap: .5rem; }
    .cs-app-title { font-size: 1.6rem; }
    /* the bottom bar must not hide the end of the page */
    .cs-public:has(.cs-app-bar) { padding-bottom: 4.2rem; }
}
.cs-app-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 1030; display: flex; justify-content: space-around; padding: .25rem .25rem calc(.25rem + env(safe-area-inset-bottom));
    background: var(--cs-nav-bg); border-top: 2px solid var(--cs-nav-line); }
.cs-app-bar > a, .cs-app-bar > button { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: .1rem; min-height: 48px; padding: .25rem 0;
    font-size: .68rem; text-decoration: none; color: var(--cs-nav-text); background: transparent; border: 0; }
.cs-app-bar > a > i, .cs-app-bar > button > i { font-size: 1.25rem; }
.cs-app-bar > .active { color: var(--cs-nav-active-text); }
.cs-app-bar > a:focus-visible, .cs-app-bar > button:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: -2px; }

/* 8 — Store: browse panel + featured slideshow + endless grid of whole photos.
   Light (midnight-gold): text #111827 on card #ffffff 17.7:1 · counts #7a5c14 on #f4f1e9 5.6:1 · muted #4b5563 on #fff 7.6:1
   Dark:                  text #e5e7eb on card #121b2d 14.3:1 · counts #e2bb5e on #1a2439 8.4:1 · muted #a3aec2 on #121b2d 8.0:1
   The slideshow is a fixed midnight frame in both modes (white #ffffff on #121b2e 17.4:1, price #f0d58a 12.6:1). */
.cs-store-section { padding: 1rem 0; }
.cs-store-search { display: flex; align-items: center; gap: .25rem; padding: .3rem; padding-inline-start: .9rem; border-radius: 999px;
    background: var(--cs-surface); color: var(--cs-text); border: 1px solid var(--cs-border); box-shadow: var(--cs-shadow); }
.cs-store-search > i { color: var(--cs-muted); }
.cs-store-search .form-control { flex: 1 1 auto; border: 0; background: transparent; box-shadow: none; color: var(--cs-text); }
.cs-store-search .form-select { flex: 0 0 auto; width: auto; max-width: 13rem; border: 0; border-radius: 0; border-inline-start: 1px solid var(--cs-border);
    background-color: transparent; color: var(--cs-text); box-shadow: none; }
.cs-store-search .btn { border-radius: 999px; padding-inline: 1.4rem; font-weight: 700; }

.cs-store-top { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: .9rem; align-items: stretch; }
.cs-store-browse { display: flex; flex-direction: column; gap: .6rem; padding: .9rem; border-radius: 1rem;
    background: var(--cs-surface); color: var(--cs-text); border: 1px solid var(--cs-border); }
.cs-store-label { font-size: .78rem; font-weight: 700; color: var(--cs-muted); }
.cs-store-rule { height: 1px; background: var(--cs-border); }
.cs-store-circles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem .35rem; }
.cs-store-circle { display: flex; flex-direction: column; align-items: center; gap: .2rem; text-decoration: none; color: var(--cs-text);
    font-size: .74rem; font-weight: 600; text-align: center; line-height: 1.25; }
.cs-store-circle:hover { color: var(--cs-text); }
.cs-store-circle > .ic { width: 54px; height: 54px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-size: 1.25rem;
    background: var(--cs-surface-2); color: var(--cs-text); border: 2px solid var(--cs-border); transition: border-color .15s ease; }
.cs-store-circle > .ic > img { width: 100%; height: 100%; object-fit: contain; }
.cs-store-circle:hover > .ic { border-color: var(--cs-accent-text); }
.cs-store-circle.active > .ic { background: var(--cs-nav-bg); color: var(--cs-nav-active-text); border-color: var(--cs-accent); }
.cs-store-circle b, .cs-store-chip b, .cs-store-budgets b { color: var(--cs-accent-text); font-weight: 700; }
.cs-store-circle:focus-visible, .cs-store-chip:focus-visible, .cs-store-tab:focus-visible, .cs-store-budgets a:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 2px; border-radius: .5rem; }
.cs-store-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.cs-store-chip { padding: .22rem .65rem; border-radius: 999px; font-size: .8rem; font-weight: 600; text-decoration: none; white-space: nowrap;
    background: var(--cs-surface-2); color: var(--cs-text); border: 1px solid var(--cs-border); }
.cs-store-chip:hover { color: var(--cs-text); border-color: var(--cs-accent-text); }
.cs-store-budgets { flex-direction: column; gap: .3rem; font-size: .84rem; font-weight: 600; }
.cs-store-budgets a { display: flex; gap: .5rem; color: var(--cs-text); text-decoration: none; }
.cs-store-budgets a:hover { color: var(--cs-accent-text); }

/* Fixed height: the slideshow (and the browse panel beside it) never grows or shrinks between cars */
.cs-store-feature { position: relative; height: 360px; border-radius: 1rem; overflow: hidden; background: #0b1220; color: #ffffff; }
.cs-store-feature.empty { display: grid; place-items: center; padding: 1rem; }
.cs-store-feature .carousel-inner, .cs-store-feature .carousel-item { height: 100%; }
.cs-store-slide { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.cs-store-slide-pic { position: relative; background: #0b1220; }
.cs-store-slide-pic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cs-store-slide-info { display: flex; flex-direction: column; gap: .45rem; min-height: 0; overflow: hidden; padding: 1.2rem 1.2rem 2.2rem; background: #121b2e; color: #ffffff; }
.cs-store-slide-info > * { flex-shrink: 0; }
.cs-store-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 999px;
    font-size: .75rem; font-weight: 800; background: #d4a843; color: #0b1220; }
a.cs-store-slide-title { font-size: 1.35rem; font-weight: 800; line-height: 1.3; color: #ffffff; text-decoration: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
a.cs-store-slide-title:hover { color: #f0d58a; }
a.cs-store-slide-title:focus-visible { outline: 2px solid #d4a843; outline-offset: 2px; }
.cs-store-slide-facts { font-size: .82rem; line-height: 1.5; color: #cbd5e1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-store-pills { flex-wrap: nowrap; gap: .35rem; overflow: hidden; }
.cs-store-pills > span { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding: .1rem .55rem; border-radius: 999px; font-size: .74rem; color: #e2e8f0; border: 1px solid #3b4a66; }
.cs-store-slide-price { font-size: 1.8rem; font-weight: 800; line-height: 1.1; color: #f0d58a; }
.cs-store-slide-monthly { font-size: .8rem; line-height: 1.5; color: #cbd5e1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cs-store-slide-monthly b { color: #ffffff; }
/* Buttons sit above the whole-slide link */
.cs-store-slide-actions { position: relative; z-index: 2; gap: .5rem; margin-top: .25rem; }
.cs-store-btn-gold { flex: 1 1 auto; display: grid; place-items: center; min-height: 40px; border-radius: .6rem; font-weight: 800; font-size: .9rem;
    text-decoration: none; background: #d4a843; color: #0b1220; }
.cs-store-btn-gold:hover { background: #e2bb5e; color: #0b1220; }
.cs-store-btn-gold:active { background: #c29632; color: #0b1220; }
.cs-store-btn-wa { display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; padding: 0 .9rem; border-radius: .6rem; font-weight: 700; font-size: .9rem;
    text-decoration: none; background: transparent; color: #4ade80; border: 1px solid #25d366; }
.cs-store-btn-wa:hover { background: #25d366; color: #0b2e17; }
.cs-store-btn-gold:focus-visible, .cs-store-btn-wa:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.cs-store-nav { position: absolute; top: 50%; z-index: 3; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; place-items: center;
    background: rgba(18, 27, 46, .85); color: #ffffff; border: 1px solid #3b4a66; }
.cs-store-nav:hover { background: #d4a843; color: #0b1220; border-color: #d4a843; }
.cs-store-nav:focus-visible { outline: 2px solid #d4a843; outline-offset: 2px; }
.cs-store-nav.prev { inset-inline-start: .75rem; }
.cs-store-nav.next { inset-inline-end: calc(300px + .75rem); }
.cs-store-feature .carousel-indicators.cs-store-dots { z-index: 3; margin: 0; bottom: .7rem; left: auto; right: auto; inset-inline-start: 0; inset-inline-end: 300px; gap: .35rem; }
.cs-store-dots [data-bs-target] { box-sizing: border-box; width: 7px; height: 7px; margin: 0; padding: 0; border: 0; border-radius: 4px;
    background: #64748b; opacity: 1; text-indent: 0; transition: width .2s ease, background-color .2s ease; }
.cs-store-dots [data-bs-target].active { width: 22px; background: #d4a843; }

.cs-store-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.cs-store-fact { display: flex; align-items: center; gap: .6rem; min-height: 56px; padding: .45rem .9rem; border-radius: .8rem; text-decoration: none;
    background: var(--cs-surface); color: var(--cs-text); border: 1px solid var(--cs-border); }
a.cs-store-fact:hover { color: var(--cs-text); border-color: var(--cs-accent-text); }
.cs-store-fact > i { font-size: 1.3rem; color: var(--cs-accent-text); }
.cs-store-fact > b { font-size: 1.25rem; font-weight: 800; white-space: nowrap; }
.cs-store-fact > span { font-size: .82rem; color: var(--cs-muted); line-height: 1.3; }
.cs-store-fact.accent { background: var(--cs-accent); color: var(--cs-on-accent); border-color: var(--cs-accent); }
.cs-store-fact.accent > i, .cs-store-fact.accent > span { color: var(--cs-on-accent); }

.cs-store-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.cs-store-count { padding: .05rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--cs-nav-bg); color: var(--cs-nav-text); }
.cs-store-tabs { display: flex; gap: .35rem; margin-inline-start: .5rem; }
.cs-store-tab { padding: .28rem .8rem; border-radius: 999px; font-size: .82rem; font-weight: 600; text-decoration: none; white-space: nowrap;
    background: var(--cs-surface); color: var(--cs-text); border: 1px solid var(--cs-border); }
.cs-store-tab:hover { color: var(--cs-text); border-color: var(--cs-accent-text); }
.cs-store-tab.active, .cs-store-tab.active:hover { background: var(--cs-nav-bg); color: var(--cs-nav-text); border-color: var(--cs-accent); }
.cs-store-sort { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto; font-size: .82rem; color: var(--cs-muted); }
.cs-store-sort .form-select { width: auto; }

.cs-store-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .85rem; }
.cs-store-card { display: flex; flex-direction: column; border-radius: .9rem; overflow: hidden; text-decoration: none;
    background: var(--cs-surface); color: var(--cs-text); border: 1px solid var(--cs-border); transition: transform .15s ease, border-color .15s ease; }
.cs-store-card:hover { color: var(--cs-text); border-color: var(--cs-accent-text); transform: translateY(-2px); }
.cs-store-card:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 2px; }
.cs-store-pic { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--cs-surface-2); }
.cs-store-pic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.cs-store-pic > .cs-car-nopic { position: absolute; inset: 0; }
.cs-store-tag { position: absolute; top: .45rem; inset-inline-start: .45rem; max-width: calc(100% - 2.8rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: .08rem .5rem; border-radius: 999px; font-size: .7rem; font-weight: 700; background: var(--cs-surface); color: var(--cs-accent-text); border: 1px solid var(--cs-border); }
.cs-store-tag.reserved { background: var(--cs-warning-soft); color: var(--cs-warning-text); border-color: var(--cs-warning-soft-border); }
.cs-store-star { position: absolute; top: .45rem; inset-inline-end: .45rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center;
    font-size: .68rem; background: #d4a843; color: #0b1220; }
.cs-store-body { display: flex; flex-direction: column; gap: .1rem; padding: .55rem .7rem .7rem; }
.cs-store-title { font-size: .9rem; font-weight: 700; line-height: 1.35; }
.cs-store-facts { font-size: .75rem; color: var(--cs-muted); }
.cs-store-money { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5rem; margin-top: .2rem; }
.cs-store-price { font-size: 1.02rem; font-weight: 800; color: var(--cs-accent-text); }
.cs-store-monthly { font-size: .72rem; color: var(--cs-muted); }

.cs-store-more { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.5rem; padding: .5rem 0; font-size: .85rem; color: var(--cs-muted); }
.cs-store-more > .spinner-border, .cs-store-more > .bi, .cs-store-more > [data-cs-store-retry] { display: none; }
.cs-store-more[data-state="loading"] > .spinner-border { display: inline-block; color: var(--cs-accent-text); }
.cs-store-more[data-state="done"] > .bi-check2-circle { display: inline-block; color: var(--cs-accent-text); }
.cs-store-more[data-state="error"] { color: var(--cs-danger-text); }
.cs-store-more[data-state="error"] > .bi-exclamation-triangle, .cs-store-more[data-state="error"] > [data-cs-store-retry] { display: inline-block; }

@media (max-width: 1199.98px) {
    .cs-store-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    /* Tablets and phones: the browse panel turns into sideways strips above the slideshow */
    .cs-store-top { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
    .cs-store-browse { padding: 0; gap: .5rem; background: transparent; border: 0; }
    .cs-store-circles, .cs-store-chips { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -.75rem; padding-inline: .75rem; }
    .cs-store-circles::-webkit-scrollbar, .cs-store-chips::-webkit-scrollbar, .cs-store-quick::-webkit-scrollbar, .cs-store-tabs::-webkit-scrollbar { display: none; }
    .cs-store-circle { flex: 0 0 64px; }
    .cs-store-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cs-store-quick { display: flex; overflow-x: auto; scrollbar-width: none; gap: .4rem; margin-inline: -.75rem; padding-inline: .75rem; }
    .cs-store-fact { flex: 0 0 auto; min-height: 0; padding: .3rem .7rem; gap: .4rem; border-radius: 999px; }
    .cs-store-fact > i { font-size: 1rem; }
    .cs-store-fact > b { font-size: .9rem; }
    .cs-store-fact > span { font-size: .75rem; white-space: nowrap; }
}
@media (max-width: 767.98px) {
    .cs-store-section { padding: .6rem 0; }
    .cs-store-section > .container { gap: .6rem !important; }
    .cs-store-search { padding: .2rem; padding-inline-start: .7rem; }
    .cs-store-search .btn { padding-inline: .9rem; }
    .cs-store-circle { flex-basis: 58px; font-size: .7rem; }
    .cs-store-circle > .ic { width: 48px; height: 48px; }
    .cs-store-feature { height: auto; }
    .cs-store-slide { grid-template-columns: minmax(0, 1fr); }
    .cs-store-slide-pic { aspect-ratio: 16 / 10; }
    /* Phones: fixed text area under the photo — name and facts one line each, price and monthly share a line */
    .cs-store-slide-info { height: 5rem; flex-flow: row wrap; align-content: flex-start; align-items: baseline; gap: 0 .5rem; padding: .45rem .75rem .5rem; }
    .cs-store-slide-info > a.cs-store-slide-title, .cs-store-slide-info > .cs-store-slide-facts { flex: 0 0 100%; }
    .cs-store-slide-monthly { flex: 1 1 0; min-width: 0; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cs-store-badge { display: none; }
    a.cs-store-slide-title { font-size: 1rem; -webkit-line-clamp: 1; }
    .cs-store-slide-price { font-size: 1.15rem; line-height: 1.3; }
    .cs-store-slide-facts, .cs-store-slide-monthly { font-size: .74rem; }
    .cs-store-feature .carousel-indicators.cs-store-dots { top: .5rem; bottom: auto; inset-inline-start: auto; inset-inline-end: .6rem; }
    .cs-store-head { margin-bottom: .5rem; gap: .4rem; }
    .cs-store-tabs { order: 5; flex: 1 0 100%; margin-inline: -.75rem; padding-inline: .75rem; overflow-x: auto; scrollbar-width: none; }
    .cs-store-tab { padding: .2rem .7rem; font-size: .78rem; }
    .cs-store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-inline: -.25rem; }
    .cs-store-body { padding: .35rem .5rem .5rem; }
    .cs-store-title { font-size: .82rem; }
    .cs-store-facts, .cs-store-monthly { font-size: .7rem; }
    .cs-store-price { font-size: .92rem; }
}

/* Car form: "pick the car" row (make → model → year → version).
   Light: label #1b2740 on #eef1f7 13.9:1, border #cdd5e3 · Dark: label #f0d58a on #2a2410 10.9:1, border #5c4b1c */
.cs-pick { display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); align-items: center; gap: .35rem; margin-bottom: .5rem; padding: .35rem .45rem;
    border-radius: .5rem; background: var(--cs-soft); color: var(--cs-soft-text); border: 1px solid var(--cs-soft-border); }
.cs-pick-label { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 600; white-space: nowrap; color: var(--cs-soft-text); }
@media (max-width: 575.98px) {
    .cs-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cs-pick-label { grid-column: 1 / -1; }
}