/* ==========================================================================
   Dealer site — main stylesheet
   ========================================================================== */
:root {
  --ink: #18191b;
  --dark: var(--ink);
  --on-dark: #fff;
  --field: #fff;
  --ink-2: #3a3c40;
  --muted: #6c6a65;
  --paper: #f6f4ef;
  --card: #ffffff;
  --line: #ddd8ce;
  --line-2: #c9c3b6;
  --plate: #f4c51c;
  --accent: #1f4d3a;
  --danger: #a3311c;
  --radius: 3px;
  --wrap: 1240px;
  --head: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --body: "Source Sans 3", "Segoe UI", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.55 var(--body); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
h1, h2, h3 { font-family: var(--head); font-weight: 700; line-height: 1.05; letter-spacing: .005em; margin: 0 0 .5em; }
h1 { font-size: clamp(34px, 5vw, 56px); }
h2 { font-size: clamp(26px, 3vw, 34px); }
h3 { font-size: 22px; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; color: inherit; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 720px; }
.center { text-align: center; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--dark); color: #fff; padding: 8px 14px; z-index: 99; }
.skip:focus { left: 8px; }
.hp { position: absolute; left: -5000px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- top bar + header ---------- */
.topbar { background: var(--dark); color: #cfccc4; font-size: 14px; }
.topbar-in { display: flex; gap: 22px; align-items: center; min-height: 36px; }
.topbar-addr { margin-right: auto; }
.topbar a { color: #fff; }
.topbar-call { display: none; font-weight: 700; margin-left: auto; }
.hours-now i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #8c8a85; margin-right: 8px; vertical-align: 1px; }
.hours-now.is-open i { background: #5cc97a; box-shadow: 0 0 0 3px rgba(92, 201, 122, .2); }
.hours-now.is-open { color: #fff; }

.site-header { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.header-in { display: flex; align-items: center; gap: 28px; min-height: 76px; }
.brand { text-decoration: none; display: flex; flex-direction: column; line-height: 1; }
.brand:hover { color: var(--ink); }
.brand-name { font-family: var(--head); font-weight: 700; font-size: 28px; text-transform: uppercase; letter-spacing: .02em; }
.brand-tag { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* ---------- buttons + fields ---------- */
.btn { display: inline-block; padding: 12px 20px; border-radius: var(--radius); border: 2px solid var(--ink); font-weight: 700; text-decoration: none; cursor: pointer; text-align: center; line-height: 1.2; background: transparent; transition: background .15s, color .15s; }
.btn-solid { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-solid:hover { background: var(--dark); border-color: var(--dark); color: #fff; }
.btn-line:hover { background: var(--dark); color: #fff; }
.btn-plate { background: var(--dark); color: var(--plate); border-color: var(--dark); }
.btn-plate:hover { background: #000; color: var(--plate); }
.btn-wa { background: #1f8f4e; border-color: #1f8f4e; color: #fff; }
.btn-wa:hover { background: #17713d; color: #fff; }
.btn-block { display: block; width: 100%; }
.btn-sm { padding: 6px 12px; font-size: 14px; }
.arrow-link { font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 1px; }
.arrow-link::after { content: " \2192"; }

.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 14px; font-weight: 600; margin-bottom: 5px; color: var(--ink-2); }
.field input, .field select, .field textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--line-2); border-radius: var(--radius); background: #fff; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0, 0, 0, .07); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

.reg-input { background: var(--plate) !important; border: 2px solid var(--ink) !important; font-family: var(--head) !important; font-weight: 700; font-size: 26px !important; text-transform: uppercase; text-align: center; letter-spacing: .08em; padding: 8px 12px !important; }
.reg-input::placeholder { color: rgba(0, 0, 0, .35); }
.reg-sm { font-size: 20px !important; }

/* ---------- hero ---------- */
.hero { border-bottom: 1px solid var(--line); }
.hero-in { display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px; padding-top: 64px; padding-bottom: 64px; align-items: start; }
.kicker { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); margin-bottom: 14px; }
.hero h1 { font-size: clamp(40px, 5.4vw, 68px); max-width: 15ch; }
.lede { font-size: 20px; color: var(--ink-2); max-width: 46ch; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

.finder { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--ink); padding: 26px; box-shadow: 0 1px 0 var(--line), 8px 8px 0 rgba(0, 0, 0, .04); }
.finder-title { font-family: var(--head); font-weight: 700; font-size: 26px; margin-bottom: 14px; }
.finder-types { border: 0; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 6px; }
.finder-types label, .seg label { cursor: pointer; }
.finder-types input, .seg input { position: absolute; opacity: 0; }
.finder-types span, .seg span { display: inline-block; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 30px; font-size: 15px; font-weight: 600; }
.finder-types input:checked + span, .seg input:checked + span { background: var(--dark); border-color: var(--dark); color: #fff; }
.finder-types input:focus-visible + span, .seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.finder-foot { font-size: 14px; color: var(--muted); margin: 14px 0 0; }

/* ---------- USP strip ---------- */
.usps { background: var(--dark); color: #fff; }
.usps-in { display: grid; grid-template-columns: repeat(4, 1fr); }
.usps p { margin: 0; padding: 20px 20px 20px 0; font-weight: 600; display: flex; gap: 12px; align-items: baseline; }
.usps p + p { padding-left: 20px; border-left: 1px solid rgba(255, 255, 255, .14); }
.usps b { font-family: var(--head); color: var(--plate); font-size: 20px; }

/* ---------- blocks / grid ---------- */
.block { padding: 56px 0; }
.block-tight { padding-top: 0; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 26px; }
.block-head h2 { margin: 0; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 22px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- vehicle card ---------- */
.card { background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; transition: border-color .15s; }
.card:hover { border-color: var(--ink-2); }
.card-img { position: relative; display: block; aspect-ratio: 4 / 3; background: #e9e5dc; overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-img img.ph { object-fit: contain; padding: 14%; }
.card.is-reserved .card-img img { filter: grayscale(.6); opacity: .8; }
.card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.card-title { font-size: 24px; margin: 0; }
.card-title a { text-decoration: none; }
.card-title a::after { content: ""; } /* keep link small but card img also links */
.card-variant { font-size: 15px; color: var(--muted); margin: 2px 0 12px; min-height: 1.5em; }
.card-specs { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; color: var(--ink-2); align-items: center; }
.card-specs li + li:not(.plate)::before { content: ""; }
.plate { background: var(--plate); color: #111; font-family: var(--head); font-weight: 700; font-size: 15px; padding: 1px 8px; border: 1px solid #111; border-radius: 2px; letter-spacing: .05em; }
.card-price { margin-top: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; border-top: 1px dashed var(--line); padding-top: 12px; }
.card-price strong { font-family: var(--head); font-size: 30px; line-height: 1; }
.card-price s { color: var(--muted); font-size: 15px; }
.card-price .monthly { font-size: 14px; color: var(--accent); font-weight: 600; margin-left: auto; }
.vat { font-size: 13px; font-weight: 700; color: var(--muted); }

.tag { position: absolute; top: 12px; left: 0; padding: 4px 12px 4px 10px; font-family: var(--head); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: #fff; background: var(--dark); }
.tag-reduced { background: var(--danger); }
.tag-new { background: var(--accent); }
.tag-reserved { background: #b7791f; }
.tag-sold { background: var(--danger); }
.tag-lg { font-size: 20px; top: 18px; padding: 6px 16px; }

/* ---------- type links ---------- */
.types { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border-top: 1px solid var(--line); }
.type-link { text-decoration: none; padding: 22px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; }
.types .type-link:not(:first-child) { padding-left: 22px; border-left: 1px solid var(--line); }
.type-name { font-family: var(--head); font-weight: 700; font-size: 34px; line-height: 1; }
.type-name::after { content: " \2192"; color: var(--accent); }
.type-meta { color: var(--muted); font-size: 15px; margin-top: 6px; }

/* ---------- sell band ---------- */
.sellband { background: var(--accent); color: #fff; }
.sellband-in { display: grid; grid-template-columns: 1.4fr 1fr; gap: 50px; padding-top: 52px; padding-bottom: 52px; align-items: center; }
.sellband p { color: rgba(255, 255, 255, .85); max-width: 56ch; margin: 0; }
.reg-form { display: flex; gap: 0; border: 3px solid var(--dark); background: var(--dark); }
.reg-form .reg-input { flex: 1; min-width: 0; border: 0 !important; border-radius: 0; font-size: 30px !important; padding: 12px !important; }
.reg-form .btn { border-radius: 0; border: 0; }

/* ---------- visit ---------- */
.visit { border-top: 1px solid var(--line); padding: 56px 0; }
.visit-in { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; }
.visit-addr { font-size: 20px; font-weight: 600; }
.hours-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.hours-table th, .hours-table td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--line); font-weight: 400; }
.hours-table td { text-align: right; }
.hours-table tr.today th, .hours-table tr.today td { font-weight: 700; }
.hours-table tr.today th::after { content: " · today"; color: var(--accent); font-weight: 600; font-size: 14px; }

/* ---------- page heads / crumbs ---------- */
.pagehead { border-bottom: 1px solid var(--line); padding: 30px 0 26px; margin-bottom: 34px; }
.pagehead h1 { margin-bottom: 8px; }
.pagehead-sub { color: var(--muted); margin: 0; }
.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.crumbs a { color: var(--muted); }
.crumbs span { margin: 0 6px; }
.typeswitch a { margin-right: 10px; color: var(--ink); font-weight: 600; text-decoration: none; }
.typeswitch a.on { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--accent); }

/* ---------- stock ---------- */
.stock-layout { display: grid; grid-template-columns: 260px 1fr; gap: 36px; padding-bottom: 70px; }
.filters-form { position: sticky; top: 96px; }
.filters-toggle { display: none; }
.filters .field > span { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.filters .field select, .filters .field input { padding: 9px 10px; font-size: 16px; }
.reset { display: block; text-align: center; font-size: 14px; margin-top: 10px; color: var(--muted); }
.results-bar { display: flex; justify-content: flex-end; margin-bottom: 16px; }
.sortform label { font-size: 15px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.sortform select { padding: 7px 10px; border: 1px solid var(--line-2); border-radius: var(--radius); background: #fff; color: var(--ink); }
.pager { display: flex; gap: 6px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }
.pager a, .pager span { padding: 8px 14px; border: 1px solid var(--line-2); text-decoration: none; background: #fff; }
.pager .on { background: var(--dark); color: #fff; border-color: var(--dark); }
.empty { background: var(--card); border: 1px dashed var(--line-2); padding: 34px; }

/* ---------- vehicle page ---------- */
.vehicle { padding-top: 24px; padding-bottom: 30px; }
.notice { background: #fff6d6; border: 1px solid #e8d48a; padding: 12px 16px; margin-bottom: 20px; }
.notice-sold { background: #fbe9e5; border-color: #e9b8ac; }
.v-top { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 34px; align-items: start; }
.v-main { position: relative; background: #e9e5dc; aspect-ratio: 4 / 3; overflow: hidden; }
.v-main img { width: 100%; height: 100%; object-fit: cover; }
.v-main img.ph { object-fit: contain; padding: 18%; }
.g-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 64px; border: 0; background: rgba(0, 0, 0, .55); color: #fff; font-size: 40px; line-height: 1; cursor: pointer; }
.g-nav:hover { background: rgba(0, 0, 0, .8); }
.g-prev { left: 0; } .g-next { right: 0; }
.g-count { position: absolute; right: 12px; bottom: 12px; background: rgba(0, 0, 0, .65); color: #fff; font-size: 14px; padding: 3px 10px; }
.v-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; margin-top: 6px; }
.v-thumbs button { padding: 0; border: 2px solid transparent; background: none; cursor: pointer; aspect-ratio: 4 / 3; overflow: hidden; opacity: .75; }
.v-thumbs button.on { border-color: var(--ink); opacity: 1; }
.v-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.v-panel { position: sticky; top: 96px; background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--ink); padding: 24px; }
.v-panel h1 { font-size: clamp(32px, 3.4vw, 44px); margin-bottom: 12px; }
.v-panel h1 span { display: block; font-family: var(--body); font-weight: 400; font-size: 18px; color: var(--muted); margin-top: 6px; letter-spacing: 0; line-height: 1.3; }
.v-price { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 0; margin: 4px 0 18px; }
.v-price strong { font-family: var(--head); font-size: 50px; line-height: 1; }
.v-price .was { display: block; color: var(--danger); font-weight: 600; font-size: 15px; margin-top: 6px; }
.v-price .monthly { display: block; color: var(--accent); font-weight: 600; margin-top: 6px; }
.v-actions { display: grid; gap: 8px; }
.v-reassure { list-style: none; padding: 0; margin: 18px 0 0; font-size: 15px; color: var(--ink-2); }
.v-reassure li { padding: 5px 0 5px 24px; position: relative; }
.v-reassure li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 10px; height: 6px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }

.v-body { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 34px; margin-top: 44px; align-items: start; }
.v-section { margin-bottom: 44px; }
.v-section h2 { border-bottom: 2px solid var(--ink); padding-bottom: 8px; }
.prose { max-width: 70ch; }
.prose h2 { font-size: 28px; margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.spec-table { display: grid; grid-template-columns: 1fr 1fr; margin: 0; column-gap: 34px; }
.spec-table div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.spec-table dt { color: var(--muted); }
.spec-table dd { margin: 0; font-weight: 600; text-align: right; }
.features { columns: 2; column-gap: 34px; list-style: none; padding: 0; margin: 0; }
.features li { padding: 6px 0 6px 18px; break-inside: avoid; position: relative; }
.features li::before { content: ""; position: absolute; left: 0; top: 15px; width: 7px; height: 7px; background: var(--accent); }
.calc { background: var(--card); border: 1px solid var(--line); padding: 24px; }
.calc h2 { border: 0; padding: 0; }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 16px; align-items: end; }
.calc-out { background: var(--paper); padding: 12px 16px; margin-bottom: 14px; }
.calc-out span { display: block; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.calc-out strong { font-family: var(--head); font-size: 36px; line-height: 1.1; }
.calc-out small { display: block; color: var(--muted); font-size: 13px; }
.fineprint { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.v-enquire { background: var(--card); border: 1px solid var(--line); padding: 24px; scroll-margin-top: 100px; }
.v-enquire > p { color: var(--muted); }
.seg { border: 0; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 6px; }
.when-testdrive { display: none; }
.form.is-testdrive .when-testdrive { display: block; }
.form-errors { background: #fbe9e5; border-left: 4px solid var(--danger); padding: 10px 14px; margin-bottom: 16px; }
.form-errors p { margin: 0; }

/* ---------- contact / pages ---------- */
.contact-layout, .sell-layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; padding-bottom: 60px; }
.contact-block { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.label { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; margin-bottom: 6px; }
.big { font-family: var(--head); font-size: 36px; font-weight: 700; line-height: 1.1; }
.big a { text-decoration: none; }
address { font-style: normal; margin-bottom: 10px; }
.contact-form { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--ink); padding: 28px; scroll-margin-top: 100px; }
.map iframe { width: 100%; height: 420px; border: 0; display: block; filter: grayscale(.35); }
.steps { counter-reset: s; list-style: none; padding: 0 !important; }
.steps li { counter-increment: s; padding: 0 0 18px 56px; position: relative; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 38px; height: 38px; display: grid; place-items: center; background: var(--plate); border: 2px solid var(--ink); font-family: var(--head); font-weight: 700; font-size: 20px; }
.page-layout { display: grid; grid-template-columns: 1fr 280px; gap: 60px; padding-bottom: 70px; }
.page-aside { border-left: 1px solid var(--line); padding-left: 28px; }
.thanks { padding-top: 70px; padding-bottom: 40px; }

/* ---------- footer ---------- */
.site-footer { background: var(--dark); color: #c7c4bc; margin-top: 30px; font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-top: 52px; padding-bottom: 36px; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: #fff; }
.f-name { font-family: var(--head); font-size: 28px; font-weight: 700; color: #fff; text-transform: uppercase; margin-bottom: 10px; }
.f-head { color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { padding: 3px 0; }
.f-social a { margin-right: 14px; }
.f-hours { border-collapse: collapse; width: 100%; max-width: 230px; }
.f-hours th { text-align: left; font-weight: 400; padding: 2px 0; }
.f-hours td { text-align: right; }
.f-hours tr.today { color: #fff; font-weight: 700; }
.f-legal { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 18px; padding-bottom: 22px; font-size: 13px; color: #8f8c85; }
.f-legal p { margin: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
  .hero-in, .sellband-in, .visit-in, .contact-layout, .sell-layout, .page-layout { grid-template-columns: 1fr; gap: 34px; }
  .v-top, .v-body { grid-template-columns: 1fr; }
  .v-panel { position: static; }
  .grid, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .usps-in { grid-template-columns: 1fr 1fr; }
  .usps p:nth-child(3) { padding-left: 0; border-left: 0; }
  .usps p { border-top: 1px solid rgba(255, 255, 255, .1); }
  .stock-layout { grid-template-columns: 1fr; gap: 0; }
  .filters { margin-bottom: 18px; }
  .filters-toggle { display: block; width: 100%; padding: 12px; border: 2px solid var(--ink); background: #fff; font-weight: 700; cursor: pointer; }
  .filters-form { display: none; position: static; padding-top: 16px; }
  .filters.open .filters-form { display: block; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .page-aside { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 20px; }

  .topbar-addr { display: none; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .grid, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .usps-in { grid-template-columns: 1fr; }
  .usps p, .usps p + p { padding: 14px 0; border-left: 0; }
  .hero-in { padding-top: 36px; padding-bottom: 36px; }
  .row2, .calc-grid, .spec-table { grid-template-columns: 1fr; }
  .features { columns: 1; }
  .footer-grid { grid-template-columns: 1fr; }
  .f-legal { flex-direction: column; }
  .brand-name { font-size: 22px; }
  .brand-tag { display: none; }
  .topbar-call { display: inline; }
  .topbar-wa { display: none; }
  .brand { flex: 1; min-width: 0; }
  .block-head { flex-direction: column; gap: 6px; }
  .finder { padding: 20px; }
  .reg-form .reg-input { font-size: 22px !important; }
  .types .type-link:not(:first-child) { padding-left: 0; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ==========================================================================
   v1.1 — branding, logo, mobile polish
   ========================================================================== */
h1, h2, h3, .finder-title, .type-name { text-transform: var(--head-case, none); }
.brand { flex-direction: row; align-items: center; gap: 12px; min-width: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.brand-logo { height: var(--logo-h, 44px); width: auto; max-width: 260px; object-fit: contain; }
.f-logo { max-height: 60px; width: auto; max-width: 220px; margin-bottom: 14px; }
.finder-fields { display: grid; grid-template-columns: 1fr; }
.mobile-bar { display: none; }
img { -webkit-user-drag: none; }
body { overflow-x: clip; }
.field input, .field select, .field textarea { font-size: 16px; } /* stops iPhone zooming into fields */
.btn { min-height: 46px; }
.btn-sm { min-height: 0; }

@media (max-width: 960px) {
  body.menu-open { overflow: hidden; }
  .brand-logo { max-width: 180px; height: min(var(--logo-h, 44px), 40px); }
  .v-thumbs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 6px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .v-thumbs button { flex: 0 0 88px; scroll-snap-align: start; }
  .g-nav { width: 40px; height: 54px; font-size: 32px; }
  .v-section { margin-bottom: 34px; }
  .spec-table { column-gap: 20px; }
  .pagehead { padding: 22px 0 18px; margin-bottom: 22px; }
  .filters-toggle { min-height: 48px; }

  /* sticky action bar on vehicle pages */
  .mobile-bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--dark); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); gap: 8px; box-shadow: 0 -4px 18px rgba(0,0,0,.18); }
  .mobile-bar a { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: var(--radius); font-weight: 700; text-decoration: none; color: #fff; font-size: 16px; }
  .mb-call { background: var(--accent); }
  .mb-wa { background: #1f8f4e; }
  .mb-enq { background: #fff; color: var(--ink) !important; }
  body.has-mobile-bar { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  body.has-mobile-bar .v-actions { display: none; }
}
@media (max-width: 600px) {
  h1 { font-size: 34px; }
  .hero h1 { font-size: 38px; }
  .lede { font-size: 18px; }
  .hero-actions .btn { flex: 1 1 100%; }
  .finder-fields { grid-template-columns: 1fr 1fr; gap: 0 10px; }
  .finder-types { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .finder-types label { flex: 0 0 auto; }
  .finder-types span { padding: 8px 14px; }
  .block { padding: 38px 0; }
  .sellband-in, .visit-in { padding-top: 38px; padding-bottom: 38px; }
  .visit { padding: 0; }
  .card-title { font-size: 22px; }
  .card-price strong { font-size: 28px; }
  .v-panel { padding: 18px; }
  .v-price strong { font-size: 42px; }
  .calc, .v-enquire, .contact-form { padding: 18px; margin-left: -4px; margin-right: -4px; }
  .seg span { padding: 8px 12px; }
  .contact-layout, .sell-layout { gap: 26px; }
  .big { font-size: 30px; }
  .map iframe { height: 300px; }
  .pager a, .pager span { padding: 10px 14px; }
  .results-bar { justify-content: stretch; }
  .sortform, .sortform label { width: 100%; }
  .sortform select { flex: 1; min-height: 44px; }
  .crumbs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .typeswitch { display: block; margin-top: 6px; }
  .reg-form { flex-direction: column; }
  .reg-form .btn { min-height: 50px; }
  .tag-lg { font-size: 16px; }
  .topbar { font-size: 13px; }
  .hours-now { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .f-hours { max-width: none; }
}

/* Header switches to the burger menu whenever the links don't fit (set by site.js) */
/* grid children may shrink (prevents sideways scrolling on phones) */
.hero-in > *, .v-top > *, .v-body > *, .stock-layout > *, .contact-layout > *, .sell-layout > *, .page-layout > *, .sellband-in > *, .visit-in > *, .grid > *, .footer-grid > * { min-width: 0; }
fieldset { min-width: 0; }
.brand { overflow: hidden; }
@media (max-width: 600px) {
  .brand.has-logo .brand-text { display: none; }
  .brand-logo { max-width: 100%; }
  .brand-name { font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
}


/* ==========================================================================
   v1.2 — inventory, media gallery, blur-up loading, offers
   ========================================================================== */
/* blur-up: a tiny blurred preview shows instantly, the real photo fades in */
.card-img.has-lqip, .slide { background-size: 0 0; background-repeat: no-repeat; isolation: isolate; }
.card-img img:not(.ph), .slide img { opacity: 0; transition: opacity .45s ease; }
.card-img img.is-loaded, .slide img.is-loaded, .card-img img.ph { opacity: 1; }
.card-img.has-lqip::before, .slide[style*="background-image"]::before { content: ""; position: absolute; inset: -20px; background-image: inherit; background-size: cover; background-position: center; filter: blur(16px); z-index: 0; }
.card-img img, .slide img { position: relative; z-index: 1; }
.card-img .tag { z-index: 2; }
.por { font-family: var(--head); font-size: 24px !important; }

/* gallery */
.v-stage { position: relative; background: #e9e5dc; overflow: hidden; }
.v-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; aspect-ratio: 4 / 3; overscroll-behavior-x: contain; }
.v-track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; margin: 0; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide img.ph { object-fit: contain; padding: 18%; }
.slide video, .slide iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; z-index: 3; }
.play { position: absolute; z-index: 2; width: 84px; height: 84px; border-radius: 50%; border: 0; background: rgba(0,0,0,.62); cursor: pointer; display: grid; place-items: center; transition: transform .15s, background .15s; }
.play:hover { transform: scale(1.06); background: var(--accent); }
.play span { width: 0; height: 0; border-left: 26px solid #fff; border-top: 16px solid transparent; border-bottom: 16px solid transparent; margin-left: 6px; }
.slide-video.playing .play { display: none; }
.v-thumbs button.is-video::after { content: "▶"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 18px; background: rgba(0,0,0,.35); }
.v-thumbs button { position: relative; background: #ddd8cc; }
.g-nav { z-index: 4; }
.g-count { z-index: 4; }
.g-full { position: absolute; right: 12px; top: 12px; z-index: 4; width: 40px; height: 40px; border: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 20px; cursor: pointer; border-radius: var(--radius); }
.v-stage .tag { z-index: 4; }
.v-gallery.is-full { position: fixed; inset: 0; z-index: 100; background: #000; display: flex; flex-direction: column; padding: 10px; }
.v-gallery.is-full .v-stage { flex: 1; background: #000; }
.v-gallery.is-full .v-track { aspect-ratio: auto; height: 100%; }
.v-gallery.is-full .slide img { object-fit: contain; }
.v-gallery.is-full .v-thumbs { flex: 0 0 auto; }
body.gallery-open { overflow: hidden; }

/* inventory */
.results-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.results-count { margin: 0; color: var(--muted); }
.results-count b { color: var(--ink); font-size: 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.chip { display: inline-flex; gap: 6px; align-items: center; padding: 5px 12px; border: 1px solid var(--line-2); border-radius: 30px; background: var(--card); text-decoration: none; font-size: 14px; font-weight: 600; }
.chip span { color: var(--muted); font-size: 16px; line-height: 1; }
.chip:hover { border-color: var(--ink); }
.request-box { margin-top: 48px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accent); padding: 28px; scroll-margin-top: 100px; }
.request-box h2 { margin-bottom: 6px; }
.request-copy p { color: var(--muted); max-width: 60ch; }

/* enquiry extras */
.when-offer { display: none; }
.form.is-offer .when-offer { display: block; }
.form.is-offer .when-offer input { font-size: 22px; font-weight: 700; }

.theme-preview-bar { background: #fff3c4; color: #3a2e00; text-align: center; padding: 8px 16px; font-size: 14px; position: relative; z-index: 50; }
.theme-preview-bar a { color: inherit; font-weight: 700; }

@media (max-width: 960px) {
  .v-track { aspect-ratio: 4 / 3; }
  .play { width: 68px; height: 68px; }
}
@media (max-width: 600px) {
  .request-box { padding: 18px; margin-left: -4px; margin-right: -4px; }
  .results-bar { flex-wrap: wrap; }
  .sortform { width: auto; flex: 1; }
}

/* ---------- live chat ---------- */
.chat { position: fixed; right: 20px; bottom: 20px; z-index: 60; font-family: var(--body); }
.chat-fab { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 20px 0 16px; border: 0; border-radius: 30px; background: var(--accent); color: #fff; font-weight: 700; font-size: 16px; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.22); position: relative; }
.chat-fab:hover { filter: brightness(1.08); }
.chat.is-online .chat-fab::after { content: ""; position: absolute; left: 38px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: #5cc97a; border: 2px solid var(--accent); }
.chat-badge { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; border-radius: 11px; background: #e0482c; color: #fff; font-size: 12px; display: grid; place-items: center; padding: 0 6px; border: 2px solid #fff; }
.chat.is-open .chat-fab { display: none; }
.chat-panel { position: absolute; right: 0; bottom: 0; width: 370px; height: min(600px, calc(100vh - 40px)); background: var(--card); color: var(--ink); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.28); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); }
.chat-panel[hidden] { display: none; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--dark); color: #fff; }
.chat-head b { display: block; font-size: 16px; }
.chat-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; font-weight: 700; overflow: hidden; flex: 0 0 auto; }
.chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-status { font-size: 13px; opacity: .85; display: flex; align-items: center; gap: 6px; }
.chat-status i { width: 8px; height: 8px; border-radius: 50%; background: #9a9890; }
.chat.is-online .chat-status i { background: #5cc97a; }
.chat-close { margin-left: auto; background: none; border: 0; color: #fff; font-size: 18px; cursor: pointer; width: 36px; height: 36px; }
.chat-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; background: var(--paper); overscroll-behavior: contain; }
.chat-msg { max-width: 82%; }
.chat-msg p { margin: 0; padding: 9px 13px; border-radius: 14px; font-size: 15px; line-height: 1.4; word-wrap: break-word; }
.chat-msg small { display: block; font-size: 11px; color: var(--muted); margin: 3px 6px 0; }
.chat-msg.from-admin p { background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.chat-msg.from-visitor { align-self: flex-end; text-align: right; }
.chat-msg.from-visitor p { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; text-align: left; }
.chat-msg.from-visitor p a { color: #fff; }
.chat-msg.from-system { align-self: center; max-width: 92%; text-align: center; }
.chat-msg.from-system p { background: transparent; color: var(--muted); font-size: 13px; padding: 4px; }
.chat-msg.is-sending { opacity: .6; } .chat-msg.is-failed small { color: var(--danger); }
.chat-typing { padding: 0 20px 6px; background: var(--paper); display: flex; gap: 4px; }
.chat-typing[hidden] { display: none; }
.chat-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: chatdot 1s infinite; }
.chat-typing span:nth-child(2) { animation-delay: .15s; } .chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes chatdot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.chat-start, .chat-send { border-top: 1px solid var(--line); padding: 12px; background: var(--card); }
.chat-start { display: grid; gap: 8px; }
.chat-start[hidden], .chat-send[hidden] { display: none; }
.chat-start input, .chat-start textarea, .chat-send textarea { width: 100%; border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 16px; background: var(--field); color: var(--ink); resize: none; }
.chat-start button { border: 0; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 700; padding: 12px; cursor: pointer; font-size: 16px; }
.chat-err { color: var(--danger); font-size: 14px; margin: 0; }
.chat-send { display: flex; gap: 8px; align-items: flex-end; }
.chat-send button { flex: 0 0 44px; height: 44px; border: 0; border-radius: 50%; background: var(--accent); color: #fff; cursor: pointer; display: grid; place-items: center; }
body.has-mobile-bar .chat { bottom: 20px; }
@media (max-width: 960px) {
  body.has-mobile-bar .chat { bottom: calc(80px + env(safe-area-inset-bottom)); }
}
@media (max-width: 600px) {
  .chat { right: 12px; bottom: 12px; }
  .chat-fab { height: 52px; padding: 0 14px; }
  .chat-fab-label { display: none; }
  .chat.is-online .chat-fab::after { left: 32px; top: 10px; }
  .chat.is-open { inset: 0; right: 0; bottom: 0 !important; }
  .chat-panel { position: fixed; inset: 0; width: 100%; height: 100%; border-radius: 0; border: 0; }
  .chat-head { padding-top: calc(14px + env(safe-area-inset-top)); }
  .chat-send, .chat-start { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  body.gallery-open .chat, body.menu-open .chat { display: none; }
}

/* ==========================================================================
   v1.3 — professional header, dropdowns, mobile drawer & app bar
   ========================================================================== */
:root { --shadow-soft: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.07); --shadow-strong: 0 4px 10px rgba(0,0,0,.08), 0 24px 60px rgba(0,0,0,.16); --border-line: var(--line); --border-accent: var(--accent); }
.site-header { position: relative; z-index: 40; transition: box-shadow .2s, background .2s; }
.site-header.is-sticky { position: sticky; top: 0; }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.08); }
.header-in { display: flex; align-items: center; gap: 24px; min-height: 76px; transition: min-height .2s; }
.site-header.is-scrolled .header-in { min-height: 64px; }
.mainnav { margin-left: auto; }
.nav-list { list-style: none; display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; font-weight: 600; font-size: 16px; text-decoration: none; border-radius: var(--radius); white-space: nowrap; position: relative; }
.nav-link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.nav-link:hover::after, .nav-link.on::after { transform: scaleX(1); }
.nav-link:hover { color: var(--ink); }
.nav-count { font-size: 11px; font-weight: 700; background: var(--accent); color: #fff; border-radius: 20px; padding: 1px 7px; line-height: 1.5; }
.sub-toggle { background: none; border: 0; padding: 6px 4px; margin-left: -8px; cursor: pointer; color: var(--muted); display: flex; }
.nav-sub { position: absolute; top: 100%; left: 0; min-width: 230px; list-style: none; margin: 0; padding: 8px; background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow-strong); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s, transform .18s, visibility .18s; z-index: 50; }
.nav-item.has-sub:hover .nav-sub, .nav-item.has-sub:focus-within .nav-sub, .nav-item.has-sub.open .nav-sub { opacity: 1; visibility: visible; transform: none; }
.nav-sub a { display: block; padding: 10px 12px; border-radius: var(--radius); text-decoration: none; font-weight: 500; }
.nav-sub a:hover, .nav-sub a.on { background: var(--paper); color: var(--accent); }
.header-actions { display: flex; align-items: center; gap: 14px; }
.header-call { display: flex; align-items: center; gap: 10px; text-decoration: none; padding-left: 18px; border-left: 1px solid var(--line); }
.hc-ico { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; flex: 0 0 auto; }
.hc-txt { display: flex; flex-direction: column; line-height: 1.1; }
.hc-txt small { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; }
.hc-txt span { font-family: var(--head); font-size: 22px; font-weight: 700; white-space: nowrap; }
.header-cta { min-height: 44px; padding: 10px 18px; }
.burger { display: none; width: 46px; height: 46px; border: 1px solid var(--line-2); background: var(--card); border-radius: var(--radius); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.burger span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* compact header (set by site.js when the links don't fit, and on all phones/tablets) */
.site-header.compact .mainnav { display: none; }
.site-header.compact .burger { display: flex; }
.site-header.compact .header-actions { margin-left: auto; }

/* slide-in drawer */
.drawer { position: fixed; inset: 0; z-index: 90; }
.drawer[hidden] { display: none; }
.drawer-overlay { position: absolute; inset: 0; background: rgba(10,12,14,.5); opacity: 0; transition: opacity .25s; backdrop-filter: blur(2px); }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); background: var(--paper); color: var(--ink); display: flex; flex-direction: column; gap: 16px; padding: 16px 20px calc(20px + env(safe-area-inset-bottom)); overflow-y: auto; transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1); box-shadow: -20px 0 50px rgba(0,0,0,.2); }
.drawer.is-open .drawer-overlay { opacity: 1; }
.drawer.is-open .drawer-panel { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding-top: env(safe-area-inset-top); }
.drawer-brand { font-family: var(--head); font-weight: 700; font-size: 22px; text-decoration: none; text-transform: uppercase; }
.drawer-brand img { height: 36px; width: auto; max-width: 200px; object-fit: contain; }
.drawer-close { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.drawer-status { margin: 0; font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.drawer-status i { width: 8px; height: 8px; border-radius: 50%; background: #9a9890; }
.drawer-status.is-open i { background: #3fb46a; box-shadow: 0 0 0 4px rgba(63,180,106,.18); }
.drawer-nav { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.dn-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; font-family: var(--head); font-size: 24px; font-weight: 600; color: var(--ink); text-decoration: none; text-align: left; width: 100%; cursor: pointer; }
.dn-link .ico { color: var(--muted); flex: 0 0 auto; }
.dn-link.on { color: var(--accent); }
.dn-parent .ico { transition: transform .2s; }
.dn-parent[aria-expanded="true"] .ico { transform: rotate(180deg); }
.dn-sub { display: none; flex-direction: column; padding: 4px 0 12px 12px; border-bottom: 1px solid var(--line); }
.dn-group.open .dn-sub { display: flex; }
.dn-sublink { padding: 10px 6px; text-decoration: none; font-weight: 600; color: var(--ink-2); }
.dn-sublink.on { color: var(--accent); }
.drawer-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.drawer-quick a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: calc(var(--radius) + 6px); background: var(--card); border: 1px solid var(--line); text-decoration: none; font-size: 13px; font-weight: 600; }
.drawer-quick a .ico { color: var(--accent); }
.drawer-foot { margin-top: auto; font-size: 14px; color: var(--muted); }
.drawer-foot p { margin: 0 0 8px; }
.drawer-social { display: flex; gap: 10px; }
.drawer-social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; }
body.drawer-open { overflow: hidden; }

/* mobile app bar */
.appbar { display: none; }
@media (max-width: 960px) {
  .appbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: color-mix(in srgb, var(--card) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); }
  .appbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; font-size: 11.5px; font-weight: 600; color: var(--muted); text-decoration: none; border-radius: 10px; }
  .appbar a.on { color: var(--accent); }
  .appbar a .ico { width: 22px; height: 22px; }
  .appbar .appbar-call { color: #fff; background: var(--accent); margin: 2px 4px; }
  body.has-appbar { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  body.has-appbar .chat { bottom: calc(80px + env(safe-area-inset-bottom)); }
  body.has-appbar .chat:not(.is-open) .chat-fab { display: none; }
  .header-call { display: none; }
  .header-cta { display: none; }
  .header-in { min-height: 64px; gap: 12px; }
}
@media (max-width: 600px) {
  .dn-link { font-size: 22px; padding: 14px 2px; }
}

/* inventory filters as a bottom sheet on phones */
@media (max-width: 960px) {
  .filters.open .filters-form { position: fixed; left: 0; right: 0; bottom: 0; top: 12vh; z-index: 95; background: var(--paper); border-radius: 18px 18px 0 0; padding: 22px 18px calc(90px + env(safe-area-inset-bottom)); overflow-y: auto; box-shadow: 0 -20px 60px rgba(0,0,0,.25); display: block; animation: sheet-up .28s cubic-bezier(.2,.8,.2,1); }
  .filters.open::before { content: ""; position: fixed; inset: 0; background: rgba(10,12,14,.45); z-index: 94; }
  .filters.open .filters-form > .btn-solid { position: fixed; left: 18px; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 96; width: auto; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
  .filters-sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
  .filters-toggle { border-radius: calc(var(--radius) + 4px); display: flex !important; align-items: center; justify-content: center; gap: 8px; }
  body.sheet-open { overflow: hidden; }
}
.filters-sheet-head { display: none; }
@media (max-width: 960px) { .filters.open .filters-sheet-head { display: flex; } }
.filters-sheet-head b { font-family: var(--head); font-size: 24px; }
.filters-sheet-head button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--card); cursor: pointer; }
@keyframes sheet-up { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }

/* mobile typography & spacing polish */
@media (max-width: 600px) {
  .pagehead h1 { font-size: 36px; }
  .card { border-radius: calc(var(--radius) + 4px); overflow: hidden; }
  .card-body { padding: 14px 16px 16px; }
  .card-title { font-size: 21px; }
  .v-panel h1 { font-size: 32px; }
  .block-head h2 { font-size: 26px; }
  .footer-grid { gap: 26px; padding-top: 40px; }
}

/* ==========================================================================
   Page builder output
   ========================================================================== */
.bld-section { position: relative; }
.bld-section.has-bg { background-size: cover; background-position: center; }
.bld-overlay { position: absolute; inset: 0; pointer-events: none; opacity: .5; }
.bld-container { position: relative; z-index: 1; margin: 0 auto; padding: 0 24px; }
.bld-container.w-boxed { max-width: var(--wrap); }
.bld-container.w-narrow { max-width: 820px; }
.bld-container.w-full { max-width: none; padding: 0; }
.bld-row { display: flex; flex-wrap: wrap; gap: var(--gap, 24px); }
.bld-col { flex: 1 1 0; min-width: 0; }
.bld-col-inner { display: flex; flex-direction: column; height: 100%; }
.bld-w { position: relative; }
.bld-w + .bld-w { margin-top: 18px; }
.hide-d { display: none !important; }
@media (max-width: 1024px) { .hide-d { display: revert !important; } .hide-t { display: none !important; } }
@media (max-width: 767px) {
  .hide-t { display: revert !important; } .hide-m { display: none !important; }
  .bld-container { padding: 0 16px; }
  .bld-container.w-full { padding: 0; }
  .bld-col { flex-basis: 100%; }
  .rev-m .bld-row { flex-direction: column-reverse; }
}
.anim { opacity: 0; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.anim-fade-up { transform: translateY(28px); } .anim-zoom-in { transform: scale(.94); } .anim-slide-left { transform: translateX(40px); } .anim-slide-right { transform: translateX(-40px); }
.anim.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .anim { opacity: 1; transform: none; transition: none; } }
.is-builder .anim { opacity: 1; transform: none; }

/* basic widgets */
.b-kicker { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); margin-bottom: 10px; }
.b-title { margin: 0; }
.b-title a { text-decoration: none; }
.b-title.sz-s { font-size: 22px; } .b-title.sz-m { font-size: clamp(24px, 2.6vw, 30px); } .b-title.sz-l { font-size: clamp(30px, 3.6vw, 44px); } .b-title.sz-xl { font-size: clamp(38px, 5vw, 62px); } .b-title.sz-xxl { font-size: clamp(46px, 7vw, 92px); }
.b-rich > :last-child { margin-bottom: 0; }
.b-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border-radius: var(--radius); border: 2px solid var(--accent); background: var(--accent); color: #fff; font-weight: 700; text-decoration: none; line-height: 1.2; transition: filter .15s, background .15s, color .15s, transform .15s; }
.b-btn:hover { filter: brightness(1.08); color: #fff; transform: translateY(-1px); }
.b-btn-outline { background: transparent; color: var(--ink); border-color: currentColor; }
.b-btn-outline:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); filter: none; }
.b-btn-light { background: #fff; border-color: #fff; color: #111; }
.b-btn-light:hover { color: #111; }
.b-btn-link { background: none; border-color: transparent; color: var(--accent); padding-left: 0; padding-right: 0; text-decoration: underline; text-underline-offset: 4px; }
.b-btn-link:hover { color: var(--accent); }
.b-sm { padding: 8px 16px; font-size: 14px; } .b-lg { padding: 16px 30px; font-size: 17px; } .b-full { display: flex; width: 100%; }
.b-figure { margin: 0; } .b-figure img { display: inline-block; max-width: 100%; height: auto; } .b-figure figcaption { font-size: 14px; color: var(--muted); margin-top: 8px; }
.b-hr { border: 0; border-top: 1px solid var(--line-2); }
.b-ib { display: flex; flex-direction: column; gap: 14px; }
.b-ib.pos-left { flex-direction: row; align-items: flex-start; }
.b-ib .b-ico { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); flex: 0 0 auto; }
.bld-w-icon_box[style*="center"] .b-ib, .b-ib { align-items: inherit; }
.b-ib-title { font-size: 22px; margin: 0 0 6px; }
.b-ib p { margin: 0; color: var(--ink-2); }
.b-iconlist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.b-iconlist.inline { flex-direction: row; flex-wrap: wrap; gap: 10px 24px; }
.b-iconlist li { display: flex; align-items: center; gap: 10px; }
.b-iconlist .b-ico { color: var(--accent); display: flex; }
.bld-ph { padding: 30px; text-align: center; border: 2px dashed var(--line-2); color: var(--muted); border-radius: var(--radius); }

/* hero slideshow */
.hs { position: relative; height: 78vh; min-height: 420px; overflow: hidden; background: var(--dark); color: #fff; }
.hs-track { position: absolute; inset: 0; }
.hs-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility .9s, transform .8s cubic-bezier(.6,0,.2,1); }
.hs-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.hs.fx-slide .hs-slide { opacity: 1; transform: translateX(100%); }
.hs.fx-slide .hs-slide.is-active { transform: none; }
.hs.fx-slide .hs-slide.is-prev { transform: translateX(-100%); visibility: visible; }
.hs-media, .hs-media img, .hs-noimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hs-noimg { background: radial-gradient(900px 500px at 80% 20%, color-mix(in srgb, var(--accent) 70%, transparent), transparent 60%), var(--dark); }
.hs.kb .hs-slide.is-active .hs-media img { animation: kenburns 12s ease-out both; }
@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
.hs-shade { position: absolute; inset: 0; background: linear-gradient(90deg, var(--shade, #000) 0%, color-mix(in srgb, var(--shade, #000) 60%, transparent) 45%, transparent 85%); opacity: .55; }
.hs-content { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; max-width: var(--wrap); margin: 0 auto; padding: 0 24px 40px; color: #fff; }
.hs-content.a-center { justify-content: center; text-align: center; }
.hs-content.a-right { justify-content: flex-end; text-align: right; }
.hs-content.a-center ~ .hs-shade, .hs .a-center { }
.hs-inner { max-width: 640px; }
.hs-slide.is-active .hs-inner > * { animation: hs-in .8s cubic-bezier(.2,.8,.2,1) both; }
.hs-slide.is-active .hs-inner > *:nth-child(2) { animation-delay: .08s; } .hs-slide.is-active .hs-inner > *:nth-child(3) { animation-delay: .16s; } .hs-slide.is-active .hs-inner > *:nth-child(4) { animation-delay: .24s; } .hs-slide.is-active .hs-inner > *:nth-child(5) { animation-delay: .32s; }
@keyframes hs-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.hs-kicker { font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .85; margin-bottom: 12px; }
.hs-title { font-size: clamp(38px, 6vw, 76px); color: inherit; margin: 0 0 14px; line-height: 1.02; text-shadow: 0 2px 30px rgba(0,0,0,.25); }
.hs-text { font-size: clamp(17px, 1.6vw, 21px); opacity: .92; max-width: 52ch; }
.hs-content.a-center .hs-text { margin-left: auto; margin-right: auto; }
.hs-price { font-family: var(--head); font-size: 34px; font-weight: 700; margin: 6px 0 18px; }
.hs-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.hs-content.a-center .hs-btns { justify-content: center; } .hs-content.a-right .hs-btns { justify-content: flex-end; }
.hs-arrow { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.25); color: #fff; cursor: pointer; display: grid; place-items: center; backdrop-filter: blur(6px); transition: background .2s; }
.hs-arrow:hover { background: rgba(0,0,0,.5); }
.hs-arrow.prev { left: 20px; } .hs-arrow.prev .ico { transform: rotate(180deg); } .hs-arrow.next { right: 20px; }
.hs-dots { position: absolute; z-index: 3; bottom: 26px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.hs-dots button { width: 10px; height: 10px; border-radius: 10px; border: 0; padding: 0; background: rgba(255,255,255,.45); cursor: pointer; transition: width .3s, background .3s; }
.hs-dots button.on { width: 30px; background: #fff; }
.hs-progress { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.15); }
.hs-progress i { display: block; height: 100%; width: 0; background: var(--accent); }
@media (max-width: 767px) {
  .hs { min-height: 480px; }
  .hs-shade { background: linear-gradient(0deg, var(--shade, #000) 0%, color-mix(in srgb, var(--shade, #000) 40%, transparent) 60%, transparent 100%); opacity: .75; }
  .hs-content { align-items: flex-end; padding: 0 18px 64px; }
  .hs-arrow { display: none; }
  .hs-btns .b-btn { flex: 1 1 auto; }
}

/* dealer widgets */
.b-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.b-grid.is-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; }
.b-grid.is-carousel > * { flex: 0 0 calc((100% - 66px) / 4); scroll-snap-align: start; }
@media (max-width: 1024px) { .b-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .b-grid.is-carousel > * { flex-basis: calc((100% - 22px) / 2); } }
@media (max-width: 767px) { .b-grid { grid-template-columns: 1fr; } .b-grid.is-carousel > * { flex-basis: 82%; } }
.b-search { background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); padding: 20px; box-shadow: var(--shadow-soft); }
.b-search-title { font-family: var(--head); font-size: 24px; font-weight: 700; margin-bottom: 12px; }
.b-search-fields { display: grid; grid-template-columns: 1fr 1fr 1.3fr auto; gap: 12px; align-items: end; }
.b-search-fields .field { margin: 0; }
.b-search-fields .btn { min-height: 48px; display: inline-flex; align-items: center; gap: 8px; }
.b-search.s-card .b-search-fields { grid-template-columns: 1fr; }
@media (max-width: 767px) { .b-search-fields { grid-template-columns: 1fr 1fr; } .b-search-fields .field:nth-child(3), .b-search-fields .btn { grid-column: 1 / -1; } }
.b-usps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.b-usps p { margin: 0; padding: 14px 18px; display: flex; gap: 12px; align-items: center; font-weight: 600; }
.b-usps.st-numbers p + p, .b-usps.st-ticks p + p { border-left: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
.b-usps b { font-family: var(--head); font-size: 20px; color: var(--plate); }
.b-usps .b-ico { color: var(--accent); display: flex; }
.b-usps.st-cards { gap: 16px; }
.b-usps.st-cards p { flex-direction: column; align-items: flex-start; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); padding: 22px; }
@media (max-width: 767px) { .b-usps { grid-template-columns: 1fr 1fr !important; } .b-usps.st-numbers p + p, .b-usps.st-ticks p + p { border-left: 0; } .b-usps p { padding: 10px 6px; font-size: 15px; } }
.b-cta { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.b-cta h2 { margin-bottom: 8px; color: inherit; }
.b-cta p { margin: 0; opacity: .88; max-width: 58ch; }
.b-cta.l-center { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.b-cta.l-center p { margin: 0 auto; }
@media (max-width: 767px) { .b-cta { grid-template-columns: 1fr; gap: 20px; } }
.b-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; text-align: center; }
.b-stat { display: flex; flex-direction: column; align-items: center; }
.b-num { font-family: var(--head); font-size: 48px; font-weight: 700; line-height: 1; color: var(--accent); display: inline; }
.b-stat .b-num + .b-suffix { font-family: var(--head); font-size: 34px; font-weight: 700; color: var(--accent); }
.b-stat > .b-num, .b-stat > .b-suffix { display: inline; }
.b-stat { display: block; }
.b-label { display: block; color: var(--muted); margin-top: 8px; font-weight: 600; }
.b-form { background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); padding: 26px; }
.b-form h3 { margin-bottom: 14px; }
.b-video { position: relative; aspect-ratio: 16/9; background: #000; overflow: hidden; border-radius: var(--radius); }
.b-video img, .b-video video, .b-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.b-video .play { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.b-video .play:hover { transform: translate(-50%, -50%) scale(1.06); }
.b-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.b-gal-item { display: block; position: relative; overflow: hidden; }
.b-gal-item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; transition: transform .4s; display: block; }
.b-gal-item:hover img { transform: scale(1.04); }
.b-gal-item span { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.6)); font-size: 14px; }
@media (max-width: 767px) { .b-gallery { grid-template-columns: 1fr 1fr; } }
.lightbox { position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; padding: 20px; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox button { position: absolute; top: 16px; right: 16px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 22px; cursor: pointer; }
.b-logos { display: flex; flex-wrap: wrap; gap: 28px 48px; align-items: center; justify-content: center; }
.b-logos img { height: 48px; width: auto; object-fit: contain; transition: filter .3s, opacity .3s; }
.b-logos.gray img { filter: grayscale(1); opacity: .65; } .b-logos.gray a:hover img, .b-logos.gray span:hover img { filter: none; opacity: 1; }
.b-map iframe { width: 100%; height: 380px; border: 0; display: block; border-radius: var(--radius); }
.b-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.b-review { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.b-stars { letter-spacing: 2px; font-size: 18px; }
.b-review blockquote { margin: 0; font-size: 17px; line-height: 1.55; }
.b-review figcaption b { display: block; } .b-review figcaption span { color: var(--muted); font-size: 14px; }
@media (max-width: 767px) { .b-reviews { grid-template-columns: 1fr; } }
.b-faq details { border-bottom: 1px solid var(--line); }
.b-faq summary { list-style: none; cursor: pointer; padding: 18px 0; display: flex; justify-content: space-between; gap: 16px; font-weight: 700; font-size: 18px; }
.b-faq summary::-webkit-details-marker { display: none; }
.b-faq summary .ico { flex: 0 0 auto; transition: transform .2s; color: var(--accent); }
.b-faq details[open] summary .ico { transform: rotate(180deg); }
.b-faq-a { padding: 0 0 18px; color: var(--ink-2); }
.b-open { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.b-open i { width: 9px; height: 9px; border-radius: 50%; background: #9a9890; } .b-open.is-open i { background: #3fb46a; }
.b-contact { display: flex; flex-direction: column; gap: 16px; }
.b-contact.l-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.b-contact.l-cards .b-ci { background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); padding: 18px; }
.b-ci { display: flex; gap: 14px; align-items: flex-start; }
.b-ci .b-ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); flex: 0 0 auto; }
.b-ci small { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.b-ci p { margin: 2px 0 0; font-weight: 600; }
.b-social { display: flex; gap: 10px; flex-wrap: wrap; }
.bld-w-social[style] .b-social { justify-content: inherit; }
.b-social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); color: inherit; transition: background .2s, color .2s; }
.b-social a:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.is-built main > .bld > .bld-section:first-child .hs { margin-top: 0; }

/* ---------- phone availability ---------- */
.call-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #9aa0a6; margin-right: 6px; vertical-align: middle; flex: 0 0 auto; }
body[data-calls="on"] .call-dot { background: #22a559; box-shadow: 0 0 0 0 rgba(34,165,89,.55); animation: call-pulse 2s infinite; }
body[data-calls="off"] .call-dot { background: #c9483a; }
@keyframes call-pulse { 0% { box-shadow: 0 0 0 0 rgba(34,165,89,.5); } 70% { box-shadow: 0 0 0 7px rgba(34,165,89,0); } 100% { box-shadow: 0 0 0 0 rgba(34,165,89,0); } }
@media (prefers-reduced-motion: reduce) { body[data-calls="on"] .call-dot { animation: none; } }
.header-call small { display: flex; align-items: center; }
.appbar a, .drawer-quick a { position: relative; }
.appbar .call-dot, .drawer-quick .call-dot { position: absolute; top: 6px; right: calc(50% - 18px); margin: 0; border: 2px solid var(--card); width: 11px; height: 11px; }
.mb-call .call-dot { margin-right: 6px; }
.drawer-call-st { display: flex; align-items: center; font-weight: 600; margin: 4px 0 12px; }
.cb-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; }
.cb-modal[hidden] { display: none; }
.cb-overlay { position: absolute; inset: 0; background: rgba(10,12,14,.55); backdrop-filter: blur(3px); }
.cb-box { position: relative; width: min(440px, 100%); background: var(--card); color: var(--ink); border-radius: calc(var(--radius) + 10px); padding: 26px 24px 20px; box-shadow: 0 24px 60px rgba(0,0,0,.35); max-height: calc(100vh - 32px); overflow: auto; }
.cb-box h2 { margin: 2px 0 6px; font-size: 26px; }
.cb-text { color: var(--ink-2); margin: 0 0 14px; }
.cb-box .field { display: block; margin-bottom: 12px; }
.cb-box .field span { display: block; font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.cb-box input, .cb-box select { width: 100%; padding: 12px; border: 1px solid var(--line-2); border-radius: var(--radius); font: inherit; background: var(--paper); color: inherit; }
.cb-x { position: absolute; top: 12px; right: 12px; background: none; border: 0; cursor: pointer; color: var(--muted); padding: 6px; }
.cb-status { display: flex; align-items: center; font-size: 14px; color: var(--muted); margin: 0; }
.cb-anyway { display: block; text-align: center; margin-top: 12px; font-size: 14px; color: var(--muted); }
html.cb-open { overflow: hidden; }

/* ---------- currency switcher ---------- */
.cur-sw { position: relative; display: inline-block; }
.cur-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 35%, transparent); color: inherit; border-radius: 20px; padding: 3px 10px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.cur-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 70; min-width: 230px; max-height: 340px; overflow: auto; list-style: none; margin: 0; padding: 6px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 40px rgba(0,0,0,.18); }
.cur-list li[data-cur] { padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.cur-list li[data-cur]:hover, .cur-list li[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.cur-list li[aria-selected="true"] { font-weight: 700; }
.cur-list li b { display: inline-block; min-width: 34px; }
.cur-list small { color: var(--muted); }
.cur-list .cur-note { font-size: 12px; color: var(--muted); padding: 8px 10px 4px; border-top: 1px solid var(--line); margin-top: 4px; }
.topbar-cur { margin-left: 12px; }
.drawer-cur { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; font-weight: 600; }
.drawer-cur .cur-list { right: 0; }
.money.is-converted { border-bottom: 1px dotted currentColor; cursor: help; }
.header-call small span[data-call-label] { font: inherit; color: inherit; letter-spacing: inherit; display: inline; }

/* ---------- marketplace vehicle cards ---------- */
.mcard { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--radius) + 8px); overflow: hidden; transition: box-shadow .2s, transform .2s; }
.mcard:hover { box-shadow: 0 14px 34px rgba(0,0,0,.10); transform: translateY(-2px); }
.mcard-img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #e9e6df center / cover no-repeat; }
.mcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .4s, transform .5s; }
.mcard-img img.is-loaded { opacity: 1; }
.mcard:hover .mcard-img img { transform: scale(1.04); }
.mtag { position: absolute; top: 12px; left: 12px; padding: 5px 9px; border-radius: 6px; font-size: 12.5px; font-weight: 700; color: #fff; letter-spacing: .01em; }
.mtag-dark { background: rgba(20,22,25,.88); } .mtag-red { background: #c8321f; }
.fav-btn { position: absolute; top: 10px; right: 10px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: #b3321b; display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.15); transition: transform .15s; }
.fav-btn:hover { transform: scale(1.08); }
.fav-btn[aria-pressed="true"] svg { fill: currentColor; }
.fav-btn.pop { animation: favpop .35s; }
@keyframes favpop { 50% { transform: scale(1.3); } }
.mcard-body { padding: 16px 18px 16px; display: flex; flex-direction: column; flex: 1; }
.mcard-cond { margin: 0; font-size: 14px; color: var(--ink-2); display: flex; justify-content: space-between; gap: 8px; }
.mcard-stock { font: 600 12px ui-monospace, Menlo, Consolas, monospace; color: var(--muted); }
.mcard-title { margin: 2px 0 2px; font-size: 20px; line-height: 1.2; }
.mcard-title a { color: inherit; text-decoration: none; }
.mcard-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.mcard-sub { margin: 0 0 10px; color: var(--ink-2); font-size: 15px; } .mcard-sub i { font-style: normal; margin: 0 4px; color: var(--muted); }
.mcard-price { margin-bottom: 10px; }
.mcard-price strong { font-family: var(--head); font-size: 28px; line-height: 1.1; }
.mcard-price s { color: var(--muted); font-size: 15px; }
.mcard-pay { display: block; position: relative; z-index: 2; font-size: 15px; color: var(--accent); }
.vtags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.vtag { font-size: 13px; padding: 4px 9px; border-radius: 5px; font-weight: 600; line-height: 1.3; }
.vt-great { background: #1c7c3c; color: #fff; } .vt-good { background: #d5f0dc; color: #145c2c; } .vt-info { background: #e2eefb; color: #173f6c; } .vt-dark { background: #222; color: #fff; }
.mcard-foot { margin-top: auto; border-top: 1px solid var(--line); padding-top: 12px; }
.mcard-where { font-size: 13.5px; margin: 0 0 12px; line-height: 1.4; font-weight: 600; } .mcard-where span { font-weight: 400; color: var(--ink-2); }
.mcard-acts { display: flex; gap: 8px; position: relative; z-index: 2; }
.mcard-cta { flex: 1; text-align: center; background: var(--accent); color: #fff !important; border-radius: calc(var(--radius) + 2px); padding: 11px 12px; font-weight: 700; text-decoration: none; }
.mcard-cta:hover { filter: brightness(1.1); }
.mcard-more { position: relative; }
.mcard-dots { width: 44px; height: 100%; min-height: 44px; border: 1px solid var(--line-2); background: var(--card); border-radius: calc(var(--radius) + 2px); cursor: pointer; font-size: 20px; color: var(--accent); }
.mcard-menu { position: absolute; right: 0; bottom: calc(100% + 6px); min-width: 230px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 40px rgba(0,0,0,.18); padding: 6px; z-index: 5; display: flex; flex-direction: column; }
.mcard-menu[hidden] { display: none; }
.mcard-menu button, .mcard-menu a { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 0; background: none; text-align: left; font: inherit; font-size: 14px; color: inherit; cursor: pointer; border-radius: 6px; text-decoration: none; }
.mcard-menu button:hover, .mcard-menu a:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.mcard.is-reserved .mcard-img img { filter: grayscale(.4); }
.v-stock { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.stock-copy { font: 600 13px ui-monospace, Menlo, Consolas, monospace; border: 1px dashed var(--line-2); background: none; border-radius: 5px; padding: 2px 7px; cursor: copy; color: var(--ink); }
.fav-btn.fav-sm { position: static; width: 34px; height: 34px; margin-left: auto; box-shadow: none; border: 1px solid var(--line); }
.site-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 9999; background: #17181a; color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 600; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
@media (max-width: 860px) { .site-toast { bottom: calc(86px + env(safe-area-inset-bottom)); } }

/* ---------- header icons (search, saved) ---------- */
.hdr-icon { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 0; background: none; color: inherit; cursor: pointer; text-decoration: none; }
.hdr-icon:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--accent); }
.hdr-icon b { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.hdr-icon b[hidden] { display: none; }
.topbar .ico { vertical-align: -2px; opacity: .8; }

/* ---------- search overlay + live results ---------- */
.srch { position: fixed; inset: 0; z-index: 130; display: flex; justify-content: center; align-items: flex-start; padding: 8vh 16px 16px; }
.srch[hidden] { display: none; }
.srch-dim { position: absolute; inset: 0; background: rgba(12,14,16,.6); backdrop-filter: blur(4px); }
.srch-box { position: relative; width: min(720px, 100%); background: var(--card); color: var(--ink); border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.35); overflow: hidden; animation: srch-in .2s ease-out; }
@keyframes srch-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
.srch-form { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.srch-form input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 19px; color: inherit; outline: none; padding: 6px 0; }
.srch-form .ico { color: var(--muted); flex: 0 0 auto; }
.srch-x { border: 0; background: none; cursor: pointer; color: var(--muted); padding: 6px; }
.srch-results { max-height: 64vh; overflow: auto; }
.srch-results:empty::before { content: "Type to search — e.g. “Golf”, “2019 van” or a stock number like “NM0012”. Tip: press / anywhere to search."; display: block; padding: 18px; color: var(--muted); font-size: 14px; }
html.srch-open { overflow: hidden; }
.ls-wrap { position: relative; }
.ls-wrap input { width: 100%; }
.ls-drop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 44px rgba(0,0,0,.18); max-height: 70vh; overflow: auto; min-width: min(420px, 90vw); }
.ls-drop[hidden] { display: none; }
.ls-item { display: grid; grid-template-columns: 76px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--line); }
.ls-item:hover, .ls-item.on { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.ls-item img { width: 76px; height: 54px; object-fit: cover; border-radius: 6px; background: #e9e6df; }
.ls-tx { min-width: 0; } .ls-tx b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-tx span { display: block; font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-tx code { font: 600 11.5px ui-monospace, Menlo, Consolas, monospace; color: var(--muted); }
.ls-p { text-align: right; font-weight: 700; white-space: nowrap; } .ls-p small { display: block; font-weight: 600; color: #c8321f; font-size: 11px; }
.ls-all { display: block; padding: 12px 14px; font-weight: 700; text-decoration: none; color: var(--accent); }
.ls-empty { padding: 16px; margin: 0; color: var(--ink-2); }
.is-loading { opacity: .65; }
@media (max-width: 600px) { .ls-item { grid-template-columns: 60px 1fr; } .ls-item img { width: 60px; height: 44px; } .ls-p { grid-column: 2; text-align: left; } .srch { padding-top: 12px; } }

/* ---------- back to top ---------- */
.to-top { position: fixed; right: 24px; bottom: 96px; z-index: 55; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 22px rgba(0,0,0,.16); transition: transform .2s, background .2s; }
.to-top[hidden] { display: none; }
.to-top .ico { transform: rotate(180deg); }
.to-top:hover { background: var(--accent); color: #fff; transform: translateY(-3px); }
@media (max-width: 860px) { .to-top { right: 14px; bottom: calc(150px + env(safe-area-inset-bottom)); width: 42px; height: 42px; } }

/* ======================================================================== header styles (Admin → Menus → Header style) */
/* Dealer: coloured info bar, white header, pill button (like big franchise dealers) */
[data-hdr="dealer"] .topbar { background: var(--tb, var(--accent)); color: #fff; font-size: 13px; }
[data-hdr="dealer"] .topbar a { color: #fff; }
[data-hdr="dealer"] .topbar-in { justify-content: flex-end; gap: 18px; min-height: 32px; }
[data-hdr="dealer"] .topbar-addr { margin-right: 0; }
[data-hdr="dealer"] .hours-now { margin-right: auto; color: #fff; }
[data-hdr="dealer"] .topbar-call { display: inline-flex; align-items: center; margin-left: 0; }
[data-hdr="dealer"] .site-header { background: #fff; }
[data-hdr="dealer"] .brand.has-logo .brand-text { border-left: 1px solid var(--line-2); padding-left: 12px; }
[data-hdr="dealer"] .brand-name { color: var(--accent); }
[data-hdr="dealer"] .nav-link { font-size: 15px; }
[data-hdr="dealer"] .header-call { display: none; }
[data-hdr="dealer"] .header-cta { background: transparent !important; color: var(--ink) !important; border: 1.5px solid var(--ink) !important; border-radius: 30px; }
[data-hdr="dealer"] .header-cta:hover { background: var(--ink) !important; color: #fff !important; }
[data-hdr="dealer"] .nav-link::after { bottom: 0; height: 3px; }
/* Centred: logo in the middle, menu underneath */
@media (min-width: 961px) {
  [data-hdr="centered"] .header-in { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "l brand actions" "nav nav nav"; row-gap: 0; padding-top: 10px; }
  [data-hdr="centered"] .brand { grid-area: brand; justify-content: center; text-align: center; }
  [data-hdr="centered"] .mainnav { grid-area: nav; margin: 0 auto; border-top: 1px solid var(--line); width: 100%; display: flex; justify-content: center; padding: 4px 0; }
  [data-hdr="centered"] .header-actions { grid-area: actions; justify-content: flex-end; }
  [data-hdr="centered"] .header-call { border-left: 0; }
  [data-hdr="centered"] .site-header.compact .mainnav { display: flex; }
  [data-hdr="centered"] .site-header.compact .burger { display: none; }
}
/* Dark */
[data-hdr="dark"] .site-header { background: var(--dark, #141517); border-bottom-color: rgba(255,255,255,.08); color: #f1efe9; }
[data-hdr="dark"] .site-header a, [data-hdr="dark"] .site-header .hdr-icon, [data-hdr="dark"] .brand-name { color: #f1efe9; }
[data-hdr="dark"] .brand-tag, [data-hdr="dark"] .hc-txt small { color: #a9a69e; }
[data-hdr="dark"] .header-call { border-left-color: rgba(255,255,255,.14); }
[data-hdr="dark"] .nav-link:hover { color: #fff; }
[data-hdr="dark"] .burger { background: transparent; border-color: rgba(255,255,255,.25); } [data-hdr="dark"] .burger span { background: #fff; }
[data-hdr="dark"] .nav-sub a { color: var(--ink) !important; }
[data-hdr="dark"] .topbar { background: #000; }
/* Minimal: no info bar, slim and clean */
[data-hdr="minimal"] .header-in { min-height: 64px; }
[data-hdr="minimal"] .site-header { border-bottom-color: transparent; box-shadow: 0 1px 0 var(--line); }
[data-hdr="minimal"] .header-call .hc-ico { display: none; }
[data-hdr="minimal"] .header-call { border-left: 0; padding-left: 0; }
[data-hdr="minimal"] .nav-link::after { display: none; }
[data-hdr="minimal"] .nav-link:hover, [data-hdr="minimal"] .nav-link.on { color: var(--accent); }
@media (min-width: 1025px) { .header-in > .brand { flex-shrink: 0; } .header-in > .mainnav .nav-list { flex-wrap: nowrap; } }
@media (max-width: 600px) { .hdr-icon { width: 38px; height: 38px; } .header-actions { gap: 4px; } .hdr-favs { display: none; } }
.site-header.tight .hc-txt small, .site-header.tight .brand-tag { display: none; }
.site-header.tight .hc-txt span { font-size: 18px; }
.site-header.tight .header-in { gap: 14px; }
.site-header.tight .nav-link { padding: 10px 9px; }
.site-header.tight .header-call { padding-left: 12px; }
.topbar-call { white-space: nowrap; }

/* ---------- photo zoom ---------- */
.v-gallery:not(.is-full) .slide:not(.slide-video) { cursor: zoom-in; }
.slide img.is-mag { transition: transform .12s ease-out, opacity .45s; }
.v-gallery.is-full .slide img { transition: transform .15s ease-out; will-change: transform; touch-action: pan-x; }
.v-gallery.is-full.is-zoomed .slide img { touch-action: none; }
.v-gallery.is-full .slide:not(.slide-video) { cursor: zoom-in; }
.v-gallery.is-full.is-zoomed .slide { cursor: zoom-out; }
.v-gallery.is-full.is-zoomed .v-track { overflow: hidden; scroll-snap-type: none; touch-action: none; }
.g-zoom { display: none; position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 6; background: rgba(0,0,0,.65); color: #fff; border-radius: 30px; padding: 4px; align-items: center; gap: 2px; backdrop-filter: blur(6px); }
.v-gallery.is-full .g-zoom { display: flex; }
.g-zoom button { width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: 20px; cursor: pointer; }
.g-zoom button:hover { background: rgba(255,255,255,.15); }
.g-zoom span { min-width: 52px; text-align: center; font: 600 13px var(--body); }
.v-stage { position: relative; }

/* ---------------------------------------------------------------- vehicle buy box */
.bb-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.bb-top .v-stock { margin: 0; }
.bb-status { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius); color: #fff; background: #23894a; }
.bb-st-reserved { background: #b7791f; } .bb-st-sold { background: var(--danger); } .bb-st-draft { background: var(--muted); }
.bb-note { display: block; font-size: 13.5px; color: var(--muted); margin-top: 8px; }
.bb-tools { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.bb-tool { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line-2); background: transparent; color: var(--ink-2); font: 700 12.5px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; border-radius: var(--radius); cursor: pointer; }
.bb-tool:hover { border-color: var(--ink); color: var(--ink); }
.bb-tool[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.bb-tool[aria-pressed="true"] svg { fill: currentColor; }
.bb-checks { list-style: none; margin: 0 0 18px; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: 15px; color: var(--ink-2); }
.bb-checks li { display: flex; gap: 10px; align-items: flex-start; }
.bb-checks svg { color: var(--accent); flex: 0 0 auto; margin-top: 3px; }
.bb-buy { font-size: 16px; letter-spacing: .06em; text-transform: uppercase; }
.bb-two { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 11px 14px; border: 1px solid var(--accent); border-radius: var(--radius); color: var(--accent); text-decoration: none; text-align: center; transition: background .15s; }
.bb-two b { display: inline-flex; align-items: center; gap: 7px; font-size: 15.5px; }
.bb-two small { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.bb-two:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--accent); }
.bb-call { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; font-weight: 700; color: var(--ink); text-decoration: none; flex-wrap: wrap; }
.bb-call-no { font-weight: 400; color: var(--muted); font-size: 14px; }
.bb-call:hover { color: var(--accent); }
.bb-ask { text-align: center; font-size: 14.5px; color: var(--muted); padding: 4px; }
.bb-notice { margin-top: 18px; padding: 14px 16px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
.bb-notice strong { display: flex; gap: 9px; align-items: flex-start; font-family: var(--head); font-size: 17px; text-transform: uppercase; line-height: 1.2; margin-bottom: 6px; }
.bb-notice strong svg { color: var(--accent); flex: 0 0 auto; }
.bb-notice p { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.bb-ship { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius); }
.bb-ship summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; font-weight: 700; font-size: 14.5px; list-style: none; }
.bb-ship summary::-webkit-details-marker { display: none; }
.bb-ship summary svg:first-child { color: var(--accent); }
.bb-ship summary svg:last-child { margin-left: auto; transition: transform .2s; }
.bb-ship[open] summary svg:last-child { transform: rotate(180deg); }
.bb-ship .shipc { padding: 0 14px 14px; }
.bb-foot { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; font-weight: 600; }
.bb-foot > * { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; }
.bb-foot svg { color: var(--accent); }
.bb-foot .bb-track { flex-basis: 100%; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- inspection report */
.insp { border: 1px solid var(--line); border-radius: 6px; background: var(--card); padding: 20px 22px; }
.insp-head { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-family: var(--head); font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: .02em; color: #23894a; }
.insp-notes .insp-head { color: #b7791f; } .insp-issues .insp-head { color: var(--danger); }
.insp-text { color: var(--ink-2); font-size: 15.5px; } .insp-text p { margin: 0 0 8px; }
.insp-btn { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 4px; border-color: var(--accent); color: var(--accent); }
.insp-note { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* ---------------------------------------------------------------- shipping calculator */
.shipc-eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.shipc-title { font-size: clamp(22px, 2.4vw, 28px); margin: 0 0 8px; text-transform: uppercase; }
.shipc-text { color: var(--muted); font-size: 15px; margin: 0 0 18px; }
.shipc-form label { display: block; font-weight: 700; font-size: 14.5px; margin-bottom: 6px; }
.shipc-row { display: grid; gap: 10px; }
.shipc-compact .shipc-row { grid-template-columns: 1fr auto; }
.shipc-form input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-2); background: var(--field); color: var(--ink); font: inherit; border-radius: var(--radius); }
.shipc-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.shipc-btn { min-height: 44px; padding: 10px 20px; border: 0; border-radius: var(--radius); background: var(--accent); color: #fff; font: 700 15px/1 var(--body); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
.shipc-btn:hover { filter: brightness(1.08); } .shipc-btn:disabled { opacity: .6; cursor: wait; }
.shipc-out { margin-top: 14px; padding: 14px 16px; border-radius: var(--radius); font-size: 14.5px; }
.shipc-out.is-busy { color: var(--muted); }
.shipc-out.is-err { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }
.shipc-out.is-ok { border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); display: grid; gap: 4px; }
.shipc-price { font-family: var(--head); font-size: 36px; font-weight: 700; color: var(--accent); line-height: 1; }
.shipc-line { font-size: 15px; } .shipc-meta { font-size: 12.5px; color: var(--muted); }
.shipc-warn { margin: 10px 0 0; font-size: 13px; color: var(--danger); }

/* ---------------------------------------------------------------- compare */
.cmp-page h1 { font-size: clamp(32px, 4vw, 48px); }
.cmp-empty { text-align: center; padding: 50px 20px 70px; color: var(--muted); } .cmp-empty svg { color: var(--accent); } .cmp-empty p { max-width: 460px; margin: 14px auto 22px; }
.cmp-scroll { overflow-x: auto; margin: 0 -24px 60px; padding: 0 24px; }
.cmp-tbl { width: 100%; min-width: calc(160px + var(--n) * 220px); border-collapse: collapse; table-layout: fixed; background: var(--card); border: 1px solid var(--line); }
.cmp-tbl th, .cmp-tbl td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 15px; }
.cmp-tbl thead th { vertical-align: bottom; }
.cmp-tbl tbody th { width: 160px; color: var(--muted); font-weight: 600; font-size: 14px; }
.cmp-tbl thead th:first-child, .cmp-tbl tbody th { width: 160px; }
.cmp-img { display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--paper); margin-bottom: 10px; } .cmp-img img { width: 100%; height: 100%; object-fit: cover; }
.cmp-title { display: block; font-family: var(--head); font-size: 20px; line-height: 1.1; color: var(--ink); text-decoration: none; }
.cmp-sub { display: block; font-size: 13.5px; color: var(--muted); font-weight: 400; margin-top: 3px; }
.cmp-x { margin-top: 8px; background: none; border: 0; padding: 0; font-size: 13px; color: var(--danger); cursor: pointer; text-decoration: underline; }
.cmp-tbl tbody tr:nth-child(even) td, .cmp-tbl tbody tr:nth-child(even) th { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.cmp-cta td, .cmp-cta th { border-bottom: 0; }
.cmp-tray { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 60; display: flex; align-items: center; background: var(--dark); color: #fff; border-radius: 40px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.cmp-tray[hidden] { display: none; }
.cmp-go { color: #fff; text-decoration: none; font-weight: 700; padding: 12px 8px 12px 20px; font-size: 15px; } .cmp-go:hover { color: #fff; text-decoration: underline; }
.cmp-clear { background: none; border: 0; color: #fff; opacity: .7; font-size: 22px; padding: 6px 16px 8px 8px; cursor: pointer; } .cmp-clear:hover { opacity: 1; }
body.has-appbar .cmp-tray, body.has-mobile-bar .cmp-tray { bottom: 80px; }
.mcard-menu [data-compare].is-on { color: var(--accent); }

/* ---------------------------------------------------------------- slim, quiet scrollbars */
html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 30%, transparent) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 28%, transparent); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ink) 45%, transparent); background-clip: padding-box; }
.shipc-opts { display: grid; gap: 10px; margin: 6px 0 2px; }
.shipc-opts.is-2 { grid-template-columns: 1fr 1fr; }
.shipc-opt { display: grid; gap: 2px; }
.shipc-opts.is-2 .shipc-opt { border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: var(--radius); padding: 10px 12px; background: var(--card); }
.shipc-oname { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.shipc-opts.is-2 .shipc-price { font-size: 28px; }
.shipc-days { font-size: 14px; font-weight: 600; }

/* ---------------------------------------------------------------- vehicle page: one grid, no empty gap under the photos */
.v-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); grid-template-rows: auto auto auto 1fr; grid-template-areas: "g p" "m p" "e p" ". p"; column-gap: 34px; align-items: start; }
.v-layout > * { min-width: 0; }
.v-layout > .v-gallery { grid-area: g; }
.v-layout > .v-panel { grid-area: p; align-self: start; }
.v-layout > .v-main-col { grid-area: m; margin-top: 36px; }
.v-layout > .v-enquire { grid-area: e; margin-top: 30px; }
@media (max-width: 960px) {
  .v-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "g" "p" "m" "e"; }
  .v-layout > .v-panel { margin-top: 18px; position: static; }
  .v-layout > .v-main-col { margin-top: 28px; }
}
.v-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.v-topbar .crumbs { margin-bottom: 0; }
.v-pn { display: flex; align-items: center; gap: 4px; margin: 10px 0; }
.v-pn-a { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: var(--radius); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14.5px; transition: background .15s, color .15s; }
.v-pn-a:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.v-pn-a.is-off { opacity: .35; pointer-events: none; }
.v-pn-l { transform: rotate(180deg); }
.v-pn-n { font-size: 13px; color: var(--muted); padding: 0 8px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.v-topbar + .notice, .v-topbar + .v-layout { margin-top: 6px; }
.v-pn-big { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; margin: 40px 0 10px; }
.v-pn-card { display: grid; gap: 4px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.v-pn-card:hover { border-color: var(--accent); transform: translateY(-2px); color: var(--ink); }
.v-pn-card.is-next { text-align: right; }
.v-pn-card small { color: var(--accent); font-weight: 700; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; } .v-pn-card b { font-size: 17px; }
.v-pn-all { display: flex; align-items: center; gap: 8px; padding: 0 18px; font-weight: 600; color: var(--muted); text-decoration: none; }
@media (max-width: 640px) { .v-pn-big { grid-template-columns: 1fr 1fr; } .v-pn-all { grid-column: 1 / -1; grid-row: 2; justify-content: center; padding: 8px; } .v-pn-card { padding: 12px 14px; } .v-pn-card b { font-size: 15px; } .v-topbar { gap: 0; } .v-pn { width: 100%; justify-content: space-between; margin: 4px 0 8px; } }
.mtag-free { top: auto !important; bottom: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px; background: #1c7c3c !important; color: #fff !important; }
.bb-free { display: flex; gap: 12px; align-items: center; margin: 16px 0 0; padding: 12px 14px; border-radius: var(--radius); background: #e5f5ea; color: #145c2c; border: 1px solid #b6e0c3; }
.bb-free b { display: block; font-size: 16px; } .bb-free span { font-size: 13.5px; }

/* full screen: a clear close button */
.v-gallery.is-full [data-full] { position: absolute; top: 14px; right: 14px; z-index: 6; width: 46px; height: 46px; border-radius: 50%; font-size: 0; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: #fff; }
.v-gallery.is-full [data-full]::before { content: "×"; font-size: 30px; line-height: 1; }
.v-gallery.is-full [data-full]:hover { background: rgba(255,255,255,.28); }
/* saved + compare dock */
.cmp-tray { gap: 2px; padding: 4px; max-width: calc(100vw - 32px); }
.cmp-tray a { display: inline-flex; align-items: center; gap: 6px; color: #fff; text-decoration: none; font-weight: 700; padding: 10px 14px; border-radius: 30px; font-size: 14.5px; white-space: nowrap; }
.cmp-tray a:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.cmp-tray a[hidden], .cmp-tray [hidden] { display: none !important; }
.dock-ico { font-size: 16px; } .dock-fav .dock-ico { color: #ff6b6b; }
.cmp-tray b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #fff; color: #111; font-size: 12px; display: inline-grid; place-items: center; }
.dock-sep { width: 1px; height: 22px; background: rgba(255,255,255,.25); }
.cmp-tray .cmp-clear { padding: 6px 12px 8px 6px; }
@media (max-width: 560px) { .cmp-tray .dock-l { display: none; } .cmp-tray a { padding: 10px 12px; } }

/* ---------------------------------------------------------------- phone menu: smoother, more polished slide-in */
.drawer-overlay { background: rgba(8,10,12,.55); backdrop-filter: blur(4px); transition: opacity .35s ease; }
.drawer-panel { transition: transform .42s cubic-bezier(.22,1,.36,1); will-change: transform; border-radius: 18px 0 0 18px; }
.drawer.is-dragging .drawer-panel { transition: none; }
.drawer-head { position: sticky; top: -16px; z-index: 2; background: var(--paper); margin: -16px -20px 0; padding: calc(14px + env(safe-area-inset-top)) 20px 12px; border-bottom: 1px solid transparent; transition: border-color .2s; }
.drawer-panel.is-scrolled .drawer-head { border-color: var(--line); }
.drawer-close { transition: transform .3s, background .2s; } .drawer-close:hover { transform: rotate(90deg); }
.drawer-nav { border-top: 0; }
.drawer .drawer-nav > *, .drawer .drawer-quick, .drawer .drawer-status, .drawer .drawer-call-st, .drawer .drawer-foot, .drawer .drawer-panel > .btn { opacity: 0; transform: translateX(24px); transition: opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1); }
.drawer.is-open .drawer-nav > *, .drawer.is-open .drawer-quick, .drawer.is-open .drawer-status, .drawer.is-open .drawer-call-st, .drawer.is-open .drawer-foot, .drawer.is-open .drawer-panel > .btn { opacity: 1; transform: none; }
.drawer.is-open .drawer-status { transition-delay: .05s; }
.drawer.is-open .drawer-nav > :nth-child(1) { transition-delay: .07s; } .drawer.is-open .drawer-nav > :nth-child(2) { transition-delay: .1s; } .drawer.is-open .drawer-nav > :nth-child(3) { transition-delay: .13s; }
.drawer.is-open .drawer-nav > :nth-child(4) { transition-delay: .16s; } .drawer.is-open .drawer-nav > :nth-child(5) { transition-delay: .19s; } .drawer.is-open .drawer-nav > :nth-child(6) { transition-delay: .22s; }
.drawer.is-open .drawer-nav > :nth-child(7) { transition-delay: .25s; } .drawer.is-open .drawer-nav > :nth-child(8) { transition-delay: .28s; } .drawer.is-open .drawer-nav > :nth-child(n+9) { transition-delay: .3s; }
.drawer.is-open .drawer-quick { transition-delay: .3s; } .drawer.is-open .drawer-call-st, .drawer.is-open .drawer-panel > .btn { transition-delay: .34s; } .drawer.is-open .drawer-foot { transition-delay: .38s; }
.dn-link { font-size: 22px; padding: 15px 6px; border-radius: 0; transition: background .15s, color .15s, padding .2s; position: relative; }
.dn-link:active { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.dn-link.on { padding-left: 16px; } .dn-link.on::before { content: ""; position: absolute; left: 4px; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--accent); }
.dn-sub { display: flex; max-height: 0; overflow: hidden; padding: 0 0 0 12px; border-bottom: 0; transition: max-height .4s cubic-bezier(.22,1,.36,1), padding .3s; }
.dn-group.open .dn-sub { max-height: 700px; padding: 4px 0 12px 12px; border-bottom: 1px solid var(--line); }
.drawer-quick a { transition: transform .15s, border-color .15s; } .drawer-quick a:active { transform: scale(.96); border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .drawer-panel, .drawer .drawer-nav > *, .drawer .drawer-quick, .drawer .drawer-foot { transition: none !important; } }
/* burger turns into an X while the menu is open */
.burger .ico, .hdr-burger .ico { transition: transform .3s; }
body.drawer-open [aria-controls="drawer"] .ico, body.drawer-open .burger .ico { transform: rotate(90deg); }

/* ---------------------------------------------------------------- phones: swipe rows */
.ms-wrap { position: relative; min-width: 0; max-width: 100%; }
.ms-arrow, .ms-bar { display: none; }
@media (max-width: 767px) {
  .mswipe { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; gap: 12px !important; grid-template-columns: none !important;
    margin: 0 -16px; padding: 4px 16px 6px; scroll-padding: 0 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .mswipe::-webkit-scrollbar { display: none; }
  .mswipe > * { flex: 0 0 82%; scroll-snap-align: start; min-width: 0; }
  .wmk.mswipe > *, .wbt.mswipe > * { flex-basis: 36%; }
  .wts.mswipe > * { flex-basis: 72%; }
  .wrv-grid.mswipe > *, .bld .b-grid.mswipe > * { flex-basis: 78%; }
  .wsp.mswipe > *, .wcg.mswipe > * { flex-basis: 84%; }
  .ms-wrap.is-scroll .ms-arrow { display: grid; place-items: center; position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: color-mix(in srgb, var(--card) 92%, transparent); color: var(--ink); box-shadow: 0 4px 14px rgba(0,0,0,.15); backdrop-filter: blur(6px); cursor: pointer; transition: opacity .2s; }
  .ms-wrap.is-scroll .ms-prev { left: -6px; } .ms-wrap.is-scroll .ms-next { right: -6px; }
  .ms-arrow:disabled { opacity: 0; pointer-events: none; }
  .ms-wrap.is-scroll .ms-bar { display: block; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 10%, transparent); margin: 12px auto 0; width: 34%; overflow: hidden; }
  .ms-bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); transition: transform .1s linear; }
  .bld-section.has-bg .ms-wrap .ms-bar, [style*="color:#fff"] .ms-bar { background: rgba(255,255,255,.2); }
}

/* ---------------------------------------------------------------- big slideshow on phones: the whole car on a soft blurred backdrop, text over it */
.hs-blur { display: none; }
@media (max-width: 767px) {
  .hs { height: min(122vw, 600px) !important; min-height: 0 !important; }
  .hs-blur { display: block; position: absolute; inset: -30px; background-size: cover; background-position: center; filter: blur(24px) saturate(1.15) brightness(.62); transform: scale(1.08); }
  .hs-media img { object-fit: contain !important; object-position: center 22% !important; z-index: 1; }
  .hs.kb .hs-slide.is-active .hs-media img { animation: none; }
  .hs-shade { opacity: 1 !important; background: linear-gradient(180deg, transparent 38%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.88) 100%) !important; z-index: 1; }
  .hs-content { z-index: 2; align-items: flex-end !important; justify-content: flex-start !important; text-align: left !important; padding: 0 18px 44px !important; }
  .hs-inner { max-width: none; width: 100%; }
  .hs-kicker { font-size: 11.5px; margin-bottom: 6px; opacity: .9; }
  .hs-title { font-size: clamp(28px, 8.6vw, 38px); margin-bottom: 4px; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
  .hs-text { font-size: 15px; margin: 0; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .hs-price { font-size: 24px; margin: 6px 0 0; }
  .hs-btns { margin-top: 12px; } .hs-btns .b-btn { flex: 0 0 auto; padding: 11px 18px; font-size: 14.5px; }
  .hs-dots { bottom: 16px; left: auto; right: 18px; transform: none; z-index: 3; }
}
@media (max-width: 767px) {
  .cmp-scroll { margin: 0 -16px 40px; padding: 0 16px; }
  .cmp-tbl { min-width: calc(110px + var(--n) * 170px); }
  .cmp-tbl tbody th, .cmp-tbl thead th:first-child { width: 110px; position: sticky; left: 0; z-index: 1; background: var(--card); }
  .cmp-tbl th, .cmp-tbl td { padding: 10px; font-size: 14px; }
  .cmp-title { font-size: 17px; }
}
.free-check { display: flex; gap: 8px; align-items: center; font-weight: 600; margin: 4px 0 12px; }
.shipc-ticks { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; color: var(--muted); }
.shipc-ticks li { display: inline-flex; gap: 6px; align-items: center; } .shipc-ticks svg { color: var(--accent); }

/* ---------------------------------------------------------------- languages */
.flag { display: inline-block; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); flex: 0 0 auto; vertical-align: middle; }
.lang-sw { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 30px; background: var(--card); color: var(--ink); font: 600 13px/1 var(--body); cursor: pointer; }
.lang-btn:hover { border-color: var(--ink); }
.lang-list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; min-width: 220px; list-style: none; margin: 0; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.16); }
.lang-list a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.lang-list a:hover, .lang-list a.on { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.lang-list b { display: block; font-size: 14.5px; } .lang-list small { display: block; font-size: 12px; color: var(--muted); }
.lang-list a.on b::after { content: " ✓"; color: var(--accent); }
.foot-lang .lang-list { top: auto; bottom: calc(100% + 8px); }
.foot-lang .lang-btn { background: transparent; color: inherit; border-color: rgba(127,127,127,.4); }
.drawer-langs { display: flex; flex-wrap: wrap; gap: 8px; }
.drawer-langs a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 30px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14px; background: var(--card); }
.drawer-langs a.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.lang-ask { position: fixed; z-index: 95; left: 50%; top: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; background: var(--dark); color: #fff; border-radius: 40px; box-shadow: 0 14px 40px rgba(0,0,0,.25); font-size: 14.5px; max-width: calc(100vw - 24px); animation: lpUp .3s ease; }
.lang-ask a { background: var(--accent); color: #fff; padding: 8px 14px; border-radius: 30px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.lang-ask button { background: none; border: 0; color: #fff; opacity: .7; font-size: 22px; cursor: pointer; padding: 0 6px; }
@media (max-width: 860px) { .hdr-lang { display: none; } }
@keyframes lpUp { from { opacity: 0; transform: translate(-50%, -10px); } }

/* ---------- Language & region window ---------- */
.lr-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; }
.lr-btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.45); }
.lr-btn .flag { border-radius: 3px; }
.lr-cur { padding-left: 8px; border-left: 1px solid currentColor; opacity: .75; }
.lr-modal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 20px; background: rgba(10,14,12,.55); opacity: 0; transition: opacity .18s; }
.lr-modal[hidden] { display: none; }
.lr-modal.is-open { opacity: 1; }
.lr-box { position: relative; width: min(680px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: var(--card); color: var(--ink); border-radius: 20px; padding: 30px 30px 24px; box-shadow: 0 30px 80px rgba(0,0,0,.3); transform: translateY(14px) scale(.98); transition: transform .2s; }
.lr-modal.is-open .lr-box { transform: none; }
.lr-box h2 { margin: 0 0 18px; font-size: 26px; padding-right: 40px; }
.lr-box h3 { font-family: var(--body); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 20px 0 10px; }
.lr-x { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); font-size: 24px; line-height: 1; cursor: pointer; color: var(--ink); }
.lr-x:hover { background: var(--paper); }
.lr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.lr-opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); text-decoration: none; text-align: left; font: inherit; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.lr-opt:hover { border-color: var(--ink); color: var(--ink); }
.lr-opt span { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.lr-opt b { font-size: 15.5px; } .lr-opt small { font-size: 13px; color: var(--muted); }
.lr-opt .flag { border-radius: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); flex: 0 0 auto; }
.lr-opt > svg:last-child { color: var(--accent); opacity: 0; flex: 0 0 auto; }
.lr-opt.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--card)); }
.lr-opt.is-on > svg:last-child { opacity: 1; }
.lr-sym { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); font-size: 14px; flex: 0 0 auto; }
.lr-note { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
html.lr-lock { overflow: hidden; }
@media (max-width: 560px) { .lr-modal { place-items: end center; padding: 0; } .lr-box { border-radius: 20px 20px 0 0; padding: 24px 18px 20px; max-height: 88vh; } .lr-grid { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   Header & footer options (Admin → Header & footer)
   ========================================================================== */
.header-in { min-height: var(--hdr-h, 76px); }
.site-header.is-scrolled .header-in { min-height: calc(var(--hdr-h, 76px) - 12px); }
.wrap-wide { max-width: none; padding-left: clamp(16px, 3vw, 40px); padding-right: clamp(16px, 3vw, 40px); }
.nav-link { font-size: var(--nav-size, 16px); font-weight: var(--nav-weight, 600); text-transform: var(--nav-case, none); letter-spacing: 0; }
[data-nav-hover="pill"] .nav-link { border-radius: 999px; padding: 9px 14px; }
[data-nav-hover="pill"] .nav-link::after, [data-nav-hover="color"] .nav-link::after, [data-nav-hover="none"] .nav-link::after { display: none; }
[data-nav-hover="pill"] .nav-link:hover, [data-nav-hover="pill"] .nav-link.on { background: color-mix(in srgb, var(--ink) 7%, transparent); }
[data-nav-hover="color"] .nav-link:hover, [data-nav-hover="color"] .nav-link.on { color: var(--accent); }
.site-header.no-border { border-bottom-color: transparent; }
[data-shadow="always"].site-header { box-shadow: 0 6px 24px rgba(0,0,0,.08); }
[data-shadow="none"].site-header, [data-shadow="none"].site-header.is-scrolled { box-shadow: none; }
[data-cta="outline"] .header-cta { background: transparent; color: var(--accent); border-color: var(--accent); }
[data-cta="outline"] .header-cta:hover { background: var(--accent); color: #fff; }
[data-cta="pill"] .header-cta { border-radius: 999px; padding-left: 22px; padding-right: 22px; }
.site-header[data-own-bg] { background: var(--hdr-bg); }
.site-header[data-own-bg] .nav-link, .site-header[data-own-bg] .brand-name, .site-header[data-own-bg] .hdr-icon, .site-header[data-own-bg] .hc-txt span { color: var(--hdr-fg, inherit); }
.topbar-msg { font-weight: 600; }
.topbar-addr:empty { flex: 1; }

/* Floating */
[data-hdr="boxed"] .site-header { background: transparent; border-bottom: 0; padding: 12px 0 0; }
[data-hdr="boxed"] .site-header .header-in { background: var(--hdr-bg, var(--card)); border-radius: 18px; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 10px 30px rgba(0,0,0,.08); padding-left: 22px; padding-right: 16px; max-width: calc(var(--wrap) - 16px); }
[data-hdr="boxed"] .site-header.is-scrolled { box-shadow: none; }
[data-hdr="boxed"] .site-header.is-scrolled .header-in { box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 14px 40px rgba(0,0,0,.14); }
[data-hdr="boxed"] .header-call { border-left: 0; }
/* Over the photo (home page only) */
.hdr-over .site-header { position: absolute; left: 0; right: 0; top: var(--hdr-top, 0px); background: linear-gradient(rgba(0,0,0,.45), transparent); border-bottom-color: transparent; transition: background .25s, box-shadow .25s; }
.hdr-over .site-header:not(.is-scrolled) :is(.nav-link, .brand-name, .brand-tag, .hdr-icon, .hc-txt span, .hc-txt small, .lang-btn) { color: #fff; }
.hdr-over .site-header:not(.is-scrolled) .burger { background: transparent; border-color: rgba(255,255,255,.5); }
.hdr-over .site-header:not(.is-scrolled) .burger span { background: #fff; }
.hdr-over .site-header:not(.is-scrolled) .header-call { border-left-color: rgba(255,255,255,.25); }
.hdr-over .site-header:not(.is-scrolled) .nav-link:hover { background: rgba(255,255,255,.12); }
.hdr-over .site-header.is-scrolled { background: var(--hdr-bg, var(--card)); position: fixed; top: 0; box-shadow: 0 6px 24px rgba(0,0,0,.1); }
/* Marketplace (search box in the header) */
.hdr-search { display: none; }
[data-hdr="marketplace"] .hdr-search { display: flex; align-items: center; gap: 8px; flex: 1; max-width: 520px; margin: 0 8px; border: 1.5px solid var(--line-2); border-radius: 999px; padding: 4px 4px 4px 14px; background: var(--card); transition: border-color .15s, box-shadow .15s; }
[data-hdr="marketplace"] .hdr-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
[data-hdr="marketplace"] .hdr-search svg { color: var(--muted); flex: 0 0 auto; }
[data-hdr="marketplace"] .hdr-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 8px 0; font-size: 15px; }
[data-hdr="marketplace"] .hdr-search button { border: 0; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; padding: 9px 18px; cursor: pointer; }
[data-hdr="marketplace"] [data-search-open] { display: none; }
@media (min-width: 1100px) {
  [data-hdr="marketplace"] .header-in { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "brand search actions" "nav nav nav"; column-gap: 24px; padding-top: 10px; }
  [data-hdr="marketplace"] .brand { grid-area: brand; }
  [data-hdr="marketplace"] .hdr-search { grid-area: search; justify-self: center; width: 100%; }
  [data-hdr="marketplace"] .header-actions { grid-area: actions; }
  [data-hdr="marketplace"] .mainnav { grid-area: nav; margin: 6px 0 0; border-top: 1px solid var(--line); padding: 4px 0; }
  [data-hdr="marketplace"] .site-header.compact .mainnav { display: block; }
  [data-hdr="marketplace"] .site-header.compact .burger { display: none; }
}
@media (max-width: 1099px) { [data-hdr="marketplace"] .hdr-search { display: none; } [data-hdr="marketplace"] [data-search-open] { display: grid; } }

/* ---------- footer styles ---------- */
.site-footer[data-own-bg] { background: var(--ft-bg) !important; color: var(--ft-fg, inherit) !important; }
.site-footer[data-own-bg] a, .site-footer[data-own-bg] .f-head, .site-footer[data-own-bg] .f-name { color: var(--ft-fg, inherit) !important; }
.footer-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.footer-grid > .f-about { grid-column: span 1; min-width: 220px; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.4fr repeat(auto-fit, minmax(150px, 1fr)); } }
.f-tag { opacity: .8; margin: -4px 0 14px; }
.f-contact { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 8px; }
.f-contact svg { flex: 0 0 auto; margin-top: 4px; opacity: .7; }
.f-social { display: flex; gap: 8px; margin-top: 16px; }
.f-social a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 25%, transparent); transition: background .15s, transform .15s; text-decoration: none !important; }
.f-social a:hover { background: color-mix(in srgb, currentColor 12%, transparent); transform: translateY(-2px); }
.f-ticks { list-style: none; padding: 0; margin: 0; }
.f-ticks li { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; }
.f-ticks svg { flex: 0 0 auto; margin-top: 5px; color: var(--accent-light, var(--accent)); }
.f-news-t { opacity: .8; font-size: 14.5px; margin: 0 0 12px; }
.f-news .wnl-row { box-shadow: none; padding: 4px; }
.f-news .wnl-row input { padding: 9px 12px; font-size: 15px; }
.f-news .wnl-row button { padding: 10px 14px; }
.f-news .wnl-msg { font-size: 14px; }
.f-news form.is-done .wnl-row { display: none; }
.f-pay { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 18px; }
.f-pay span { font-size: 12.5px; font-weight: 700; padding: 5px 11px; border-radius: 6px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); opacity: .85; }
.f-copy { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.f-top { opacity: .8; }
.f-legal { align-items: center; flex-wrap: wrap; }
/* light */
.site-footer.ft-light { background: var(--card); color: var(--ink-2); border-top: 1px solid var(--line); }
.site-footer.ft-light a, .site-footer.ft-light .f-head, .site-footer.ft-light .f-name, .site-footer.ft-light .f-hours tr.today { color: var(--ink); }
.site-footer.ft-light .f-legal { border-top-color: var(--line); color: var(--muted); }
.site-footer.ft-light .lr-btn, .site-footer.ft-panel .lr-btn { border-color: var(--line-2); }
.site-footer.ft-light .f-news .wnl-row, .site-footer.ft-panel .f-news .wnl-row { border: 1px solid var(--line-2); }
/* rounded panel */
.site-footer.ft-panel { background: transparent; color: var(--ink-2); padding: 0 16px 16px; }
.site-footer.ft-panel > .wrap { background: color-mix(in srgb, var(--ink) 5%, var(--card)); }
.site-footer.ft-panel .footer-grid { border-radius: 24px 24px 0 0; padding: 48px 40px 30px; max-width: calc(var(--wrap) + 40px); }
.site-footer.ft-panel .f-pay { padding: 0 40px 18px; max-width: calc(var(--wrap) + 40px); }
.site-footer.ft-panel .f-legal { border-radius: 0 0 24px 24px; border-top: 1px solid var(--line); padding: 18px 40px 22px; max-width: calc(var(--wrap) + 40px); color: var(--muted); }
.site-footer.ft-panel a, .site-footer.ft-panel .f-head, .site-footer.ft-panel .f-name, .site-footer.ft-panel .f-hours tr.today { color: var(--ink); }
.site-footer.ft-panel[data-own-bg] { background: transparent !important; }
.site-footer.ft-panel[data-own-bg] > .wrap { background: var(--ft-bg); }
/* brand colour */
.site-footer.ft-brand { background: var(--accent); color: rgba(255,255,255,.85); }
.site-footer.ft-brand .f-legal { border-top-color: rgba(255,255,255,.2); color: rgba(255,255,255,.75); }
/* centred */
.site-footer.ft-centered .footer-grid { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; padding-bottom: 20px; }
.site-footer.ft-centered .footer-grid > div:not(.f-about) { display: none; }
.site-footer.ft-centered .f-contact { justify-content: center; }
.site-footer.ft-centered .f-social { justify-content: center; }
.site-footer.ft-centered .f-legal { flex-direction: column; text-align: center; gap: 12px; }
.site-footer.ft-centered .f-pay { justify-content: center; }
.site-footer.ft-centered .f-centered-links { display: flex; }
@media (max-width: 760px) {
  .site-footer.ft-panel { padding: 0 8px 8px; }
  .site-footer.ft-panel .footer-grid { padding: 32px 20px 22px; border-radius: 20px 20px 0 0; }
  .site-footer.ft-panel .f-pay { padding: 0 20px 16px; }
  .site-footer.ft-panel .f-legal { padding: 16px 20px 20px; border-radius: 0 0 20px 20px; }
}
.hdr-over .site-header:not(.is-scrolled) .lang-btn { background: transparent; border-color: rgba(255,255,255,.4); }
.hdr-over .site-header:not(.is-scrolled) .hc-ico { background: rgba(255,255,255,.18); color: #fff; }

/* chat: menu, end, rating */
.chat-head { position: relative; }
.chat-more { position: relative; margin-left: auto; }
.chat-dots { width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.chat-dots:hover { background: rgba(255,255,255,.25); }
.chat-head .chat-close { margin-left: 6px; }
.chat-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; background: #fff; color: #18191b; border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.2); padding: 6px; z-index: 5; }
.chat-menu[hidden] { display: none; }
.chat-menu button { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; background: none; border-radius: 8px; font: inherit; font-size: 14.5px; cursor: pointer; color: inherit; }
.chat-menu button:hover { background: #f2f3f1; }
.chat-menu .is-danger, .chat-end .is-danger { color: #b3261e; }
.chat-end, .chat-rate, .chat-done { margin: 0 12px 12px; padding: 14px; border-radius: 14px; background: #f5f6f4; text-align: center; font-size: 15px; }
.chat-end[hidden], .chat-rate[hidden], .chat-done[hidden] { display: none; }
.chat-end p, .chat-done p { margin: 0 0 10px; font-weight: 600; }
.chat-end div, .chat-rate-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.chat-end button, .chat-done button, .chat-rate-btns button { border: 1px solid #d5d8d3; background: #fff; border-radius: 999px; padding: 9px 16px; font: inherit; font-weight: 600; cursor: pointer; }
.chat-end .is-danger { border-color: #e5b4b0; }
.chat-done button, .chat-rate-btns [type=submit] { background: var(--accent); border-color: var(--accent); color: #fff; }
.chat-rate-btns [type=submit]:disabled { opacity: .45; cursor: default; }
.chat-rate b { display: block; margin-bottom: 6px; }
.chat-stars { display: flex; justify-content: center; gap: 4px; margin-bottom: 10px; }
.chat-stars button { border: 0; background: none; font-size: 32px; line-height: 1; color: #d0d3cf; cursor: pointer; padding: 0 2px; transition: transform .12s, color .12s; }
.chat-stars button:hover { transform: scale(1.15); }
.chat-stars button.on { color: #f2b01e; }
.chat-rate textarea { width: 100%; border: 1px solid #d5d8d3; border-radius: 10px; padding: 9px 11px; font: inherit; font-size: 14.5px; resize: vertical; margin-bottom: 10px; background: #fff; }
.chat-msg.from-system p { font-style: italic; }

/* ==========================================================================
   Inventory filters (Admin → Search & filters)
   ========================================================================== */
.stock-layout.inv-left { grid-template-columns: 290px minmax(0, 1fr); }
.stock-layout.inv-right { grid-template-columns: minmax(0, 1fr) 290px; }
.stock-layout.inv-right .filters { order: 2; }
.stock-layout.inv-top { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.inv-cols-2 .results .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.inv-cols-3 .results .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.inv-cols-4 .results .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .inv-left.inv-cols-4 .results .grid, .inv-right.inv-cols-4 .results .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1080px) { .inv-left .results .grid, .inv-right .results .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .stock-layout.inv-left, .stock-layout.inv-right { grid-template-columns: 1fr; } .stock-layout .results .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .stock-layout .results .grid { grid-template-columns: 1fr; } }

@media (min-width: 961px) { .filters-form { top: 96px; max-height: calc(100vh - 110px); overflow: auto; scrollbar-width: thin; } }
.fls-card .filters-form { background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--radius) + 10px); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.06); padding: 18px 18px 16px; }
.fls-soft .filters-form { background: color-mix(in srgb, var(--ink) 4%, var(--card)); border-radius: calc(var(--radius) + 10px); padding: 18px 18px 16px; }
.fl-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.fl-head b { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; }
.fl-clear { font-size: 14px; font-weight: 600; color: var(--accent); }
.fl-q { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--line-2); border-radius: 999px; padding: 0 14px; background: var(--field, #fff); margin-bottom: 8px; transition: border-color .15s, box-shadow .15s; }
.fl-q:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.fl-q svg { color: var(--muted); flex: 0 0 auto; }
.fl-q input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 11px 0; font-size: 16px; }
.fg { border-bottom: 1px solid var(--line); }
.fg:last-of-type { border-bottom: 0; }
.fg summary { display: flex; align-items: center; gap: 8px; padding: 14px 2px; cursor: pointer; list-style: none; font-weight: 700; font-size: 15px; user-select: none; }
.fg summary::-webkit-details-marker { display: none; }
.fg summary span { flex: 0 0 auto; }
.fg summary em { flex: 1; min-width: 0; text-align: right; font-style: normal; font-weight: 600; font-size: 13px; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg summary svg { flex: 0 0 auto; color: var(--muted); transition: transform .2s; }
.fg[open] summary svg { transform: rotate(180deg); }
.fg-body { padding: 0 2px 16px; }
.fg-body select { width: 100%; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--field, #fff); font-size: 15px; }
.fpills { display: flex; flex-wrap: wrap; gap: 7px; }
.fpill { position: relative; }
.fpill input, .frow input { position: absolute; opacity: 0; pointer-events: none; }
.fpill span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--card); font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.fpill span small, .frow small { font-weight: 500; font-size: 12px; color: var(--muted); }
.fpill span:hover { border-color: var(--ink); }
.fpill input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.fpill input:checked + span small { color: rgba(255,255,255,.8); }
.fpill input:focus-visible + span, .frow input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.fl-find { width: 100%; border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 12px; font-size: 15px; margin-bottom: 6px; background: var(--field, #fff); }
.flist { max-height: 250px; overflow: auto; margin: 0 -4px; padding: 0 4px; scrollbar-width: thin; }
.frow { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: 15px; }
.frow[hidden] { display: none; }
.frow:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.frow span { flex: 1; display: flex; align-items: center; gap: 10px; }
.frow span::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-2); flex: 0 0 auto; transition: border .15s; box-sizing: border-box; }
.frow input:checked + span { font-weight: 700; }
.frow input:checked + span::before { border: 5.5px solid var(--accent); }
.frange { padding: 4px 4px 2px; }
.frange-vals { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 12px; font-size: 14px; }
.frange-vals output { font-weight: 700; padding: 5px 10px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.frange.is-single .frange-vals { justify-content: flex-start; align-items: center; color: var(--muted); }
.frange-track { position: relative; height: 22px; }
.frange-track::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 4px; border-radius: 2px; background: var(--line); }
.frange-track i { position: absolute; top: 9px; height: 4px; border-radius: 2px; background: var(--accent); }
.frange-track input { position: absolute; left: 0; width: 100%; top: 0; height: 22px; margin: 0; background: none; -webkit-appearance: none; appearance: none; pointer-events: none; z-index: 2; }
.frange-track input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); box-shadow: 0 2px 6px rgba(0,0,0,.2); cursor: grab; transition: transform .12s; }
.frange-track input::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); box-shadow: 0 2px 6px rgba(0,0,0,.2); cursor: grab; }
.frange-track input:active::-webkit-slider-thumb { transform: scale(1.15); cursor: grabbing; }
.frange-track input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 25%, transparent); }
.frange-track input::-webkit-slider-runnable-track { background: none; }
.frange-track input::-moz-range-track { background: none; }
.fl-switch { display: flex; align-items: center; gap: 10px; padding: 14px 2px; font-weight: 600; font-size: 15px; cursor: pointer; }
.fl-switch input { position: absolute; opacity: 0; }
.fl-switch span { width: 40px; height: 24px; border-radius: 12px; background: var(--line-2); position: relative; transition: background .2s; flex: 0 0 auto; }
.fl-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.fl-switch input:checked + span { background: var(--accent); }
.fl-switch input:checked + span::after { transform: translateX(16px); }
.fl-switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.fl-foot { position: sticky; bottom: -16px; background: inherit; padding-top: 12px; margin-top: 4px; }
.fls-plain .fl-foot { background: var(--paper); }
.fl-show { border-radius: 12px; }
.filters-form.is-counting [data-fl-count] { opacity: .45; }
.filters-form.is-zero .fl-show { background: var(--muted); border-color: var(--muted); }
.fl-foot .reset { display: block; text-align: center; margin-top: 10px; font-size: 14px; }
.fl-badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--accent); color: #fff; font-size: 12px; }
.filters-toggle svg { vertical-align: -3px; }
/* filter bar on top */
@media (min-width: 961px) {
  .fl-top .filters-form { display: flex; position: relative; top: auto; max-height: none; overflow: visible; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; }
  .fl-top .fl-head { display: none; }
  .fl-top .fl-q { margin: 0; flex: 1 1 220px; max-width: 320px; }
  .fl-top .fl-groups { display: contents; }
  .fl-top .fg { position: relative; border: 0; flex: 0 0 auto; width: auto; }
  .fl-top .fl-switch { flex: 0 0 auto; }
  .fl-top .fg summary { padding: 9px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--card); font-size: 14.5px; gap: 6px; }
  .fl-top .fg summary:hover { border-color: var(--ink); }
  .fl-top .fg summary em { max-width: 120px; text-align: left; }
  .fl-top .fg summary em:empty { display: none; }
  .fl-top .fg[open] summary { border-color: var(--accent); }
  .fl-top .fg-body { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; width: 320px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.16); padding: 16px; }
  .fl-top .fl-switch { padding: 6px 4px; }
  .fl-top .fl-foot { position: static; padding: 0; margin: 0 0 0 auto; background: none; display: flex; align-items: center; gap: 12px; }
  .fl-top .fl-foot .reset { margin: 0; }
  .fl-top .fl-show { width: auto; padding: 10px 20px; }
}
/* phone: filters slide up from the bottom */
@media (max-width: 960px) {
  .filters-toggle { border: 1.5px solid var(--line-2) !important; border-radius: 999px !important; background: var(--card) !important; padding: 12px 18px !important; font-weight: 700; }
  .filters.open .filters-form { max-height: none; padding-bottom: 20px; border-radius: 20px 20px 0 0; }
  .filters .fl-head { display: none; }
  .filters.open .fl-foot { position: sticky; bottom: -20px; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); background: var(--paper); }
  .fls-card .filters.open .filters-form, .fls-card.filters.open .filters-form { background: var(--card); }
  .fl-top .fg summary { padding: 14px 2px; }
}

.sitemap-page { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 30px 40px; padding-bottom: 60px; }
.sitemap-page h2 { font-size: 20px; margin-bottom: 10px; }
.sitemap-page ul { list-style: none; margin: 0; padding: 0; }
.sitemap-page li { padding: 4px 0; }

/* phone + language in the info bar, "More ▾" menu */
.topbar-in { flex-wrap: nowrap; }
.tb-call { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 10px; margin-left: 4px; border-radius: 999px; background: var(--accent); color: #fff !important; font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; transition: filter .15s; }
.tb-call:hover { filter: brightness(1.1); }
.tb-call .call-dot { margin: 0; }
.tb-lang .lang-btn { height: 28px; padding: 0 9px; font-size: 13px; background: transparent; border-color: color-mix(in srgb, currentColor 25%, transparent); color: inherit; }
.tb-lang .lang-btn .flag { width: 18px; height: auto; }
.tb-lang .lang-list { z-index: 120; }
.topbar { position: relative; z-index: 45; }
.topbar .topbar-addr { margin-right: auto; }
.nav-more .more-btn { border: 0; background: none; cursor: pointer; font: inherit; color: inherit; display: inline-flex; align-items: center; gap: 4px; }
.nav-more .more-btn svg { transition: transform .2s; }
.nav-more.open .more-btn svg, .nav-more:hover .more-btn svg { transform: rotate(180deg); }
.nav-sub-more { left: auto; right: 0; min-width: 240px; }
.nav-sub-more > .nav-item { display: block; }
.nav-sub-more > .nav-item > .nav-link { display: flex; padding: 10px 12px; border-radius: var(--radius); font-weight: 500; }
.nav-sub-more > .nav-item > .nav-link::after { display: none; }
.nav-sub-more > .nav-item > .nav-link:hover, .nav-sub-more > .nav-item > .nav-link.on { background: var(--paper); color: var(--accent); }
.nav-sub-more .sub-toggle { display: none; }
.nav-sub-more .nav-sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 4px 12px; min-width: 0; background: none; }
.nav-sub-more .nav-sub a { padding: 7px 12px; font-size: 14.5px; color: var(--ink-2); }
@media (max-width: 760px) { .tb-call span { display: none; } .tb-call { padding: 5px 8px; } .tb-lang { display: none; } }

/* live-search wraps search boxes in .ls-wrap — let it fill the bar */
.whs-bar > .ls-wrap, .hdr-search > .ls-wrap, .fl-q > .ls-wrap { flex: 1 1 auto; min-width: 0; }
.whs .whs-bar > .ls-wrap input, .site-header .hdr-search > .ls-wrap input, .filters .fl-q > .ls-wrap input { width: 100%; }

/* inventory filters: no inner scroll bar — the whole box shows, the page scrolls */
@media (min-width: 961px) {
  .filters-form { max-height: none !important; overflow: visible !important; position: static !important; }
  .fl-foot { position: static !important; }
}

.flist { max-height: none !important; overflow: visible !important; }
.frow.is-extra { display: none; }
.flist.show-all .frow.is-extra { display: flex; }
.flist.show-all .frow.is-extra[hidden] { display: none; }
.fl-more-makes { border: 0; background: none; padding: 6px 8px; color: var(--accent); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }

/* ==========================================================================
   Live chat — polished look (all themes)
   ========================================================================== */
.chat-fab { box-shadow: 0 10px 30px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.12); transition: transform .18s, box-shadow .18s, filter .18s; }
.chat-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0,0,0,.26), 0 3px 8px rgba(0,0,0,.14); }
.chat-panel { border-radius: 20px; box-shadow: 0 24px 70px rgba(0,0,0,.28), 0 4px 14px rgba(0,0,0,.1); border: 0; overflow: hidden; animation: chat-in .22s cubic-bezier(.2,.8,.2,1); }
@keyframes chat-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.chat-head { padding: 14px 14px 14px 16px; gap: 10px; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset; }
.chat-head > div:not(.chat-avatar):not(.chat-more) { min-width: 0; flex: 1; }
.chat-head b { font-size: 16.5px; letter-spacing: -.01em; }
.chat-status { font-size: 12.5px; }
.chat-status span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-avatar { box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
.chat-endbtn { flex: 0 0 auto; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #fff; border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
.chat-endbtn:hover { background: #fff; color: #b3261e; border-color: #fff; }
.chat-endbtn[hidden] { display: none; }
.chat-more { margin-left: 0; }
.chat-head .chat-close { margin-left: 0; width: 34px; height: 34px; border-radius: 50%; transition: background .15s; }
.chat-head .chat-close:hover { background: rgba(255,255,255,.14); }
.chat-dots { width: 34px; height: 34px; }
/* thin, quiet scroll bar */
.chat-body { scrollbar-width: thin; scrollbar-color: transparent transparent; padding: 16px 14px; gap: 6px; }
.chat-body:hover { scrollbar-color: rgba(0,0,0,.18) transparent; }
.chat-body::-webkit-scrollbar { width: 6px; }
.chat-body::-webkit-scrollbar-track { background: transparent; }
.chat-body::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.chat-body:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); }
.chat-body::-webkit-scrollbar-button { display: none; height: 0; }
/* bubbles */
.chat-msg p { padding: 10px 14px; border-radius: 18px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.chat-msg.from-admin p { border: 0; background: var(--card); border-bottom-left-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.05); }
.chat-msg.from-visitor p { border-bottom-right-radius: 6px; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 25%, transparent); }
.chat-msg + .chat-msg.from-visitor, .chat-msg + .chat-msg.from-admin { margin-top: 2px; }
.chat-msg small { font-size: 11px; opacity: .8; }
.chat-msg.from-system p { box-shadow: none; font-style: normal; background: color-mix(in srgb, var(--ink) 5%, transparent); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; }
/* composer */
.chat-send { gap: 8px; padding: 10px 12px; align-items: center; border-top: 1px solid var(--line); }
.chat-send textarea { border-radius: 22px; padding: 11px 16px; resize: none; min-height: 44px; max-height: 120px; line-height: 1.4; transition: border-color .15s, box-shadow .15s; }
.chat-send textarea:focus, .chat-start input:focus, .chat-start textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent); }
.chat-send button { box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent); transition: transform .15s, filter .15s; }
.chat-send button:hover { transform: scale(1.06); filter: brightness(1.08); }
.chat-start button { border-radius: 12px; box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent); }
/* end / rate / done cards */
.chat-end, .chat-rate, .chat-done { margin: 0; border-radius: 0; border-top: 1px solid var(--line); background: var(--card); padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px rgba(0,0,0,.06); animation: chat-sheet .2s ease-out; }
@keyframes chat-sheet { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.chat-end p, .chat-done p { font-size: 16px; margin-bottom: 4px; }
.chat-end small, .chat-rate small { display: block; color: var(--muted); font-size: 13px; margin-bottom: 12px; }
.chat-end div button, .chat-done button, .chat-rate-btns button { padding: 10px 18px; font-size: 14.5px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.chat-end .is-danger { background: #b3261e; border-color: #b3261e; color: #fff; box-shadow: 0 4px 12px rgba(179,38,30,.3); }
.chat-end .is-danger:hover { filter: brightness(1.08); }
.chat-rate b { font-size: 16px; margin-bottom: 2px; }
.chat-stars button { font-size: 36px; }
.chat-quick { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 0 0 10px; }
.chat-quick button { border: 1px solid var(--line-2); background: var(--card); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink); transition: all .15s; }
.chat-quick button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.chat-done p::before { content: "✓"; display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-size: 22px; font-weight: 800; }
@media (max-width: 600px) { .chat-endbtn { padding: 6px 10px; font-size: 12.5px; } .chat-status span { max-width: 140px; } }
.chat-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.chat-who .chat-status { margin-top: 2px; font-weight: 600; font-size: 13px; opacity: 1; }
.chat-sub { display: block; font-size: 12px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.chat-sub[hidden] { display: none; }

.f-card > div { border: 1px solid color-mix(in srgb, currentColor 18%, transparent); background: color-mix(in srgb, currentColor 5%, transparent); border-radius: 18px; padding: 26px 24px; }
.f-card-eye { margin: 0 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-light, var(--accent)); }
.f-card-title { margin: 0 0 8px; font-family: var(--head); font-size: 34px; font-weight: 800; line-height: 1.05; color: var(--accent-light, var(--accent)); }
.f-card-text { margin: 0; font-size: 14.5px; opacity: .85; line-height: 1.55; }

/* Hero slideshow — "my own text over my vehicle photos": one text layer stays while the photos change */
.hs-content.hs-fixed { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hs-fixed .hs-inner { pointer-events: auto; max-width: 760px; }
.hs-fixed.has-line .hs-title { margin-bottom: 22px; }
.hs-fixed.has-line .hs-title::after { content: ""; display: block; width: min(640px, 100%); height: 1px; margin-top: 26px; background: color-mix(in srgb, var(--accent-light, var(--accent)) 60%, transparent); }
.hs-fixed .hs-title { max-width: none; }
.t-hl { color: var(--accent); }
.hs .t-hl, .sc-dark .t-hl { color: var(--accent-light, var(--accent)); }
.t-acc { color: var(--accent-light, var(--accent)); font-weight: 700; }
@media (max-width: 760px) {
  .hs-fixed .hs-text { -webkit-line-clamp: 4 !important; font-size: 14.5px; }
  .hs-fixed.has-line .hs-title::after { margin-top: 14px; }
}

/* Footer style "Four columns" */
.footer-grid.fh-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.fh-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fh-grid ul a { font-size: 16.5px; }
.fh-lbl { margin: 18px 0 4px; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; opacity: .6; }
.fh-lbl:first-of-type { margin-top: 4px; }
.fh-val { margin: 0; font-size: 16px; line-height: 1.6; }
.fh-val a { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 4px; }
.fh-follow .f-card { margin-top: 18px; max-width: 330px; }
.f-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; }
.f-links a { opacity: .75; font-size: 14.5px; } .f-links a:hover { opacity: 1; }
@media (max-width: 960px) { .footer-grid.fh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer-grid.fh-grid { grid-template-columns: 1fr; gap: 30px; } }

/* Footer: highlight card + newsletter share one tidy column */
.f-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-content: start; min-width: 0; }
.f-side .f-card > div { padding: 22px 20px; }
.f-side .f-card-title { font-size: 30px; }
.f-side .f-news .wnl-row, .f-side .f-card { max-width: 100%; box-sizing: border-box; }
.f-side .f-news .f-head { margin-bottom: 6px; }
.f-side .f-news-t { margin-bottom: 10px; }
.f-side .f-news .wnl-row { display: flex; width: 100%; background: var(--card, #fff); border-radius: 999px; }
.f-side .f-news .wnl-row input { flex: 1; min-width: 0; width: 100%; background: transparent; border: 0; }
.site-footer.ft-light .f-card-eye, .site-footer.ft-panel .f-card-eye, .site-footer.ft-light .f-card-title, .site-footer.ft-panel .f-card-title { color: var(--accent); }
.site-footer.ft-light .f-card > div, .site-footer.ft-panel .f-card > div { background: var(--card, #fff); border-color: var(--line); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
/* footer columns always fit inside the footer (first column a bit wider for the address) */
@media (min-width: 900px) {
  .footer-grid:not(.fh-grid) { grid-template-columns: minmax(0, 1.3fr) repeat(auto-fit, minmax(150px, 1fr)); }
  .footer-grid > .f-about { min-width: 0; }
}
.f-about .f-contact a, .f-about .f-contact span { overflow-wrap: anywhere; }
/* safety net: nothing may make the page wider than the phone screen (keeps the bottom bar fully visible) */
html, body { overflow-x: clip; }

/* ==========================================================================
   One look for every box on the website (all themes): rounded corners that
   follow the theme (--radius) and a soft shadow; cards lift a little on hover.
   A theme with square corners (radius 0) stays square.
   ========================================================================== */
:root { --box-r: 16px; --box-shadow: 0 1px 2px rgba(16,24,32,.05), 0 10px 30px rgba(16,24,32,.08); --box-shadow-hover: 0 2px 6px rgba(16,24,32,.06), 0 18px 44px rgba(16,24,32,.13); }
body .wcg-card, body .wsp.look-cards .wsp-step, body .wfs.sc-light, body .wfs.sc-dark, body .wdd-card, body .wdp, body .wq-box, body .wib, body .wpc, body .wpt,
body .wrs-card, body .wsc-ex, body .wsc-card, body .wtg details, body .wfb-front, body .whs-card, body .wmk-i, body .wbt-i {
  border-radius: var(--box-r); box-shadow: var(--box-shadow); border-color: color-mix(in srgb, var(--line) 75%, transparent);
}
body .wfs.sc-light, body .wfs.sc-dark, body .wdp, body .wpt, body .wib { overflow: hidden; }
body .wcg-card, body .wsp.look-cards .wsp-step, body .wmk-i, body .wbt-i, body .wib { transition: transform .2s, box-shadow .2s, border-color .2s; }
body .wcg-card:hover, body .wsp.look-cards .wsp-step:hover, body .wmk-i:hover, body .wbt-i:hover, body .wib:hover { transform: translateY(-3px); box-shadow: var(--box-shadow-hover); }
/* photo + text: the photo gets the same rounded corners */
body .wfs:not(.sc-none) .wfs-media, body .wfs:not(.sc-none) .wfs-img { border-radius: calc(var(--box-r) * .8); overflow: hidden; }
body .wfs.sc-none .wfs-img { border-radius: var(--box-r); }
/* dark sections: a deeper shadow so the boxes still stand out */
.sc-dark .wcg-card, .wsp.sc-dark .wsp-step, .wfs.sc-dark { --box-shadow: 0 10px 30px rgba(0,0,0,.35); }
@media (prefers-reduced-motion: reduce) { body .wcg-card:hover, body .wsp.look-cards .wsp-step:hover, body .wmk-i:hover, body .wbt-i:hover, body .wib:hover { transform: none; } }
/* Footer bottom bar on phones: everything centred and stacked neatly, with room under it for the round buttons */
@media (max-width: 760px) {
  .site-footer .f-legal, .site-footer.ft-panel .f-legal { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; padding-bottom: calc(26px + 70px); }
  .site-footer .f-legal > p:first-child { display: flex; flex-direction: column; align-items: center; gap: 10px; line-height: 1.5; }
  .site-footer .pv-foot { margin-left: 0; justify-content: center; gap: 8px 18px; }
  .site-footer .f-links { justify-content: center; gap: 8px 20px; }
  .site-footer .f-copy { flex-direction: column; justify-content: center; gap: 10px; }
  .site-footer .lr { display: flex; justify-content: center; }
  .site-footer .f-top { display: none; } /* the round ↑ button already does this on phones */
}
/* slideshow with your own text: on phones the photo fills the whole slideshow (no black band) */
@media (max-width: 767px) {
  .hs.is-msg { height: auto !important; min-height: min(150vw, 680px) !important; }
  .hs.is-msg .hs-media img { object-fit: cover !important; object-position: center !important; }
  .hs.is-msg .hs-shade { background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.45) 40%, rgba(0,0,0,.85) 100%) !important; }
  .hs.is-msg .hs-fixed { position: relative; inset: auto; min-height: min(150vw, 680px); padding: 90px 18px 40px !important; display: flex; align-items: flex-end !important; }
  .hs.is-msg .hs-fixed .hs-text { -webkit-line-clamp: 5 !important; }
  .hs.is-msg .hs-btns { display: flex; flex-wrap: wrap; gap: 10px; }
}

/* vehicle page: thumbnails in ONE row, scrolled left / right with arrows */
.v-strip { position: relative; margin-top: 8px; }
.v-strip .v-thumbs { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 8px; margin-top: 0; padding: 2px 0; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.v-strip .v-thumbs::-webkit-scrollbar { display: none; }
.v-strip .v-thumbs button { flex: 0 0 calc((100% - 6 * 8px) / 7); min-width: 84px; scroll-snap-align: start; }
.vs-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line, #ddd); background: var(--card, #fff); color: var(--ink, #111); font-size: 24px; line-height: 1; display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.18); padding: 0 0 3px; transition: transform .15s, background .15s; }
.vs-nav:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.vs-nav[hidden] { display: none; }
.vs-prev { left: -12px; }
.vs-next { right: -12px; }
.v-gallery.is-full .v-strip { flex: 0 0 auto; }
.v-gallery.is-full .vs-prev { left: 4px; } .v-gallery.is-full .vs-next { right: 4px; }
@media (max-width: 960px) {
  .v-strip .v-thumbs button { flex: 0 0 88px; min-width: 0; }
  .vs-nav { width: 34px; height: 34px; font-size: 22px; }
  .vs-prev { left: 4px; } .vs-next { right: 4px; }
}

/* ---------------------------------------------------------------- live auction box (vehicle page) */
.auc { border: 1px solid var(--line); border-top: 4px solid var(--accent); background: var(--card, #fff); padding: 16px 16px 12px; margin: 0 0 16px; border-radius: var(--radius); scroll-margin-top: 90px; }
.auc-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.auc-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.auc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.auc[data-phase="live"] .auc-dot { background: #c62828; box-shadow: 0 0 0 0 rgba(198, 40, 40, .5); animation: aucPulse 1.6s infinite; }
@keyframes aucPulse { 70% { box-shadow: 0 0 0 8px rgba(198, 40, 40, 0); } 100% { box-shadow: 0 0 0 0 rgba(198, 40, 40, 0); } }
.auc-time { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px; }
.auc.is-ending .auc-time { color: #c62828; }
.auc-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.auc-row small { display: block; font-size: 13px; color: var(--muted); }
.auc-amt { font-family: var(--head); font-size: 30px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.auc-meta { text-align: right; font-size: 13px; color: var(--ink-2); display: flex; flex-direction: column; gap: 3px; }
.auc-res.is-met { color: #1c7c3c; font-weight: 700; } .auc-res.is-not_met { color: #9a5b00; font-weight: 600; }
.auc-msg { margin: 12px 0 0; padding: 9px 12px; border-radius: var(--radius); font-size: 14px; font-weight: 600; }
.auc-msg.is-ok { background: #d5f0dc; color: #145c2c; } .auc-msg.is-err { background: #fdecea; color: #8e1c16; }
.auc-form { display: flex; gap: 8px; margin: 12px 0 4px; }
.auc-in { flex: 1; display: flex; align-items: center; border: 1px solid var(--line-2); border-radius: var(--radius); background: #fff; padding-left: 12px; min-width: 0; }
.auc-in:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0, 0, 0, .07); }
.auc-in span { color: var(--muted); font-weight: 700; }
.auc-in input { border: 0; outline: 0; padding: 11px 10px 11px 6px; width: 100%; min-width: 0; font-size: 17px; font-variant-numeric: tabular-nums; background: transparent; }
.auc-form .btn { white-space: nowrap; }
.auc-form .btn:disabled { opacity: .55; cursor: not-allowed; }
.auc-hint { display: block; font-size: 13px; color: var(--muted); min-height: 1.2em; }
.auc-hist { list-style: none; margin: 10px 0 0; padding: 8px 0 0; border-top: 1px dashed var(--line); font-size: 14px; max-height: 210px; overflow: auto; }
.auc-hist li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 5px 0; align-items: baseline; }
.auc-hist li time { color: var(--muted); font-size: 12px; }
.auc-hist li b { font-variant-numeric: tabular-nums; }
.auc-hist li.is-me span { color: var(--accent); font-weight: 700; }
.auc-hist li:first-child b { color: var(--accent); }
.auc-hist .auc-empty { display: block; color: var(--muted); }
.vip-note { background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--radius); font-size: 14px; line-height: 1.45; margin: 0 0 14px; }
.vip-note b { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: #f1d58a; margin-bottom: 2px; }

/* ---------------------------------------------------------------- customer account / email-code login */
.acct { display: flex; justify-content: center; padding: 48px 16px 64px; }
.acct-card { width: 100%; max-width: 460px; background: var(--card, #fff); border: 1px solid var(--line); border-top: 4px solid var(--ink); padding: 30px 28px; box-shadow: 8px 8px 0 rgba(0, 0, 0, .04); }
.acct-card h1 { margin: 0 0 8px; font-size: 30px; line-height: 1.15; }
.acct-lede { color: var(--ink-2); margin: 0 0 18px; }
.acct-note { padding: 10px 12px; border-radius: var(--radius); background: #d5f0dc; color: #145c2c; font-size: 15px; font-weight: 600; margin: 0 0 14px; }
.acct-note.is-err { background: #fdecea; color: #8e1c16; }
.acct-code { font-size: 28px !important; letter-spacing: .45em; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }
.acct-check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--ink-2); margin: 0 0 16px; }
.acct-check input { margin-top: 3px; }
.acct-btn { width: 100%; }
.acct-alt { display: flex; gap: 8px; justify-content: center; align-items: center; margin: 14px 0 0; font-size: 14px; flex-wrap: wrap; }
.linkbtn { background: none; border: 0; padding: 0; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.acct-small { font-size: 13px; color: var(--muted); margin: 18px 0 0; }
.acct-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 0; }
.acct-page { padding-top: 26px; padding-bottom: 60px; }
.acct-grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 24px; align-items: start; }
.acct-box { background: var(--card, #fff); border: 1px solid var(--line); padding: 22px; margin-bottom: 24px; }
.acct-box h2 { margin: 0 0 14px; font-size: 21px; }
.acct-out { margin-top: 14px; font-size: 14px; }
.acct-muted { color: var(--muted); margin: 0; }
.acct-list { list-style: none; margin: 0; padding: 0; }
.acct-list li { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--line); font-size: 15px; }
.acct-list li:first-child { border-top: 0; padding-top: 0; }
.acct-list a { font-weight: 700; flex: 1 1 220px; }
.acct-list span { color: var(--ink-2); }
.acct-tag { font-style: normal; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #e2eefb; color: #173f6c; }
.acct-tag.is-lead, .acct-tag.is-won { background: #d5f0dc; color: #145c2c; } .acct-tag.is-out { background: #fdecea; color: #8e1c16; } .acct-tag.is-lost { background: #eee; color: #555; }
@media (max-width: 760px) {
  .acct-grid { grid-template-columns: 1fr; }
  .acct-card { padding: 24px 18px; }
  .auc-amt { font-size: 26px; }
}

/* ---------------------------------------------------------------- auction (v2) */
.auc-lot { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: .04em; }
.auc-clock { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; background: var(--ink); color: #fff; margin: 0 -16px 14px; padding: 12px 16px; }
.auc-clock small { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; opacity: .75; width: 100%; }
.auc-clock strong { font-family: var(--head); font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.auc-endat { font-size: 13px; opacity: .8; }
.auc[data-phase="ended"] .auc-clock strong { display: none; }
.auc.is-ending .auc-clock { background: #8e1c16; }
.auc.is-ending .auc-time { color: inherit; }
.auc-facts { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px dashed var(--line); display: grid; gap: 6px; font-size: 13px; color: var(--ink-2); }
.auc-facts li { display: flex; gap: 7px; align-items: center; }
.auc-facts svg { color: var(--accent); flex: none; }
.auc-histbox { margin-top: 8px; }
.auc-histbox summary { cursor: pointer; font-size: 13px; font-weight: 700; padding: 6px 0; list-style-position: inside; }
.auc-histbox .auc-hist { margin-top: 2px; }
.tag-auction { background: #c62828; color: #fff; display: inline-flex; align-items: center; gap: 6px; }
.tag-auction i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: aucBlink 1.2s infinite; }
@keyframes aucBlink { 50% { opacity: .25; } }
.mtag-auc { background: #c62828; color: #fff; }
.auc-card { margin-top: auto; border-top: 1px dashed var(--line); padding-top: 10px; display: grid; gap: 1px; }
.auc-card small { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.auc-card strong { font-family: var(--head); font-size: 24px; line-height: 1.1; }
.auc-card-time { font-size: 13px; font-weight: 600; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.auc-card.is-live .auc-card-time { color: #c62828; }
.auc-card-time i { width: 7px; height: 7px; border-radius: 50%; background: #c62828; animation: aucBlink 1.2s infinite; }
/* "Buying with …" help cards */
.auc-help h2 { margin-bottom: 16px; }
.auc-help-list { display: grid; gap: 12px; }
.auc-help-card { display: flex; gap: 16px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; text-decoration: none; color: var(--ink); box-shadow: 0 2px 10px rgba(0, 0, 0, .04); transition: border-color .15s, transform .15s, box-shadow .15s; }
.auc-help-card:hover { border-color: var(--accent); color: var(--ink); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, .07); }
.auc-help-ic { flex: none; width: 50px; height: 50px; border-radius: 10px; background: var(--accent); color: #fff; display: grid; place-items: center; }
.auc-help-card b { display: block; font-size: 18px; margin-bottom: 2px; }
.auc-help-card small { display: block; font-size: 15px; color: var(--muted); line-height: 1.45; }
.auc-help-more { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; border-radius: 10px; border-color: var(--accent); color: var(--accent); }
.auc-help-more:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
/* comments & questions */
.auc-cmts h2 small { font-size: .6em; color: var(--muted); font-weight: 600; }
.cmt-form { display: grid; gap: 8px; margin: 0 0 18px; }
.cmt-form textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--line-2); border-radius: var(--radius); background: #fff; font: inherit; }
.cmt-form .btn { justify-self: start; }
.cmt-login { margin: 0 0 16px; }
.cmt-empty { color: var(--muted); }
.cmt-list, .cmt-replies { list-style: none; margin: 0; padding: 0; }
.cmt { border-top: 1px solid var(--line); padding: 14px 0; }
.cmt p { margin: 6px 0 0; white-space: normal; }
.cmt-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 14px; }
.cmt-head time { color: var(--muted); font-size: 13px; }
.cmt-who.is-dealer { color: var(--accent); }
.cmt-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: var(--accent); color: #fff; padding: 2px 7px; border-radius: 999px; }
.cmt-replies { margin: 10px 0 0 18px; border-left: 3px solid var(--accent); padding-left: 14px; }
.cmt-replies .cmt { border-top: 0; padding: 6px 0; }
.prose details { border: 1px solid var(--line); border-radius: 10px; padding: 0 16px; margin: 0 0 10px; background: var(--card); }
.prose details summary { cursor: pointer; font-weight: 700; padding: 14px 0; }
.prose details[open] summary { border-bottom: 1px dashed var(--line); margin-bottom: 10px; }
@media (max-width: 600px) {
  .auc-help-card { padding: 14px; gap: 12px; }
  .auc-help-ic { width: 42px; height: 42px; }
  .auc-help-card b { font-size: 16px; } .auc-help-card small { font-size: 14px; }
  .auc-clock strong { font-size: 26px; }
}

/* ---------------------------------------------------------------- auction v3: no sticky buy box, bidding history, watch */
.v-panel:has(.auc) { position: static; }
.auc-sub { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 10px 0 0; font-size: 14px; }
.auc-sub a { font-weight: 600; }
.auc-watch { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); background: #fff; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; color: var(--ink); }
.auc-watch:hover { border-color: var(--ink); }
.auc-watch[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.auc-watch[aria-pressed="true"] svg { fill: currentColor; }
.bh h2 { margin-bottom: 2px; }
.bh-count { color: var(--muted); margin: 0 0 16px; }
.bh-list { list-style: none; margin: 0; padding: 0; }
.bh-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(90px, auto) 80px; gap: 14px; align-items: center; padding: 11px 18px; border-radius: 6px; }
.bh-list li.is-alt { background: rgba(0, 0, 0, .035); }
.bh-who { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-tag { font-style: normal; font-size: 12px; font-weight: 700; color: #fff; background: var(--accent); border-radius: 5px; padding: 3px 9px; }
.bh-amt { font-weight: 500; font-variant-numeric: tabular-nums; }
.bh-list li.is-top .bh-amt { font-weight: 800; }
.bh-list li.is-me .bh-who { color: var(--accent); }
.bh-list time { font-size: 13px; font-weight: 700; text-align: right; }
.bh-empty { display: block !important; color: var(--muted); padding: 10px 0 !important; }
.bh-more { margin-top: 12px; width: 100%; display: flex; justify-content: center; align-items: center; gap: 8px; padding: 12px; border: 2px solid var(--accent); border-radius: 8px; background: none; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; }
.bh-more:hover { background: var(--accent); color: #fff; }
.bh-more.is-open svg { transform: rotate(180deg); }
@media (max-width: 600px) {
  .bh-list li { grid-template-columns: minmax(0, 1fr) auto auto; padding: 10px 10px; gap: 10px; }
  .bh-list time { display: none; }
}
/* header account */
.hdr-av { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 800; }
/* bidder dashboard */
.ad-head .wrap { padding-bottom: 0; }
.ad-hello { display: flex; gap: 16px; align-items: center; margin: 6px 0 18px; }
.ad-hello h1 { margin: 0; }
.ad-hello p { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
.ad-avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 24px; font-weight: 800; }
.ad-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin-bottom: -1px; }
.ad-tabs a { padding: 12px 16px; text-decoration: none; font-weight: 700; color: var(--ink-2); border-bottom: 3px solid transparent; white-space: nowrap; }
.ad-tabs a.on { color: var(--ink); border-color: var(--accent); }
.ad-tabs a i { font-style: normal; font-size: 12px; background: var(--accent); color: #fff; border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.ad-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; }
.ad-stats a { background: var(--card); border: 1px solid var(--line); padding: 18px; text-decoration: none; color: var(--ink); border-radius: 10px; transition: border-color .15s; }
.ad-stats a:hover { border-color: var(--accent); color: var(--ink); }
.ad-stats small { display: block; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.ad-stats b { font-family: var(--head); font-size: 34px; line-height: 1.1; }
.ad-stats b.is-good { color: var(--accent); }
.ad-boxhead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ad-boxhead a { font-weight: 700; font-size: 14px; }
.ad-list { list-style: none; margin: 0; padding: 0; }
.ad-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.ad-row:first-child { border-top: 0; }
.ad-img { width: 96px; height: 68px; border-radius: 6px; overflow: hidden; background: var(--paper); display: grid; place-items: center; color: var(--muted); }
.ad-img img { width: 100%; height: 100%; object-fit: cover; }
.ad-title { font-weight: 700; display: block; }
.ad-meta { font-size: 13px; color: var(--muted); }
.ad-nums { display: flex; gap: 18px; }
.ad-nums small { display: block; font-size: 12px; color: var(--muted); }
.ad-nums b { font-variant-numeric: tabular-nums; }
.ad-help { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ad-help a { display: flex; gap: 8px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px; font-weight: 700; text-decoration: none; }
.ad-help a svg { color: var(--accent); flex: none; }
.ad-note { margin: 14px 0 0; font-size: 14px; color: var(--ink-2); background: var(--paper); padding: 10px 12px; border-radius: 6px; }
.ad-sub { font-weight: 700; font-size: 14px; margin: 6px 0 6px; }
.ad-sec { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .ad-stats, .ad-help { grid-template-columns: 1fr 1fr; }
  .ad-row { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 10px; }
  .ad-img { width: 72px; height: 54px; }
  .ad-nums { grid-column: 2 / -1; gap: 14px; }
  .ad-row .acct-tag { grid-column: 3; grid-row: 1; }
}
.bh-more[hidden] { display: none; }

/* contact page map: inside the page width, not edge to edge */
.map { width: calc(100% - 48px); max-width: calc(var(--wrap) - 48px); margin: 8px auto 64px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 12px 30px rgba(0,0,0,.08); background: var(--card); }
.map iframe { height: 380px; }
@media (max-width: 760px) { .map { width: calc(100% - 32px); margin-bottom: 40px; border-radius: 14px; } .map iframe { height: 280px; } }

/* "Buying with …" box in the buy panel (auction listings) */
.auc-side { border: 1px solid var(--line); background: var(--card); padding: 16px; margin: 0 0 16px; border-radius: var(--radius); }
.auc-side-title { font-weight: 800; font-size: 16px; margin: 0 0 10px; }
.auc-side-list { display: grid; gap: 8px; }
.auc-side-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.auc-side-card:hover { border-color: var(--accent); color: var(--ink); box-shadow: 0 4px 14px rgba(0, 0, 0, .06); }
.auc-side-card .auc-help-ic { width: 38px; height: 38px; border-radius: 9px; }
.auc-side-card .auc-help-ic svg { width: 21px; height: 21px; }
.auc-side-card > span:nth-child(2) { flex: 1; min-width: 0; }
.auc-side-card b { display: block; font-size: 14.5px; line-height: 1.3; }
.auc-side-card small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.auc-side-card > svg { color: var(--muted); flex: none; }
.auc-side-more { margin-top: 10px; display: flex; justify-content: center; align-items: center; gap: 7px; padding: 10px; border: 1.5px solid var(--accent); border-radius: 10px; color: var(--accent); font-weight: 700; font-size: 14px; text-decoration: none; }
.auc-side-more:hover { background: var(--accent); color: #fff; }

/* bidding history inside the auction box */
.auc-bh { margin: 14px -16px 0; padding: 12px 16px; background: rgba(0, 0, 0, .025); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.auc-bh-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.auc-bh-head b { font-size: 15px; }
.auc-bh-head span { font-size: 13px; color: var(--muted); }
.auc .bh-list { max-height: 330px; overflow-y: auto; scrollbar-width: thin; }
.auc .bh-list li { grid-template-columns: minmax(0, 1fr) auto 84px; gap: 10px; padding: 8px 10px; font-size: 14px; }
.auc .bh-list li time { display: none; }
.auc .bh-list li.is-alt { background: var(--card); }
.auc .bh-amt { text-align: right; }
.auc .bh-tag { font-size: 11px; padding: 2px 7px; }
.auc .bh-empty { padding: 4px 0 !important; font-size: 14px; }
.auc .bh-more { margin-top: 8px; padding: 8px; font-size: 13.5px; border-width: 1.5px; }

/* map widget: rounded, inside the page */
.b-map { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 12px 30px rgba(0,0,0,.08); }
.b-map iframe { border-radius: 0; }
@media (max-width: 760px) { .b-map iframe { height: 280px; } }
.abar-ntf-all { display: block; padding: 10px 14px; font-size: 13px; font-weight: 700; border-top: 1px solid #eee; }

/* inventory cards: hot / viewing now / sold */
.mtag-hot { background: #fff1e6 !important; color: #b4410a !important; }
.mtag-now { background: #e9f7ee !important; color: #166534 !important; }
.mtag-sold { background: #18191b !important; color: #fff !important; }
.tag-hot { background: #fff1e6; color: #b4410a; } .tag-now { background: #e9f7ee; color: #166534; } .tag-sold { background: #18191b; color: #fff; }
.vt-hot { background: #fff1e6; color: #b4410a; }
.is-sold .mcard-img img, .is-sold .card-img img { filter: grayscale(.85) brightness(.92); }
.sold-ribbon { position: absolute; z-index: 3; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-12deg); padding: 8px 26px; border: 3px solid #fff; color: #fff; background: rgba(198, 40, 40, .92); font-family: var(--head); font-weight: 800; font-size: 26px; letter-spacing: .14em; text-transform: uppercase; border-radius: 6px; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); pointer-events: none; }
.sold-txt { color: #c62828 !important; text-transform: uppercase; letter-spacing: .06em; }
.is-sold .mcard-price s, .is-sold .card-price s { color: var(--muted); font-size: 15px; margin-left: 6px; }
.is-sold .mcard-title a, .is-sold .card-title a { color: var(--ink-2); }
.is-sold .mtag-sold, .is-sold .tag-sold { display: none; }
/* reserved: same look as sold, in amber */
.mcard.is-reserved .mcard-img img, .card.is-reserved .card-img img { filter: grayscale(.6) brightness(.95); opacity: 1; }
.sold-ribbon.is-reserved { background: rgba(214, 125, 0, .94); }
.sold-txt.is-reserved { color: #b86b00 !important; }
.is-reserved .mcard-price s, .is-reserved .card-price s { color: var(--muted); font-size: 15px; margin-left: 6px; }
.is-reserved .mtag-dark, .card.is-reserved .tag-reserved { display: none; }

/* SOLD / RESERVED: a diagonal sash right across the photo, corner to corner */
.mcard-img .sold-ribbon, .card-img .sold-ribbon {
  top: 50%; left: 50%; width: 170%; padding: 11px 0 10px; border: 0; border-radius: 0;
  transform: translate(-50%, -50%) rotate(36deg);
  text-align: center; font-family: var(--body, inherit); font-size: clamp(15px, 2.1vw, 21px); font-weight: 800; letter-spacing: .5em; text-indent: .5em;
  color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  background: linear-gradient(90deg, rgba(150, 18, 18, .9) 0%, #d32f2f 30%, #e53935 50%, #d32f2f 70%, rgba(150, 18, 18, .9) 100%);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 0 0 4px rgba(211, 47, 47, .55), 0 10px 26px rgba(0, 0, 0, .35);
}
.mcard-img .sold-ribbon.is-reserved, .card-img .sold-ribbon.is-reserved {
  background: linear-gradient(90deg, rgba(166, 92, 0, .9) 0%, #ef8f00 30%, #f59e0b 50%, #ef8f00 70%, rgba(166, 92, 0, .9) 100%);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 0 0 4px rgba(239, 143, 0, .55), 0 10px 26px rgba(0, 0, 0, .3);
}
.mcard.is-sold .mcard-img img, .card.is-sold .card-img img { filter: grayscale(.45) brightness(.9); }
.mcard.is-reserved .mcard-img img, .card.is-reserved .card-img img { filter: grayscale(.3) brightness(.95); }
.mcard.is-sold .mcard-img::after, .card.is-sold .card-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.18)); pointer-events: none; z-index: 2; }
/* sash: a little smaller */
.mcard-img .sold-ribbon, .card-img .sold-ribbon { padding: 6px 0 5px; font-size: clamp(12px, 1.5vw, 15px); letter-spacing: .42em; text-indent: .42em; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9), 0 6px 16px rgba(0, 0, 0, .28); }
.mcard-img .sold-ribbon.is-reserved, .card-img .sold-ribbon.is-reserved { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9), 0 6px 16px rgba(0, 0, 0, .25); }
/* HOT pill beside the breadcrumb on the vehicle page */
.v-topbar .crumbs { flex: 0 1 auto; min-width: 0; }
.v-hot { display: inline-flex; align-items: center; gap: 7px; margin-right: auto; padding: 4px 12px 4px 4px; border-radius: 999px; background: linear-gradient(90deg, #fff1e6, #fff7ef); border: 1px solid #fdc9a3; color: #9a3412; font-size: 13px; line-height: 1.2; box-shadow: 0 1px 2px rgba(154, 52, 18, .08); white-space: nowrap; }
.v-hot-ic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(160deg, #fb923c, #dc2626); color: #fff; box-shadow: 0 2px 6px rgba(220, 38, 38, .35); }
.v-hot-ic svg { fill: currentColor; stroke: none; animation: vhot 1.8s ease-in-out infinite; transform-origin: 50% 85%; }
.v-hot b { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; color: #c2410c; }
.v-hot small { font-size: 12.5px; color: #9a3412; opacity: .85; padding-left: 7px; border-left: 1px solid #fdc9a3; }
@keyframes vhot { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.12) rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .v-hot-ic svg { animation: none; } }
@media (max-width: 640px) { .v-hot { order: 3; } .v-hot small { white-space: normal; } }
.prose a[href^="tel:"], .prose a[href^="mailto:"] { white-space: nowrap; }

/* ---------- mega menu (dropdown with column titles + button), highlighted item, category bar ---------- */
.nav-item.is-hl > .nav-link { background: var(--accent); color: #fff !important; border-radius: var(--radius); padding-left: 14px; padding-right: 14px; }
.nav-item.is-hl > .nav-link::after { display: none !important; }
.nav-mega { min-width: calc(var(--mcols, 1) * 250px); max-width: min(92vw, 860px); padding: 18px 20px 14px; }
.nav-mega-cols { display: grid; grid-template-columns: repeat(var(--mcols, 1), minmax(0, 1fr)); gap: 6px 26px; }
.nav-mega-col { list-style: none; margin: 0; padding: 0; }
.nav-mega-h > a, .nav-mega-h > span { display: block; padding: 4px 0 8px !important; font-family: var(--heading); font-weight: 700; font-size: 15.5px; color: var(--ink); background: none !important; }
.nav-mega-col li:not(.nav-mega-h) a { padding: 7px 12px; }
.nav-mega-foot { margin-top: 12px; padding-top: 12px; border-top: 3px solid; border-image: linear-gradient(90deg, var(--accent) 0 40%, color-mix(in srgb, var(--accent) 55%, #000) 40% 70%, var(--ink) 70%) 1; display: flex; gap: 10px; flex-wrap: wrap; }
.nav-mega-foot .nav-mega-btn { font-weight: 800; color: var(--accent) !important; padding: 6px 12px; background: none !important; }
.nav-mega-foot .nav-mega-btn:hover { text-decoration: underline; }
.nav-item.has-mega:last-child .nav-mega, .nav-item.has-mega:nth-last-child(2) .nav-mega { left: auto; right: 0; }
.nav-sub-more .nav-mega { max-width: none; min-width: 0; padding: 0 0 4px 12px; }
.nav-sub-more .nav-mega-cols { grid-template-columns: 1fr; }

.subbar { background: var(--card); border-bottom: 1px solid var(--line); position: relative; z-index: 30; }
.subbar-in { display: flex; align-items: center; gap: 8px; }
.subbar-list { display: flex; flex: 1; min-width: 0; justify-content: space-between; list-style: none; margin: 0; padding: 0; overflow: hidden; }
.subbar-link { display: block; padding: 9px 12px; white-space: nowrap; text-decoration: none; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.subbar-link:hover, .subbar-link.on { color: var(--accent); }
.subbar-more { position: relative; flex: none; }
.subbar-more > button { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; cursor: pointer; padding: 9px 6px; font: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.subbar-more ul { position: absolute; right: 0; top: 100%; min-width: 200px; list-style: none; margin: 0; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-strong); display: none; }
.subbar-more.open ul { display: block; }
.subbar-more ul .subbar-link { border-radius: calc(var(--radius) - 2px); }
.subbar-more ul .subbar-link:hover { background: var(--paper); }
@media (max-width: 760px) {
  .subbar-list { overflow-x: auto; scrollbar-width: none; justify-content: flex-start; -webkit-overflow-scrolling: touch; }
  .subbar-list::-webkit-scrollbar { display: none; }
}
.dn-subhead { margin: 10px 0 2px; padding: 0 16px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dn-subbtn { font-weight: 800; color: var(--accent) !important; }
.drawer-cats { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 16px 14px; }
.dc-link { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--ink); }
.nav-mega a.on:not(:hover) { background: none; color: var(--ink); }
.hdr-lbl { display: none; }
/* hidden price — only logged-in staff see the real price */
.staff-price { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 2px 8px; border-radius: 4px; background: #fff7e6; border: 1px dashed #f0b44c; color: #8a5300 !important; font-size: 13px !important; font-weight: 700; font-family: var(--body); vertical-align: middle; white-space: nowrap; letter-spacing: 0; }
.staff-price svg { flex: none; }