/* Easy Deal Cars — original stylesheet */

:root {
  /* Palette taken from the supplied EASY DEAL CARS logo: black, white, tyre red. */
  --dark: #0a0a0a;
  --dark-2: #1a1a1a;
  --accent: #e11b22;
  --accent-dark: #b31419;
  --accent-ink: #ffffff;      /* text that sits on the red accent */
  --ink: #14161a;
  --muted: #6b7280;
  --line: #e4e4e7;
  --bg: #f4f4f5;
  --card: #ffffff;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(10, 10, 10, .06), 0 8px 24px rgba(10, 10, 10, .08);
  --shadow-lg: 0 18px 40px rgba(10, 10, 10, .16);
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --display: "Oswald", "Inter", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--display); line-height: 1.15; margin: 0 0 .5em; letter-spacing: .01em; text-transform: uppercase; }
h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 600; }
p { margin: 0 0 1rem; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.section { padding: 64px 0; }
.section-head { margin-bottom: 32px; }
.section-head p { color: var(--muted); max-width: 60ch; margin: 0; }
.eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-dark); margin-bottom: .5rem;
}
.muted { color: var(--muted); }
.center { text-align: center; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .72rem 1.4rem; border-radius: 999px; font-weight: 600; font-size: .95rem;
  border: 1.5px solid transparent; cursor: pointer; transition: .16s ease;
  font-family: var(--sans);
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-dark); transform: translateY(-1px); }
.btn-dark { background: var(--dark); color: #fff; }
.btn-dark:hover { background: var(--dark-2); }
.btn-ghost { border-color: rgba(255,255,255,.55); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.14); }
.btn-outline { border-color: var(--line); background: #fff; color: var(--ink); }
.btn-outline:hover { border-color: var(--dark); }
.btn-block { width: 100%; }
.btn-sm { padding: .45rem .9rem; font-size: .85rem; }
.btn-danger { background: #fee2e2; color: #991b1b; }
.btn-danger:hover { background: #fecaca; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--dark); color: #fff;
  box-shadow: 0 2px 14px rgba(10, 10, 10, .28);
}
.header-inner { display: flex; align-items: center; gap: 20px; height: 84px; }
.logo { color: #fff; flex: 0 0 auto; }
.logo img { height: 46px; width: auto; }
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; flex-wrap: wrap; }
.nav a {
  padding: .5rem .7rem; border-radius: 8px; font-size: .88rem; font-weight: 500;
  color: rgba(255,255,255,.82); transition: .15s;
}
.nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav a.active { color: #fff; }
.nav a.active::after {
  content: ""; display: block; height: 2px; background: var(--accent);
  border-radius: 2px; margin-top: 3px;
}
.nav .btn { margin-left: .5rem; }
.nav-toggle {
  display: none; margin-left: auto; background: none; border: 0; color: #fff;
  font-size: 1.6rem; cursor: pointer; line-height: 1;
}

/* ---------- flash ---------- */
.flash { padding: .9rem 1.1rem; border-radius: 10px; margin: 18px 0; font-weight: 500; }
.flash-success { background: #dcfce7; color: #14532d; border: 1px solid #86efac; }
.flash-error { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* ---------- hero ---------- */
.hero {
  position: relative; color: #fff; text-align: center;
  padding: clamp(80px, 12vw, 150px) 0;
  background:
    linear-gradient(180deg, rgba(10,10,10,.86), rgba(10,10,10,.7)),
    url("/uploads/seed/ford-mustang-01.jpg") center/cover no-repeat, var(--dark);
}
.hero h1 { margin-bottom: .35rem; text-shadow: 0 2px 20px rgba(0,0,0,.35); }
.hero .sub { font-size: clamp(1.05rem, 2vw, 1.35rem); color: rgba(255,255,255,.9); margin-bottom: 2rem; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: -46px; position: relative; z-index: 5; }
.tile {
  background: var(--card); border-radius: var(--radius); padding: 26px;
  box-shadow: var(--shadow); transition: .18s; border: 1px solid var(--line);
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.tile .ico { font-size: 1.7rem; margin-bottom: .4rem; }
.tile h3 { margin-bottom: .25rem; }
.tile p { color: var(--muted); font-size: .92rem; margin: 0; }

/* ---------- generic grids ---------- */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }

/* Grid and flex children default to min-width:auto, so a wide child (a table,
   a map iframe, a long unbroken string) refuses to shrink and pushes the whole
   column past the viewport. This is the single most common cause of sideways
   scroll on a phone; min-width:0 lets them shrink properly. */
.split > *, .search-layout > *, .listing-layout > *,
.grid > *, .card-grid > *, .footer-grid > *, .tiles > * { min-width: 0; }

.panel {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow);
}

.checklist { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.checklist li { padding-left: 1.9rem; position: relative; margin-bottom: .6rem; }
.checklist li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font-size: .8rem; font-weight: 700;
  display: grid; place-items: center;
}

/* ---------- vehicle card ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.vcard {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); transition: .18s; position: relative;
  display: flex; flex-direction: column;
}
.vcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.vcard-media { position: relative; aspect-ratio: 4 / 3; background: #e4e4e7; }
.vcard-media img { width: 100%; height: 100%; object-fit: cover; }
.img-count {
  position: absolute; right: 10px; bottom: 10px; background: rgba(10,10,10,.85);
  color: #fff; font-size: .75rem; font-weight: 600; padding: .2rem .55rem; border-radius: 6px;
}
.ribbon {
  position: absolute; left: 10px; top: 10px; padding: .25rem .6rem; border-radius: 6px;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  background: var(--dark); color: #fff;
}
.ribbon.giveaway { background: var(--accent); color: var(--accent-ink); }
.vcard-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.vcard-title { font-size: 1rem; font-weight: 600; margin: 0 0 .3rem; line-height: 1.35; }
.vcard-price { font-family: var(--display); font-size: 1.3rem; font-weight: 700; margin-bottom: .5rem; }
.vcard-meta { color: var(--muted); font-size: .84rem; display: flex; gap: .5rem; flex-wrap: wrap; margin-top: auto; }
.vcard-meta span + span::before { content: "· "; }
.vcard-foot {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; font-size: .82rem;
}
.compare-label { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); cursor: pointer; }

/* ---------- search layout ---------- */
/* Vertical padding only — these layouts also carry .wrap, whose horizontal
   gutter must survive. */
.search-layout { display: grid; grid-template-columns: 288px 1fr; gap: 28px; align-items: start; padding-top: 32px; padding-bottom: 64px; }
.sidebar { position: sticky; top: 92px; }
.filters {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.filters-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--line); font-weight: 700; font-family: var(--display);
}
.filters-body { max-height: calc(100vh - 220px); overflow-y: auto; padding: 4px 18px 18px; }
.fgroup { border-bottom: 1px solid var(--line); padding: 14px 0; }
.fgroup:last-child { border-bottom: 0; }
.fgroup > label, .fgroup-title {
  display: block; font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); margin-bottom: .5rem;
}
.checks { display: flex; flex-direction: column; gap: .35rem; max-height: 190px; overflow-y: auto; }
.checks label { display: flex; align-items: center; gap: .5rem; font-size: .9rem; cursor: pointer; }
.checks input { accent-color: var(--accent); }
.range-row { display: flex; gap: 8px; }
.filters-foot { display: flex; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--line); background: #fafbfc; }
.more-toggle { background: none; border: 0; color: var(--accent-dark); font-weight: 600; cursor: pointer; padding: 0; font-size: .88rem; }
.hidden { display: none !important; }

.results-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.results-head h1 { font-size: 1.6rem; margin: 0; }
.empty { padding: 60px 20px; text-align: center; color: var(--muted); }

/* swatches */
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { cursor: pointer; }
.swatch input { position: absolute; opacity: 0; }
.swatch span {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--line); font-size: 0; transition: .15s;
}
.swatch input:checked + span { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245,166,35,.28); }

