/* ============================================================================
   getmycarr design system
   ----------------------------------------------------------------------------
   One stylesheet for the whole public site. Deliberately plain CSS with custom
   properties and no framework, so it is portable: this file drops into a React
   or Next.js project as a global stylesheet unchanged, and the class names on
   the markup carry across with it.

   Sections
     1  tokens
     2  reset and base
     3  header and navigation
     4  buttons
     5  sections, headings, breadcrumbs, panels
     6  form fields
     7  chips and tiles
     8  car cards
     9  listing / search layout
    10  car detail
    11  dealer pages
    12  home page
    13  features, calls to action, alerts
    14  footer
    15  city dialog
    16  breakpoints
   ========================================================================== */

/* 1 ---------------------------------------------------------------- tokens */
:root{
  --red:#e01f26; --red-dark:#b8171d; --red-soft:#fdecec;
  --ink:#14161a; --ink-2:#3d434d; --muted:#6b7280;
  --line:#e6e8ec; --bg:#ffffff; --bg-2:#f6f7f9; --bg-3:#eef1f5;
  --green:#0f7a3d; --green-soft:#e8f6ed; --blue:#0a6ec9; --blue-soft:#e6f1fc;
  --amber:#f5a623;
  --radius:14px; --radius-sm:10px; --radius-lg:22px;
  --shadow:0 1px 2px rgba(20,22,26,.06),0 8px 24px rgba(20,22,26,.06);
  --shadow-lg:0 2px 4px rgba(20,22,26,.06),0 18px 44px rgba(20,22,26,.12);
  --max:1200px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}