/* forms */
input, select, textarea {
  width: 100%; padding: .62rem .8rem; border: 1px solid var(--line); border-radius: 9px;
  font: inherit; font-size: .92rem; background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(245,166,35,.5); outline-offset: 1px; border-color: var(--accent); }
textarea { min-height: 130px; resize: vertical; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 18px; }
fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 18px; margin: 0 0 22px; }
legend { font-family: var(--display); font-weight: 600; padding: 0 .5rem; }

/* ---------- listing detail ---------- */
.listing-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 32px; align-items: start; padding-top: 28px; padding-bottom: 64px; }
.gallery-main { border-radius: var(--radius); overflow: hidden; background: #e4e4e7; aspect-ratio: 4 / 3; box-shadow: var(--shadow); }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 10px; }
.thumbs img {
  aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; cursor: pointer;
  border: 2px solid transparent; transition: .15s;
}
.thumbs img:hover, .thumbs img.active { border-color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 1rem 0 1.5rem; }
.chip {
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: .35rem .85rem; font-size: .85rem; font-weight: 500;
}
.chip strong { font-weight: 700; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.5rem; }
.tag { background: #f1f1f3; border-radius: 7px; padding: .3rem .7rem; font-size: .85rem; }
.spec-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.spec-table td { padding: .6rem .2rem; border-bottom: 1px solid var(--line); }
.spec-table td:first-child { color: var(--muted); width: 45%; }
.spec-table td:last-child { font-weight: 600; }
.price-big { font-family: var(--display); font-size: 2.2rem; font-weight: 700; color: var(--dark); }
.sticky-side { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 18px; }

/* ---------- steps ---------- */
.steps { counter-reset: step; display: grid; gap: 18px; }
.step { display: grid; grid-template-columns: 62px 1fr; gap: 20px; align-items: start; }
.step-num {
  counter-increment: step; width: 56px; height: 56px; border-radius: 50%;
  background: var(--dark); color: var(--accent); display: grid; place-items: center;
  font-family: var(--display); font-size: 1.4rem; font-weight: 700;
}
.step-num::before { content: counter(step); }

/* ---------- testimonials ---------- */
.tcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.tcard .stars { color: var(--accent); letter-spacing: .1em; margin-bottom: .6rem; }
.tcard p { font-size: .93rem; }
.tcard .who { display: flex; align-items: center; gap: 12px; margin-top: 1rem; }
.avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: #e4e4e7; }
.who strong { display: block; font-size: .92rem; }
.who small { color: var(--muted); }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.stat .n { font-family: var(--display); font-size: 2.1rem; font-weight: 700; color: var(--dark); }
.stat .l { color: var(--muted); font-size: .88rem; }

/* ---------- accordion ---------- */
.acc { background: var(--card); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.acc summary {
  padding: 18px 22px; font-weight: 600; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem; font-family: var(--display);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; color: var(--accent-dark); font-size: 1.4rem; line-height: 1; }
.acc[open] summary::after { content: "−"; }
.acc .acc-body { padding: 0 22px 20px; color: var(--muted); }

/* ---------- tabs ---------- */
.tabs { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.tabs button {
  flex: 1; padding: .9rem; background: none; border: 0; border-bottom: 3px solid transparent;
  font: inherit; font-weight: 600; color: var(--muted); cursor: pointer;
}
.tabs button.active { color: var(--ink); border-bottom-color: var(--accent); }

/* ---------- dark band ---------- */
.band { background: var(--dark); color: #fff; }
.band h2, .band h3 { color: #fff; }
.band p, .band li { color: rgba(255,255,255,.78); }
.band .panel { background: var(--dark-2); border-color: rgba(255,255,255,.1); }

/* ---------- compare tray ---------- */
.compare-tray {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--dark); color: #fff; padding: 14px 0;
  box-shadow: 0 -8px 30px rgba(10,10,10,.4); transform: translateY(110%); transition: .25s;
}
.compare-tray.show { transform: none; }
.compare-tray .wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.compare-items { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; }
.compare-pill { background: rgba(255,255,255,.1); border-radius: 8px; padding: .35rem .7rem; font-size: .84rem; }

/* ---------- footer ---------- */
.site-footer { background: var(--dark); color: rgba(255,255,255,.72); padding: 56px 0 24px; margin-top: auto; }
.site-footer h4 { color: #fff; font-size: .95rem; margin-bottom: 1rem; }
.site-footer .footer-logo { height: 54px; width: auto; margin-bottom: 14px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 32px; }
.site-footer a { color: rgba(255,255,255,.72); }
.site-footer a:hover { color: var(--accent); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .5rem; font-size: .92rem; }
.socials { display: flex; gap: 10px; margin-top: 1rem; }
.socials a {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.1);
  display: grid; place-items: center; font-size: .8rem; font-weight: 700; color: #fff;
}
.socials a:hover { background: var(--accent); color: var(--accent-ink); }
.copyright {
  border-top: 1px solid rgba(255,255,255,.12); margin-top: 36px; padding-top: 20px;
  font-size: .85rem; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.copyright-end { display: inline-flex; align-items: center; gap: 12px; }

/* Discreet staff entry point — reads as a footer decoration, not a nav link.
   Scoped under .site-footer so it outranks the generic `.site-footer a` colour. */
.site-footer .admin-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  color: rgba(255,255,255,.2); transition: .18s;
}
.site-footer .admin-dot:hover { color: rgba(255,255,255,.6); background: rgba(255,255,255,.07); }
.site-footer .admin-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; color: #fff; }

.notice {
  background: #fff7e6; border: 1px solid #f6d78d; border-left: 4px solid var(--accent);
  border-radius: 10px; padding: 14px 18px; margin-bottom: 28px;
}

.page-head { background: var(--dark); color: #fff; padding: 52px 0; }
.page-head h1 { margin: 0; }
.page-head p { color: rgba(255,255,255,.75); margin: .4rem 0 0; }

.prose { max-width: 76ch; }
.prose h2 { margin-top: 2rem; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .search-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .filters-body { max-height: none; }

  /* Once the sidebar stacks above the results, an open filter panel is over
     1600px of controls standing between the visitor and the first car. So it
     collapses to its header, which becomes the button that opens it. */
  .filters-body, .filters-foot { display: none; }
  .filters.open .filters-body { display: block; }
  .filters.open .filters-foot { display: flex; }
  .filters-head {
    cursor: pointer; user-select: none; gap: 10px;
    min-height: 48px; border-bottom: 0;
  }
  .filters.open .filters-head { border-bottom: 1px solid var(--line); }
  .filters-head::after {
    content: "▾"; color: var(--muted); font-size: 1rem; line-height: 1;
    transition: transform .18s ease;
  }
  .filters.open .filters-head::after { transform: rotate(180deg); }
  .filters-head .fcount { margin-left: auto; }
  .listing-layout { grid-template-columns: 1fr; }
  .sticky-side { position: static; }
  .grid-4, .stats { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .nav {
    /* 100% = the full height of the sticky header, so the panel always meets
       its bottom edge. The old fixed 72px was 12px short of the 84px header
       and the menu opened on top of the logo. */
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--dark); flex-direction: column; align-items: stretch;
    padding: 12px 20px 20px; gap: 4px; box-shadow: var(--shadow-lg);
    /* A ten-item menu is taller than a small phone screen, so it scrolls
       inside itself rather than running off the bottom with items unreachable. */
    max-height: calc(100vh - 84px); overflow-y: auto;
  }
  .nav.open { display: flex; }
  .nav a { padding: .7rem .7rem; }        /* comfortable tap targets */
  .nav .btn { margin: .5rem 0 0; }
  .tiles, .grid-3, .grid-2, .footer-grid { grid-template-columns: 1fr; }
  .tiles { margin-top: 24px; }
  .card-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .thumbs { grid-template-columns: repeat(4, 1fr); }
  .section { padding: 44px 0; }
}

@media (max-width: 520px) {
  .grid-4, .stats { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; }
}

/* ---------- honeypot ---------- */
/* Off-screen rather than display:none — some bots skip hidden inputs. */
.hp {
  position: absolute !important; left: -9999px !important; top: auto !important;
  width: 1px !important; height: 1px !important; overflow: hidden !important;
}

/* ---------- SOLD state ---------- */
.ribbon.sold { background: #6b7280; color: #fff; }
.vcard.is-sold .vcard-media img { filter: grayscale(.85) brightness(.9); }
.sold-banner {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #6b7280; color: #fff; font-family: var(--display);
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .4rem 1rem; border-radius: 8px; margin-bottom: 1rem;
}

/* ---------- header contact strip ---------- */
.header-contact { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.header-contact a {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .86rem; font-weight: 600; color: #fff; white-space: nowrap;
}
.header-contact .wa {
  background: var(--accent); border-radius: 999px; padding: .4rem .9rem;
}
.header-contact .wa:hover { background: var(--accent-dark); }
@media (max-width: 1100px) { .header-contact .tel span { display: none; } }
@media (max-width: 820px)  { .header-contact { display: none; } }

/* ---------- sticky mobile enquire bar ---------- */
.enquire-bar { display: none; }
@media (max-width: 820px) {
  .enquire-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(10,10,10,.96); box-shadow: 0 -6px 22px rgba(10,10,10,.35);
  }
  .enquire-bar .btn { flex: 1; }
  body.has-enquire-bar { padding-bottom: 74px; }
}

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: rgba(10,10,10,.94); place-items: center;
}
.lightbox.open { display: grid; }
.lightbox img {
  max-width: 94vw; max-height: 86vh; object-fit: contain;
  border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute; background: rgba(255,255,255,.12); color: #fff;
  border: 0; border-radius: 50%; width: 46px; height: 46px;
  font-size: 1.4rem; cursor: pointer; display: grid; place-items: center;
}
.lightbox-close { top: 18px; right: 18px; }
.lightbox-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 18px; top: 50%; transform: translateY(-50%); }
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,.26); }
.lightbox-count {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.75); font-size: .85rem;
}
.gallery-main { cursor: zoom-in; }

/* ---------- privacy note ---------- */
.privacy-note {
  border-left: 3px solid var(--accent); background: #fff; padding: .8rem 1rem;
  border-radius: 8px; font-size: .86rem; color: var(--muted); margin-top: 1rem;
}

/* ---------- down payment badge ---------- */
/* Sits immediately under the price on both the card and the listing page, so
   the deposit is read as part of the price rather than as another spec row. */
.dp-badge {
  display: inline-block; align-self: flex-start; margin: -.25rem 0 .55rem;
  padding: .2rem .58rem; border-radius: 999px;
  font-size: .76rem; font-weight: 700; letter-spacing: .01em; line-height: 1.5;
  border: 1px solid transparent; white-space: nowrap;
}
.dp-badge.dp-none   { background: #e8f7ee; color: #10693a; border-color: #b7e3c9; }
.dp-badge.dp-amount { background: #fdecec; color: var(--accent-dark); border-color: #f4c2c4; }
.dp-badge.dp-big    { margin: .45rem 0 0; font-size: .92rem; padding: .32rem .8rem; }

.order-cta { margin-top: 1.1rem; }

/* ---------- featured pin ---------- */
/* Top-RIGHT: the status ribbon already owns the top-left corner and .img-count
   the bottom-right, so this is the one free corner. */
.ribbon.featured {
  left: auto; right: 10px;
  background: #fff; color: var(--dark); border: 1px solid rgba(10, 10, 10, .12);
  box-shadow: 0 1px 4px rgba(10, 10, 10, .18);
}

/* ---------- order form ---------- */
.order-form { max-width: 880px; }
.order-sec {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem 1.5rem; margin-bottom: 1.2rem; box-shadow: var(--shadow);
}
.order-sec > h2 {
  display: flex; align-items: center; gap: .6rem; margin: 0 0 .3rem; font-size: 1.15rem;
}
.order-sec > h2 .num {
  display: grid; place-items: center; width: 1.7rem; height: 1.7rem; flex: none;
  background: var(--dark); color: #fff; border-radius: 50%;
  font-size: .85rem; font-family: var(--sans); font-weight: 700;
}
.order-sec > p.hint { color: var(--muted); font-size: .88rem; margin: 0 0 1.1rem; }
.order-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 1.1rem; }
.order-grid .full { grid-column: 1 / -1; }
.order-field { margin-bottom: 1rem; }
.order-field > label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .3rem; }
.order-field .req { color: var(--accent); }
.order-field small { display: block; color: var(--muted); font-size: .8rem; margin-top: .28rem; }
.order-field input[type="text"], .order-field input[type="email"], .order-field input[type="tel"],
.order-field input[type="date"], .order-field input[type="number"], .order-field textarea {
  width: 100%; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 9px;
  font: inherit; font-size: .93rem; background: #fff;
}
.order-field textarea { min-height: 74px; resize: vertical; }

/* Tick-style choices: the whole tile is the label, so it is one tap on a phone. */
.pick { display: flex; flex-wrap: wrap; gap: .5rem; }
.pick label {
  display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: .42rem .85rem; font-size: .88rem; font-weight: 500;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.pick label:hover { border-color: #bfc3c9; }
.pick input { accent-color: var(--accent); margin: 0; }
.pick input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pick label:has(input:checked) {
  border-color: var(--accent); background: #fff5f5; box-shadow: 0 0 0 2px rgba(225, 27, 34, .12);
}
.pick.pay label { padding-left: .7rem; }
.pick.pay .pm { font-weight: 600; }

/* On a phone the pills are the main way this long form gets filled in, so give
   them a 44px tap target — below that they are genuinely fiddly to hit. */
@media (max-width: 820px) {
  .pick { gap: .6rem; }
  .pick label { padding: .62rem 1rem; font-size: .92rem; }
  .same-tick { padding: .5rem 0; }
}

.same-tick {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  font-size: .88rem; font-weight: 500; margin-bottom: .7rem;
}
.same-tick input { accent-color: var(--accent); }

.order-listing {
  display: flex; gap: 1rem; align-items: center; background: #fff;
  border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: var(--radius); padding: .9rem 1rem; margin-bottom: 1.2rem;
}
.order-listing img { width: 92px; height: 68px; object-fit: cover; border-radius: 9px; flex: none; }
.order-listing .t { font-weight: 700; }
.order-listing .p { color: var(--accent-dark); font-weight: 700; font-family: var(--display); }

.form-errors {
  background: #fdecec; border: 1px solid #f0b4b4; color: #8f2424;
  border-radius: 10px; padding: .85rem 1rem .85rem 1.4rem; margin-bottom: 1.2rem; font-size: .9rem;
}
.form-errors ul { margin: .4rem 0 0; padding-left: 1rem; }

/* ---------- invoice / confirmation ---------- */
.inv-wrap { max-width: 840px; }
.inv-ok {
  background: #e8f7ee; border: 1px solid #b7e3c9; color: #10693a;
  border-radius: var(--radius); padding: 1.1rem 1.3rem; margin-bottom: 1.3rem;
}
.inv-ok h1 { margin: 0 0 .3rem; font-size: 1.4rem; color: #0d5730; }
.inv-ok .ref {
  display: inline-block; margin-top: .5rem; background: #fff; border: 1px solid #b7e3c9;
  border-radius: 8px; padding: .3rem .7rem; font-family: var(--display);
  font-size: 1.05rem; font-weight: 700; letter-spacing: .04em; color: #0d5730;
}
.inv-doc {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.7rem; box-shadow: var(--shadow);
}
.inv-head { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
.inv-head img { max-width: 190px; height: auto; }
.inv-head .biz { text-align: right; color: var(--muted); font-size: .83rem; line-height: 1.6; }
.inv-title { margin: 1.4rem 0 .2rem; font-size: 1.35rem; }
.inv-sub { color: var(--muted); font-size: .87rem; margin: 0 0 1.2rem; }
.inv-block { margin-top: 1.4rem; }
.inv-block h3 {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin: 0 0 .5rem; padding-bottom: .4rem; border-bottom: 1px solid var(--line);
}
.inv-rows { display: grid; grid-template-columns: minmax(140px, 210px) 1fr; gap: .45rem 1rem; font-size: .9rem; }
.inv-rows dt { color: var(--muted); }
.inv-rows dd { margin: 0; font-weight: 600; }
.inv-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem; }
.inv-total {
  margin-top: 1.3rem; margin-left: auto; max-width: 340px;
  border-top: 2px solid var(--ink); padding-top: .7rem;
}
.inv-total div { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; font-size: .92rem; }
.inv-total .grand { font-size: 1.15rem; font-weight: 700; color: var(--accent-dark); border-top: 1px solid var(--line); margin-top: .3rem; padding-top: .55rem; }
.inv-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin: 1.4rem 0; }
.inv-warn {
  background: #fff7e6; border: 1px solid #f6d78d; border-left: 4px solid #e0a33a;
  border-radius: 10px; padding: .9rem 1.1rem; font-size: .88rem; margin-top: 1.3rem;
}

@media print {
  .site-header, .site-footer, .inv-actions, .inv-ok, .nav-toggle { display: none !important; }
  .inv-doc { border: 0; box-shadow: none; padding: 0; }
  body { background: #fff; }
}

.order-field .group-label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .4rem; }

/* ---------- small-screen refinements (down to 320px) ---------- */

/* The hamburger is the only way to reach the menu on a phone; 28px was well
   under a comfortable thumb target. */
.nav-toggle {
  width: 44px; height: 44px; display: none;
  align-items: center; justify-content: center;
  border-radius: 8px;
}
@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; }
}
.nav-toggle:hover { background: rgba(255,255,255,.1); }

/* Give the compare tick a real hit area rather than the bare 21px control. */
.compare-label { padding: .45rem .2rem; margin: -.45rem -.2rem; }
.compare-label input { width: 18px; height: 18px; }

@media (max-width: 420px) {
  /* Reclaim the horizontal space that padding eats on a narrow phone. */
  .wrap { padding: 0 14px; }
  .panel, .tile, .tcard { padding: 18px; }
  .vcard-body { padding: 14px 14px 16px; }
  .section { padding: 36px 0; }
  h1 { font-size: 1.72rem; }
  h2 { font-size: 1.32rem; }
  .price-big { font-size: 1.8rem; }

  /* Long unbroken strings (emails, URLs, references) must wrap rather than
     widen the page. */
  body { overflow-wrap: break-word; }
  .spec-table td, .site-footer li, .prose { overflow-wrap: anywhere; }

  .thumbs { grid-template-columns: repeat(3, 1fr); }
  .filters-foot { flex-direction: column; }
}

/* Tables and the map can never be narrower than their content, so let them
   scroll inside their own box instead of dragging the page sideways. */
.spec-table { display: block; overflow-x: auto; }
.spec-table tbody, .spec-table tr { width: 100%; }
.panel iframe, .invoice iframe { max-width: 100%; }

/* ---------- very wide screens ---------- */
@media (min-width: 1600px) {
  .wrap { max-width: 1400px; }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}
@media (min-width: 2000px) {
  .wrap { max-width: 1600px; }
}

/* ---------- touch targets in the filter sidebar ---------- */
/* On a phone these are the controls people actually poke at, and several were
   under 25px tall. Widening the label (not the control) keeps the visual
   density while making the whole row tappable. */
@media (max-width: 820px) {
  .checks label {
    padding: .5rem .25rem; margin: 0 -.25rem;
    min-height: 44px; align-items: center;
  }
  .checks input { width: 20px; height: 20px; flex: 0 0 auto; }
  .swatch span { width: 38px; height: 38px; }

  .more-toggle {
    display: block; width: 100%; text-align: left;
    padding: .8rem 0; min-height: 44px; font-size: .95rem;
  }

  /* "Clear all" / "Apply" sit at the bottom of the filter panel. */
  .filters-foot .btn-sm { padding: .7rem 1rem; font-size: .92rem; min-height: 44px; }

  .fgroup > label, .fgroup-title { font-size: .82rem; }
}

/* ---------- order + invoice: phone layout ---------- */
@media (max-width: 620px) {
  /* The label column was holding its 210px minimum and squeezing values into a
     ~65px sliver, so "2020 Mazda MX-5 Grand Touring" wrapped one word per line.
     Stacked label-over-value, each gets the full width. */
  .inv-rows { grid-template-columns: 1fr; gap: 0; }
  .inv-rows dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; margin-top: .6rem; }
  .inv-rows dd { margin: 0 0 .1rem; }

  /* Logo left, business details underneath it — right-aligning a block that
     starts at the left edge of a 375px screen just looks like a mistake. */
  .inv-head { flex-direction: column; gap: .9rem; }
  .inv-head .biz { text-align: left; }
  .inv-doc { padding: 1.1rem; }
  .inv-total { max-width: none; margin-left: 0; }
  .inv-actions .btn { flex: 1 1 100%; }

  .order-sec { padding: 1.1rem 1rem; }
  .order-sec > h2 { font-size: 1.02rem; }
  /* Full-width tap targets: a phone thumb should not have to find a pill. */
  .pick label { flex: 1 1 100%; }
  .pick.pay label { flex: 1 1 calc(50% - .25rem); }
  .order-listing { flex-direction: column; align-items: flex-start; }
  .order-listing img { width: 100%; height: 150px; }
}