/* 2 -------------------------------------------------------- reset and base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.55;font-size:15px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.2;letter-spacing:-.02em;font-weight:700}
p{margin:0 0 12px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px}
.muted{color:var(--muted)}
.stars{color:var(--amber);letter-spacing:1px;font-size:14px}

/* 3 ------------------------------------------------ header and navigation */
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:14px;height:66px}
.logo img{height:30px;width:auto}
.nav{display:none;margin-left:10px;gap:4px}
.nav a{padding:8px 12px;border-radius:9px;font-weight:500;color:var(--ink-2);font-size:14.5px}
.nav a:hover,.nav a.on{background:var(--bg-2);color:var(--ink)}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.city-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font:inherit;font-size:14px;font-weight:500;cursor:pointer;color:var(--ink-2);max-width:170px}
.city-btn b{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.city-btn:hover{border-color:#cfd4dc}
.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:40px;height:40px;padding:0 9px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer}
.burger span{height:2px;background:var(--ink);border-radius:2px}
.mnav{display:none;border-top:1px solid var(--line);background:#fff;padding:10px 0 16px}
.mnav.open{display:block}
.mnav a{display:block;padding:11px 4px;font-weight:500;border-bottom:1px solid var(--bg-2)}

/* 4 --------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:10px;font-weight:600;font-size:14.5px;border:1px solid transparent;cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s,transform .05s;text-align:center}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:var(--red-dark)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:#cfd4dc;background:var(--bg-2)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000}
.btn-lg{padding:14px 26px;font-size:16px;border-radius:12px}
.btn-sm{padding:7px 13px;font-size:13.5px;border-radius:9px}
.btn-block{width:100%}

/* 5 ------------------------- sections, headings, breadcrumbs, panels */
.sec{padding:52px 0}
.sec-sm{padding:30px 0}
.sec-alt{background:var(--bg-2)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.sec-head h2{font-size:clamp(21px,3.4vw,28px);font-weight:700}
.sec-head p{margin:6px 0 0;color:var(--muted);font-size:14.5px}
.link-more{color:var(--red);font-weight:600;font-size:14.5px;white-space:nowrap}
.link-more:hover{text-decoration:underline}
.crumbs{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size:13.5px;color:var(--muted);padding:16px 0}
.crumbs a:hover{color:var(--ink)}
.crumbs span{color:#c8cdd6}
.crumbs em{font-style:normal;color:var(--ink)}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.empty{text-align:center;padding:56px 20px;color:var(--muted)}
.empty h3{font-size:19px;color:var(--ink);margin-bottom:8px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:12.5px;font-weight:600;background:var(--bg-2);color:var(--ink-2)}
.pill-cert{background:var(--green-soft);color:#0b5f30}
.pill-ev{background:var(--blue-soft);color:#075ca8}

/* 6 ----------------------------------------------------------- form fields */
.field{margin-bottom:12px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.05em}
.field select,.field input,.field textarea{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:var(--radius-sm);font:inherit;font-size:15px;background:#fff;color:var(--ink)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center}
.field select:focus,.field input:focus,.field textarea:focus{border-color:var(--red);outline:none}
.field-row{display:grid;grid-template-columns:1fr;gap:12px}
.field-row .field{margin-bottom:0}

/* 7 -------------------------------------------------------- chips and tiles */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border:1px solid var(--line);border-radius:999px;background:#fff;font-weight:500;font-size:14.5px;transition:border-color .15s,background .15s;cursor:pointer;font-family:inherit;color:var(--ink)}
.chip:hover{border-color:var(--red);background:var(--red-soft);color:var(--red-dark)}
.chip.on{border-color:var(--red);background:var(--red);color:#fff}
.chip span{color:var(--muted);font-size:12.5px;font-weight:600}
.chip:hover span{color:var(--red-dark)}
.chip.on span{color:rgba(255,255,255,.75)}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 16px;transition:border-color .15s,box-shadow .15s,transform .15s}
.tile:hover{border-color:#d4d8e0;box-shadow:var(--shadow);transform:translateY(-2px)}
.tile .t{font-weight:700;font-size:15.5px}
.tile .n{color:var(--muted);font-size:13.5px;margin-top:3px}
.kv{display:flex;flex-wrap:wrap;gap:8px}
.kv span{background:var(--bg-2);border-radius:8px;padding:6px 11px;font-size:13.5px;color:var(--ink-2)}

/* 8 ------------------------------------------------------------- car cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s,box-shadow .18s,transform .18s}
.card:hover{border-color:#d4d8e0;box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.card-img{position:relative;aspect-ratio:4/3;background:var(--bg-3);overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover}
.badge{position:absolute;top:10px;left:10px;background:rgba(20,22,26,.82);color:#fff;font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:7px;letter-spacing:.02em;backdrop-filter:blur(4px)}
.badge-cert{background:var(--green)}
.badge-ev{background:var(--blue)}
.card-body{padding:14px 15px 16px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:15.5px;font-weight:650;margin-bottom:7px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.meta{color:var(--muted);font-size:13px;margin-bottom:12px;display:flex;flex-wrap:wrap;gap:4px 9px}
.meta i{font-style:normal}
.meta i+i::before{content:"·";margin-right:9px;color:#c8cdd6}
.price{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-top:11px;border-top:1px solid var(--bg-2)}
.price b{font-size:18px;font-weight:750;letter-spacing:-.02em}
.price small{color:var(--muted);font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 9 ------------------------------------------------- listing/search layout */
.split{display:grid;grid-template-columns:1fr;gap:24px}
.filters .grp{border-bottom:1px solid var(--line);padding:16px 0}
.filters .grp:first-child{padding-top:0}
.filters .grp:last-child{border-bottom:0;padding-bottom:0}
.filters h4{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:11px}
.res-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.res-head h1{font-size:clamp(20px,3.2vw,26px)}
.res-head .n{color:var(--muted);font-size:14px;margin-top:3px}
.pager{display:flex;gap:8px;justify-content:center;padding:32px 0 0;flex-wrap:wrap}
.pager a,.pager span{min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font-weight:600;font-size:14.5px}
.pager a:hover{border-color:var(--red);color:var(--red)}
.pager .cur{background:var(--red);border-color:var(--red);color:#fff}
.pager .off{opacity:.4}

/* 10 ---------------------------------------------------------- car detail */
.dt-head{padding:6px 0 18px}
.dt-head h1{font-size:clamp(22px,3.6vw,31px);font-weight:750}
.dt-sub{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:9px;color:var(--muted);font-size:14.5px}
.dt-grid{display:grid;grid-template-columns:1fr;gap:28px;padding-bottom:64px}
.block{margin-bottom:30px}
.block h2{font-size:19px;margin-bottom:14px}
.gal{display:grid;gap:10px}
.gal-main{aspect-ratio:16/10;background:var(--bg-3);border-radius:var(--radius);overflow:hidden}
.gal-main img{width:100%;height:100%;object-fit:cover}
.gal-thumbs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.gal-thumbs img{width:88px;height:66px;object-fit:cover;border-radius:9px;border:2px solid transparent;cursor:pointer;flex:0 0 auto;background:var(--bg-3)}
.gal-thumbs img.on{border-color:var(--red)}
.spec-icons{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.si{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 13px}
.si .ic{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:var(--bg-2);display:grid;place-items:center;color:var(--ink-2)}
.si dt{font-size:11.5px;text-transform:uppercase;letter-spacing:.045em;color:var(--muted);font-weight:600}
.si dd{margin:1px 0 0;font-weight:650;font-size:14.5px}
.prose{color:var(--ink-2);font-size:15px;line-height:1.65}
.prose p:last-child{margin-bottom:0}
.featgrp{margin-bottom:16px}
.featgrp h3{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:9px}
.sticky-buy{position:sticky;top:86px}
.pricebox{border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:#fff;box-shadow:var(--shadow)}
.pricebox .p{font-size:clamp(26px,4.4vw,33px);font-weight:790;letter-spacing:-.025em;line-height:1.05}
.pricebox .sub{color:var(--muted);font-size:13.5px;margin:4px 0 16px}
.pricebox .emi{background:var(--bg-2);border-radius:var(--radius-sm);padding:11px 13px;font-size:13.5px;color:var(--ink-2);margin:14px 0}
.pricebox .emi b{font-weight:700;color:var(--ink)}
.trust{display:flex;flex-direction:column;gap:9px;margin-top:16px;font-size:13.5px;color:var(--muted)}
.trust div{display:flex;gap:8px;align-items:flex-start}
.trust svg{flex:0 0 auto;margin-top:2px;color:var(--green)}
.rev{border:1px solid var(--line);border-radius:var(--radius);padding:15px;background:#fff;margin-bottom:10px}

/* 11 -------------------------------------------------------- dealer pages */
.avatar{flex:0 0 auto;width:50px;height:50px;border-radius:13px;background:var(--red-soft);color:var(--red);display:grid;place-items:center;font-weight:750;font-size:19px}
.avatar-lg{width:76px;height:76px;border-radius:18px;font-size:29px}
.dealer-card{display:flex;gap:14px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.dealer-hero{background:linear-gradient(160deg,#191c22,#2a1417);color:#fff;padding:34px 0}
.dealer-hero h1{font-size:clamp(23px,4vw,33px);font-weight:780}
.dealer-hero .avatar{background:rgba(255,255,255,.12);color:#fff}
.dealer-hero .dh-sub{color:#c3c8d2;font-size:14.5px;margin-top:6px;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.dealer-hero .dh-stats{display:flex;flex-wrap:wrap;gap:24px;margin-top:20px;font-size:13.5px;color:#c3c8d2}
.dealer-hero .dh-stats b{display:block;color:#fff;font-size:21px;font-weight:720;letter-spacing:-.02em}
.dealer-row{display:flex;gap:16px;align-items:center;padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;transition:border-color .15s,box-shadow .18s,transform .15s}
.dealer-row:hover{border-color:#d4d8e0;box-shadow:var(--shadow);transform:translateY(-2px)}
.dealer-rows{display:grid;grid-template-columns:1fr;gap:14px}
.dealer-row .body{flex:1;min-width:0}
.dealer-row h3{font-size:16.5px;margin-bottom:3px}
.dealer-row .sub{color:var(--muted);font-size:13.5px}
.dealer-row .stock{flex:0 0 auto;text-align:right}
.dealer-row .stock b{display:block;font-size:19px;font-weight:750;letter-spacing:-.02em}
.dealer-row .stock span{color:var(--muted);font-size:12.5px}

/* 12 ----------------------------------------------------------- home page */
.hero{position:relative;background:linear-gradient(165deg,#191c22 0%,#24272f 45%,#2e1416 100%);color:#fff;padding:52px 0 0;overflow:hidden}
.hero::after{content:"";position:absolute;right:-180px;top:-140px;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(224,31,38,.34),transparent 62%)}
.hero-in{position:relative;z-index:2}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:#37d67a;display:inline-block}
.hero h1{font-size:clamp(30px,6.2vw,50px);font-weight:800;margin:18px 0 12px;letter-spacing:-.033em}
.hero h1 em{font-style:normal;color:#ff6b70}
.hero p{margin:0 0 30px;color:#c3c8d2;font-size:clamp(15px,2.3vw,17.5px);max-width:560px}
.search{background:#fff;border-radius:var(--radius-lg);padding:8px;box-shadow:var(--shadow-lg);color:var(--ink)}
.tabs{display:flex;gap:4px;padding:6px 6px 0}
.tab{flex:0 0 auto;padding:10px 18px;border-radius:10px 10px 0 0;font-weight:600;font-size:14.5px;color:var(--muted);background:none;border:0;cursor:pointer;font-family:inherit}
.tab[aria-selected="true"]{color:var(--red);background:var(--red-soft)}
.search-body{padding:16px 14px 14px}
.grid-f{display:grid;grid-template-columns:1fr;gap:10px}
.grid-f .field{margin-bottom:0}
.hero-stats{display:flex;flex-wrap:wrap;gap:26px;padding:26px 0 44px;color:#c3c8d2;font-size:14px}
.hero-stats b{display:block;color:#fff;font-size:23px;font-weight:700;letter-spacing:-.02em}

/* 13 ------------------------------------ features, calls to action, alerts */
.feats{display:grid;grid-template-columns:1fr;gap:16px}
.feat{display:flex;gap:14px;align-items:flex-start}
.feat .ic{flex:0 0 auto;width:42px;height:42px;border-radius:11px;background:var(--red-soft);color:var(--red);display:grid;place-items:center;font-size:19px;font-weight:700}
.feat h3{font-size:15.5px;margin-bottom:4px}
.feat p{margin:0;color:var(--muted);font-size:14px}
.cta{background:linear-gradient(135deg,#191c22,#2c1315);color:#fff;border-radius:var(--radius-lg);padding:34px 26px;display:grid;gap:20px}
.cta h2{font-size:clamp(21px,3.6vw,28px)}
.cta p{margin:9px 0 0;color:#c3c8d2;font-size:15px}
.cta-actions{display:flex;flex-wrap:wrap;gap:10px}
.alert{padding:12px 16px;border-radius:var(--radius-sm);margin-bottom:16px;font-size:14.5px;font-weight:500}
.alert-ok{background:var(--green-soft);color:#0b5f30;border:1px solid #bde3cc}
.alert-bad{background:var(--red-soft);color:var(--red-dark);border:1px solid #f6c9cb}

/* 14 ------------------------------------------------------------- footer */
.ft{background:#14161a;color:#9aa1ad;padding:44px 0 26px;font-size:14px}
.ft-grid{display:grid;grid-template-columns:1fr;gap:26px;margin-bottom:28px}
.ft h4{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:12px;font-weight:600}
.ft a{display:block;padding:4.5px 0}
.ft a:hover{color:#fff}
.ft-logo img{height:28px;filter:brightness(0) invert(1);opacity:.92}
.ft-word{font-size:22px;font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1}
.ft-word span{color:var(--red)}
.ft-bot{border-top:1px solid #23262d;padding-top:18px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:13px}

/* 15 -------------------------------------------------------- city dialog */
.ov{position:fixed;inset:0;background:rgba(20,22,26,.55);z-index:80;display:none;align-items:flex-end;justify-content:center}
.ov.open{display:flex}
.sheet{background:#fff;width:100%;max-width:560px;border-radius:18px 18px 0 0;max-height:82vh;display:flex;flex-direction:column}
.sheet-h{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.sheet-h h3{font-size:17px}
.x{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:19px;line-height:1;color:var(--muted)}
.sheet-b{padding:16px 20px 24px;overflow:auto}

/* 16 --------------------------------------------------------- breakpoints */
@media(min-width:700px){
  .tiles{grid-template-columns:repeat(4,1fr)}
  .feats{grid-template-columns:repeat(2,1fr);gap:26px}
  .cta{grid-template-columns:1fr auto;align-items:center;padding:40px 38px}
  .ft-grid{grid-template-columns:2fr 1fr 1fr 1fr}
  .spec-icons{grid-template-columns:repeat(3,1fr)}
  .grid-f{grid-template-columns:repeat(2,1fr)}
  .field-row{grid-template-columns:repeat(2,1fr)}
  .hero{padding-top:64px}
  .ov{align-items:center;padding:20px}
  .sheet{border-radius:18px}
  .dealer-rows{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:960px){
  .nav{display:flex}
  .burger{display:none}
  .sec{padding:66px 0}
  .feats{grid-template-columns:repeat(4,1fr)}
  .split{grid-template-columns:270px 1fr;gap:30px}
  .dt-grid{grid-template-columns:1fr 360px;gap:36px}
  .spec-icons{grid-template-columns:repeat(3,1fr)}
  .grid-f{grid-template-columns:repeat(4,1fr)}
}

/* ------------------------------------------------------------------ *
 | Dealer page                                                         |
 |                                                                     |
 | Moved here from the Blade template, where it sat in a page-local    |
 | <style> block. The Next front end loads this file and nothing else, |
 | so the whole dealer page rendered unstyled there while looking      |
 | correct in Blade. One stylesheet, both front ends.                  |
 * ------------------------------------------------------------------ */
/* ---- header band ------------------------------------------------------- */
.dp-crumbs{font-size:13px;color:var(--muted);padding:12px 0}
.dp-crumbs a{color:var(--muted)} .dp-crumbs a:hover{color:var(--red)}
.dp-crumbs span{margin:0 6px;opacity:.55}

.dp-cover{height:clamp(150px,22vw,230px);background:#1b1f27 center/cover no-repeat;position:relative;border-radius:var(--radius);overflow:hidden}
.dp-cover.is-empty{background:linear-gradient(120deg,var(--red) 0%,#8f1016 60%,#3d1013 100%)}
.dp-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.35))}
.dp-cover.is-empty::after{display:none}
.dp-photos{position:absolute;right:14px;bottom:13px;z-index:3;background:rgba(15,18,24,.74);color:#fff;
           border-radius:8px;padding:6px 12px;font-size:12.5px;font-weight:600;text-decoration:none}
.dp-photos:hover{background:rgba(15,18,24,.9);color:#fff}

.dp-id{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;padding:0 0 18px}
.dp-logo{width:104px;height:104px;border-radius:14px;object-fit:contain;background:#fff;flex:0 0 auto;
         border:1px solid var(--line);box-shadow:0 2px 12px rgba(0,0,0,.10);margin-top:-46px;position:relative;z-index:2;padding:6px}
.dp-idmain{flex:1;min-width:270px;padding-top:12px}
.dp-idmain h1{font-size:clamp(21px,3.2vw,27px);margin:0;display:inline;vertical-align:middle}
.dp-doing{font-size:13.5px;color:var(--ink-2);margin-top:6px}
.dp-doing span{opacity:.4;margin:0 5px}
.dp-line{display:flex;gap:6px 14px;flex-wrap:wrap;align-items:center;font-size:13.5px;color:var(--muted);margin-top:7px}
.dp-line .stars{color:#f6b73c;letter-spacing:1px}
.dp-line b{color:var(--ink)}
.dp-line a{color:var(--red);font-weight:600}
.dp-open{display:inline-flex;align-items:center;gap:5px;font-weight:600}
.dp-open.yes{color:#1c6b3a} .dp-open.no{color:var(--red-dark)}
.dp-open i{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}

/* actions above the figures, both to the right, as in the design */
.dp-right{flex:0 0 auto;padding-top:12px;display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.dp-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.dp-figs{display:flex;gap:26px;flex-wrap:wrap;justify-content:flex-end}
.dp-fig{text-align:center;min-width:92px}
.dp-fig .ic{width:34px;height:34px;margin:0 auto 5px;border-radius:9px;background:var(--bg-2);border:1px solid var(--line);
            display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--red)}
.dp-fig b{display:block;font-size:17px;line-height:1.2}
.dp-fig span{font-size:11.5px;color:var(--muted)}
@media (max-width:900px){
  .dp-right{width:100%;align-items:stretch;padding-top:0}
  .dp-acts{justify-content:flex-start} .dp-acts .btn{flex:1;min-width:150px}
  .dp-figs{justify-content:space-between;gap:12px}
}

/* ---- tabs -------------------------------------------------------------- */
.dp-tabs a{flex:0 0 auto;padding:13px 16px;font-size:14px;font-weight:600;color:var(--muted);
           text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap}
.dp-tabs a:hover{color:var(--ink)}
.dp-tabs a.on{color:var(--red);border-bottom-color:var(--red)}

/* ---- two columns ------------------------------------------------------- */
.dp-cols{display:grid;grid-template-columns:1fr 340px;gap:28px;padding:26px 0 60px;align-items:start}
@media (max-width:1000px){.dp-cols{grid-template-columns:1fr}}

.dp-h2{font-size:19px;margin:0 0 12px}
.dp-sec{margin-bottom:32px}
.dp-secHead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.dp-secHead .more{font-size:13.5px;font-weight:600;color:var(--red)}
.btn-write{padding:7px 14px;font-size:13.5px;line-height:1}

.dp-about{font-size:14.5px;line-height:1.7;color:var(--ink-2)}
.dp-about[data-clamped="1"]{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dp-showmore{background:none;border:0;color:var(--red);font-weight:600;font-size:13.5px;cursor:pointer;padding:6px 0 0}

/* services as a row of cards */
.dp-svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.dp-svc div{border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 12px;background:#fff;text-align:center}
.dp-svc .ic{width:34px;height:34px;margin:0 auto 8px;border-radius:9px;background:#e8f6ed;color:#1c6b3a;
            display:flex;align-items:center;justify-content:center;font-size:15px}
.dp-svc strong{display:block;font-size:13.5px}
.dp-svc span{font-size:11.5px;color:var(--muted)}

/* stock filter chips */
.dp-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.dp-chips a{border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;
            color:var(--ink-2);text-decoration:none;background:#fff}
.dp-chips a.on{background:var(--red);border-color:var(--red);color:#fff}

/* reviews */
.dp-bd{display:flex;gap:26px;align-items:center;flex-wrap:wrap;border:1px solid var(--line);
       border-radius:var(--radius-sm);padding:16px 18px;background:#fff;margin-bottom:14px}
.dp-bd .avg{text-align:center;min-width:96px}
.dp-bd .avg b{display:block;font-size:38px;line-height:1}
.dp-bd .avg .stars{color:#f6b73c}
.dp-bd .bars{flex:1;min-width:220px}
.dp-bd .bar{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted);margin:3px 0}
.dp-bd .track{flex:1;height:7px;border-radius:99px;background:var(--bg-3);overflow:hidden;display:block}
.dp-bd .fill{display:block;height:100%;background:#f6b73c;border-radius:99px}
.dp-revs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.dp-rev{border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 15px;background:#fff}
.dp-rev .top{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.dp-rev .av{width:34px;height:34px;border-radius:50%;background:var(--bg-3);display:flex;align-items:center;
            justify-content:center;font-weight:700;color:var(--muted);font-size:14px;flex:0 0 auto}
.dp-rev .stars{color:#f6b73c;font-size:13px}
.dp-rev p{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin:0}
.dp-reply{margin-top:9px;padding:9px 11px;background:var(--bg-2);border-radius:var(--radius-sm);font-size:12.5px}

/* nearby dealers */
.dp-near{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.dp-near a{display:flex;gap:11px;align-items:center;border:1px solid var(--line);border-radius:var(--radius-sm);
           padding:12px 13px;background:#fff;text-decoration:none}
.dp-near a:hover{border-color:var(--red)}
.dp-near img,.dp-near .ph{width:44px;height:44px;border-radius:9px;object-fit:contain;flex:0 0 auto;background:var(--bg-3);
                          display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--muted)}
.dp-near b{display:block;font-size:13.5px;color:var(--ink);line-height:1.3}
.dp-near small{color:var(--muted);font-size:12px;display:block}
.dp-near .st{color:#f6b73c}

/* ---- sidebar ----------------------------------------------------------- */
.dp-card{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:17px 18px;margin-bottom:16px}
.dp-card h3{font-size:16px;margin:0 0 13px}
.dp-card .lead{font-size:12px;color:var(--muted);margin:10px 0 0;line-height:1.5}
.dp-masked{font-size:20px;font-weight:700;letter-spacing:.5px;margin-bottom:10px}
.dp-masked .dots{color:var(--muted);letter-spacing:2px}
.dp-num{font-size:21px;font-weight:700;margin-bottom:10px;word-break:break-all}
/* An illustration of a map, drawn in CSS: blocks, a couple of roads and a pin.
   Faded, because it is not this dealer's actual street and should not pretend
   to be. A live embed needs a paid key and a third party on every page. */
.dp-map{position:relative;height:168px;border-radius:var(--radius-sm);border:1px solid var(--line);
        margin-bottom:12px;overflow:hidden;background:#e9eee7}
.dp-map .grid{position:absolute;inset:0;
  background-image:
    linear-gradient(0deg,rgba(255,255,255,.9) 3px,transparent 3px),
    linear-gradient(90deg,rgba(255,255,255,.9) 3px,transparent 3px),
    linear-gradient(0deg,rgba(255,255,255,.55) 2px,transparent 2px),
    linear-gradient(90deg,rgba(255,255,255,.55) 2px,transparent 2px);
  background-size:96px 96px,96px 96px,34px 34px,34px 34px;
  background-position:-14px -22px,-30px -8px,0 0,0 0}
.dp-map .road{position:absolute;background:#fff;opacity:.95}
.dp-map .road.a{left:-10%;right:-10%;top:58%;height:11px;transform:rotate(-7deg)}
.dp-map .road.b{top:-10%;bottom:-10%;left:33%;width:9px;transform:rotate(5deg)}
.dp-map .park{position:absolute;background:#d6e6cf;border-radius:8px}
.dp-map .park.p1{left:8%;top:12%;width:26%;height:30%}
.dp-map .park.p2{right:10%;bottom:12%;width:30%;height:26%}
.dp-map .fade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.62))}
.dp-map .pin{position:absolute;left:50%;top:44%;transform:translate(-50%,-100%);font-size:30px;
             filter:drop-shadow(0 3px 5px rgba(0,0,0,.28));z-index:2}
/* Sized here rather than relying on a btn-sm the stylesheet does not define,
   which left it full width and covering the illustration it sits on. */
.dp-map .cta{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:3;
             white-space:nowrap;display:inline-flex;align-items:center;gap:6px;
             width:auto;padding:8px 16px;font-size:13px;font-weight:600;line-height:1;
             border-radius:999px;background:var(--red);color:#fff;border:0;text-decoration:none;
             box-shadow:0 3px 10px rgba(0,0,0,.28)}
.dp-map .cta:hover{background:var(--red-dark);color:#fff}
.dp-map .note{position:absolute;right:8px;bottom:6px;font-size:10px;color:#7c8598;z-index:2}

/* sticky section tabs */
/* The bar is the sticky thing, not the nav: sticky only holds within its own
   parent, and the nav used to live in the header block, so it left the screen
   as soon as that block did. Offset by the site header, which is sticky too. */
.dp-tabbar{position:sticky;top:67px;z-index:40;background:rgba(255,255,255,.96);
           backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line);margin-bottom:0}
.dp-tabs{display:flex;gap:0;overflow-x:auto}
@media (max-width:700px){.dp-tabbar{top:61px}}

/* a proper tick rather than a character that renders differently everywhere */
.dp-tick{display:inline-flex;align-items:center;gap:5px;vertical-align:middle;margin-left:8px;
         background:#e7f0fd;color:#1a5fb4;border:1px solid #c3d9f7;border-radius:6px;
         padding:3px 9px 3px 7px;font-size:12px;font-weight:700}
.dp-tick svg{width:14px;height:14px;flex:0 0 auto}
.dp-hours{width:100%;font-size:13.5px;border-collapse:collapse}
.dp-hours td{padding:6px 0;border-bottom:1px solid var(--line)}
.dp-hours tr:last-child td{border-bottom:0}
.dp-hours td:last-child{text-align:right;color:var(--muted)}
.dp-hours tr.today td{font-weight:700;color:var(--ink)}
.dp-hours tr.shut td:last-child{color:var(--red-dark)}

.dp-ok{background:#e8f6ed;color:#1c6b3a;border:1px solid #bfe3cd;border-radius:var(--radius-sm);padding:11px 13px;margin-bottom:12px;font-size:13.5px;line-height:1.5}
.dp-err{background:var(--red-soft);color:var(--red-dark);border:1px solid #f6c9cb;border-radius:var(--radius-sm);padding:11px 13px;margin-bottom:12px;font-size:13.5px}
.dp-err ul{margin:4px 0 0;padding-left:17px}

/* gallery */
.dp-gal{display:flex;gap:9px;overflow-x:auto;padding:0 0 4px;scroll-snap-type:x mandatory}
.dp-gal a,.dp-gal span{flex:0 0 auto;scroll-snap-align:start;display:block;border-radius:var(--radius-sm);overflow:hidden;background:var(--line);line-height:0}
.dp-gal img{width:168px;height:112px;object-fit:cover;display:block}

/* popups */
.dp-modal{border:0;border-radius:var(--radius);padding:0;width:min(460px,92vw);box-shadow:0 18px 50px rgba(0,0,0,.25)}
.dp-modal::backdrop{background:rgba(12,15,20,.55)}
.dp-modal .head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:18px 20px 0}
.dp-modal .head h3{font-size:18px;margin:0}
.dp-modal .head p{font-size:13px;color:var(--muted);margin:4px 0 0}
.dp-modal .x{border:0;background:none;font-size:26px;line-height:1;cursor:pointer;color:var(--muted)}
.dp-modal .body{padding:16px 20px 20px}

.dp-writebox{margin-top:16px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;background:#fff}
.dp-writebox summary{cursor:pointer;font-weight:600;font-size:14.5px}
.dp-stars{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}
.dp-stars input{position:absolute;opacity:0;width:0;height:0}
.dp-stars label{font-size:30px;line-height:1;color:var(--line);cursor:pointer;transition:color .12s}
.dp-stars input:checked ~ label,.dp-stars label:hover,.dp-stars label:hover ~ label{color:#f6b73c}

/* 17 ------------------------------------------------------- dealer panel */
/* The panel is the same design system as the public site, not a second one:
   same tokens, same buttons, same fields. Only the shell differs — a fixed
   sidebar and a working area — so everything below is layout and tables. */

.pnl{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh;background:var(--bg-2)}

.pnl-side{background:var(--bg);border-right:1px solid var(--line);padding:18px 0;position:sticky;top:0;height:100vh;overflow-y:auto}
.pnl-brand{display:flex;align-items:center;gap:9px;padding:0 18px 16px;font-weight:800;font-size:18px;color:var(--ink);text-decoration:none}
.pnl-brand span{color:var(--red)}
.pnl-who{padding:0 18px 14px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.pnl-who b{display:block;font-size:14px;line-height:1.3}
.pnl-who small{color:var(--muted);font-size:12px}
.pnl-nav{display:flex;flex-direction:column;padding:10px 10px 0}
.pnl-nav a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;border-radius:var(--radius-sm);color:var(--ink-2);text-decoration:none;font-size:14px;font-weight:500}
.pnl-nav a:hover{background:var(--bg-2);color:var(--ink)}
.pnl-nav a.on{background:var(--red-soft);color:var(--red-dark);font-weight:700}
.pnl-nav .sep{margin:12px 12px 6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.pnl-nav em{font-style:normal;background:var(--red);color:#fff;border-radius:999px;font-size:11px;font-weight:700;padding:1px 7px;line-height:1.5}

.pnl-main{padding:26px 28px 60px;min-width:0}
.pnl-head{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;justify-content:space-between;margin-bottom:20px}
.pnl-head h1{margin:0 0 3px;font-size:22px;line-height:1.25}
.pnl-head p{margin:0;color:var(--muted);font-size:14px;max-width:62ch}

.pnl-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px;margin-bottom:24px}
.pnl-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px}
.pnl-card b{display:block;font-size:26px;line-height:1.1;letter-spacing:-.02em}
.pnl-card span{display:block;color:var(--muted);font-size:13px;margin-top:3px}
.pnl-card a{font-size:13px;font-weight:600;color:var(--red);text-decoration:none}

.pnl-box{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:20px}
.pnl-box>h2{margin:0;padding:14px 18px;border-bottom:1px solid var(--line);font-size:15px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.pnl-box>h2 a{font-size:13px;font-weight:600;color:var(--red);text-decoration:none}
.pnl-box-body{padding:18px}

.pnl-table{width:100%;border-collapse:collapse;font-size:14px}
.pnl-table th{text-align:left;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:10px 18px;border-bottom:1px solid var(--line);white-space:nowrap}
.pnl-table td{padding:13px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.pnl-table tr:last-child td{border-bottom:0}
.pnl-table .num{text-align:right;font-variant-numeric:tabular-nums}
.pnl-scroll{overflow-x:auto}

.pnl-tag{display:inline-block;font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--bg-3);color:var(--ink-2)}
.pnl-tag.ok{background:var(--green-soft);color:var(--green)}
.pnl-tag.wait{background:#fdf3e0;color:#8a5a00}
.pnl-tag.off{background:var(--bg-3);color:var(--muted)}

.pnl-empty{padding:34px 18px;text-align:center;color:var(--muted)}
.pnl-empty b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}

.pnl-progress{height:7px;border-radius:999px;background:var(--bg-3);overflow:hidden;margin:9px 0}
.pnl-progress i{display:block;height:100%;background:var(--green);border-radius:999px}

.pnl-days{display:grid;gap:10px}
.pnl-day{border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px}
.pnl-day-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:700}
.pnl-slots{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.pnl-slot{font-size:13px;padding:5px 11px;border:1px solid var(--line);border-radius:999px;background:var(--bg);cursor:pointer;user-select:none}
.pnl-slot.on{background:var(--red-soft);border-color:var(--red);color:var(--red-dark);font-weight:600}

.pnl-note{background:var(--blue-soft);border:1px solid #c9e0f7;color:#0b4d8c;border-radius:var(--radius-sm);padding:11px 14px;font-size:14px;margin-bottom:18px}
.pnl-warn{background:#fdf3e0;border:1px solid #f2dcb0;color:#7a4f00;border-radius:var(--radius-sm);padding:11px 14px;font-size:14px;margin-bottom:18px}
.pnl-ok{background:var(--green-soft);border:1px solid #bfe3cd;color:var(--green);border-radius:var(--radius-sm);padding:11px 14px;font-size:14px;margin-bottom:18px}
.pnl-err{background:var(--red-soft);border:1px solid #f3c6c8;color:var(--red-dark);border-radius:var(--radius-sm);padding:11px 14px;font-size:14px;margin-bottom:18px}

.pnl-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}

@media (max-width:900px){
  .pnl{grid-template-columns:1fr}
  .pnl-side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line)}
  .pnl-nav{flex-direction:row;flex-wrap:wrap}
  .pnl-nav .sep{display:none}
  .pnl-main{padding:20px 16px 50px}
}